/* Kore-Edge — tema roxo escuro (modelo do Dashboard), o mesmo para todos */
:root {
  color-scheme: dark;
  --bg: #0b0a1c;
  --surface: #151230;
  --surface-2: #1b1838;
  --head: #221e44;
  --fg: #eeeaff;
  --muted: #aaa4cc;
  --line: #2e2856;
  --primary: #8a3dff;
  --primary-fg: #ffffff;
  --primary-soft: #2a1c58;
  --accent: #ff3ea5;
  --accent-fg: #ffffff;
  --ok: #23d68b;
  --ok-soft: #11331f;
  --warn: #ffae1f;
  --off: #6c6793;
  --rec: #ff4d5e;
  --teal: #1fd6c4;
  --blue: #3f7bff;
  --side: #0e0b24;
  --side-fg: #d3ccf3;
  --side-active: #ffffff;
  --side-hover: #1e1846;
  --code-bg: #231e46;
  --radius: 12px;
  --shadow: 0 6px 24px rgb(0 0 0 / 0.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--fg); font: 14px/1.45 "Fira Sans", "Segoe UI", system-ui, sans-serif; }
[hidden] { display: none !important; }
a { color: var(--primary); }
code, .mono { font: 12px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; }
code { background: var(--code-bg); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
/* Listas abertas dos seletores e textos de exemplo: no tema escuro o navegador desenhava a lista
   com fundo branco e o texto claro herdado (quase invisível) */
select { color-scheme: inherit; }
option, optgroup { background-color: var(--surface); color: var(--fg); }
option:disabled { color: var(--muted); }
::placeholder { color: var(--muted); opacity: 0.85; }
input:disabled, select:disabled { color: var(--muted); }
.hint { color: var(--muted); font-size: 12px; margin: 4px 0 0; }
.ok { color: var(--ok); }

/* ---------- botões e campos ---------- */
.btn { font: inherit; font-weight: 600; border: 1px solid var(--line); background: var(--surface); color: var(--fg); padding: 7px 14px; border-radius: 4px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover:not(:disabled) { border-color: var(--muted); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.btn.accent, .btn.danger { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn.ghost { background: transparent; }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn:disabled { opacity: 0.45; cursor: default; }
.icon-btn { width: 30px; height: 30px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--primary); cursor: pointer; padding: 0; }
.icon-btn:hover:not(:disabled) { border-color: var(--primary); }
.icon-btn:disabled { opacity: 0.4; cursor: default; }
.icon-btn svg, .btn svg { width: 16px; height: 16px; }

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.field > span small { font-size: 11px; }
.field input, .field select, input.line { font: inherit; width: 100%; padding: 6px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--fg); border-radius: 0; }
.field input:focus, input.line:focus { outline: none; border-bottom: 2px solid var(--primary); padding-bottom: 5px; }
.field input[readonly] { color: var(--muted); }
.check { display: flex; gap: 8px; align-items: center; font-weight: 500; cursor: pointer; }
.form-error { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); padding: 8px 10px; border-radius: 4px; margin: 0 0 12px; }

/* interruptor (ativar/desativar) */
.switch { position: relative; width: 34px; height: 18px; flex: none; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--off); border-radius: 9px; transition: background 0.15s; }
.switch span::after { content: ""; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform 0.15s; }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--surface); }
.login-card { width: 100%; max-width: 360px; }
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; justify-content: center; }
.login-brand b { display: block; font-size: 32px; line-height: 1; color: var(--primary); letter-spacing: -0.02em; }
.login-brand small { display: block; font-size: 14px; letter-spacing: 0.3em; color: var(--muted); margin-top: 4px; }
.logo-mark { width: 52px; height: 52px; border-radius: 14px; background: url("/admin/favicon.svg") center / cover no-repeat; }
.login-card .btn { margin-top: 4px; }

/* ---------- estrutura ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar { flex: none; width: 64px; background: var(--side); display: flex; flex-direction: column; padding: 6px 0; position: sticky; top: 0; height: 100vh; transition: width 0.15s; z-index: 5; }
.shell.expanded .sidebar { width: 190px; }
.side-item { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 22px; color: var(--side-fg); text-decoration: none; border: 0; background: none; font: inherit; cursor: pointer; white-space: nowrap; overflow: hidden; border-radius: 0 22px 22px 0; margin-right: 6px; }
.side-item svg { flex: none; width: 20px; height: 20px; }
.side-item span { opacity: 0; transition: opacity 0.1s; }
.shell.expanded .side-item span { opacity: 1; }
.side-item:hover { background: var(--side-hover); color: var(--side-active); }
.side-item.active { background: var(--primary); color: var(--side-active); }
.side-item.soon { opacity: 0.45; cursor: default; }
.side-item.soon:hover { background: none; color: var(--side-fg); }
.side-spacer { flex: 1; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0 18px 18px; }
.topbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 0 10px; }
.crumbs { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 600; min-width: 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--primary); }
.crumbs .sep { color: var(--muted); font-weight: 400; }
.crumbs b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statusbar { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); font-size: 13px; overflow: hidden; }
.statusbar span { padding: 6px 12px; border-left: 1px solid var(--line); white-space: nowrap; }
.statusbar span:first-child { border-left: 0; }
.statusbar b { color: var(--primary); font-weight: 500; }

.banner { padding: 10px 12px; border-radius: var(--radius); margin-bottom: 12px; }
.banner.error { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.banner.info { background: var(--primary-soft); color: var(--fg); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); }

/* abas no estilo de pastas */
.tabs { display: flex; gap: 2px; align-items: flex-end; overflow-x: auto; scrollbar-width: none; }
.tab { padding: 8px 18px; border: 1px solid var(--line); border-bottom: 0; background: var(--head); color: var(--fg); text-decoration: none; border-radius: 4px 4px 0 0; white-space: nowrap; font-weight: 500; }
.tab:hover { color: var(--primary); }
.tab.active { background: var(--surface); font-weight: 700; position: relative; top: 1px; }
.tab.soon { opacity: 0.5; pointer-events: none; }
.tab-add { margin-right: 14px; margin-bottom: 2px; padding: 6px 14px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 0 var(--radius) var(--radius) var(--radius); padding: 16px; box-shadow: var(--shadow); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.card h3 { margin: 0 0 10px; font-size: 15px; }
.section-title { font-size: 20px; font-weight: 400; margin: 22px 0 4px; }

/* ---------- lista de streams ---------- */
.toolbar { display: flex; gap: 10px; margin-bottom: 14px; }
.search { flex: 1; position: relative; }
.search input { width: 100%; font: inherit; padding: 7px 10px 7px 34px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--fg); }
.search svg { position: absolute; left: 10px; top: 9px; width: 16px; height: 16px; color: var(--muted); }
.table { border-top: 1px solid var(--line); }
.trow { display: grid; grid-template-columns: minmax(170px, 1.2fr) minmax(170px, 1.2fr) minmax(130px, 0.9fr) minmax(170px, 1.1fr) minmax(140px, 0.9fr) 116px; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); align-items: start; }
.trow.head { background: var(--head); font-weight: 700; padding-top: 12px; padding-bottom: 12px; border-bottom: 0; }
.trow.head > div + div { border-left: 1px solid var(--line); padding-left: 10px; margin-left: -10px; }
.cell { min-width: 0; font-size: 13px; line-height: 1.6; }
.cell .label { color: var(--fg); }
.cell .val { color: var(--muted); }
.stream-link { font-weight: 700; font-size: 14px; text-decoration: none; color: var(--primary); }
.stream-link:hover { text-decoration: underline; }
.url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.status-text.running { color: var(--ok); }
.status-text.waiting { color: var(--warn); }
.status-text.disabled { color: var(--muted); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--off); vertical-align: middle; }
.dot.running { background: var(--ok); }
.dot.waiting { background: var(--warn); }
.row-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.empty { padding: 36px 16px; text-align: center; color: var(--muted); }
.pager { display: flex; gap: 24px; align-items: center; padding: 14px 4px 0; color: var(--muted); }
.cell-label { display: none; }

@media (max-width: 1000px) {
  .trow.head { display: none; }
  .trow { grid-template-columns: 1fr auto; row-gap: 8px; }
  .trow > .cell:first-child { grid-column: 1; }
  .trow > .row-actions { grid-column: 2; grid-row: 1; align-self: start; }
  .trow > .cell:not(:first-child) { grid-column: 1 / -1; }
  .cell-label { display: inline; color: var(--muted); font-weight: 600; margin-right: 6px; }
}

/* ---------- página do stream ---------- */
.desc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 24px; }
.overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.overview > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.overview .card { min-width: 0; }
.player-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.video { width: 100%; aspect-ratio: 16 / 9; background: #000; display: block; border-radius: 2px; }
/* Como no Flussonic: altura limitada; em telas largas o vídeo fica centralizado com barras pretas */
.overview .video { max-height: min(400px, 45vh); object-fit: contain; }
.video.poster { position: relative; display: grid; place-items: center; width: 100%; border: 0; padding: 0; cursor: pointer; background: #000 center / contain no-repeat; }
.video.poster .play-btn { width: 68px; height: 68px; border-radius: 50%; background: rgb(255 255 255 / 0.88); box-shadow: 0 2px 12px rgb(0 0 0 / 0.35); position: relative; transition: transform 0.12s; }
.video.poster .play-btn::after { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #1c2433; }
.video.poster:hover .play-btn, .video.poster:focus-visible .play-btn { transform: scale(1.08); }
.gpu-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-bottom: 18px; }
.gpu-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: var(--surface); display: grid; gap: 10px; }
.gpu-head { display: flex; align-items: baseline; gap: 8px; }
.gpu-count { margin-left: auto; font-weight: 600; color: var(--primary); }
.gpu-meters { display: grid; gap: 6px; font-size: 12.5px; }
.gpu-meter { display: grid; grid-template-columns: 150px 1fr 44px; align-items: center; gap: 8px; }
.gpu-meter.muted { display: block; }
.gpu-meter .bar { height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.gpu-meter .bar i { display: block; height: 100%; background: var(--primary); }
.gpu-meter .bar i.hot { background: var(--rec); }
.gpu-meter b { text-align: right; }
.gpu-streams { display: flex; flex-wrap: wrap; gap: 6px; }
.gpu-streams a { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--line); color: inherit; text-decoration: none; }
.gpu-streams a:hover { background: var(--primary); color: #fff; }
.in-skip { color: var(--warn); }
.radio-row { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 8px; }
.warn-text { color: var(--warn); }
textarea.mono { font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; resize: vertical; }
.still-box { position: relative; }
.video.poster.still { cursor: default; transition: background-image 0.3s; }
.still-note { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 4px; padding: 10px 14px; border-radius: 6px; background: rgb(10 8 24 / 0.82); color: #f1eefc; font-size: 13px; line-height: 1.45; }
.still-note a { color: #c9b8ff; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin-top: 10px; }
.seg button { font: inherit; font-weight: 600; padding: 6px 16px; border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button.on { background: var(--primary); color: var(--primary-fg); }
.seg button:disabled { opacity: 0.45; cursor: default; }
.embed { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; margin-top: 6px; }
/* width: 0 tira a linha longa do cálculo de largura mínima da coluna */
.embed code { flex: 1; width: 0; min-width: 0; background: none; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.badge { display: inline-block; padding: 4px 26px; border-radius: 16px; border: 1px solid var(--line); font-weight: 500; }
.badge.running { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.badge.waiting { border-color: var(--warn); color: var(--warn); }
.badge.disabled { color: var(--muted); }
.metrics { display: flex; gap: 16px; color: var(--fg); }
.metrics span { display: inline-flex; align-items: center; gap: 6px; }
.metrics svg { width: 15px; height: 15px; color: var(--muted); }
.media-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.media-box { background: var(--surface-2); border-radius: 4px; padding: 12px; }
.media-box h4 { margin: 0 0 8px; font-size: 14px; font-weight: 500; display: flex; gap: 6px; align-items: center; }
.media-box h4 svg { width: 16px; height: 16px; color: var(--primary); }
.track { font-size: 12px; text-decoration: underline; display: block; }
.track.t-video { color: var(--primary); }
.track.t-audio { color: var(--accent); }
.chart svg { width: 100%; height: 160px; display: block; }
.chart .legend { display: flex; justify-content: center; gap: 18px; font-size: 12px; margin-bottom: 4px; }
.chart .legend i { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 5px; }
.chart .legend .mark { position: relative; width: 18px; height: 2px; background: var(--c); }
.chart .legend .mark::after { content: ""; position: absolute; left: 5px; top: -3px; width: 6px; height: 6px; border: 2px solid var(--c); border-radius: 50%; background: var(--surface); box-sizing: border-box; }
.footer-actions { display: flex; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 32px; max-width: 900px; }
.inputs-list .input-row { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.input-row .tag { flex: none; width: 70px; font-size: 12px; color: var(--muted); padding-bottom: 8px; }
.input-row .field { flex: 1; margin: 0; }
.url-list { display: grid; gap: 10px; max-width: 980px; }
.url-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.url-row .name { color: var(--muted); font-size: 13px; }
.url-row code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 6px 8px; }
.dvr-summary { display: flex; flex-wrap: wrap; gap: 8px 28px; }

.player-warn { color: var(--warn); margin: 6px 0 0; }
.tc-engine { font-size: 13px; color: var(--muted); max-width: 520px; }

/* Aba Saída: protocolos (Exceto / Somente) e push */
.proto-list { display: grid; }
.proto-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.proto-urls { display: grid; gap: 6px; min-width: 0; }
.proto-caption { font-size: 12px; color: var(--muted); }
.proto-url { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 4px; padding: 3px 4px 3px 8px; }
.proto-url code { background: none; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proto-url .icon-btn { border: 0; }
.proto-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--ok); border: 1px solid var(--ok); border-radius: 3px; padding: 1px 8px; white-space: nowrap; }
.proto-url.off { opacity: 0.55; }
.proto-url.off .proto-badge { color: var(--muted); border-color: var(--line); }
.proto-sw { display: inline-grid; grid-template-columns: auto 34px auto; align-items: center; border-radius: 4px; background: var(--head); font-size: 11px; overflow: hidden; width: max-content; }
.proto-sw button { font: inherit; border: 0; background: none; color: var(--muted); padding: 5px 8px; cursor: pointer; }
.proto-sw button.on { color: var(--primary-fg); background: var(--primary); }
.proto-sw .knob { height: 22px; background: var(--off); opacity: 0.45; }
.proto-sw.except .knob, .proto-sw.only .knob { opacity: 0.2; }
.push-title { margin-top: 26px; }
.push-table { display: grid; gap: 2px; overflow-x: auto; }
.push-row { display: grid; grid-template-columns: 52px minmax(220px, 3fr) minmax(70px, 0.8fr) minmax(70px, 0.8fr) minmax(60px, 0.7fr) minmax(110px, 1.6fr) minmax(130px, 1.4fr) auto; gap: 14px; align-items: end; min-width: 900px; }
.push-row > .switch { margin-bottom: 8px; }
.push-head { font-weight: 600; font-size: 13px; padding-bottom: 4px; align-items: center; }
.push-status { font-size: 13px; padding-bottom: 6px; min-width: 0; }
.push-err { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.push-actions { display: flex; gap: 4px; padding-bottom: 6px; }
.push-item .in-options { margin: 6px 0 8px 66px; }
.push-new { padding-top: 6px; }
.push-new input { grid-column: 2 / 7; }

/* Aba Entrada */
.in-row { border-bottom: 1px solid var(--line); padding: 10px 0 12px; }
.in-head { display: grid; grid-template-columns: 110px 34px minmax(0, 1fr) auto auto; gap: 12px; align-items: end; }
.in-status { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; font-size: 13px; }
.in-st { font-weight: 600; }
.in-st.running { color: var(--ok); }
.in-st.starting { color: var(--warn); }
.in-st.failed { color: var(--accent); }
.in-st.standby { color: var(--muted); }
.in-order { display: flex; flex-direction: column; padding-bottom: 4px; }
.in-order .link-btn { padding: 0 4px; font-size: 12px; line-height: 1.3; }
.in-url { margin: 0; }
.in-head > .link-btn { padding-bottom: 8px; }
.in-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 18px; margin: 10px 0 0 156px; padding: 10px 14px 0; background: var(--surface-2); border-radius: 4px; }
.in-analysis { margin: 8px 0 0 156px; font-size: 13px; }
.in-metrics { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--muted); }
.in-metrics b { color: var(--fg); font-weight: 500; }
.in-tracks { border-collapse: collapse; margin-top: 8px; font-size: 12px; width: 100%; max-width: 820px; }
.in-tracks th, .in-tracks td { text-align: left; padding: 4px 10px 4px 0; border-bottom: 1px solid var(--line); }
.in-tracks th { color: var(--muted); font-weight: 500; }
.in-programs { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.in-programs .chip.on { background: var(--ok-soft); color: var(--ok); }
.in-programs .chip .link-btn { width: auto; height: auto; border-radius: 0; background: none; color: var(--primary); font-size: 12px; padding: 0 4px; }
.in-error { color: var(--warn); overflow-wrap: anywhere; }
.in-new { max-width: 720px; margin: 16px 0 6px 156px; }
@media (max-width: 760px) {
  .in-head { grid-template-columns: 1fr auto auto; }
  .in-status, .in-order { grid-column: 1 / -1; flex-direction: row; gap: 10px; padding: 0; }
  .in-options, .in-analysis, .in-new { margin-left: 0; }
}

/* Pulse */
.pulse-actions { margin: 4px 0 8px; }
.pulse section h2 { font-size: 22px; font-weight: 400; margin: 20px 0 6px; }
.pulse-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.pulse-pair p { margin: 0 0 6px; font-size: 13px; }
.pulse-chart { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--surface); }
.pulse-chart svg { display: block; width: 100%; height: auto; }

/* Config */
.config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 13px; }
.kv span { color: var(--muted); }
.kv b { font-weight: 500; overflow-wrap: anywhere; }
pre.code { background: var(--code-bg); padding: 10px 12px; border-radius: 4px; font: 12px/1.5 ui-monospace, Consolas, monospace; overflow-x: auto; }
textarea.editor { width: 100%; min-height: 60vh; font: 13px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); color: var(--fg); resize: vertical; tab-size: 2; }
textarea.editor:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.trow.bk { grid-template-columns: minmax(200px, 1.5fr) 170px 100px 110px; align-items: center; }
.trow.ev { grid-template-columns: 160px 70px 150px 110px minmax(200px, 3fr); }
.lvl { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: var(--head); }
.lvl.warning { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.lvl.error { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.toolbar select { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--fg); }
@media (max-width: 1000px) {
  .trow.bk, .trow.ev { grid-template-columns: 1fr; }
}

/* IPTV e sessões */
.trow.iptv-user { grid-template-columns: minmax(130px, 1fr) minmax(150px, 1.2fr) 110px minmax(200px, 2fr) 210px; align-items: center; }
.trow.iptv-pkg { grid-template-columns: minmax(150px, 1fr) minmax(260px, 3fr) 120px; align-items: center; }
.trow.sess { grid-template-columns: 130px 130px minmax(160px, 2fr) 90px 160px 90px; }
.trow.iptv-user .row-actions, .trow.iptv-pkg .row-actions { gap: 12px; font-size: 13px; font-weight: 600; }
input.line[readonly] { color: var(--fg); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 32px; border-bottom: 1px solid var(--line); padding: 3px 0; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--head); border-radius: 14px; padding: 2px 4px 2px 10px; font-size: 13px; }
.chip button { border: 0; background: var(--off); color: #fff; width: 16px; height: 16px; border-radius: 50%; font-size: 12px; line-height: 1; cursor: pointer; padding: 0; }
.chips select { font: inherit; font-size: 13px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
@media (max-width: 1000px) {
  .trow.iptv-user, .trow.iptv-pkg, .trow.sess { grid-template-columns: 1fr; }
  .trow.iptv-user > .row-actions, .trow.iptv-pkg > .row-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}

/* transcodificador */
.tc-card { margin-bottom: 16px; box-shadow: 0 2px 6px rgb(15 31 92 / 0.08); }
.tc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 12px; }
.tc-head h3 { margin: 0; font-size: 22px; font-weight: 400; }
.tc-head .grow, .tc-track-head .grow { flex: 1; }
.tc-copy { font-size: 13px; font-weight: 400; }
.tc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 22px; }
.tc-fields .field select { font: inherit; width: 100%; padding: 6px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--fg); }
.tc-track { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px 0; margin-top: 12px; box-shadow: var(--shadow); }
.tc-track-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.tc-track-head b { font-size: 15px; }
.tc-status { font-size: 12px; }
.tc-off { max-width: 640px; }
.tc-off p { margin-top: 0; }
.link-btn { font: inherit; font-weight: 600; font-size: 13px; border: 0; background: none; color: var(--primary); cursor: pointer; padding: 2px 4px; }
.link-btn.danger { color: var(--accent); }
.link-btn:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 1100px) {
  .overview { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .main { padding: 0 10px 10px; }
  .sidebar { width: 52px; }
  .side-item { padding: 0 16px; }
  .crumbs { font-size: 18px; }
  .statusbar { font-size: 12px; }
  .statusbar span { padding: 5px 8px; }
  .panel { padding: 12px; }
  .media-boxes { grid-template-columns: 1fr; }
  .url-row { grid-template-columns: 1fr auto; }
  .url-row .name { grid-column: 1 / -1; }
  .proto-row { grid-template-columns: 1fr; gap: 6px; }
  .proto-url { grid-template-columns: minmax(0, 1fr) auto; }
  .proto-badge { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- player do DVR ---------- */
.dvr { background: #000; border-radius: 2px; overflow: hidden; color: #fff; user-select: none; }
.dvr-screen { position: relative; }
.dvr-screen .video { border-radius: 0; }
.dvr-badge { position: absolute; left: 10px; top: 10px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 3px; background: var(--rec); letter-spacing: 0.04em; }
.dvr-badge.archive { background: rgb(255 255 255 / 0.85); color: #000; }
.dvr-timeline { position: relative; height: 46px; margin: 0 12px; cursor: pointer; }
.dvr-ticks { position: absolute; inset: 0 0 auto 0; height: 26px; }
.dvr-tick { position: absolute; top: 4px; font-size: 11px; transform: translateX(-50%); white-space: nowrap; color: #e6e6e6; }
.dvr-tick::after { content: ""; position: absolute; left: 50%; top: 18px; width: 1px; height: 6px; background: #888; }
.dvr-tick.day { font-weight: 700; color: #fff; }
.dvr-track { position: absolute; left: 0; right: 0; top: 30px; height: 5px; background: #555; }
.dvr-range { position: absolute; top: 0; height: 100%; background: var(--rec); }
.dvr-sel { position: absolute; top: -4px; height: 13px; background: rgb(255 255 255 / 0.35); border: 1px solid #fff; }
.dvr-cursor { position: absolute; top: 24px; width: 2px; height: 17px; background: #fff; transform: translateX(-1px); }
.dvr-hover { position: absolute; top: -2px; font-size: 11px; background: #fff; color: #000; padding: 1px 5px; border-radius: 3px; transform: translateX(-50%); pointer-events: none; white-space: nowrap; }
.dvr-controls { display: flex; align-items: center; gap: 4px; padding: 4px 8px 8px; }
.dvr-controls button { width: 30px; height: 28px; display: grid; place-items: center; border: 0; background: none; color: #fff; cursor: pointer; border-radius: 3px; padding: 0; }
.dvr-controls button:hover { background: rgb(255 255 255 / 0.12); }
.dvr-controls button.on { background: rgb(255 255 255 / 0.22); }
.dvr-controls svg { width: 18px; height: 18px; }
.dvr-controls .grow { flex: 1; }
.dvr-controls .time { font: 12px ui-monospace, Consolas, monospace; color: #ddd; padding: 0 6px; }
.dvr-controls input[type="datetime-local"] { font: 12px inherit; background: #222; color: #fff; border: 1px solid #555; border-radius: 3px; padding: 2px 4px; color-scheme: dark; }
.dvr-export { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: #1b1b1b; font-size: 13px; border-top: 1px solid #333; }
.dvr-export .btn { font-size: 12px; padding: 4px 10px; }

/* ---------- diálogos e avisos ---------- */
.dialog { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--fg); padding: 22px; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.dialog.wide { width: min(900px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgb(10 16 38 / 0.5); }
.dialog h2 { margin: 0 0 16px; font-size: 18px; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.dialog-head h2 { margin: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.toast { position: fixed; right: 18px; bottom: 18px; background: var(--fg); color: var(--surface); padding: 10px 16px; border-radius: 6px; box-shadow: 0 6px 20px rgb(0 0 0 / 0.2); z-index: 50; max-width: calc(100vw - 36px); }
.toast.error { background: var(--accent); color: #fff; }

/* ---------- lista de streams (modos, ordenação, filtros, seleção) ---------- */
.list-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.list-toolbar .search { flex: 1 1 240px; min-width: 200px; }
.view-group { display: inline-flex; gap: 6px; }
.view-btn.on { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.sort-wrap { position: relative; }
.filter-label { font-weight: 600; font-size: 13px; white-space: nowrap; }
.chip-btn { font: inherit; font-size: 13px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); padding: 5px 10px; border-radius: 4px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.chip-btn.on { border-color: var(--primary); background: var(--primary-soft); }
.funnel { padding: 7px 10px; }
.list-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 0 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.menu-pop { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.16); padding: 6px 0; min-width: 200px; }
.menu-group { font-weight: 700; font-size: 13px; padding: 8px 14px 2px; border-top: 1px solid var(--line); }
.menu-group:first-child { border-top: 0; }
.menu-radio { display: flex; gap: 8px; align-items: center; padding: 5px 14px; font-size: 13px; cursor: pointer; }
.menu-pop > .link-btn { margin: 4px 14px 2px; }
.menu-pop a[role="menuitem"], .menu-pop button[role="menuitem"] { display: block; width: 100%; text-align: left; padding: 7px 14px; background: none; border: 0; font: inherit; font-size: 13px; color: var(--fg); cursor: pointer; text-decoration: none; }
.menu-pop a[role="menuitem"]:hover, .menu-pop button[role="menuitem"]:hover:not(:disabled) { background: var(--head); }
.dot.failed { background: var(--accent); }
.status-text.failed { color: var(--accent); }
.in-dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.info-i { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--primary); color: var(--primary-fg); font: italic 700 10px/1 Georgia, serif; cursor: help; vertical-align: middle; }
.trow.sel-row, .trow.expanded-row { grid-template-columns: 26px minmax(150px, 1.1fr) minmax(170px, 1.2fr) minmax(150px, 1fr) minmax(120px, 0.8fr) minmax(170px, 1fr) 116px; }
.trow.selected { background: var(--primary-soft); }
.sel-cell { padding-top: 2px; }
.sel { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.more-btn { padding: 0; font-weight: 600; }
.trow.compact { grid-template-columns: 26px minmax(130px, 1fr) minmax(250px, 1.7fr) minmax(110px, 0.9fr) 80px minmax(80px, 0.6fr) 116px 30px; align-items: center; padding-top: 7px; padding-bottom: 7px; }
.trow.head.compact { padding-top: 10px; padding-bottom: 10px; }
.cell.one { display: flex; gap: 10px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.state-ico { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--off); }
.state-ico.running { border-color: var(--ok); }
.state-ico.waiting { border-color: var(--warn); }
.state-ico.failed { border-color: var(--accent); }
.in-chip { display: inline-flex; gap: 6px; align-items: center; background: var(--surface-2); border-radius: 12px; padding: 2px 8px 2px 2px; max-width: 170px; min-width: 0; }
.in-chip b { flex: none; background: var(--off); color: #fff; border-radius: 50%; width: 17px; height: 17px; font-size: 10px; display: grid; place-items: center; }
.in-chip.on b { background: var(--ok); }
.in-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mini { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; color: var(--muted); }
.mini svg { width: 14px; height: 14px; }
.icon-btn.chevron { border: 0; background: none; color: var(--fg); }
.compact-group { border-bottom: 1px solid var(--line); }
.compact-group > .trow.compact { border-bottom: 0; }
.trow.expanded-row { background: var(--surface-2); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.scard { background: #23262d; border-radius: 4px; color: #fff; position: relative; }
.scard-thumb { position: relative; aspect-ratio: 16 / 9; background: #33363d center / cover no-repeat; border-radius: 4px 4px 0 0; overflow: hidden; }
.scard.disabled .scard-thumb { background-image: repeating-conic-gradient(#2c2f36 0 25%, #1c1e23 0 50%); background-size: 22px 22px; }
.scard .badge { position: absolute; left: 8px; top: 8px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 10px; background: #6b7280; color: #fff; }
.scard .badge.running { background: #12945c; }
.scard .badge.waiting { background: #b07800; }
.scard .badge.failed { background: #c2255c; }
.scard-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border-radius: 50%; border: 2px solid #fff; background: rgb(0 0 0 / 0.35); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 20px; }
.scard-play:disabled { cursor: default; opacity: 0.7; }
.scard-play .tri { border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; margin-left: 4px; }
.scard-stats { position: absolute; right: 8px; bottom: 8px; display: grid; gap: 4px; justify-items: end; font-size: 11px; }
.scard-stats span { background: rgb(0 0 0 / 0.6); padding: 1px 6px; border-radius: 8px; display: inline-flex; gap: 4px; align-items: center; }
.scard-stats svg { width: 12px; height: 12px; }
.scard .in-dots { position: absolute; left: 8px; bottom: 8px; }
.scard-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 8px; position: relative; font-size: 13px; font-weight: 600; }
.scard-foot a { color: #fff; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scard-menu { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #fff; color: #23262d; cursor: pointer; font-weight: 700; line-height: 1; }
.scard .menu-pop { left: auto; right: 4px; min-width: 150px; }
.bulk-bar { display: flex; gap: 12px; align-items: center; background: var(--head); padding: 12px 16px; }
.bulk-bar .grow { flex: 1; }
.pager label { display: inline-flex; gap: 8px; align-items: center; }
.pager select { font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--fg); }
.pager .link-btn { font-size: 18px; padding: 0 6px; }
.bulk-note { margin: 0 0 12px; }
.bulk-list { display: flex; flex-wrap: wrap; gap: 8px; }
.bulk-chip { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 3px 10px; text-decoration: none; color: var(--fg); font-size: 13px; }
.bulk-chip small { color: var(--muted); }
@media (max-width: 640px) {
  .trow.sel-row, .trow.expanded-row { grid-template-columns: 1fr auto; }
  .trow.sel-row > .sel-cell, .trow.expanded-row > div:first-child, .trow.compact > .sel-cell { display: none; }
  .trow.sel-row > .cell:nth-child(2), .trow.expanded-row > .cell:nth-child(2) { grid-column: 1; }
  .trow.sel-row > .row-actions, .trow.expanded-row > .row-actions { grid-column: 2; grid-row: 1; align-self: start; }
  .trow.sel-row > .cell:nth-child(n+3), .trow.expanded-row > .cell:nth-child(n+3) { grid-column: 1 / -1; }
  .trow.compact { grid-template-columns: 1fr auto auto; }
  .trow.compact > .cell.one:nth-child(n+3) { display: none; }
  .list-toolbar .filter-label { display: none; }
}

/* ---------- aba Transcoder (layout do Flussonic) ---------- */
.tc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 22px; align-items: end; margin-bottom: 6px; }
.tc-field > span { white-space: nowrap; }
.tc-field .unit { display: flex; align-items: center; gap: 6px; }
.tc-field .unit input { flex: 1; min-width: 0; }
.tc-check { display: inline-flex; gap: 6px; align-items: center; padding-bottom: 8px; font-size: 13px; }
.color-field { display: flex; gap: 8px; align-items: center; }
.color-field input[type="color"] { width: 30px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; flex: none; }
.color-field input:not([type="color"]) { flex: 1; min-width: 0; }
.tc-track-head .icon-btn.chevron svg { width: 16px; height: 16px; }
.tc-logo { display: grid; grid-template-columns: auto minmax(220px, 3fr) minmax(120px, 1fr) 70px 70px auto; gap: 4px 16px; align-items: end; margin: 10px 0 4px; }
.tc-logo > .btn { margin-bottom: 6px; }
.tc-logo > .link-btn { padding-bottom: 8px; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.tc-extended { margin-top: 10px; display: grid; gap: 6px; }
.tc-kv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24px; gap: 16px; align-items: end; }
.tc-kv input { font: inherit; width: 100%; padding: 6px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--fg); }
.tc-advanced { border: 1px solid var(--line); border-radius: 4px; margin: 8px 0 12px; padding: 0 12px; box-shadow: 0 1px 3px rgb(0 0 0 / 0.06); }
.tc-adv-head { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: 0; font: inherit; font-weight: 600; color: var(--fg); padding: 10px 0; cursor: pointer; }
.tc-adv-head svg { width: 16px; height: 16px; }
.split-btn { position: relative; display: inline-flex; }
.split-btn > .btn:first-child { border-radius: 4px 0 0 4px; }
.split-btn > .btn.caret { border-radius: 0 4px 4px 0; border-left: 1px solid rgb(255 255 255 / 0.35); padding: 7px 10px; }
.preset-pop { left: auto; right: 0; min-width: 150px; }
.tc-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.tc-actions .grow { flex: 1; }
@media (max-width: 640px) {
  .tc-logo { grid-template-columns: 1fr 1fr; }
}

/* ---------- Templates ---------- */
.tpl-row { grid-template-columns: minmax(180px, 1.3fr) minmax(160px, 1.2fr) minmax(150px, 1fr) minmax(130px, 1fr) minmax(110px, 0.8fr); }
.tpl-prefixes { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0; }
.tpl-card { max-width: 720px; margin-bottom: 18px; box-shadow: 0 2px 6px rgb(0 0 0 / 0.12); }
.card .tpl-title, .tpl-card h3.tpl-title { font-size: 24px; font-weight: 400; margin: 0 0 6px; }
.tpl-card .field { margin-bottom: 10px; }
.tpl-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-bottom: 1px solid var(--line); padding: 4px 0; }
.tpl-chips input { flex: 1; min-width: 160px; border: 0; background: transparent; color: var(--fg); font: inherit; padding: 4px 0; }
.tpl-field { margin-top: 6px; max-width: 420px; }
/* tela de criação (#/create?entity=…), no layout do Flussonic */
.tab-plus { min-width: 48px; text-align: center; font-weight: 700; margin-right: 14px; }
.create-box { background: var(--surface-2); padding: 14px 16px 18px; border-radius: 2px; }
.create-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 420px)); gap: 6px 16px; }
.create-field { display: grid; gap: 4px; align-content: start; }
.create-label { font-size: 12px; font-weight: 500; }
.create-input { position: relative; display: block; }
.create-input input { width: 100%; height: 32px; padding: 0 30px 0 10px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); color: var(--fg); font: inherit; box-sizing: border-box; }
.create-input input:focus { outline: none; border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.create-input .info-i { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.create-required { color: var(--accent); font-size: 11px; }
.create-error { color: var(--accent); font-size: 13px; margin: 10px 0 0; }
.create-actions { display: flex; gap: 6px; margin-top: 18px; }
.create-btn { min-width: 100px; justify-content: center; background: var(--head); border-color: var(--head); color: var(--muted); font-size: 13px; }
.create-btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.create-btn:disabled { opacity: 1; color: color-mix(in srgb, var(--muted) 60%, transparent); }
@media (max-width: 760px) {
  .tpl-row { grid-template-columns: 1fr; }
}

/* ---------- Sources ---------- */
.src-row { grid-template-columns: minmax(220px, 1fr) auto; align-items: center; }
.src-actions { display: flex; gap: 18px; align-items: center; justify-content: flex-end; }
.src-mode { display: flex; gap: 12px; align-items: center; font-size: 13px; }
.src-mode .check { display: inline-flex; gap: 5px; align-items: center; }
.src-form { display: grid; gap: 16px; max-width: 840px; margin-bottom: 18px; }
.src-field { display: grid; gap: 6px; }
.src-label { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.src-input { position: relative; }
.src-input > input, .src-input > .chips { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); color: var(--fg); font: inherit; min-height: 34px; padding: 3px 32px 3px 10px; }
.src-input > .chips { border-bottom: 1px solid var(--line); }
.src-input > .info-i { position: absolute; right: -26px; top: 50%; transform: translateY(-50%); }
.src-streams { max-width: 840px; }

/* ---------- VODs ---------- */
.vod-row { grid-template-columns: minmax(180px, 1fr) minmax(200px, 2fr) auto; align-items: center; }
.vod-actions { display: flex; justify-content: flex-end; }
.vod-open-title { margin-top: 26px; }
.vod-open-row { grid-template-columns: 1fr 1fr 2fr 100px; }
.vod-head { display: flex; gap: 10px; align-items: center; }
.vod-head .tpl-title { margin: 0; }
.vod-storages { display: grid; gap: 12px; }
.vod-storage-row { display: flex; gap: 40px; align-items: center; }
.vod-storage-row .src-input { flex: 1; }
.danger-icon { color: var(--accent); font-size: 16px; border: 0; background: none; margin-left: -22px; }
.radio-row { display: flex; gap: 18px; }
.radio-row .check { display: inline-flex; gap: 6px; align-items: center; }
.line-input input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--fg); font: inherit; padding: 8px 30px 8px 0; box-sizing: border-box; }
.line-input .info-i { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.vod-back { display: inline-block; margin: 14px 0 22px; }
.vod-path { color: var(--muted); font-size: 13px; padding: 6px 0; border-bottom: 1px dotted var(--line); margin-bottom: 18px; }
.vod-newdir { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.vod-newdir input, .vod-tree + input, .panel > div > input.line { flex: 1; }
.vod-tree { display: grid; gap: 2px; margin-top: 14px; }
.vod-entry { display: grid; grid-template-columns: 24px 1fr auto auto; gap: 12px; align-items: center; padding: 6px 6px; border-radius: 4px; }
.vod-entry:hover { background: var(--surface-2); }
.vod-ico { text-align: center; }

/* ---------- Multiplexers ---------- */
.create-suffix { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); font-size: 13px; }
.mux-page { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2.2fr); gap: 16px; align-items: start; }
.mux-col { background: var(--surface-2); padding: 14px 16px; border-radius: 3px; display: grid; gap: 12px; }
.mux-col > h3 { margin: 0; }
.mux-search { width: 100%; box-sizing: border-box; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); color: var(--fg); font: inherit; }
.mux-streams { display: grid; gap: 6px; }
.mux-stream { background: var(--surface); padding: 10px 14px; border-radius: 3px; }
.mux-stream-head { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.mux-used { font-size: 12px; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.mux-cards { display: grid; gap: 14px; }
.mux-card { padding: 14px 16px; }
.mux-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.mux-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mux-ico { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: var(--primary-fg); display: inline-grid; place-items: center; font-size: 12px; }
.mux-status { font-size: 12px; width: 100%; }
.mux-add select { min-width: 200px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--fg); font: inherit; padding: 6px 0; }
.mux-section { background: var(--surface-2); border-radius: 3px; padding: 0 14px; margin-bottom: 10px; }
.mux-grid6 { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px 14px; padding: 6px 0 12px; border-bottom: 1px solid var(--line); }
.mux-field { display: grid; gap: 5px; font-size: 12px; }
.mux-field .create-input input, .mux-field select { width: 100%; height: 32px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); color: var(--fg); font: inherit; padding: 0 28px 0 8px; }
.mux-field input:disabled, .mux-field select:disabled { opacity: 0.55; }
.mux-wide { grid-column: span 2; min-width: 220px; }
.mux-sub { display: flex; gap: 10px; align-items: center; padding: 14px 0 6px; }
.mux-track { display: grid; grid-template-columns: minmax(140px, 1.3fr) minmax(120px, 1.3fr) minmax(100px, 1fr) auto auto; gap: 12px; align-items: end; padding: 4px 0; }
.mux-program { background: var(--surface-2); border-radius: 3px; margin-bottom: 8px; }
.mux-program-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; cursor: pointer; }
.mux-program-actions { display: flex; gap: 10px; align-items: center; }
.mux-program-actions svg { width: 16px; height: 16px; }
.mux-pid { margin-left: 12px; }
.mux-program-body { padding: 0 14px 12px; }
@media (max-width: 900px) {
  .mux-page { grid-template-columns: 1fr; }
  .mux-track { grid-template-columns: 1fr 1fr; }
}
.mux-track .danger-icon, .mux-program-actions .danger-icon { margin-left: 0; }
.tc-adv-row { display: grid; grid-template-columns: minmax(160px, 220px) minmax(160px, 220px) 1fr; gap: 6px 22px; align-items: end; padding-bottom: 12px; }
@media (max-width: 760px) { .tc-adv-row { grid-template-columns: 1fr; } }


/* =================== Kore-Edge 1.0 — aparência (modelo do Dashboard) =================== */
body { background: radial-gradient(1200px 600px at 75% -10%, rgb(138 61 255 / 0.18), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgb(255 62 165 / 0.08), transparent 60%), var(--bg); background-attachment: fixed; }

/* ---- menu lateral ---- */
.sidebar { width: 236px; padding: 14px 12px; gap: 6px; background: linear-gradient(180deg, #120e2c, #0b0920); border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: thin; }
.side-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 14px; }
.side-logo { flex: none; border-radius: 10px; }
.side-title { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.side-title b { font-size: 19px; color: var(--side-active); letter-spacing: -0.01em; }
.side-title small { color: var(--muted); font-size: 12px; }
.side-collapse { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--side-fg); cursor: pointer; }
.side-collapse:hover { background: var(--side-hover); }
.side-collapse svg { width: 18px; height: 18px; }
.side-nav { display: grid; gap: 2px; flex: 1; align-content: start; }
.side-group { border-bottom: 1px solid rgb(255 255 255 / 0.05); padding-bottom: 4px; margin-bottom: 2px; }
.side-group-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--side-fg); font: inherit; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; text-align: left; }
.side-group-head:hover { background: var(--side-hover); color: var(--side-active); }
.side-group-head.active { background: linear-gradient(90deg, #8a3dff, #a23dff); color: #fff; box-shadow: 0 4px 18px rgb(138 61 255 / 0.45); }
.side-group-head.active-group { color: var(--side-active); }
.side-chev svg { width: 15px; height: 15px; opacity: 0.8; }
.side-items { display: grid; padding: 2px 0 4px 40px; }
.side-sub { position: relative; display: block; padding: 4px 8px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; text-align: left; text-decoration: none; border-radius: 6px; cursor: pointer; }
.side-sub::before { content: ""; position: absolute; left: -10px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: currentColor; transform: translateY(-50%); opacity: 0.7; }
.side-sub:hover { color: var(--side-active); }
.side-sub.active { color: #fff; font-weight: 600; }
.side-sub.active::before { background: var(--accent); opacity: 1; width: 6px; height: 6px; left: -11px; }
.side-foot { display: grid; gap: 8px; padding-top: 10px; }
.side-user { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.side-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)); }
.side-user-text { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.side-user-text b { color: var(--side-active); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user-text small { color: var(--muted); font-size: 12px; display: flex; gap: 6px; align-items: center; }
.side-logout { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--side-fg); cursor: pointer; }
.side-logout:hover { background: var(--side-hover); color: var(--accent); }
.side-logout svg { width: 18px; height: 18px; }
.side-credit { display: flex; justify-content: space-between; padding: 0 6px; font-size: 11px; color: var(--muted); }
/* recolhido: só os ícones */
.shell.collapsed .sidebar { width: 72px; padding: 14px 10px; }
.shell.collapsed .side-title, .shell.collapsed .side-chev, .shell.collapsed .side-items, .shell.collapsed .side-label,
.shell.collapsed .side-user-text, .shell.collapsed .side-credit #side-version { display: none; }
.shell.collapsed .side-head { flex-direction: column; }
.shell.collapsed .side-group-head { justify-content: center; padding: 10px; }
.shell.collapsed .side-user { flex-direction: column; padding: 8px 4px; }
.shell.collapsed .side-credit { justify-content: center; }

/* ---- cabeçalho ---- */
.main { padding: 0 22px 22px; }
.topbar { padding: 16px 0 14px; align-items: flex-start; }
.page-head { min-width: 0; }
.crumbs { font-size: 25px; font-weight: 700; color: var(--fg); }
.crumbs a { color: var(--muted); font-weight: 600; }
.page-sub { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.top-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; color: var(--fg); white-space: nowrap; }
.top-pill svg { width: 16px; height: 16px; color: var(--side-fg); }
.top-clock { font-variant-numeric: tabular-nums; }
.top-icon { position: relative; width: 38px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); }
.top-icon:hover { border-color: var(--primary); }
.top-icon svg { width: 18px; height: 18px; }
.top-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rec); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }

/* ---- superfícies ---- */
.panel { border-radius: var(--radius); background: linear-gradient(180deg, rgb(255 255 255 / 0.02), transparent), var(--surface); border-color: var(--line); }
.card { border-radius: var(--radius); }
.btn { border-radius: 9px; }
.btn.primary { background: linear-gradient(90deg, #8a3dff, #b23dff); border-color: transparent; box-shadow: 0 4px 16px rgb(138 61 255 / 0.35); }
.trow.head { background: var(--head); }
.tabs .tab { border-radius: 10px 10px 0 0; }

/* ---- Dashboard ---- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpi { --c: var(--primary); display: flex; gap: 12px; align-items: center; padding: 14px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 28%, var(--surface)), var(--surface) 75%); box-shadow: var(--shadow); min-width: 0; }
.kpi-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: color-mix(in srgb, var(--c) 75%, #000); box-shadow: 0 0 22px color-mix(in srgb, var(--c) 55%, transparent); }
.kpi-ico svg { width: 26px; height: 26px; }
.kpi-body { min-width: 0; display: grid; gap: 2px; }
.kpi-label { font-size: 13px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-value { font-size: 25px; font-weight: 700; line-height: 1.1; color: #fff; white-space: nowrap; }
.kpi-value small { font-size: 13px; font-weight: 600; }
.kpi-extra { font-size: 13px; color: var(--muted); min-height: 18px; }
.kpi-pill { white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; padding: 2px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ok) 25%, transparent); color: var(--ok); font-weight: 600; }
.kpi-up { color: var(--ok); font-weight: 600; }
.kpi-down { color: var(--rec); font-weight: 600; }
.k-purple { --c: #8a3dff; } .k-blue { --c: #3f7bff; } .k-green { --c: #1fc46f; } .k-violet { --c: #a33dff; }
.k-orange { --c: #ff8a1f; } .k-navy { --c: #3157d6; } .k-teal { --c: #14bfae; }
.dash-grid { display: grid; grid-template-columns: 1.15fr 1fr 0.95fr; grid-template-rows: auto auto; gap: 14px; }
.dash-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; }
.d-net { grid-row: 1 / span 2; }
.dash-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.dash-head h3 { margin: 0; font-size: 16px; }
.dash-head .muted { font-weight: 400; }
.dash-select, .dash-tag { font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--fg); }
.dash-body { display: flex; gap: 10px; align-items: center; }
.dash-chart { flex: 1; min-width: 0; }
.dash-chart svg { display: block; width: 100%; height: auto; }

.dash-gauge:empty { display: none; }
.dash-gauge { flex: none; width: 96px; }
.dash-gauge svg { display: block; width: 96px; height: 96px; }

/* ---- Media: abas em pílulas e barra de ferramentas ---- */
.media-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.media-tabs { display: flex; gap: 4px; padding: 5px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); overflow-x: auto; scrollbar-width: none; }
.media-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 9px; color: var(--fg); text-decoration: none; font-weight: 600; white-space: nowrap; }
.media-tab svg { width: 17px; height: 17px; }
.media-tab:hover { background: var(--surface-2); }
.media-tab.active { background: linear-gradient(90deg, #7c3dff, #a23dff); color: #fff; box-shadow: 0 4px 16px rgb(138 61 255 / 0.4); }
.media-tab.soon { opacity: 0.45; }
.media-add { padding: 10px 18px; font-size: 14px; }
.media-add svg { width: 18px; height: 18px; }
.media-bar + .panel { border-radius: var(--radius); }
.list-toolbar { gap: 10px; align-items: center; }
.list-toolbar { flex-wrap: wrap; }
.list-toolbar .search { flex: 1 1 200px; min-width: 180px; }
.list-toolbar .search input, .tool-select { height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--fg); font: inherit; }
.tool-select { padding: 0 10px; min-width: 150px; }
.list-toolbar .search svg { top: 12px; }
.list-toolbar .search input { padding-left: 36px; }
.view-group { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.view-group .icon-btn { border: 0; border-radius: 8px; width: 38px; height: 32px; }
.view-group .icon-btn.on { background: linear-gradient(90deg, #7c3dff, #a23dff); color: #fff; }
.chip-group { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.chip-btn { border-radius: 10px; padding: 6px 10px; background: var(--surface-2); }
.chip-btn.online { border-color: color-mix(in srgb, var(--ok) 55%, transparent); background: color-mix(in srgb, var(--ok) 12%, var(--surface-2)); }
.chip-btn.waiting { border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: color-mix(in srgb, var(--warn) 10%, var(--surface-2)); }
.chip-btn.error { border-color: color-mix(in srgb, var(--rec) 55%, transparent); background: color-mix(in srgb, var(--rec) 10%, var(--surface-2)); }
.list-toolbar > .icon-btn { width: 40px; height: 40px; border-radius: 10px; }
.list-toolbar > .icon-btn.on { border-color: var(--primary); color: var(--primary); }

/* cards dos streams */
.card-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.scard { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; overflow: visible; box-shadow: var(--shadow); transition: transform 0.12s, border-color 0.12s; }
.scard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 60%, transparent); }
.scard-thumb { border-radius: 14px 14px 0 0; }
.scard .badge { border-radius: 8px; padding: 3px 10px; }
.scard .badge.running { background: #16b86a; }
.scard-play { width: 46px; height: 46px; background: rgb(0 0 0 / 0.45); }
.scard-stats span { border-radius: 8px; background: rgb(0 0 0 / 0.65); font-weight: 600; }
.scard-foot { padding: 10px 12px; font-size: 14px; }
.scard-menu { background: rgb(255 255 255 / 0.12); color: #fff; }

@media (max-width: 1200px) {
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .d-net { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 760px) {
  .dash-grid { grid-template-columns: 1fr; }
  .sidebar { width: 72px; padding: 14px 10px; }
  .side-title, .side-chev, .side-items, .side-label, .side-user-text, .side-credit #side-version { display: none; }
  .side-group-head { justify-content: center; padding: 10px; }
  .top-clock { display: none; }
}

/* ---- menu lateral v2: cartões por seção, ícones em círculo colorido, submenus no clique ---- */
.sidebar { width: 220px; padding: 12px 10px; gap: 6px; position: sticky; overflow-x: hidden;
  background: radial-gradient(260px 160px at 110% 8%, rgb(168 85 247 / 0.22), transparent 70%), radial-gradient(240px 160px at -20% 98%, rgb(168 85 247 / 0.25), transparent 70%), linear-gradient(180deg, #110d2b, #0a0820); }
.side-head { gap: 9px; padding: 2px 2px 10px; }
.side-logo { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 0 22px rgb(168 85 247 / 0.55); }
.side-divider { width: 1px; height: 28px; background: rgb(255 255 255 / 0.18); flex: none; }
.side-title b { font-size: 16px; font-weight: 700; }
.side-title small { color: #b38cff; font-size: 11px; }
.side-collapse { width: 28px; height: 28px; border: 1px solid rgb(255 255 255 / 0.14); border-radius: 10px; background: rgb(255 255 255 / 0.03); }
.side-collapse:hover { border-color: rgb(168 85 247 / 0.7); }
.side-nav { gap: 5px; }
.side-dash { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px; color: var(--side-fg); text-decoration: none; font-weight: 600; font-size: 13px;
  border: 1px solid rgb(255 255 255 / 0.06); background: rgb(255 255 255 / 0.02); }
.side-dash .side-ico { width: 26px; height: 26px; background: none; box-shadow: none; color: inherit; display: grid; place-items: center; }
.side-dash .side-ico svg { width: 19px; height: 19px; }
.side-dash:hover { border-color: rgb(168 85 247 / 0.5); color: #fff; }
.side-dash.active { color: #fff; border-color: #b46bff; background: linear-gradient(90deg, rgb(138 61 255 / 0.85), rgb(93 50 220 / 0.75)); box-shadow: 0 0 0 1px rgb(180 107 255 / 0.35), 0 6px 24px rgb(138 61 255 / 0.45); }
.side-card { --c: #a855f7; border: 1px solid rgb(255 255 255 / 0.07); border-radius: 11px; background: rgb(255 255 255 / 0.025); }
.side-card:hover { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.side-card.current { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 7%, transparent); }
.side-group { all: unset; }
.side-group-head { gap: 10px; padding: 6px 9px; border-radius: 11px; font-weight: 600; font-size: 13px; color: #fff; }
.side-group-head:hover { background: transparent; }
.side-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--c);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 8%, transparent)); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 30%, transparent); }
.side-ico svg { width: 15px; height: 15px; }
.side-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.side-chev svg { width: 13px; height: 13px; opacity: 0.85; }
.side-items { position: relative; display: grid; gap: 0; padding: 0 9px 7px 47px; }
.side-items::before { content: ""; position: absolute; left: 32px; top: 3px; bottom: 12px; width: 1px; background: rgb(255 255 255 / 0.16); }
.side-sub { padding: 2px 4px; font-size: 12.5px; color: #c8c2e6; }
.side-sub::before { left: -18px; width: 6px; height: 6px; background: #6f6a92; opacity: 1; }
.side-sub:hover { color: #fff; }
.side-sub.active { color: #fff; font-weight: 600; }
.side-sub.active::before { left: -18.5px; width: 7px; height: 7px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.side-foot { gap: 8px; padding-top: 8px; }
.side-user { padding: 8px; gap: 8px; border-radius: 11px; background: rgb(255 255 255 / 0.03); border: 1px solid rgb(255 255 255 / 0.1); }
.side-avatar { width: 32px; height: 32px; font-size: 14px; background: linear-gradient(135deg, #a855f7, #6d28d9); box-shadow: 0 0 14px rgb(168 85 247 / 0.5); }
.side-user-text b { font-size: 13px; }
.side-user-text small { font-size: 11px; }
.side-logout { width: 28px; height: 28px; }
.side-logout svg { width: 17px; height: 17px; }
.side-credit { align-items: center; padding: 0 4px; font-size: 11px; }
.side-ver { display: inline-flex; align-items: center; gap: 8px; }
.side-ver svg { width: 15px; height: 15px; color: var(--side-fg); }
.side-by b { color: #fff; font-weight: 700; }
/* recolhido: só ícones */
.shell.collapsed .sidebar { width: 64px; padding: 12px 8px; }
.shell.collapsed .side-divider, .shell.collapsed .side-label, .shell.collapsed .side-by { display: none; }
.shell.collapsed .side-card, .shell.collapsed .side-dash { border-color: transparent; background: transparent; }
.shell.collapsed .side-dash.active { background: linear-gradient(90deg, rgb(138 61 255 / 0.85), rgb(93 50 220 / 0.75)); }
.shell.collapsed .side-dash, .shell.collapsed .side-group-head { justify-content: center; padding: 8px; }
.shell.collapsed .side-credit { justify-content: center; }
@media (max-width: 760px) {
  .sidebar { width: 64px; padding: 12px 8px; }
  .side-divider, .side-label, .side-by, .side-chev, .side-items { display: none; }
  .side-dash, .side-group-head { justify-content: center; padding: 8px; }
}

/* ---- login (modelo "Acesso ao Sistema") ---- */
.login { position: relative; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: 32px clamp(16px, 4vw, 64px); overflow: hidden; isolation: isolate;
  background: radial-gradient(900px 520px at 22% 38%, rgb(110 50 255 / 0.22), transparent 70%), radial-gradient(700px 460px at 72% 46%, rgb(80 40 220 / 0.2), transparent 70%), radial-gradient(600px 400px at 100% 0%, rgb(60 70 255 / 0.18), transparent 70%), linear-gradient(180deg, #0b0a26, #080718 60%, #0b0822); }
.login-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.login-waves { position: absolute; inset: 0; width: 100%; height: 100%; }
/* parede de telas em perspectiva */
.login-wall { position: absolute; left: -3vw; top: 7vh; width: 34vw; min-width: 360px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4vw;
  transform: perspective(900px) rotateY(34deg); transform-origin: left center;
  -webkit-mask-image: linear-gradient(90deg, #000 25%, transparent 92%), linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, #000 40%, transparent 96%); opacity: 1; }
.lt { position: relative; aspect-ratio: 16 / 10.5; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 30px rgb(80 40 220 / 0.35); }
.lt::before { content: ""; position: absolute; left: 7%; top: 8%; width: 22%; height: 9%; border-radius: 2px; background: rgb(255 255 255 / 0.55); }
.lt::after { content: ""; position: absolute; inset: auto 7% 9% 7%; height: 5%; border-radius: 2px; background: linear-gradient(90deg, rgb(255 255 255 / 0.5) 38%, rgb(255 255 255 / 0.15) 38%); }
.lt0 { background: radial-gradient(60% 40% at 50% 12%, #fff 0, rgb(200 220 255 / 0.6) 18%, transparent 60%), linear-gradient(180deg, #1b2a6b 0, #3e3d9a 45%, #2f8a3a 62%, #1d5c27 100%); }
.lt1 { background: radial-gradient(40% 40% at 70% 40%, rgb(255 214 120 / 0.9), transparent 70%), linear-gradient(160deg, #2a1b5e, #b8463a 55%, #401540); }
.lt2 { background: radial-gradient(50% 50% at 40% 40%, rgb(120 160 255 / 0.7), transparent 70%), linear-gradient(170deg, #142a6e, #4c3aa8 50%, #1c1b4e); }
.lt3 { background: radial-gradient(35% 45% at 60% 45%, rgb(255 140 220 / 0.6), transparent 70%), linear-gradient(180deg, #3b2a8f, #7f5cd6 45%, #2a5d9e 75%, #1a1f52); }
.lt4 { background: linear-gradient(180deg, rgb(20 16 50 / 0.2), rgb(20 16 50 / 0.7)), radial-gradient(30% 50% at 45% 55%, rgb(220 200 255 / 0.35), transparent 70%), linear-gradient(135deg, #24194f, #3a2a72); }
.lt5 { background: radial-gradient(45% 35% at 55% 30%, rgb(255 190 120 / 0.85), transparent 70%), linear-gradient(180deg, #47206c, #c2553a 50%, #2a1036); }
.lt6 { background: radial-gradient(40% 40% at 50% 50%, rgb(130 110 255 / 0.5), transparent 70%), linear-gradient(150deg, #1a1748, #2e2468 60%, #141233); }
/* marca */
.login-hero { justify-self: center; display: grid; justify-items: center; text-align: center; padding-left: clamp(0px, 8vw, 150px); }
.login-logo { width: clamp(130px, 13vw, 200px); height: auto; filter: drop-shadow(0 0 28px rgb(170 70 255 / 0.65)) drop-shadow(0 0 60px rgb(120 60 255 / 0.4)); margin-bottom: 8px; }
.login-hero h1 { margin: 0; font-size: clamp(40px, 4.6vw, 72px); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 24px rgb(120 60 255 / 0.35); }
.login-tag { margin: 6px 0 0; font-size: clamp(20px, 2.2vw, 34px); font-weight: 500; color: #a974ff; }
.login-feats { list-style: none; display: flex; margin: clamp(26px, 4vh, 48px) 0 0; padding: 0; }
.login-feats li { display: grid; justify-items: center; gap: 14px; padding: 0 clamp(14px, 2.4vw, 38px); font-size: clamp(14px, 1.25vw, 20px); line-height: 1.35; color: #e6e1ff; }
.login-feats li + li { border-left: 1px solid rgb(255 255 255 / 0.22); }
.login-feat-ico { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 14px; color: #c27dff; background: linear-gradient(180deg, rgb(70 45 150 / 0.55), rgb(40 25 95 / 0.55)); border: 1px solid rgb(180 130 255 / 0.18); box-shadow: 0 0 18px rgb(140 70 255 / 0.25); }
.login-feat-ico svg { width: 42px; height: 42px; }
/* cartão de acesso */
.login .login-card { justify-self: start; width: 100%; max-width: 480px; padding: clamp(26px, 3.4vw, 42px) clamp(22px, 2.6vw, 40px); border-radius: 30px; text-align: center;
  background: linear-gradient(180deg, rgb(34 28 86 / 0.72), rgb(18 15 50 / 0.78)); border: 2px solid #8f63ff; backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgb(110 70 255 / 0.35), 0 0 34px rgb(140 70 255 / 0.55), 0 0 80px rgb(110 60 255 / 0.25), inset 0 0 30px rgb(130 70 255 / 0.18); }
.login-card h2 { margin: 0; font-size: clamp(24px, 2.1vw, 32px); font-weight: 700; color: #fff; }
.login-sub { margin: 10px 0 30px; font-size: 18px; color: #d8d2f5; }
.login-input { position: relative; display: block; margin-bottom: 16px; }
.login-input > svg { position: absolute; left: 20px; top: 50%; width: 28px; height: 28px; transform: translateY(-50%); color: #e8e4ff; pointer-events: none; }
.login-input input { width: 100%; height: 60px; padding: 0 60px 0 66px; border-radius: 14px; border: 1.5px solid rgb(255 255 255 / 0.22); background: rgb(255 255 255 / 0.04); color: #fff; font: inherit; font-size: 19px; }
.login-input input::placeholder { color: #bdb6de; opacity: 1; }
.login-input input:focus { outline: none; border-color: #a06bff; box-shadow: 0 0 0 3px rgb(140 80 255 / 0.25); background: rgb(255 255 255 / 0.06); }
.login-eye { position: absolute; right: 12px; top: 50%; width: 38px; height: 38px; transform: translateY(-50%); display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: #e8e4ff; cursor: pointer; }
.login-eye:hover { background: rgb(255 255 255 / 0.08); }
.login-eye svg { width: 27px; height: 27px; }
.login-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 22px; flex-wrap: wrap; }
.login-check { display: inline-flex; align-items: center; gap: 10px; font-size: 16.5px; color: #ece8ff; cursor: pointer; }
.login-check input { appearance: none; width: 24px; height: 24px; margin: 0; border-radius: 6px; border: 1.5px solid rgb(255 255 255 / 0.4); background: transparent; cursor: pointer; display: grid; place-items: center; }
.login-check input:checked { background: linear-gradient(135deg, #7a3dff, #c04dff); border-color: transparent; }
.login-check input:checked::after { content: ""; width: 11px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: translate(0, -1px) rotate(-45deg); }
.login-check input:focus-visible, .login-link:focus-visible { outline: 2px solid #a06bff; outline-offset: 2px; }
.login-link { border: 0; padding: 0; background: none; color: #b77bff; font: inherit; font-size: 16.5px; cursor: pointer; }
.login-link:hover { color: #d3a8ff; text-decoration: underline; }
.login-help { margin: -8px 0 18px; padding: 12px 14px; border-radius: 12px; background: rgb(255 255 255 / 0.05); border: 1px solid rgb(180 130 255 / 0.25); color: #d8d2f5; font-size: 13px; line-height: 1.5; text-align: left; }
.login-help code { color: #fff; background: rgb(255 255 255 / 0.08); padding: 1px 5px; border-radius: 5px; word-break: break-all; }
.login-card .form-error { text-align: left; margin: -6px 0 16px; }
.login-submit { width: 100%; height: 62px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; border: 0; border-radius: 14px; cursor: pointer; color: #fff; font: inherit; font-size: 22px; font-weight: 700;
  background: linear-gradient(90deg, #5b3dff, #9a45ff 55%, #f05ad8); box-shadow: 0 8px 30px rgb(140 70 255 / 0.45); transition: filter 0.15s, transform 0.15s; }
.login-submit:hover { filter: brightness(1.1); }
.login-submit:active { transform: translateY(1px); }
.login-submit svg { width: 28px; height: 28px; }
@media (max-width: 980px) {
  .login { grid-template-columns: 1fr; justify-items: center; gap: 28px; padding: 28px 16px; }
  .login-wall { opacity: 0.35; width: 70vw; }
  .login-hero { padding-left: 0; }
  .login .login-card { justify-self: center; }
}
@media (max-width: 520px) {
  .login-feats li { padding: 0 10px; font-size: 13px; }
  .login-feat-ico { width: 50px; height: 50px; }
  .login-feat-ico svg { width: 24px; height: 24px; }
  .login-input input { height: 54px; }
  .login-submit { height: 56px; font-size: 18px; }
}

/* ---- atualizações (Configurações) ---- */
.update-status { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; font-weight: 600; }
.update-status svg { width: 18px; height: 18px; }
.update-status.ok { color: var(--ok); }
.update-status.available { color: #c89bff; }
.update-status.error { color: var(--rec); font-weight: 500; }
.update-status.busy { color: var(--fg); font-weight: 500; }
.update-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 6px; }
.update-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.update-actions .btn svg { width: 16px; height: 16px; }
.update-notes { margin: 8px 0; }
.update-notes summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.update-notes pre { margin: 8px 0 0; max-height: 240px; overflow: auto; padding: 10px 12px; border-radius: 10px; background: var(--code-bg); font-size: 12px; white-space: pre-wrap; }
.spinner { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid rgb(255 255 255 / 0.2); border-top-color: var(--primary); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#top-version-pill.has-update { cursor: pointer; border-color: rgb(168 85 247 / 0.7); box-shadow: 0 0 14px rgb(168 85 247 / 0.35); }
.top-update { color: #c89bff; font-weight: 600; }

/* ---- HTTPS (Configurações) ---- */
.tls-sub { margin: 18px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.inline-row { display: flex; gap: 8px; align-items: center; }
.inline-row input { flex: 1; min-width: 0; }
textarea.pem { width: 100%; font: 12px/1.4 ui-monospace, Consolas, monospace; resize: vertical; }

/* ---- licença ---- */
.license-lock { grid-template-columns: 1fr; justify-items: center; }
.license-lock .license-card { justify-self: center; max-width: 520px; }
.license-logo { display: block; margin: 0 auto 14px; border-radius: 16px; box-shadow: 0 0 28px rgb(170 70 255 / 0.55); }
.license-note { margin: 0 0 14px; font-size: 14px; color: #bdb6de; }
.license-id { display: grid; gap: 6px; margin: 6px 0 8px; text-align: left; }
.license-id > span:first-child { font-size: 13px; color: #bdb6de; }
.license-id-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid rgb(255 255 255 / 0.22); background: rgb(255 255 255 / 0.04); }
.license-id-row code { font-size: 20px; font-weight: 700; letter-spacing: 0.08em; color: #fff; user-select: all; }
.license-key { width: 100%; margin: 4px 0 16px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid rgb(255 255 255 / 0.22); background: rgb(255 255 255 / 0.04); color: #fff; font: 13px/1.4 ui-monospace, Consolas, monospace; resize: vertical; }
.license-key:focus { outline: none; border-color: #a06bff; box-shadow: 0 0 0 3px rgb(140 80 255 / 0.25); }
.license-logout { display: block; margin: 14px auto 0; }
.license-by { margin: 16px 0 0; font-size: 12px; color: #9d96c4; }
.license-by b { color: #fff; }
.top-license { color: #fff; background: rgb(255 77 94 / 0.18); border-color: rgb(255 77 94 / 0.6); text-decoration: none; font-weight: 600; }

/* Abas de um cartão só (License, Updates, HTTPS) */
.config-single { max-width: 760px; }

/* Tela de licença: ativação por código (online) ou chave offline */
.license-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; margin: 4px 0 14px; border-radius: 14px; background: rgb(255 255 255 / 0.05); }
.license-mode { padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: #bdb6de; font: inherit; font-weight: 600; cursor: pointer; }
.license-mode.active { background: linear-gradient(135deg, #8a3dff, #b14dff); color: #fff; }
.license-code { width: 100%; margin: 0 0 12px; padding: 13px 16px; border-radius: 14px; border: 1.5px solid rgb(255 255 255 / 0.22); background: rgb(255 255 255 / 0.04); color: #fff; font: 700 20px/1.2 ui-monospace, Consolas, monospace; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
.license-code.small { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; text-align: left; margin: 8px 0 0; }
.license-code:focus { outline: none; border-color: #a06bff; box-shadow: 0 0 0 3px rgb(140 80 255 / 0.25); }
.license-url { margin: 0 0 16px; text-align: left; font-size: 13px; color: #bdb6de; }
.license-url summary { cursor: pointer; }

/* =================== Temas: Kore (roxo neon, padrão), Dark e Claro ===================
   O tema fica em <html data-theme="dark|light"> (escolhido no botão do topo, salvo no
   navegador). As telas de login e de licença são de marca e ficam sempre no Kore. */
:root[data-theme="dark"] {
  --bg: #0e0f13;
  --surface: #17181d;
  --surface-2: #1d1f25;
  --head: #22242b;
  --fg: #eceef3;
  --muted: #9a9eab;
  --line: #2c2f37;
  --primary-soft: #241a3d;
  --off: #5d606b;
  --side: #121318;
  --side-fg: #c9ccd6;
  --side-active: #ffffff;
  --side-hover: #1f2128;
  --code-bg: #23252c;
  --shadow: 0 4px 16px rgb(0 0 0 / 0.35);
  --edge: rgb(255 255 255 / 0.07);
  --edge-2: rgb(255 255 255 / 0.12);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f2f8;
  --surface: #ffffff;
  --surface-2: #f6f5fb;
  --head: #efedf7;
  --fg: #1c1733;
  --muted: #6b6588;
  --line: #e2deef;
  --primary: #7c2cf0;
  --primary-soft: #efe6ff;
  --accent: #d62782;
  --ok: #12a05c;
  --ok-soft: #e3f7ec;
  --warn: #c77d00;
  --off: #a19cbb;
  --rec: #e5394c;
  --teal: #0f9e90;
  --blue: #2f62e0;
  --side: #ffffff;
  --side-fg: #3d3757;
  --side-active: #1c1733;
  --side-hover: #f1eefa;
  --code-bg: #f1eef9;
  --shadow: 0 2px 10px rgb(40 20 100 / 0.08);
  --edge: rgb(40 20 100 / 0.09);
  --edge-2: rgb(40 20 100 / 0.16);
}

/* Fundo e menu lateral */
:root[data-theme="dark"] body { background: var(--bg); }
:root[data-theme="light"] body { background: radial-gradient(900px 500px at 100% 0%, rgb(155 77 255 / 0.07), transparent 60%), var(--bg); background-attachment: fixed; }
:root[data-theme] .sidebar { background: var(--side); border-right: 1px solid var(--line); }
:root[data-theme] .side-divider, :root[data-theme] .side-items::before { background: var(--edge-2); }
:root[data-theme] .side-collapse { border-color: var(--edge-2); background: transparent; }
:root[data-theme] .side-dash:not(.active) { border-color: var(--edge); background: transparent; }
:root[data-theme] .side-card:not(.current) { border-color: var(--edge); background: transparent; }
:root[data-theme] .side-user { border-color: var(--edge-2); background: var(--surface-2); }
:root[data-theme] .side-sub { color: var(--side-fg); }
:root[data-theme] .side-sub::before { background: var(--off); }
:root[data-theme="light"] .side-title small { color: var(--primary); }
:root[data-theme="light"] .side-group-head, :root[data-theme="light"] .side-dash:hover,
:root[data-theme="light"] .side-sub:hover, :root[data-theme="light"] .side-sub.active,
:root[data-theme="light"] .side-by b { color: var(--fg); }
:root[data-theme="light"] .side-group-head.active, :root[data-theme="light"] .side-dash.active { color: #fff; }
:root[data-theme="light"] .side-logo { box-shadow: 0 0 0 1px var(--edge-2), 0 0 14px rgb(168 85 247 / 0.35); }

/* Sem o brilho neon (Dark) e mais suave (Claro) */
:root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] .media-tab.active, :root[data-theme="dark"] .side-dash.active,
:root[data-theme="dark"] .side-group-head.active, :root[data-theme="dark"] .side-ico, :root[data-theme="dark"] .kpi-ico,
:root[data-theme="dark"] .side-avatar, :root[data-theme="dark"] #top-version-pill.has-update { box-shadow: none; }
:root[data-theme="light"] .btn.primary, :root[data-theme="light"] .media-tab.active, :root[data-theme="light"] .side-dash.active,
:root[data-theme="light"] .side-group-head.active { box-shadow: 0 2px 10px rgb(124 44 240 / 0.25); }
:root[data-theme="light"] .side-ico, :root[data-theme="light"] .kpi-ico { box-shadow: none; }

/* Indicadores do Dashboard */
:root[data-theme="dark"] .kpi { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, var(--surface)), var(--surface) 75%); }
:root[data-theme="light"] .kpi { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 10%, var(--surface)), var(--surface) 75%); }
:root[data-theme="light"] .kpi-value { color: var(--fg); }
:root[data-theme="light"] .kpi-ico { background: color-mix(in srgb, var(--c) 85%, #000); }

/* Cartões dos streams: texto do rodapé no tema (a imagem e os selos continuam escuros) */
:root[data-theme="light"] .scard { color: var(--fg); }
:root[data-theme="light"] .scard-thumb { color: #fff; }
:root[data-theme="light"] .scard-foot a { color: var(--fg); }
:root[data-theme="light"] .scard-menu { background: var(--head); color: var(--fg); }

/* Avisos e detalhes */
:root[data-theme="light"] .top-license { color: #b3132a; }
:root[data-theme="light"] .spinner { border-color: var(--edge-2); border-top-color: var(--primary); }
:root[data-theme="light"] .panel { background: var(--surface); }

/* Login e licença: sempre no visual de marca, com as cores do Kore */
:root[data-theme] .login {
  --fg: #eeeaff; --muted: #aaa4cc; --surface: #151230; --surface-2: #1b1838; --line: #2e2856; --primary: #8a3dff;
  --accent: #ff3ea5; --code-bg: #231e46; color: var(--fg); color-scheme: dark;
}

/* Seletor de tema (topo) */
.theme-pick { position: relative; }
.theme-pick .menu-pop { left: auto; right: 0; min-width: 210px; padding: 6px; }
.theme-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.theme-opt:hover { background: var(--surface-2); }
.theme-opt.on { background: var(--primary-soft); }
.theme-opt small { display: block; color: var(--muted); font-size: 12px; }
.theme-swatch { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--line); }