.portal-content.portal-cftv-workspace { padding: 0; background: var(--canvas, #f3f5f4); }

.cftv-page {
  --cftv-bg: var(--canvas, #f3f5f4);
  --cftv-panel: var(--surface, #fff);
  --cftv-subtle: var(--surface-subtle, #f7f9f8);
  --cftv-line: var(--line, #dfe4e2);
  --cftv-line-strong: var(--line-strong, #cbd3d0);
  --cftv-text: var(--ink, #17201e);
  --cftv-muted: var(--muted, #697773);
  --cftv-green: #168365;
  --cftv-orange: #e66f32;
  width: 100%;
  min-height: calc(100vh - 72px);
  color: var(--cftv-text);
  background: var(--cftv-bg);
}

.cftv-header {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(260px, 1fr);
  align-items: center;
  min-height: 70px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--cftv-line);
  background: rgb(255 255 255 / 96%);
}
.cftv-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cftv-title > div { display: grid; gap: 1px; }
.cftv-title p { margin: 0; color: #8a9692; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cftv-title h1 { margin: 0; font-family: "ERS Intro", Aptos, "Segoe UI", sans-serif; font-size: 23px; line-height: 1; letter-spacing: -.03em; }
.cftv-back { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--cftv-line); border-radius: 8px; background: #fff; color: #53615d; font-size: 17px; cursor: pointer; }
.cftv-back:hover { border-color: var(--cftv-line-strong); background: #f7f8f7; color: var(--cftv-text); }

.cftv-summary { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--cftv-muted); font-size: 11px; }
.cftv-summary span { display: flex; align-items: center; gap: 5px; color: #3d4a46; }
.cftv-summary span i { width: 7px; height: 7px; border-radius: 50%; background: #2ab487; box-shadow: 0 0 0 3px rgb(42 180 135 / 12%); }
.cftv-summary b { color: var(--cftv-green); font-size: 15px; }
.cftv-summary em { color: #899490; font-style: normal; }

.cftv-actions { display: flex; justify-content: flex-end; gap: 7px; }
.cftv-wall-button,
.cftv-export-button,
.cftv-refresh-button,
.cftv-filter-button,
.cftv-density-button { height: 36px; border: 1px solid var(--cftv-line); border-radius: 7px; background: #fff; color: #46544f; font: 700 11px Aptos, "Segoe UI", sans-serif; cursor: pointer; }
.cftv-wall-button { display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border-color: #b9cec7; background: #edf6f3; color: #155f4c; }
.cftv-wall-button span { font-size: 16px; line-height: 1; }
.cftv-export-button { padding: 0 14px; border-color: #15221f; background: #17231f; color: #fff; }
.cftv-refresh-button { padding: 0 12px; }
.cftv-export-button:hover { background: #263630; }
.cftv-refresh-button:hover,
.cftv-wall-button:hover,
.cftv-filter-button:hover,
.cftv-density-button:hover { border-color: var(--cftv-line-strong); background: #f7f8f7; color: #17201e; }

.cftv-unit-tabs { display: flex; align-items: center; gap: 5px; min-height: 48px; padding: 7px 16px; overflow-x: auto; border-bottom: 1px solid var(--cftv-line); background: #fff; }
.cftv-unit-tabs button { display: flex; align-items: center; gap: 8px; min-width: max-content; height: 33px; padding: 0 12px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #66746f; font: 700 11px Aptos, "Segoe UI", sans-serif; cursor: pointer; }
.cftv-unit-tabs button b { display: grid; place-items: center; min-width: 20px; height: 19px; padding: 0 5px; border-radius: 5px; background: #eef1f0; color: #77837f; font-size: 9px; }
.cftv-unit-tabs button:hover { background: #f4f6f5; color: #26322f; }
.cftv-unit-tabs button[aria-pressed="true"] { border-color: #ced8d4; background: #eaf1ee; color: #183c31; }
.cftv-unit-tabs button[aria-pressed="true"] b { background: #d7e6e0; color: #17664f; }
.cftv-unit-tabs .cftv-problem-tab { margin-left: auto; border-color: #ead9c5; background: #fffaf4; color: #8b5b25; }
.cftv-unit-tabs .cftv-problem-tab b { background: #f4e6d5; color: #9b5e1e; }
.cftv-unit-tabs .cftv-problem-tab[aria-pressed="true"] { border-color: #dda765; background: #fff1df; color: #74400a; }
.cftv-unit-tabs .cftv-problem-tab[aria-pressed="true"] b { background: #eecb9d; color: #6f3900; }

.cftv-controls { position: sticky; top: 72px; z-index: 12; display: grid; grid-template-columns: minmax(250px, 1fr) minmax(180px, 260px) auto 40px auto; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--cftv-line); background: rgb(243 245 244 / 94%); backdrop-filter: blur(12px); }
.cftv-search { position: relative; min-width: 0; }
.cftv-search svg { position: absolute; top: 50%; left: 12px; width: 17px; fill: none; stroke: #7c8985; stroke-width: 1.8; transform: translateY(-50%); }
.cftv-search input,
.cftv-controls select { width: 100%; height: 38px; border: 1px solid var(--cftv-line); border-radius: 7px; outline: none; background: #fff; color: var(--cftv-text); font: 12px Aptos, "Segoe UI", sans-serif; }
.cftv-search input { padding: 0 12px 0 39px; }
.cftv-controls select { padding: 0 30px 0 11px; }
.cftv-search input:focus,
.cftv-controls select:focus { border-color: #70a697; box-shadow: 0 0 0 3px rgb(22 131 101 / 9%); }
.cftv-filter-button { padding: 0 13px; }
.cftv-filter-button[aria-pressed="true"] { border-color: #dfc272; background: #fff9e7; color: #8e6a04; }
.cftv-density-button { width: 40px; padding: 0; font-size: 17px; }
.cftv-controls > p { justify-self: end; margin: 0 3px 0 10px; color: #7b8783; font-size: 10px; white-space: nowrap; }

.cftv-content { padding: 14px; }
.cftv-sectors { display: grid; gap: 22px; }
.cftv-sector { min-width: 0; }
.cftv-sector > header { display: flex; align-items: end; justify-content: space-between; min-height: 31px; margin-bottom: 8px; padding: 0 2px 7px; border-bottom: 1px solid var(--cftv-line); }
.cftv-sector > header > div { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.cftv-sector > header p { margin: 0; color: var(--cftv-orange); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.cftv-sector > header h2 { overflow: hidden; margin: 0; color: #26312e; font-size: 16px; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.cftv-sector > header > span { display: grid; place-items: center; min-width: 22px; height: 20px; border-radius: 5px; background: #e7ebe9; color: #71807b; font-size: 9px; }

.cftv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 9px; }
.cftv-page.is-comfortable .cftv-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.cftv-card { min-width: 0; overflow: hidden; border: 1px solid #dce2df; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgb(23 32 30 / 3%); transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; }
.cftv-card:hover { z-index: 1; border-color: #b9c6c1; box-shadow: 0 8px 24px rgb(31 47 41 / 9%); transform: translateY(-1px); }
.cftv-preview { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; padding: 0; border: 0; background: #e9edeb; cursor: pointer; }
.cftv-preview::after { position: absolute; right: 0; bottom: 0; left: 0; height: 32%; background: linear-gradient(transparent, rgb(0 0 0 / 32%)); content: ""; pointer-events: none; }
.cftv-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 180ms ease, transform 220ms ease; }
.cftv-card.has-image img { opacity: 1; }
.cftv-card:hover img { transform: scale(1.012); }
.cftv-placeholder { position: absolute; inset: 0; display: grid; place-content: center; background: #e7ebe9; opacity: 1; transition: opacity 160ms ease, visibility 160ms ease; }
.cftv-placeholder i { width: 20px; height: 20px; border: 2px solid rgb(82 107 98 / 20%); border-top-color: #4f9f88; border-radius: 50%; animation: cftv-stream-spin .72s linear infinite; }
.cftv-card.has-image .cftv-placeholder { visibility: hidden; opacity: 0; }
.cftv-live { position: absolute; z-index: 2; top: 7px; left: 7px; display: flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 4px; background: rgb(16 24 22 / 72%); color: #edf3f1; font-size: 8px; letter-spacing: .04em; text-transform: uppercase; backdrop-filter: blur(5px); }
.cftv-live i,
.cftv-modal footer i { width: 5px; height: 5px; border-radius: 50%; background: #e7a93a; }
.cftv-card.is-online .cftv-live i,
.cftv-modal footer i { background: #3fd1a3; box-shadow: 0 0 0 2px rgb(63 209 163 / 15%); }
.cftv-card.is-offline .cftv-live i { background: #eb625d; box-shadow: none; }
.cftv-expand { position: absolute; z-index: 2; right: 7px; bottom: 7px; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 4px; background: rgb(16 24 22 / 66%); color: #fff; opacity: 0; transition: opacity 140ms ease; }
.cftv-card:hover .cftv-expand { opacity: 1; }
.cftv-card-copy { display: flex; align-items: center; min-height: 47px; gap: 7px; padding: 7px 7px 7px 10px; }
.cftv-card-copy > div { min-width: 0; flex: 1; }
.cftv-card-copy strong,
.cftv-card-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cftv-card-copy strong { color: #26312e; font-size: 11px; line-height: 1.25; }
.cftv-card-copy span { margin-top: 2px; color: #86918d; font-size: 9px; }
.cftv-favorite { width: 30px; height: 30px; flex: none; border: 0; border-radius: 6px; background: transparent; color: #9da7a3; font-size: 16px; cursor: pointer; }
.cftv-favorite:hover { background: #f1f4f2; color: #687570; }
.cftv-favorite.is-favorite { color: #d7a315; }

.cftv-empty { padding: 70px 20px; border: 1px dashed var(--cftv-line-strong); border-radius: 9px; background: #fff; color: var(--cftv-muted); text-align: center; }
.cftv-empty h2 { margin: 0 0 5px; color: var(--cftv-text); font-size: 17px; }
.cftv-empty p { margin: 0; font-size: 11px; }

/* Visual refresh: hierarquia mais clara sem retirar espaço útil das câmeras. */
.cftv-header {
  min-height: 76px;
  padding-inline: clamp(16px, 2vw, 30px);
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--cftv-panel) 98%, transparent), color-mix(in srgb, var(--cftv-subtle) 86%, transparent));
}
.cftv-title { gap: 13px; }
.cftv-title h1 { font-size: 25px; }
.cftv-back {
  width: 39px;
  height: 39px;
  border-radius: 10px;
  background: var(--cftv-panel);
  color: var(--cftv-muted);
  box-shadow: 0 2px 8px rgb(19 40 34 / 4%);
}
.cftv-summary { gap: 9px; }
.cftv-summary small {
  margin-left: 2px;
  padding-left: 11px;
  border-left: 1px solid var(--cftv-line);
  color: var(--cftv-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cftv-actions button { border-radius: 9px; }
.cftv-wall-button { box-shadow: inset 0 0 0 1px rgb(22 131 101 / 3%); }
.cftv-export-button { box-shadow: 0 4px 12px rgb(15 33 28 / 10%); }

.cftv-unit-tabs {
  position: sticky;
  top: 72px;
  z-index: 14;
  min-height: 50px;
  padding: 8px clamp(12px, 1.5vw, 22px);
  scrollbar-color: var(--cftv-line-strong) transparent;
  scrollbar-width: thin;
  background: color-mix(in srgb, var(--cftv-panel) 96%, transparent);
  box-shadow: 0 4px 14px rgb(20 39 33 / 3%);
  backdrop-filter: blur(14px);
}
.cftv-unit-tabs button {
  height: 34px;
  border-radius: 9px;
  color: var(--cftv-muted);
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.cftv-unit-tabs button b { border-radius: 6px; }
.cftv-unit-tabs .cftv-all-tab {
  border-color: color-mix(in srgb, var(--cftv-green) 18%, var(--cftv-line));
  background: color-mix(in srgb, var(--cftv-green) 5%, var(--cftv-panel));
  color: color-mix(in srgb, var(--cftv-green) 82%, var(--cftv-text));
}
.cftv-all-tab > i { font-size: 15px; font-style: normal; line-height: 1; }
.cftv-unit-divider { width: 1px; height: 22px; flex: none; margin: 0 3px; background: var(--cftv-line); }
.cftv-unit-tabs button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--cftv-green) 35%, var(--cftv-line));
  background: color-mix(in srgb, var(--cftv-green) 11%, var(--cftv-panel));
  color: color-mix(in srgb, var(--cftv-green) 78%, var(--cftv-text));
  box-shadow: 0 3px 10px rgb(22 131 101 / 7%);
}

.cftv-controls {
  top: 122px;
  z-index: 13;
  gap: 9px;
  padding: 10px clamp(12px, 1.3vw, 20px);
  background: color-mix(in srgb, var(--cftv-bg) 91%, transparent);
  box-shadow: 0 5px 15px rgb(18 35 30 / 3%);
  backdrop-filter: blur(16px) saturate(1.05);
}
.cftv-search input,
.cftv-controls select {
  height: 40px;
  border-radius: 10px;
  background: var(--cftv-panel);
  color: var(--cftv-text);
  box-shadow: 0 2px 7px rgb(22 38 33 / 3%);
}
.cftv-filter-button,
.cftv-density-button { height: 40px; border-radius: 10px; background: var(--cftv-panel); color: var(--cftv-muted); }
.cftv-controls > p {
  min-width: 72px;
  color: var(--cftv-muted);
  font-weight: 700;
  text-align: right;
}

.cftv-content { padding: clamp(13px, 1.35vw, 22px); }
.cftv-sectors { gap: 28px; }
.cftv-sector {
  min-width: 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}
.cftv-sector > header {
  min-height: 38px;
  margin-bottom: 11px;
  padding: 0 3px 9px;
  border-bottom-color: color-mix(in srgb, var(--cftv-line) 86%, transparent);
}
.cftv-sector > header > div { gap: 11px; }
.cftv-sector > header p {
  padding: 4px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--cftv-orange) 9%, var(--cftv-panel));
}
.cftv-sector > header h2 { color: var(--cftv-text); font-size: 17px; }
.cftv-sector > header > span {
  min-width: 25px;
  height: 22px;
  border: 1px solid var(--cftv-line);
  border-radius: 7px;
  background: var(--cftv-panel);
  color: var(--cftv-muted);
  font-weight: 800;
}
.cftv-grid { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.cftv-page.is-comfortable .cftv-grid { grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); gap: 15px; }
.cftv-card {
  contain: layout paint;
  border-color: var(--cftv-line);
  border-radius: 11px;
  background: var(--cftv-panel);
  box-shadow: 0 3px 11px rgb(22 39 34 / 5%);
}
.cftv-card:hover {
  border-color: color-mix(in srgb, var(--cftv-green) 25%, var(--cftv-line-strong));
  box-shadow: 0 12px 30px rgb(24 48 40 / 11%);
  transform: translateY(-2px);
}
.cftv-preview { background: color-mix(in srgb, var(--cftv-subtle) 88%, #d9e2de); }
.cftv-preview img { transition: opacity 180ms ease, transform 260ms ease, filter 180ms ease; }
.cftv-card:hover img { transform: scale(1.018); }
.cftv-placeholder { background: color-mix(in srgb, var(--cftv-subtle) 82%, #dfe7e3); }
.cftv-live {
  top: 8px;
  left: 8px;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 6px;
  background: rgb(10 19 16 / 72%);
  box-shadow: 0 3px 10px rgb(0 0 0 / 10%);
}
.cftv-expand { right: 8px; bottom: 8px; width: 29px; height: 29px; border-radius: 7px; }
.cftv-card-copy { min-height: 54px; padding: 9px 8px 9px 12px; }
.cftv-card-copy strong { color: var(--cftv-text); font-size: 12px; }
.cftv-card-copy span { color: var(--cftv-muted); font-size: 9px; }
.cftv-favorite { color: color-mix(in srgb, var(--cftv-muted) 72%, transparent); }
.cftv-favorite:hover { background: var(--cftv-subtle); color: var(--cftv-text); }
.cftv-empty { border-radius: 12px; background: var(--cftv-panel); }

:root[data-theme="dark"] .cftv-header,
:root[data-theme="dark"] .cftv-unit-tabs,
:root[data-theme="dark"] .cftv-controls { border-color: var(--cftv-line); }
:root[data-theme="dark"] .cftv-back,
:root[data-theme="dark"] .cftv-unit-tabs button b,
:root[data-theme="dark"] .cftv-sector > header > span { background: var(--cftv-subtle); color: var(--cftv-muted); }
:root[data-theme="dark"] .cftv-title p,
:root[data-theme="dark"] .cftv-summary em { color: var(--cftv-muted); }
:root[data-theme="dark"] .cftv-summary span,
:root[data-theme="dark"] .cftv-sector > header h2,
:root[data-theme="dark"] .cftv-card-copy strong { color: var(--cftv-text); }
:root[data-theme="dark"] .cftv-wall-button { border-color: #315f52; background: #1b332e; color: #76c0ad; }
:root[data-theme="dark"] .cftv-export-button { border-color: #d8e1de; background: #e6ecea; color: #17201e; }
:root[data-theme="dark"] .cftv-unit-tabs button:hover { background: var(--cftv-subtle); color: var(--cftv-text); }
:root[data-theme="dark"] .cftv-unit-tabs .cftv-problem-tab { border-color: #705636; background: #30271d; color: #e3b15e; }
:root[data-theme="dark"] .cftv-unit-tabs .cftv-problem-tab b { background: #49351f; color: #efbd69; }
:root[data-theme="dark"] .cftv-filter-button[aria-pressed="true"] { border-color: #7b652e; background: #332d1d; color: #e3bd58; }
:root[data-theme="dark"] .cftv-search svg { stroke: var(--cftv-muted); }
:root[data-theme="dark"] .cftv-refresh-button:hover,
:root[data-theme="dark"] .cftv-wall-button:hover,
:root[data-theme="dark"] .cftv-filter-button:hover,
:root[data-theme="dark"] .cftv-density-button:hover { border-color: var(--cftv-line-strong); background: var(--cftv-subtle); color: var(--cftv-text); }
:root[data-theme="dark"] .cftv-card.is-offline img { filter: saturate(.72) brightness(.76); }

/* Command center: contraste forte no topo e leitura mais rápida da grade. */
.portal-content.portal-cftv-workspace {
  background:
    radial-gradient(circle at 88% 2%, rgb(28 187 180 / 8%), transparent 28rem),
    #eef2f4;
}
.cftv-page { --cftv-shell-gap: clamp(12px, 1.35vw, 20px); background: transparent; }
.cftv-header {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(280px, 1fr) auto minmax(300px, 1fr);
  min-height: 112px;
  margin: var(--cftv-shell-gap) var(--cftv-shell-gap) 0;
  padding: 18px clamp(18px, 2vw, 30px);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 20px;
  background: linear-gradient(118deg, #0a1b2b 0%, #102d3d 58%, #0c5661 100%);
  box-shadow: 0 18px 42px rgb(17 39 54 / 16%);
  color: #fff;
}
.cftv-header::before,
.cftv-header::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgb(95 231 221 / 15%);
  border-radius: 50%;
  content: "";
}
.cftv-header::before { width: 340px; height: 340px; top: -235px; right: 3%; }
.cftv-header::after { width: 230px; height: 230px; right: 12%; bottom: -190px; }
.cftv-title { gap: 15px; }
.cftv-title > div { gap: 3px; }
.cftv-title p { color: #6ee0d6; font-size: 9px; letter-spacing: .14em; }
.cftv-title h1 { color: #fff; font-size: clamp(25px, 2vw, 32px); letter-spacing: -.035em; }
.cftv-title > div > span { color: rgb(226 240 242 / 66%); font-size: 10px; }
.cftv-back {
  width: 42px;
  height: 42px;
  border-color: rgb(255 255 255 / 14%);
  border-radius: 12px;
  background: rgb(255 255 255 / 8%);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(9px);
}
.cftv-back:hover { border-color: rgb(255 255 255 / 28%); background: rgb(255 255 255 / 14%); color: #fff; }
.cftv-summary { justify-content: center; gap: 7px; }
.cftv-summary > span {
  min-width: 88px;
  min-height: 58px;
  padding: 9px 12px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 12px;
  background: rgb(255 255 255 / 7%);
  color: #e9f5f5;
  backdrop-filter: blur(8px);
}
.cftv-summary > span > i { flex: none; background: #43ddb0; box-shadow: 0 0 0 4px rgb(67 221 176 / 13%); }
.cftv-summary strong { display: grid; gap: 1px; }
.cftv-summary b { color: #fff; font-size: 19px; line-height: 1; }
.cftv-summary small { color: rgb(229 241 242 / 61%); font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cftv-summary .is-attention b { color: #ffc47b; }
.cftv-actions { gap: 8px; }
.cftv-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  border-radius: 10px;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.cftv-actions button:hover { transform: translateY(-1px); }
.cftv-wall-button { border-color: #24c9bb; background: #20b9ad; color: #062c31; box-shadow: 0 8px 22px rgb(7 176 164 / 20%); }
.cftv-wall-button:hover { border-color: #67e5dc; background: #42d5ca; color: #05272b; }
.cftv-export-button { border-color: rgb(255 255 255 / 17%); background: rgb(255 255 255 / 11%); color: #fff; box-shadow: none; }
.cftv-export-button:hover { border-color: rgb(255 255 255 / 30%); background: rgb(255 255 255 / 17%); }
.cftv-refresh-button { border-color: rgb(255 255 255 / 12%); background: transparent; color: #d7e9e9; }
.cftv-refresh-button:hover { border-color: rgb(255 255 255 / 24%); background: rgb(255 255 255 / 8%); color: #fff; }

.cftv-unit-tabs {
  top: 72px;
  min-height: 56px;
  margin: 12px var(--cftv-shell-gap) 0;
  padding: 9px 11px;
  border: 1px solid #dce4e8;
  border-radius: 14px;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 8px 22px rgb(31 54 67 / 6%);
}
.cftv-unit-tabs button { height: 36px; padding-inline: 13px; border-radius: 9px; }
.cftv-unit-tabs button[aria-pressed="true"] { border-color: #86cec6; background: #dff4f1; color: #075e59; box-shadow: none; }
.cftv-unit-tabs .cftv-problem-tab { border-color: #f0d2aa; background: #fff8ec; }

.cftv-controls {
  top: 140px;
  margin: 10px var(--cftv-shell-gap) 0;
  padding: 10px;
  border: 1px solid #dce4e8;
  border-radius: 14px;
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 8px 22px rgb(31 54 67 / 5%);
}
.cftv-search input,
.cftv-controls select,
.cftv-filter-button,
.cftv-density-button { border-color: #d5e0e5; background: #f8fafb; box-shadow: none; }
.cftv-search input:focus,
.cftv-controls select:focus { border-color: #38aca3; background: #fff; box-shadow: 0 0 0 3px rgb(32 185 173 / 10%); }

.cftv-content { padding: var(--cftv-shell-gap); }
.cftv-sector > header { border-bottom: 0; }
.cftv-sector > header p { background: #e9f6f4; color: #08776e; }
.cftv-grid { gap: 14px; }
.cftv-card { border-color: #dce5e8; border-radius: 15px; box-shadow: 0 7px 22px rgb(28 53 67 / 7%); }
.cftv-card:hover { border-color: #8fcac4; box-shadow: 0 16px 34px rgb(23 57 68 / 13%); transform: translateY(-3px); }
.cftv-preview { background: #dfe7e9; }
.cftv-preview::after { height: 42%; background: linear-gradient(transparent, rgb(3 16 22 / 48%)); }
.cftv-live { padding: 5px 8px; border-radius: 999px; background: rgb(5 20 27 / 72%); }
.cftv-expand { border-radius: 9px; background: rgb(5 20 27 / 72%); }
.cftv-card-copy { min-height: 61px; padding: 10px 9px 10px 13px; }
.cftv-card-copy strong { color: #152b35; font-size: 13px; }
.cftv-card-copy span { margin-top: 4px; color: #71828a; font-size: 9px; }
.cftv-favorite { width: 34px; height: 34px; border: 1px solid transparent; border-radius: 9px; }
.cftv-favorite:hover { border-color: #dce5e8; background: #f2f6f7; }

:root[data-theme="dark"] .portal-content.portal-cftv-workspace { background: #07131c; }
:root[data-theme="dark"] .cftv-header { background: linear-gradient(118deg, #07131f, #0d2b3a 58%, #0b4b55); }
:root[data-theme="dark"] .cftv-title h1,
:root[data-theme="dark"] .cftv-summary b,
:root[data-theme="dark"] .cftv-card-copy strong { color: #f4fbfb; }
:root[data-theme="dark"] .cftv-title p { color: #67dcd2; }
:root[data-theme="dark"] .cftv-title > div > span,
:root[data-theme="dark"] .cftv-summary small { color: rgb(226 241 241 / 63%); }
:root[data-theme="dark"] .cftv-unit-tabs,
:root[data-theme="dark"] .cftv-controls { border-color: #243743; background: rgb(12 27 36 / 92%); }
:root[data-theme="dark"] .cftv-search input,
:root[data-theme="dark"] .cftv-controls select,
:root[data-theme="dark"] .cftv-filter-button,
:root[data-theme="dark"] .cftv-density-button { border-color: #29404c; background: #10242e; }
:root[data-theme="dark"] .cftv-card { border-color: #233a45; background: #0e222c; }

@media (max-width: 1000px) {
  .cftv-header { grid-template-columns: 1fr auto; min-height: 96px; }
  .cftv-actions { align-self: center; }
}
@media (max-width: 640px) {
  .cftv-header { min-height: 76px; margin: 8px 8px 0; padding: 10px 12px; border-radius: 15px; }
  .cftv-title > div > span { display: none; }
  .cftv-unit-tabs { margin: 8px 8px 0; border-radius: 12px; }
  .cftv-controls { margin: 8px 8px 0; border-radius: 12px; }
  .cftv-card { border-radius: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .cftv-card,
  .cftv-preview img,
  .cftv-placeholder { transition: none; }
  .cftv-card:hover { transform: none; }
}

.cftv-wall-setup { position: fixed; z-index: 1100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgb(15 23 21 / 68%); backdrop-filter: blur(9px); }
.cftv-wall-setup > section { width: min(960px, 96vw); max-height: 96vh; overflow: auto; border: 1px solid #d8dfdc; border-radius: 14px; background: #fff; color: #17201e; box-shadow: 0 32px 100px rgb(0 0 0 / 30%); }
.cftv-wall-setup [hidden] { display: none !important; }
.cftv-wall-setup header { display: flex; align-items: flex-start; justify-content: space-between; padding: 23px 25px 19px; border-bottom: 1px solid #e4e8e6; }
.cftv-wall-setup header p { margin: 0 0 4px; color: #e66f32; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cftv-wall-setup header h2 { margin: 0; font-size: 23px; letter-spacing: -.03em; }
.cftv-wall-setup header span { display: block; margin-top: 5px; color: #74817d; font-size: 11px; }
.cftv-wall-setup header button { width: 35px; height: 35px; border: 1px solid #dce2df; border-radius: 8px; background: #fff; color: #53605c; font-size: 20px; cursor: pointer; }
.cftv-wall-setup form { display: grid; gap: 17px; padding: 20px 25px 24px; }
.cftv-wall-setup fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.cftv-wall-setup legend,
.cftv-wall-sector > span { margin-bottom: 8px; color: #53615d; font-size: 10px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.cftv-wall-mode { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.cftv-wall-scope { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 9px; }
.cftv-wall-mode legend,
.cftv-wall-scope legend,
.cftv-wall-layout legend { grid-column: 1 / -1; }
.cftv-wall-mode label,
.cftv-wall-scope label,
.cftv-wall-layout label { position: relative; min-width: 0; cursor: pointer; }
.cftv-wall-mode input,
.cftv-wall-scope input,
.cftv-wall-layout input { position: absolute; opacity: 0; pointer-events: none; }
.cftv-wall-mode label > span,
.cftv-wall-scope label > span { display: grid; min-height: 72px; align-content: center; gap: 4px; padding: 12px 13px; border: 1px solid #dde3e0; border-radius: 9px; background: #fafbfb; transition: 140ms ease; }
.cftv-wall-mode b,
.cftv-wall-scope b { color: #27322f; font-size: 12px; }
.cftv-wall-mode small,
.cftv-wall-scope small { color: #7d8985; font-size: 9px; line-height: 1.35; }
.cftv-wall-mode input:checked + span,
.cftv-wall-scope input:checked + span { border-color: #549781; background: #eff7f4; box-shadow: 0 0 0 3px rgb(22 131 101 / 8%); }
.cftv-wall-mode input:checked + span b,
.cftv-wall-scope input:checked + span b { color: #12634d; }
.cftv-wall-sector { display: grid; }
.cftv-wall-sector select,
.cftv-wall-group select,
.cftv-wall-fixed-range select,
.cftv-wall-rotation select { width: 100%; height: 42px; padding: 0 11px; border: 1px solid #d6ddda; border-radius: 8px; outline: none; background: #fff; color: #22302c; font: 12px Aptos, "Segoe UI", sans-serif; }
.cftv-wall-group { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 9px; padding: 13px; border: 1px solid #d9e2de; border-radius: 9px; background: #f6faf8; }
.cftv-wall-group label,
.cftv-wall-group-save label { display: grid; gap: 6px; }
.cftv-wall-group label > span,
.cftv-wall-group-save label > span { color: #53615d; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cftv-wall-group button,
.cftv-wall-group-save button { height: 42px; padding: 0 13px; border: 1px solid #cfd9d5; border-radius: 8px; background: #fff; color: #53615d; font: 700 10px Aptos, sans-serif; cursor: pointer; }
.cftv-wall-group button:disabled,
.cftv-wall-group-save button:disabled { opacity: .45; cursor: not-allowed; }
.cftv-wall-manual { display: grid; gap: 10px; padding: 13px; border: 1px solid #d9e2de; border-radius: 9px; background: #f6faf8; }
.cftv-wall-manual-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cftv-wall-manual-heading > div { display: grid; gap: 3px; }
.cftv-wall-manual-heading strong { color: #26322e; font-size: 12px; }
.cftv-wall-manual-heading small { color: #7d8985; font-size: 9px; }
.cftv-wall-manual-heading > b { flex: none; color: #12634d; font-size: 10px; }
.cftv-wall-camera-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-height: 290px; overflow: auto; padding: 2px; }
.cftv-wall-camera-list label { position: relative; min-width: 0; cursor: pointer; }
.cftv-wall-camera-list input { position: absolute; opacity: 0; pointer-events: none; }
.cftv-wall-camera-list label > span { display: grid; gap: 2px; min-height: 50px; padding: 9px 10px; border: 1px solid #dce3e0; border-radius: 7px; background: #fff; }
.cftv-wall-camera-list span b,
.cftv-wall-camera-list span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cftv-wall-camera-list span b { color: #27322f; font-size: 10px; }
.cftv-wall-camera-list span small { color: #7d8985; font-size: 8px; }
.cftv-wall-camera-list input:checked + span { border-color: #549781; background: #eaf6f1; box-shadow: 0 0 0 2px rgb(22 131 101 / 8%); }
.cftv-wall-camera-list input:checked + span b { color: #12634d; }
.cftv-wall-group-save { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 9px; padding-top: 2px; }
.cftv-wall-group-save input { height: 42px; padding: 0 11px; border: 1px solid #cfd9d5; border-radius: 8px; outline: none; background: #fff; color: #22302c; font: 12px Aptos, sans-serif; }
.cftv-wall-rotation { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; align-items: center; gap: 4px 12px; }
.cftv-wall-rotation > span { color: #53615d; font-size: 10px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.cftv-wall-rotation select { grid-column: 2; grid-row: 1 / 3; }
.cftv-wall-rotation small { color: #85908c; font-size: 9px; }
.cftv-wall-layout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.cftv-wall-layout label > span { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; align-items: center; gap: 1px 11px; min-height: 64px; padding: 9px 11px; border: 1px solid #dde3e0; border-radius: 9px; background: #fff; transition: 140ms ease; }
.cftv-wall-layout label i { display: grid; grid-area: 1 / 1 / 3 / 2; grid-template-columns: repeat(2, 1fr); gap: 2px; width: 42px; height: 32px; padding: 3px; border-radius: 4px; background: #dce3e0; }
.cftv-wall-layout label i.is-3 { grid-template-columns: repeat(3, 1fr); }
.cftv-wall-layout label i.is-4 { grid-template-columns: repeat(4, 1fr); }
.cftv-wall-layout label i b { border-radius: 1px; background: #82918c; }
.cftv-wall-layout strong { align-self: end; color: #26322e; font-size: 12px; }
.cftv-wall-layout small { align-self: start; color: #85908c; font-size: 9px; }
.cftv-wall-layout input:checked + span { border-color: #549781; background: #eff7f4; box-shadow: 0 0 0 3px rgb(22 131 101 / 8%); }
.cftv-wall-layout input:checked + span i { background: #cfe3dc; }
.cftv-wall-layout input:checked + span i b { background: #21765d; }
.cftv-wall-fixed-range { display: grid; grid-template-columns: minmax(220px, 1fr) 145px 145px; align-items: end; gap: 10px; padding: 13px; border: 1px solid #d9e2de; border-radius: 9px; background: #f6faf8; }
.cftv-wall-fixed-range > div { display: grid; align-self: center; gap: 3px; }
.cftv-wall-fixed-range strong { color: #26322e; font-size: 12px; }
.cftv-wall-fixed-range small { color: #7d8985; font-size: 9px; }
.cftv-wall-fixed-range label { display: grid; gap: 5px; color: #53615d; font-size: 9px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.cftv-wall-fixed-range select:focus,
.cftv-wall-group select:focus,
.cftv-wall-group-save input:focus { border-color: #559b84; box-shadow: 0 0 0 3px rgb(22 131 101 / 9%); }
.cftv-wall-setup-summary { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 10px 13px; border-radius: 8px; background: #f2f5f4; }
.cftv-wall-setup-summary b { color: #27332f; font-size: 11px; }
.cftv-wall-setup-summary span { color: #78847f; font-size: 10px; }
.cftv-wall-setup-footer { display: flex; justify-content: flex-end; gap: 8px; }
.cftv-wall-setup-footer button { min-width: 110px; height: 39px; border: 1px solid #d8dfdc; border-radius: 7px; background: #fff; color: #52605b; font: 700 11px Aptos, sans-serif; cursor: pointer; }
.cftv-wall-setup-footer button.is-primary { border-color: #17231f; background: #17231f; color: #fff; }
.cftv-wall-setup-footer button:disabled { opacity: .4; cursor: not-allowed; }

.cftv-wall { position: fixed; z-index: 1200; inset: 0; padding: 8px; background: #070b0a; }
.cftv-wall > section { display: grid; grid-template-rows: 58px minmax(0, 1fr); width: 100%; height: 100%; overflow: hidden; border: 1px solid #26332f; border-radius: 9px; background: #080d0b; color: #edf3f1; }
.cftv-wall > section:fullscreen { border: 0; border-radius: 0; }
.cftv-wall header { display: grid; grid-template-columns: minmax(240px, 1fr) auto minmax(300px, 1fr); align-items: center; gap: 14px; padding: 8px 11px 8px 15px; border-bottom: 1px solid #27332f; background: #101815; }
.cftv-wall-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cftv-wall-brand > i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #32d39d; box-shadow: 0 0 0 4px rgb(50 211 157 / 11%); }
.cftv-wall-brand p { margin: 0 0 2px; color: #7f918b; font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cftv-wall-brand h2 { overflow: hidden; margin: 0; color: #f1f5f3; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.cftv-wall-meta { display: flex; align-items: center; gap: 12px; color: #8e9d98; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.cftv-wall-meta span { padding-right: 12px; border-right: 1px solid #32403b; }
.cftv-wall-meta b { color: #43d8a8; }
.cftv-wall-meta time { min-width: 132px; color: #d7dfdc; font-variant-numeric: tabular-nums; }
.cftv-wall-actions { display: flex; justify-content: flex-end; gap: 5px; }
.cftv-wall-live-rotation { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 5px 0 9px; border: 1px solid #36453f; border-radius: 6px; background: #18231f; }
.cftv-wall-live-rotation span { color: #82918c; font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cftv-wall-live-rotation select { height: 26px; border: 0; outline: 0; background: #18231f; color: #e1e8e5; font: 700 9px Aptos, sans-serif; cursor: pointer; }
.cftv-wall-fixed-badge { display: inline-flex; align-items: center; height: 34px; padding: 0 11px; border: 1px solid #315346; border-radius: 6px; background: #173128; color: #77dfbb; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.cftv-wall-actions button { height: 34px; min-width: 34px; padding: 0 10px; border: 1px solid #36453f; border-radius: 6px; background: #18231f; color: #dce5e1; font: 700 10px Aptos, sans-serif; cursor: pointer; }
.cftv-wall-actions [data-cftv-wall-prev],
.cftv-wall-actions [data-cftv-wall-next],
.cftv-wall-actions [data-cftv-wall-pause],
.cftv-wall-actions [data-cftv-wall-close] { padding: 0; font-size: 17px; }
.cftv-wall-actions button:hover { border-color: #536760; background: #22312c; }
.cftv-wall main { position: relative; min-width: 0; min-height: 0; background: #020403; }
.cftv-wall-page { position: absolute; inset: 3px; display: grid; grid-template-columns: repeat(var(--wall-columns), minmax(0, 1fr)); grid-template-rows: repeat(var(--wall-rows), minmax(0, var(--wall-row-height, 1fr))); align-content: center; gap: 3px; opacity: 0; transition: opacity 180ms ease; }
.cftv-wall-page.is-active { z-index: 2; opacity: 1; }
.cftv-wall-page.is-preparing { z-index: 0; pointer-events: none; }
.cftv-wall-page.is-outgoing { z-index: 1; opacity: 1; pointer-events: none; }
.cftv-wall-tile { position: relative; min-width: 0; min-height: 0; overflow: hidden; padding: 0; border: 0; background: #0b110f; color: #fff; cursor: pointer; }
.cftv-wall-tile > img,
.cftv-wall-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #050807; }
.cftv-wall-tile > img { opacity: 1; background-image: var(--cftv-poster); background-position: center; background-size: cover; background-repeat: no-repeat; filter: contrast(1.06) saturate(1.08) brightness(1.07); }
.cftv-wall-tile video { z-index: 1; opacity: 0; filter: contrast(1.055) saturate(1.07) brightness(1.055); transition: opacity 180ms ease; }
.cftv-wall-tile.is-online video { opacity: 1; }
.cftv-retained-frame { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cftv-modal-image .cftv-retained-frame { object-fit: contain; }
.cftv-retained-frame[hidden] { display: none; }
.cftv-wall-loading { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: #f1f5f3; background: transparent; font-size: 9px; text-shadow: 0 1px 5px #000; }
.cftv-wall-loading small { padding: 5px 7px; border-radius: 5px; background: rgb(5 12 10 / 68%); backdrop-filter: blur(4px); }
.cftv-wall-loading i { width: 18px; height: 18px; border: 2px solid #26342f; border-top-color: #42d1a2; border-radius: 50%; animation: cftv-stream-spin .75s linear infinite; }
.cftv-wall-tile.is-online .cftv-wall-loading,
.cftv-wall-tile.is-compatible .cftv-wall-loading,
.cftv-wall-tile.has-preview .cftv-wall-loading { display: none; }
.cftv-wall-tile.is-offline .cftv-wall-loading { background: transparent; color: #fff; }
.cftv-wall-tile.is-offline .cftv-wall-loading i { border-color: #9d5750; animation: none; }
.cftv-wall-signal { position: absolute; z-index: 3; top: 7px; left: 7px; display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 4px; background: rgb(5 11 9 / 72%); color: #dce4e1; font-size: 7px; letter-spacing: .07em; text-transform: uppercase; backdrop-filter: blur(5px); }
.cftv-wall-signal i { width: 5px; height: 5px; border-radius: 50%; background: #dfaa3c; }
.cftv-wall-tile.is-online .cftv-wall-signal i { background: #3dd2a1; box-shadow: 0 0 0 2px rgb(61 210 161 / 15%); }
.cftv-wall-tile.is-compatible .cftv-wall-signal i { background: #dfaa3c; box-shadow: 0 0 0 2px rgb(223 170 60 / 15%); }
.cftv-wall-tile.is-offline .cftv-wall-signal i { background: #e55e55; }
.cftv-wall-copy { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: grid; gap: 1px; padding: 22px 9px 8px; background: linear-gradient(transparent, rgb(3 8 6 / 86%)); text-align: left; }
.cftv-wall-copy strong { overflow: hidden; color: #f2f5f4; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.cftv-wall-copy small { overflow: hidden; color: #9aa7a2; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.cftv-wall.is-display-fullscreen { padding: 0; }
.cftv-wall.is-display-fullscreen > section { grid-template-rows: minmax(0, 1fr); border: 0; border-radius: 0; }
.cftv-wall.is-display-fullscreen header,
.cftv-wall.is-display-fullscreen .cftv-wall-copy,
.cftv-wall.is-display-fullscreen .cftv-wall-loading small { display: none; }
.cftv-wall-exit { display: none; position: absolute; top: 10px; right: 10px; z-index: 6; width: 40px; height: 40px; padding: 0; border: 1px solid #ffffff70; border-radius: 8px; background: #141a1dd9; color: #fff; font-size: 25px; cursor: pointer; }
.cftv-wall.is-display-fullscreen .cftv-wall-exit { display: grid; place-items: center; }
.cftv-wall-exit:focus-visible { outline: 3px solid var(--ers-orange, #f58345); outline-offset: 3px; }
.cftv-wall.is-display-fullscreen .cftv-wall-signal { top: 7px; left: 7px; width: 7px; height: 7px; gap: 0; padding: 0; background: transparent; backdrop-filter: none; }
.cftv-wall.is-display-fullscreen .cftv-wall-signal i { width: 7px; height: 7px; }
.cftv-wall.is-display-fullscreen .cftv-wall-signal b { display: none; }
.cftv-wall-tile:hover::after { position: absolute; z-index: 4; inset: 0; border: 2px solid rgb(65 210 164 / 62%); content: ""; pointer-events: none; }
.cftv-wall-empty { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; place-content: center; justify-items: center; gap: 6px; color: #80908a; text-align: center; }
.cftv-wall-empty strong { color: #e5ece9; font-size: 16px; }
.cftv-wall-empty span { font-size: 10px; }

.cftv-modal,
.cftv-export-modal { position: fixed; z-index: 1300; inset: 0; display: grid; place-items: center; padding: 22px; background: rgb(14 20 18 / 72%); backdrop-filter: blur(9px); }
.cftv-modal > section { width: min(1420px, 97vw); overflow: hidden; border: 1px solid #48534f; border-radius: 10px; background: #101614; color: white; box-shadow: 0 30px 90px rgb(0 0 0 / 42%); }
.cftv-modal header,
.cftv-modal footer { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 10px 14px; }
.cftv-modal header { border-bottom: 1px solid #28312e; }
.cftv-modal header p { margin: 0 0 2px; color: #f2945f; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cftv-modal header h2 { margin: 0; color: #f3f7f5; font-size: 17px; }
.cftv-modal header > div:last-child { display: flex; gap: 6px; }
.cftv-modal button { height: 34px; padding: 0 11px; border: 1px solid #3b4844; border-radius: 6px; background: #1b2522; color: #e7ecea; cursor: pointer; }
.cftv-modal button.is-primary { border-color: #e8e2dc; background: #fff; color: #1a2421; }
.cftv-modal [data-cftv-modal-close] { width: 34px; padding: 0; font-size: 20px; }
.cftv-modal-image { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: #050807; }
.cftv-modal-image > span { z-index: 1; display: inline-flex; align-items: center; gap: 10px; color: #98a5a0; font-size: 12px; }
.cftv-modal-image > span::before { width: 16px; height: 16px; border: 2px solid rgb(255 255 255 / 18%); border-top-color: #68d8b2; border-radius: 50%; content: ""; animation: cftv-stream-spin .75s linear infinite; }
.cftv-modal.is-online .cftv-modal-image > span { display: none; }
.cftv-modal-image img,
.cftv-modal-image video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 1; filter: contrast(1.06) saturate(1.08) brightness(1.06); }
.cftv-modal-image img { background-position: center; background-size: contain; background-repeat: no-repeat; }
.cftv-modal-image video[hidden],
.cftv-modal-image img[hidden] { display: none; }
.cftv-modal-image [data-cftv-enhance] { position: absolute; z-index: 3; right: 12px; bottom: 12px; padding: 5px 7px; border: 1px solid rgb(83 222 178 / 28%); border-radius: 4px; background: rgb(7 19 16 / 74%); color: #6ee1bc; font-size: 8px; font-weight: 800; letter-spacing: .1em; backdrop-filter: blur(5px); }
.cftv-modal footer { color: #aab8b3; font-size: 12px; }
.cftv-modal footer span { display: flex; align-items: center; gap: 7px; }
@keyframes cftv-stream-spin { to { transform: rotate(360deg); } }

.cftv-export-modal { --cftv-text: #17201e; --cftv-orange: #e66f32; }
.cftv-export-modal > section { display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(680px, 96vw); max-height: calc(100vh - 32px); overflow: hidden; border: 1px solid #d9dfdc; border-radius: 13px; background: #fff; color: var(--cftv-text); box-shadow: 0 30px 100px rgb(0 0 0 / 28%); }
.cftv-export-modal header { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 24px 18px; border-bottom: 1px solid #e3e7e5; }
.cftv-export-modal header p { margin: 0 0 4px; color: var(--cftv-orange); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cftv-export-modal header h2 { margin: 0; color: #1b2522; font-size: 22px; letter-spacing: -.025em; }
.cftv-export-modal header span { display: block; margin-top: 5px; color: #73807c; font-size: 11px; }
.cftv-export-modal header button { width: 34px; height: 34px; border: 1px solid #dde2e0; border-radius: 7px; background: #fff; color: #54615d; font-size: 20px; cursor: pointer; }
.cftv-export-modal form { display: grid; gap: 16px; overflow-y: auto; padding: 20px 24px 24px; }
.cftv-export-camera-picker { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(280px, 1.2fr); gap: 10px; align-items: start; }
.cftv-export-field { display: grid; gap: 6px; }
.cftv-export-field > span,
.cftv-export-quick > span { color: #56635f; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .045em; }
.cftv-export-field select,
.cftv-export-field input { width: 100%; height: 43px; padding: 0 11px; border: 1px solid #d5dcda; border-radius: 8px; outline: none; background: #fff; color: #1f2a27; font: 12px Aptos, "Segoe UI", sans-serif; }
.cftv-export-field select:focus,
.cftv-export-field input:focus { border-color: #66a08f; box-shadow: 0 0 0 3px rgb(22 131 101 / 9%); }
.cftv-export-camera-picker select { height: 136px; padding: 5px; }
.cftv-export-camera-picker option { padding: 5px 8px; }
.cftv-export-camera-picker optgroup { color: #697771; font-weight: 800; }
.cftv-export-field input:disabled { background: #f3f5f4; color: #9aa39f; cursor: not-allowed; }
.cftv-export-preview { overflow: hidden; border: 1px solid #ced8d4; border-radius: 9px; background: #09100e; box-shadow: 0 8px 24px rgb(15 31 26 / 10%); }
.cftv-export-preview > div { position: relative; display: grid; place-items: center; height: 210px; overflow: hidden; background: #070c0b; }
.cftv-export-preview img,
.cftv-export-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cftv-export-preview img { opacity: 1; background-position: center; background-size: cover; background-repeat: no-repeat; filter: contrast(1.05) brightness(1.06) saturate(1.07); }
.cftv-export-preview img[hidden],
.cftv-export-preview video[hidden],
.cftv-export-preview [hidden] { display: none; }
.cftv-export-preview [data-cftv-export-preview-loading] { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; background: rgb(4 11 9 / 72%); color: #d5dfdc; font-size: 10px; backdrop-filter: blur(5px); }
.cftv-export-preview [data-cftv-export-preview-loading] i { width: 12px; height: 12px; border: 2px solid rgb(255 255 255 / 22%); border-top-color: #4ed2a7; border-radius: 50%; animation: cftv-export-spin .75s linear infinite; }
.cftv-export-preview footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 35px; padding: 7px 10px; border-top: 1px solid #24312d; color: #9aa7a3; }
.cftv-export-preview footer span { display: flex; align-items: center; gap: 6px; font-size: 9px; text-transform: uppercase; letter-spacing: .035em; }
.cftv-export-preview footer span > i { width: 6px; height: 6px; border-radius: 50%; background: #d39a42; box-shadow: 0 0 0 3px rgb(211 154 66 / 12%); }
.cftv-export-preview.is-online footer span > i { background: #31c999; box-shadow: 0 0 0 3px rgb(49 201 153 / 12%); }
.cftv-export-preview.is-offline footer span > i { background: #dc655b; box-shadow: 0 0 0 3px rgb(220 101 91 / 12%); }
.cftv-export-preview footer small { overflow: hidden; color: #7f8e89; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.cftv-export-availability { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border: 1px solid #dbe3e0; border-radius: 9px; background: #f6f9f8; }
.cftv-export-availability > i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #97a39f; box-shadow: 0 0 0 4px rgb(151 163 159 / 12%); }
.cftv-export-availability > div { display: grid; gap: 2px; }
.cftv-export-availability strong { color: #26332f; font-size: 11px; }
.cftv-export-availability span { color: #74817d; font-size: 10px; }
.cftv-export-availability.is-loading > i { animation: cftv-pulse 1s ease-in-out infinite; }
.cftv-export-availability.is-ready { border-color: #cce4db; background: #f1f8f5; }
.cftv-export-availability.is-ready > i { background: #18a778; box-shadow: 0 0 0 4px rgb(24 167 120 / 12%); }
.cftv-export-availability.is-error { border-color: #efd5cf; background: #fff6f4; }
.cftv-export-availability.is-error > i { background: #d65d46; box-shadow: 0 0 0 4px rgb(214 93 70 / 11%); }
.cftv-export-period { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cftv-export-quick { display: flex; align-items: center; gap: 7px; }
.cftv-export-quick > span { margin-right: 3px; }
.cftv-export-quick button { height: 31px; padding: 0 10px; border: 1px solid #dce2df; border-radius: 6px; background: #f7f9f8; color: #4f5d58; font: 700 10px Aptos, sans-serif; cursor: pointer; }
.cftv-export-quick button:hover { border-color: #bac8c3; background: #eff4f2; }
.cftv-export-quick button:disabled { opacity: .42; cursor: not-allowed; }
.cftv-export-hint { margin: -7px 0 0; color: #899490; font-size: 10px; }
.cftv-export-progress { padding: 12px; border-radius: 8px; background: #f3f7f5; }
.cftv-export-progress > div { height: 6px; overflow: hidden; border-radius: 10px; background: #dce6e2; }
.cftv-export-progress i { display: block; width: 4%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1f8268, #38b890, #1f8268); background-size: 180% 100%; transition: width 240ms ease; animation: cftv-export-shimmer 1.1s linear infinite; }
.cftv-export-progress p { margin: 8px 0 0; color: #53635e; font-size: 11px; }
.cftv-export-footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 3px; }
.cftv-export-footer button { display: inline-flex; align-items: center; justify-content: center; min-width: 112px; height: 39px; padding: 0 15px; border: 1px solid #d9dfdc; border-radius: 7px; background: #fff; color: #4d5a56; font: 700 11px Aptos, sans-serif; cursor: pointer; }
.cftv-export-footer .is-primary { border-color: #17231f; background: #17231f; color: #fff; }
.cftv-export-footer .is-primary:hover { background: #293934; }
.cftv-export-footer button:disabled { cursor: not-allowed; opacity: .52; }
.cftv-export-footer .is-primary.is-generating { gap: 8px; opacity: 1; }
.cftv-export-footer .is-primary.is-generating::before { width: 12px; height: 12px; border: 2px solid rgb(255 255 255 / 35%); border-top-color: #fff; border-radius: 50%; content: ""; animation: cftv-export-spin .75s linear infinite; }
.cftv-export-footer .is-primary.is-ready { border-color: #157a5f; background: #157a5f; }
@keyframes cftv-export-spin { to { transform: rotate(360deg); } }
@keyframes cftv-export-shimmer { to { background-position: -180% 0; } }
body.cftv-modal-open { overflow: hidden; }

@media (max-width: 720px) { .cftv-export-camera-picker { grid-template-columns: 1fr; } }

@media (min-width: 1800px) { .cftv-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } }
@media (max-width: 1000px) {
  .cftv-header { grid-template-columns: 1fr auto; }
  .cftv-summary { display: none; }
  .cftv-controls { grid-template-columns: minmax(180px, 1fr) minmax(150px, 220px) auto 40px; }
  .cftv-controls > p { display: none; }
  .cftv-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 640px) {
  .cftv-page { min-height: calc(100vh - 64px); }
  .cftv-header { min-height: 60px; padding: 8px 10px; }
  .cftv-title h1 { font-size: 20px; }
  .cftv-title p { display: none; }
  .cftv-refresh-button { width: 36px; padding: 0; }
  .cftv-refresh-button span { display: none; }
  .cftv-export-button { padding: 0 10px; }
  .cftv-wall-button { width: 36px; padding: 0; justify-content: center; font-size: 0; }
  .cftv-wall-button span { font-size: 16px; }
  .cftv-unit-tabs { top: 64px; padding: 6px 8px; }
  .cftv-unit-divider { height: 20px; }
  .cftv-controls { position: static; grid-template-columns: 1fr 40px; padding: 8px; }
  .cftv-search { grid-column: 1; grid-row: 1; }
  .cftv-density-button { grid-column: 2; grid-row: 1; }
  .cftv-controls select { grid-column: 1; grid-row: 2; }
  .cftv-filter-button { grid-column: 2; grid-row: 2; width: 40px; overflow: hidden; padding: 0; font-size: 0; }
  .cftv-filter-button::first-letter { font-size: 16px; }
  .cftv-content { padding: 8px; }
  .cftv-sectors { gap: 18px; }
  .cftv-grid,
  .cftv-page.is-comfortable .cftv-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .cftv-card-copy { min-height: 43px; padding: 6px; }
  .cftv-card-copy strong { font-size: 10px; }
  .cftv-favorite { display: none; }
  .cftv-modal { padding: 0; }
  .cftv-modal > section { width: 100vw; border-radius: 0; }
  .cftv-modal header [data-cftv-modal-fullscreen] { display: none; }
  .cftv-modal header .is-primary { font-size: 0; }
  .cftv-modal header .is-primary::before { content: "↓ MP4"; font-size: 11px; }
  .cftv-export-modal { padding: 10px; }
  .cftv-export-modal header { padding: 18px; }
  .cftv-export-modal form { padding: 17px 18px 20px; }
  .cftv-export-preview > div { height: 165px; }
  .cftv-export-period { grid-template-columns: 1fr; }
  .cftv-export-quick { flex-wrap: wrap; }
  .cftv-wall-setup { padding: 8px; }
  .cftv-wall-setup header { padding: 18px; }
  .cftv-wall-setup form { padding: 17px 18px 20px; }
  .cftv-wall-scope { grid-template-columns: 1fr; }
  .cftv-wall-mode { grid-template-columns: 1fr; }
  .cftv-wall-fixed-range { grid-template-columns: 1fr 1fr; }
  .cftv-wall-fixed-range > div { grid-column: 1 / -1; }
  .cftv-wall-camera-list { grid-template-columns: 1fr; max-height: 250px; }
  .cftv-wall-group,
  .cftv-wall-group-save { grid-template-columns: 1fr; }
  .cftv-wall-scope label > span { min-height: 55px; }
  .cftv-wall-rotation { grid-template-columns: 1fr; }
  .cftv-wall-rotation select { grid-column: 1; grid-row: auto; }
  .cftv-wall-layout label > span { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .cftv-wall-layout label i { grid-area: auto; }
  .cftv-wall-setup-summary { align-items: flex-start; flex-direction: column; gap: 3px; }
  .cftv-wall { padding: 0; }
  .cftv-wall > section { grid-template-rows: auto minmax(0, 1fr); border: 0; border-radius: 0; }
  .cftv-wall header { grid-template-columns: 1fr auto; min-height: 60px; padding: 7px 8px; }
  .cftv-wall-meta { display: none; }
  .cftv-wall-live-rotation span { display: none; }
  .cftv-wall-actions [data-cftv-wall-fullscreen] { display: none; }
  .cftv-wall main { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .cftv-wall-tile:nth-child(n+5) { display: none; }
}

/* Live workspace: reserve space for video, not decorative panels. */
.cftv-header { min-height: 62px; padding: 9px 16px; border-radius: 0; margin: 0; box-shadow: none; }
.cftv-title h1 { font-size: 21px; }
.cftv-title > div > span { font-size: 10px; }
.cftv-title p { display: none; }
.cftv-summary > span { min-height: 36px; min-width: 72px; padding: 4px 8px; border: 0; background: transparent; backdrop-filter: none; }
.cftv-summary b { font-size: 17px; }
.cftv-actions button { height: 34px; box-shadow: none; }
.cftv-unit-tabs { min-height: 42px; margin: 0; padding: 5px 12px; border-radius: 0; box-shadow: none; }
.cftv-controls { top: 114px; margin: 0; padding: 7px 12px; border-radius: 0; box-shadow: none; backdrop-filter: none; }
.cftv-content { padding: 12px; }
.cftv-sectors { gap: 16px; }
.cftv-page:not(.is-comfortable) .cftv-sectors { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.cftv-page:not(.is-comfortable) .cftv-sector:not([hidden]),
.cftv-page:not(.is-comfortable) .cftv-sector:not([hidden]) > .cftv-grid { display: contents; }
.cftv-page:not(.is-comfortable) .cftv-sector > header { display: none; }
.cftv-card { box-shadow: none; border-radius: 6px; }
.cftv-preview { position: relative; background: #0b1418; }
.cftv-preview > video { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: contain; background: #0b1418; }
.cftv-preview > video[hidden] { display: none; }
.cftv-live, .cftv-expand { z-index: 4; }
.cftv-card .cftv-live i { background: #d6a24c; box-shadow: none; animation: none; }
.cftv-card.is-online .cftv-live i { background: #41d6a1; }
.cftv-card-copy { min-height: 42px; padding: 7px 9px; }
.cftv-card-copy strong { font-size: 11px; }
.cftv-modal [data-cftv-retry] { border: 1px solid #42505a; border-radius: 6px; padding: 5px 12px; background: transparent; color: inherit; cursor: pointer; }
.cftv-modal.is-online [data-cftv-stream-loading] { display: none; }
.cftv-modal .cftv-modal-image video[hidden] { display: none; }
.cftv-modal footer button, .cftv-insights button { padding: 5px 10px; border: 1px solid #56646e; border-radius: 5px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.cftv-insights { padding: 10px 16px; background: #13232b; color: #e8eff3; border-top: 1px solid #32434c; }
.cftv-insights[hidden] { display: none; }
.cftv-insights button[hidden] { display: none; }
.cftv-insights > div { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 11px; }
.cftv-insights > div > span { flex: 1; color: #a9bbc3; font-size: 10px; }
.cftv-insights p { margin: 7px 0 0; font-size: 12px; }
.cftv-modal > section { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
.cftv-modal .cftv-modal-image { flex: 1; min-height: 0; height: auto; max-height: 72dvh; aspect-ratio: 16 / 9; }
.cftv-modal header, .cftv-modal footer, .cftv-insights { flex-shrink: 0; }
.cftv-insights { max-height: 130px; overflow-y: auto; }
[data-live-state="preview"] .cftv-wall-signal i { background: #d6a24c; }
@media (max-width: 760px) {
  .cftv-page:not(.is-comfortable) .cftv-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .cftv-header { grid-template-columns: 1fr auto; gap: 6px; }
  .cftv-summary { display: none; }
  .cftv-title > div > span { display: none; }
  .cftv-title h1 { font-size: 18px; }
  .cftv-controls { top: 114px; }
}