:root{
  color-scheme: dark;
  --bg:#0b0b0f;
  --text:#eaeaf2;
  --muted:#a2a2b3;
  --border:#262635;
  --radius:16px;
  --danger:#e53935;
  --warning:#ff9800;
  --cardbg: rgba(0,0,0,.25);
}
*{box-sizing:border-box}

html,body{ 
  height: 100%; 
  overflow: auto; 
  min-height: 720px; 
  min-width: 1280px; 
}

body{
  margin:0;
  background: radial-gradient(1200px 700px at 20% 0%, #1a0b0b 0%, rgba(0,0,0,0) 60%),
        radial-gradient(1200px 700px at 80% 0%, #0b111a 0%, rgba(0,0,0,0) 60%),
        var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.wrap{height:100%;display:flex;flex-direction:column;padding:10px;gap:8px;}

.topbar{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border);border-radius: var(--radius);
}
.brand{display:flex; align-items:center; gap:10px;font-weight:800;letter-spacing:.2px;}
.dot{width:10px;height:10px;border-radius:999px;background:var(--danger);box-shadow:0 0 18px rgba(229,57,53,.6);}
.sub{color:var(--muted);font-weight:500;font-size:12px;}
.centerClock{ text-align:center; color:var(--muted); font-weight:800; font-size:16px; letter-spacing:.3px; white-space:nowrap; }

#streamerNameEdit { outline: none; border-bottom: 1px dashed rgba(255, 255, 255, 0.4); cursor: text; padding: 0 2px; display: inline-block; min-width: 50px; transition: all 0.2s ease; }
#streamerNameEdit:focus { border-bottom: 1px solid rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.1); border-radius: 4px; }

.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{ font-size:11px;color:var(--muted); background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); padding:4px 8px;border-radius:999px;white-space:nowrap; }

.pill-timer { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); padding: 3px 10px; border-radius: 999px; font-size: 11px; color: var(--text); font-weight: 700; pointer-events: none; white-space: nowrap; margin-left: auto; margin-right: 6px; flex-shrink: 0; pointer-events: auto; cursor: help; }
.pill-timer.interactive { cursor: pointer; transition: all 0.2s ease; }
.pill-timer.interactive:hover { transform: scale(1.03); filter: brightness(1.2); }
.pill-timer.btn-start { background: rgba(76,175,80,0.15); border-color: rgba(76,175,80,0.4); color: #fff; }
.pill-timer.btn-stop { background: rgba(229,57,53,0.15); border-color: rgba(229,57,53,0.4); color: #fff; }

.btn{ cursor:pointer;user-select:none; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); color:var(--text); padding:7px 10px;border-radius: 12px; font-weight:800;font-size:12px; display:inline-flex;align-items:center;gap:8px; transition: all 0.2s ease; }
.btn:hover{ border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,.1); }
.btn:active{transform: translateY(1px)}
.btn.danger{border-color: rgba(229,57,53,.35); background: rgba(229,57,53,.10)}

.oauth-status-panel { display: flex; gap: 12px; padding: 4px 14px; background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 12px; cursor: help; }
.led-wrapper { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.led-label { font-size: 9px; color: var(--muted); font-weight: 900; letter-spacing: 0.5px; }
.led { width: 10px; height: 10px; border-radius: 50%; background-color: #333; box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); transition: all 0.3s ease; }
.led-ok { background-color: #4CAF50; box-shadow: 0 0 8px rgba(76, 175, 80, 0.8), inset 0 1px 2px rgba(255,255,255,0.5); }
.led-off { background-color: #444; }
.led-alert { background-color: #f44336; animation: led-pulse-alert 1s infinite alternate; }
@keyframes led-pulse-alert { 0% { box-shadow: 0 0 2px rgba(244, 67, 54, 0.5); opacity: 0.6; } 100% { box-shadow: 0 0 14px rgba(244, 67, 54, 1), inset 0 1px 2px rgba(255,255,255,0.5); opacity: 1; } }

#authWarningBanner { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 40; color: var(--warning); font-size: 12px; font-weight: 800; display: none; background: rgba(20, 10, 0, 0.95); padding: 8px 16px; border-radius: 8px; border: 1px solid rgba(255, 152, 0, 0.5); box-shadow: 0 10px 30px rgba(0,0,0,0.8); white-space: nowrap; backdrop-filter: blur(4px); transition: top 0.3s ease, z-index 0s; max-width: calc(100vw - 32px); }
body.has-modal #authWarningBanner { top: 15px; left: 50%; transform: translateX(-50%); z-index: 100000; }

.floating-notepad { position: fixed; top: 100px; right: 30px; background: #0e0e14; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,0.7); display: none; flex-direction: column; z-index: 9999; }
.fn-header { padding: 10px 14px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: grab; user-select: none; border-radius: 14px 14px 0 0; }
.fn-header:active { cursor: grabbing; }
.fn-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.fn-close { cursor: pointer; opacity: 0.6; transition: 0.2s; padding: 2px 6px; }
.fn-close:hover { opacity: 1; color: var(--danger); }
.fn-tabs { display: flex; background: rgba(0,0,0,0.2); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.fn-tabs::-webkit-scrollbar { display: none; }
.fn-tab { padding: 6px 12px; font-size: 11px; cursor: pointer; border-right: 1px solid var(--border); color: var(--muted); white-space: nowrap; user-select: none; display: flex; align-items: center; gap: 5px; transition: background 0.2s; }
.fn-tab:hover { background: rgba(255,255,255,0.03); }
.fn-tab.active { background: rgba(255,255,255,0.08); color: #fff; font-weight: bold; }
.fn-tab-add { padding: 6px 12px; cursor: pointer; color: var(--muted); font-weight: bold; border-right: 1px solid var(--border); }
.fn-tab-add:hover { color: #fff; background: rgba(255,255,255,0.05); }
.fn-tab-close { font-size: 10px; opacity: 0.5; margin-left: 5px; }
.fn-tab-close:hover { opacity: 1; color: var(--danger); }
.fn-tab-name { outline: none; border-bottom: 1px dashed rgba(255, 255, 255, 0.4); min-width: 30px; padding: 0 2px; transition: all 0.2s ease; cursor: text; display: inline-block; }
.fn-tab-name:focus { border-bottom: 1px solid rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.1); border-radius: 4px; color: #fff; }
.fn-textarea { width: 320px; height: 240px; min-width: 250px; min-height: 150px; background: transparent; border: none; color: #ddd; padding: 12px; font-size: 14px; line-height: 1.5; resize: both; outline: none; font-family: inherit; border-radius: 0 0 14px 14px; }
.drop-zone { border: 2px dashed transparent; transition: all 0.2s ease; padding: 10px; border-radius: 12px; }
.drop-zone.dragover { border-color: var(--danger); background: rgba(229,57,53,.08); }

.main{ flex:1; min-height:0; display:grid; grid-template-columns: 1fr 1fr; gap:8px; }

.suggestions-container { position: relative; width: 100%; }
.suggestions-list { position: absolute; top: 100%; left: 0; right: 0; background: #16161e; border: 1px solid var(--border); border-top: none; border-radius: 0 0 12px 12px; z-index: 1000; max-height: 200px; overflow-y: auto; display: none; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
.suggestion-item { padding: 10px 12px; cursor: pointer; font-size: 13px; color: var(--text); border-bottom: 1px solid rgba(255,255,255,0.05); }
.suggestion-item:hover { background: rgba(255,255,255,0.08); }

@keyframes pulse-warning { 0% { filter: drop-shadow(0 0 2px rgba(255,152,0,0.4)); opacity: 0.8; } 100% { filter: drop-shadow(0 0 8px rgba(255,152,0,0.8)); opacity: 1; } }
.blink-icon { animation: pulse-warning 1.5s infinite alternate ease-in-out; display: inline-block; text-shadow: 0 0 5px rgba(0,0,0,0.3); }

.lockWrap{ position:relative; display: flex; gap: 5px; }
.lockWrap.locked{ opacity: 1; }
input.lockWrap.locked, .lockWrap.locked input { cursor:not-allowed !important; }
.chat iframe, .player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display: none; }
.init-check-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 15px; cursor: pointer; user-select: none; }
.init-check-row input { width: 16px; height: 16px; cursor: pointer; margin:0; }
.init-check-row span { font-size: 12px; color: var(--muted); font-weight: 600; }

.videos{ min-height:0; display:grid; gap:8px; }
.videos.layout-1{ grid-template-columns: 1fr; grid-template-rows: 1fr; }
.videos.layout-2{ grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.videos.layout-3{ grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } 
.videos.layout-4{ grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mvPrimary{ grid-column: 1 / span 2; }
.videos.in-theater-mode { grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; display: grid !important; }

.panel{ background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; min-height:0; display:flex; flex-direction:column; transition: border-color 0.3s, box-shadow 0.3s; }
.panel.is-live { border-color: rgba(105,240,174, 0.4); box-shadow: 0 0 15px rgba(105,240,174, 0.15); }
.panel.is-ready { border-color: rgba(255,152,0, 0.4); box-shadow: 0 0 15px rgba(255,152,0, 0.1); }
.panel.is-offline { border-color: rgba(229,57,53, 0.3); box-shadow: inset 0 0 20px rgba(229,57,53, 0.05); }

.panel.theater-active { border-width: 2px !important; }
.panel.is-live.theater-active { border-color: rgba(105,240,174, 1) !important; box-shadow: 0 0 30px rgba(105,240,174, 0.4) !important; }
.panel.is-ready.theater-active { border-color: rgba(255,152,0, 1) !important; box-shadow: 0 0 30px rgba(255,152,0, 0.4) !important; }
.panel.is-offline.theater-active, .panel.theater-active:not(.is-live):not(.is-ready) { border-color: var(--danger) !important; box-shadow: 0 0 30px rgba(229,57,53, 0.4) !important; }

.chats{ min-height:0; display:grid; gap:8px; }
.chats.layout-1{ grid-template-columns: 1fr; grid-template-rows: 1fr; }
.chats.layout-2{ grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.chats.layout-3{ grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.chats.layout-4{ grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mcPrimary{ grid-column: 1 / span 2; }

.hdr{ padding:8px 10px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.25); position: relative; min-width: 0; }
.title{font-weight:800;font-size:12px;}
.titleLink{ color: inherit; text-decoration: none; font-weight: 800; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }
.titleLink:hover{ text-decoration: underline; }

.player{ position:relative; width:100%; height: 100%; background:#000; }
.player.player1 { height: clamp(400px, 92vh, 1400px); } 
.player.player2 { height: clamp(400px, 90vh, 1400px); } 
.player.player3Top { height: clamp(200px, 38vh, 600px); } 
.player.player3Bot { height: clamp(220px, 42vh, 600px); } 
.player.player4 { height: clamp(190px, 30vh, 360px); }   
.player.playerS { height: clamp(190px, 30vh, 360px); }   

.stats{ padding:8px 10px; display:grid; grid-template-columns: 1fr 0.8fr auto auto; gap:6px; background: rgba(0,0,0,.15); align-items: stretch; }
.stat{ padding:8px 10px; border:1px solid rgba(255,255,255,.08); background: var(--cardbg); border-radius: 14px; min-width:0; }
.k{color:var(--muted);font-size:11px;font-weight:700}
.v{font-size:16px;font-weight:900;margin-top:2px}
.statLine{ margin-top:2px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; min-width:0; }
.miniRight{ color:var(--muted); font-size:12px; font-weight:700; white-space:nowrap; text-align:right; flex:0 0 auto; }

.chat{ position:relative; width:100%; flex:1; min-height:0; background:#000; }

.backdrop{ position:fixed;inset:0;background: rgba(0,0,0,.55); display:none;align-items:center;justify-content:center;padding:10px;z-index:50; }
#initBackdrop{z-index:100; /* IMPORTANTE: Mantemos sem 'display: flex' aqui para o JS controlar perfeitamente */} 
#backdrop{z-index:50;}
#detailsBackdrop{z-index:60;}
#keysBackdrop{z-index:75;}
#multiBackdrop{z-index:80;}
#helpBackdrop{z-index:110;} 

.modal{ width:min(900px, 100%); background:#0e0e14; border:1px solid var(--border); border-radius: 18px; overflow:hidden; box-shadow: 0 20px 80px rgba(0,0,0,.55); }
#programBackdrop .modal, #detailsBackdrop .modal { width: min(1300px, 98%); }
#helpBackdrop .modal, #multiBackdrop .modal, #backdrop .modal { width: min(1200px, 100%); }

.tab { padding: 12px 16px; cursor:pointer; font-size:12px; font-weight:800; color:var(--muted); border-bottom:2px solid transparent; transition:0.2s; user-select:none; }
.tab.active { color:#fff; border-bottom-color:var(--danger); background: rgba(255,255,255,0.03); }
.tab:hover:not(.active) { color:#ddd; background: rgba(255,255,255,0.02); }
.tab-content { display: none; animation: fadeIn 0.2s ease; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modalHdr{ padding:12px 14px; display:flex;align-items:center;justify-content:space-between;gap:10px; border-bottom:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.25); }
.modalBody{padding:14px; display:grid; gap:12px; overflow:auto; max-height: calc(100vh - 80px);}

.help-card { border: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.helpContent h3 { font-size: 18px; font-weight: 800; color: #fff; margin: 0 0 10px 0; border-bottom: 1px solid var(--border); padding-bottom: 5px; }
.helpContent h4 { font-size: 16px; font-weight: 700; color: var(--muted); margin: 12px 0 6px 0; }
.helpContent p { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0 0 10px 0; }
.helpContent ul { margin: 0 0 12px 0; padding-left: 22px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.helpContent li { margin-bottom: 6px; }
.helpContent b { color: #fff; font-weight: 700; }
.helpContent .mono { background: rgba(255,255,255,0.05); padding: 2px 4px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, monospace; }

.formGrid{display:grid;grid-template-columns: 1fr 1fr;gap:10px;}
.programLayout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.programColumn { display: flex; flex-direction: column; gap: 10px; }
.fieldRow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.field{ display:flex;flex-direction:column;gap:6px;padding:10px; border:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); border-radius: 14px; }
label{font-size:12px;color:var(--muted);font-weight:800}

input, textarea{ width:100%; padding:10px 10px; border-radius: 12px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.30); color:var(--text); outline:none; font-size:13px; font-family: inherit; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

select { width:100%; padding:10px 10px; border-radius: 12px; border:1px solid rgba(255,255,255,.10); background-color: rgba(0,0,0,.30); color:var(--text); outline:none; font-size:13px; font-family: inherit; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a2a2b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; cursor: pointer; }
select option { background-color: #1a1a24; color: #eaeaf2; font-size: 13px; }

#schedDesc, #dDescNew { min-height: 160px; resize: vertical; display: block; }
input:disabled, textarea:disabled, select:disabled { background: rgba(255,255,255,.03); color: var(--muted); cursor: not-allowed; border-color: transparent; opacity: 0.6; }

.hint{font-size:12px;color:var(--muted);line-height:1.35}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
.full{grid-column: 1 / -1}
.fieldTop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.btn.sm{padding:6px 10px;border-radius:10px;font-size:11px;font-weight:900}
.btn.sm.ghost{background: rgba(255,255,255,.04)}
.btn-icon{padding: 8px 10px; height: 100%; border-color: rgba(255,255,255,.14);}
.btn-icon:hover{background: rgba(255,255,255,.1);}

.toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center; }
@media (max-width: 600px) { .toggle-grid { grid-template-columns: 1fr; } }

.toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;width:max-content;}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.switch{ width:44px;height:24px;border-radius:999px; background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); position:relative;transition: .18s ease; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.knob{ width:18px;height:18px;border-radius:999px; background: rgba(255,255,255,.85); position:absolute;top:50%;left:2px; transform: translateY(-50%); transition: left .2s ease, background-color .2s ease; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.toggle input:checked + .switch{ background: rgba(229,57,53,.18); border-color: rgba(229,57,53,.35); }
.toggle input:checked + .switch .knob{ left:22px; }

.switch.small{ width:32px; height:18px; }
.switch.small .knob{ width:14px; height:14px; left:2px; }
.toggle input:checked + .switch.small .knob{ left:16px; }

.toggleTxt{display:inline-flex;align-items:baseline;gap:8px}
.toggleTxt b{font-weight:900}

.footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.footerBranding { font-size: 12px; color: var(--muted); font-weight: 500; text-align: left; }
.footerLinks { display: flex; gap: 8px; justify-content: center; }
.footerF11 { font-size: 12px; color: var(--muted); text-align: right; }
@media (max-width: 768px) { .footer { grid-template-columns: 1fr; gap: 12px; } .footerBranding, .footerF11 { text-align: center; } }

#toastContainer { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 10000; }
.toast { background: #1e1e2d; border-left: 4px solid var(--danger); color: #fff; padding: 12px 20px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); font-size: 13px; font-weight: 600; animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s forwards; }
.toast.success { border-left-color: #4CAF50; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

.oauth-block { transition: opacity 0.3s ease; }

.details-bottom-btn { margin: 0; padding: 0 6px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; min-width: 65px; height: 100%; font-size: 11px; }

.options-menu { position: relative; display: flex; align-items: stretch; height: 100%; min-width: 65px; }
.options-btn { padding: 0 6px; width: 100%; height: 100%; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: var(--text); font-size: 11px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; transition: background 0.2s; user-select: none; }
.options-btn:hover { background: rgba(255,255,255,.12); }

.options-dropdown { position: absolute; bottom: calc(100% + 8px); right: 0; background: #16161e; border: 1px solid var(--border); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 4px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: all 0.2s ease; box-shadow: 0 10px 30px rgba(0,0,0,.7); z-index: 20; min-width: 120px; }
.options-menu.open .options-dropdown { opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; }

.opt-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--text); white-space: nowrap; transition: background 0.2s; user-select: none; }
.opt-item:hover { background: rgba(255,255,255,.08); }
.opt-item .icon { font-size: 15px; width: 22px; text-align: center; } 

.options-dropdown .teatro-btn { margin-top: auto; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 10px; }

@media (max-width: 767px) {
  body::before {
    content: "⚠️ Tela muito pequena \A\A Este painel de transmissão requer um Computador ou Tablet para ser operado com segurança.";
    white-space: pre-wrap;
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #0b0b0f; color: #fff; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 30px; font-size: 18px; font-weight: bold; line-height: 1.5;
  }
  .wrap, .backdrop { display: none !important; }
}

.mcPanel .title { 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  max-width: 180px; 
}

#multiBackdrop {
  background: transparent !important; 
  pointer-events: none; 
}
#multiBackdrop .modal {
  pointer-events: auto; 
  width: 620px !important; 
  position: fixed;
  top: 25vh; 
  left: calc(50% - 310px); 
  background: rgba(14, 14, 20, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  box-shadow: 0 15px 50px rgba(0,0,0,0.8);
}
#multiBackdrop .modalBody {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 15px 20px;
  max-height: 60vh;
  overflow-y: auto;
}
#multiBackdrop .programLayout {
  grid-template-columns: 1fr !important;
  gap: 10px;
}
#multiBackdrop .programColumn { flex: 1; }
#multiBackdrop .hint { display: none; }

#multiBackdrop .modalHdr { cursor: grab; }
#multiBackdrop .modalHdr:active { cursor: grabbing; }

.main.no-chats {
  grid-template-columns: 1fr !important;
}

@media (max-width: 1440px) {
  .topbar { display: flex; flex-wrap: wrap; justify-content: center; }
  .stats { display: flex; flex-wrap: wrap; gap: 8px; }
  .stat { flex: 1 1 120px; }
  .details-bottom-btn, .options-menu { flex: 1 1 30%; height: 36px; }
}

/* ========================================= */
/* TELA DE LOGIN V2.0                        */
/* ========================================= */
.landing-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  background: radial-gradient(1200px 700px at 20% 0%, #1a0b0b 0%, rgba(0,0,0,0) 60%), #0b0b0f;
}
.landing-left {
  flex: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  border-right: 1px solid rgba(255,255,255,0.05);
}
.landing-content {
  max-width: 900px;
  display: flex;
  gap: 40px;
  align-items: center;
}
.landing-text-area { flex: 1; }
.landing-action-area { flex: 0.7; min-width: 280px; }

@media (max-width: 1200px) {
  .landing-content { flex-direction: column; max-width: 500px; gap: 20px; }
  .landing-action-area { width: 100%; }
}
.landing-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}
.feat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.03);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  color: #ddd;
  border: 1px solid rgba(255,255,255,0.05);
}
.landing-buy {
  background: rgba(229,57,53,0.1);
  border: 1px solid rgba(229,57,53,0.3);
  padding: 20px;
  border-radius: 16px;
  text-align: center;
}
.qr-code-img {
  width: 150px;
  height: 150px;
  border-radius: 12px;
  border: 4px solid #fff;
  margin: 0 auto;
}
.qr-placeholder {
  width: 150px;
  height: 150px;
  background: rgba(0,0,0,0.5);
  border: 1px dashed var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border-radius: 12px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  padding: 10px;
}
.landing-right {
  flex: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="1" fill="rgba(255,255,255,0.03)"/></svg>');
}
#btnResetPassword:hover { color: #fff !important; text-decoration: underline !important; }

@media (max-width: 900px) {
  .landing-wrapper { flex-direction: column; overflow-y: auto; }
  .landing-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); padding: 30px 20px; }
  .landing-right { padding: 30px 20px; align-items: flex-start; }
}

.demo-banner { display: none; }

.modo-demo .demo-banner {
  display: inline-flex;
  align-items: center;
  background: var(--danger); 
  color: #fff; 
  padding: 6px 14px; 
  border-radius: 12px;
  font-weight: 900; 
  cursor: pointer; 
  font-size: 11px; 
  letter-spacing: 0.5px;
  box-shadow: 0 0 15px rgba(229,57,53,0.6); 
  animation: pulse-demo 1.5s infinite ease-in-out;
  text-transform: uppercase;
  margin-left: 10px;
}
@keyframes pulse-demo { 
  0% { transform: scale(1); filter: brightness(1); } 
  50% { transform: scale(1.05); filter: brightness(1.2); } 
  100% { transform: scale(1); filter: brightness(1); } 
}

.modo-demo input, 
.modo-demo textarea, 
.modo-demo select, 
.modo-demo [contenteditable="true"] {
  pointer-events: none !important;
  user-select: none !important;
  opacity: 0.4 !important;
  border: 1px dashed var(--danger) !important;
  background: rgba(229, 57, 53, 0.05) !important;
}

.modo-demo #btnSave, 
.modo-demo #btnSaveKeys, 
.modo-demo #btnSchedule, 
.modo-demo #btnSaveDetailsMaster, 
.modo-demo [id^="btnAuth"], 
.modo-demo .pill-timer {
  pointer-events: none !important;
  opacity: 0.3 !important;
  filter: grayscale(100%);
}

/* ========================================= */
/* TOUR INTERATIVO (ONBOARDING)              */
/* ========================================= */
#tourHighlight {
  display: none; position: absolute; z-index: 999997; 
  border-radius: 8px; border: 2px solid var(--danger);
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.85); 
  transition: all 0.4s ease-in-out;
  pointer-events: none;
}

#tourTooltip {
  display: none; position: absolute; z-index: 999999; 
  width: 360px; 
  background: #16161e; 
  border: 1px solid rgba(229,57,53,0.5); border-radius: 12px; 
  padding: 18px; box-shadow: 0 15px 50px rgba(0,0,0,0.9); 
  transition: all 0.4s ease-in-out;
}

#tourText {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.hover-scale:hover { transform: scale(1.03); border-color: rgba(255,255,255,0.4) !important; }

/* ========================================= */
/* TRAVA ABSOLUTA DO MODO TOUR               */
/* ========================================= */
/* 1. Esconde os banners chatos */
body.tour-active #setupWarningBanner,
body.tour-active #authWarningBanner {
    display: none !important;
}

/* 2. Congela o painel de fundo e todas as janelas modais */
body.tour-active .wrap,
body.tour-active .backdrop {
    pointer-events: none !important;
    user-select: none !important;
}

/* 3. Garante que apenas o balão do Tour continue clicável */
body.tour-active #tourTooltip {
    pointer-events: auto !important;
}

/* ========================================= */
/* TRAVA ABSOLUTA DO MODO TOUR               */
/* ========================================= */

/* 1. Esconde os banners e ARRANCA o botão "Pular" */
body.tour-active #setupWarningBanner,
body.tour-active #authWarningBanner,
body.tour-active #btnTourSkip {
    display: none !important;
}

/* 2. Blindagem Total do Painel e Modais */
body.tour-active .wrap,
body.tour-active .backdrop,
body.tour-active #multiBackdrop .modal {
    pointer-events: none !important;
    user-select: none !important;
}

/* 3. Trava Específica e Absoluta para o Nome (Mata o cursor) */
body.tour-active #streamerNameEdit,
body.tour-active [contenteditable="true"] {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-modify: read-only !important; /* Desativa a edição no Chrome/Edge */
    -moz-user-modify: read-only !important;    /* Desativa a edição no Firefox */
}

/* Oculta o efeito visual de foco caso o usuário tente usar a tecla TAB do teclado */
body.tour-active #streamerNameEdit:focus {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.4) !important;
    background: transparent !important;
}

/* 4. Garante que APENAS o balão do Tour seja clicável */
body.tour-active #tourTooltip {
    pointer-events: auto !important;
}