/* RESET */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Segoe UI', sans-serif; background:#f0f2f5; color:#333; }

/* AUTH */
.auth-body { display:flex; justify-content:center; align-items:center; min-height:100vh; background:linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.auth-box { background:white; padding:30px; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,0.2); width:100%; max-width:380px; text-align:center; }
.auth-box h2 { color:#25D366; margin-bottom:20px; font-size:1.8rem; }
.auth-box input { width:100%; padding:14px; margin:10px 0; border:1px solid #ddd; border-radius:8px; font-size:1rem; }
.auth-box button { width:100%; padding:14px; background:#25D366; color:white; border:none; border-radius:8px; font-size:1rem; cursor:pointer; transition:0.3s; }
.auth-box button:hover { background:#1da851; }
.auth-box a { display:block; margin-top:15px; color:#25D366; text-decoration:none; font-size:0.95rem; }

/* DASHBOARD */
.container { max-width:1200px; margin:auto; padding:20px; }
h1 { color:#25D366; text-align:center; margin-bottom:20px; }
.nav { text-align:center; margin:15px 0; }
.nav a { color:#25D366; text-decoration:none; font-weight:bold; font-size:1.1rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; }
.card { background:white; border-radius:12px; padding:20px; box-shadow:0 4px 15px rgba(0,0,0,0.1); text-align:center; }
.status { font-weight:bold; margin:12px 0; font-size:1.1rem; }
.ready { color:#25D366; }
.connecting { color:#ff9800; }
.disconnected { color:#f44336; }
button { padding:10px 18px; border:none; border-radius:8px; cursor:pointer; font-weight:bold; transition:0.3s; margin:5px; }
.btn-reset { background:#ff9800; color:white; }
.btn-reset:hover { background:#f57c00; }
.btn-retry { background:#f44336; color:white; }
.btn-retry:hover { background:#d32f2f; }
.attempts { font-size:0.9rem; color:#777; }

/* LOGS */
.logs-body { background:#1e1e1e; color:#eee; }
#logContainer { background:#2d2d2d; padding:15px; border-radius:8px; height:65vh; overflow-y:auto; font-family:'Courier New', monospace; font-size:0.9rem; }
.log-line { margin:2px 0; white-space:pre-wrap; }
.timestamp { color:#94a3b8; }
.client { color:#60a5fa; font-weight:bold; }
.info { color:#ccc; }
.success { color:#4ade80; }
.error { color:#f87171; }
.qr { color:#fbbf24; }
.filters { text-align:center; margin:15px 0; }
.filters select, .filters input, .filters button { padding:8px; border-radius:6px; border:none; margin:0 5px; font-size:0.95rem; }

/* RESPONSIVE */
@media (max-width: 600px) {
  .auth-box { margin:20px; padding:25px; }
  .container { padding:15px; }
  .grid { grid-template-columns:1fr; }
  h1 { font-size:1.6rem; }
}