:root {
  color-scheme: dark;
  --bg: #111;
  --panel: rgba(17,17,17,.94);
  --line: rgba(255,255,255,.16);
  --text: #eee;
  --muted: #b6b6b6;
  --danger: #edb0a9;
}
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; background:#111 url('/assets/imagem.jpg') no-repeat center center fixed; background-size:cover; color:var(--text); font:15px/1.5 Arial,sans-serif; }
a { color:inherit; text-underline-offset:4px; }
a:hover { color:#fff; }
button,input,select,textarea { font:inherit; }
button,.button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:9px 16px; border:1px solid transparent; border-radius:5px; font-size:14px; font-weight:600; line-height:1.4; text-decoration:none; cursor:pointer; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.primary { background:#e6e6e6; color:#171717; border-color:#e6e6e6; }
.primary:hover { background:#fff; color:#111; border-color:#fff; }
.secondary { background:#252525; color:#eee; border-color:#555; }
.secondary:hover { background:#333; }
.subtle { min-height:32px; padding:4px 0; background:transparent; font-weight:400; color:inherit; }
.subtle:hover { text-decoration:underline; text-underline-offset:4px; }
.danger { color:var(--danger); }
.topbar { background:rgba(0,0,0,.82); border-bottom:1px solid var(--line); }
.topbar-inner { max-width:1440px; margin:auto; padding:18px 32px; display:flex; align-items:center; gap:30px; }
.brand { display:flex; align-items:center; gap:13px; text-decoration:none; color:#fff; flex-shrink:0; }
.brand strong { font-size:30px; line-height:1; }
.brand span { font-size:12px; line-height:1.35; }
.topbar nav { display:flex; align-items:center; gap:24px; margin-left:auto; font-size:14px; }
.topbar nav a { color:var(--muted); text-decoration:none; padding:8px 0; border-bottom:2px solid transparent; }
.topbar nav a:hover,.topbar nav a[aria-current=page] { color:#fff; border-bottom-color:#ddd; }
.account-menu { position:relative; margin-left:auto; font-size:13px; }
.topbar nav + .account-menu { margin-left:0; }
.account-menu > summary { padding:8px 0; cursor:pointer; max-width:190px; overflow-wrap:anywhere; }
.account-options { position:absolute; z-index:5; top:calc(100% + 8px); right:0; width:220px; padding:12px 16px; border:1px solid #555; border-radius:5px; background:#191919; box-shadow:0 8px 24px #0008; }
.account-options .muted { display:block; padding-bottom:10px; margin-bottom:6px; border-bottom:1px solid var(--line); font-size:12px; }
.account-options a,.account-options button { display:block; padding:8px 0; text-align:left; text-decoration:none; font-size:14px; }
.account-options a:hover { text-decoration:underline; }
.account-options form { margin:0; }
.skip-link { position:fixed; left:20px; top:-80px; z-index:10; padding:10px 16px; background:#fff; color:#111; }
.skip-link:focus { top:12px; }
.page { width:min(1180px,calc(100% - 64px)); margin:32px auto; flex:1; min-width:0; }
.panel { margin:0 0 22px; padding:24px; background:var(--panel); border:1px solid var(--line); border-radius:6px; }
.page-heading,.section-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; }
.page-heading { margin-bottom:24px; padding:14px 20px; background:rgba(0,0,0,.72); border-radius:5px; }
.section-heading { margin-bottom:18px; }
h1 { margin:0 0 22px; font-size:28px; font-weight:600; line-height:1.25; overflow-wrap:anywhere; }
h2 { margin:0; font-size:18px; font-weight:600; line-height:1.4; overflow-wrap:anywhere; }
.page-heading h1 { margin:0; }
p { margin:12px 0 18px; }
.muted,.hint { color:var(--muted); }
.hint { font-size:13px; line-height:1.5; }
.status { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); }
.status.active { color:#eee; }
.status.active::before { content:''; flex:0 0 5px; width:5px; height:5px; border-radius:50%; background:#ddd; }
.connection-status { color:#ddd; font-size:13px; text-align:right; }
.environment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.environment-card { margin:0; }
.row { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.metrics { color:var(--muted); margin:18px 0 24px; font-size:14px; }
.metrics span { padding:0 10px; }
.actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.actions form { margin:0; }
.compact { gap:8px 18px; font-size:13px; }
.compact .subtle { font-size:13px; }
.row-options { color:var(--muted); font-size:13px; }
.row-options summary { cursor:pointer; padding:6px 0; }
.row-options form { margin-top:8px; }
.table-wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; text-align:left; }
th { padding:10px 12px; border-bottom:1px solid #555; color:var(--muted); font-size:12px; font-weight:400; }
td { padding:16px 12px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; overflow-wrap:anywhere; }
th:first-child,td:first-child { padding-left:0; }
th:last-child,td:last-child { padding-right:0; }
tr:last-child td { border-bottom:0; }
td .hint { display:block; margin-top:4px; font-size:12px; }
.empty { color:var(--muted); text-align:center; padding:24px 12px; }
.activity-panel { padding:0; }
.activity-panel > summary { cursor:pointer; padding:20px 24px; font-size:15px; }
.activity-list { padding:0 24px 12px; list-style:none; margin:0; }
.activity-list li { display:flex; gap:10px 18px; flex-wrap:wrap; border-top:1px solid var(--line); padding:12px 0; font-size:13px; }
.activity-list time { color:var(--muted); font-size:12px; }
.form-panel { max-width:560px; margin:12px auto 24px; padding:30px; }
.field { margin:20px 0; }
.field label { display:block; margin-bottom:7px; font-size:14px; font-weight:600; }
input:not([type=checkbox]):not([type=hidden]),select,textarea { width:100%; min-height:42px; padding:10px 12px; border:1px solid #666; border-radius:4px; background:#171717; color:#eee; }
input[readonly] { font:13px/1.5 ui-monospace,monospace; }
input[type=checkbox] { accent-color:#d2d2d2; }
.helptext { margin-top:7px; color:var(--muted); font-size:12px; }
.helptext summary { cursor:pointer; }
.helptext ul { padding-left:18px; }
.errorlist { padding:10px 12px 10px 28px; color:#ffd3cc; border-left:2px solid #b37067; background:#372321; font-size:13px; }
.notice { margin:0 0 20px; padding:12px 16px; border-left:2px solid #aaa; background:#292929; color:#eee; font-size:14px; }
.back { display:inline-block; margin-bottom:18px; color:var(--muted); font-size:13px; }
.full { width:100%; margin-top:6px; }
.copy-field { display:flex; align-items:stretch; gap:8px; }
.copy-field input { min-width:0; }
.copy-field button { flex-shrink:0; }
.help-details { margin:22px 0; color:var(--muted); font-size:13px; }
.help-details summary { cursor:pointer; }
.help-details ol { padding-left:20px; }
.help-details li { margin:8px 0; }
#copy-status:empty { display:none; }
#copy-status { color:#eee; font-size:13px; }
.login-main { display:flex; align-items:center; justify-content:flex-end; }
.login-panel { width:400px; max-width:100%; margin:28px 0; padding:32px; background:rgba(17,17,17,.96); }
.login-panel h1 { font-size:24px; margin-bottom:26px; }
.login-panel .hint { margin:24px 0 0; font-size:12px; }
.monitor-main { width:min(1600px,calc(100% - 64px)); }
.controls { display:flex; align-items:center; flex-wrap:wrap; gap:16px 24px; padding:16px 20px; background:rgba(0,0,0,.78); }
.controls label { display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-size:14px; }
.controls input { width:16px; height:16px; margin:0; }
.controls #dynamicCheckboxes { display:flex; flex-wrap:wrap; gap:12px 20px; }
.controls #dynamicCheckboxes:not(:empty) { border-left:1px solid var(--line); padding-left:24px; }
.stream-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.stream { background:rgba(0,0,0,.78); border:1px solid var(--line); border-radius:6px; padding:14px; cursor:grab; }
.stream.locked { cursor:default; }
.stream h3 { margin:0 0 12px; font-size:16px; font-weight:600; overflow-wrap:anywhere; }
.stream video,.stream .placeholder { display:block; width:100%; border-radius:3px; background:#000; aspect-ratio:16/9; object-fit:contain; }
.stream[hidden],.stream .placeholder[hidden],#empty-streams[hidden] { display:none; }
#empty-streams { background:rgba(0,0,0,.72); padding:32px 20px; }
.sortable-ghost { opacity:.45; }
footer { padding:14px 24px; background:rgba(0,0,0,.72); color:#bbb; font-size:11px; text-align:center; }
footer span::before { content:'·'; margin:0 8px; }
@media (max-width:960px) {
  .topbar-inner { flex-wrap:wrap; gap:12px 24px; padding:16px 24px; }
  .topbar nav { order:3; width:100%; margin-left:0; gap:24px; }
  .topbar nav + .account-menu { margin-left:auto; }
  .page,.monitor-main { width:calc(100% - 40px); }
  .login-panel { width:380px; }
}
@media (max-width:640px) {
  body { background-attachment:scroll; }
  .topbar-inner { padding:16px 20px 10px; gap:10px 12px; }
  .brand { gap:10px; }
  .brand strong { font-size:26px; }
  .brand span { font-size:10px; }
  .topbar nav { gap:20px; font-size:13px; }
  .account-menu { font-size:12px; }
  .account-menu > summary { max-width:110px; }
  .page,.monitor-main { width:calc(100% - 28px); margin:20px auto; }
  h1 { font-size:23px; }
  .page-heading { padding:14px 16px; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
  .page-heading .button { min-height:36px; padding:7px 12px; font-size:13px; }
  .panel { padding:20px 16px; margin-bottom:16px; }
  .section-heading { gap:12px; }
  .section-heading .button { padding:8px 12px; font-size:13px; }
  .environment-grid,.stream-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .environment-card { margin:0; }
  .form-panel { padding:24px 20px; }
  .login-main { justify-content:center; }
  .login-panel { margin:12px 0; width:380px; }
  .login-page { background-position:43% center; }
  .responsive-table thead { display:none; }
  .responsive-table tbody,.responsive-table tr,.responsive-table td { display:block; width:100%; }
  .responsive-table tr { padding:14px 0; border-top:1px solid var(--line); }
  .responsive-table td { border:0; padding:4px 0; }
  .responsive-table td[data-label] { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
  .responsive-table td[data-label]::before { content:attr(data-label); min-width:56px; color:var(--muted); font-size:12px; }
  .responsive-table td.cell-name { font-size:15px; padding-bottom:10px; }
  .responsive-table td.cell-actions { margin-top:8px; }
  .responsive-table td.empty { padding:16px 0; }
  .activity-panel { padding:0; }
  .activity-panel > summary { padding:18px 16px; }
  .activity-list { padding:0 16px 10px; }
  .controls { gap:16px; }
  .controls #dynamicCheckboxes:not(:empty) { width:100%; border-left:0; border-top:1px solid var(--line); padding:16px 0 0; }
  .connection-status { text-align:left; }
}