
:root{
  --bg:#0f1320; --card:#171a2b; --muted:#aab1d0; --border:#2a2f4a;
  --accent:#5b7cfa; --green:#19b36f; --purple:#8b65ff; --orange:#ff944d;
  --danger:#ff5c75; --white:#f4f6ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial; background:var(--bg); color:var(--white)}
.wrap{max-width:1280px; margin:0 auto; padding:18px}
.topbar{position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; background:#0d1020ee; backdrop-filter: blur(6px); border-bottom:1px solid var(--border)}
.topbar-left,.topbar-right{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.search{min-width:320px; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:#11142a; color:var(--white)}
.filter{padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:#11142a; color:var(--white)}
button{background:#1a2040; color:var(--white); border:1px solid var(--border); padding:10px 14px; border-radius:12px; cursor:pointer}
button:hover{background:#212856}
.btn-secondary{background:#12162c}
.btn-icon{background:#0f142e; border:1px solid var(--border); padding:6px 10px; border-radius:8px}
.edit-badge{opacity:.9; font-size:.95rem}
#cards{display:flex; flex-direction:column; gap:22px}
.card{width:100%; background:var(--card); border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:0 10px 36px rgba(0,0,0,.28)}
.card-header{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; color:#fff; font-weight:800; font-size:1.6rem; letter-spacing:.2px}
.card-sub{color:var(--muted); font-size:1rem; padding:0 18px 12px}
.card-actions{display:flex; gap:8px; padding:0 18px 12px; flex-wrap:wrap}
.card-body{padding:0 8px 14px}
.card-meta{display:grid; grid-template-columns:repeat(6, 1fr); gap:10px; padding:0 18px 12px}
.card-meta label{display:flex; flex-direction:column; gap:6px; font-size:.9rem; color:var(--muted)}
.card-meta input{padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#0f132a; color:var(--white)}
.card-meta input:disabled{opacity:.6; background:#0c0f22}
.card table{width:100%; border-collapse:separate; border-spacing:0; background:#0f1126; border:1px solid var(--border); border-radius:12px; overflow:hidden}
.card th,.card td{border-top:1px solid var(--border); padding:10px 12px; text-align:left; vertical-align:top; font-size:1rem}
.card th{color:var(--muted); font-weight:700; background:#0e1022; position:sticky; top:0}
.card th:nth-child(1){min-width:260px}
.editable{background:#0c0f22; border:1px solid var(--border); border-radius:8px; padding:6px}
.kids{background:linear-gradient(90deg,#1ad19a,#19b36f)}
.teens{background:linear-gradient(90deg,#a281ff,#8b65ff)}
.adult{background:linear-gradient(90deg,#ffad66,#ff944d)}
.unknown{background:linear-gradient(90deg,#99a3d5,#6a74a8)}
.modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6)}
.modal.hidden{display:none}
.modal-box{background:#0f1326; border:1px solid var(--border); border-radius:16px; padding:16px; width:min(1180px,96vw); max-height:84vh; overflow:auto}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:12px}
.import-resumo{margin-top:10px; color:#cfe3ff}
.painel-grid{display:grid; gap:12px; grid-template-columns:repeat(2,minmax(280px,1fr))}
.painel-card{background:#10142b; border:1px solid var(--border); border-radius:12px; padding:12px}
.painel-card h3{margin:0 0 8px 0; font-size:1.1rem; color:#e9edff}
.painel-card ul{margin:0; padding-left:18px}
.tag{display:inline-block; padding:2px 8px; border-radius:999px; background:#24305a; margin-left:6px; font-size:.85rem}
.badge{display:inline-block; padding:2px 8px; border-radius:6px; background:#4a2040}
