@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root { --ink:#17251f; --deep:#102c23; --green:#64e7b7; --mint:#dbfaea; --paper:#f4f4ee; --line:#d7ddd5; --muted:#64736c; --danger:#bd3434; }
* { box-sizing:border-box; }
/* 显式兜底：项目中的表单、加载态容器会声明 display，不能覆盖语义化 hidden。 */
[hidden] { display:none !important; }
[v-cloak] { display:none !important; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans SC",system-ui,sans-serif; }
body::before { content:""; position:fixed; width:48rem; height:48rem; right:-20rem; top:-18rem; border-radius:50%; background:#d8f9e9; filter:blur(1px); z-index:-1; }
.shell { max-width:1180px; min-height:100vh; margin:0 auto; padding:24px 28px 70px; display:grid; grid-template-columns:1fr 490px; grid-template-areas:"nav nav" "hero panel" "docs docs"; gap:34px 82px; align-items:center; }
.home-nav { grid-area:nav; display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:18px; border-bottom:1px solid var(--line); }.home-nav .brand { flex:none; margin:0; }.site-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }.site-nav a { padding:8px 10px; border-radius:7px; color:#4c6658; font-size:12px; font-weight:700; text-decoration:none; transition:.18s; }.site-nav a:hover,.site-nav a:focus-visible { color:#1d744e; background:#e8f7ee; outline:0; }
.hero { grid-area:hero; align-self:center; padding:18px 0; }
.brand { display:inline-block; color:var(--ink); font:600 21px/1 "DM Mono",monospace; text-decoration:none; letter-spacing:-1px; margin-bottom:82px; }.brand span { color:#32996f; }
.eyebrow,.doc-label { color:#438069; font-size:13px; font-weight:700; letter-spacing:.08em; }.eyebrow i { display:inline-block; width:8px; height:8px; margin-right:8px; vertical-align:1px; border-radius:50%; background:#47c996; box-shadow:0 0 0 5px #c5f3dd; }
h1 { font-size:clamp(40px,5vw,64px); line-height:1.18; margin:18px 0 22px; letter-spacing:-.06em; } h1 em { color:#31936b; font-style:normal; }
.intro { max-width:510px; color:#526159; line-height:1.85; font-size:15px; margin:0; }.facts { display:flex; gap:36px; margin-top:48px; }.facts div { display:grid; gap:5px; }.facts strong { font:500 18px "DM Mono",monospace; }.facts span { color:var(--muted); font-size:12px; }
.panel { grid-area:panel; background:#fff; box-shadow:0 25px 65px #1b3f3020; border:1px solid #e7ece7; border-radius:18px; padding:35px 38px; }.panel-head p { color:#42a879; font-weight:700; font-size:12px; letter-spacing:.08em; margin:0 0 8px; }.panel h2 { font-size:25px; letter-spacing:-.04em; margin:0 0 6px; }.panel-head span { color:var(--muted); font-size:13px; line-height:1.65; }
form { margin-top:27px; display:grid; gap:17px; } label { display:grid; gap:7px; color:#34433b; font-size:13px; font-weight:600; } label small { color:#829088; font-weight:400; } input,textarea { resize:vertical; width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 12px; color:var(--ink); outline:0; font:14px "Noto Sans SC",sans-serif; background:#fcfdfb; transition:.18s; } input:focus,textarea:focus { border-color:#55bc8c; box-shadow:0 0 0 3px #d8f5e5; } button { border:0; border-radius:8px; cursor:pointer; font:600 14px "Noto Sans SC",sans-serif; } #submit-button { margin-top:4px; padding:13px; color:#fff; background:#173f30; transition:.18s; } #submit-button:hover { background:#245f48; transform:translateY(-1px); } #submit-button:disabled { opacity:.6; cursor:wait; transform:none; } #submit-button span { margin-left:7px; color:var(--green); }.hint { margin:0; color:#8a948e; font-size:11px; line-height:1.6; }
.result { margin-top:24px; padding:16px; border:1px solid #bae8d2; border-radius:10px; background:#f2fff8; }.result-title { display:flex; align-items:flex-start; gap:10px; }.result-title>span { display:grid; place-items:center; flex:none; width:20px; height:20px; color:#fff; border-radius:50%; background:#37af7a; font-size:12px; }.result-title div { display:grid; gap:2px; }.result-title b { font-size:14px; }.result-title small { color:#658174; font-size:11px; }.secret { display:flex; align-items:center; margin:13px 0 10px; border:1px solid #bde1cc; border-radius:6px; overflow:hidden; background:#fff; }.secret code { min-width:0; flex:1; overflow:hidden; padding:10px; text-overflow:ellipsis; white-space:nowrap; font:12px "DM Mono",monospace; }.secret button { align-self:stretch; padding:0 12px; border-radius:0; color:#246849; background:#dcf7e9; font-size:12px; }.usage { display:grid; gap:3px; color:#668375; font-size:11px; }.usage code { font:11px "DM Mono",monospace; color:#234f3b; }.message { min-height:18px; margin:13px 0 0; color:var(--danger); font-size:13px; }.message.warning { color:#9a6c13; }
.docs { grid-area:docs; display:grid; grid-template-columns:.72fr 1.4fr .75fr; gap:28px; padding:31px 33px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.docs h2 { max-width:220px; margin:8px 0 0; font-size:21px; letter-spacing:-.04em; line-height:1.38; }.docs pre { overflow:auto; margin:0; padding:17px 19px; border-radius:9px; color:#cbecdc; background:#102c23; font:11px/1.8 "DM Mono",monospace; }.rules { padding:2px 0; }.rules span { color:#438069; font-weight:700; font-size:12px; }.rules p { color:#5f6d66; font-size:12px; line-height:1.7; }.rules a { color:#287e59; font-size:12px; font-weight:700; text-decoration:none; }
@media (max-width:850px) { .shell { grid-template-columns:1fr; grid-template-areas:"nav" "hero" "panel" "docs"; gap:30px; padding:22px 19px 45px; }.home-nav { align-items:flex-start; flex-direction:column; gap:15px; }.site-nav { justify-content:flex-start; }.brand { margin-bottom:52px; }.home-nav .brand { margin:0; }.facts { margin-top:36px; }.panel { padding:28px 23px; }.docs { grid-template-columns:1fr; padding:25px 22px; gap:20px; }.docs h2 { max-width:none; } }
@media (max-width:420px) { .facts { gap:19px; }.facts strong { font-size:15px; }.panel { border-radius:13px; }.secret code { font-size:10px; } }

.tester-page { background:#f0f4f0; }.tester-shell { max-width:1220px; min-height:100vh; margin:0 auto; padding:32px 28px 68px; }.tester-head { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 0 30px; border-bottom:1px solid var(--line); }.tester-head .brand { margin:0; }.tester-head>div { text-align:center; }.tester-head .eyebrow { margin:0 0 8px; }.tester-head h1 { margin:0; font-size:28px; letter-spacing:-.05em; }.back-link { justify-self:end; color:#287e59; font-size:13px; font-weight:700; text-decoration:none; }.tester-grid { display:grid; grid-template-columns:minmax(380px,.93fr) 1.07fr; gap:24px; margin-top:32px; align-items:start; }.request-card,.response-card { border:1px solid #dce5dd; border-radius:14px; padding:27px; background:#fff; box-shadow:0 12px 32px #2448370c; }.request-card { display:grid; gap:17px; }.section-title { display:flex; gap:11px; align-items:flex-start; padding-bottom:16px; border-bottom:1px solid #edf0ed; }.section-title>span { display:grid; flex:none; place-items:center; width:27px; height:27px; border-radius:7px; color:#218258; background:#e0f7ea; font:500 12px "DM Mono",monospace; }.section-title h2 { margin:0 0 3px; font-size:18px; letter-spacing:-.04em; }.section-title p { margin:0; color:#7b8981; font-size:12px; }.request-card select { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:8px; outline:0; color:var(--ink); font:13px "Noto Sans SC",sans-serif; background:#fcfdfb; }.request-card select:focus { border-color:#55bc8c; box-shadow:0 0 0 3px #d8f5e5; }.request-card input[type="file"] { padding:8px; font-size:12px; }.request-card textarea { min-height:290px; color:#c9ecdb; border-color:#173e2e; background:#102c23; font:12px/1.75 "DM Mono",monospace; }.request-card textarea:focus { border-color:#55bc8c; box-shadow:0 0 0 3px #d8f5e5; }.request-card #send-button { padding:13px; color:#fff; background:#173f30; }.request-card #send-button:hover { background:#245f48; }.request-card #send-button:disabled { opacity:.6; cursor:wait; }.request-card #send-button span { margin-left:7px; color:var(--green); }.response-card { position:sticky; top:22px; }.response-meta { display:grid; gap:4px; margin:19px 0 13px; color:#809087; font-size:11px; }.response-meta code { overflow:hidden; color:#38614f; text-overflow:ellipsis; white-space:nowrap; font:11px "DM Mono",monospace; }.response-output { min-height:435px; max-height:620px; overflow:auto; margin:0; padding:18px; border:1px solid #173e2e; border-radius:9px; color:#c9ecdb; white-space:pre-wrap; word-break:break-word; background:#102c23; font:12px/1.7 "DM Mono",monospace; }.response-note { margin:14px 0 0; color:#718078; font-size:12px; line-height:1.7; }.response-note code,.hint code { font:11px "DM Mono",monospace; color:#3c7259; }.response-status { color:#7b8981 !important; }.response-status.success { color:#28845b !important; }.response-status.error { color:#bd3434 !important; }.response-status.loading { color:#9a6c13 !important; }
@media (max-width:850px) { .tester-shell { padding:25px 19px 45px; }.tester-head { grid-template-columns:1fr auto; gap:18px; }.tester-head>div { grid-column:1 / -1; grid-row:2; text-align:left; }.back-link { grid-column:2; }.tester-grid { grid-template-columns:1fr; }.response-card { position:static; }.response-output { min-height:300px; } }
@media (max-width:460px) { .tester-head .brand { font-size:18px; }.tester-head h1 { font-size:25px; }.request-card,.response-card { padding:20px 16px; }.request-card textarea { min-height:250px; } }
.rules a + a { margin-left:14px; }
.request-card textarea.prompt-input { min-height:98px; color:var(--ink); border-color:var(--line); background:#fcfdfb; font:14px/1.65 "Noto Sans SC",sans-serif; }
.response-result-head { display:flex; align-items:center; justify-content:space-between; margin:0 0 8px; color:#466557; font-size:12px; font-weight:700; }.response-result-head small { color:#829088; font-size:11px; font-weight:400; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.models-shell { max-width:1280px; }.models-hero { display:flex; align-items:end; justify-content:space-between; gap:30px; padding:34px 2px 28px; }.models-kicker { margin:0 0 7px; color:#438069; font-size:12px; font-weight:700; letter-spacing:.08em; }.models-hero h2 { margin:0; font-size:28px; letter-spacing:-.05em; }.models-hero>div:first-child>p:last-child { max-width:680px; margin:12px 0 0; color:#63726a; font-size:14px; line-height:1.75; }.models-summary { display:grid; flex:none; min-width:154px; gap:4px; padding:16px 19px; border:1px solid #bfe7d0; border-radius:12px; background:#ecfbf3; }.models-summary strong { color:#1e7a53; font:600 30px/1 "DM Mono",monospace; letter-spacing:-.08em; }.models-summary span { color:#56816a; font-size:12px; }
.models-panel { border:1px solid #dce5dd; border-radius:16px; padding:26px; background:#fff; box-shadow:0 12px 32px #2448370c; }.models-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; }.models-search { display:flex; align-items:center; flex:1; max-width:520px; gap:9px; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:#fcfdfb; transition:.18s; }.models-search:focus-within { border-color:#55bc8c; box-shadow:0 0 0 3px #d8f5e5; }.models-search svg { flex:none; width:17px; height:17px; fill:none; stroke:#779087; stroke-width:1.8; }.models-search input { min-width:0; padding:11px 0; border:0; background:transparent; box-shadow:none !important; }.models-search input:disabled { cursor:wait; }.models-status { margin:0; color:#718078; font-size:12px; text-align:right; }.model-filters { display:flex; flex-wrap:wrap; gap:8px; margin-top:19px; padding-bottom:19px; border-bottom:1px solid #edf0ed; }.model-filter { padding:7px 10px; border:1px solid #d8e1da; border-radius:999px; color:#4d675a; background:#fff; font-size:12px; font-weight:600; transition:.18s; }.model-filter:hover { border-color:#85caa6; color:#267950; background:#f2fbf6; }.model-filter[aria-pressed="true"] { border-color:#258055; color:#fff; background:#217852; }.models-content { min-height:244px; }.model-group { padding-top:24px; }.model-group + .model-group { margin-top:5px; border-top:1px solid #edf0ed; }.model-group-heading { display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:10px; margin-bottom:12px; }.model-group-heading h2 { margin:0; font-size:16px; letter-spacing:-.04em; }.model-group-heading p { min-width:0; margin:0; overflow:hidden; color:#7b8981; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.model-group-heading span { color:#799085; font:11px "DM Mono",monospace; }.model-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.model-card { display:grid; gap:15px; min-width:0; padding:16px; border:1px solid #dee7df; border-radius:11px; background:#fcfdfb; transition:border-color .18s,box-shadow .18s,transform .18s; }.model-card:hover { border-color:#a7d7bd; box-shadow:0 8px 20px #1e54300c; transform:translateY(-1px); }.model-card-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; }.model-card-meta span { overflow:hidden; color:#47745c; font-size:12px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.model-card-meta small { flex:none; padding:3px 6px; border-radius:4px; color:#38775a; background:#e7f7ed; font-size:10px; }.model-id { display:block; min-height:34px; overflow:hidden; color:#173f30; font:12px/1.45 "DM Mono",monospace; text-overflow:ellipsis; overflow-wrap:anywhere; }.model-card-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; }.model-card-footer>span { color:#7c8c83; font-size:10px; }.model-card-footer button,.models-state button { flex:none; padding:6px 8px; border:1px solid #c6dfd0; border-radius:6px; color:#287950; background:#effaf3; font-size:11px; font-weight:700; }.model-card-footer button:hover,.models-state button:hover { border-color:#77bf99; background:#e1f5e9; }.models-state { display:grid; place-items:center; align-content:center; min-height:244px; padding:30px; color:#697b71; text-align:center; }.models-state strong { color:#31473a; font-size:15px; }.models-state p { max-width:420px; margin:8px 0 0; font-size:13px; line-height:1.7; }.models-state button { margin-top:14px; }.models-loading { grid-auto-flow:column; grid-template-columns:auto auto; gap:10px; }.models-loading p { margin:0; }.models-spinner { width:18px; height:18px; border:2px solid #d4ecde; border-top-color:#3ba574; border-radius:50%; animation:model-spin .75s linear infinite; }@keyframes model-spin { to { transform:rotate(360deg); } }.models-note { display:flex; align-items:flex-start; gap:16px; margin-top:22px; padding:17px 18px; border:1px solid #d6e9dc; border-radius:11px; color:#587064; background:#f3faf5; }.models-note>span { flex:none; padding:4px 7px; border-radius:5px; color:#39775a; background:#def4e7; font-size:11px; font-weight:700; }.models-note p { flex:1; margin:0; font-size:12px; line-height:1.75; }.models-note code { color:#32694e; font:11px "DM Mono",monospace; }.models-note a { flex:none; color:#287e59; font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap; }
@media (max-width:900px) { .model-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:650px) { .models-hero { align-items:flex-start; flex-direction:column; padding-top:27px; }.models-summary { min-width:0; width:100%; grid-template-columns:auto 1fr; align-items:baseline; gap:9px; }.models-summary strong { font-size:25px; }.models-panel { padding:20px 15px; }.models-toolbar { align-items:stretch; flex-direction:column; gap:10px; }.models-search { max-width:none; }.models-status { text-align:left; }.model-filters { margin-top:15px; }.model-filter { padding:6px 9px; }.model-group-heading { grid-template-columns:1fr auto; gap:5px 10px; }.model-group-heading p { grid-column:1 / -1; }.model-grid { grid-template-columns:1fr; }.models-note { align-items:stretch; flex-direction:column; gap:10px; }.models-note a { white-space:normal; } }

.example-shell { max-width:1180px; }
.example-intro { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:center; margin-top:32px; padding:21px 24px; border:1px solid #dce5dd; border-radius:14px; background:#fff; box-shadow:0 12px 32px #2448370c; }
.example-intro p { max-width:720px; margin:0; color:#5f7067; font-size:14px; line-height:1.8; }
.models-link { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; min-width:174px; padding:11px 14px; border:1px solid #c6e9d5; border-radius:9px; color:#226f4c; background:#f3fcf6; font-size:13px; font-weight:700; line-height:1.45; text-decoration:none; transition:.18s; }
.models-link > span:first-child { grid-column:1 / -1; color:#6b9a82; font:10px "DM Mono",monospace; letter-spacing:.07em; text-transform:uppercase; }
.models-link-title { min-width:0; }
.models-link b { align-self:center; color:#31936b; font-size:16px; }
.models-link:hover { border-color:#80ca9f; background:#e9f9ef; transform:translateY(-1px); }
.example-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:24px; }
.example-card { display:grid; grid-template-rows:auto auto minmax(42px,1fr) auto auto; gap:12px; min-width:0; min-height:246px; padding:22px; border:1px solid #dce5dd; border-radius:14px; color:var(--ink); background:#fff; box-shadow:0 12px 32px #2448370c; text-decoration:none; transition:border-color .18s,box-shadow .18s,transform .18s; }
.example-card:hover { border-color:#8ccfa7; box-shadow:0 16px 34px #24483715; transform:translateY(-3px); }
.example-card:focus-visible,.models-link:focus-visible { outline:3px solid #bdeed0; outline-offset:3px; }
.example-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.example-number { display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:7px; color:#218258; background:#e0f7ea; font:500 12px "DM Mono",monospace; }
.example-type { min-width:0; overflow-wrap:anywhere; color:#65927a; font-size:11px; font-weight:700; letter-spacing:.06em; text-align:right; }
.example-card strong { display:block; min-width:0; color:#183127; font-size:19px; letter-spacing:-.04em; line-height:1.35; overflow-wrap:anywhere; }
.example-card p { min-width:0; margin:0; color:#718078; font-size:13px; line-height:1.75; overflow-wrap:anywhere; }
.example-model { display:grid; gap:5px; min-width:0; padding-top:13px; border-top:1px solid #edf0ed; }
.example-model > span { color:#829088; font-size:11px; }
.example-model code { display:block; min-width:0; color:#32654e; font:11px/1.55 "DM Mono",monospace; overflow-wrap:anywhere; word-break:break-word; }
.example-action { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; color:#287e59; font-size:12px; font-weight:700; }
.example-action b { color:#31936b; font-size:16px; line-height:1; transition:transform .18s; }
.example-card:hover .example-action b { transform:translateX(3px); }
@media (max-width:980px) { .example-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:650px) { .example-intro { grid-template-columns:1fr; padding:20px; }.models-link { width:100%; }.example-grid { grid-template-columns:1fr; }.example-card { min-height:220px; } }
@media (max-width:460px) { .example-intro { margin-top:24px; padding:18px 16px; }.example-intro p { font-size:13px; }.example-card { padding:19px 16px; }.example-card strong { font-size:18px; } }

.media-request .source-preview { display:block; width:100%; max-height:260px; margin:-5px 0 2px; border:1px solid #dce5dd; border-radius:9px; object-fit:contain; background:#f7faf7; }
.video-output { display:block; width:100%; min-height:220px; max-height:440px; margin-bottom:14px; border:1px solid #173e2e; border-radius:9px; background:#102c23; }
.image-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.image-results a { display:block; min-width:0; overflow:hidden; border:1px solid #dce5dd; border-radius:9px; background:#f7faf7; }
.image-results img { display:block; width:100%; aspect-ratio:1; object-fit:cover; transition:transform .18s; }
.image-results a:hover img { transform:scale(1.025); }
.compact-output { min-height:190px; max-height:300px; }

.admin-shell { max-width:1400px; }
.admin-toolbar { display:grid; gap:18px; margin-top:32px; }
.admin-toolbar .section-title { padding-bottom:15px; }
.dashboard-actions { display:flex; justify-content:flex-end; }.dashboard-actions button { min-width:128px; padding:12px 16px; color:#fff; background:#173f30; }.dashboard-actions button:hover { background:#245f48; }.dashboard-actions button:disabled { opacity:.6; cursor:wait; }.dashboard-actions button span { margin-left:7px; color:var(--green); }
.admin-toolbar .response-status { min-height:18px; margin:0; }
.admin-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:22px 0; }
.admin-summary>div { display:grid; gap:7px; min-width:0; padding:16px; border:1px solid #dce5dd; border-radius:11px; background:#fff; box-shadow:0 8px 20px #24483708; }
.admin-summary span { overflow:hidden; color:#708177; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.admin-summary strong { overflow:hidden; color:#1e7550; font:600 22px/1.1 "DM Mono",monospace; letter-spacing:-.06em; text-overflow:ellipsis; }
.admin-table-card { position:static; }
.table-scroll { overflow:auto; margin-top:20px; border:1px solid #e0e8e1; border-radius:9px; }
.table-scroll table { width:100%; min-width:1040px; border-collapse:collapse; font-size:12px; }
.table-scroll th,.table-scroll td { padding:13px 14px; border-bottom:1px solid #edf1ed; text-align:left; vertical-align:middle; }
.table-scroll th { color:#60746a; background:#f7faf7; font-size:11px; font-weight:700; white-space:nowrap; }
.table-scroll td { color:#405448; white-space:pre-line; }
.table-scroll tbody tr:last-child td { border-bottom:0; }
.table-scroll tbody tr:hover td { background:#fbfefc; }
.table-scroll .key-name { min-width:190px; color:#245941; font:11px/1.65 "DM Mono",monospace; }
.table-scroll .key-active { color:#267a52; font-weight:700; }.table-scroll .key-disabled { color:#9a5b42; font-weight:700; }
.table-scroll .table-empty { padding:40px; color:#849188; text-align:center; white-space:normal; }
@media (max-width:850px) { .admin-summary { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:600px) { .image-results { grid-template-columns:1fr; }.video-output { min-height:180px; }.admin-toolbar { margin-top:24px; }.dashboard-actions button { width:100%; }.admin-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }.admin-summary>div:last-child { grid-column:1 / -1; } }

.speech-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.speech-hint { margin:0; padding:10px 12px; border:1px solid #d4eadc; border-radius:8px; color:#557365; background:#f3faf5; font-size:12px; line-height:1.65; }
.audio-output { display:block; width:100%; margin-bottom:12px; }
.download-link { display:inline-flex; align-items:center; margin:0 0 14px; padding:9px 12px; border:1px solid #bfe3cf; border-radius:7px; color:#267950; background:#effaf3; font-size:12px; font-weight:700; text-decoration:none; }
.download-link:hover { border-color:#78bf99; background:#e2f5ea; }
@media (max-width:460px) { .speech-options { grid-template-columns:1fr; } }