/* Warm studio palette; the original layout and controls remain in style.css. */
:root {
  --fnt-display: 'Barlow Condensed', sans-serif;
  --fnt-ui: 'Barlow Condensed', sans-serif;
  --amber: #874825; --amber2: #b95531; --tx2: #615142; --tx3: #766657;
  --ink: #392e25; --muted: #746456; --paper: #fffaf0;
  --line: #dfd0bb; --green: #446843; --red: #b34437;
}
body { background: #dbc09a; color: var(--ink); padding: 24px;
  background-image: repeating-linear-gradient(3deg, transparent 0 8px, #956c3c0b 9px, transparent 11px 23px), linear-gradient(115deg,#e6cfae,#caa57a); }
.app-container { min-height: calc(100vh - 48px); border-radius: 18px; background: #faf4e8;
  border: 1px solid #fff7e5; box-shadow: 0 18px 60px #54371d26; }
.main-toolbar { padding: 22px 28px; background: #f8eddb; border-color: var(--line); gap: 18px; }
.brand h1 { color: #583b28; font-size: 1.6rem; letter-spacing: .025em; text-shadow: none; }
.brand h1 .badge-mini { color: #9d613d; opacity: 1; }
.sub { font-size: .6rem; color: var(--muted); letter-spacing: .04em; margin-top: 7px; }
.transport { border: 1px solid var(--line); border-radius: 10px; background: #fff9ef; padding: 6px; gap: 3px; }
.transport-below { width: fit-content; margin: 0 auto 24px; justify-content: center; box-shadow: 0 3px 8px #72502b12; }
.actions { gap: 7px; flex-wrap: wrap; }
.theme-picker { display: inline-flex; align-items: center; gap: 8px; color: var(--tx2); font-size: .85rem; }
.theme-picker select { font-family: var(--fnt-ui); cursor: pointer; border: 1px solid var(--line); }
.ctrl-btn { border-radius: 7px; background: #eddfca; color: #563f2d; letter-spacing: .01em; min-height: 36px; padding: 8px 12px; }
.ctrl-btn:hover:not(:disabled) { background: #e1c7a8; color: #3e2a1c; box-shadow: none; }
.ctrl-btn:disabled { opacity: .48; }
#playPauseBtn { background: var(--green); color: white; }
.time-display { background: transparent; color: #695342; font-size: .7rem; padding: 4px 8px; }
.bypass-btn { width: auto; height: auto; border-radius: 7px; color: #664932; background: #ead9be; }
.bypass-btn.active, #loopBtn.active, #matchBtn[aria-pressed="true"] { background: #e0eacd; color: #355631; box-shadow: none; }
.download-btn { background: #b65735; color: white; }
.download-btn:hover:not(:disabled) { background: #974328; color: white; }
.clear-btn { color: #985039; background: #f0e1d2; }
.preset-btn { color: #665139; }
.studio-intro { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 34px 36px 20px; }
.studio-eyebrow { color: #9b5935; font-size: .66rem; font-weight: 700; letter-spacing: .17em; }
.studio-intro h2 { font-family: Georgia, serif; font-size: 2.15rem; font-weight: 400; letter-spacing: -.04em; margin: 10px 0 8px; color: #4d3828; }
.studio-intro p { color: var(--muted); font-size: 1rem; }
.local-badge { display: flex; align-items: center; gap: 8px; color: #557047; border: 1px solid #cdd4b6; border-radius: 30px; padding: 7px 12px; font-size: .8rem; white-space: nowrap; }
.local-badge span { width: 7px; height: 7px; border-radius: 50%; background: #739153; }
.waveform-container { margin: 8px 36px 16px; min-height: 190px; border-radius: 12px; border: 1px dashed #c3a780;
  background: #f0e1ca; box-shadow: inset 0 2px 8px #72502b08; }
.waveform { height: 190px; padding: 20px 0; }
.loop-overlay { top: 20px; }
.waveform-container.drag-over { border-color: #a05b30; box-shadow: 0 0 0 3px #bd784522; }
.drop-icon { color: #a36e43; font-size: 2rem; animation: none; }
.drop-title { color: #624329; font-size: 1.25rem; }
.drop-sub, .drop-formats { color: #856d54; font-family: var(--fnt-ui); font-size: .9rem; }
.drop-formats { font-size: .72rem; letter-spacing: .1em; }
.drag-over .drop-title, .drag-over .drop-sub, .drag-over .drop-icon, .drag-over .drop-formats { color: #9a4f27; }
.pre-idle { background: transparent; color: var(--muted); border: 0; padding: 0 36px 18px; }
.pre-idle i { color: #78904f; }
.studio-guide { margin: 12px 36px 40px; padding: 25px 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; color: #a87950; }
.studio-guide span { display: flex; gap: 12px; align-items: baseline; font-family: var(--fnt-mono); font-size: .8rem; }
.studio-guide b { font-family: var(--fnt-ui); color: #67513b; font-size: 1rem; font-weight: 500; }
.studio-guide p { flex-basis: 100%; color: #907759; font-size: .85rem; margin-top: 10px; }
.mode-bar { gap: 14px; padding: 12px 36px 24px; background: transparent; border: 0; }
.mode-btn { flex-direction: row; justify-content: flex-start; gap: 12px; border-radius: 10px; padding: 18px 22px; background: #f2e8d7; border-color: var(--line); color: #735e49; }
.mode-btn-icon { font-size: 1.2rem; }
.mode-btn-label { font-size: 1rem; }
.mode-btn-sub { color: #8d7760; font-size: .8rem; margin-left: auto; }
.mode-btn:hover { background: #eee0c9; color: #65472f; border-color: #bba280; box-shadow: none; }
.mode-btn-active { background: #e6ebd8; border-color: #80915f; box-shadow: none; color: #405d38; }
.mode-btn-active .mode-btn-icon, .mode-btn-active .mode-btn-sub { color: #547348; }
.workspace { margin: 0 36px 28px; min-height: 420px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ws-left { background: #f4ebdc; width: 47%; }
.ws-right { background: var(--paper); }
.ws-divider { background: var(--line); }
.ws-idle-msg i, .ws-right-idle i { color: #b69c7d; }
.ws-idle-msg p, .ws-right-idle p, .editor-no-params { color: #7a6551; font-size: .95rem; }
.presets-inner { padding: 16px; }
.presets-group { margin-bottom: 16px; }
.presets-cat-label { color: #8a6343; font-size: .74rem; letter-spacing: .1em; font-weight: 700; padding: 6px 0 10px; }
.presets-grid { grid-template-columns: repeat(auto-fill,minmax(125px,1fr)); gap: 9px; }
.preset-card { text-align: left; font-family: var(--fnt-ui); background: #fff9ef; border-color: #deceb7; border-radius: 8px; padding: 12px; min-width: 0; }
.preset-card:hover { background: #f7edd8; border-color: #b79165; }
.preset-active, .preset-active:hover { background: #e8edd9; border-color: #758852; box-shadow: 0 0 0 1px #758852; }
.preset-name { font-size: .93rem; color: #62492f; font-weight: 600; }
.preset-active .preset-name { color: #3d5b2e; }
.preset-eq { margin-top: 11px; height: 22px; gap: 5px; }
.bar-up { background: #bc8e4c; }
.bar-zero, .bar-flat { background: #d5c4a5; }
.bar-down { background: #c37b60; }
.preset-active .bar-up, .preset-active .bar-flat { background: #7e955d; }
.preset-active .bar-down { background: #b98159; }
.comp-dot { background: #ecdfca; border-color: #cfb896; }
.comp-dot-on { background: #bb8250; border-color: #aa7141; }
.preset-active .comp-dot-on { background: #6d874b; }
.preset-note { color: #79634e; font-size: .85rem; line-height: 1.5; margin: 0 0 10px; }
.editor-hdr { padding: 22px; border-color: var(--line); }
.ehdr-preset { background: #eef0df; }
.ehdr-preset .ehdr-icon { color: #6b804e; }
.ehdr-text b { color: #4e3c2c; font-size: 1.2rem; }
.ehdr-text p { color: #77634e; font-size: .95rem; }
.editor-sliders { padding: 24px; gap: 20px; }
.param-label { color: #72583e; font-size: .92rem; }
.param-icon { color: #ab794c; }
.param-val { color: #5e753e; font-size: .8rem; }
.param-range, .param-range::-webkit-slider-runnable-track { background: #e3d5bd; }
.param-range::-webkit-slider-thumb { background: #798d57; box-shadow: 0 2px 4px #50472e30; }
.param-range::-moz-range-thumb { background: #798d57; box-shadow: none; }
.param-range::-moz-range-track { background: #e3d5bd; }
.param-restore { color: #8b7458; border-color: #ded0b8; }
.param-restore:hover { color: #75502e; border-color: #ac8962; }
.analysis-stats-bar, .finding-row { border-color: var(--line); }
.astat { background: #eadeca; color: #846345; }
.astat b, .fr-label { color: #634b35; }
.finding-row:hover, .finding-row.fr-selected { background: #e9dfc9; }
.fr-ok .fr-badge, .ehdr-ok .ehdr-icon { color: #587444; }
.fr-warn .fr-badge, .ehdr-warn .ehdr-icon { color: #a16a18; }
.fr-fix .fr-badge, .ehdr-fix .ehdr-icon { color: #b3543d; }
.toggle-track { background: #d4c5ac; }
.toggle-inp:checked + .toggle-track { background: #c6d1af; }
.toggle-inp:checked + .toggle-track .toggle-thumb { background: #66834b; }
.ws-analyzing, .ws-analyzing i { color: #7f674b; }
.status-bar { margin-top: auto; border-color: var(--line); background: #eee2ce; color: #6a563f; }
.status-center i { color: #70874c; }
.app-footer { background: #f7eddd; border-color: var(--line); padding: 14px 20px; }
.footer-owner { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.instagram-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; font-size: 16px; }
.hamburger-menu, .modal-window { background: var(--paper); border-color: #cab593; box-shadow: 0 12px 30px #533a2326; }
.hmenu-section, .hmenu-lang { color: #786148; }
.hmenu-item { color: #654c35; }
.hmenu-item:hover, .modal-header { background: #eddfca; }
.hmenu-divider { background: var(--line); }
.hmenu-lang { border-color: #d7c5a9; }
.modal-body { color: #6d5741; }
.modal-body a { color: #52703e; }
#exportFmtBox { background: #fff8e9 !important; color: #4e3b29 !important; border-color: #c8ad87 !important; font-family: var(--fnt-ui) !important; }
#exportFmtBox h3 { color: #7f522e !important; font-family: var(--fnt-ui) !important; }
#exportFmtBox .efmt-label, #exportFmtBox .efmt-cancel, #exportFmtBox .efmt-opt { color: #6f583f; border-color: #cbb694; }
#exportFmtBox .efmt-opt.sel, #exportFmtBox .efmt-go { background: #587345; border-color: #587345; color: white; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #996032; outline-offset: 4px; }
@media (max-width: 850px) {
  body { padding: 10px; }.app-container { min-height: calc(100vh - 20px); }
  .main-toolbar { padding: 18px; }.studio-intro { padding: 24px 20px 18px; }
  .studio-intro h2 { font-size: 1.8rem; }.local-badge { display: none; }
  .waveform-container { margin: 6px 20px 14px; }.pre-idle { padding: 0 20px 14px; }
  .studio-guide { margin: 12px 20px 24px; }.mode-bar { padding: 8px 20px 18px; }
  .mode-btn { padding: 14px; }.workspace { margin: 0 20px 20px; }
  .ws-left { width: 100%; max-height: 350px; border-color: var(--line); }
  .ws-right { min-height: 240px; }.preset-name { white-space: normal; }
}
@media (max-width: 480px) {
  body { padding: 0; }.app-container { border-radius: 0; border: 0; }.transport { width: 100%; justify-content: space-between; }
  .actions { gap: 6px; }.ctrl-btn { padding: 8px 10px; }.time-display { font-size: .64rem; padding: 0 4px; }
  .transport-below { width: calc(100% - 32px); margin-bottom: 18px; }
  .studio-intro, .main-toolbar { padding-left: 16px; padding-right: 16px; }
  .waveform-container, .workspace { margin-left: 16px; margin-right: 16px; }
  .mode-bar { padding-left: 16px; padding-right: 16px; }.mode-btn-sub { font-size: .7rem; }
  .studio-guide { flex-direction: column; }.studio-guide p { line-height: 1.6; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }