:root {
  color-scheme: light;
  --ink: #202d2b;
  --ink-soft: #566460;
  --muted: #97a29e;
  --line: #e7ebe6;
  --paper: #fff;
  --canvas: #f5f6f2;
  --mint: #c9edda;
  --green: #196d51;
  --green-deep: #174d3e;
  --font: 'Manrope', 'Noto Sans SC', sans-serif;
  font-family: var(--font);
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(ellipse at 48% 15%, #fbfcf8 0, var(--canvas) 48%, #f1f3ed 100%); }
button, select, textarea { font: inherit; }
button { color: inherit; }
.app-shell { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(32,45,43,.08); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--green-deep); }
.brand-mark svg { width: 25px; height: 25px; fill: none; stroke: #daf4e5; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand-name { font-size: 22px; font-weight: 800; letter-spacing: -.06em; }
.brand-dot { color: #59a47b; }
.topbar-right { display: flex; align-items: center; gap: 21px; font-size: 13px; color: #78847f; }
.secure-label { display: inline-flex; align-items: center; gap: 7px; }
.secure-icon { color: #67a881; font-size: 17px; }
.topbar-divider { height: 20px; width: 1px; background: #dfe4de; }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e6efe7; color: #48715c; font-size: 11px; font-weight: 700; }
.workspace-heading { display: flex; align-items: end; justify-content: space-between; margin: 51px 0 27px; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #7b9283; font: 500 9px 'DM Mono', monospace; letter-spacing: .18em; }
.eyebrow-line { display: inline-block; width: 18px; height: 1px; background: #a6beab; }
h1 { margin: 14px 0 7px; font-size: clamp(28px, 3vw, 36px); line-height: 1.28; letter-spacing: -.065em; font-weight: 700; }
h1 span { color: #759281; }
.subtitle { margin: 0; color: #8b9690; font-size: 14px; letter-spacing: .015em; }
.heading-meta { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 8px 11px; border: 1px solid #e4e9e2; border-radius: 99px; background: rgba(255,255,255,.58); color: #8b9690; font-size: 12px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #65aa7d; box-shadow: 0 0 0 3px #e3f1e7; }
.service-state { color: #6c9d79; }
.service-state.offline { color: #ca866d; }
.workbench { display: grid; grid-template-columns: minmax(330px, .86fr) minmax(450px, 1.34fr); gap: 16px; }
.record-panel, .transcript-panel { min-height: 390px; border: 1px solid rgba(214,223,215,.82); border-radius: 17px; background: rgba(255,255,255,.86); box-shadow: 0 10px 32px rgba(43,63,50,.035); }
.record-panel { padding: 20px 22px 0; display: flex; flex-direction: column; }
.transcript-panel { padding: 20px 23px 0; display: flex; flex-direction: column; }
.panel-topline { min-height: 28px; display: flex; justify-content: space-between; align-items: center; }
.panel-title { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; }
.step-number { color: #9cac9e; font: 500 10px 'DM Mono', monospace; letter-spacing: .04em; }
.icon-button { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid #e6ebe6; border-radius: 50%; background: #fff; color: #8c9991; font-size: 12px; cursor: pointer; transition: all .18s; }
.icon-button:hover { border-color: #b8d2bf; color: var(--green); }
.record-center { position: relative; display: flex; align-items: center; flex-direction: column; padding-top: 25px; }
.record-glow { position: absolute; top: 50px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(201,237,218,.58), rgba(201,237,218,0) 70%); pointer-events: none; transition: all .25s; }
.record-button { position: relative; z-index: 1; width: 78px; height: 78px; display: grid; place-items: center; border: 6px solid #edf7f0; border-radius: 50%; background: #d5efdf; box-shadow: 0 8px 19px rgba(79,144,101,.13), inset 0 0 0 1px rgba(93,160,115,.18); cursor: pointer; transition: transform .2s, background .2s, box-shadow .2s; }
.record-button:hover { transform: translateY(-2px); box-shadow: 0 12px 23px rgba(79,144,101,.2), inset 0 0 0 1px rgba(93,160,115,.18); }
.record-button:active { transform: scale(.97); }
.mic-icon, .stop-icon { width: 29px; height: 29px; fill: none; stroke: #326b4c; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.stop-icon { display: none; fill: #fff; stroke: #fff; stroke-width: 1; }
.record-state { margin-top: 16px; color: #2e3b37; font-size: 14px; font-weight: 700; }
.record-hint { margin-top: 5px; color: #a1aaa5; font-size: 11px; }
.timer { margin-top: 16px; color: #718078; font: 500 17px 'DM Mono', monospace; letter-spacing: .08em; }
.recording .record-button { background: #dd8e74; border-color: #fbefeb; box-shadow: 0 7px 20px rgba(207,129,103,.2), inset 0 0 0 1px rgba(190,104,81,.12); animation: record-pulse 1.8s ease-in-out infinite; }
.recording .record-glow { background: radial-gradient(circle, rgba(244,203,188,.55), rgba(244,203,188,0) 70%); }
.recording .mic-icon { display: none; }
.recording .stop-icon { display: block; }
.recording .record-state { color: #bb735e; }
@keyframes record-pulse { 0%,100% { box-shadow: 0 7px 20px rgba(207,129,103,.2), 0 0 0 0 rgba(221,142,116,.17); } 50% { box-shadow: 0 7px 20px rgba(207,129,103,.23), 0 0 0 10px rgba(221,142,116,0); } }
.waveform { height: 38px; margin: 10px auto 8px; display: flex; align-items: center; justify-content: center; gap: 3px; opacity: .58; }
.wave-bar { width: 3px; height: var(--bar-height, 8px); border-radius: 9px; background: #a7cab0; transform: scaleY(.34); transition: transform .13s ease, background .2s; }
.recording .wave-bar { background: #d5967f; }
.recording .wave-bar:nth-child(3n + 1) { animation: wave .65s ease-in-out infinite alternate; }
.recording .wave-bar:nth-child(3n + 2) { animation: wave .85s ease-in-out -.3s infinite alternate; }
.recording .wave-bar:nth-child(3n) { animation: wave .55s ease-in-out -.45s infinite alternate; }
@keyframes wave { to { transform: scaleY(1); } }
.record-actions { display: flex; gap: 9px; justify-content: center; margin-top: auto; padding-bottom: 12px; }
.button { min-height: 38px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 0 15px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .18s; }
.button-primary { min-width: 137px; color: #fff; background: var(--green-deep); box-shadow: 0 4px 9px rgba(23,77,62,.12); }
.button-primary:hover { background: #21654e; transform: translateY(-1px); }
.button-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.button-record-dot { width: 7px; height: 7px; border: 2px solid #bde5cb; border-radius: 50%; }
.recording ~ .record-actions .button-record-dot { background: #fff; border-color: #fff; }
.button-secondary { min-width: 116px; border-color: #e5e9e4; color: #606c67; background: #fff; }
.button-secondary:hover { border-color: #b9d2be; background: #fbfdfb; }
.button-secondary svg { width: 15px; height: 15px; fill: none; stroke: #7a8980; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.upload-button { user-select: none; }
.record-footer { min-height: 43px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #eff1ed; }
.language-control { position: relative; display: flex; align-items: center; gap: 7px; color: #9ba49e; font-size: 11px; }
.language-icon { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 5px; color: #6e8b77; background: #edf4ed; font-size: 9px; }
.language-control select { max-width: 80px; padding: 2px 12px 2px 1px; appearance: none; border: 0; outline: 0; color: #637169; background: transparent; font-size: 11px; cursor: pointer; }
.select-chevron { position: absolute; right: 1px; color: #98a49c; font-size: 13px; pointer-events: none; }
.max-duration { color: #a8b0aa; font-size: 10px; }
.transcript-topline { padding-bottom: 14px; border-bottom: 1px solid #eff1ed; }
.result-actions { display: flex; align-items: center; gap: 12px; }
.result-count { color: #a0aaa3; font: 10px 'DM Mono', monospace; }
.text-button, .copy-button { border: 0; background: transparent; cursor: pointer; font-size: 11px; }
.text-button { padding: 4px 0; color: #919d95; }
.text-button:hover:not(:disabled) { color: #a76556; }
.text-button:disabled { opacity: .48; cursor: default; }
.copy-button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid #e4e9e3; border-radius: 6px; color: #67756c; }
.copy-button:not(:disabled):hover { border-color: #bcd3c2; color: var(--green); background: #fbfdfb; }
.copy-button:disabled { opacity: .45; cursor: default; }
.copy-button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.transcript-body { position: relative; flex: 1; min-height: 265px; display: grid; }
.empty-state { display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 22px 12px 25px; text-align: center; }
.empty-art { position: relative; width: 84px; height: 65px; margin-bottom: 8px; border-radius: 16px; background: linear-gradient(135deg, #eff7ef, #f5f8f2); transform: rotate(-4deg); }
.empty-art-line { position: absolute; left: 22px; height: 4px; border-radius: 99px; background: #badac2; transform: rotate(-4deg); }
.line-one { top: 22px; width: 37px; }.line-two { top: 31px; left: 22px; width: 45px; background: #c8e5cd; }.line-three { top: 40px; width: 28px; background: #d3e9d2; }
.empty-art-spark { position: absolute; top: 10px; right: 13px; color: #80ad89; font-size: 16px; }
.empty-title { margin: 4px 0 6px; color: #69766f; font-size: 13px; font-weight: 700; }
.empty-state p { margin: 0; color: #a3aca6; font-size: 11px; line-height: 1.85; }
.empty-note { margin-top: 15px; padding: 6px 10px; border-radius: 99px; color: #94a298; background: #f5f8f4; font-size: 10px; }
.empty-note span { margin-right: 4px; color: #93bf9b; }
.loading-state { display: flex; align-items: center; justify-content: center; gap: 14px; color: #6a7a70; }
.loading-state[hidden] { display: none; }
.loading-state strong { font-size: 13px; }
.loading-state p { margin: 4px 0 0; color: #9aa69d; font-size: 11px; }
.loading-spinner { width: 23px; height: 23px; border: 2px solid #e2eee4; border-top-color: #71a881; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.transcript-text { width: 100%; height: 100%; min-height: 245px; padding: 19px 3px; resize: vertical; border: 0; outline: 0; color: #394740; background: transparent; font-size: 14px; line-height: 1.95; }
.transcript-text::placeholder { color: #b4bdb6; }
.transcript-footer { min-height: 45px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #eff1ed; }
.service-note { display: inline-flex; align-items: center; gap: 6px; color: #9ba49e; font-size: 10px; }
.service-note-icon { color: #659171; font-size: 11px; }
.result-time { color: #a8b0ab; font: 9px 'DM Mono', monospace; }
.tips-row { display: flex; align-items: center; gap: 12px; margin-top: 17px; }
.tip-card { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; padding: 12px 13px; border: 1px solid rgba(225,231,224,.86); border-radius: 11px; background: rgba(255,255,255,.52); }
.tip-icon { flex: 0 0 27px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; font-size: 12px; }
.tip-icon-mint { color: #609276; background: #e8f4e9; }.tip-icon-peach { color: #b77a64; background: #f8ede7; }.tip-icon-lilac { color: #8d7fa8; background: #f0edf7; }
.tip-card strong { display: block; color: #69756e; font-size: 11px; font-weight: 700; white-space: nowrap; }
.tip-card p { margin: 4px 0 0; color: #a2aca5; font-size: 10px; white-space: nowrap; }
.privacy-note { display: flex; align-items: center; gap: 6px; color: #9ba89e; font-size: 10px; white-space: nowrap; }
.privacy-note span { color: #77a685; font-size: 14px; }
.page-footer { min-height: 62px; display: flex; align-items: center; justify-content: space-between; margin-top: 19px; color: #a2aaa4; font-size: 10px; }
.footer-dot { padding: 0 3px; color: #81a78b; }
.page-footer span:last-child { font: 9px 'DM Mono', monospace; letter-spacing: .1em; }
.toast { position: fixed; z-index: 8; bottom: 26px; left: 50%; max-width: min(440px, calc(100% - 32px)); padding: 11px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; color: #f5f8f5; background: #243c33; box-shadow: 0 7px 24px rgba(27,44,34,.2); font-size: 12px; opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: all .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.modal-backdrop { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(26,38,32,.26); backdrop-filter: blur(4px); }
.modal-backdrop[hidden] { display: none; }
.help-modal { position: relative; width: min(405px, 100%); padding: 30px; border: 1px solid #e4eae3; border-radius: 16px; background: #fff; box-shadow: 0 20px 60px rgba(29,52,38,.17); }
.modal-close { position: absolute; top: 12px; right: 14px; width: 28px; height: 28px; border: 0; border-radius: 7px; color: #8b978e; background: transparent; font-size: 22px; cursor: pointer; }
.modal-kicker { color: #80a389; font: 10px 'DM Mono', monospace; letter-spacing: .14em; }
.help-modal h2 { margin: 9px 0 16px; font-size: 19px; letter-spacing: -.04em; }
.help-modal p { color: #7e8a82; font-size: 13px; line-height: 1.8; }
.help-modal code { padding: 2px 4px; border-radius: 4px; color: #50785c; background: #f0f6f0; font-size: 11px; }
.modal-ok { margin-top: 10px; }

@media (max-width: 850px) {
  .app-shell { width: min(100% - 36px, 630px); }
  .workspace-heading { margin-top: 39px; }
  .workbench { grid-template-columns: 1fr; }
  .record-panel { min-height: 385px; }
  .transcript-panel { min-height: 385px; }
  .tips-row { flex-wrap: wrap; }
  .tip-card { flex-basis: calc(50% - 7px); }
  .privacy-note { margin-left: auto; }
}
@media (max-width: 520px) {
  .app-shell { width: calc(100% - 28px); }
  .topbar { height: 63px; }
  .topbar-right { gap: 11px; }
  .secure-label, .topbar-divider { display: none; }
  .workspace-heading { align-items: flex-start; flex-direction: column; gap: 13px; margin: 30px 0 19px; }
  h1 { font-size: 28px; }
  .subtitle { font-size: 12px; }
  .heading-meta { margin: 0; }
  .record-panel, .transcript-panel { border-radius: 13px; }
  .record-panel { min-height: 380px; padding-right: 17px; padding-left: 17px; }
  .transcript-panel { padding-right: 17px; padding-left: 17px; }
  .tips-row { gap: 8px; }
  .tip-card { flex-basis: 100%; padding: 10px 12px; }
  .privacy-note { margin: 5px 0 0 auto; }
  .page-footer { margin-top: 13px; }
  .page-footer span:last-child { font-size: 7px; }
  .result-actions { gap: 8px; }
  .result-count { display: none; }
}