body {
  background: var(--camara-bg);
  color: #17202a;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.app-navbar {
  background: var(--camara-primary);
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
.app-navbar .navbar-brand, .app-navbar .nav-link { color: #fff; }
.brand-logo { width: 36px; height: 36px; object-fit: contain; }
.app-shell { max-width: 1500px; padding: 28px; min-height: calc(100vh - 120px); }
.app-footer { padding: 18px 28px; color: #617080; text-align: center; }
.page-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:24px; }
.page-heading h1 { font-size: clamp(1.8rem, 3vw, 3rem); margin:0; color: var(--camara-primary); }
.eyebrow { color: var(--camara-secondary); font-weight: 800; text-transform: uppercase; font-size: .76rem; }
.panel, .metric, .auth-card, .vote-room {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(23,50,77,.1);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(23,50,77,.08);
  padding: 24px;
}
.panel h2 { font-size: 1.15rem; color: var(--camara-primary); margin-bottom: 18px; }
.metric-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:16px; }
.metric span { display:block; color:#6b7785; }
.metric strong { font-size:2rem; color:var(--camara-primary); }
.auth-wrap { min-height:70vh; display:grid; place-items:center; }
.auth-card { width:min(420px, 100%); }
.auth-card h1 { color:var(--camara-primary); }
.form-error { margin-top:8px; color:#b42318; font-weight:700; }
.status-pill { display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; background:rgba(47,111,109,.12); color:var(--camara-secondary); font-weight:800; }
.vote-room { display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center; }
.vote-copy h2 { font-size:2rem; color:var(--camara-primary); margin-top:14px; }
.vote-actions { display:grid; gap:14px; }
.vote-btn { border:0; border-radius:8px; color:#fff; font-size:1.6rem; font-weight:900; padding:28px; }
.vote-btn.yes { background:var(--vote-yes); }
.vote-btn.no { background:var(--vote-no); }
.vote-btn.abs { background:var(--vote-abs); color:#261f00; }
.vote-done { display:grid; place-items:center; gap:8px; color:var(--vote-yes); font-size:1.4rem; }
.vote-done i { font-size:4rem; }
.session-matter-list { display:grid; gap:12px; }
.session-matter { display:grid; grid-template-columns:52px 1fr; gap:14px; padding:16px; border:1px solid #e4ebf2; border-radius:8px; background:#fff; }
.session-matter p { margin:6px 0; color:#536273; }
.matter-order { width:42px; height:42px; display:grid; place-items:center; border-radius:8px; background:var(--camara-primary); color:#fff; font-weight:900; }
.empty-state { display:grid; place-items:center; text-align:center; min-height:260px; color:#657383; }
.empty-state i { font-size:4rem; }
.presence-grid, .councilor-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:14px; }
.presence-item { display:grid; gap:8px; background:#f7f9fb; padding:14px; border-radius:8px; }
.live-vote { display:flex; justify-content:space-between; align-items:center; gap:16px; background:#f7f9fb; padding:18px; border-radius:8px; }
.live-vote span { display:block; color:#6b7785; }
.score { display:flex; gap:10px; }
.score b { min-width:48px; min-height:48px; display:grid; place-items:center; background:#fff; border-radius:8px; color:var(--camara-primary); }
.timer-control-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
.timer-control { display:grid; gap:12px; background:#f7f9fb; border:1px solid #e4ebf2; border-radius:8px; padding:14px; }
.timer-control-head { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.timer-control-head span { color:#657383; font-weight:700; }
.timer-value { font-variant-numeric: tabular-nums; font-size:2.4rem; line-height:1; font-weight:900; color:var(--camara-primary); }
.timer-start-form { display:grid; grid-template-columns:1fr 110px auto; gap:8px; }
.timer-actions { display:flex; gap:8px; }
.timer-actions form { margin:0; }
.timer-finished .timer-value { color:var(--vote-no); }
.audit-line { display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid #edf1f5; }
.portal-links { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:14px; }
.portal-links a { background:#fff; color:var(--camara-primary); border-radius:8px; padding:22px; text-decoration:none; font-weight:800; box-shadow:0 12px 35px rgba(23,50,77,.08); }
.filters { display:grid; grid-template-columns: 1fr 180px 180px 120px; gap:12px; }
.councilor-card { background:#fff; border-radius:8px; padding:20px; box-shadow:0 14px 40px rgba(23,50,77,.08); }
.councilor-card img { width:88px; height:88px; object-fit:cover; border-radius:8px; }
.councilor-card h2 { font-size:1.2rem; margin:14px 0 2px; color:var(--camara-primary); }
.tv-screen { min-height:calc(100vh - 130px); background:linear-gradient(135deg, var(--camara-primary), #0d1f2e 58%, var(--camara-secondary)); color:#fff; border-radius:8px; padding:32px; overflow:hidden; }
.tv-header, .tv-main { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.tv-header img { width:72px; height:72px; object-fit:contain; }
.tv-header h1 { margin:0; font-size:2rem; }
.tv-clock { font-size:2.2rem; font-weight:900; }
.tv-main { margin:30px 0; align-items:stretch; }
.tv-main h2 { font-size:2.4rem; margin:18px 0 10px; }
.tv-main p { color:#dce6ef; font-size:1.15rem; max-width:820px; }
.tv-timer { margin:-8px 0 24px; display:flex; justify-content:space-between; align-items:center; gap:18px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); border-radius:8px; padding:18px 22px; }
.tv-timer span, .tv-timer em { display:block; color:#dce6ef; font-style:normal; font-weight:800; }
.tv-timer strong { display:block; font-size:4.4rem; line-height:1; font-variant-numeric:tabular-nums; }
.tv-timer.timer-finished { background:rgba(220,53,69,.24); outline:4px solid rgba(220,53,69,.45); }
.tv-score { display:grid; grid-template-columns: repeat(2, 150px); gap:12px; }
.tv-score div { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:8px; padding:16px; }
.tv-score strong { display:block; font-size:2.4rem; }
.tv-councilors { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:14px; }
.tv-person { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:8px; padding:14px; display:grid; gap:6px; }
.tv-person img, .avatar { width:60px; height:60px; border-radius:8px; object-fit:cover; background:#fff; color:var(--camara-primary); display:grid; place-items:center; font-weight:900; font-size:1.6rem; }
.tv-person em { font-style:normal; font-weight:900; }
.vote-favoravel { outline:3px solid var(--vote-yes); }
.vote-contrario { outline:3px solid var(--vote-no); }
.vote-abstencao { outline:3px solid var(--vote-abs); }
.vote-ausente, .vote-aguardando { opacity:.72; }
.tv-message { min-height:30px; color:#ffe8a3; font-weight:800; }
@media (max-width: 900px) {
  .app-shell { padding:18px; }
  .page-heading, .tv-header, .tv-main { flex-direction:column; align-items:flex-start; }
  .metric-grid, .portal-links, .vote-room, .filters, .timer-control-grid, .timer-start-form { grid-template-columns:1fr; }
  .tv-score { grid-template-columns: repeat(2, minmax(0, 1fr)); width:100%; }
  .tv-timer { flex-direction:column; align-items:flex-start; }
}