/* assets/css/styles.css - v7 - Garante rotação via JS + CSS e esconde elementos rotativos */

/* --- Reset Básico e Variáveis --- */
:root {
    --bg-color: #202020;
    --panel-bg: rgb(28, 28, 28);
    --panel-bg-darker: rgb(22, 22, 22);
    --border-color: #333;
    --text-color: #ddd;
    --text-color-muted: #aaa;
    --text-color-dark: #888;
    --accent-color-blue: #4fc3f7;
    --accent-color-blue-dark: #3498db;
    --accent-color-green: #9ccc65;
    --accent-color-orange: #ffb74d;
    --accent-color-red: #e57373;
    --input-bg: #111;
    --input-border: #444;
    --button-bg: #3a3a3a;
    --button-border: #555;
    --button-hover-bg: #4a4a4a;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background: var(--bg-color);
    /* background-image: url('../../assets/images/background_home-1.png'); */
    margin: 0;
    padding: 16px;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: var(--text-color);
    overflow-x: hidden;
}
/* --- Cabeçalho (Mantido) --- */
header {
    display: flex;
    flex-direction: column; /* Changed to column to stack logo and new images */
    align-items: center; /* Center items horizontally */
    padding-bottom: 20px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border-color);
}

.logo {
    display: flex; /* Isso alinha os itens filhos (imagem e texto) em uma linha */
    align-items: center; /* Isso alinha verticalmente a imagem e o texto ao centro */
    /* Remova outras propriedades de posicionamento que possam estar empurrando para a direita,
       como float: right; ou text-align: right; se existirem especificamente para .logo */
    margin-bottom: 20px; /* Add some space below the original logo group */
}

/* New styles for header images */
.header-images {
    display: flex;
    flex-direction: column; /* Stack images vertically */
    align-items: center; /* Center images horizontally */
    margin-top: 10px; /* Optional: add some space above the new images */
}

.header-logo-image {
    width: 230px; /* Adjust size as needed */
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    margin-top: 40px; /* Space between the logo and the notebook image */
    margin-bottom: 10px; /* Space between the logo and the notebook image */
}

.header-notebook-image {
    width: 700px; /* Adjust size as needed */
    max-width: 80%; /* Ensure it's responsive within the header */
    height: auto; /* Maintain aspect ratio */
}

.header-subtitle {
    font-family: 'Roboto', Arial, sans-serif; /* Garante a fonte padrão do site */
    text-align: center; /* Centraliza o texto */
    color: var(--text-color-primary); /* Cor do texto primário, ajuste se necessário */
    font-size: 16px; /* Tamanho da fonte, ajuste conforme sua preferência */
    line-height: 1.6; /* Espaçamento entre linhas para melhor legibilidade */
    margin-top: -60px; /* Espaço acima da frase, abaixo do notebook */
    margin-bottom: 20px; /* Espaço abaixo da frase, antes da borda do header */
    padding-left: 15px; /* Pequeno padding lateral para não colar nas bordas em telas menores */
    padding-right: 15px; /* Pequeno padding lateral */
    max-width: 700px; /* Define uma largura máxima para a frase não ficar muito extensa em telas largas */
    margin-left: auto; /* Usado com max-width para centralizar o bloco de texto */
    margin-right: auto; /* Usado com max-width para centralizar o bloco de texto */
}

/* HEADER FIM */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
}

h1, h2, h3, h4 {
    color: var(--text-color);
    margin-top: 0;
    margin-bottom: 0.75em;
    font-weight: 500;
}
h3 { font-size: 1.1em; }
h4 { font-size: 1.0em; color: var(--text-color-muted); }

/* --- Componentes UI (Cabeçalho, Status, Sessão, Controles Básicos, RMS Meters) --- */
.header-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
#logo { max-height: 50px; width: auto; }
#name { font-size: 14px; font-weight: normal; color: var(--text-color); }
#status {
    font-family: monospace;
    font-size: 11px;
    color: var(--text-color-dark);
    text-align: right;
    padding: 0 5px;
    min-height: 18px;
    flex-grow: 1;
}
.session-container {
    background-color: var(--panel-bg-darker);
    border-radius: 8px;
    padding: 12px 15px;
    margin: 15px 0;
}
.session-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}
.session-name { display: flex; align-items: center; gap: 8px; }
.session-name label { color: var(--text-color-muted); white-space: nowrap; font-size: 12px; }
.session-name input {
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid var(--input-border);
    background-color: var(--input-bg);
    color: var(--text-color);
    font-size: 12px;
    width: 200px;
}
.session-name input:focus { outline: none; border-color: var(--accent-color-blue-dark); }
.session-buttons { display: flex; gap: 10px; }
.session-buttons .button img { width: 16px; height: 16px; vertical-align: middle; }
.export-session-button, .import-session-button {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
    font-size: 12px;
}
.export-session-button { background-color: var(--accent-color-blue-dark); }
.export-session-button:hover { background-color: #2980b9; }
.import-session-button { background-color: #2ecc71; }
.import-session-button:hover { background-color: #27ae60; }

.basic-controls {
    background: var(--panel-bg-darker);
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.basic-controls .button { background: none; border: none; padding: 0; cursor: pointer; line-height: 0; }
.basic-controls .button img { vertical-align: middle; transition: transform 0.2s ease; opacity: 0.9; }
.basic-controls .button:hover img { transform: scale(1.05); opacity: 1; }
.basic-controls .button:disabled, .basic-controls .button:disabled img { opacity: 0.4; cursor: not-allowed; transform: none; }
.play-pause-button img { width: 28px; height: 28px; }
.stop-button img { width: 32px; height: 32px; margin-left: -2px; }
.buttonload {
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    background-color: var(--accent-color-blue-dark);
    color: white;
    transition: background-color 0.2s;
    font-size: 13px;
}
.buttonload:disabled { background-color: #555; color: #999; cursor: not-allowed; }
.buttonload:hover:not(:disabled) { background-color: #2980b9; }
.time-display {
    font-family: monospace;
    font-size: 16px;
    color: var(--accent-color-blue);
    background: var(--input-bg);
    padding: 5px 10px;
    border-radius: 4px;
    min-width: 130px;
    text-align: center;
    letter-spacing: 1px;
    border: 1px solid var(--input-border);
}
.volume-control { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.volume-control label { font-size: 11px; color: var(--text-color-muted); }
.volume-control input[type="range"] {
    width: 110px;
    height: 4px;
    background: #444;
    border-radius: 2px;
    cursor: pointer;
}
.volume-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #ccc;
    border-radius: 2px;
    cursor: pointer;
    margin-top: -4px;
}
.volume-control .master-value {
    font-size: 11px;
    color: var(--text-color);
    min-width: 35px;
    text-align: right;
    font-family: monospace;
}
.rms-meters { margin-left: 10px; }
.rms-meter-container { display: flex; flex-direction: column; gap: 2px; }
.horizontal-meter {
    position: relative;
    /* Aumente a largura - ajuste conforme necessário */
    width: 300px; /* Antes era 130px */
    /* Opcional: aumentar altura */
    height: 8px; /* Antes era 6px */
    background: #101010;
    border-radius: 4px; /* Ajuste se a altura mudar muito */
    overflow: hidden;
    border: 1px solid #333;
}
.rms-meter-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    transition: width 0.05s linear;
    border-radius: 2px;
    background: linear-gradient(to right, #1a477a, #3980b6, #5ab3d6);
}

/* --- Área de Upload e Faixas --- */
.upload-area {
    background: var(--panel-bg-darker);
    border-radius: 10px;
    margin-bottom: 20px;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 10px;
}
.upload-slot {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 10px 8px;
    border-bottom: 1px solid #303030;
    min-height: 100px;
}
.upload-slot:last-child { border-bottom: none; }

/* styles.css */

/* --- Estilização Customizada da Scrollbar para .upload-area --- */

/* Define a largura geral da scrollbar (para WebKit) */
.upload-area::-webkit-scrollbar {
    width: 10px; /* Largura da scrollbar vertical */
    height: 10px; /* Altura da scrollbar horizontal (se aplicável) */
}

/* Estiliza o fundo da barra (a trilha onde o botão desliza) */
.upload-area::-webkit-scrollbar-track {
    background: var(--panel-bg-darker); /* Cor de fundo um pouco mais escura que o painel */
    border-radius: 10px; /* Bordas arredondadas */
    margin: 2px 0; /* Pequena margem interna */
}

/* Estiliza o botão deslizante (o "thumb") */
.upload-area::-webkit-scrollbar-thumb {
    background-color: #555; /* Cor cinza escura para o botão */
    border-radius: 5px; /* Bordas arredondadas */
    border: 2px solid var(--panel-bg-darker); /* Borda na cor do fundo para criar efeito de preenchimento */
}

/* Estiliza o botão deslizante ao passar o mouse por cima */
.upload-area::-webkit-scrollbar-thumb:hover {
    background-color: #777; /* Cor um pouco mais clara no hover */
}

/* --- Estilização para Firefox --- */
/* Define a largura e as cores (thumb e track) */
.upload-area {
    scrollbar-width: thin; /* Opções: auto, thin, none */
    scrollbar-color: #555 var(--panel-bg-darker); /* Cor do thumb e Cor do track */
}

/* Coluna 1: Controles Inline */
.track-controls-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 60px;
    padding: 5px 0;
    flex-shrink: 0;
}
.ms-buttons, .fx-aux-buttons {
    display: flex;
    gap: 4px;
    width: 100%;
    justify-content: center;
}
.track-button {
    width: 24px;
    height: 24px;
    border-radius: 3px;
    border: 1px solid var(--button-border);
    background-color: var(--button-bg);
    color: var(--text-color-muted);
    font-weight: bold;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    line-height: 1;
}
.track-button:hover { background-color: var(--button-hover-bg); border-color: #777; }
.track-button:active { background-color: #5a5a5a; }
.mute-button.active { background-color: #c0392b; border-color: #e74c3c; color: white; box-shadow: 0 0 5px rgba(231, 76, 60, 0.5); }
.solo-button.active { background-color: #f39c12; border-color: #f1c40f; color: #333; box-shadow: 0 0 5px rgba(241, 196, 15, 0.5); }
.edit-channel-button { background-color: #2c3e50; border-color: #34495e; color: #ecf0f1; }
.edit-channel-button:hover { background-color: #34495e; }
.aux-channel-button { background-color: #5a6ca0; border-color: #4e5d8d; color: #eee; }
.aux-channel-button:hover { background-color: #4e5d8d; }

/* Coluna 2: Volume */
.upload-slot .volume-container {
    width: 35px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 5px 0;
    flex-shrink: 0;
}
/* O container que o JS usa para INSERIR o KnobController do volume */
.upload-slot .volume-fader-container {
     width: 100%; /* Ocupa a largura da coluna */
     height: 100%; /* Ocupa a altura disponível */
     display: flex; /* Permite alinhar o wrapper interno */
     justify-content: center;
     align-items: center;
     order: 2; /* <<< Garante que venha DEPOIS do display de valor >>> */
}

/* Coluna 3: Conteúdo */
.upload-slot-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-width: 150px;
    overflow: hidden;
}

.file-upload-container {
    display: flex;
    align-items: center; /* Alinha verticalmente */
    gap: 8px; /* Espaço entre elementos */
    width: 100%;
}
/* Estilo do botão delete */
.delete-audio-button {
    display: none; /* Inicialmente oculto - JS controla a exibição */
    background: #553030; /* Cor de fundo avermelhada escura */
    border: 1px solid #884040;
    color: #f0b0b0;
    padding: 3px 6px; /* Pequeno */
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px; /* Tamanho do ícone/texto */
    line-height: 1;
    margin-left: 5px; /* Espaço à esquerda */
    flex-shrink: 0; /* Não deixa o botão encolher */
    transition: all 0.2s ease;
}

.delete-audio-button:hover {
    background: #774040;
    border-color: #aa6060;
    color: #fff;
}

.track-button-inline { font-size: 9px; padding: 3px 8px; background-color: #666; color: #ddd; border: 1px solid #888; border-radius: 3px; cursor: pointer; line-height: 1.2; transition: all 0.2s ease; white-space: nowrap; }


.file-label {
    padding: 5px 10px;
    background: #333;
    border: 1px solid #444;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-color);
    height: 30px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
}
.file-label:hover { background: #444; border-color: #555; }
.upload-icon { width: 14px; height: 14px; opacity: 0.7; flex-shrink: 0; }
.file-info {
    color: var(--text-color-dark);
    font-size: 10px;
    flex-grow: 1;
    margin-left: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}
.file-input { display: none; }
.waveform-container {
    height: 70px;
    background: rgba(0, 0, 0, 0);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-top: 10px;
}
.waveform-processing-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(22, 22, 22, 0.7); display: flex; justify-content: center; align-items: center;
    color: #a0a0a0; font-size: 10px; z-index: 5; cursor: default; text-align: center; padding: 5px;
}
.initial-waveform ::part(wave) { /* ou o nome da parte correta */
    filter: grayscale(80%) opacity(30%);
}.waveform-container.interactive { cursor: pointer; }


/* --- Estilos Gerais para Knob/Fader Container --- */
.knob-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    flex-grow: 1;
}
.knob-label { /* Label interno do KnobController */
    font-size: 10px;
    color: var(--text-color-muted);
    margin-bottom: 2px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    order: 1;
    line-height: 1.2;
}
/* Wrapper visual criado pelo KnobController */
.knob-visual-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    order: 2; /* Wrapper vem depois do label interno */
}
.knob-value { /* Display de valor interno do KnobController */
    font-size: 11px;
    color: var(--text-color);
    margin-top: 2px;
    font-family: monospace;
    min-height: 14px;
    line-height: 1.2;
    order: 3; /* Valor interno vem por último */
    width: 100%;
    text-align: center;
}
.knob { cursor: pointer; margin: 0; padding: 0; } /* Classe base para o input */


/* --- Fader de Pan (Horizontal) --- */
.upload-slot .pan-knob-container { width: 100%; padding: 5px 0; }
.upload-slot .pan-knob-container .knob-label { display: none; } /* Esconde label "Pan" interno */
/* O .knob-visual-wrapper criado pelo KnobController será usado como fader-wrapper */
.upload-slot .pan-knob-container .knob-visual-wrapper {
    width: 90%;
    height: 15px; /* Altura do wrapper horizontal */
    order: 3; /* Wrapper/Fader depois do valor */
    margin: 0 auto;
}
.upload-slot .pan-knob-container .knob-value { order: 2; padding: 3px 0; } /* Valor visível antes do fader */
/* Esconde elementos rotativos dentro do wrapper do Pan */
.upload-slot .pan-knob-container .knob-visual-wrapper .knob-visual-background,
.upload-slot .pan-knob-container .knob-visual-wrapper .rotary-indicator {
    display: none;
}
/* Estiliza o input range do Pan */
.upload-slot .pan-knob-container input[type="range"] { /* Estilo específico para o input do Pan */
    -webkit-appearance: none; appearance: none; display: block;
    width: 100%; height: 4px; background: #555; border-radius: 2px; border: 1px solid #333;
    position: absolute; top: 50%; left: 0; transform: translateY(-50%); /* Centraliza verticalmente */
    opacity: 1; /* Garante visibilidade */
    cursor: pointer;
}
.upload-slot .pan-knob-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 14px; height: 14px;
    background: var(--accent-color-blue); border-radius: 8px; margin-top: 0; /* Reset margin-top */
    cursor: pointer;
}
.upload-slot .pan-knob-container input[type="range"]::-moz-range-thumb {
    width: 10px; height: 14px; background: var(--accent-color-blue); border-radius: 2px; border: none;
    cursor: pointer;
}


/* --- Fader de Volume (Vertical) --- */
.upload-slot .volume-container .volume-value-display { /* Display de valor EXTERNO */
    order: 1;
    margin-bottom: 8px; /* Ajuste este valor para posição vertical */
    background: #28282800; padding: 1px 2px; border-radius: 2px; font-size: 10px;
    min-width: 30px; text-align: center; color: var(--text-color); line-height: 1.2; font-family: monospace;
}

/* Wrapper específico para o fader de volume (classe adicionada via JS) */
/* Este é o .knob-visual-wrapper DENTRO do #volume-fader-container-N */
.upload-slot .volume-fader-wrapper {
    width: 75px; /* Largura do elemento antes de rotacionar (será a altura depois) */
    height: 22px; /* Altura do elemento antes de rotacionar (será a largura depois) */
    transform-origin: center center;
    transform: rotate(-90deg); /* <<< APLICA A ROTAÇÃO VERTICAL AQUI >>> */
    position: relative; /* Para posicionar o input range dentro */
    display: flex; /* Ajuda a alinhar o input range */
    align-items: center;
    justify-content: center;
    /* order: 2; */ /* A ordem é do container pai #volume-fader-container-N */
    margin: 0; /* Reset de margens no próprio wrapper */
}

/* Esconde elementos visuais ROTATIVOS dentro do wrapper do fader de volume */
.upload-slot .volume-fader-wrapper .knob-visual-background {
    display: none; /* Esconde o fundo redondo */
}
.upload-slot .volume-fader-wrapper .rotary-indicator {
    display: none; /* Esconde o ponteiro rotativo */
}

/* O input range do fader de volume (classe .vertical-fader adicionada via JS) */
/* Posicionado DENTRO do .volume-fader-wrapper rotacionado */
.upload-slot .volume-fader-wrapper input[type="range"].vertical-fader {
    -webkit-appearance: none;
    appearance: none;
    width: 100%; /* Ocupa a largura do wrapper (que é a altura visual do fader) */
    height: 5px; /* Espessura da barra do fader */
    background: #444;
    border-radius: 3px;
    border: 1px solid #2a2a2a;
    outline: none;
    cursor: pointer;
    /* position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); */ /* Centraliza no wrapper */
    opacity: 1; /* Garante visibilidade */
    margin: 0; /* Reset de margens no input */
}
/* O thumb (bolinha/retângulo) do fader de volume */
.upload-slot .volume-fader-wrapper input[type="range"].vertical-fader::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px; /* Largura do thumb */
    height: 18px; /* Altura do thumb */
    background: #ccc;
    border-radius: 2px;
    margin-top: -0.5px; /* Centraliza o thumb na barra */
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    cursor: pointer;
}
.upload-slot .volume-fader-wrapper input[type="range"].vertical-fader::-moz-range-thumb {
    width: 14px;
    height: 18px;
    background: #ccc;
    border-radius: 2px;
    border: none;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    cursor: pointer;
}


/* === Knobs Rotativos (Efeitos - Modais/Aux) === */
/* Container PAI do knob rotativo */
.fx-modal .knob-container,
.aux-section .knob-container,
.master-param-knobs .knob-container { min-width: 60px; padding: 5px 2px; }
/* Wrapper */
.fx-modal .knob-visual-wrapper,
.aux-section .knob-visual-wrapper,
.master-param-knobs .knob-visual-wrapper { width: 45px; height: 45px; margin: 3px 0; order: 2; } /* Wrapper depois do label */
/* Fundo Visual */
.fx-modal .knob-visual-background,
.aux-section .knob-visual-background,
.master-param-knobs .knob-visual-background {
    width: 100%; height: 100%; border-radius: 50%; background-color: #3a3a3a;
    background-image: radial-gradient(circle at 50% 50%, #4f4f4f, #303030);
    border: 1px solid #2f2f2f; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.2);
    position: relative; cursor: pointer;
}
/* Indicador */
.fx-modal .rotary-indicator,
.aux-section .rotary-indicator,
.master-param-knobs .rotary-indicator {
    width: 3px; height: 18px; background-color: var(--accent-color-blue);
    border-radius: 1.5px; position: absolute; bottom: 50%; left: 50%;
    margin-left: -1.5px; transform-origin: center 16px; /* Ponto de rotação */
    box-shadow: 0 0 3px rgba(79, 195, 247, 0.5); pointer-events: none;
}
/* Input Oculto */
.fx-modal .knob-input-hidden,
.aux-section .knob-input-hidden,
.master-param-knobs .knob-input-hidden {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 10; margin: 0; padding: 0;
    -webkit-appearance: none; appearance: none; background: none; border: none;
}
/* Label/Valor dos Knobs Rotativos */
.fx-modal .knob-label,
.aux-section .knob-label,
.master-param-knobs .knob-label { font-size: 9px; order: 1; }
.fx-modal .knob-value,
.aux-section .knob-value,
.master-param-knobs .knob-value { font-size: 10px; order: 3; }
/* Grupo de Knobs Rotativos */
.fx-modal .eq-band .knob-group,
.fx-modal .comp-controls.knob-group,
.aux-section .aux-controls.knob-group,
.master-param-knobs.knob-group,
.aux-modal .aux-sends-container.knob-group {
    display: flex;
    flex-wrap: wrap;
    /* A propriedade mais importante para alinhamento vertical dos itens: */
    align-items: flex-start; /* Ou 'center' se preferir, mas flex-start geralmente funciona bem */
    /* justify-content: space-around; */ /* Ou outro valor conforme necessário */
    gap: 5px 8px;
    width: 100%;
    padding: 5px 0;
}

#master-gain-section {
    /* Herda estilos de .aux-section, mas podemos ajustar se necessário */
    min-width: 100px; /* Largura mínima */
    flex-grow: 0; /* Não cresce tanto quanto os outros */
    flex-basis: 120px; /* Largura base */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza conteúdo horizontalmente */
}

#master-gain-section h4 {
     color: var(--accent-color-red); /* Cor diferente para destaque */
     margin-bottom: 10px; /* Menos espaço abaixo do título */
}

/* Em styles.css */

/* Container principal dos controles dentro de cada seção Aux (Reverb, Delay) */
.aux-controls.knob-group {
    display: grid; /* Usa Grid Layout */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Cria colunas flexíveis, mínimo 100px */
    gap: 15px 20px; /* Espaçamento vertical e horizontal entre colunas/linhas */
    width: 100%;
    padding: 10px 0;
    justify-items: center; /* Centraliza as colunas horizontalmente se houver espaço extra */
    align-items: start; /* Alinha o topo das colunas */
    flex-grow: 1; /* Permite que o grid cresça para preencher espaço */
}

/* Div que representa uma coluna vertical de knobs */
.aux-knob-column {
    display: flex;
    flex-direction: column; /* Empilha knobs verticalmente */
    align-items: center;   /* Centraliza knobs horizontalmente na coluna */
    gap: 15px;             /* Espaço vertical ENTRE os knobs na coluna */
    width: 100%; /* Ocupa a largura da coluna do grid */
}

/* Container individual de cada knob dentro da coluna */
.aux-knob-column .knob-container.master-knob {
    min-width: 65px; /* Largura mínima do knob */
    /* O padding já vem da regra .knob-container geral */
    /* A altura será definida pelo conteúdo (knob + label + valor) */
}

/* Garante que os knobs rotativos tenham tamanho adequado */
.aux-knob-column .knob-container.master-knob .knob-visual-wrapper {
    width: 50px; /* Tamanho visual do knob */
    height: 50px;
}
.aux-knob-column .knob-container.master-knob .rotary-indicator {
     height: 20px; /* Ajusta ponteiro */
     transform-origin: center 18px; /* Ajusta ponto de rotação */
}

/* Ajustes no label e valor para melhor espaçamento vertical */
.aux-knob-column .knob-container.master-knob .knob-label {
    margin-bottom: 4px;
    font-size: 10px; /* Pode ajustar tamanho */
}
.aux-knob-column .knob-container.master-knob .knob-value {
    margin-top: 4px;
    font-size: 11px; /* Pode ajustar tamanho */
}

/* Remove regra anterior que forçava flex horizontal para .aux-controls */
/* Certifique-se de remover ou comentar esta regra se ela existir: */
/*
.aux-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: flex-start;
    margin-top: auto;
}
*/

/* Container para o fader e o valor */
.master-gain-container {
    display: flex;
    flex-direction: column; /* Fader acima, valor abaixo */
    align-items: center;
    justify-content: center; /* Centraliza verticalmente */
    height: 100%; /* Ocupa altura disponível na seção */
    width: 100%;
    padding: 10px 0; /* Espaçamento vertical */
    flex-grow: 1; /* Faz ocupar o espaço restante */
}

/* Wrapper onde o KnobController vai inserir o fader */
.master-gain-fader-wrapper {
    height: 130px; /* Altura para o fader vertical */
    width: 40px;   /* Largura da área do fader */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px; /* Espaço entre fader e valor */
}

/* Display de valor para o Master Gain */
.master-gain-value {
    font-size: 11px;
    color: var(--text-color);
    font-family: monospace;
    min-width: 35px;
    text-align: center;
    background: #282828;
    padding: 1px 3px;
    border-radius: 2px;
}

/* Garante que o fader vertical dentro deste wrapper funcione */
/* Reutiliza as classes que o KnobController já aplica */
.master-gain-fader-wrapper .knob-container.knob-type-fader-v {
    width: 100%; /* Ocupa o wrapper */
    height: 100%;
}

.knob-container.knob-type-fader-v {
    /* Garante espaço vertical */
    min-height: 100px; /* Ou a altura desejada */
    justify-content: center; /* Centraliza o wrapper verticalmente se houver espaço extra */
    width: 40px; /* Largura da coluna/área do fader */
}

/* O wrapper visual criado pelo KnobController */
.knob-container.knob-type-fader-v .knob-visual-wrapper.fader-wrapper-vertical {
    width: 100%; /* Ocupa a largura do .knob-container */
    height: 100%; /* Ocupa a altura do .knob-container */
    position: relative; /* Necessário para posicionar o input rotacionado */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Remove qualquer rotação do wrapper em si, se houver */
    transform: none;
}

/* O input range vertical */
.knob-container.knob-type-fader-v .fader-input-vertical {
    -webkit-appearance: none;
    appearance: none;
    /* Dimensões ANTES da rotação: Largura = Altura Visual, Altura = Espessura Visual */
    /* width: 120px; */ /* COMENTE OU REMOVA ESTA LINHA */
    height: 5px;  /* Espessura da barra do fader */
    background: #555;
    border: 1px solid #333;
    border-radius: 3px;
    cursor: pointer;
    margin: 0;
    transform-origin: center center;
    transform: rotate(-90deg);
    position: absolute;
    top: calc(50% - 2.5px); /* Metade da ALTURA (espessura) */
    /* left: calc(50% - 60px); */ /* COMENTE OU REMOVA ESTA LINHA - será específica */
}

.upload-slot .volume-container .knob-container.knob-type-fader-v .fader-input.vertical-fader {
    width: 75px; /* Altura visual do fader de volume PRINCIPAL */
    left: calc(50% - 37.5px); /* Centraliza para width de 75px */
    /* Herda outras propriedades comuns da regra geral .knob-container.knob-type-fader-v .fader-input-vertical */
}

.upload-slot .volume-container .knob-container.knob-type-fader-v .fader-input.vertical-fader::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;  /* Largura visual (vertical) do thumb */
    height: 14px; /* Altura visual (horizontal) do thumb */
    background: #9d9d9d; /* Cor padrão do thumb */
    border-radius: 8px;
    margin-top: 0px;
    cursor: pointer;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

.upload-slot .volume-container .knob-container.knob-type-fader-v .fader-input.vertical-fader::-moz-range-thumb {
    width: 14px;  /* Largura visual (vertical) do thumb */
    height: 14px; /* Altura visual (horizontal) do thumb */
    background: #9d9d9d; /* Cor padrão do thumb */
    border-radius: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
}


/* Thumb (bolinha/cursor) do fader vertical */
.knob-container.knob-type-fader-v .fader-input-vertical::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;  /* Largura visual (vertical) do thumb */
    height: 14px; /* Altura visual (horizontal) do thumb */
    background: #9d9d9d; /* Cor padrão do thumb */
    border-radius: 8px;
    cursor: pointer;
    margin-top: 0; /* Reseta margem padrão */
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
}
.knob-container.knob-type-fader-v .fader-input-vertical::-moz-range-thumb {
    width: 14px;  /* Largura visual (vertical) do thumb */
    height: 14px; /* Altura visual (horizontal) do thumb */
    background: #9d9d9d; /* Cor padrão do thumb */
    border-radius: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
}


.aux-master-panel,
.export-container {
  max-width: 1170px; /* Ou um valor fixo como 1000px */
  margin-left: auto;
  margin-right: auto;
  /* Mantenha box-sizing para consistência */
  box-sizing: border-box;
}
/* --- Novos Estilos para Layout dos Medidores --- */
.meters-wrapper.new-meter-layout {
    display: flex;
    justify-content: space-around; /* Ou space-between */
    align-items: flex-start; /* Alinha os grupos no topo */
    flex-wrap: wrap; /* Permite quebrar linha em telas menores */
    gap: 20px; /* Espaço entre os grupos principais */
    padding: 15px;
    border-radius: 8px;
    background: var(--panel-bg-darker); /* Fundo escuro para a área */
    margin-bottom: 20px; /* Espaçamento inferior */
    border: 1px solid var(--border-color);
}

.meter-display-group {
    flex: 1; /* Tenta ocupar espaço igual */
    min-width: 150px; /* Largura mínima para cada grupo */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* Espaço entre título principal e sub-medidores */
}

.meter-main-title {
    font-size: 1.1em; /* Tamanho do título principal (LUFS, dBTP, RMS) */
    font-weight: 500;
    color: var(--accent-color-blue); /* Cor de destaque */
    margin-bottom: 5px; /* Pequeno espaço abaixo do título */
    width: 100%;
    border-bottom: 1px solid rgba(79, 195, 247, 0.1); /* Linha sutil abaixo */
    padding-bottom: 5px;
}

.sub-meters-container {
    display: flex;
    justify-content: center; /* Centraliza os sub-medidores */
    align-items: flex-start; /* Alinha no topo */
    flex-wrap: wrap; /* Permite quebrar se necessário */
    gap: 15px; /* Espaço entre os sub-medidores (short-term, momentary, etc.) */
    width: 100%;
}

.sub-meter {
    display: flex;
    flex-direction: column; /* Label acima, valor abaixo */
    align-items: center;
    min-width: 60px; /* Largura mínima para cada valor */
}

.sub-meter-label {
    font-size: 10px; /* Tamanho pequeno para o sub-label */
    color: var(--text-color-muted); /* Cor mais suave */
    text-transform: lowercase; /* Caixa baixa como na imagem */
    margin-bottom: 4px; /* Espaço entre label e valor */
    line-height: 1.2;
}

.sub-meter-value {
    font-size: 1.6em; /* Tamanho grande para o valor */
    font-weight: 500; /* Peso da fonte */
    color: var(--text-color); /* Cor principal do texto */
    font-family: monospace, sans-serif; /* Fonte monoespaçada para números */
    line-height: 1.1;
    padding: 2px 0;
    min-width: 50px; /* Garante espaço mínimo */
    display: inline-block; /* Para aplicar padding/min-width */
    transition: color 0.2s ease; /* Transição suave para mudanças de cor (ex: warning) */
}

/* Estilo opcional para valor integrado destacado */
.sub-meter.integrated-meter .sub-meter-value {
   /* Você pode adicionar um fundo ou borda aqui se quiser destacar como na imagem */
   /* Exemplo: */
   /* background-color: rgba(255, 100, 100, 0.1); */
   /* border: 1px solid rgba(255, 100, 100, 0.3); */
   /* border-radius: 4px; */
   /* padding: 2px 5px; */
}

/* Estilo para o botão Reset */
.meter-reset-button {
    font-size: 9px;
    background-color: var(--button-bg);
    color: var(--text-color-muted);
    border: 1px solid var(--button-border);
    border-radius: 3px;
    padding: 2px 6px;
    margin-top: 5px; /* Espaço acima do botão */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.meter-reset-button:hover {
    background-color: var(--button-hover-bg);
    color: var(--text-color);
}

/* Ajustes responsivos (exemplo) */
@media (max-width: 600px) {
    .meters-wrapper.new-meter-layout {
        flex-direction: column; /* Empilha os grupos verticalmente */
        align-items: center;
        gap: 15px;
        padding: 10px;
    }
    .meter-display-group {
        width: 100%;
        max-width: 300px; /* Limita largura em telas pequenas */
        padding: 10px;
        background-color: var(--panel-bg); /* Adiciona fundo em telas pequenas */
        border-radius: 6px;
    }
    .sub-meters-container {
        gap: 10px; /* Reduz espaçamento */
    }
    .sub-meter-value {
        font-size: 1.4em; /* Reduz um pouco o valor */
    }
}

/* --- Modais --- */
.channel-edit-modal {
    position: fixed; z-index: 1050; left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.75); display: none;
    justify-content: center; align-items: center; padding: 15px; backdrop-filter: blur(2px);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--input-border); padding-bottom: 10px; margin-bottom: 15px; flex-shrink: 0; }
.modal-header h3 { margin: 0; color: #eee; font-size: 1.1em; }
.close-button { background: none; border: none; font-size: 24px; color: var(--text-color-muted); cursor: pointer; padding: 0 5px; line-height: 1; }
.close-button:hover { color: #fff; }
.modal-body { overflow-y: auto; flex-grow: 1; padding: 5px 10px 5px 5px; scrollbar-width: thin; scrollbar-color: #555 #2a2a2a; }
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-track { background: #2a2a2a; border-radius: 4px; }
.modal-body::-webkit-scrollbar-thumb { background-color: #555; border-radius: 4px; border: 2px solid #2a2a2a; }

#audioSettingsModal .modal-body {
    /*
     * Define uma altura máxima para o corpo do modal.
     * A função calc() subtrai uma altura aproximada para o cabeçalho e paddings
     * da altura máxima do container do modal (que é 80% da altura da tela, ou 80vh),
     * garantindo que o corpo do modal não "estoure" para fora da tela.
    */
    max-height: calc(80vh - 80px); /* 80vh (altura máx do modal) - ~80px (para header) */
    
    /* Adiciona a barra de rolagem vertical apenas quando o conteúdo ultrapassar a altura máxima */
    overflow-y: auto;
    
    /* Adiciona um pequeno espaçamento à direita para a barra de rolagem não colar no conteúdo */
    padding-right: 15px; 
}

/* Modal FX */
.fx-modal .modal-content-large { background-color: #252525; padding: 20px; border-radius: 8px; border: 1px solid #444; width: 95%; max-width: 800px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 5px 20px rgba(0,0,0,0.6); }
.fx-modal .channel-sections-container { display: flex; gap: 15px; flex-wrap: wrap; }
.fx-modal .channel-edit-section { background-color: #303030; border-radius: 6px; padding: 15px; flex: 1; min-width: 320px; display: flex; flex-direction: column; }
.fx-modal .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px solid #555; padding-bottom: 8px; }
.fx-modal .channel-edit-section h4 { margin: 0; font-size: 1.0em; border: none; padding: 0; }
.fx-modal .eq-section h4 { color: var(--accent-color-green); }
.fx-modal .comp-section h4 { color: var(--accent-color-orange); }
.fx-modal .eq-controls { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.fx-modal .eq-band { width: 100%; display: flex; align-items: center; gap: 10px; font-size: 10px; color: #ccc; margin-bottom: 5px; border-top: 1px solid #3a3a3a; padding-top: 10px;}
.fx-modal .eq-band span { font-weight: bold; min-width: 35px; text-align: right; color: var(--text-color-muted); flex-shrink: 0; }
/* .eq-graph-placeholder, .comp-meter-placeholder { min-height: 60px; background-color: var(--input-bg); border-radius: 4px; margin-top: auto; display: flex; justify-content: center; align-items: center; color: #555; font-size: 11px; border: 1px solid #404040; } */
.fx-modal .eq-band .knob-group { display: flex; justify-content: space-around; width: 100%; }

.fx-modal .eq-band.filter-band .knob-group {
    display: flex;
    justify-content: space-around; /* Ou space-evenly */
    align-items: flex-start; /* Alinha os containers no topo */
    width: 100%;
}
.fx-modal .eq-band.filter-band .knob-container {
    display: flex; /* Mantém flex */
    flex-direction: column; /* Mantém coluna */
    align-items: center; /* Centraliza itens na horizontal (knob visual) */
    text-align: center; /* Centraliza texto para label e valor */
    min-width: 65px; /* Garante uma largura mínima */
    padding: 5px 2px; /* Espaçamento interno */
}

.fx-modal .eq-band.filter-band .knob-container .knob-label {
    width: 100%; /* Ocupa toda a largura do container */
    text-align: center; /* Força centralização do texto */
    margin-bottom: 4px; /* Ajuste espaço abaixo do label */
}

/* assets/css/styles.css - Ajustes Finais para Faders v5 - Revertendo para Transform */

/* (Manter as regras que escondem elementos rotativos para faders - V3/V4) */
.knob-type-fader-h .knob-visual-background,
.knob-type-fader-h .rotary-indicator,
.knob-type-fader-v .knob-visual-background,
.knob-type-fader-v .rotary-indicator {
    display: none;
}

/* --- Fader de Volume Vertical --- */

/* Container PAI do fader (onde o KnobController é inserido)
   Define a área onde o fader vertical vai ficar. Precisa ter altura suficiente. */
.upload-slot .volume-container .volume-fader-container {
    width: 35px;  /* Largura da coluna */
    height: 95px; /* Altura TOTAL disponível - Aumentei um pouco */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Necessário para posicionar o input absoluto */
    order: 2;
    padding: 0; /* Reset padding */
    margin: 0; /* Reset margin */
    /* background-color: rgba(255, 0, 0, 0.1); */ /* Debug */
    overflow: hidden; /* Evita que o thumb rotacionado vaze */
}

/* O wrapper DENTRO do container acima - usado para centralizar */
.knob-type-fader-v .fader-wrapper-vertical {
    width: 100%;
    height: 100%;
    position: relative; /* Referência para o input absoluto */
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: rgba(0, 255, 0, 0.1); */ /* Debug */
}

/* O input range VERTICAL - ESTILO COM TRANSFORM */
.knob-type-fader-v .fader-input-vertical {
    -webkit-appearance: none; /* Reset aparência */
    appearance: none;

    /* === Dimensões ANTES da Rotação === */
    /* A largura será a ALTURA visual do fader */
    width: 75px; /* Ajuste conforme necessário para altura desejada */
    /* A altura será a ESPESSURA visual da barra */
    height: 5px;

    /* === Estilo da Barra === */
    background: #555;
    border: 1px solid #333;
    border-radius: 3px;
    cursor: pointer;
    margin: 0; /* Reset */

    /* === Rotação e Posicionamento === */
    transform-origin: center center; /* Ponto de rotação */
    position: absolute; /* Posicionamento absoluto dentro do wrapper */
    /* Centraliza o elemento rotacionado */
    top: calc(50% - 2.5px); /* (height / 2) */
    left: calc(50% - 37.5px); /* (width / 2) */
}

.knob-type-rotary .knob-input-hidden {
    pointer-events: none; /* Faz o input ignorar cliques/eventos do mouse */
}

/* Thumb do Fader Vertical */
.knob-type-fader-v .fader-input-vertical::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;  /* Largura visual (vertical) do thumb */
    height: 18px; /* Altura visual (horizontal) do thumb */
    background: #ccc;
    border-radius: 2px;
    cursor: pointer;
    margin-top: 0; /* Reset */
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    /* O thumb herda a rotação do input */
}

.knob-type-fader-v .fader-input-vertical::-moz-range-thumb {
    width: 10px;
    height: 18px;
    background: #ccc;
    border-radius: 2px;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
}


/* --- Fader de Pan Horizontal (Mantido da V3/V4) --- */
.knob-type-fader-h .fader-wrapper-horizontal {
    width: 90%; height: 20px; display: flex;
    justify-content: center; align-items: center;
    order: 3; margin: 5px auto 0 auto;
}
.knob-type-fader-h .fader-input-horizontal {
    -webkit-appearance: none; appearance: none; width: 100%; height: 5px;
    background: #555; border-radius: 3px; border: 1px solid #333; cursor: pointer;
}
.knob-type-fader-h .fader-input-horizontal::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 16px; height: 16px;
    background: var(--accent-color-blue); border-radius: 8px; cursor: pointer;
    margin-top: -0px;
}
.knob-type-fader-h .fader-input-horizontal::-moz-range-thumb {
    width: 16px; height: 16px; background: var(--accent-color-blue);
    border-radius: 8px; border: none; cursor: pointer;
}

/* --- Displays de Valor (Mantido da V3/V4) --- */
.knob-type-fader-v > .knob-value { display: none !important; }
.knob-type-fader-h > .knob-value { display: block; order: 2; padding: 3px 0; text-align: center; }

.fx-modal .eq-band.filter-band .knob-container .knob-value {
    width: 100%; /* Ocupa toda a largura do container */
    text-align: center; /* Força centralização do texto */
    margin-top: 4px; /* Ajuste espaço acima do valor */
}

/* Modal AUX */
.aux-modal .modal-content-small { background-color: #282828; padding: 20px; border-radius: 8px; border: 1px solid #444; width: 90%; max-width: 350px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }

/* Em styles.css */

/* Container dos controles do Master Insert */
.master-insert-controls {
    display: flex;
    flex-direction: column; /* Empilha os elementos verticalmente */
    align-items: stretch;  /* Faz os botões ocuparem a largura disponível */
    gap: 10px;             /* Espaço entre os botões */
    width: 100%;           /* Ocupa a largura da seção */
    padding: 10px 0;       /* Espaçamento interno vertical */
    flex-grow: 1; /* Ajuda a ocupar espaço se a seção for flex column */
}

/* Estilo para os botões de carregar FX Master */
.master-fx-load-button { /* Usa a classe adicionada */
    padding: 8px 15px;
    background-color: #5a6ca0; /* Mesma cor do botão original */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 12px;
    text-align: center; /* Centraliza texto */
    width: auto; /* Deixa a largura se ajustar, mas o align-items: stretch acima pode controlar */
    margin: 0 auto; /* Centraliza se a largura for menor que 100% */
    min-width: 150px; /* Largura mínima */
}

.master-fx-load-button:hover {
    background-color: #4e5d8d; /* Mesma cor hover original */
}

/* Container dos parâmetros (knobs) */
#master-param-knobs-container {
    width: 100%;
    margin-top: 15px; /* Aumenta espaço acima dos knobs */
    padding-top: 10px;
    border-top: 1px solid #444;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: flex-start; /* Alinha knobs no topo */
    min-height: 50px; /* Garante uma altura mínima mesmo vazio */
}

#master-param-knobs-container p {
    color: var(--text-color-dark);
    font-size: 11px;
    width: 100%;
    text-align: center;
    margin: 5px 0;
}

/* Ajuste opcional na seção Master Insert para melhor alinhamento */
#master-insert-section {
    justify-content: flex-start; /* Alinha conteúdo no topo */
}

/* --- Painel Master / Aux --- */
.aux-master-panel { background-color: var(--panel-bg); border-radius: 8px; padding: 15px; margin-top: 20px; border: 1px solid var(--border-color); }
.aux-master-panel h3 { margin-top: 0; color: #ccc; font-size: 1.1em; text-align: center; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
.aux-sections-container { display: flex; gap: 15px; justify-content: space-around; flex-wrap: wrap; }
.aux-section { background-color: #2a2a2a; border-radius: 6px; padding: 12px; border: 1px solid #383838; flex: 1; min-width: 260px; display: flex; flex-direction: column; }
.aux-section h4 { margin-top: 0; margin-bottom: 15px; color: var(--accent-color-blue); text-align: center; font-size: 1.0em; border-bottom: 1px solid #444; padding-bottom: 5px; }
#master-insert-section h4 { color: var(--accent-color-orange); }
#loadMasterEffectButton { padding: 8px 15px; background-color: #5a6ca0; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; font-size: 12px; margin-bottom: 10px; }
#loadMasterEffectButton:hover { background-color: #4e5d8d; }
.master-param-knobs { width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px solid #444; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.master-param-knobs p { color: var(--text-color-dark); font-size: 11px; width: 100%; text-align: center; margin: 5px 0; }

/* --- Bypass Button --- */
.bypass-button { font-size: 9px; padding: 3px 8px; background-color: #666; color: #ddd; border: 1px solid #888; border-radius: 3px; cursor: pointer; line-height: 1.2; transition: all 0.2s ease; white-space: nowrap; }
.bypass-button:hover { background-color: #777; }
.bypass-button.active { background-color: var(--accent-color-red); color: white; border-color: transparent; }

/* --- Exportação --- */
.export-container { background: var(--panel-bg-darker); border-radius: 8px; padding: 15px; margin-top: 20px; margin-bottom: 20px; }
.export-options { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; }
.export-format label { margin-right: 15px; font-size: 12px; color: var(--text-color-muted); cursor: pointer; }
.export-filename { display: flex; align-items: center; gap: 8px; flex-grow: 1; min-width: 200px; }
.export-filename label { font-size: 12px; color: var(--text-color-muted); white-space: nowrap; }
.export-filename input { padding: 6px 10px; border-radius: 4px; border: 1px solid var(--input-border); background-color: var(--input-bg); color: var(--text-color); font-size: 12px; flex-grow: 1; }
.export-filename input:focus { outline: none; border-color: var(--accent-color-blue-dark); }
.export-button { display: flex; align-items: center; gap: 8px; background-color: var(--accent-color-green); color: white; border: none; border-radius: 5px; padding: 8px 15px; cursor: pointer; transition: background-color 0.2s; font-size: 12px; font-weight: bold; }
.export-button:hover { background-color: #8bc34a; }
.export-button img { width: 16px; height: 16px; }
.cancel-button { /* Estilos se necessário */ }
.export-progress { margin-top: 15px; display: none; }
.progress-bar { width: 100%; height: 8px; background-color: #333; border-radius: 4px; overflow: hidden; }
.progress-bar-fill { width: 0%; height: 100%; background-color: var(--accent-color-blue); border-radius: 4px; transition: width 0.2s linear; }
#exportStatus { margin-top: 5px; font-size: 11px; color: var(--text-color-muted); text-align: center; }

/* --- Loading Modals --- */
#loadingModal {
    position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.7); display: none !important;
    justify-content: center; align-items: center;
}
#loadingModal.show { display: flex !important; }
#loadingModal .modal-content { background-color: #2c2c2c; padding: 30px; border-radius: 10px; text-align: center; color: white; max-width: 400px; width: 90%; }
#loadingModal .loader { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 20px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#loadingModal h2 { margin-bottom: 20px; }
#loadingStatus { margin-bottom: 20px; }

.global-loading-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.95); z-index: 9999; display: flex; justify-content: center; align-items: center; opacity: 1; transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.7s cubic-bezier(0.4, 0, 0.2, 1); visibility: visible;
}
.global-loading-modal.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.global-loading-container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.loading-logo { max-width: 40%; max-height: 40%; opacity: 0.9; transition: opacity 0.7s ease-out; }
.global-loading-modal.hidden .loading-logo { opacity: 0; }

/* --- Responsividade --- */
@media (max-width: 900px) {
    .basic-controls { gap: 10px; }
    .volume-control { margin-left: 0; width: auto; justify-content: center; }
    .fx-modal .channel-sections-container { flex-direction: column; gap: 10px; }
    .fx-modal .channel-edit-section { min-width: unset; }
    .aux-section { min-width: unset; }
}
@media (max-width: 600px) {
    body { padding: 8px; }
    .container { padding: 8px; }
    .basic-controls { padding: 10px; flex-direction: column; align-items: stretch; gap: 12px; }
    .rms-meters { align-self: center; }
    .time-display { align-self: center; width: 150px; }
    .export-options, .session-options { flex-direction: column; align-items: stretch; }
    .export-filename { flex-direction: column; align-items: stretch; gap: 5px;}
    .session-buttons { justify-content: space-around; }
    .upload-slot { padding: 8px 5px; gap: 5px; }
    .track-controls-inline { width: 50px; padding-right: 0; gap: 4px; }
    .track-button { width: 20px; height: 20px; font-size: 9px;}
    .ms-buttons { gap: 3px;}
    .fx-aux-buttons { gap: 3px; margin-top: 4px; }
    /* Faders menores */
    .upload-slot .pan-knob-container input[type="range"]::-webkit-slider-thumb { width: 8px; height: 12px; }
    .upload-slot .pan-knob-container input[type="range"]::-moz-range-thumb { width: 8px; height: 12px;}
    .upload-slot .volume-container { width: 30px; padding: 3px 0; }
    .upload-slot .volume-fader-wrapper { width: 70px; height: 18px; }
    .upload-slot .volume-fader-wrapper input[type="range"].vertical-fader { height: 4px; }
    .upload-slot .volume-fader-wrapper input[type="range"].vertical-fader::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; }
    .upload-slot .volume-fader-wrapper input[type="range"].vertical-fader::-moz-range-thumb { width: 14px; height: 14px; }
    .upload-slot .volume-container .volume-value-display { font-size: 9px; padding: 0 1px; margin-bottom: 6px; /* Ajuste fino margem */ }
    /* Outros */
    .upload-slot-content { gap: 5px; min-width: 120px; }
    .file-label { height: 28px; padding: 4px 8px; font-size: 10px;}
    .upload-icon { width: 12px; height: 12px; }
    .file-info { font-size: 9px;}
    .modal-content-large { width: 98%; max-height: 95vh; padding: 10px;}
    .modal-content-small { width: 95%; padding: 15px;}
    .modal-header h3 { font-size: 1.0em;}
    .close-button { font-size: 20px;}
    /* Knobs rotativos menores */
    .fx-modal .knob-visual-wrapper, .aux-section .knob-visual-wrapper, .master-param-knobs .knob-visual-wrapper { width: 40px; height: 40px; }
    .fx-modal .rotary-indicator, .aux-section .rotary-indicator, .master-param-knobs .rotary-indicator { height: 16px; transform-origin: center 15px; }
}

/* Estilo REFORÇADO para o botão de ícone "View Plugin" */
#master-insert-section .view-plugin-button { /* Adicionado ID pai para aumentar especificidade */
    background-color: transparent !important; /* Garante fundo transparente */
    border: none !important; /* Garante sem borda */
    padding: 4px 6px;       /* Espaçamento interno */
    margin-left: 8px;       /* Espaço após o botão "Load" */
    cursor: pointer;
    line-height: 0;         /* Remove espaço extra da linha */
    vertical-align: middle; /* Alinha com o texto do botão "Load" */
    opacity: 1;          /* Leve transparência inicial */
    transition: opacity 0.2s ease-in-out, transform 0.1s ease-in-out;
    transform: scale(1);
}

#master-insert-section .view-plugin-button img {
    width: 18px; /* Tamanho do ícone */
    height: 18px;
    display: block; /* Para centralização e evitar espaço extra */
}


/* Estilo Base para o botão Bypass (mantém transparente) */
#master-insert-section .bypass-plugin-button {
    background-color: transparent !important;
    border: none !important;
    padding: 4px 6px;
    margin-left: 5px;
    cursor: pointer;
    line-height: 0;
    vertical-align: middle;
    /* Transição suave para opacity e filter */
    transition: opacity 0.2s ease-in-out, transform 0.1s ease-in-out;
    transform: scale(1);
}

/* Estilo Base para a IMAGEM dentro do botão */
#master-insert-section .bypass-plugin-button img {
    width: 18px;
    height: 18px;
    display: block;
    opacity: 1; /* Opacidade normal (não bypassado) */
    filter: none; /* Garante nenhum filtro por padrão */
    transition: opacity 0.2s ease-in-out, filter 0.2s ease-in-out; /* Anima a transição */
}

/* --- ESTILO QUANDO BYPASS ESTÁ ATIVO (.active) --- */
/* Escolha UMA das opções abaixo (Opacidade OU Filtro) */


/* OU */

/* Opção 2: Filtro Grayscale (Tons de Cinza) */
/* #master-insert-section .bypass-plugin-button.active img { */
/* filter: grayscale(100%); */
/* opacity: 0.6 !important; /* Opcional: um pouco de opacidade também */
/* } */

/* OU */

/* Opção 3: Filtro Dim/Sepia (Pode precisar de ajuste) */
#master-insert-section .bypass-plugin-button.active img {
filter: sepia(1000%) brightness(80%) saturate(80%);
opacity: 0.4 !important;
}

/* Container para os botões de cada slot no Master Insert */
.plugin-slot-buttons {
    display: flex;
    align-items: center; /* Alinha verticalmente */
    justify-content: center; /* Centraliza o grupo como um todo */
    gap: 8px; /* Espaço entre os botões visíveis */
    margin-bottom: 10px; /* Espaço entre as linhas dos slots */
    position: relative; /* Pode ser útil para posicionamento futuro */
    min-height: 35px; /* Garante altura mínima mesmo sem botões de ícone */
}

/* Botão Load (Ordem Visual: Centro) */
.plugin-slot-buttons .plugin-load-btn {
    order: 2; /* Coloca no meio */
    /* Estilos existentes de .master-fx-load-button devem ser mantidos */
    /* Ex: padding, background-color, etc. */
}

/* Botão View (Ordem Visual: Esquerda) */
.plugin-slot-buttons .plugin-view-btn {
    order: 1; /* Coloca antes do Load */
    /* Estilos existentes de .view-plugin-button devem ser mantidos */
    /* Ex: background, border, padding, etc. (já definidos como transparent/none) */
}

/* Botão Bypass (Ordem Visual: Direita) */
.plugin-slot-buttons .plugin-bypass-btn {
    order: 3; /* Coloca depois do Load */
    /* Estilos existentes de .bypass-plugin-button devem ser mantidos */
     /* Ex: background, border, padding, etc. (já definidos como transparent/none) */
}

/* Garante tamanho da imagem nos botões de ícone */
.plugin-slot-buttons .view-plugin-button img,
.plugin-slot-buttons .bypass-plugin-button img {
    width: 18px;
    height: 18px;
    display: block;
}

/* Esconde o input de arquivo */
.plugin-slot-buttons input[type="file"] {
    display: none;
}

/* Em styles.css */

/* Garante que o container principal possa acomodar os itens lado a lado */
.basic-controls {
    display: flex;
    align-items: center; /* Alinha verticalmente */
    flex-wrap: wrap; /* Permite quebrar linha se não couber */
    gap: 10px; /* Espaço entre os elementos */
    padding: 12px 15px;
    background: var(--panel-bg-darker);
    border-radius: 8px;
    margin-bottom: 20px;
}

/* Medidores RMS e Performance não devem encolher demais */
.rms-meters,
.performance-meters {
    flex-shrink: 0;
    /* Ajuste margens se o gap não for suficiente */
     margin-right: 5px; /* Pequena margem direita para separar */
}

/* Container do medidor de performance */
.performance-meters {
    display: flex; /* Organiza o item interno */
    align-items: center;
    /* Não precisa de gap aqui, só tem um item */
    /* margin-left: 10px; /* Removido - Deixa o flex container pai gerenciar */
    padding: 3px 10px; /* Ajuste padding horizontal */
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    height: 30px; /* Altura consistente */
}

/* Item individual do medidor (agora só tem um) */
.performance-meter-item {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.performance-meter-label {
    font-size: 10px;
    font-weight: bold;
    color: var(--text-color-muted);
    text-transform: uppercase;
}

.performance-meter-value {
    font-family: monospace;
    font-size: 11px; /* Tamanho um pouco menor */
    color: var(--accent-color-orange);
    min-width: 85px; /* Largura para "XXX.XMB / YYY.YMB" */
    text-align: right;
    white-space: nowrap; /* Evita quebra de linha */
}

/* Ajuste responsivo para telas menores */
@media (max-width: 768px) {
    /* Pode ser necessário ajustar o wrap ou gap do .basic-controls */
    .basic-controls {
        gap: 8px;
    }
    .performance-meters {
        margin-top: 8px; /* Adiciona espaço acima se quebrar linha */
        width: fit-content; /* Ajusta largura */
        align-self: center; /* Centraliza se quebrar linha */
         margin-right: 0; /* Reseta margem */
    }
}

/* Container para Mute, Solo, e Record Arm */
.msr-buttons {
    display: flex;
    gap: 4px; /* Mesmo gap que .ms-buttons e .fx-aux-buttons */
    width: 100%;
    justify-content: center;
    margin-bottom: 5px; /* Espaço abaixo dos botões MSR */
}

/* Estilo base para o botão Record Arm (R) */
.track-button.record-arm-button {
    background-color: #4CAF50; /* Verde para 'Pronto para armar' */
    color: white;
    /* Outros estilos herdados de .track-button (tamanho, borda, etc.) */
}

/* Estilo para o botão Record Arm quando ATIVO (armado) */
.track-button.record-arm-button.active {
    background-color: #F44336; /* Vermelho quando armado */
    color: white;
    box-shadow: 0 0 8px rgba(244, 67, 54, 0.7);
}

/* Estilo para o botão Record Arm quando GRAVANDO (opcional, pode ser controlado por outra classe) */
.track-button.record-arm-button.recording {
    background-color: #f52f71; /* Um rosa/vermelho diferente para indicar gravação ativa */
    animation: pulse-recording 1.5s infinite;
}

@keyframes pulse-recording {
    0% { box-shadow: 0 0 5px rgba(233, 30, 99, 0.5); }
    50% { box-shadow: 0 0 15px rgb(251, 41, 111); }
    100% { box-shadow: 0 0 5px rgba(233, 30, 99, 0.5); }
}

.basic-controls .button.global-record-button.recording {
    color: rgb(237, 92, 92); /* Ou qualquer cor de destaque que preferir, ex: #FFD700 (dourado) */
    /* Você também pode querer ajustar o background se necessário para o texto se destacar */
    /* Exemplo: background-color: #c0392b; se quiser um vermelho mais escuro */
}

/* Novo container para agrupar Volume e VU Meter de Gravação */
.upload-slot .volume-vu-container {
    display: flex;
    flex-direction: column; /* VU Meter abaixo do Volume, ou row para lado a lado */
    align-items: center;
    justify-content: center; /* Centraliza se houver espaço extra */
    width: 45px; /* Largura da coluna que contém ambos */
    align-self: stretch;
    padding: 5px 0;
    flex-shrink: 0;
    gap: 5px; /* Espaço entre o fader de volume e o VU meter */
}

/* Ajuste no container de volume se necessário para acomodar o VU Meter */
.upload-slot .volume-container.track-volume-fader {
    width: 35px; /* Mantém a largura original do volume fader container */
    height: auto; /* Permite que a altura seja definida pelo conteúdo */
    /* Outros estilos como antes */
}

/* Container do VU Meter de Gravação */
.record-vu-meter-container {
    width: 4px; /* Largura do VU meter */
    height:100px; /* Altura do VU meter - ajuste conforme necessário */
    background-color: #222; /* Fundo escuro para o meter */
    /* border: 1px solid #333; */
    border-radius: 2px;
    position: relative; /* Para posicionar a barra interna */
    overflow: hidden; /* Para garantir que a barra não ultrapasse */
    margin-top: -110px; /* Espaço acima do VU meter, ajuste se volume-vu-container for row */
    margin-left: 30px; /* Espaço acima do VU meter, ajuste se volume-vu-container for row */
}

/* Barra interna do VU Meter que indica o nível */
.record-vu-meter-bar {
    width: 100%;
    height: 0%; /* Começa vazio, altura será controlada por JS */
    background-color: #2196F3; /* << COR AZUL PADRÃO AQUI >> */
    position: absolute;
    bottom: 0; /* Cresce de baixo para cima */
    left: 0;
    transition: height 0.05s linear, background-color 0.1s linear; /* Adiciona transição para cor */
    border-radius: 1px;
}

/* Botão de Configurações de Áudio */
.settings-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    margin-left: 10px; /* Espaço após o medidor de memória */
}

.settings-button img {
    vertical-align: middle;
    transition: transform 0.2s ease;
    opacity: 0.8;
    width: 20px; /* Tamanho do ícone */
    height: 20px;

}

.settings-button:hover img {
    transform: scale(1.1) rotate(45deg);
    opacity: 1;
}

.settings-button:disabled img {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* Estilos para o Modal de Configurações de Áudio */
/* Reutilizando .channel-edit-modal e .modal-content-small já existentes,
   mas adicionando alguns específicos se necessário. */

.settings-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--input-border);
}
.settings-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.settings-section h4 {
    color: var(--accent-color-blue);
    font-size: 1em;
    margin-bottom: 8px;
}

.settings-control {
    display: flex;
    flex-direction: column; /* Label acima do select */
    gap: 6px;
    align-items: flex-start;
}

.settings-control label {
    font-size: 12px;
    color: var(--text-color-muted);
}

#audioInputDeviceSelect {
    /* Estilos adicionais para o select se necessário,
       mas os inline no HTML já devem dar uma boa base. */
    font-family: inherit; /* Herda a fonte do corpo */
    font-size: 12px;
}
#audioInputDeviceSelect:focus {
    outline: none;
    border-color: var(--accent-color-blue-dark);
    box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.3);
}

#refreshAudioDevicesButton {
    background-color: var(--button-bg);
    color: var(--text-color-muted);
    border: 1px solid var(--button-border);
}
#refreshAudioDevicesButton:hover {
    background-color: var(--button-hover-bg);
    color: var(--text-color);
}

.track-input-channel-select-container {
    width: 100%; /* Ocupa a largura da coluna de controles inline */
    display: flex;
    justify-content: center; /* Centraliza o select se for menor que 100% */
    margin-top: auto; /* Tenta empurrar o seletor de input para baixo */
}

.track-input-channel-select {
    width: 90%; /* Um pouco menor que o container para não colar nas bordas */
    max-width: 55px; /* Garante que não fique muito largo */
    padding: 2px 3px;
    font-size: 9px;
    background-color: var(--input-bg);
    color: var(--text-color-muted);
    border: 1px solid var(--input-border);
    border-radius: 3px;
    text-align: center;
    -webkit-appearance: none; /* Remove aparência padrão no WebKit */
    -moz-appearance: none;    /* Remove aparência padrão no Firefox */
    appearance: none;         /* Remove aparência padrão */
    cursor: pointer;
    /* Adicionar uma seta customizada se desejar, ou deixar o navegador lidar */
}

.track-input-channel-select:disabled {
    background-color: #282828;
    color: #555;
    cursor: not-allowed;
    opacity: 0.7;
}

.track-input-channel-select:focus {
    outline: none;
    border-color: var(--accent-color-blue);
    box-shadow: 0 0 0 1px var(--accent-color-blue);
}

.basic-controls .pre-roll-control {
    display: flex;
    align-items: center;
    gap: 6px; /* Espaço entre o label e o input */
    margin-left: 12px; /* Espaço à esquerda do controle de pré-roll */
}

.basic-controls .pre-roll-control label {
    font-size: 11px;
    color: var(--text-color-muted);
    white-space: nowrap;
}

.basic-controls .pre-roll-control input[type="number"] {
    width: 48px; /* Largura ajustada para 2 dígitos + setas */
    padding: 4px 6px;
    font-size: 12px;
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    text-align: center;
    -moz-appearance: textfield; /* Remove setas no Firefox */
}

/* Remove setas no Chrome, Safari, Edge */
.basic-controls .pre-roll-control input[type="number"]::-webkit-outer-spin-button,
.basic-controls .pre-roll-control input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Ajustar o .upload-slot para talvez ter mais uma coluna */
.upload-slot {
    display: flex;
    align-items: stretch; /* Faz todas as colunas terem a mesma altura */
    gap: 10px;
    padding: 10px 8px;
    border-bottom: 1px solid #303030;
    min-height: 100px; /* Ou a altura que desejar */
}

/* Container principal dos controles da saída auxiliar */
.aux-output-controls-container {
    display: flex;
    flex-direction: column; /* Empilha valor, fader, seletor */
    align-items: center;   /* Centraliza horizontalmente */
    justify-content: space-between; /* Espaça verticalmente, pode ajustar para 'center' ou 'flex-start' */
    width: 60px; /* Largura similar à coluna de controles inline */
    padding: 5px 0;
    box-sizing: border-box;
    height: 100%; /* Tenta ocupar a altura da faixa */
}

/* Display de valor para o fader auxiliar */
.aux-output-controls-container .aux-volume-value-display {
    font-size: 10px;
    color: var(--text-color-muted);
    background: #28282800;
    padding: 1px 2px;
    border-radius: 2px;
    width: 40px;
    text-align: center;
    font-family: monospace;
    line-height: 1.2;
    margin-bottom: 4px; 
    order: 1;
}


.aux-output-controls-container .aux-volume-fader-container {
    width: 35px;
    height: 55px; /* Altura para acomodar um fader visual de 45px */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    order: 2;
    margin-bottom: 8px;
}


/* Input Range do Fader Auxiliar (Vertical) */
.aux-output-controls-container .aux-vertical-fader { /* Classe adicionada via JS */
    -webkit-appearance: none;
    appearance: none;
    width: 50px; /* ALTURA VISUAL DO FADER (pré-rotação) - REDUZIDO para 50px */
    height: 5px;  /* Espessura da barra */
    background: #555;
    border: 1px solid #333;
    border-radius: 3px;
    cursor: pointer;
    margin: 0;
    transform-origin: center center;
    transform: rotate(-90deg);
    position: absolute;
    top: calc(50% - 2.5px); /* (height / 2) */
    left: calc(50% - 25px); /* (width / 2) - AJUSTADO PARA NOVA LARGURA de 50px */
}

/* Thumb do Fader Auxiliar */
.aux-output-controls-container .aux-vertical-fader::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 16px; /* Mantém o thumb similar ao pan */
    background: var(--accent-color-blue); /* Cor diferente para Aux ou pode ser a mesma */
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
}
.aux-output-controls-container .aux-vertical-fader::-moz-range-thumb {
    width: 10px;
    height: 16px;
    background: var(--accent-color-blue);
    border-radius: 2px;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
}


/* Seletor de Saída Auxiliar */
.aux-output-controls-container .track-aux-output-select {
    width: 90%;
    max-width: 55px;
    padding: 2px 3px;
    font-size: 9px;
    background-color: var(--input-bg);
    color: var(--text-color-muted);
    border: 1px solid var(--input-border);
    border-radius: 3px;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    order: 3;
    margin-top: 0; 
}


.aux-output-controls-container .track-aux-output-select:disabled {
    background-color: #282828;
    color: #555;
    opacity: 0.7;
}
.aux-output-controls-container .track-aux-output-select:focus {
    outline: none;
    border-color: var(--accent-color-blue);
    box-shadow: 0 0 0 1px var(--accent-color-blue);
}

/* Footer Styles */
.site-footer {
    width: 100%;
    padding: 20px 0;
    margin-top: auto;
  }
  
  .footer-content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 30px;
  }
  
  .footer-text {
    color: #9f9f9f;
    text-align: center;
    font-family: "FiraSans-Regular", sans-serif;
    font-size: 10px;
    font-weight: 400;
    margin: 0;
    padding: 0;
  }
  
  .footer-logo {
    position: absolute;
    right: 30px;
    width: 45px;
    height: 40px;
    object-fit: cover;
  }

  /* Adicione ao final do seu arquivo assets/css/styles.css */

.doc-link-button {
    background: none; /* Ou uma cor de fundo, se preferir */
    border: 1px solid var(--button-border); /* Similar aos outros botões de ícone */
    color: #6fb4e2;    
    padding: 5px 10px; /* Ajuste o padding conforme necessário */
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px; /* Ajuste o tamanho da fonte */
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 10px; /* Espaço após o botão de settings */
    display: inline-flex; /* Para alinhar verticalmente com outros botões se necessário */
    align-items: center;
    height: 30px; /* Altura similar ao botão de settings se ele usa a imagem */
    box-sizing: border-box;
}

.doc-link-button:hover {
    color: #9257df;
}


/* Ajuste para garantir alinhamento com o botão de settings que usa imagem */
.basic-controls .settings-button,
.basic-controls .doc-link-button {
    height: 30px; /* Defina uma altura consistente se necessário */
    line-height: normal; /* Para o texto do DOC */
}

.basic-controls .settings-button img {
    max-height: 20px; /* Ajuste para a imagem dentro do botão settings */
    max-width: 20px;
}