:root{
  --bg-900:#0f172a;
  --grad-a:#0b1629; --grad-b:#0e2644; --grad-c:#163c66;
  --text:#e6edf3; --muted:#a9b4c3;
  --brand:#2f80ed; --brand-600:#2a74d6;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --font:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans";
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg-900);color:var(--text);font-family:var(--font);line-height:1.5}
.container{max-width:1120px;padding:0 24px;margin:0 auto}

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:#0c1324;border-bottom:1px solid rgba(255,255,255,.06)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;min-height:72px}
.brand{font-weight:800;letter-spacing:.08em;text-decoration:none;color:#eaf2ff;font-size:28px}

/* Hero */
.hero{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(47,128,237,.25), transparent 60%),
    linear-gradient(180deg, var(--grad-a) 0%, var(--grad-b) 55%, var(--grad-c) 100%);
  padding: clamp(56px, 10vw, 120px) 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hero__content{text-align:center}
.hero__title{font-size: clamp(28px, 4vw + 12px, 56px);margin:0 0 12px;font-weight:800;letter-spacing:.01em}
.hero__subtitle{margin:0 0 36px;color:var(--muted);font-size: clamp(16px, 1.2vw + 12px, 22px)}

/* CTAs */
.cta{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 22px;border-radius:var(--radius);text-decoration:none;font-weight:700;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  min-width:160px;box-shadow:var(--shadow);border:1px solid transparent
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{background:var(--brand-600)}
.btn--outline{background:#2b5e95;border-color:rgba(255,255,255,.18);color:#eaf2ff}
.btn--outline:hover{background:#2a5a8c;border-color:rgba(255,255,255,.22)}
.btn--ghost{background:#1a2740;border-color:rgba(255,255,255,.14);color:#eaf2ff}
.btn--ghost:hover{background:#1c2b48;border-color:rgba(255,255,255,.18)}

/* Footer */
.site-footer{background:#0c1324;color:#9fb1c7;font-size:14px;padding:28px 0;text-align:center;border-top:1px solid rgba(255,255,255,.06)}

@media (prefers-reduced-motion: reduce){ .btn{transition:none} }

/* --- Form/UI --- */
.section{padding:48px 0}
.card{background:#0f1a30;border:1px solid rgba(255,255,255,.06);border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.25);padding:28px}
.form{display:grid;gap:18px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){.grid-2{grid-template-columns:1fr}}
.label{font-weight:600;margin-bottom:6px;display:block}
.input,.select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0b1426;color:#e6edf3}
.input:focus,.select:focus{outline:3px solid rgba(47,128,237,.35);border-color:rgba(47,128,237,.55)}
.helper{color:#9fb1c7;font-size:12px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.badge{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;background:#13223d;border:1px solid rgba(255,255,255,.08);font-size:12px;color:#cdd8e6}

.field-msg{margin-top:6px;font-size:12px}
.field-msg.error{color:#ff8c8c}
.field-msg.ok{color:#7ddc7a}
.input.error,.select.error{border-color:#ff8c8c}
.input.ok,.select.ok{border-color:#52b36a}

/* =========================================================
   MEU PLANO — CÂMERAS
   Escopo forte: só aplica dentro de #meu-plano #cameras-lista
   ========================================================= */

/* Wrapper (grid de cartões) */
:is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista {
  display: grid;
  gap: 16px;
}

/* Cartão da câmera */
:is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista .cam-card {
  background: var(--cam-card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--cam-card-bd, rgba(255,255,255,0.07));
  border-radius: 12px;
  padding: 14px;
}

/* Cabeçalho do cartão (título + chips + botão Detalhes) */
:is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista .cam-header {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 10px;
}

:is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista .cam-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1.05rem;
}

/* Ponto de status • */
:is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista .status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #18c964; /* on */
  box-shadow: 0 0 0 3px rgba(24,201,100,0.15);
}

/* Chips (ex.: “rtmp”) */
:is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
}

/* Botões do cabeçalho (Detalhes) */
:is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista .btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: inherit;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
}

:is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista .btn--primary {
  border-color: rgba(59,130,246,.35);
  background: rgba(59,130,246,.12);
}

:is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista .btn--danger {
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
}

/* Área das ações (Rotacionar JWT / Excluir) */
:is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista .cam-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 14px 0;
}

/* Player */
:is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 54vh;      /* impede tomar a tela toda */
  background: #0b1220;   /* fallback ao carregar */
  border-radius: 10px;
  outline: 1px solid rgba(255,255,255,0.06);
}

/* Bloco recolhível (RTMP/JWT) com <details> */
:is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista details.cam-details {
  border: 1px dashed rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 8px 10px;
}

/* Esconde o marcador nativo e cria um caret custom */
:is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista details.cam-details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  user-select: none;
}
:is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista details.cam-details > summary::-webkit-details-marker { display:none; }

:is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista details.cam-details > summary::before {
  content: "▸";
  display: inline-block;
  transform: translateY(-1px) rotate(0deg);
  transition: transform .2s ease;
  opacity: .85;
}
:is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista details.cam-details[open] > summary::before {
  transform: translateY(-1px) rotate(90deg);
}

/* Conteúdo de detalhes (texto copiado de RTMP/JWT) */
:is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista .cam-details__code {
  margin-top: 8px;
  padding: 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .85rem;
  line-height: 1.4;
  color: #cfe7ff;
}

/* Responsividade */
@media (max-width: 560px) {
  :is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista {
    gap: 12px;
  }
  :is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista .cam-actions {
    gap: 8px;
  }
  :is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista .btn {
    padding: 8px 10px;
  }
}

/* === PATCH: Aliases for current HTML classes (27-08) === */
:is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista .cam-head {
  display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 10px;
}
:is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista .cam-name {
  display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.05rem;
}
:is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista .badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; padding: 4px 8px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.06);
}
:is(#meu-plano, body#meu-plano, main#meu-plano) #cameras-lista .dot {
  width: 9px; height: 9px; border-radius: 50%; background: #18c964; box-shadow: 0 0 0 3px rgba(24,201,100,0.15);
}