*{margin:0;padding:0;box-sizing:border-box}
body,html{font-family:Segoe UI,sans-serif;background:#111;color:#eee;height:100%;margin:0}
#app{height:100%;min-height:100vh}
.active{display:flex}
.error{color:#f66;font-size:.85rem;margin-top:8px}
#page-login{height:100vh;align-items:center;justify-content:center;background:#111}
.login-box{background:#1a1a1a;border:1px solid #333;border-top:3px solid #FEC708;padding:40px;border-radius:8px;width:340px;display:flex;flex-direction:column;gap:12px}
.logo{display:flex;flex-direction:column;align-items:center;margin-bottom:8px}
.logo-buzz{font-size:1.8rem;font-weight:800;color:#FEC708;letter-spacing:-1px}
.logo-control{font-size:.75rem;color:#888;letter-spacing:3px;text-transform:uppercase}
.login-box input{background:#222;border:1px solid #444;border-radius:6px;padding:10px 14px;color:#eee;font-size:.95rem;outline:none}
.login-box input:focus{border-color:#FEC708}
.login-box button{background:#FEC708;color:#111;font-weight:700;border:none;border-radius:6px;padding:11px;font-size:1rem;cursor:pointer;margin-top:4px}
.login-box button:hover{background:#e6b400}
#page-app{height:100vh;flex-direction:row}
#sidebar{width:220px;background:#1a1a1a;border-right:1px solid #2a2a2a;display:flex;flex-direction:column;padding:24px 0;gap:4px}
.sidebar-logo{padding:0 20px 24px;border-bottom:1px solid #2a2a2a;margin-bottom:8px}
.sidebar-logo .logo-buzz{font-size:1.3rem;font-weight:800;color:#FEC708}
.sidebar-logo .logo-control{display:block;font-size:.65rem;color:#666;letter-spacing:2px;text-transform:uppercase}
.nav-item{padding:10px 20px;color:#aaa;text-decoration:none;font-size:.9rem;transition:all .15s;display:flex;align-items:center;gap:8px}
.nav-item:hover{background:#222;color:#eee}
.nav-item.active{background:#2a2200;color:#FEC708;border-right:3px solid #FEC708}
#content{flex:1;overflow-y:auto;padding:32px;background:#111}
.section{display:none;flex-direction:column;gap:24px}
.section.active{display:flex}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.stat-card{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:8px;padding:20px}
.stat-card .label{font-size:.75rem;color:#666;text-transform:uppercase;letter-spacing:1px}
.stat-card .value{font-size:2rem;font-weight:700;color:#FEC708;margin-top:4px}
.stat-card .sub{font-size:.8rem;color:#555;margin-top:2px}
.section-header{display:flex;justify-content:space-between;align-items:center}
.section-header h2{font-size:1.2rem;font-weight:600}
.btn{background:#FEC708;color:#111;border:none;border-radius:6px;padding:8px 16px;font-weight:700;cursor:pointer;font-size:.85rem}
.btn:hover{background:#e6b400}
.btn-danger{background:#c0392b;color:#fff}
.btn-danger:hover{background:#a93226}
.btn-sm{padding:4px 10px;font-size:.78rem}
table{width:100%;border-collapse:collapse;background:#1a1a1a;border-radius:8px;overflow:hidden}
th{background:#222;color:#888;font-size:.75rem;text-transform:uppercase;letter-spacing:1px;padding:10px 14px;text-align:left}
td{padding:10px 14px;border-top:1px solid #222;font-size:.88rem}
tr:hover td{background:#1f1f1f}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.72rem;font-weight:600}
.badge-online{background:#0d3321;color:#2ecc71}
.badge-offline{background:#2a1a1a;color:#e74c3c}
.badge-never{background:#222;color:#666}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:100}
.modal{background:#1a1a1a;border:1px solid #333;border-top:3px solid #FEC708;border-radius:8px;padding:28px;width:420px;display:flex;flex-direction:column;gap:14px}
.modal h3{font-size:1.1rem;margin-bottom:4px}
.modal input,.modal select{background:#222;border:1px solid #444;border-radius:6px;padding:9px 12px;color:#eee;font-size:.9rem;width:100%;outline:none}
.modal input:focus,.modal select:focus{border-color:#FEC708}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
.btn-secondary{background:#333;color:#eee;border:none;border-radius:6px;padding:8px 16px;cursor:pointer;font-size:.85rem}
.upload-area{border:2px dashed #333;border-radius:8px;padding:32px;text-align:center;cursor:pointer;transition:border-color .2s}
.upload-area:hover{border-color:#FEC708}
.upload-area p{color:#666;font-size:.9rem}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.media-card{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:8px;overflow:hidden}
.media-thumb{width:100%;height:100px;object-fit:cover;background:#222;display:flex;align-items:center;justify-content:center;color:#444;font-size:2rem}
.media-info{padding:8px 10px}
.media-info .name{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-info .meta{font-size:.7rem;color:#555;margin-top:2px}

.login-card{display:flex;flex-direction:row;background:#1a1a1a;border-radius:16px;border:1px solid #2a2a2a;overflow:hidden;max-width:860px;width:90%;min-height:480px}.login-mascot{width:320px;min-width:320px;display:flex;align-items:flex-end;justify-content:center;background:#161616;padding:0}.login-mascot img{width:100%;max-height:440px;object-fit:contain;object-position:bottom}.login-form{flex:1;padding:48px 40px;display:flex;flex-direction:column;gap:10px}.login-logo img{height:56px;margin-bottom:8px}.login-form h2{font-size:1.6rem;font-weight:700;color:#fff;margin:0}.login-sub{color:#555;font-size:.88rem;margin-bottom:8px}.login-form label{font-size:.7rem;color:#666;letter-spacing:1.5px;text-transform:uppercase}.login-form input{background:#222;border:1px solid #333;border-radius:8px;padding:12px 14px;color:#eee;font-size:.95rem;outline:none}.login-form input:focus{border-color:#FEC708}.login-form button{background:#FEC708;color:#111;font-weight:700;border:none;border-radius:8px;padding:14px;font-size:1rem;cursor:pointer;margin-top:8px}.login-form button:hover{background:#e6b400}.sidebar-logo{padding:0 20px 24px;border-bottom:1px solid #2a2a2a;margin-bottom:8px;display:flex;flex-direction:column;gap:4px}.sidebar-sub{font-size:.65rem;color:#666;letter-spacing:2px;text-transform:uppercase}
.login-card{display:flex;flex-direction:row;background:#1a1a1a;border-radius:16px;border:1px solid #2a2a2a;overflow:hidden;max-width:860px;width:90%;min-height:480px}.login-mascot{width:320px;min-width:320px;display:flex;align-items:flex-end;justify-content:center;background:#161616;padding:0}.login-mascot img{width:100%;max-height:440px;object-fit:contain;object-position:bottom}.login-form{flex:1;padding:48px 40px;display:flex;flex-direction:column;gap:10px}.login-logo img{height:56px;margin-bottom:8px}.login-form h2{font-size:1.6rem;font-weight:700;color:#fff;margin:0}.login-sub{color:#555;font-size:.88rem;margin-bottom:8px}.login-form label{font-size:.7rem;color:#666;letter-spacing:1.5px;text-transform:uppercase}.login-form input{background:#222;border:1px solid #333;border-radius:8px;padding:12px 14px;color:#eee;font-size:.95rem;outline:none}.login-form input:focus{border-color:#FEC708}.login-form button{background:#FEC708;color:#111;font-weight:700;border:none;border-radius:8px;padding:14px;font-size:1rem;cursor:pointer;margin-top:8px}.login-form button:hover{background:#e6b400}.sidebar-logo{padding:0 20px 24px;border-bottom:1px solid #2a2a2a;margin-bottom:8px;display:flex;flex-direction:column;gap:4px}.sidebar-sub{font-size:.65rem;color:#666;letter-spacing:2px;text-transform:uppercase}
.report-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;padding:8px 0;}
.report-card{background:var(--card-bg,#1e1e1e);border:1px solid var(--border,#2a2a2a);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:12px;}
.report-card-icon{font-size:2rem;}
.report-card-title{font-size:1.1rem;font-weight:700;color:#fff;}
.report-card-desc{font-size:.85rem;color:#888;line-height:1.4;}
.report-form{display:flex;flex-direction:column;gap:10px;margin-top:4px;}
.report-form label{font-size:.75rem;color:#aaa;margin-bottom:2px;display:block;}
.report-form select,.report-form input[type="date"],.report-form input:not([type]){width:100%;background:#111;border:1px solid #333;border-radius:6px;color:#fff;padding:8px 10px;font-size:.9rem;box-sizing:border-box;}
.report-date-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* === Dashboard Melhorado === */
.dash-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.dash-header h2{margin:0;}
.dash-refresh{font-size:.8rem;color:#555;cursor:pointer;transition:color .2s;}
.dash-refresh:hover{color:#FEC708;}
.dash-live{font-size:.75rem;color:#4CAF50;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}

.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px;}
.kpi-card{background:#1e1e1e;border:1px solid #2a2a2a;border-radius:12px;padding:20px;position:relative;overflow:hidden;}
.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.kpi-terminals::before{background:#FEC708;}
.kpi-online::before{background:#4CAF50;}
.kpi-media::before{background:#2196F3;}
.kpi-companies::before{background:#9C27B0;}
.kpi-icon{font-size:1.5rem;margin-bottom:8px;}
.kpi-value{font-size:2.2rem;font-weight:800;color:#FEC708;line-height:1;}
.kpi-label{font-size:.75rem;color:#888;text-transform:uppercase;letter-spacing:1px;margin:4px 0;}
.kpi-sub{font-size:.75rem;color:#666;margin-top:6px;}
.kpi-bar{height:4px;background:#2a2a2a;border-radius:2px;margin:8px 0 4px;}
.kpi-bar-fill{height:100%;background:#FEC708;border-radius:2px;transition:width .5s;}

.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:768px){.dash-grid{grid-template-columns:1fr;}}
.dash-section{background:#1e1e1e;border:1px solid #2a2a2a;border-radius:12px;padding:16px;}
.dash-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.dash-section-header h3{margin:0;font-size:1rem;color:#ccc;}

.terminal-list{display:flex;flex-direction:column;gap:8px;}
.terminal-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;background:#161616;transition:background .2s;}
.terminal-row:hover{background:#222;}
.terminal-online{border-left:3px solid #4CAF50;}
.terminal-status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.dot-online{background:#4CAF50;box-shadow:0 0 6px #4CAF50;animation:pulse 2s infinite;}
.dot-offline{background:#f44336;}
.dot-never{background:#555;}
.terminal-info{flex:1;min-width:0;}
.terminal-name{font-size:.9rem;font-weight:600;color:#ddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.terminal-meta{font-size:.75rem;color:#666;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.terminal-badge{flex-shrink:0;}

.company-list{display:flex;flex-direction:column;gap:8px;}
.company-row{display:flex;align-items:center;justify-content:space-between;padding:10px;border-radius:8px;background:#161616;}
.company-name{font-size:.9rem;font-weight:600;color:#ddd;}
.empty-state{text-align:center;color:#444;font-size:.85rem;padding:20px;}

/* Correções de layout */
.page{display:none}
.page.active{display:flex}
#page-app.active{display:flex;flex-direction:row}
.section{display:none;flex-direction:column;gap:24px}
.section.active{display:flex}

.hidden{display:none!important}

/* Upload melhorado */
.upload-area { transition: border-color .2s, background .2s; }
.upload-area.drag-over { border-color: #FEC708; background: rgba(254,199,8,.06); }
.upload-area strong { color: #ccc; }
.media-card .video-thumb { background: #111; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.media-card .play-icon { font-size: 1.8rem; color: #FEC708; }
.media-card .video-label { font-size: .7rem; color: #666; text-transform: uppercase; letter-spacing: 1px; }
.media-card .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Dashboard timestamp */
.dash-refresh { cursor: pointer; color: #FEC708; font-size: .8rem; }
.dash-refresh:hover { text-decoration: underline; }