| :root { |
| color-scheme: light; |
| --ink: #17211c; |
| --muted: #64716b; |
| --line: #d8e0da; |
| --panel: #ffffff; |
| --paper: #f7f4ec; |
| --soft: #edf7f4; |
| --accent: #0f766e; |
| --accent-strong: #0a544f; |
| --accent-warm: #b7791f; |
| --warn: #a91f45; |
| --ok: #176a3a; |
| --shadow: 0 20px 60px rgba(23, 33, 28, 0.1); |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| html { |
| min-width: 320px; |
| } |
|
|
| body { |
| margin: 0; |
| min-height: 100vh; |
| background: |
| linear-gradient(135deg, rgba(15, 118, 110, 0.08), transparent 42%), |
| linear-gradient(180deg, #fbfcfb 0%, var(--paper) 100%); |
| color: var(--ink); |
| } |
|
|
| button, |
| input, |
| select, |
| audio { |
| font: inherit; |
| } |
|
|
| button, |
| .download-button { |
| min-height: 52px; |
| border: 0; |
| border-radius: 8px; |
| background: var(--accent); |
| color: #fff; |
| cursor: pointer; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 10px; |
| font-weight: 850; |
| padding: 0 22px; |
| text-decoration: none; |
| white-space: nowrap; |
| box-shadow: 0 10px 22px rgba(15, 118, 110, 0.2); |
| } |
|
|
| button:hover, |
| .download-button:hover { |
| background: var(--accent-strong); |
| } |
|
|
| button:focus-visible, |
| .download-button:focus-visible, |
| input:focus-visible, |
| select:focus-visible, |
| .dropzone label:focus-within { |
| outline: 4px solid rgba(15, 118, 110, 0.22); |
| outline-offset: 3px; |
| } |
|
|
| button:disabled { |
| cursor: wait; |
| opacity: 0.74; |
| } |
|
|
| .app-shell { |
| width: min(1100px, calc(100% - 32px)); |
| margin: 0 auto; |
| padding: 36px 0; |
| } |
|
|
| .topbar { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 16px; |
| margin-bottom: 26px; |
| } |
|
|
| h1, |
| h2, |
| p { |
| margin: 0; |
| } |
|
|
| h1 { |
| font-size: clamp(2.2rem, 4vw, 4.4rem); |
| line-height: 1; |
| letter-spacing: 0; |
| } |
|
|
| h2 { |
| font-size: clamp(1.35rem, 2vw, 1.75rem); |
| line-height: 1.15; |
| letter-spacing: 0; |
| } |
|
|
| h3 { |
| margin: 0; |
| font-size: 1rem; |
| line-height: 1.2; |
| letter-spacing: 0; |
| } |
|
|
| .eyebrow { |
| color: var(--accent-strong); |
| font-size: 0.78rem; |
| font-weight: 850; |
| letter-spacing: 0.08em; |
| margin-bottom: 8px; |
| text-transform: uppercase; |
| } |
|
|
| .panel { |
| background: rgba(255, 255, 255, 0.96); |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| box-shadow: var(--shadow); |
| padding: clamp(20px, 3vw, 30px); |
| } |
|
|
| .login-panel { |
| max-width: 620px; |
| } |
|
|
| .workspace { |
| display: grid; |
| grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr); |
| gap: 22px; |
| align-items: start; |
| } |
|
|
| .panel-heading, |
| .status-header { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 14px; |
| } |
|
|
| .panel-heading { |
| justify-content: flex-start; |
| } |
|
|
| .step-mark { |
| width: 42px; |
| height: 42px; |
| flex: 0 0 42px; |
| border-radius: 50%; |
| background: var(--accent); |
| color: #fff; |
| display: grid; |
| place-items: center; |
| font-weight: 900; |
| box-shadow: 0 10px 20px rgba(15, 118, 110, 0.18); |
| } |
|
|
| .stack { |
| display: grid; |
| gap: 10px; |
| margin-top: 22px; |
| } |
|
|
| .inline { |
| display: grid; |
| grid-template-columns: 1fr auto; |
| gap: 12px; |
| } |
|
|
| label { |
| color: var(--muted); |
| font-weight: 800; |
| } |
|
|
| input[type="password"], |
| select { |
| width: 100%; |
| min-height: 52px; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| padding: 0 14px; |
| background: #fff; |
| color: var(--ink); |
| } |
|
|
| .field-group { |
| display: grid; |
| gap: 8px; |
| } |
|
|
| .quiet-button { |
| min-width: 112px; |
| background: #ffffff; |
| border: 1px solid var(--line); |
| box-shadow: none; |
| color: var(--accent-strong); |
| } |
|
|
| .quiet-button:hover { |
| background: var(--soft); |
| color: var(--accent-strong); |
| } |
|
|
| .upload-panel, |
| .status-panel { |
| display: grid; |
| gap: 18px; |
| } |
|
|
| #jobMessage { |
| color: var(--muted); |
| font-size: 1.02rem; |
| line-height: 1.55; |
| } |
|
|
| .quality-hint { |
| border: 1px solid #ead08a; |
| border-radius: 8px; |
| background: #fff8df; |
| color: #654708; |
| font-weight: 800; |
| line-height: 1.45; |
| padding: 12px 14px; |
| } |
|
|
| .quality-hint.poor { |
| border-color: #efc4cf; |
| background: #fff2f5; |
| color: var(--warn); |
| } |
|
|
| .engine-notice { |
| border: 1px solid #b7ddd7; |
| border-radius: 8px; |
| background: var(--soft); |
| color: var(--accent-strong); |
| font-weight: 800; |
| line-height: 1.45; |
| padding: 13px 15px; |
| } |
|
|
| .engine-notice.warning { |
| border-color: #efc4cf; |
| background: #fff2f5; |
| color: var(--warn); |
| } |
|
|
| .dropzone { |
| display: grid; |
| gap: 14px; |
| } |
|
|
| .dropzone input { |
| inline-size: 1px; |
| block-size: 1px; |
| opacity: 0; |
| position: absolute; |
| } |
|
|
| .dropzone label { |
| min-height: 230px; |
| border: 2px dashed #b8c8be; |
| border-radius: 8px; |
| background: linear-gradient(180deg, #ffffff, #f8fbf9); |
| display: grid; |
| place-items: center; |
| align-content: center; |
| gap: 10px; |
| padding: 28px; |
| text-align: center; |
| cursor: pointer; |
| transition: border-color 150ms ease, background 150ms ease, transform 150ms ease; |
| } |
|
|
| .dropzone label:hover, |
| .dropzone.is-dragging label { |
| border-color: var(--accent); |
| background: var(--soft); |
| transform: translateY(-1px); |
| } |
|
|
| .file-icon { |
| width: 64px; |
| height: 74px; |
| border: 2px solid var(--accent); |
| border-radius: 8px; |
| color: var(--accent-strong); |
| display: grid; |
| place-items: center; |
| font-size: 0.9rem; |
| font-weight: 950; |
| background: #fff; |
| } |
|
|
| .drop-title { |
| color: var(--ink); |
| font-size: 1.35rem; |
| font-weight: 950; |
| } |
|
|
| #fileName { |
| color: var(--muted); |
| max-width: 100%; |
| overflow-wrap: anywhere; |
| } |
|
|
| .badge { |
| min-width: 76px; |
| background: #fff7db; |
| border: 1px solid #e9d08d; |
| border-radius: 999px; |
| color: #664309; |
| font-weight: 900; |
| padding: 8px 13px; |
| text-align: center; |
| } |
|
|
| .badge.complete { |
| background: #edf8ef; |
| border-color: #b8dec0; |
| color: var(--ok); |
| } |
|
|
| .badge.failed { |
| background: #fff2f5; |
| border-color: #efc4cf; |
| color: var(--warn); |
| } |
|
|
| .progress-summary { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| color: var(--accent-strong); |
| font-weight: 900; |
| } |
|
|
| #progressPercent { |
| min-width: 46px; |
| text-align: end; |
| color: var(--muted); |
| } |
|
|
| .meter { |
| width: 100%; |
| height: 14px; |
| overflow: hidden; |
| border-radius: 999px; |
| background: #e5ece6; |
| } |
|
|
| .meter span { |
| display: block; |
| width: 0%; |
| height: 100%; |
| background: linear-gradient(90deg, var(--accent), var(--accent-warm)); |
| transition: width 180ms ease; |
| } |
|
|
| .stage-detail { |
| border: 1px solid #cfe0d8; |
| border-radius: 8px; |
| background: #f8fbf9; |
| display: grid; |
| gap: 4px; |
| padding: 12px 14px; |
| } |
|
|
| .stage-detail span { |
| color: var(--accent-strong); |
| font-size: 0.72rem; |
| font-weight: 900; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
|
|
| .stage-detail strong { |
| font-size: 1rem; |
| line-height: 1.2; |
| } |
|
|
| .stage-detail small { |
| color: var(--muted); |
| font-size: 0.95rem; |
| line-height: 1.35; |
| overflow-wrap: anywhere; |
| } |
|
|
| .stage-detail .stage-meta { |
| border-top: 1px solid #dce8e2; |
| color: #596760; |
| font-size: 0.82rem; |
| font-weight: 750; |
| margin-top: 4px; |
| padding-top: 8px; |
| } |
|
|
| .stage-item-progress { |
| display: grid; |
| gap: 8px; |
| padding-top: 4px; |
| } |
|
|
| .stage-item-progress > div:first-child { |
| align-items: baseline; |
| display: flex; |
| gap: 10px; |
| justify-content: space-between; |
| } |
|
|
| .stage-item-progress span { |
| letter-spacing: 0; |
| text-transform: none; |
| } |
|
|
| .stage-item-progress strong { |
| color: var(--accent-strong); |
| font-size: 0.92rem; |
| } |
|
|
| .stage-item-meter { |
| background: #e3ece7; |
| border-radius: 999px; |
| height: 8px; |
| overflow: hidden; |
| } |
|
|
| .stage-item-meter span { |
| background: var(--accent); |
| display: block; |
| height: 100%; |
| transition: width 180ms ease; |
| width: 0%; |
| } |
|
|
| .stage-list { |
| display: grid; |
| grid-template-columns: repeat(5, minmax(0, 1fr)); |
| gap: 8px; |
| list-style: none; |
| margin: -4px 0 0; |
| padding: 0; |
| } |
|
|
| .stage-list li { |
| min-width: 0; |
| color: var(--muted); |
| display: flex; |
| align-items: center; |
| gap: 7px; |
| font-size: 0.82rem; |
| font-weight: 850; |
| line-height: 1.2; |
| } |
|
|
| .stage-dot { |
| width: 10px; |
| height: 10px; |
| flex: 0 0 10px; |
| border-radius: 50%; |
| background: #d8e1dc; |
| } |
|
|
| .stage-list li.done { |
| color: var(--accent-strong); |
| } |
|
|
| .stage-list li.done .stage-dot { |
| background: var(--accent); |
| } |
|
|
| .stage-list li.active { |
| color: var(--ink); |
| } |
|
|
| .stage-list li.active .stage-dot { |
| background: var(--accent-warm); |
| box-shadow: 0 0 0 4px rgba(181, 128, 31, 0.16); |
| } |
|
|
| .stage-list li.failed { |
| color: var(--warn); |
| } |
|
|
| .stage-list li.failed .stage-dot { |
| background: var(--warn); |
| } |
|
|
| .stats { |
| display: grid; |
| grid-template-columns: repeat(6, minmax(0, 1fr)); |
| gap: 10px; |
| margin: 0; |
| } |
|
|
| .stats div { |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: #fcfdfc; |
| padding: 12px; |
| min-width: 0; |
| } |
|
|
| dt { |
| color: var(--muted); |
| font-size: 0.78rem; |
| font-weight: 850; |
| } |
|
|
| dd { |
| margin: 6px 0 0; |
| font-size: clamp(1rem, 1.7vw, 1.32rem); |
| font-weight: 950; |
| overflow-wrap: anywhere; |
| } |
|
|
| .audio-panel { |
| display: grid; |
| gap: 12px; |
| } |
|
|
| audio { |
| width: 100%; |
| } |
|
|
| .browser-speech-panel { |
| background: #f3fbf8; |
| border: 1px solid #b8ddd2; |
| border-radius: 8px; |
| display: grid; |
| gap: 12px; |
| padding: 14px; |
| } |
|
|
| .browser-speech-panel p { |
| color: var(--accent-strong); |
| font-size: 0.93rem; |
| font-weight: 750; |
| line-height: 1.55; |
| margin: 0; |
| } |
|
|
| .browser-speech-actions { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 10px; |
| } |
|
|
| .browser-speech-actions button { |
| flex: 1 1 150px; |
| } |
|
|
| .transcript-panel { |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| display: grid; |
| gap: 12px; |
| padding: 14px; |
| } |
|
|
| .transcript-header { |
| align-items: start; |
| display: flex; |
| gap: 12px; |
| justify-content: space-between; |
| } |
|
|
| .transcript-header h3 { |
| font-size: 1rem; |
| margin: 4px 0 0; |
| } |
|
|
| .transcript-panel pre { |
| background: #fbfcfb; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| color: var(--ink); |
| font-family: Tahoma, "Segoe UI", Arial, sans-serif; |
| font-size: 1.05rem; |
| line-height: 1.9; |
| margin: 0; |
| max-height: 340px; |
| overflow: auto; |
| padding: 14px; |
| text-align: right; |
| white-space: pre-wrap; |
| word-break: normal; |
| } |
|
|
| .transcript-panel small { |
| color: var(--muted); |
| font-size: 0.84rem; |
| line-height: 1.45; |
| } |
|
|
| .comparison-panel { |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| display: grid; |
| gap: 12px; |
| padding: 14px; |
| } |
|
|
| .comparison-header, |
| .comparison-group-heading { |
| align-items: start; |
| display: flex; |
| gap: 12px; |
| justify-content: space-between; |
| } |
|
|
| .comparison-header h3, |
| .comparison-group-heading h4 { |
| font-size: 1rem; |
| margin: 4px 0 0; |
| } |
|
|
| .comparison-panel p, |
| .comparison-group-heading span, |
| .comparison-sample span, |
| .comparison-sample small { |
| color: var(--muted); |
| font-size: 0.86rem; |
| line-height: 1.45; |
| margin: 0; |
| } |
|
|
| .comparison-meter { |
| background: var(--soft); |
| border-radius: 999px; |
| height: 10px; |
| overflow: hidden; |
| } |
|
|
| .comparison-meter span { |
| background: linear-gradient(90deg, var(--accent), #c78321); |
| display: block; |
| height: 100%; |
| width: 0; |
| } |
|
|
| .comparison-results { |
| display: grid; |
| gap: 14px; |
| } |
|
|
| .comparison-group { |
| border-top: 1px solid var(--line); |
| display: grid; |
| gap: 12px; |
| padding-top: 14px; |
| } |
|
|
| .comparison-group pre { |
| background: #fbfcfb; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| font-family: Tahoma, "Segoe UI", Arial, sans-serif; |
| font-size: 0.94rem; |
| line-height: 1.75; |
| margin: 0; |
| max-height: 170px; |
| overflow: auto; |
| padding: 12px; |
| text-align: right; |
| white-space: pre-wrap; |
| } |
|
|
| .comparison-samples { |
| display: grid; |
| gap: 10px; |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); |
| } |
|
|
| .comparison-sample { |
| background: #fcfdfc; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| display: grid; |
| gap: 8px; |
| padding: 12px; |
| } |
|
|
| .comparison-sample.failed { |
| background: #fff8f8; |
| border-color: #f0c7cf; |
| } |
|
|
| .comparison-sample audio { |
| width: 100%; |
| } |
|
|
| .comparison-sample a { |
| color: var(--accent-strong); |
| font-weight: 850; |
| text-decoration: none; |
| } |
|
|
| .comparison-error { |
| color: var(--warn) !important; |
| font-weight: 750; |
| } |
|
|
| .history-panel { |
| border-top: 1px solid var(--line); |
| display: grid; |
| gap: 12px; |
| padding-top: 4px; |
| } |
|
|
| .history-panel ul { |
| display: grid; |
| gap: 8px; |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| .history-panel li { |
| align-items: center; |
| background: #fcfdfc; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| display: grid; |
| gap: 10px; |
| grid-template-columns: minmax(0, 1fr) auto; |
| padding: 12px; |
| } |
|
|
| .history-panel strong, |
| .history-panel span { |
| display: block; |
| overflow-wrap: anywhere; |
| } |
|
|
| .history-panel strong { |
| font-size: 0.95rem; |
| } |
|
|
| .history-panel span { |
| color: var(--muted); |
| font-size: 0.84rem; |
| margin-top: 3px; |
| } |
|
|
| .history-panel a { |
| color: var(--accent-strong); |
| font-weight: 850; |
| text-decoration: none; |
| } |
|
|
| .history-panel a:hover { |
| text-decoration: underline; |
| } |
|
|
| .history-actions { |
| align-items: center; |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| justify-content: flex-end; |
| } |
|
|
| .link-button { |
| min-height: 40px; |
| border: 1px solid var(--line); |
| background: #ffffff; |
| box-shadow: none; |
| color: var(--accent-strong); |
| padding: 0 14px; |
| } |
|
|
| .link-button:hover { |
| background: var(--soft); |
| color: var(--accent-strong); |
| } |
|
|
| .error { |
| min-height: 1.4em; |
| color: var(--warn); |
| font-weight: 750; |
| line-height: 1.45; |
| } |
|
|
| .hidden { |
| display: none !important; |
| } |
|
|
| @media (max-width: 860px) { |
| .workspace, |
| .inline, |
| .stats { |
| grid-template-columns: 1fr; |
| } |
|
|
| .topbar, |
| .status-header { |
| align-items: flex-start; |
| } |
|
|
| .topbar { |
| flex-direction: column; |
| } |
|
|
| .quiet-button { |
| width: 100%; |
| } |
| } |
|
|
| @media (max-width: 520px) { |
| .app-shell { |
| width: min(100% - 22px, 1100px); |
| padding: 22px 0; |
| } |
|
|
| .panel { |
| padding: 18px; |
| } |
|
|
| .panel-heading { |
| align-items: center; |
| } |
|
|
| .dropzone label { |
| min-height: 200px; |
| } |
|
|
| button, |
| .download-button { |
| width: 100%; |
| } |
|
|
| .history-panel li { |
| grid-template-columns: 1fr; |
| } |
|
|
| .history-actions { |
| justify-content: stretch; |
| } |
|
|
| .history-actions > * { |
| flex: 1 1 100%; |
| } |
|
|
| .stage-list { |
| grid-template-columns: 1fr; |
| } |
|
|
| .stage-list li { |
| font-size: 0.9rem; |
| } |
| } |
|
|
