:root {
  --bg: #000000;
  --card: #0b0b0b;
  --accent: #3195de;
  --accent-hover: #4aa9f2;
  --muted: #b0b8c3;
  --text: #f2f6fa;
  --glass: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.06);
}

/* Reset / base */
* { box-sizing: border-box; transition: all .18s ease-in-out; }
html,body { height:100%; }
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, var(--bg) 0%, #0b0b0b 100%);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
}

/* generic layout */
.app { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
  padding: 26px;
  border-radius: 12px;
  max-width: 980px;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

/* brand */
header.brand { display:flex; gap:14px; align-items:center; margin-bottom:18px; }
.logo { width:56px; height:56px; border-radius:10px; overflow:hidden; box-shadow: 0 6px 18px rgba(49,149,222,0.14); }
.logo img{ width:100%; height:100%; object-fit:cover; display:block; }
h1.title{ margin:0; font-size:20px; color:var(--accent); letter-spacing:0.6px; }
p.lead{ margin:6px 0 12px; color:var(--muted); }

/* form */
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
label{ display:block; font-size:13px; margin-bottom:6px; color:var(--muted); }
input[type=text],input[type=email],input[type=password],select{
  width:100%; padding:12px; border-radius:10px; background:#0f0f0f; border:1px solid rgba(255,255,255,0.04); color:var(--text);
}
.btn{ display:inline-block; padding:10px 14px; border-radius:10px; background:var(--accent); color:#fff; border:0; font-weight:700; cursor:pointer; text-decoration:none; }
.btn:hover{ background:var(--accent-hover); }
.ghost{ background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--muted); padding:10px 12px; border-radius:10px; cursor:pointer; }

/* dashboard layout */
.dashboard{ display:grid; grid-template-columns:260px 1fr; gap:18px; }
nav.sidebar{ background:var(--card); padding:14px; border-radius:10px; }
nav.sidebar h3{ margin:0 0 10px 0; color:var(--accent); }
.menu{ list-style:none; padding:0; margin:0; }
.menu li{ padding:10px; border-radius:8px; color:var(--muted); }
.menu li a{ color:inherit; text-decoration:none; display:block; }
.menu li a:hover{ background:var(--glass); color:var(--text); }

/* main content */
.main{ padding:14px; background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); border-radius:10px; }
.controls{ display:flex; gap:12px; align-items:center; margin-bottom:12px; }

/* cameras */
.camera-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.camera{ background:#0d0d0d; padding:10px; border-radius:10px; }
.camera .placeholder{ height:130px; border-radius:8px; background: linear-gradient(180deg,#000,#0b0b0b); display:flex; align-items:center; justify-content:center; color:var(--muted); cursor:pointer; }

/* small utilities */
.muted{ color:var(--muted); font-size:13px; }
.row{ display:flex; gap:12px; align-items:center; }
.switch{ display:inline-flex; gap:8px; align-items:center; }

/* toast */
#fk-toast{ transition:opacity .3s ease; opacity:0; }

/*================ DESKTOP (TELAS GRANDES) ==================*/
@media (min-width: 768px) {
    body {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .app-screen {
        max-width: 420px;
        min-height: 90vh;
        border-radius: 20px;
        box-shadow: 0 0 30px rgba(0,0,0,0.6);
    }
    
    /* Grid do dashboard fica mais elegante */
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Cards mais espaçosos */
    .card-mobile {
        padding: 22px;
    }
}