* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Arial, sans-serif; }

/* TRANSPARENTE — vídeo renderizado pelo vMix por baixo */
html, body { width: 100%; height: 100%; background: transparent !important; overflow: hidden; }

/* ─── SETUP & ASSIGN ─── */
#setupScreen, #assignScreen {
    width: 100%; height: 100%;
    overflow-y: auto; overflow-x: hidden;
    background: #0d0d0d;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 16px 8px;
}
.setupBox {
    background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 10px;
    padding: 20px 16px; width: 100%; max-width: 560px;
}
.setupTitle { font-size: clamp(18px,4vw,26px); font-weight: 800; color: #fff; margin-bottom: 14px; }
.setupTitle span { color: #e53935; }
.setupHint  { color: #666; font-size: clamp(11px,2.5vw,13px); margin-bottom: 14px; }

.setupSection { margin-bottom: 16px; }
.setupSection > label:first-child {
    display: block; font-size: clamp(11px,2.5vw,12px); font-weight: 700;
    color: #777; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px;
}
.setupSection input[type="text"],
.setupSection input[type="number"],
.setupSection select {
    width: 100%; background: #111; border: 2px solid #333; border-radius: 8px;
    color: #fff; font-size: clamp(16px,3.5vw,20px); padding: 12px 14px; outline: none;
}
.setupSection input[type="text"]:focus,
.setupSection input[type="number"]:focus,
.setupSection select:focus { border-color: #e53935; }

/* Layout picker */
.layoutGrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); gap: 8px; }
.layoutOption {
    background: #111; border: 2px solid #2a2a2a; border-radius: 8px;
    padding: 8px 6px; cursor: pointer; text-align: center;
    transition: border-color .15s, background .15s; user-select: none;
}
.layoutOption.selected { border-color: #e53935; background: #1e0f0f; }
.layoutOption span { display: block; font-size: clamp(10px,2.2vw,12px); color: #888; margin-top: 5px; font-weight: 700; }
.layoutOption.selected span { color: #e53935; }
.layoutPreview {
    width: 100%; aspect-ratio: 16/9; display: grid; gap: 1px;
    background: #1a1a1a; border-radius: 3px; overflow: hidden; padding: 1px;
}
.layoutPreview > div { background: #3a3a3a; border-radius: 1px; }
.layoutOption.selected .layoutPreview > div { background: #5a2020; }

.pgm-prv-8-preview { grid-template-columns: 1fr 1fr; grid-template-rows: 50% 25% 25%; }
.pgm-prv-8-preview  .lp-big { grid-row: 1; }
.pgm-prv-4-preview  { grid-template-columns: 1fr 1fr; grid-template-rows: 55% 45%; }
.pgm-prv-4-preview  .lp-big { grid-row: 1; }
.pgm-prv-6-preview  { grid-template-columns: 1fr 1fr; grid-template-rows: 50% 25% 25%; }
.pgm-prv-6-preview  .lp-big { grid-row: 1; }
.grid-preview       { gap: 1px; }

/* Option row (toggle) */
.optionRow {
    display: flex; align-items: center; justify-content: space-between;
    background: #111; border: 2px solid #2a2a2a; border-radius: 8px;
    padding: 12px 14px; margin-bottom: 8px;
}
.optionRow span { font-size: clamp(14px,3vw,16px); color: #ccc; font-weight: 600; }

/* Toggle */
.toggle { position: relative; display: inline-block; width: 52px; height: 28px; flex-shrink: 0; }
.toggle input { display: none; }
.toggleSlider {
    position: absolute; inset: 0; background: #333; border-radius: 28px;
    cursor: pointer; transition: .25s;
}
.toggleSlider:before {
    content: ''; position: absolute; width: 20px; height: 20px;
    left: 4px; top: 4px; background: #888; border-radius: 50%; transition: .25s;
}
.toggle input:checked + .toggleSlider { background: #e53935; }
.toggle input:checked + .toggleSlider:before { background: #fff; transform: translateX(24px); }

/* Buttons */
.btnPrimary {
    width: 100%; background: #e53935; color: #fff; border: none; border-radius: 10px;
    padding: clamp(14px,3vw,18px); font-size: clamp(16px,3.5vw,20px); font-weight: 800;
    cursor: pointer; margin-top: 6px;
}
.btnPrimary:active { background: #b71c1c; }
.btnPrimary:disabled { background: #444; color: #888; cursor: not-allowed; }
.btnSecondary {
    flex: 1; background: #1a1a1a; color: #bbb; border: 2px solid #333;
    border-radius: 8px; padding: clamp(12px,2.5vw,14px) 10px;
    font-size: clamp(13px,3vw,15px); font-weight: 700; cursor: pointer;
}
.btnSecondary:active { background: #2a2a2a; }
.errorMsg { color: #ef9a9a; font-size: 13px; margin-top: 10px; text-align: center; min-height: 18px; }

/* Assign */
#assignGrid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.aCell {
    background: #111; border: 2px solid #2a2a2a; border-radius: 8px;
    padding: 10px 12px; display: flex; align-items: center; gap: 10px;
}
.aCell label { font-size: clamp(12px,2.8vw,14px); color: #888; font-weight: 700; text-transform: uppercase; min-width: 80px; flex-shrink: 0; }
.aCell.is-preview label { color: #81c784; }
.aCell.is-program label { color: #e57373; }
.aCell select {
    flex: 1; background: #1a1a1a; border: 2px solid #333; border-radius: 6px;
    color: #fff; padding: clamp(10px,2.5vw,14px) 10px; font-size: clamp(14px,3vw,16px); outline: none;
}
.aCell select:focus { border-color: #e53935; }
.assignActions { display: flex; gap: 8px; flex-wrap: wrap; }
.assignInfo {
    background: #0f1a0f; border: 1px solid #1a3a1a; border-radius: 8px;
    padding: 10px 14px; font-size: clamp(12px,2.8vw,13px); color: #888; margin-bottom: 14px; line-height: 1.6;
}
.assignInfo b { color: #fff; }

/* ─── MULTIVIEW ─── */
#multiviewScreen { width: 100%; height: 100%; position: fixed; inset: 0; background: transparent; }
#overlay { position: fixed; inset: 0; pointer-events: none; }

/* Células — SEM fundo, só borda */
.mvCell {
    position: absolute;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(160,160,160,0.45);
    box-sizing: border-box;
    transition: border-color .1s;
    pointer-events: none;
    overflow: visible;
}
.mvCell.program {
    border-color: #e53935 !important;
    box-shadow: inset 0 0 0 2px rgba(229,57,53,.25);
}
.mvCell.preview {
    border-color: #43a047 !important;
    box-shadow: inset 0 0 0 2px rgba(67,160,71,.2);
}

.inputLabel {
    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,.72); color: #fff;
    font-size: clamp(9px,1.3vw,16px); font-weight: 600;
    padding: 2px 8px; border-radius: 3px; border: 1px solid rgba(255,255,255,.15);
    white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 1px 1px 2px #000; pointer-events: none;
}
.cellBadge {
    position: absolute; top: 5px; right: 5px;
    font-size: clamp(8px,1vw,12px); font-weight: 800; padding: 2px 6px;
    border-radius: 3px; letter-spacing: 1px; display: none; pointer-events: none;
}
.mvCell.program .cellBadge { display: block; background: #e53935; color: #fff; }
.mvCell.preview  .cellBadge { display: block; background: #43a047; color: #fff; }

/* VU Meter */
.vuWrap {
    position: absolute; left: 3px; bottom: 8px;
    width: 5%; min-width: 10px; max-width: 20px; height: 68%;
    background: rgba(0,0,0,.4); border-radius: 3px;
    display: flex; flex-direction: column; gap: 2px; padding: 3px 2px; pointer-events: none;
}
.vuCh { flex: 1; position: relative; overflow: hidden; }
.vuBar {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: linear-gradient(to top, #4caf50 0%, #4caf50 60%, #ffeb3b 60%, #ffeb3b 80%, #f44336 80%);
    border-radius: 2px; transition: height .05s linear;
}
.vuMuted .vuBar { filter: grayscale(1); opacity: .4; }

/* Clock */
#clockDisplay {
    position: fixed; top: 16px; right: 16px;
    font-size: clamp(18px,4vw,60px); font-weight: 700; color: #fff;
    text-shadow: 2px 2px 6px #000; pointer-events: none; z-index: 10; display: none;
}

/* ─── SETTINGS PANEL — aparece no hover da borda inferior ─── */
#settingsHover {
    position: fixed; bottom: 0; left: 0; width: 100%; z-index: 200;
    pointer-events: none;
}

/* Tab sempre visível como faixa fina */
#settingsTab {
    text-align: center; background: transparent; color: transparent;
    font-size: clamp(10px,1.8vw,12px); font-weight: 700; padding: 6px 0;
    cursor: pointer; pointer-events: all; letter-spacing: 1px;
    transition: color .2s, background .2s;
}
#settingsHover:hover #settingsTab { color: #888; background: rgba(0,0,0,.6); }

/* Painel oculto — aparece no hover da área inferior OU quando pinned (click) */
#settingsPanel {
    background: rgba(8,8,8,.97); border-top: 1px solid #2a2a2a;
    padding: 10px 10px 6px;
    display: none; flex-direction: column; gap: 6px;
    pointer-events: all;
}
#settingsHover:hover #settingsPanel,
#settingsPanel.pinned { display: flex; }
#settingsHover:hover #settingsTab { color: #999; background: rgba(0,0,0,.75); }

.sRow {
    display: flex; align-items: center; justify-content: space-between;
    background: #111; border: 1px solid #222; border-radius: 8px; padding: 10px 12px; gap: 10px;
}
.sRow span { font-size: clamp(13px,3vw,15px); color: #ccc; font-weight: 600; }
.sRow select {
    background: #1a1a1a; border: 1px solid #333; border-radius: 6px;
    color: #fff; padding: 8px 10px; font-size: clamp(13px,2.8vw,15px); outline: none; max-width: 55%;
}
.sBtns { display: flex; gap: 8px; }
.btnSettings {
    flex: 1; background: #1a1a1a; color: #ccc; border: 2px solid #333;
    border-radius: 8px; padding: clamp(12px,2.5vw,14px) 10px;
    font-size: clamp(13px,3vw,15px); font-weight: 700; cursor: pointer;
}
.btnSettings:active { background: #2a2a2a; }
.btnApply {
    flex: 1; background: #1a2e1a; color: #81c784; border: 2px solid #2a5a2a;
    border-radius: 8px; padding: clamp(12px,2.5vw,14px) 10px;
    font-size: clamp(13px,3vw,15px); font-weight: 700; cursor: pointer;
}
.btnApply:active { background: #2a3e2a; }
.btnDownload {
    flex: 1; background: #0d1a2e; color: #64b5f6; border: 2px solid #1a3a5a;
    border-radius: 8px; padding: clamp(12px,2.5vw,14px) 10px;
    font-size: clamp(12px,2.8vw,14px); font-weight: 700; cursor: pointer;
}
.btnDownload:active { background: #1a2a3e; }
.sURL { display: flex; align-items: center; gap: 8px; padding: 4px 4px 2px; }
.sURL span { font-size: 11px; color: #555; white-space: nowrap; }
.sURL input {
    flex: 1; background: #0d0d0d; border: 1px solid #222; border-radius: 5px;
    color: #555; padding: 5px 8px; font-size: 11px; outline: none; min-width: 0;
}