.settings-body, .revision-settings, #video-form .advanced { --settings-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
/* Shared settings rhythm; controls retain their native semantics and values. */
#video-form .advanced { padding: 0; background: #fafbfd; }
#video-form .advanced > summary { display: flex; align-items: center; gap: 10px; padding: 16px 24px; list-style: none; }
#video-form .advanced > summary::-webkit-details-marker { display: none; }
#video-form .advanced > summary strong { font-size: 14px; font-weight: 600; color: var(--ink-2); }
#video-form .advanced > summary::after { content: ''; margin-left: auto; margin-right: 14px; width: 16px; height: 16px; flex-shrink: 0; background: var(--settings-chevron) center / 16px 16px no-repeat; transition: transform .15s; }
#video-form .advanced[open] > summary::after { transform: rotate(180deg); }
#video-form #preferences-status { margin: 0; padding: 2px 8px; border-radius: 4px; background: #edf1f6; color: var(--muted); font-size: 13px; }
#video-form #preferences-status[data-mode="custom"] { color: var(--accent); background: var(--accent-soft); }
.settings-body { padding: 0 24px 20px; }
.settings-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; color: var(--faint); font-size: 13px; }
.settings-toolbar .text-button { padding: 0; min-height: 28px; font-size: 13px; }
.settings-section { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 18px 0; }
.settings-section:last-child { padding-bottom: 0; }
.settings-section h3, .cover-setting > label { color: var(--ink-2); font-size: 13px; font-weight: 600; margin: 0 0 12px; }
.settings-matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "style ." "brand aspect" "presentation cover" "subtitles music" "cleanup assets"; gap: 16px 24px; }
.settings-matrix > label:not(.setting-switch), .style-setting { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 13px; min-width: 0; }
.style-setting { grid-area: style; }
.setting-brand { grid-area: brand; }
.setting-aspect { grid-area: aspect; }
.setting-presentation { grid-area: presentation; }
.setting-cover { grid-area: cover; }
.setting-subtitles { grid-area: subtitles; }
.setting-music { grid-area: music; }
.setting-cleanup { grid-area: cleanup; }
.setting-assets { grid-area: assets; }
#video-form[data-production-mode="simple"] .settings-matrix { grid-template-areas: "brand aspect" "presentation cover" "subtitles music" "cleanup ."; }
.style-setting .template-chip { width: 100%; min-height: 44px; background: white; border-radius: 6px; text-align: left; }
.style-setting .template-chip .icon { width: 16px; height: 16px; }
.style-setting .template-chip > span:last-child { margin-left: auto; font-size: 20px; color: var(--faint); line-height: 1; }
.settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-fields > label { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 13px; min-width: 0; }
.settings-fields .wide-field { grid-column: 1 / -1; }
.settings-fields input, .settings-fields select, .settings-matrix input:not([type="checkbox"]), .settings-matrix select { width: 100%; min-width: 0; height: 44px; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--ink-2); font-size: 13px; }
.settings-switches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.setting-switch { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 15px; cursor: pointer; color: var(--ink-2); font-size: 13px; }
.setting-switch:has(input:disabled) { color: var(--faint); cursor: default; }
.setting-switch > span { flex: 1; min-width: 0; }
.setting-switch small { display: block; color: var(--faint); font-size: 13px; }
.setting-switch input { appearance: none; -webkit-appearance: none; flex: 0 0 34px; width: 34px; height: 20px; margin: 0; border: 1px solid #c9d2de; border-radius: 11px; background: #c9d2de; position: relative; cursor: pointer; transition: background .15s; }
.setting-switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: white; box-shadow: 0 1px 3px #20334d24; transition: transform .15s; }
.setting-switch input:checked { background: var(--accent); border-color: var(--accent); }
.setting-switch input:checked::after { transform: translateX(14px); }
.setting-switch input:disabled { opacity: .4; cursor: default; }
@media (max-width: 550px) {
  #video-form .advanced { padding: 0; border-radius: 0; }
  #video-form .advanced > summary { padding: 15px; gap: 8px; }
  #video-form #preferences-status { max-width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .settings-body { padding: 0 15px 18px; }
  .settings-toolbar { font-size: 13px; gap: 5px; }
  .settings-fields { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .settings-switches { grid-template-columns: minmax(0, 1fr); }
  .setting-switch + .setting-switch { border-top: 1px solid var(--line); }
  .setting-switch { min-height: 54px; }
  .settings-matrix { gap: 14px 14px; }
  .settings-matrix .setting-switch { gap: 7px; min-height: 46px; border-top: 0; font-size: 13px; }
  .settings-matrix .template-chip { gap: 5px; padding: 8px; font-size: 13px; }
  .settings-matrix .template-chip .icon { width: 14px; height: 14px; }
  .settings-matrix .template-chip > span:last-child { font-size: 16px; }
  .settings-matrix input:not([type="checkbox"]), .settings-matrix select { font-size: 13px; padding: 7px 8px; }
}
@media (prefers-reduced-motion: reduce) { .setting-switch input, .setting-switch input::after { transition: none; } }
.style-setting #template-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.settings-matrix select, .revision-settings select { appearance: none; -webkit-appearance: none; background-image: var(--settings-chevron); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px; padding-right: 36px; }

.settings-matrix :is(input:not([type="checkbox"]),select):hover, .settings-fields :is(input,select):hover { border-color: var(--line-hover); }