:root {
    --at-p: var(--primary, var(--success,#10b981));
    --at-ph: var(--primary-hover, var(--success,#0ea371));
    --at-pl: var(--primary-light, color-mix(in srgb, var(--success) 14%, transparent));
    --at-bg: var(--bg-card, var(--bg, var(--bg-input,var(--bg-input,#fff))));
    --at-tx: var(--text, var(--text,#1f2937));
    --at-txs: var(--text-soft, var(--text-muted, var(--text-secondary,#6b7280)));
    --at-bd: var(--border, var(--border,#e5e7eb));
    --at-r: var(--radius, 14px);
    --at-rs: var(--radius-sm, 9px);
    --at-rl: var(--radius-lg, 18px);
    --at-sh: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent), 0 10px 26px color-mix(in srgb, var(--text) 6%, transparent);
}

.audio-to-text-app { --audio-to-text-pill: 999px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    color: var(--at-tx);
    font-size: 14px;
    line-height: 1.6;
    box-sizing: border-box;
}
.audio-to-text-app *,
.audio-to-text-app *::before,
.audio-to-text-app *::after { box-sizing: border-box; }

/* card */
.audio-to-text-card {
    padding: 18px;
    border: 1px solid var(--at-bd);
    border-radius: var(--at-rl);
    background: var(--at-bg);
    box-shadow: var(--at-sh);
}

/* studio */
.audio-to-text-studio {
    background:
        linear-gradient(180deg, var(--at-pl) 0%, transparent 42%),
        var(--at-bg);
}
.audio-to-text-field { display: flex; flex-direction: column; min-width: 0; }
.audio-to-text-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--at-txs);
}
.audio-to-text-select {
    width: 100%;
    padding: 10px 32px 10px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--at-tx);
    background: var(--bg-input, var(--at-bg));
    border: 1px solid var(--at-bd);
    border-radius: var(--at-rs);
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--at-txs) 50%),
                      linear-gradient(135deg, var(--at-txs) 50%, transparent 50%);
    background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.audio-to-text-select:focus {
    outline: none;
    border-color: var(--at-p);
    box-shadow: 0 0 0 3px var(--at-pl);
}

/* deck: big round record button */
.audio-to-text-deck {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 18px 0 6px;
}
.audio-to-text-rec {
    flex: none;
    width: 62px; height: 62px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: none;
    background: var(--at-p);
    color: var(--bg-input,#fff);
    cursor: pointer;
    box-shadow: 0 6px 18px var(--at-pl), 0 0 0 6px var(--at-pl);
    transition: transform 0.16s ease, box-shadow 0.2s ease, background 0.16s ease;
}
.audio-to-text-rec-mic { font-size: 26px; line-height: 1; }
.audio-to-text-rec:hover { background: var(--at-ph); transform: scale(1.05); }
.audio-to-text-rec:active { transform: scale(0.96); }
.audio-to-text-rec:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.audio-to-text-deck-tip {
    font-size: 12px;
    font-weight: 600;
    color: var(--at-txs);
    letter-spacing: 0.3px;
}

/* waveform */
.audio-to-text-wavewrap {
    position: relative;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid var(--at-bd);
    border-radius: var(--at-r);
    background: var(--bg-input, var(--at-bg));
    overflow: hidden;
}
.audio-to-text-wave {
    display: block;
    width: 100%;
    height: 80px;
    border-radius: var(--at-rs);
}
.audio-to-text-wavestate {
    position: absolute;
    inset: auto 12px 12px auto;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--at-txs);
    background: var(--at-bg);
    border: 1px solid var(--at-bd);
    border-radius: var(--audio-to-text-pill);
}
.audio-to-text-stat {
    margin-top: 10px;
    font-size: 12px;
    color: var(--at-txs);
    min-height: 18px;
}
.audio-to-text-stat:not(:empty) {
    padding: 8px 12px;
    border-radius: var(--at-rs);
    background: var(--at-pl);
}

/* status */
.audio-to-text-status { font-size: 13px; color: var(--at-txs); }
.audio-to-text-status:not(:empty) {
    padding: 10px 14px;
    border-radius: var(--at-rs);
    background: var(--at-pl);
    border: 1px solid color-mix(in srgb, var(--at-p) 32%, var(--at-bd));
    color: var(--at-tx);
}
.audio-to-text-status.err,
.audio-to-text-status.error {
    background: color-mix(in srgb, var(--danger) 8%, var(--bg,#fff));
    border-color: color-mix(in srgb, var(--danger) 24%, var(--bg,#fff));
    color: var(--danger,#b91c1c);
}

/* subhead */
.audio-to-text-subhead {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--at-tx);
}
.audio-to-text-bar {
    width: 4px; height: 14px;
    border-radius: var(--radius-sm);
    background: var(--at-p);
}
.audio-to-text-tools { display: flex; flex-wrap: wrap; gap: 7px; margin-left: auto; }

/* buttons */
.audio-to-text-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--at-tx);
    background: var(--at-bg);
    border: 1px solid var(--at-bd);
    border-radius: var(--at-rs);
    cursor: pointer;
    transition: transform 0.14s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.audio-to-text-btn:hover {
    color: var(--at-p);
    border-color: var(--at-p);
    box-shadow: 0 4px 12px var(--at-pl);
}
.audio-to-text-btn:active { transform: translateY(1px); }
.audio-to-text-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; color: var(--at-txs); }
.audio-to-text-btn-sm { padding: 6px 11px; font-size: 12px; }
.audio-to-text-btn-quiet { color: var(--at-txs); }
.audio-to-text-btn-quiet:hover { color: var(--danger,#dc2626); border-color: color-mix(in srgb, var(--danger) 38%, var(--bg,#fff)); box-shadow: none; }

/* result */
.audio-to-text-textarea {
    width: 100%;
    padding: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.7;
    color: var(--at-tx);
    background: var(--bg-input, var(--at-bg));
    border: 1px solid var(--at-bd);
    border-radius: var(--at-r);
    resize: vertical;
    min-height: 150px;
}
.audio-to-text-textarea:focus { outline: none; border-color: var(--at-p); box-shadow: 0 0 0 3px var(--at-pl); }

/* history */
.audio-to-text-histcard { border-style: dashed; }
.audio-to-text-history { display: flex; flex-direction: column; gap: 8px; }
.audio-to-text-history:empty::after {
    content: "";
    display: block;
    padding: 18px;
    text-align: center;
    font-size: 12px;
    color: var(--at-txs);
}
.audio-to-text-histhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--at-txs);
    background: var(--at-pl);
    border-radius: var(--at-rs);
}
.audio-to-text-histrow {
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.6;
    border: 1px solid var(--at-bd);
    border-radius: var(--at-rs);
    background: var(--bg-input, var(--at-bg));
}
.audio-to-text-histbody { color: var(--at-tx); word-break: break-word; }

@media (max-width: 640px) {
    .audio-to-text-tools { margin-left: 0; width: 100%; }
    .audio-to-text-deck { justify-content: center; }
}

/* 连续识别开关 */
.audio-to-text-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--at-txs); margin-top: 8px; }