:root,body,body[data-page="voices"] { color-scheme:light; --sidebar-width:260px; --bg:#edf0f5; --panel:#fff; --field:#fff; --raised:#f5f7fa; --line:#d8dde4; --text:#242c38; --muted:#667183; --accent:#246ec5; --accent-ink:#fff; background:#edf0f5; color:#242c38; font-size:17px; }
body { min-height:100vh; }
.site-header { height:54px; position:sticky; top:0; z-index:40; padding:0 22px; display:flex; align-items:center; gap:22px; background:#2d353b; color:#d5dae0; font-size:14px; }
.site-brand { font-size:23px; color:#fff; text-decoration:none; font-weight:600; white-space:nowrap; }
.site-header .connection { margin-left:auto; color:#dbeddf; font-size:12px; }
.site-header .connection.offline { color:#ffe1ad; }
.site-sidebar { position:fixed; left:0; top:54px; bottom:0; width:260px; background:#212730; color:#f4f5f6; padding:16px 14px; overflow:auto; }
.site-sidebar nav p { margin:6px 0; padding:8px 2px; font-size:12px; font-weight:700; color:#a2acb8; letter-spacing:.04em; }
.site-sidebar nav p:not(:first-child) { border-top:1px solid #363d46; margin-top:12px; padding-top:16px; }
.site-sidebar a { display:flex; align-items:center; gap:16px; padding:13px 12px; color:#f4f5f6; font-size:15px; text-decoration:none; border-radius:5px; }
.site-sidebar a:hover { background:#303b46; color:#ffca65; }
body>main,body[data-page="voices"]>main { margin-left:260px; padding:30px 34px 40px; width:auto; max-width:none; }
.tts-heading { max-width:1250px; margin:0 auto 24px; display:flex; justify-content:space-between; gap:20px; align-items:center; }
.tts-heading p { margin:0 0 7px; color:#65748a; font-size:13px; }
.tts-heading h1 { font-size:34px; line-height:1.3; margin:0 0 9px; color:#222d3b; letter-spacing:-.04em; }
.tts-heading span { color:#657184; font-size:16px; }
#open-key-settings { white-space:nowrap; padding:11px 16px; border:1px solid #b8c9df; background:#fff; color:#225faa; font-size:15px; }
.key-settings { max-width:1250px; margin:0 auto; background:#fff; border:1px solid #cbd6e4; border-radius:10px; overflow:hidden; }
.key-settings summary { display:flex; align-items:center; gap:16px; padding:16px 20px; cursor:pointer; color:#28394d; list-style:none; }
.key-settings summary>span:first-child { font-weight:650; font-size:16px; }
.key-settings summary>span:last-child { margin-left:auto; }
#key-state { color:#6a7484; font-size:14px; }
.key-settings-body { padding:0 20px 20px; border-top:1px solid #e2e7ef; }
.key-settings-body p { font-size:14px; line-height:1.85; color:#576577; }
.key-settings-body label { display:block; font-size:14px; margin:14px 0 8px; }
.key-input-row { display:flex; gap:8px; flex-wrap:wrap; }
#personal-api-key { flex:1; min-width:180px; background:#f9fafc; border:1px solid #b9c4d1; padding:12px; font-size:16px; }
#key-save { background:#246ec5; border-color:#246ec5; color:#fff; padding:10px 18px; font-size:15px; }
#key-remove { background:#fff; border:1px solid #cbd1da; color:#5a6676; font-size:14px; }
#key-message { min-height:1.7em; color:#185ca2; margin:10px 0; }
.key-links { display:flex; flex-wrap:wrap; gap:10px 20px; font-size:13px; color:#2167b5; }
.privacy-summary { max-width:1250px; margin:10px auto 25px; font-size:12px; color:#677388; line-height:1.7; }
body .app-sidebar { position:static; width:auto; height:auto; padding:0; margin:0 auto 26px; max-width:1250px; display:block; border:0; border-bottom:1px solid #cbd3df; background:transparent; overflow:visible; }
body .app-sidebar::before { display:none; }
body .sidebar-menu { display:flex; flex-direction:row; gap:6px; overflow:auto; }
body .app-sidebar a { border:0; border-bottom:3px solid transparent; border-radius:0; color:#697486; font-size:15px; padding:13px 17px; white-space:nowrap; min-height:50px; background:transparent; }
body .app-sidebar a[aria-current="page"] { background:transparent; border-bottom-color:#246ec5; color:#205ea7; font-weight:650; }
.page-heading,body[data-page="voices"] .page-heading { margin-bottom:20px; }
.page-heading h1,body[data-page="voices"] .page-heading h1 { font-size:24px; font-weight:650; color:#253143; }
.page-heading p,body[data-page="voices"] .page-heading p { font-size:15px; color:#667183; margin-top:8px; }
body[data-page="voices"] .page-heading::before { display:none; }
body main .panel { background:#fff; border-color:#d8dde4; box-shadow:none; }
body main input,body main select,body main textarea,body dialog input,body dialog select,body dialog textarea { color:#273447 !important; background-color:#fff !important; border-color:#c6cfdc !important; }
body input::placeholder,body textarea::placeholder { color:#8691a1 !important; }
body main button,body dialog button { color:#435269; background:#f4f6f9; border-color:#d0d8e3; }
body main button:hover,body dialog button:hover { background:#eaf1fb; border-color:#9db4d3; }
body main .generate,body dialog .generate { background:#246ec5 !important; color:#fff !important; border-color:#246ec5 !important; }
body button:disabled { opacity:.48; }
body .field-hint,body .small.muted,body main .muted { color:#657184; }
body .error { color:#b63735 !important; }
#page-script { max-width:1250px; }
#script-dialog[data-embedded] { background:#fff; border:1px solid #d4dce6; }
#script-dialog[data-embedded] .script-dialog-header { background:#fafbfd; border-bottom-color:#e1e6ec; }
#script-dialog[data-embedded] .script-dialog-header h2 { color:#27374b; }
#script-dialog[data-embedded] .script-dialog-header button { color:#586578; background:#fff; border-color:#ced6e2; }
#script-dialog[data-embedded] .script-dialog-header .new-script { color:#2464aa; background:#edf4fc; border-color:#bbcee5; }
#script-dialog[data-embedded] .simple-composer .script-input { background:#fff; border-color:#c8d2df; color:#273447; }
#script-dialog[data-embedded] .simple-composer .script-input:focus { outline-color:#4d87cd; }
#script-dialog[data-embedded] .sentence-actor { background:#f4f7fb; border-color:#cfdae7; color:#26374d; }
#script-dialog[data-embedded] .sentence-direction-button { background:transparent; color:#536782; }
#script-dialog[data-embedded] #editor-cost { color:#2a639f; }
#script-dialog[data-embedded] #editor-status,#script-dialog[data-embedded] #char-count { color:#6a7789; }
#script-dialog[data-embedded] #editor-status.error { color:#b63735; }
#page-script .result { border-color:#b1c8e3; background:#fff; }
#page-script .result h2,#page-script #audio-title { color:#25364b; }
#page-script .usage-result,#page-script .usage-result strong { color:#536b86; }
#page-script #download { background:#edf4fc; color:#205fa5; border-color:#c0d2e8; }
#page-script .result-dot { background:#368466; }
.simple-generation-progress { color:#2464aa; }
body dialog,body #sentence-settings-dialog,body #new-script-confirm { background:#fff; color:#273447; border-color:#c2cddd; box-shadow:0 20px 90px #1f334455; }
body .sentence-settings-header,body .sentence-settings-tabs { background:#f6f8fb; border-color:#dce2e9; }
body #sentence-inspector,body .sentence-character-row,body .sentence-picker-preview,body .sentence-picker-preview-heading,body .character-defaults { background:#fff; border-color:#d5deea; color:#243549; }
body #sentence-settings-dialog .sentence-character-card,body #sentence-settings-dialog .sentence-character-preview,body #sentence-settings-dialog .sentence-character-favorite { background:#f4f7fb; color:#415c7d; border-color:#d0dbea; }
body #sentence-settings-dialog strong,body #sentence-settings-dialog h3,body #sentence-settings-dialog summary { color:#283b53; }
body #sentence-settings-dialog p,body #sentence-settings-dialog .sentence-character-card span { color:#67768b; }
body #sentence-settings-dialog [aria-pressed="true"] { color:#175da6 !important; background:#eaf2fc !important; border-color:#80a8d8 !important; }
body #sentence-preview-transcript,body #sentence-preview-status { color:#506984; }
body #character-grid .character-entry,body[data-page="voices"] #character-grid .character-entry { background:#fff; border-color:#d6dee8; box-shadow:0 2px 5px #25395204; }
body[data-page="voices"] #character-grid .character-entry:hover { background:#fafcff; border-color:#a9bed8; }
body[data-page="voices"] #character-grid .character-entry.is-selected { background:#edf5ff; border-color:#73a3d9; }
body[data-page="voices"] #character-grid .character-card strong { color:#29374a; }
body[data-page="voices"] #character-grid .character-card[aria-pressed="true"] strong { color:#205fa5; }
body[data-page="voices"] #character-grid .character-role,body[data-page="voices"] #character-grid .character-meta { color:#6c788a; }
body[data-page="voices"] .voice-sample-buttons button { color:#426795; background:#f0f5fc; border-color:#d0dff0; }
body[data-page="voices"] .voice-sample-buttons button:hover { background:#e5effb; color:#205fa5; }
body[data-page="voices"] .voice-sample-buttons button[aria-pressed="true"] { background:#246ec5; border-color:#246ec5; color:#fff; }
body[data-page="voices"] .cast-favorites-filter { color:#55677d; border-color:#c5d2e2; background:#fff; }
body[data-page="voices"] .cast-favorites-filter[aria-pressed="true"],body[data-page="voices"] #cast-count { color:#205fa5; background:#e7f0fc; }
body[data-page="voices"] .voice-free-note,body[data-page="voices"] .cast-note,body[data-page="voices"] .voice-library-model>span { color:#64758d; }
body #cast-filters.sidebar-voice-filters { border:1px solid #d9e1eb; border-radius:8px; background:#f7f9fc; margin:0 0 20px; padding:12px 16px; display:flex; flex-wrap:wrap; gap:10px 28px; }
body #cast-filters[hidden] { display:none !important; }
body .sidebar-voice-filters fieldset { margin:0; display:flex; gap:12px; flex-wrap:wrap; }
body .sidebar-voice-filters legend { color:#526783; font-size:12px; }
body .sidebar-voice-filters label { color:#536278; font-size:13px; }
body .sidebar-voice-filters input[type="checkbox"] { accent-color:#246ec5; }
body #sidebar-filter-count,body .sidebar-voice-filters #cast-filter-reset { color:#49637f; }
body[data-page="voices"] .voice-dock { background:#fff; border-color:#9eb9da; box-shadow:0 8px 40px #1d355433; }
body[data-page="voices"] .voice-dock #preview-heading { color:#26374e; }
body[data-page="voices"] .voice-dock #preview-gender { color:#52677e; background:#edf1f6; }
body[data-page="voices"] .voice-dock #preview-role,body[data-page="voices"] .voice-dock .preview-transcript,body[data-page="voices"] .preview-wave-meta,body[data-page="voices"] .preview-actions>span { color:#65768b; }
body[data-page="voices"] .voice-dock .preview-emotions button { color:#576c86; }
body[data-page="voices"] .voice-dock .preview-emotions button[aria-pressed="true"] { background:#eaf2fc; color:#2464aa; border-color:#9ab8dd; }
body[data-page="voices"] .voice-dock .preview-toggle,body[data-page="voices"] .preview-actions>.generate { color:#fff; background:#246ec5; border-color:#246ec5; }
body[data-page="voices"] #preview-waveform rect.played { fill:#246ec5; }
body[data-page="voices"] .voice-dock #preview-status { color:#3b689b; }
body .take-item { background:#f9fafc; border-color:#d9e1eb; color:#26384f; }
body .take-item span { color:#65768b; }
body #new-script-confirm p,body #new-script-confirm #new-script-mode-description { color:#576d88; }
body .cost-guide-intro,body #shortform-cost-basis,body #cost-guide>a { color:#61738c; }
body .cost-guide-table thead th { background:#f3f6fa; color:#65758c; }
body .cost-guide-table th,body .cost-guide-table td { color:#315e94; border-color:#d9e1eb; }
body .cost-guide-table tbody th,body .cost-guide-table td:nth-child(2) { color:#465b76; }
body footer,body .footer { color:#6d7b8f; border-color:#d5dde7; }
body .project-bar,body .dictionary-row { color:#344962; }
body #page-settings .rate-details,body #page-settings .disclaimer { background:#f4f7fb; color:#526984; }
@media(max-width:1100px) { body[data-page="voices"] #character-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } body>main,body[data-page="voices"]>main { padding:24px; } }
@media(max-width:850px) { :root,body,body[data-page="voices"] { --sidebar-width:200px; } .site-sidebar { width:200px; } .site-sidebar a { font-size:13px; gap:10px; padding-inline:4px; } body>main,body[data-page="voices"]>main { margin-left:200px; padding:20px; } .tts-heading { align-items:flex-start; flex-direction:column; } body[data-page="voices"] #character-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) {
  :root,body,body[data-page="voices"] { --sidebar-width:0px; }
  .site-header { padding:0 16px; gap:12px; height:54px; }
  .site-brand { font-size:19px; } .site-header>span:not(.connection) { display:none; }
  .site-sidebar { display:none; }
  body>main,body[data-page="voices"]>main { margin:0; padding:22px 14px; }
  .tts-heading { gap:14px; margin-bottom:18px; }
  .tts-heading h1 { font-size:29px; } .tts-heading span { font-size:15px; }
  #open-key-settings { width:100%; }
  .key-settings summary { padding:14px; gap:8px; flex-wrap:wrap; }
  #key-state { font-size:12px; }
  .key-settings-body { padding:0 14px 16px; }
  .key-input-row #personal-api-key { flex:1 1 100%; width:100%; min-width:0; }
  .key-input-row button { flex:1; white-space:nowrap; }
  .privacy-summary { font-size:11px; margin-bottom:18px; }
  body .app-sidebar { margin-bottom:20px; }
  body .app-sidebar a { font-size:13px; padding:12px 10px; gap:6px; }
  body .app-sidebar .ui-icon { width:17px; height:17px; }
  body[data-page="voices"] #character-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-page="voices"] .voice-collection-bar { flex-wrap:wrap; }
  body[data-page="voices"] #character-grid .character-card strong { font-size:18px; }
}
.privacy-document { max-width:1100px !important; margin:0 auto !important; }
.privacy-document h1 { font-size:28px; }
.privacy-document .panel { padding:24px; margin:20px 0; }
.privacy-document h2 { font-size:20px; }
.privacy-document p { font-size:16px; line-height:1.9; color:#53657b; }
.privacy-document code { overflow-wrap:anywhere; font-size:13px; }
.personal-model-settings { border-top:1px solid #e0e6ee; padding-top:4px; margin:12px 0 20px; }
.personal-model-settings select { width:100%; max-width:440px; padding:12px; font-size:16px; }
.personal-model-settings #model-note { margin:8px 0 0; }
.personal-model-settings #model-storage-status { margin:4px 0 0; font-size:13px; color:#496c99; }
body[data-page="voices"] .model-settings-link { font-size:13px; padding:9px 12px; border:1px solid #cbd8e8; border-radius:7px; color:#35618f; background:#f5f8fc; }
#page-help { display:grid; gap:20px; }
#page-help>.panel { padding:24px; border-radius:12px; }
#page-help h2 { margin:0 0 18px; font-size:22px; color:#273b53; }
#page-help p { color:#617186; font-size:15px; line-height:1.8; }
.help-steps { display:grid; gap:18px; padding-left:24px; margin:0; }
.help-steps li { padding-left:6px; }
.help-steps strong { color:#2d4c71; font-size:17px; }
.help-steps p { margin:6px 0 0; }
#page-help .help-callout { background:#eef5fc; border:1px solid #cfdeef; padding:14px 16px; border-radius:8px; color:#315c8d; margin:22px 0 0; }
.help-guide details { padding:16px 0; border-top:1px solid #e1e7ee; }
.help-guide summary { font-size:16px; color:#314b6b; cursor:pointer; }
.help-guide details p { margin:12px 0 0; }
.help-guide a { color:#246ec5; font-size:14px; }
@media(max-width:600px) { #page-help>.panel { padding:18px; } #page-help h2 { font-size:20px; } }

/* The library is a padded panel, not a white background flush with its controls. */
body[data-page="voices"] main .cast-panel {
  padding:24px; border:1px solid #d8e0eb; border-radius:14px; min-width:0;
}
body[data-page="voices"] .cast-toolbar { margin:0 0 16px; gap:12px; }
body[data-page="voices"] #cast-filters.sidebar-voice-filters {
  align-items:flex-end; gap:14px 24px; margin:0 0 24px; padding:14px 16px;
}
body[data-page="voices"] .sidebar-voice-filters fieldset { min-width:0; gap:4px 12px; }
body[data-page="voices"] .sidebar-voice-filters legend { margin-bottom:6px; }
body[data-page="voices"] .sidebar-voice-filters label { white-space:nowrap; }
body[data-page="voices"] .sidebar-voice-filters label:hover { color:#205fa5; }
body[data-page="voices"] .sidebar-filter-footer {
  margin:0 0 0 auto; gap:12px; flex-direction:row; align-items:center; flex-wrap:nowrap;
}
body[data-page="voices"] #sidebar-filter-count { white-space:nowrap; }
body[data-page="voices"] .voice-collection-bar { margin:0 0 18px; flex-wrap:wrap; }
body[data-page="voices"] .voice-library-model { min-width:0; }
body[data-page="voices"] #character-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
body[data-page="voices"] .voice-sample-buttons button { font-size:12px; }
@container (max-width:1100px) {
  body[data-page="voices"] #character-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@container (max-width:760px) {
  body[data-page="voices"] #character-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body[data-page="voices"] .sidebar-voice-filters .regional-filter { flex:1 1 360px; }
}
@container (max-width:520px) {
  body[data-page="voices"] main .cast-panel { padding:14px; border-radius:12px; }
  body[data-page="voices"] #character-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  body[data-page="voices"] .cast-toolbar { flex-wrap:wrap; }
  body[data-page="voices"] .cast-toolbar .search-field { flex-basis:100%; }
  body[data-page="voices"] #cast-filters.sidebar-voice-filters { padding:12px; gap:12px 18px; }
  body[data-page="voices"] .sidebar-filter-footer { flex-basis:100%; justify-content:space-between; }
  body[data-page="voices"] .voice-library-model { width:100%; justify-content:space-between; }
  body[data-page="voices"] .voice-library-model select { flex:1; min-width:0; }
}
/* Compact page header; account settings no longer consume collection space. */
body>main,body[data-page="voices"]>main { padding-top:22px; }
.tts-heading { margin-bottom:12px; gap:16px; flex-direction:row; align-items:center; }
.tts-heading h1 { font-size:28px; margin:0; }
body .app-sidebar { margin-bottom:18px; }
body[data-page="voices"] .page-heading { margin-bottom:16px; }
body[data-page="voices"] .page-heading h1 { font-size:21px; }
body[data-page="voices"] .page-heading p { display:none; }
body.api-settings-open { overflow:hidden; }
body[data-page="voices"] .cast-toolbar { display:none; }
body[data-page="voices"] .sidebar-filter-footer .cast-favorites-filter { min-height:32px; height:auto; padding:6px 10px; font-size:12px; }
body dialog#api-key-settings { width:min(680px,calc(100% - 32px)); max-width:680px; max-height:calc(100dvh - 40px); margin:auto; padding:0; border:1px solid #c5d2e3; border-radius:16px; overflow:auto; color:#273447; background:#fff; }
#api-key-settings::backdrop { background:rgba(19,32,49,.5); backdrop-filter:blur(3px); }
.key-dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:22px 24px 16px; background:#fff; position:sticky; top:0; z-index:1; border-bottom:1px solid #e1e7ef; }
.key-dialog-header h2 { margin:0 0 6px; font-size:23px; color:#24394f; }
.key-dialog-header #key-state { margin:0; font-size:14px; line-height:1.5; }
body #close-key-settings { width:36px; height:36px; padding:0; min-height:36px; flex:none; border:1px solid #dae1e9; background:#f6f8fb; color:#4e627b; border-radius:8px; }
#api-key-settings .key-settings-body { padding:0 24px 24px; border:0; }
#api-key-settings #key-save { background:#246ec5; color:#fff; }
#api-key-settings #personal-api-key { width:100%; min-width:0; flex-basis:100%; }
#api-key-settings .key-input-row button { flex:1; white-space:nowrap; padding:10px 14px; }
#api-key-settings .personal-model-settings select { max-width:none; }
@media(max-width:600px) {
  .tts-heading { flex-direction:row; gap:10px; }
  .tts-heading h1 { font-size:25px; }
  #open-key-settings { width:auto; font-size:13px; padding:10px 12px; }
  body dialog#api-key-settings { width:calc(100% - 20px); max-height:calc(100dvh - 24px); border-radius:12px; }
  .key-dialog-header { padding:18px 16px 14px; gap:12px; }
  .key-dialog-header h2 { font-size:21px; }
  #api-key-settings .key-settings-body { padding:0 16px 20px; }
}
/* Reserved feedback rows keep the modal steady while confirming each save. */
#api-key-settings #key-message,
#api-key-settings #model-storage-status { min-height:52px; padding:9px 12px; border:1px solid transparent; border-radius:8px; box-sizing:border-box; display:flex; align-items:center; font-size:14px; line-height:1.6; }
#api-key-settings .save-feedback[data-state="success"] { color:#225c9e; border-color:#bfd5ee; background:#eef5ff; }
#api-key-settings .save-feedback[data-state="error"] { color:#a43535; border-color:#e8c4c4; background:#fff3f3; }
.save-feedback-content { display:flex; align-items:center; gap:9px; animation:save-feedback-enter .28s ease-out both; }
.save-feedback-mark { display:inline-flex; align-items:center; justify-content:center; width:21px; height:21px; border-radius:50%; background:#246ec5; color:#fff; flex:none; font-size:14px; font-weight:700; }
[data-state="error"] .save-feedback-mark { background:#b54444; }
#api-key-settings .key-validation-note { margin:4px 0 14px; font-size:12px; color:#788497; }
@keyframes save-feedback-enter { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .save-feedback-content { animation:none; } }
/* API tokens are not login passwords. Mask visually without password-field heuristics. */
#api-key-settings #personal-api-key { -webkit-text-security:disc; }
/* Keep pasted tokens visually concealed even on engines without text-security. */
@supports not (-webkit-text-security:disc) {
  #api-key-settings #personal-api-key { color:transparent !important; caret-color:#246ec5; }
}
/* Keep the selected generation model beside the primary action. */
#script-dialog[data-embedded] .editor-audio-actions { display:flex; flex-wrap:nowrap; align-items:flex-start; gap:12px; }
.editor-model-picker { width:260px; min-width:0; }
#script-dialog #editor-model { width:100%; min-height:50px; padding:12px 30px 12px 14px; font-size:15px; border:1px solid #c6cfdc; border-radius:8px; }
#editor-model-status { display:block; min-height:22px; margin-top:5px; color:#225c9e; font-size:12px; line-height:1.6; }
#editor-model-status .save-feedback-mark { width:16px; height:16px; font-size:11px; }
#editor-model-status[data-state="error"] { color:#a43535; }
#script-dialog #editor-model-status .save-feedback-content { display:flex; align-items:center; gap:5px; margin:0; color:inherit; font-size:inherit; }
#script-dialog #editor-model-status .save-feedback-mark { display:inline; width:auto; height:auto; margin:0; background:none; color:inherit; font-size:13px; line-height:1; }
#script-dialog #editor-model-status .save-feedback-content>span:last-child { display:inline; margin:0; color:inherit; font-size:inherit; }
.generation-surface { position:relative; isolation:isolate; }
.generation-overlay { position:absolute; inset:0; display:none; overflow:hidden; border:1px solid #bdcee4; border-radius:10px; background:rgb(242 247 253 / 78%); backdrop-filter:blur(2px); cursor:wait; }
.is-generating .generation-overlay { display:grid; place-items:center; }
#script-dialog[data-embedded] .simple-composer.is-generating .script-input { animation:none; resize:none; opacity:.55; }
.generation-grid { position:absolute; inset:0; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-content:center; gap:5px; padding:7px; mask-image:radial-gradient(ellipse at center,#000 15%,#0008 100%); }
.generation-grid i { aspect-ratio:1; border:1px solid rgb(79 135 203 / 23%); border-radius:5px; background:linear-gradient(145deg,rgb(117 166 225 / 32%),rgb(199 221 248 / 16%)); opacity:.15; }
.is-generating .generation-grid i { animation:tts-grid-glow var(--cell-duration) ease-in-out var(--cell-delay) infinite; }
#script-dialog .generation-overlay .simple-generation-progress { position:relative; z-index:1; max-width:85%; margin:0; padding:14px 20px; border:1px solid rgb(189 210 236 / 65%); border-radius:12px; background:rgb(255 255 255 / 88%); box-shadow:0 8px 30px #3f6fa010; color:#315b8c; font-size:15px; font-weight:500; line-height:1.7; text-align:center; }
#script-dialog .generation-overlay .simple-generation-progress::before { content:none; }
@keyframes tts-grid-glow { 0%,100% { opacity:.12; transform:scale(.94); } 45% { opacity:.85; transform:scale(1); } }
@media(prefers-reduced-motion:reduce) { .is-generating .generation-grid i { animation:none; opacity:.3; } }
@media(max-width:720px) {
  .generation-grid { grid-template-columns:repeat(8,minmax(0,1fr)); }
  #script-dialog[data-embedded] .script-dialog-footer { flex-wrap:wrap; }
  #script-dialog[data-embedded] .editor-audio-actions { width:100%; }
  .editor-model-picker { flex:1; width:auto; }
  #script-dialog[data-embedded] #editor-generate { width:auto; min-width:110px; flex:0 0 auto; padding:12px 16px; font-size:16px; }
  #script-dialog #editor-model { font-size:13px; padding-left:9px; }
}