:root {
  color-scheme: dark;
  --bg: #0e0f13;
  --panel: #16181d;
  --panel-raised: #1c1f26;
  --input: #101116;
  --border: #25282f;
  --border-strong: #3c3f4e;
  --text: #e9eaee;
  --muted: #8a8f98;
  --faint: #626675;
  --accent: #2f6bff;
  --accent-hover: #1e5bff;
  --accent-soft: rgba(50, 104, 255, .13);
  --danger: #fa6978;
  --success: #46d79b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { min-width: 340px; background: var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); font-size: 13px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, select, summary, [role="button"], input[type="checkbox"], input[type="color"], input[type="range"] { cursor: pointer; }
button, input, select, textarea, a, summary { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .43; }
button, a, input, select, textarea, summary { outline: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #7195ff;
  outline-offset: 3px;
}
a { color: #93aeff; text-decoration: none; }
a:hover { color: #bdcdff; }
svg { flex-shrink: 0; vertical-align: middle; }
img { max-width: 100%; }
h1, h2, h3, p { margin: 0; }
button { transition: background .16s, color .16s, border-color .16s, box-shadow .16s, transform .16s; }
::selection { color: #fff; background: #3268ff70; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #343745; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #4b4f61; }

.topbar {
  height: 65px;
  padding: 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--border);
  background: #101115;
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 #ffffff1c, 0 3px 12px #3268ff20;
  font-size: 19px;
}
.brand-text { font-size: 17px; font-weight: 700; letter-spacing: -.45px; line-height: 1.2; white-space: nowrap; }
.brand-text > span { color: #9ca9c5; }
.studio-label { margin-left: 8px; padding: 3px 7px; border: 1px solid #36394a; border-radius: 5px; color: #9a9fb4; font-size: 9px; font-weight: 700; letter-spacing: 1.4px; vertical-align: middle; }
.brand > div .studio-label { display: block; margin: 4px 0 0; padding: 0; border: 0; color: #697186; font-size: 8px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.top-actions .btn { min-height: 32px; padding: 6px 10px; font-size: 11px; }
.workspace { width: min(100%, 1600px); margin: 0 auto; padding: 20px 24px 28px; }
.help { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 18px; padding: 11px 15px; background: #151923; border: 1px solid #26314c; border-radius: 9px; color: #9faac2; font-size: 11px; }
.help b, .help strong { color: #b4c8ff; font-weight: 600; }
.help a { font-weight: 600; white-space: nowrap; }
.columns { display: grid; grid-template-columns: minmax(285px, 340px) minmax(350px, 1fr) minmax(275px, 310px); gap: 18px; align-items: start; }
.left-col, .center-col, .right-col { min-width: 0; }
.left-col, .right-col { display: flex; flex-direction: column; gap: 14px; }
.panel { padding: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 13px; }
.help.panel { display: block; padding: 11px 15px; }
.help > summary { color: #a7b6d8; font-size: 11px; }
.help[open] > summary { margin-bottom: 11px; }
#help-content { color: #929fba; font-size: 11px; line-height: 1.9; }
#help-content ol, #help-content ul { padding-left: 20px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 18px; color: var(--text); font-size: 13px; font-weight: 650; letter-spacing: -.12px; }
.panel-title > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.panel-title svg { width: 15px; height: 15px; color: #9299ad; }
.section-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; color: #abb0c1; font-size: 10px; font-weight: 650; letter-spacing: .8px; text-transform: uppercase; }
.field { min-width: 0; margin-bottom: 13px; }
.field:last-child { margin-bottom: 0; }
.field-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; color: #a3a7b9; font-size: 11px; font-weight: 500; }
.field-value { color: #d6dae9; font-size: 11px; font-variant-numeric: tabular-nums; }
.field > label { display: block; margin-bottom: 7px; color: #a3a7b9; font-size: 11px; }
.row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.row > .field { flex: 1; margin-bottom: 0; }
.row > input, .row > select, .row > textarea { min-width: 0; flex: 1; }
.row.space-between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 11px; }
.stack > .field { margin-bottom: 0; }
.stack > .divider { margin: 3px 0; }
.stack > .row > .btn { flex: 1; }
.stack > .row > .section-label { margin-bottom: 0; }
.divider { height: 1px; margin: 17px 0; background: var(--border); border: 0; }
.muted { color: var(--muted); }
.small { font-size: 10px; line-height: 1.6; }
.full { width: 100%; }
.hidden { display: none !important; }

input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea {
  width: 100%;
  min-height: 35px;
  padding: 8px 10px;
  color: #e0e3ed;
  background: var(--input);
  border: 1px solid #30323e;
  border-radius: 7px;
  transition: border-color .16s, box-shadow .16s;
}
input::placeholder, textarea::placeholder { color: #5d6172; }
input:hover:not(:disabled), textarea:hover:not(:disabled), select:hover:not(:disabled) { border-color: #424659; }
input:focus, textarea:focus, select:focus { border-color: #537eff; }
input[type="number"] { font-variant-numeric: tabular-nums; }
select { padding-right: 29px; font-size: 11px; }
select option { background: #17181e; color: #e0e3ed; }
textarea { min-height: 79px; resize: vertical; line-height: 1.65; font-size: 12px; }
textarea.script-input, #scriptInput, #script-input { min-height: 140px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
input[type="color"] { width: 38px; height: 33px; padding: 4px; background: var(--input); border: 1px solid var(--border); border-radius: 7px; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 3px; }
input[type="checkbox"], input[type="radio"] { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
input[type="file"] { max-width: 100%; color: var(--muted); font-size: 10px; }
input[type="file"]::file-selector-button { margin-right: 8px; padding: 6px 9px; color: #bbc3db; background: var(--panel-raised); border: 1px solid var(--border-strong); border-radius: 5px; cursor: pointer; }

.btn {
  min-height: 34px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #363945;
  border-radius: 7px;
  background: #22242d;
  color: #c8cdde;
  font-size: 11px;
  font-weight: 550;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { color: #f3f5fc; background: #2d303d; border-color: #45495a; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn svg { width: 14px; height: 14px; }
.btn.primary, button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover:not(:disabled), button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: 0 3px 14px #3268ff22; }
.btn.subtle { background: transparent; border-color: var(--border); color: #9b9fb2; }
.btn.subtle:hover:not(:disabled) { background: #252831; border-color: #414555; color: #dee3f5; }
.btn.danger { background: #ff63710b; border-color: #fd64752e; color: var(--danger); }
.btn.danger:hover:not(:disabled) { background: #ff63711b; border-color: #fd647558; }
.btn.icon { width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 5px; }
.segmented { display: flex; padding: 3px; gap: 3px; background: #101116; border: 1px solid #2b2d36; border-radius: 8px; }
.segmented button { flex: 1; min-width: 0; min-height: 29px; padding: 6px 8px; background: transparent; color: #787e92; border: 1px solid transparent; border-radius: 5px; font-size: 11px; }
.segmented button:hover { color: #cbd0e1; background: #1d1f27; }
.segmented button.active { background: #2b2e3a; border-color: #3e4252; color: #e1e6f5; box-shadow: 0 1px 3px #0003; }
.image-display-controls { display: grid; gap: 10px; margin: 10px 0; }
.image-size-control { display: block; padding: 2px 0; }
.image-size-control input { width: 100%; }
.image-size-control output { color: #d6dae9; font-variant-numeric: tabular-nums; }
.image-mode-preview { display: block; max-width: 100%; max-height: 240px; margin: 0 auto 16px; border-radius: 9px; object-fit: contain; }
.image-mode-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.image-mode-choices .btn { min-height: 58px; white-space: normal; }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 21px; padding: 2px 7px; border: 1px solid #34394c; border-radius: 5px; background: #252a3b; color: #a6b7e2; font-size: 9px; font-weight: 550; }
.chip.active { color: #a8beff; border-color: #3268ff65; background: var(--accent-soft); }

.contact-row { display: flex; align-items: center; gap: 12px; }
.contact-row > .field, .contact-row > div { min-width: 0; flex: 1; }
.avatar-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; min-width: 48px; height: 48px; padding: 0; overflow: hidden; color: #9ca3b9; background: #2b2e39; border: 1px solid #3b3f4d; border-radius: 50%; font-size: 19px; }
.avatar-button:hover { border-color: #7394ff; box-shadow: 0 0 0 3px #3268ff16; }
.avatar-button img { width: 100%; height: 100%; object-fit: cover; }
.message-list { display: flex; flex-direction: column; gap: 10px; }
.message-card { padding: 11px; border: 1px solid #2e313e; border-radius: 9px; background: #13141a; }
.message-card:hover { border-color: #3a4053; }
.message-card[draggable="true"] { cursor: grab; }
.message-card[draggable="true"]:active { cursor: grabbing; }
.message-card[draggable="true"] input, .message-card[draggable="true"] textarea { cursor: text; }
.message-card.dragging { opacity: .5; border-color: #628bff; }
.message-card.chat-divider { padding: 8px 10px; border-style: dashed; background: #1c23301f; }
.chat-divider > .row { justify-content: space-between; margin-top: 0; }
.chat-divider .chip { max-width: calc(100% - 30px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-divider .btn { flex: 0 0 24px !important; min-width: 24px; min-height: 24px; height: 24px; padding: 2px; }
.message-card.selected { border-color: #3a65cc; box-shadow: 0 0 0 1px #3268ff15; }
.message-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; color: #71788d; font-size: 10px; }
.message-toolbar > div { display: flex; align-items: center; gap: 5px; }
.message-toolbar button { width: 23px; min-width: 23px; height: 23px; min-height: 23px; padding: 2px; background: transparent; color: #737b91; border: 0; border-radius: 4px; }
.message-toolbar button:hover { color: #c0cced; background: #2a2f3d; }
.message-toolbar button.danger:hover { color: var(--danger); background: #fa697815; }
.message-toolbar > .muted { flex: 0 0 auto; min-width: 10px; font-variant-numeric: tabular-nums; }
.message-toolbar > select { flex: 1 1 70px; width: 0; min-width: 54px; max-width: 112px; min-height: 24px; height: 24px; padding: 2px 17px 2px 6px; font-size: 9px; text-overflow: ellipsis; }
.message-toolbar > button { flex-shrink: 0; }
.message-toolbar > .message-side { flex: 0 0 auto; width: auto; min-width: 54px; padding: 2px 5px; border: 1px solid #34394c; background: #252a3b; color: #a6b7e2; font-size: 9px; line-height: 1.2; white-space: nowrap; }
.message-toolbar > .message-side:hover { border-color: #4f669e; background: #2b3550; }
.message-text { display: block; width: 100%; min-height: 55px; font-size: 12px; }
.message-card > details { margin-top: 10px; }
.message-card > details > summary { font-size: 9px; }
.message-side { display: flex; align-items: center; gap: 4px; color: #9eabc8; font-size: 9px; }
.message-side select { width: auto; min-height: 23px; padding: 3px 22px 3px 7px; font-size: 9px; border-radius: 4px; }
.message-card .row { margin-top: 8px; gap: 7px; }
.message-card .row .field-label { margin-bottom: 4px; font-size: 9px; }
.message-card .row input, .message-card .row select { min-height: 28px; padding-top: 4px; padding-bottom: 4px; font-size: 10px; }
.message-card .small { font-size: 9px; }

.center-col > .panel { padding: 0; overflow: hidden; }
.center-col.panel { padding: 16px 0 0; overflow: hidden; }
.center-col > .section-label { margin-left: 17px; margin-right: 17px; }
.center-col > .segmented { margin-left: 17px; margin-right: 17px; margin-bottom: 5px; }
.tabbar { display: flex; align-items: center; gap: 19px; min-height: 49px; padding: 0 18px; border-bottom: 1px solid var(--border); }
.tab { position: relative; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 0; color: #7c8294; background: transparent; border: 0; font-size: 11px; font-weight: 550; }
.tab:hover { color: #b7c2dd; }
.tab.active { color: #8caeff; }
.tab.active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: #5684ff; border-radius: 2px 2px 0 0; }
.tabbar > .muted, .tabbar > .chip { margin-left: auto; }
.preview-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 625px; padding: 25px 20px 29px; overflow: hidden; background-color: #101116; background-image: radial-gradient(#2c2f3b6b .75px, transparent .75px); background-size: 16px 16px; }
.phone-shell { position: relative; flex-shrink: 0; width: 390px; max-width: 100%; line-height: 0; border: 12px solid #d6d6da; border-radius: 64px; background: #d6d6da; box-shadow: 0 0 0 1px #ffffff45, inset 0 0 0 1px #c7c9ce; filter: drop-shadow(0 15px 24px #0006); }
.phone-shell canvas { display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: 9 / 16; border-radius: 52px; background: #00e000; }
.dynamic-island { position: absolute; z-index: 2; top: 2.15%; left: 50%; width: 30.6%; aspect-ratio: 112 / 34; height: auto; transform: translateX(-50%); background: #000; border-radius: 20px; pointer-events: none; }
.preview-stage > canvas { display: block; max-width: 100%; height: auto; }
.preview-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 12px 17px; border-top: 1px solid var(--border); background: #17181e; }
.preview-bottom .row { gap: 6px; }
.preview-bottom .btn { min-height: 28px; padding: 5px 8px; font-size: 10px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 7px; color: #969db2; font-size: 10px; font-variant-numeric: tabular-nums; }
#preview-pane > .pagination { margin: 13px 0 11px; }
.playback-controls { justify-content: center; flex-wrap: wrap; padding: 0 15px; }
.playback-controls .btn { min-height: 30px; padding: 6px 9px; font-size: 10px; }
#timeline { width: calc(100% - 34px); margin: 14px 17px 6px; }
#preview-pane > .row.small { justify-content: space-between; padding: 0 17px 13px; }
#audio-pane, #video-pane { min-height: 650px; padding: 18px; }
#audio-pane > .btn { margin: 15px 0 9px; }
#audio-pane > p, #video-pane > p { margin-top: 11px; }
#output-video { display: block; width: auto; max-width: 100%; max-height: 600px; margin: 0 auto 16px; background: #000; border-radius: 15px; }
.center-col > .preview-bottom { display: block; padding: 15px 17px 17px; }
.center-col > .preview-bottom > .row { justify-content: space-between; }
.center-col > .preview-bottom .section-label { margin-bottom: 0; }
.center-col > .preview-bottom .field .section-label { margin-bottom: 7px; }
.center-col > .preview-bottom .field { flex: 1; }
.center-col > .preview-bottom .divider { margin: 14px 0; }
.center-col > .preview-bottom .status-box { margin-top: 10px; }
#contact-photos { display: flex; flex-wrap: wrap; gap: 7px; }
#contact-photos:not(:empty) { margin-top: 10px; }
#contact-photos img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.pagination .btn { width: 27px; min-width: 27px; height: 27px; min-height: 27px; padding: 3px; }
.pagination .active { color: #fff; background: var(--accent); border-color: var(--accent); }
.pagination input { width: 34px !important; min-height: 26px !important; padding: 3px !important; text-align: center; }
.status-box { margin-top: 12px; padding: 11px 14px; display: flex; align-items: center; gap: 8px; background: #15181b; border: 1px solid #26372e; border-radius: 8px; color: #7f9b8b; font-size: 10px; }
.status-dot { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: #49c88b; box-shadow: 0 0 7px #49c88b30; }
.status-box.processing { color: #9baede; border-color: #2c3c66; background: #151a25; }
.status-box.processing .status-dot { background: #7395ff; box-shadow: 0 0 7px #7395ff44; animation: pulse 1.3s ease-in-out infinite; }
.status-box.error { color: #e794a1; border-color: #63303b; background: #21171c; }
.status-box.error .status-dot { background: var(--danger); }

.settings-panel { padding-bottom: 15px; }
.settings-panel .panel-title { margin-bottom: 16px; }
.settings-panel .field { margin-bottom: 14px; }
.settings-panel .field-label { font-size: 10px; }
.settings-panel select { min-height: 32px; font-size: 10px; }
.range-field { margin: 0 0 17px; }
.range-field:last-child { margin-bottom: 0; }
.range-field .field-label { margin-bottom: 9px; }
input[type="range"] { display: block; width: 100%; height: 14px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; accent-color: var(--accent); }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--range-progress, 50%), #343746 var(--range-progress, 50%), #343746 100%); border-radius: 5px; }
input[type="range"]::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; appearance: none; -webkit-appearance: none; border: 2px solid #77a0ff; border-radius: 50%; background: #3268ff; box-shadow: 0 0 0 2px #17181e; }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 5px; background: #343746; }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 5px; background: var(--accent); }
input[type="range"]::-moz-range-thumb { width: 9px; height: 9px; border: 2px solid #77a0ff; border-radius: 50%; background: #3268ff; }
input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 4px #3268ff24; }
.range-ticks { display: flex; justify-content: space-between; margin-top: 4px; color: #5e6475; font-size: 9px; font-variant-numeric: tabular-nums; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 29px; margin: 4px 0; color: #9ba2b7; font-size: 11px; }
.toggle-row > div > .small { color: var(--faint); font-size: 9px; }
.switch { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; width: 30px; height: 17px; min-height: 17px; padding: 0; border: 1px solid #3d4252; border-radius: 20px; background: #2a2d39; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; background: #8991a9; border-radius: 50%; transition: transform .18s, background .18s; }
.switch.active, .switch[aria-checked="true"], .switch:has(input:checked) { border-color: #4d7bff; background: #3268ff; }
.switch.active::after, .switch[aria-checked="true"]::after, .switch:has(input:checked)::after { background: #fff; transform: translateX(13px); }
.switch input { opacity: 0; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; cursor: pointer; }
.switch:focus-within { outline: 2px solid #7195ff; outline-offset: 3px; }
input.switch[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 30px; height: 17px; min-height: 17px; margin: 0; border: 1px solid #3d4252; border-radius: 20px; background-color: #2a2d39; background-image: radial-gradient(circle at 7px 50%, #8991a9 0, #8991a9 5px, transparent 5.5px); background-repeat: no-repeat; transition: background-color .18s, border-color .18s; }
input.switch[type="checkbox"]::after { content: none; }
input.switch[type="checkbox"]:checked { border-color: #4d7bff; background-color: #3268ff; background-image: radial-gradient(circle at 21px 50%, #fff 0, #fff 5px, transparent 5.5px); }
input.switch[type="checkbox"]:focus-visible { outline: 2px solid #7195ff; outline-offset: 3px; }
.action-panel { position: sticky; bottom: 15px; z-index: 5; padding: 15px; border-color: #343a50; box-shadow: 0 8px 22px #0002; }
.action-panel .btn.primary { min-height: 41px; font-size: 12px; }
.action-panel > .btn + .btn, .action-panel > .btn + .row, .action-panel > .row + .btn, .action-panel > .row + .row { margin-top: 8px; }
.action-panel .row .btn { flex: 1; }
.action-panel > .small { margin-top: 10px; text-align: center; color: #6e758b; font-size: 9px; }
.action-panel .progress-bar { margin-top: 11px; }

details { min-width: 0; }
details > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; color: #b5bcce; font-size: 11px; font-weight: 550; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "⌄"; color: #737b91; font-size: 15px; line-height: 1; transition: transform .16s; }
details[open] > summary::after { transform: rotate(180deg); }
details[open] > summary { margin-bottom: 14px; }
details.panel > summary { font-size: 12px; }
.settings-panel > details + details { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.audio-list { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
.audio-item { display: flex; flex-direction: column; align-items: stretch; min-width: 0; gap: 8px; padding: 9px; background: #111319; border: 1px solid #2c3040; border-radius: 7px; font-size: 10px; color: #9ba5bc; }
.audio-item > div { min-width: 0; overflow-wrap: anywhere; }
.audio-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-item.active { color: #b3c8ff; border-color: #4268c1; background: #3268ff0e; }
.audio-item .btn { width: 24px; min-width: 24px; height: 24px; min-height: 24px; padding: 3px; }
.audio-item audio { width: 100%; min-width: 0; max-width: 100%; height: 32px; }
.sound-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; max-height: 50vh; overflow-y: auto; }
.sound-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 48px; text-align: left; white-space: normal; }
.sound-choice small { color: var(--muted); font-size: 9px; }
.sound-choice.active { border-color: var(--accent); color: #8caeff; }
.script-image-slot { margin: 4px 4px 4px 0; }
.script-image-slot img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }
.audio-item > a.btn { align-self: flex-end; width: auto; min-width: 0; height: auto; min-height: 27px; padding: 5px 8px; }
.dropzone { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; min-height: 86px; padding: 16px; border: 1px dashed #41495d; border-radius: 8px; background: #11131b; color: #909ab3; font-size: 10px; text-align: center; cursor: pointer; transition: border-color .16s, background .16s; }
.dropzone:hover, .dropzone.dragover { border-color: #648bff; background: #3268ff0c; }
.dropzone svg { width: 24px; height: 24px; color: #7182a6; }
.dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone.full { margin-bottom: 9px; padding: 9px; }
.dropzone.full img { display: block; width: auto; max-width: 100%; max-height: 150px; border-radius: 5px; object-fit: contain; }
.empty-state { padding: 25px 15px; border: 1px dashed #353a4b; border-radius: 8px; color: #747e97; text-align: center; font-size: 11px; }
.empty-state > p { margin-top: 5px; font-size: 10px; color: #59647a; }
.file-label { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 34px; padding: 8px 11px; border: 1px solid #363b4d; border-radius: 7px; color: #a6b0ca; background: #232735; font-size: 10px; cursor: pointer; }
.file-label:hover { color: #d0ddff; border-color: #5675bc; background: #2c3246; }
.file-label input[type="file"] { display: none; }
.footer { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px 10px 3px; color: #51576a; font-size: 9px; }
.footer a { color: #6e7c9e; }

.toast { position: fixed; left: 50%; bottom: 25px; z-index: 100; display: flex; align-items: center; gap: 8px; max-width: min(450px, calc(100% - 32px)); padding: 12px 18px; border: 1px solid #424b65; border-radius: 10px; background: #242a39; color: #e3ebff; box-shadow: 0 8px 30px #0005; font-size: 12px; transform: translateX(-50%); animation: toast-in .18s ease-out; }
.toast.error { color: #ffc8d0; border-color: #733d4b; background: #38232a; }
.modal-backdrop { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 22px; background: #04060bc4; backdrop-filter: blur(7px); }
.modal { width: min(540px, 100%); max-height: calc(100dvh - 44px); overflow-y: auto; padding: 24px; border: 1px solid #383d50; border-radius: 15px; background: #191c26; box-shadow: 0 25px 100px #0008; }
.modal > h2 { margin: 0 0 8px; font-size: 17px; font-weight: 650; }
.modal > p { margin-bottom: 18px; color: #939db7; font-size: 12px; line-height: 1.7; }
.modal textarea { min-height: 190px; }
.modal .panel-title { margin-bottom: 14px; font-size: 16px; }
.modal-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 19px; }
.progress-bar { height: 4px; overflow: hidden; border-radius: 5px; background: #303648; }
.progress-bar > span, .progress-bar > div { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3268ff, #87a7ff); transition: width .25s; }
.progress-bar.indeterminate > span, .progress-bar.indeterminate > div { width: 40%; animation: progress-move 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes progress-move { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
@keyframes toast-in { from { opacity: 0; margin-bottom: -8px; } to { opacity: 1; margin-bottom: 0; } }

.light-ui {
  color-scheme: light;
  --bg: #f2f4f8;
  --panel: #fff;
  --panel-raised: #edf0f7;
  --input: #f7f8fc;
  --border: #e0e4ee;
  --border-strong: #c9d0e1;
  --text: #252b3b;
  --muted: #7b849c;
  --faint: #a0a7b9;
}
.light-ui .topbar { background: #fff; }
.light-ui .help { background: #eaf0ff; border-color: #d5e0ff; color: #64789f; }
.light-ui .help b, .light-ui .help strong, .light-ui a { color: #3e69ce; }
.light-ui .brand-text > span { color: #657a9f; }
.light-ui .studio-label { border-color: #dbe1ef; color: #8390aa; }
.light-ui .field-label, .light-ui .field > label, .light-ui .section-label { color: #7c879e; }
.light-ui .field-value { color: #344568; }
.light-ui input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), .light-ui select, .light-ui textarea { border-color: #d8dfed; color: #34405a; }
.light-ui select option { color: #34405a; background: #fff; }
.light-ui input::placeholder, .light-ui textarea::placeholder { color: #a3acc1; }
.light-ui .btn { color: #657795; background: #f0f3f9; border-color: #d8e0ef; }
.light-ui .btn:hover:not(:disabled) { color: #334b7b; background: #e6ecf7; border-color: #bdccec; }
.light-ui .btn.primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.light-ui .btn.primary:hover:not(:disabled) { background: var(--accent-hover); }
.light-ui .btn.danger { color: #dd4c64; background: #fff4f6; border-color: #f5d5dc; }
.light-ui .segmented { border-color: #dfe5f0; background: #edf1f8; }
.light-ui .segmented button { color: #8c98af; }
.light-ui .segmented button.active { color: #3d5d9d; background: #fff; border-color: #d6dff0; box-shadow: 0 1px 3px #28406b0b; }
.light-ui .chip { color: #6e87b6; border-color: #d5e0f8; background: #edf2fd; }
.light-ui .message-card { border-color: #dce4f3; background: #f8faff; }
.light-ui .message-card.selected { border-color: #7da0fa; }
.light-ui .message-toolbar button:hover { color: #4265ae; background: #e7edfb; }
.light-ui .avatar-button { color: #899ab8; background: #e6ebf5; border-color: #d3ddec; }
.light-ui .preview-stage { background-color: #e8edf5; background-image: radial-gradient(#b8c5da7d .75px, transparent .75px); }
.light-ui .preview-bottom { background: #fff; }
.light-ui .status-box { background: #f1faf5; border-color: #d5ecdf; color: #759782; }
.light-ui .audio-item, .light-ui .dropzone { background: #f7f9fe; border-color: #ccd9ef; }
.light-ui .modal { background: #fff; border-color: #d0dbef; }
.light-ui .toast { background: #fff; border-color: #d0dbef; color: #405d94; box-shadow: 0 8px 30px #29436a21; }
.light-ui details > summary { color: #657895; }
.light-ui input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--range-progress, 50%), #d9e1f1 var(--range-progress, 50%), #d9e1f1 100%); }
.light-ui input[type="range"]::-webkit-slider-thumb { box-shadow: 0 0 0 2px #fff; }
.light-ui .action-panel { box-shadow: 0 8px 25px #233e6e0e; }
.light-ui input.switch[type="checkbox"]:not(:checked) { border-color: #c5cfe2; background-color: #dbe2ef; background-image: radial-gradient(circle at 7px 50%, #fff 0, #fff 5px, transparent 5.5px); }

/* Keep the preview beside the editors while the desktop page scrolls. */
@media (min-width: 1100px) {
  .center-col.panel {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .center-col .preview-stage {
    min-height: 0;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .center-col .phone-shell {
    width: clamp(180px, calc((100vh - 350px) * .5625), 390px);
    width: clamp(180px, calc((100dvh - 350px) * .5625), 390px);
  }
  .center-col #audio-pane, .center-col #video-pane { min-height: 0; }
  .center-col #output-video { max-height: min(600px, calc(100dvh - 280px)); }
}

@media (min-width: 1750px) {
  .workspace { max-width: 1640px; padding-left: 30px; padding-right: 30px; }
  .columns { grid-template-columns: 350px minmax(420px, 1fr) 330px; gap: 22px; }
  .preview-stage { min-height: 665px; }
}
@media (max-width: 1250px) {
  .workspace { padding: 17px; }
  .columns { grid-template-columns: minmax(260px, 1fr) minmax(340px, 1.38fr) minmax(245px, .9fr); gap: 13px; }
  .panel { padding: 13px; }
  .topbar { padding: 0 20px; }
  .top-actions .btn { font-size: 10px; padding: 6px 8px; }
  .preview-stage { min-height: 615px; padding-left: 13px; padding-right: 13px; }
  .preview-bottom { padding-left: 12px; padding-right: 12px; gap: 7px; }
}
@media (max-width: 1099px) {
  .columns { grid-template-columns: minmax(270px, .85fr) minmax(355px, 1.3fr); gap: 16px; }
  .left-col { grid-column: 1; grid-row: 1 / span 2; }
  .center-col { grid-column: 2; grid-row: 1; }
  .right-col { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .right-col .action-panel { position: sticky; bottom: 12px; }
  .panel { padding: 16px; }
  .topbar { padding: 0 18px; gap: 12px; }
  .brand-text { font-size: 15px; }
  .studio-label { display: none; }
  .top-actions { gap: 6px; }
  .preview-stage { min-height: 625px; }
  .help { font-size: 10px; }
}
@media (max-width: 759px) {
  .topbar { height: auto; min-height: 65px; padding: 12px 14px; flex-wrap: wrap; gap: 11px; }
  .brand { gap: 9px; }
  .brand-icon { width: 31px; height: 31px; border-radius: 8px; }
  .brand-text { font-size: 16px; }
  .top-actions { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .top-actions .btn { min-height: 29px; padding: 5px 7px; font-size: 9px; }
  .workspace { padding: 13px 12px 20px; }
  .help { margin-bottom: 13px; padding: 10px 12px; border-radius: 8px; line-height: 1.7; }
  .columns { display: flex; flex-direction: column; gap: 15px; }
  .left-col, .center-col, .right-col { width: 100%; }
  .left-col { gap: 13px; }
  .right-col { display: flex; gap: 13px; }
  .panel { border-radius: 12px; }
  .panel-title { margin-bottom: 15px; }
  .preview-stage { min-height: 610px; padding: 23px 15px; }
  .phone-shell { width: 328px; }
  .preview-bottom { padding: 12px 14px; }
  .tabbar { gap: 18px; padding: 0 16px; }
  .action-panel { position: sticky; bottom: 10px; background: var(--panel); border-color: #4c5c85; box-shadow: 0 5px 28px #0007; }
  .right-col .action-panel { bottom: 10px; }
  .action-panel .btn.primary { min-height: 44px; }
  .footer { padding-top: 18px; flex-wrap: wrap; gap: 6px 12px; }
  .modal-backdrop { padding: 15px; }
  .modal { max-height: calc(100dvh - 30px); padding: 19px; }
}
@media (max-width: 420px) {
  .topbar { padding-left: 12px; padding-right: 12px; }
  .brand-text { font-size: 14px; }
  .top-actions { gap: 4px; }
  .top-actions .btn { padding: 5px 6px; }
  .workspace { padding-left: 9px; padding-right: 9px; }
  .panel { padding: 13px; }
  .phone-shell { width: 300px; }
  .dynamic-island { top: 2.15%; width: 30.6%; height: auto; }
  .preview-stage { min-height: 550px; }
  .preview-bottom { flex-wrap: wrap; justify-content: center; gap: 10px 16px; }
  .tabbar { gap: 14px; padding: 0 13px; }
  .tabbar > .muted { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.message-toolbar-spacer{flex:1}.message-tools{display:grid;grid-template-columns:30px 30px minmax(0,1fr);gap:7px;margin:9px 0}.message-tools select{grid-column:1/-1;min-width:0;width:100%;font-size:11px}.message-tools>.btn{padding:5px;min-height:30px}.message-tools>.btn.active{border-color:var(--accent);color:#b5c8ff;background:var(--accent-soft)}.sound-shortcut{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}.chat-divider .contact-row{margin:12px 0}.chat-divider>.field{margin-top:8px}.chat-divider .contact-row input{width:100%;min-width:0}.chat-divider .avatar-button{width:38px;height:38px;min-width:38px;min-height:38px}.api-quota-row{padding:10px 12px;border-radius:10px;background:var(--panel-raised);gap:7px}.api-quota-row #quota{flex:1;min-width:0;line-height:1.6;font-size:10px}.api-quota-row #quota.verified{color:var(--text);font-weight:600}.api-quota-row #quota.verified:before{content:'';display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#35cd73}.api-quota-row .btn{flex:0 0 auto}

.top-actions [data-account-profile]{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.voice-select-row{display:flex;align-items:stretch;gap:7px;min-width:0;width:100%}.voice-select-row select{min-width:0;flex:1;width:0}.voice-preview-button{flex:0 0 auto;min-width:60px;white-space:nowrap;font-size:10px;padding:6px 8px}.voice-preview-button.active{border-color:var(--accent);color:#b5c8ff;background:var(--accent-soft)}.message-tools>.voice-select-row{grid-column:1/-1}.message-tools .voice-select-row select{grid-column:auto;width:0}.message-tools .voice-preview-button{min-height:32px}

.compact-message{position:relative;padding:10px;border-radius:12px;background:var(--panel-raised)}
.message-main-row{display:grid;grid-template-columns:16px 42px minmax(0,1fr) 14px;gap:8px;align-items:stretch;min-height:62.5px}
.message-index{padding-top:8px;font-size:10px;font-weight:700}
.message-main-row>.message-side{flex-direction:column;gap:2px;min-height:44px;padding:6px 2px;border:0;border-radius:8px;background:var(--input);font-size:11px;font-weight:700;color:var(--text)}
.message-main-row>.message-side.is-sent{background:var(--accent);color:#fff}
.message-content{min-width:0}
.message-content>.message-text{display:block;width:100%;min-height:56.5px;height:56.5px;padding:8px 12px;border-radius:12px;font-size:14px;line-height:1.375;resize:vertical}
.message-actions{display:flex;flex-direction:column;gap:2px;padding-top:1px}
.message-actions>.btn{width:14px;min-width:14px;height:16px;min-height:16px;padding:0;border:0;background:transparent;color:var(--muted);font-size:12px;line-height:1}
.compact-message>.message-tools{display:flex;align-items:center;gap:4px;margin:8px 20px 0 0;min-width:0}
.compact-message>.message-tools>.btn{flex:0 0 24px;min-width:24px;height:28px;min-height:28px;padding:3px;font-size:10px;border-radius:6px}
.compact-message>.message-tools>.sound-shortcut{flex:1 1 76px;min-width:36px;font-size:9px}
.compact-message .message-tools>.voice-select-row{flex:1 1 108px;gap:3px;width:auto;min-width:82px;max-width:145px}
.compact-message .message-tools .voice-select-row>select{height:28px;min-height:28px;padding:3px 16px 3px 5px;font-size:10px;border-radius:6px}
.compact-message .message-tools .voice-preview-button{width:26px;min-width:26px;height:28px;min-height:28px;padding:3px;font-size:0}
.compact-message .message-tools .voice-preview-button:before{content:'▶';font-size:10px}
.compact-message .message-tools .voice-preview-button.active:before{content:'■'}
.compact-message>details:not([open]){position:absolute;right:9px;bottom:10px;margin:0}
.compact-message>details:not([open])>summary{display:block;width:18px;height:26px;padding:0;list-style:none;font-size:0;text-align:center}
.compact-message>details:not([open])>summary::-webkit-details-marker{display:none}
.compact-message>details:not([open])>summary:after{content:'⋯';font-size:18px;line-height:26px}
.compact-message>details[open]{margin-top:10px}
.compact-message.image-message .message-main-row{grid-template-columns:16px 42px minmax(0,1fr) 14px}
.compact-message.image-message .message-content>.dropzone{min-height:100px}
@media(max-width:1250px) and (min-width:760px){.compact-message .message-tools>.voice-select-row{flex-basis:88px;min-width:72px}.compact-message>.message-tools{gap:3px}.compact-message>.message-tools>.sound-shortcut{flex-basis:42px}}
@media(min-width:1200px){.columns{grid-template-columns:380px minmax(300px,1fr) 360px;gap:20px}.left-col,.right-col{gap:20px}.panel{padding:16px;border-radius:18px}.message-list{gap:8px}}

.elevenlabs-panel{padding:16px;border-radius:18px}
.elevenlabs-panel>summary{height:24px;color:var(--text);font-size:16px!important;font-weight:700;line-height:24px}
.elevenlabs-panel[open]>summary{margin-bottom:14px}
.elevenlabs-fields{display:flex;flex-direction:column;gap:12px}
.elevenlabs-fields>.field{display:block;margin:0}
.elevenlabs-fields .section-label{margin:0 0 12px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:0;line-height:16.5px;text-transform:none}
.elevenlabs-fields select,.elevenlabs-fields #api-key{display:block;height:44px;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--text);font-size:14px;line-height:22px}
.elevenlabs-fields select{padding-right:28px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3.5 4.5 2.5 3 2.5-3' fill='none' stroke='%238a8f98' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat}
.elevenlabs-fields .api-quota-row{display:flex;align-items:center;gap:16px;min-height:52px;padding:12px 16px 12px 12px;border-radius:12px;background:var(--panel-raised)}
.elevenlabs-fields .api-quota-row #quota{flex:1;min-width:0;font-size:13px;font-weight:400;line-height:20px;color:var(--muted)}
.elevenlabs-fields .api-quota-row #quota.verified{color:var(--text);font-weight:500;white-space:nowrap}
.elevenlabs-fields .api-quota-row #quota.verified:before{width:8px;height:8px;margin-right:8px;background:#35cd63}
.elevenlabs-fields .api-quota-row>.btn{min-height:28px;padding:4px 8px;border:0;border-radius:4px;background:transparent;color:var(--text);font-size:14px;font-weight:700;line-height:20px;white-space:nowrap}
.elevenlabs-fields .api-quota-row>.btn:hover:not(:disabled){color:var(--accent);background:transparent}
.speech-options>.stack{margin-top:0}
/* Match the reference sidebar without changing the editor or preview controls. */
.right-col{gap:20px}
.right-col>.panel{padding:16px;border-radius:18px}
.right-col>#platform{order:0}
.right-col>.settings-panel{order:1}
.right-col>.action-panel{order:2;position:static;bottom:auto;z-index:auto;gap:12px;border-color:var(--border);box-shadow:none}
.right-col>.speech-options{order:3}
.right-col>.appearance-options{order:4}
.right-col .settings-panel>details+details{margin-top:20px;padding-top:16px}
.right-col .settings-panel>details>summary,.right-col>.speech-options>summary,.right-col>.appearance-options>summary{font-size:16px;font-weight:700;line-height:24px;color:var(--text)}
.right-col .settings-panel>details[open]>summary{margin-bottom:18px}
.right-col .settings-panel>details>.stack{gap:12px}
.right-col .settings-panel .field{margin:0 0 8px}
.right-col .section-label,.right-col .settings-panel .field-label{font-size:11px;font-weight:600;line-height:17px;letter-spacing:.4px;color:var(--muted);text-transform:none}
.right-col .section-label{display:block;margin:0 0 8px}
.right-col .field-value{font-size:12px;font-weight:600;color:var(--accent)}
.right-col .range-field{margin:0 0 8px}
.right-col .field-label{margin-bottom:6px}
.right-col .range-ticks{display:none}
.right-col input[type="range"]{display:block;height:20px;margin:0;cursor:pointer}
.right-col input[type="range"]::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:var(--panel-raised)}
.right-col input[type="range"]::-webkit-slider-thumb{width:20px;height:20px;margin-top:-7.5px;border:0;border-radius:50%;background:var(--accent);box-shadow:none}
.right-col input[type="range"]::-moz-range-track{height:5px;border-radius:5px;background:var(--panel-raised)}
.right-col input[type="range"]::-moz-range-progress{background:transparent}
.right-col input[type="range"]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--accent);box-shadow:none}
.right-col .segmented{min-height:48px;padding:4px;gap:4px;border:0;border-radius:14px;background:var(--panel-raised)}
.right-col .segmented>button{min-height:40px;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:14px;font-weight:600;line-height:20px}
.right-col .segmented>button.active{border:0;background:#292c34;color:var(--text)}
.light-ui .right-col .segmented>button.active{background:var(--panel);color:var(--text)}
.right-col .toggle-row{min-height:38px;margin:0;gap:12px;color:var(--text);font-size:14px;font-weight:600;line-height:20px}
.right-col input.switch[type="checkbox"]{position:relative;flex:0 0 52px;width:52px;min-width:52px;height:30px;margin:0;border:0;border-radius:18px;appearance:none;background:#cfd3d9;background-image:none;cursor:pointer;transition:background-color .18s}
.right-col input.switch[type="checkbox"]:checked{background:#2cc85b;background-image:none}
.right-col input.switch[type="checkbox"]::before{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .18s}
.right-col input.switch[type="checkbox"]:checked::before{transform:translateX(22px)}
.right-col #persistent-header-hint{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.right-col .settings-panel select,.right-col>.speech-options select{min-height:44px;padding:10px 12px;border-radius:12px;background-color:var(--panel);font-size:14px}
.right-col .voice-select-row>.voice-preview-button{min-width:44px;border-radius:12px}
.right-col .media-upload-field{margin:0!important}
.right-col .media-upload-field:has([data-media="music"]){margin-top:8px!important;padding-top:16px;border-top:1px solid var(--border)}
.right-col .media-upload-row{justify-content:space-between;min-height:38px;gap:12px}
.right-col .media-upload-row>.section-label{margin:0;color:var(--text);font-size:14px;font-weight:600;letter-spacing:0;line-height:20px}
.right-col .media-upload-row>.file-label{position:relative;flex:0 0 auto;width:auto;min-height:36px;padding:7px 13px;border:0;border-radius:14px;background:var(--panel-raised);color:var(--text);font-size:14px;font-weight:700;line-height:22px;cursor:pointer}
.right-col .media-upload-row>.file-label:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.right-col .file-label input.media-file-input{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.right-col .media-upload-file{min-width:0;margin-top:8px;gap:8px}
.right-col .media-upload-file>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.right-col .media-upload-file>.btn{min-width:28px;min-height:28px;padding:2px 6px}
.right-col>.action-panel>.btn{min-height:44px;margin:0;padding:10px 12px;border:0;border-radius:12px;background:var(--panel-raised);color:var(--text);font-size:14px;font-weight:700;line-height:24px}
.right-col>.action-panel>.btn.primary{min-height:48px;background:var(--accent);color:#fff}
.right-col>.action-panel>.btn:hover:not(:disabled){filter:brightness(1.08)}
.right-col>.appearance-options>.stack{gap:12px}
@media(max-width:1199px) and (min-width:760px){.elevenlabs-fields .api-quota-row{gap:10px}.elevenlabs-fields .api-quota-row #quota.verified{white-space:normal}.elevenlabs-fields .api-quota-row #quota,.elevenlabs-fields .api-quota-row>.btn{font-size:12px}}
@media(max-width:420px){.elevenlabs-fields .api-quota-row{gap:10px}.elevenlabs-fields .api-quota-row #quota,.elevenlabs-fields .api-quota-row>.btn{font-size:12px}.elevenlabs-fields .api-quota-row>.btn{padding:4px}}