@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');
body { background-color: #09090b; color: #e5e7eb; font-family: 'Inter', system-ui, sans-serif; margin: 0; padding: 0; height: 100vh; overflow: hidden; }

/* Overlay Inicial */
#bypassOverlay { position: fixed; inset: 0; background: #09090b; z-index: 10; display: flex; align-items: center; justify-content: center; flex-direction: column; }
#bypassOverlay h2 { color: #4ade80; font-size: 2rem; margin-bottom: 5px; font-weight: 800; }
#startBtn { background: #4ade80; color: #0d0d0f; border: none; padding: 12px 24px; font-size: 1rem; border-radius: 8px; cursor: pointer; font-weight: 700; margin-top: 20px; transition: 0.2s; }
#startBtn:hover { transform: scale(1.05); }

/* Layout Base */
.dashboard { display: none; height: 100vh; display: flex; flex-direction: column; }
.header { background: #18181b; padding: 15px 30px; border-bottom: 1px solid #27272a; display: flex; justify-content: space-between; align-items: center; }
.brand { display: flex; align-items: center; gap: 15px; }
.brand h2 { margin: 0; font-size: 14px; letter-spacing: 2px; color: #a1a1aa; }
#aiIndicator { width: 12px; height: 12px; border-radius: 50%; background: #e83f5b; transition: 0.3s; }
@keyframes pulse { 0% { opacity: .6; box-shadow: 0 0 10px rgba(74,222,128,0.4); } 50% { opacity: 1; box-shadow: 0 0 20px rgba(74,222,128,0.8); } 100% { opacity: .6; box-shadow: 0 0 10px rgba(74,222,128,0.4); } }

.controls-group { display: flex; gap: 10px; background: #000; padding: 8px; border-radius: 12px; border: 1px solid #27272a; }
.aiIcon { cursor: pointer; user-select: none; color: #52525b; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; font-size: 18px; transition: 0.2s; }
.aiIcon:hover { color: #4ade80; background: #27272a; }
.aiIcon.active { color: #4ade80; }

/* Grid Dashboard */
.layout-grid { display: flex; flex: 1; overflow: hidden; padding: 20px; gap: 20px; }
.channels-column { flex: 2; overflow-y: auto; padding-right: 10px; }
.logs-column { flex: 1; display: flex; flex-direction: column; background: #111; border-radius: 16px; padding: 20px; border: 1px solid #27272a; }

.section-header { font-size: 11px; font-weight: 800; color: #71717a; letter-spacing: 1.5px; margin-bottom: 15px; }

/* Cards Dinâmicos */
#channelsContainer { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; }
.card { background: #18181b; border: 1px solid #27272a; border-radius: 12px; padding: 20px; transition: 0.2s; position: relative; overflow: visible; }
.card:hover { border-color: #3f3f46; }

/* Card Header e Botões de Ação */
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.card-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.card-actions { display: flex; gap: 8px; }
.card-btn { background: #09090b; color: #71717a; border: 1px solid #27272a; border-radius: 6px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; transition: 0.2s; }
.card-btn:hover { border-color: #52525b; color: #e5e7eb; }
.card-btn.muted { color: #e83f5b; border-color: #e83f5b; background: rgba(232, 63, 91, 0.1); }
.card-btn.delete:hover { color: #e83f5b; border-color: #e83f5b; }

.card-content { transition: opacity 0.2s; }
.card-content.muted { opacity: 0.4; pointer-events: none; }

.aiLabel { font-size: 10px; color: #a1a1aa; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
input[type=range] { -webkit-appearance: none; width: 100%; height: 4px; background: #3f3f46; border-radius: 2px; outline: none; margin-bottom: 15px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%; background: #4ade80; cursor: pointer; transition: 0.1s; }
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* Switch do Modo Cérebro */
.switch { position: relative; display: inline-block; width: 28px; height: 16px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #3f3f46; transition: .4s; border-radius: 16px; }
.slider:before { position: absolute; content: ""; height: 10px; width: 10px; left: 3px; bottom: 3px; background-color: #a1a1aa; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #e83f5b; }
input:checked + .slider:before { transform: translateX(12px); background-color: #fff; }

/* Fila e Logs */
#progress-container { width: 100%; height: 6px; background: #27272a; border-radius: 3px; margin-bottom: 15px; overflow: hidden; }
#progress-bar { height: 100%; width: 0%; background: #4ade80; transition: width 0.1s linear; }
.log-area { flex: 1; background: #000; border-radius: 12px; font-family: 'JetBrains Mono', monospace; font-size: 12px; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; border: 1px solid #27272a; }
.log-time { color: #52525b; font-weight: bold; margin-right: 6px; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 4px; }