@font-face {
  font-family: "Pretendard Web";
  src: url("/static/fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard Web Bold";
  src: url("/static/fonts/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #d6e0ee;
  --panel: #f5f8fc;
  --panel-strong: #e8eef7;
  --line: #94abc7;
  --line-strong: #2e4f7d;
  --text: #10243d;
  --text-soft: #4e6788;
  --danger: #d31717;
  --danger-soft: #ffe5e5;
  --success: #2f8e2f;
  --success-soft: #e5f7e5;
  --warning: #f1b500;
  --warning-soft: #fff3c5;
  --info: #1176c7;
  --info-soft: #ddecff;
  --pending-soft: #fff3c5;
  --disabled-soft: #d7dbe2;
  --shadow: 0 0.35rem 1rem rgba(10, 36, 61, 0.12);
  --dense-scale: 1;
  --font-xl: clamp(1.35rem, 1.1vw, 2.2rem);
  --font-lg: clamp(1rem, 0.78vw, 1.3rem);
  --font-md: clamp(0.82rem, 0.62vw, 1rem);
  --font-sm: clamp(0.72rem, 0.5vw, 0.88rem);
  --font-xs: clamp(0.64rem, 0.42vw, 0.78rem);
  --live-current: #0f8f3e;
  --live-confirmed: #7bd86f;
  --live-pending: #d8dde5;
  --live-missing: #c91515;
  --live-live: #0d6fc9;
}

[data-font-scale-scope] {
  --panel-font-scale: 1;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard Web", "Pretendard Web Bold", sans-serif;
  text-wrap: pretty;
}

button,
input,
select,
textarea {
  font: inherit;
}

body {
  line-height: 1.35;
}

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(circle at top, rgba(30, 82, 145, 0.24), transparent 40%),
    linear-gradient(180deg, #08111d 0%, #10243d 100%);
}

.login-panel {
  width: min(100%, 30rem);
  display: grid;
  gap: 1rem;
  padding: 2rem 2rem 1.75rem;
  background: rgba(10, 19, 32, 0.94);
  border: 1px solid rgba(148, 171, 199, 0.4);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.32);
  color: #f4f8ff;
}

.login-panel--blocked {
  width: min(100%, 36rem);
}

.login-logo {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.login-panel h1 {
  margin: 0;
  font-size: clamp(1.6rem, 1.5vw, 2.1rem);
  font-weight: 800;
}

.login-panel p,
.login-helper,
.login-hint {
  margin: 0;
  color: rgba(244, 248, 255, 0.86);
  font-size: 0.98rem;
  line-height: 1.55;
}

.login-hint {
  padding: 0.8rem 1rem;
  background: rgba(18, 36, 60, 0.76);
  border: 1px solid rgba(113, 148, 191, 0.34);
  color: #d8e6fb;
  word-break: break-word;
}

.login-error {
  padding: 0.75rem 0.9rem;
  background: rgba(164, 26, 26, 0.16);
  border: 1px solid rgba(232, 79, 79, 0.42);
  color: #ffd7d7;
  font-weight: 700;
}

.login-error--blocked {
  background: rgba(179, 30, 30, 0.2);
  color: #ffe0e0;
}

.login-form {
  display: grid;
  gap: 0.75rem;
}

.login-form input {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(147, 171, 200, 0.42);
  background: rgba(248, 251, 255, 0.96);
  color: #10243d;
}

.login-form button {
  min-height: 3rem;
  border: 0;
  background: #1c76d2;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.login-form button:hover {
  background: #1664b3;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.monitor-app {
  height: 100vh;
  display: grid;
  grid-template-rows: 8.5vh minmax(0, 1fr);
  overflow: hidden;
}

.topbar {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(13rem, 16rem) minmax(26rem, 38rem) minmax(34rem, 1fr) minmax(17rem, 21rem);
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.35rem 0.45rem;
  background: #05070a;
  border-bottom: 0.2rem solid #1a2330;
}

.topbar__brand,
.topbar__clock,
.topbar__status,
.topbar__actions {
  min-width: 0;
  background: #0a0d12;
  border: 1px solid rgba(110, 132, 166, 0.32);
  padding: 0.25rem 0.45rem;
}

.topbar__brand {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  justify-content: flex-start;
}

.topbar__logo {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  flex: 0 0 auto;
  image-rendering: -webkit-optimize-contrast;
}

.topbar__brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar__brand-text strong {
  font-size: clamp(1.05rem, 0.92vw, 1.45rem);
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.topbar__brand-text span {
  font-size: clamp(0.7rem, 0.5vw, 0.84rem);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.15;
}

.topbar__clock,
.topbar__status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.topbar__clock-frame {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(12rem, 0.95fr) minmax(16rem, 1.35fr);
  align-items: center;
  background: #020304;
  border: 2px solid rgba(255, 255, 255, 0.14);
}

.topbar__time {
  width: 100%;
  padding: 0.2rem 0.7rem;
  font-family: "Pretendard Web", "Pretendard Web Bold", sans-serif;
  font-size: clamp(2.15rem, 2.35vw, 4rem);
  font-weight: 800;
  color: #ff3b30;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 0.3rem rgba(255, 59, 48, 0.7), 0 0 0.85rem rgba(255, 59, 48, 0.45);
  font-variant-numeric: tabular-nums;
}

.topbar__date,
.topbar__status-title {
  color: rgba(255, 255, 255, 0.92);
}

.topbar__date {
  padding: 0.2rem 0.8rem;
  font-family: "Pretendard Web", "Pretendard Web Bold", sans-serif;
  font-size: clamp(1.45rem, 1.45vw, 2.6rem);
  font-weight: 800;
  color: #ffe100;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.topbar__status {
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 0.35rem;
  justify-items: stretch;
}

.topbar__status-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.45rem;
}

.topbar__status-title {
  display: flex;
  align-items: center;
  padding: 0 0.8rem;
  background: #0b0b0b;
  font-size: clamp(1.2rem, 1.05vw, 1.85rem);
  font-weight: 800;
  white-space: nowrap;
}

.topbar__status-summary-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.topbar__status-card {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.35rem 0.55rem;
  font-weight: 800;
  color: #fff;
}

.topbar__status-card span {
  font-size: clamp(0.95rem, 0.76vw, 1.12rem);
}

.topbar__status-card strong {
  font-size: clamp(1.1rem, 0.92vw, 1.4rem);
}

.topbar__status-card--normal {
  background: #73b62f;
}

.topbar__status-card--abnormal {
  background: #e21a1a;
}

.topbar__status-card--pending {
  background: #80858d;
}

.topbar__sync-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
}

.topbar__sync-label {
  font-size: clamp(0.86rem, 0.66vw, 1rem);
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
}

.topbar__sync-chips {
  display: flex;
  gap: 0.35rem;
  min-width: 0;
}

.topbar__sync-chip {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.55rem;
  background: #406bb5;
  color: #fff;
  font-size: clamp(0.78rem, 0.6vw, 0.95rem);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  align-items: stretch;
}

.inline-form {
  margin: 0;
}

.action-button,
.mini-button {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--text);
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.action-button:hover,
.mini-button:hover {
  background: #ebf3ff;
}

.action-button--accent {
  background: #78a73f;
  color: #fff;
  border-color: #5d842e;
}

.action-button--small,
.mini-button {
  padding: 0.28rem 0.55rem;
  font-size: var(--font-sm);
}

.icon-action-button {
  aspect-ratio: 1 / 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(143, 176, 224, 0.45);
  background: #ffffff;
  color: #092847;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.icon-action-button:hover {
  background: #e8f2ff;
  border-color: #86b1e8;
  transform: translateY(-1px);
}

.icon-action-button svg {
  width: 48%;
  height: 48%;
  fill: currentColor;
}

.icon-action-button--accent {
  background: #78a73f;
  color: #fff;
  border-color: #5d842e;
}

.icon-action-button--accent:hover {
  background: #688f34;
  border-color: #567c2a;
}

.icon-action-button--muted {
  background: #7a8797;
  color: #fff;
  border-color: #5c6977;
}

.icon-action-button--muted:hover {
  background: #687484;
  border-color: #55606d;
}

.icon-action-button--wm {
  min-height: 2.6rem;
  width: clamp(2.6rem, 3.1vw, 3.4rem);
  background: #0f1013;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}

.icon-action-button--wm:hover {
  background: #1d2127;
  border-color: rgba(255, 255, 255, 0.28);
}

.context-menu {
  position: fixed;
  z-index: 1200;
  min-width: 11rem;
  background: #111823;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.28);
  padding: 0.3rem;
}

.context-menu[hidden] {
  display: none !important;
}

.context-menu__button {
  display: flex;
  width: 100%;
  border: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}

.context-menu__button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.context-info {
  position: fixed;
  z-index: 1195;
  min-width: 16rem;
  max-width: min(28rem, calc(100vw - 2rem));
  background: #f7fbff;
  border: 1px solid #8fb6df;
  box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.2);
  padding: 0.7rem 0.8rem;
  color: #17314d;
  white-space: pre-wrap;
  word-break: keep-all;
  line-height: 1.45;
}

.context-info[hidden] {
  display: none !important;
}

.context-info__title {
  margin: 0 0 0.45rem;
  font-size: var(--font-md);
  font-weight: 800;
  color: #0f3057;
}

.context-info__body {
  margin: 0;
  font-size: var(--font-sm);
}

.monitor-content {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(28rem, 0.9fr);
  gap: 0.35rem;
  padding: 0.35rem;
  overflow: hidden;
}

.wm-layout {
  display: none;
}

body.wm-layout-active .monitor-app {
  grid-template-rows: 1fr;
}

body.wm-layout-active .topbar,
body.wm-layout-active .monitor-content {
  display: none;
}

body.wm-layout-active .wm-layout {
  min-height: 0;
  display: grid;
  grid-template-rows: 10.5vh minmax(0, 1fr);
  gap: 0.35rem;
  padding: 0.35rem;
  background: #000;
}

.wm-header,
.wm-panel {
  min-width: 0;
  background: #05070b;
  border: 3px solid #2a303a;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.45);
}

.wm-header {
  display: grid;
  grid-template-columns:
    minmax(10rem, 13rem)
    minmax(12rem, 0.9fr)
    minmax(16rem, 1.15fr)
    minmax(7rem, 0.44fr)
    minmax(8rem, 0.6fr)
    minmax(8rem, 0.6fr)
    minmax(8rem, 0.6fr)
    minmax(12rem, 14rem);
  gap: 0.35rem;
  align-items: stretch;
}

.wm-header__brand,
.wm-header__actions,
.wm-header__date,
.wm-header__time,
.wm-header__horizon,
.wm-total {
  min-width: 0;
}

.wm-header__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: #090c11;
}

.wm-header__logo {
  width: clamp(1.9rem, 2vw, 2.6rem);
  height: clamp(1.9rem, 2vw, 2.6rem);
  object-fit: contain;
}

.wm-header__brand-copy {
  display: grid;
  gap: 0.15rem;
}

.wm-header__brand-copy strong {
  color: #fff;
  font-size: calc(clamp(1.15rem, 1.3vw, 1.8rem) * var(--panel-font-scale));
  font-weight: 800;
}

.wm-header__date,
.wm-header__time,
.wm-header__horizon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 100%;
  background: #000;
  border: 2px solid rgba(255, 255, 255, 0.12);
  font-family: "Pretendard Web", "Pretendard Web Bold", sans-serif;
  font-weight: 900;
}

.wm-header__date {
  padding: 0 0.6rem;
  color: #fff100;
  font-size: calc(clamp(2rem, 2.8vw, 4rem) * var(--panel-font-scale));
}

.wm-header__time {
  color: #ff3127;
  font-size: calc(clamp(2.4rem, 3.8vw, 5.6rem) * var(--panel-font-scale));
  text-shadow: 0 0 0.45rem rgba(255, 49, 39, 0.65), 0 0 1.1rem rgba(255, 49, 39, 0.4);
}

.wm-header__horizon {
  color: #fff;
  font-size: calc(clamp(1.8rem, 2.3vw, 3.4rem) * var(--panel-font-scale));
}

.wm-total {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.15rem;
  color: #fff;
  font-weight: 900;
}

.wm-total span {
  font-size: calc(clamp(1.25rem, 1.45vw, 2rem) * var(--panel-font-scale));
}

.wm-total strong {
  font-size: calc(clamp(2rem, 2.6vw, 3.8rem) * var(--panel-font-scale));
}

.wm-total--material { background: #d00000; }
.wm-total--live { background: #0075d6; }
.wm-total--board { background: #b30000; }

.wm-header__actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  padding: 0.45rem;
  background: #090c11;
}

.wm-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.35rem;
}

.wm-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.wm-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.45rem 0.7rem;
  color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.18);
}

.wm-panel__header h2 {
  margin: 0;
  font-size: calc(clamp(1.6rem, 2vw, 3rem) * var(--panel-font-scale));
  font-weight: 900;
}

.wm-panel__header--material,
.wm-panel__header--board-status {
  background: #000;
}

.wm-panel__header--board-alerts {
  background: #000;
}

.wm-panel__header--live {
  background: #000;
}

.wm-panel__meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.wm-panel__count,
.wm-panel__countdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.25rem 0.9rem;
  font-family: "Pretendard Web", "Pretendard Web Bold", sans-serif;
  font-weight: 900;
}

.wm-panel__count {
  background: #ffd9e3;
  border: 2px solid #deb2c2;
  color: #ff1f14;
  font-size: calc(clamp(1.6rem, 2vw, 2.8rem) * var(--panel-font-scale));
}

.wm-panel__countdown {
  background: #000;
  border: 2px solid rgba(255, 255, 255, 0.16);
  color: #ffe82f;
  font-size: calc(clamp(1.6rem, 2vw, 3rem) * var(--panel-font-scale));
}

.wm-panel__countdown--live {
  color: #3cc6ff;
}

.wm-table-wrap {
  min-height: 0;
  overflow: auto;
  background: #000;
}

.wm-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: #fff;
}

.wm-table td {
  border: 3px solid rgba(255, 255, 255, 0.62);
  padding: 0.45rem 0.6rem;
  vertical-align: middle;
  font-weight: 800;
  font-size: calc(clamp(0.95rem, 1.15vw, 1.85rem) * var(--panel-font-scale));
  word-break: break-word;
}

.wm-item-row--start td {
  border-top-width: 5px;
}

.wm-item-row--end td {
  border-bottom-width: 5px;
}

.wm-item-pair--odd td {
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.1);
}

.wm-item-pair--even td {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.1);
}

.wm-table--material td,
.wm-table--board-alerts td {
  background: #ef7c2a;
}

.wm-table--live td {
  background: #0f78c7;
}

.wm-table--board-status td {
  background: #dbe8d1;
  color: #0f1b12;
}

.wm-table__time {
  width: 28%;
  font-family: "Pretendard Web", "Pretendard Web Bold", sans-serif;
  text-align: center;
  white-space: nowrap;
  color: #fff;
}

.wm-table__channel {
  width: 22%;
  text-align: center;
}

.wm-table__clip {
  width: 26%;
  text-align: center;
}

.wm-table__clip .request-target__placement {
  font-size: 0.72em;
}

.wm-table__length {
  width: 24%;
  text-align: center;
  white-space: nowrap;
}

.wm-table__title {
  text-align: center;
}

.wm-table__status {
  text-align: center;
}

.wm-table__storage {
  padding: 0.35rem 0.4rem;
  text-align: center;
}

.wm-table__storage .storage-chip-row {
  justify-content: center;
}

.wm-table__storage .status-cell-stack {
  justify-items: center;
  text-align: center;
}

.wm-table__storage .storage-chip {
  min-width: 5rem;
  min-height: 2.5rem;
  font-size: calc(clamp(0.98rem, 1vw, 1.5rem) * var(--panel-font-scale));
}

.wm-table__storage .status-pill {
  min-width: 6.4rem;
  min-height: 2.65rem;
  margin: 0 auto;
  font-size: calc(clamp(1rem, 1.1vw, 1.65rem) * var(--panel-font-scale));
}

.wm-empty-row td {
  background: #10131a;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
}

.wm-table__row--board-status-abnormal td {
  background: #f3cfd1;
  color: #351518;
  border-color: rgba(132, 28, 38, 0.35);
}

.wm-table__row--board-status-abnormal.wm-item-pair--odd td {
  background: #f6d8da;
}

.wm-table__row--board-status-abnormal.wm-item-pair--even td {
  background: #efc3c7;
}

.wm-table__row--material-missing td {
  background: #d10000;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.wm-table__row--material-missing.wm-item-pair--odd td {
  background: #d10000;
}

.wm-table__row--material-missing.wm-item-pair--even td {
  background: #8f1c1c;
}

.wm-table__row--material-duration-short td {
  background: #d2a100;
  color: #4a1400;
  border-color: #ffe166;
  box-shadow: inset 0 0 0 2px rgba(88, 32, 0, 0.26);
}

.wm-table__row--material-duration-short.wm-item-pair--odd td {
  background: #d2a100;
}

.wm-table__row--material-duration-short.wm-item-pair--even td {
  background: #f1c94d;
}

.wm-table__row--material-duration-long td {
  background: #b23412;
  color: #fff5ef;
  border-color: #ff5e3a;
  box-shadow: inset 0 0 0 2px rgba(255, 241, 234, 0.18);
}

.wm-table__row--material-duration-long.wm-item-pair--odd td {
  background: #b23412;
}

.wm-table__row--material-duration-long.wm-item-pair--even td {
  background: #7f250f;
}

.wm-table__row--material-blink-missing td {
  animation: live-table-missing-blink 1s steps(1, end) infinite;
}

.wm-table__row--material-blink-duration-short td {
  animation: wm-table-duration-short-blink 1s steps(1, end) infinite;
}

.wm-table__row--material-blink-duration-long td {
  animation: wm-table-duration-long-blink 1s steps(1, end) infinite;
}

.wm-table__row--live-blink td {
  animation: live-table-live-blink 1s steps(1, end) infinite;
}

@keyframes wm-table-duration-short-blink {
  0%, 55% {
    background: #d2a100;
    color: #4a1400;
  }
  56%, 100% {
    background: #fff2b0;
    color: #6a3500;
  }
}

@keyframes wm-table-duration-long-blink {
  0%, 55% {
    background: #b23412;
    color: #fff5ef;
  }
  56%, 100% {
    background: #ffd6c9;
    color: #7a1900;
  }
}

.live-pane,
.board-pane,
.alert-monitor-pane,
.request-pane,
.settings-drawer,
.request-modal {
  background: var(--panel);
  border: 2px solid var(--line-strong);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.live-pane,
.board-pane {
  min-height: 0;
}

.live-pane {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.board-pane {
  display: grid;
  grid-template-rows: minmax(18rem, 34%) minmax(0, 1fr);
  gap: 0.35rem;
}

.section-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.55rem 0.75rem;
  background: linear-gradient(180deg, #eef4fb 0%, #dfe9f6 100%);
  border-bottom: 2px solid var(--line-strong);
}

.section-titlebar--compact {
  padding: 0.45rem 0.6rem;
}

.section-titlebar h1 {
  margin: 0;
  font-size: calc(var(--font-lg) * var(--panel-font-scale));
  line-height: 1.1;
}

.section-titlebar p {
  margin: 0.2rem 0 0;
  font-size: calc(var(--font-sm) * var(--panel-font-scale));
  color: var(--text-soft);
}

.section-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.95rem;
  padding: 0 0.6rem;
  background: #fff;
  border: 1px solid var(--line);
  font-size: calc(var(--font-sm) * var(--panel-font-scale));
  font-weight: 700;
  color: var(--text);
}

.meta-chip--danger {
  background: var(--danger-soft);
  border-color: #eeacac;
  color: var(--danger);
}

.live-pane__body {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(15rem, 26%) minmax(0, 1fr);
  gap: 0.35rem;
  padding: 0.35rem;
  overflow: hidden;
}

.live-lists-row {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr);
  gap: 0.35rem;
}

.live-list-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: rgba(244, 248, 254, 0.98);
  border: 2px solid rgba(46, 79, 125, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    var(--shadow);
}

.live-list-panel__header {
  background: rgba(8, 14, 22, 0.94);
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

.live-list-panel__header h1,
.live-list-panel__header p,
.live-list-panel__header .meta-chip {
  color: #fff;
}

.live-list-panel__header .meta-chip {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.36);
}

.live-list-panel__header .meta-chip--danger {
  background: rgba(255, 237, 237, 0.9);
  border-color: rgba(255, 194, 194, 0.9);
  color: #c00000;
}

.live-list-panel__header .meta-chip--countdown {
  background: #05080d;
  border-color: #1f3f67;
  color: #5dd0ff;
  font-family: "Pretendard Web", "Pretendard Web Bold", sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.live-list-panel .table-scroll--overlay {
  background: rgba(255, 255, 255, 0.92);
}

.live-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: 1px;
  height: 100%;
  padding: 1px;
  background:
    linear-gradient(#8cb2e8 1px, transparent 1px),
    linear-gradient(90deg, #8cb2e8 1px, transparent 1px);
  background-size: calc(100% / 7) calc(100% / 7);
  background-color: #b7cbed;
}

.live-grid__empty {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  font-size: var(--font-lg);
  color: var(--text-soft);
}

.live-card {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  background: #eef3fa;
  border: 1px solid rgba(17, 48, 87, 0.32);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.live-card__header {
  padding: 0.18rem 0.34rem 0.2rem;
  color: #fff;
}

.live-card__apc {
  display: block;
  font-size: clamp(0.74rem, 0.55vw, 0.92rem);
  font-weight: 800;
  line-height: 1.05;
}

.live-card__channel {
  display: block;
  font-size: clamp(0.74rem, 0.58vw, 1rem);
  font-weight: 700;
  line-height: 1.08;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
}

.live-card__body {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  gap: 0.06rem;
  padding: 0.2rem 0.32rem 0.24rem;
  border-top: 1px solid rgba(16, 36, 61, 0.12);
  color: #fff;
  background: #5b6c86;
}

.live-card__clip {
  font-size: clamp(0.84rem, 0.64vw, 1.02rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-card__title {
  font-size: clamp(0.64rem, 0.48vw, 0.8rem);
  font-weight: 700;
  line-height: 1.12;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}

.live-card__timecodes {
  display: block;
  margin: -0.2rem -0.32rem 0;
  padding: 0.14rem 0.32rem 0.16rem;
  background: #203b69;
  font-family: "Pretendard Web", "Pretendard Web Bold", sans-serif;
  font-size: clamp(0.58rem, 0.42vw, 0.74rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ffd6e3;
}

.live-card__timecodes strong {
  font-weight: 800;
}

.live-card--current .live-card__body {
  background: var(--live-current);
  color: #081f09;
}

.live-card--live .live-card__body {
  background: var(--live-live);
  color: #fff;
}

.live-card--confirmed .live-card__body {
  background: var(--live-confirmed);
  color: #08230a;
}

.live-card--duration-short .live-card__body {
  background: #f39a1f;
  color: #261400;
}

.live-card--duration-long .live-card__body {
  background: #ffd9d3;
  color: #8d0000;
  box-shadow: inset 0 0 0 2px #ef1818;
}

.live-card--missing .live-card__body {
  background: var(--live-missing);
  color: #fff;
}

.live-card--pending .live-card__body {
  background: var(--live-pending);
  color: #23374f;
}

.live-card--support .live-card__body {
  background: var(--live-pending);
  color: #33475f;
}

.live-card--empty .live-card__body {
  background: rgba(255, 255, 255, 0.75);
  color: #64748b;
}

.live-card--current .live-card__timecodes,
.live-card--confirmed .live-card__timecodes,
.live-card--duration-short .live-card__timecodes {
  background: #123764;
  color: #ffd5e5;
}

.live-card--duration-long .live-card__timecodes {
  background: #7f1010;
  color: #fff4f4;
}

.live-card--live .live-card__timecodes {
  background: #083868;
  color: #f3fbff;
}

.live-card--missing .live-card__timecodes {
  background: #7f0e0e;
  color: #fff0f0;
}

.live-card--pending .live-card__timecodes,
.live-card--support .live-card__timecodes,
.live-card--empty .live-card__timecodes {
  background: #6b7380;
  color: #ffffff;
}

.live-card--apc-1 .live-card__header { background: linear-gradient(90deg, #f47d20, #ff9f4e); }
.live-card--apc-2 .live-card__header { background: linear-gradient(90deg, #7e4ecb, #9b68e8); }
.live-card--apc-3 .live-card__header { background: linear-gradient(90deg, #0f7f8a, #18a6b3); }
.live-card--apc-4 .live-card__header { background: linear-gradient(90deg, #bd3f6f, #dc6693); }
.live-card--apc-5 .live-card__header { background: linear-gradient(90deg, #4b7f2a, #73a844); }
.live-card--apc-6 .live-card__header { background: linear-gradient(90deg, #a55b1b, #cc7d2d); }
.live-card--apc-7 .live-card__header { background: linear-gradient(90deg, #2766b1, #4d87cf); }

.live-card--missing {
  animation: live-card-missing-blink 1s steps(1, end) infinite;
}

.live-card--duration-long .live-card__clip,
.live-card--duration-long .live-card__title {
  color: #8d0000;
  font-weight: 900;
}

@keyframes live-card-missing-blink {
  0%, 55% { filter: saturate(1); }
  56%, 100% { filter: brightness(1.12) saturate(1.15); }
}

.table-scroll {
  min-height: 0;
  overflow: auto;
}

.table-scroll--alerts {
  max-height: 100%;
}

.table-scroll--overlay {
  max-height: 100%;
}

.table-scroll--requests {
  max-height: 100%;
}

.data-table,
.mapping-table,
.loop-status-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.data-table th,
.data-table td,
.mapping-table th,
.mapping-table td,
.loop-status-table th,
.loop-status-table td {
  border: 2px solid #c0ccde;
  padding: calc(0.36rem * var(--dense-scale)) calc(0.42rem * var(--dense-scale));
  vertical-align: middle;
  font-size: calc(var(--font-sm) * var(--dense-scale));
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.data-table th,
.mapping-table th,
.loop-status-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #d4e1f2;
  font-weight: 800;
  position: sticky;
  user-select: none;
}

.data-table--alerts th {
  background: #c40000;
  color: #fff;
}

.data-table--requests th {
  background: #0076ce;
  color: #fff;
}

.data-table__title-button {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  white-space: normal;
}

.data-table__title-button:hover {
  text-decoration: underline;
}

.request-row--normal {
  background: var(--success-soft);
}

.request-row--abnormal {
  background: var(--danger-soft);
}

.request-row--pending {
  background: var(--pending-soft);
}

.request-row--disabled {
  background: var(--disabled-soft);
}

.request-row--normal:nth-child(4n + 1),
.request-row--normal:nth-child(4n + 2) {
  background: #dcefd7;
}

.request-row--abnormal:nth-child(4n + 1),
.request-row--abnormal:nth-child(4n + 2) {
  background: #ffe0e0;
}

.request-row--pending:nth-child(4n + 1),
.request-row--pending:nth-child(4n + 2) {
  background: #fff0bf;
}

.request-target__primary {
  display: block;
  font-weight: 800;
}

.request-target__placement {
  display: block;
  margin-top: 0.22rem;
  font-size: 0.82em;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
}

.request-target__placement--match {
  color: #1c4ea3;
}

.request-target__placement--none {
  color: #8a4b11;
}

.alert-row--blink td {
  animation: board-alert-blink 1.15s steps(1, end) infinite;
}

@keyframes board-alert-blink {
  0%, 55% { background-color: var(--danger-soft); }
  56%, 100% { background-color: #fff; }
}

.table-alert-row--missing td {
  background: #d31717;
  color: #fff;
  animation: live-table-missing-blink 1s steps(1, end) infinite;
}

.table-alert-row--missing.table-item-pair--odd td,
.request-row--abnormal.table-item-pair--odd td {
  background: #d31717;
  color: #fff;
}

.table-alert-row--missing.table-item-pair--even td,
.request-row--abnormal.table-item-pair--even td {
  background: #8f1c1c;
  color: #fff;
}

.table-row--duration td {
  background: #fff6d4;
  color: #6c3b00;
}

.table-row--duration.table-item-pair--odd td,
.table-alert-row--duration.table-item-pair--odd td {
  background: #d2a100;
}

.table-row--duration.table-item-pair--even td,
.table-alert-row--duration.table-item-pair--even td {
  background: #f1c94d;
}

.table-row--duration-short td,
.table-alert-row--duration-short td {
  border-color: #ffcc00;
}

.table-row--duration-long td,
.table-alert-row--duration-long td {
  background: #ffd9d3;
  color: #8d0000;
  border-color: #ef1818;
  border-width: 2px;
  box-shadow: inset 0 0 0 1px rgba(239, 24, 24, 0.25);
  font-weight: 800;
}

.table-alert-row--duration td {
  background: #f28b00;
  color: #fff;
  animation: live-table-duration-blink 1s steps(1, end) infinite;
}

.table-alert-row--duration-short td {
  animation: wm-table-duration-short-blink 1s steps(1, end) infinite;
}

.table-alert-row--duration-long td {
  animation: wm-table-duration-long-blink 1s steps(1, end) infinite;
}

.table-alert-row--live td {
  background: #156fd0;
  color: #fff;
  animation: live-table-live-blink 1s steps(1, end) infinite;
}

@keyframes live-table-missing-blink {
  0%, 55% {
    background: #d31717;
    color: #fff;
  }
  56%, 100% {
    background: #fff;
    color: #a40000;
  }
}

@keyframes live-table-live-blink {
  0%, 55% {
    background: #156fd0;
    color: #fff;
  }
  56%, 100% {
    background: #fff;
    color: #114c94;
  }
}

@keyframes live-table-duration-blink {
  0%, 55% {
    background: #f28b00;
    color: #fff;
  }
  56%, 100% {
    background: #fff3d8;
    color: #8a4e00;
  }
}

.duration-cell {
  display: grid;
  gap: 0.2rem;
  justify-items: center;
  text-align: center;
  line-height: 1.05;
}

.duration-cell strong {
  display: block;
  font-weight: 900;
  line-height: 1.02;
  white-space: nowrap;
}

.duration-cell--longer strong,
.duration-cell--longer .duration-cell__db {
  color: #a80000;
}

.duration-cell--shorter strong,
.duration-cell--shorter .duration-cell__db {
  color: #6c3b00;
}

.duration-cell span {
  font-size: calc(var(--font-sm) * var(--dense-scale));
}

.duration-cell__db {
  display: block;
  font-weight: 900;
  line-height: 1.02;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.data-table .duration-cell strong {
  font-size: calc(var(--font-sm) * var(--dense-scale));
}

.data-table .duration-cell__db {
  font-size: calc((var(--font-xs) + 0.08rem) * var(--dense-scale));
}

.wm-table .duration-cell {
  gap: 0.24rem;
}

.wm-table .duration-cell strong {
  font-size: calc(clamp(1.18rem, 1.48vw, 2.05rem) * var(--panel-font-scale));
}

.wm-table .duration-cell__db {
  font-size: calc(clamp(0.96rem, 1.08vw, 1.45rem) * var(--panel-font-scale));
}

[data-font-scale-scope] .data-table th,
[data-font-scale-scope] .data-table td,
[data-font-scale-scope] .request-controls,
[data-font-scale-scope] .live-card__apc,
[data-font-scale-scope] .live-card__channel,
[data-font-scale-scope] .live-card__timecodes,
[data-font-scale-scope] .live-card__clip,
[data-font-scale-scope] .live-card__title {
  font-size: calc(1em * var(--panel-font-scale));
}

[data-font-scale-scope="main-topbar"] .topbar__brand-text strong {
  font-size: calc(clamp(1.05rem, 0.92vw, 1.45rem) * var(--panel-font-scale));
}

[data-font-scale-scope="main-topbar"] .topbar__brand-text span {
  font-size: calc(clamp(0.7rem, 0.5vw, 0.84rem) * var(--panel-font-scale));
}

[data-font-scale-scope="main-topbar"] .topbar__date {
  font-size: calc(clamp(1.45rem, 1.45vw, 2.6rem) * var(--panel-font-scale));
}

[data-font-scale-scope="main-topbar"] .topbar__time {
  font-size: calc(clamp(2.15rem, 2.35vw, 4rem) * var(--panel-font-scale));
}

[data-font-scale-scope="main-topbar"] .topbar__status-title {
  font-size: calc(clamp(1.2rem, 1.05vw, 1.85rem) * var(--panel-font-scale));
}

[data-font-scale-scope="main-topbar"] .topbar__status-card span {
  font-size: calc(clamp(0.95rem, 0.76vw, 1.12rem) * var(--panel-font-scale));
}

[data-font-scale-scope="main-topbar"] .topbar__status-card strong {
  font-size: calc(clamp(1.1rem, 0.92vw, 1.4rem) * var(--panel-font-scale));
}

[data-font-scale-scope="main-topbar"] .topbar__sync-label {
  font-size: calc(clamp(0.86rem, 0.66vw, 1rem) * var(--panel-font-scale));
}

[data-font-scale-scope="main-topbar"] .topbar__sync-chip {
  font-size: calc(clamp(0.78rem, 0.6vw, 0.95rem) * var(--panel-font-scale));
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.8rem;
  min-height: 2rem;
  padding: 0 0.55rem;
  font-size: var(--font-sm);
  font-weight: 800;
  border: 1px solid transparent;
}

.status-pill--normal {
  background: #6db648;
  color: #fff;
}

.status-pill--abnormal {
  background: #ef1818;
  color: #fff;
}

.status-pill--pending {
  background: #f1b500;
  color: #2c2410;
}

.status-pill--disabled {
  background: #7b818b;
  color: #fff;
}

.storage-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.status-cell-stack {
  display: grid;
  gap: 0.25rem;
}

.storage-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.55rem;
  min-height: 1.9rem;
  padding: 0 0.4rem;
  font-size: var(--font-xs);
  font-weight: 800;
  background: #9fa6af;
  color: #fff;
}

.storage-chip.ok {
  background: #74b34a;
}

.storage-chip.missing {
  background: #b6bcc6;
}

.storage-chip.older {
  background: #ed1d1d;
}

.storage-chip.pending {
  background: #b6bcc6;
}

.storage-chip.muted {
  background: #5b6c86;
}

.request-controls {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.request-controls label,
.drawer-group label {
  display: grid;
  gap: 0.18rem;
  font-size: var(--font-sm);
  color: var(--text-soft);
}

.request-controls select,
.drawer-group input,
.drawer-group select {
  height: 2.25rem;
  border: 1px solid #a7b8cf;
  background: #fff;
  color: var(--text);
  padding: 0 0.55rem;
}

.density-control {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--font-sm);
  color: var(--text-soft);
}

.board-pane .section-titlebar {
  background: #edf3fb;
}

.alert-monitor-pane,
.request-pane {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.alert-monitor-pane {
  overflow: hidden;
}

.resizable-th {
  position: sticky;
}

.col-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 4;
  touch-action: none;
}

.col-resizer::before {
  content: "";
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 3px;
  width: 2px;
  background: rgba(255, 255, 255, 0.65);
}

.data-table--requests .col-resizer::before {
  background: rgba(255, 255, 255, 0.75);
}

.data-table--alerts .col-resizer::before {
  background: rgba(255, 255, 255, 0.8);
}

.button-stack {
  display: flex;
  gap: 0.25rem;
}

.button-row {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.helper-text,
.save-status {
  font-size: var(--font-sm);
  color: var(--text-soft);
}

.slider-label {
  align-items: center;
}

.slider-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

.slider-field input[type="range"] {
  width: 100%;
  min-width: 0;
}

.slider-field strong {
  min-width: 3.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.settings-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 30;
  width: min(42rem, 92vw);
  height: 100vh;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  background: #f8fbff;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  box-shadow: -0.5rem 0 1.5rem rgba(10, 36, 61, 0.18);
}

.settings-drawer.open {
  transform: translateX(0);
}

.drawer-header,
.drawer-tabs {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #c7d4e6;
  background: #eef4fb;
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawer-toolbar,
.drawer-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.drawer-tab {
  border: 1px solid #a7b8cf;
  background: #fff;
  color: var(--text);
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}

.drawer-tab.active {
  background: #0d5ca6;
  color: #fff;
  border-color: #0d5ca6;
}

.drawer-panels {
  min-height: 0;
  overflow: auto;
}

.drawer-panel {
  display: none;
  padding: 0.75rem;
}

.drawer-panel.active {
  display: block;
}

.drawer-group {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid #d3dbe8;
}

.drawer-group.first {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.drawer-group h3 {
  margin: 0 0 0.7rem;
  font-size: var(--font-md);
}

.mapping-table-wrap,
.loop-status-table-wrap {
  overflow: auto;
  border: 1px solid #c7d4e6;
  background: #fff;
}

.mapping-table select,
.mapping-table input {
  width: 100%;
  min-width: 8rem;
  height: 2.1rem;
  border: 1px solid #bdd0e7;
}

.mapping-table input[type="checkbox"] {
  width: 1.15rem;
  min-width: 1.15rem;
  height: 1.15rem;
}

.ops-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 0.75rem;
}

.request-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(7, 16, 30, 0.58);
}

.request-modal-backdrop[hidden] {
  display: none !important;
}

.request-modal {
  width: min(68rem, 100%);
  max-height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}

.request-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.8rem 0.95rem;
  border-bottom: 1px solid #d5ddeb;
  background: #eef4fb;
}

.request-modal-header h2 {
  margin: 0;
}

.request-modal-header p {
  margin: 0.2rem 0 0;
  color: var(--text-soft);
  font-size: var(--font-sm);
}

.request-modal-actions {
  display: flex;
  gap: 0.4rem;
}

.request-modal-status {
  min-height: 1.65rem;
  padding: 0 0.95rem;
  display: flex;
  align-items: center;
  font-size: var(--font-sm);
  color: var(--text-soft);
}

.request-modal-status.ok {
  color: var(--success);
}

.request-modal-status.error {
  color: var(--danger);
}

.request-modal-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 18rem);
  gap: 0.75rem;
  padding: 0.9rem;
  overflow: auto;
}

.request-modal-side {
  display: grid;
  align-content: start;
  gap: 0.75rem;
}

.request-modal-section h3 {
  margin: 0 0 0.5rem;
}

.request-modal-content {
  margin: 0;
  min-height: 18rem;
  padding: 0.75rem;
  border: 1px solid #d0d8e6;
  background: #f8fbff;
  white-space: pre-wrap;
  word-break: keep-all;
}

.request-modal-inline-images-section {
  margin-top: 0.75rem;
}

.request-modal-inline-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.65rem;
}

.request-modal-inline-image {
  display: grid;
  gap: 0.35rem;
  padding: 0.55rem;
  border: 1px solid #d0d8e6;
  background: #f8fbff;
  color: inherit;
  text-decoration: none;
}

.request-modal-inline-image img {
  width: 100%;
  max-height: 14rem;
  object-fit: contain;
  border: 1px solid #dbe4f0;
  background: #fff;
}

.request-modal-inline-image span {
  font-size: var(--font-xs);
  color: var(--text-soft);
  word-break: break-all;
}

.request-modal-attachments {
  display: grid;
  gap: 0.45rem;
}

.request-modal-attachment {
  padding: 0.55rem 0.65rem;
  border: 1px solid #d0d8e6;
  background: #f8fbff;
}

.request-modal-attachment a {
  color: #0d5ca6;
  word-break: break-all;
}

.table-comment-count {
  color: #225ea8;
  font-weight: 700;
}

.request-modal-comments {
  display: grid;
  gap: 0.45rem;
  max-height: 18rem;
  overflow: auto;
}

.request-modal-comment {
  padding: 0.55rem 0.65rem;
  border: 1px solid #d0d8e6;
  background: #f8fbff;
}

.request-modal-comment__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  color: var(--text-soft);
  font-size: var(--font-xs);
}

.request-modal-comment__author {
  color: var(--text-strong);
  font-weight: 700;
}

.request-modal-comment__message {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

.request-modal-comment__attachment {
  margin-top: 0.45rem;
  font-size: var(--font-xs);
}

.request-modal-comment__attachment a {
  color: #0d5ca6;
  word-break: break-all;
}

.empty-row td {
  text-align: center;
  color: var(--text-soft);
  background: #f7fafc;
}

/* 2026-04-16 dashboard redesign */
body {
  background:
    radial-gradient(circle at top left, rgba(27, 60, 97, 0.48), transparent 36%),
    radial-gradient(circle at top right, rgba(32, 64, 108, 0.24), transparent 28%),
    linear-gradient(180deg, #07101b 0%, #091522 100%);
  color: #edf3ff;
}

.monitor-app {
  gap: 0.75rem;
  padding: 0.75rem;
  grid-template-rows: minmax(5.5rem, 8.8vh) minmax(0, 1fr);
  background: transparent;
}

.topbar {
  grid-template-columns: minmax(17rem, 0.85fr) minmax(27rem, 1.15fr) minmax(40rem, 1.85fr) minmax(15rem, 0.62fr);
  gap: 0.75rem;
  padding: 0;
  background: transparent;
  border-bottom: 0;
}

.topbar__brand,
.topbar__clock,
.topbar__status,
.topbar__actions {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(92, 128, 173, 0.32);
  background: linear-gradient(180deg, rgba(13, 23, 36, 0.98), rgba(10, 18, 31, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0.9rem 2rem rgba(0, 0, 0, 0.24);
  padding: 0.55rem 0.7rem;
}

.topbar__brand::before,
.topbar__clock::before,
.topbar__status::before,
.topbar__actions::before,
.live-pane::before,
.alert-monitor-pane::before,
.request-pane::before,
.live-list-panel::before,
.live-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 22%);
}

.topbar__brand {
  gap: 0.9rem;
}

.topbar__logo {
  width: 3rem;
  height: 3rem;
  filter: drop-shadow(0 0 0.45rem rgba(41, 143, 255, 0.24));
}

.topbar__brand-text {
  gap: 0.18rem;
}

.topbar__brand-text strong {
  font-size: clamp(1.55rem, 1.2vw, 2rem);
  font-weight: 800;
  color: #f4f8ff;
  letter-spacing: -0.02em;
}

.topbar__brand-text span {
  font-size: clamp(0.76rem, 0.56vw, 0.92rem);
  color: #7e97bb;
  letter-spacing: 0.02em;
}

.topbar__clock {
  padding: 0.35rem;
}

.topbar__clock-frame {
  grid-template-columns: minmax(11rem, 0.85fr) minmax(0, 1fr);
  gap: 0.35rem;
  align-items: stretch;
  height: 100%;
  border-radius: 0.82rem;
  border: 1px solid rgba(118, 146, 191, 0.2);
  background:
    linear-gradient(180deg, rgba(9, 12, 18, 0.96), rgba(4, 8, 14, 0.96));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.topbar__date-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.18rem;
  min-width: 0;
}

.topbar__date {
  padding: 0;
  font-size: clamp(1.2rem, 1.32vw, 1.9rem);
  font-weight: 800;
  color: #f3f7ff;
  letter-spacing: 0.02em;
  text-align: center;
}

.topbar__day {
  font-size: clamp(0.8rem, 0.62vw, 1rem);
  font-weight: 700;
  color: #7f94b3;
  letter-spacing: 0.18em;
}

.topbar__time {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: clamp(2.7rem, 2.9vw, 4.7rem);
  font-weight: 900;
  color: #ff4d42;
  letter-spacing: 0.05em;
  text-shadow: 0 0 0.85rem rgba(255, 71, 59, 0.32);
}

.topbar__status {
  align-content: stretch;
  gap: 0.55rem;
}

.topbar__status-head {
  grid-template-columns: minmax(11.5rem, auto) minmax(0, 1fr);
  gap: 0.6rem;
  align-items: stretch;
}

.topbar__status-title {
  justify-content: flex-start;
  padding: 0 1rem;
  border-radius: 0.82rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(5, 8, 12, 0.92);
  font-size: clamp(1.35rem, 1.16vw, 1.95rem);
  letter-spacing: -0.02em;
}

.topbar__status-summary-cards {
  gap: 0.45rem;
}

.topbar__status-card {
  min-height: 3rem;
  padding: 0.3rem 0.55rem;
  border-radius: 0.78rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.topbar__status-card span {
  font-size: clamp(0.92rem, 0.72vw, 1.08rem);
}

.topbar__status-card strong {
  font-size: clamp(1.18rem, 0.96vw, 1.42rem);
}

.topbar__sync-row {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
}

.topbar__sync-label {
  padding-left: 0.2rem;
  color: #eef4ff;
}

.topbar__sync-chips {
  flex-wrap: wrap;
  gap: 0.45rem;
}

.topbar__sync-chip {
  min-height: 2rem;
  padding: 0.34rem 0.72rem;
  border-radius: 0.72rem;
  border: 1px solid rgba(113, 154, 219, 0.35);
  background: linear-gradient(180deg, rgba(60, 110, 189, 0.92), rgba(41, 85, 152, 0.92));
  color: #eef5ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.topbar__actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: stretch;
}

.icon-action-button {
  border-radius: 0.9rem;
  border: 1px solid rgba(109, 129, 158, 0.26);
  background: linear-gradient(180deg, rgba(21, 31, 45, 0.98), rgba(11, 18, 29, 0.98));
  color: #f5f9ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.icon-action-button:hover {
  background: linear-gradient(180deg, rgba(27, 41, 58, 0.98), rgba(15, 24, 37, 0.98));
  border-color: rgba(125, 156, 196, 0.42);
}

.icon-action-button svg {
  width: 46%;
  height: 46%;
}

.icon-action-button--accent {
  background: linear-gradient(180deg, #4f9b45, #3e7f39);
  border-color: rgba(132, 205, 124, 0.38);
}

.icon-action-button--accent:hover {
  background: linear-gradient(180deg, #5dab52, #468a40);
  border-color: rgba(151, 218, 145, 0.46);
}

.monitor-content {
  grid-template-columns: minmax(0, 1.06fr) minmax(39rem, 0.92fr);
  gap: 0.75rem;
  min-height: 0;
}

.live-pane,
.alert-monitor-pane,
.request-pane {
  position: relative;
  min-height: 0;
  border-radius: 1rem;
  border: 1px solid rgba(92, 128, 173, 0.24);
  background: linear-gradient(180deg, rgba(12, 21, 34, 0.92), rgba(9, 16, 26, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 1rem 2rem rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.section-titlebar {
  align-items: center;
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid rgba(79, 111, 151, 0.2);
  background: linear-gradient(180deg, rgba(18, 30, 47, 0.92), rgba(12, 22, 36, 0.9));
}

.section-titlebar--compact {
  padding: 0.9rem 1rem;
}

.section-titlebar h1 {
  font-size: clamp(1.32rem, 1.1vw, 1.9rem);
  font-weight: 800;
  color: #f5f9ff;
  letter-spacing: -0.03em;
}

.section-meta {
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.meta-chip {
  min-height: 2.08rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(110, 141, 181, 0.28);
  background: rgba(22, 35, 54, 0.96);
  color: #eaf1ff;
}

.meta-chip--danger {
  background: linear-gradient(180deg, rgba(159, 28, 28, 0.95), rgba(128, 19, 19, 0.95));
  border-color: rgba(255, 109, 109, 0.42);
  color: #fff2f2;
}

.meta-chip--countdown {
  background: #02060c;
  border-color: rgba(53, 138, 223, 0.4);
  color: #5bc6ff;
  box-shadow: inset 0 0 0 1px rgba(91, 198, 255, 0.08);
}

.live-pane__body {
  gap: 0.75rem;
  padding: 0.75rem;
  grid-template-rows: minmax(18rem, 28%) minmax(0, 1fr);
}

.live-lists-row {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.92fr);
  gap: 0.75rem;
  min-height: 0;
}

.live-list-panel {
  position: relative;
  min-height: 0;
  border-radius: 0.92rem;
  border: 1px solid rgba(98, 132, 175, 0.22);
  background: linear-gradient(180deg, rgba(15, 26, 41, 0.96), rgba(11, 19, 32, 0.94));
  overflow: hidden;
}

.live-list-panel__header {
  background: linear-gradient(180deg, rgba(18, 31, 50, 0.96), rgba(13, 23, 38, 0.96));
}

.live-list-panel--missing .live-list-panel__header {
  border-bottom-color: rgba(191, 55, 55, 0.22);
}

.live-list-panel--live .live-list-panel__header {
  border-bottom-color: rgba(44, 125, 212, 0.22);
}

.table-scroll,
.live-list-panel .table-scroll--overlay,
.table-scroll--alerts,
.table-scroll--requests {
  background: rgba(9, 15, 25, 0.72);
}

.table-scroll::-webkit-scrollbar {
  width: 0.72rem;
  height: 0.72rem;
}

.table-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid rgba(8, 14, 23, 0.9);
  background: rgba(111, 140, 181, 0.58);
}

.table-scroll::-webkit-scrollbar-track {
  background: rgba(8, 14, 23, 0.86);
}

.live-grid {
  position: relative;
  padding: 0.7rem;
  border-radius: 0.92rem;
  border: 1px solid rgba(98, 132, 175, 0.22);
  background: linear-gradient(180deg, rgba(12, 20, 32, 0.96), rgba(8, 14, 23, 0.96));
  gap: 0.4rem;
}

.live-grid__empty {
  border-radius: 0.78rem;
  background: rgba(13, 23, 37, 0.82);
  color: #88a0c2;
}

.live-card {
  border-radius: 0.88rem;
  border: 1px solid rgba(149, 181, 224, 0.14);
  box-shadow: 0 0.55rem 1.2rem rgba(0, 0, 0, 0.16);
  overflow: hidden;
}

.live-card__header {
  padding: 0.38rem 0.5rem 0.42rem;
}

.live-card__apc {
  font-size: clamp(0.76rem, 0.58vw, 0.95rem);
  letter-spacing: 0.04em;
}

.live-card__channel {
  margin-top: 0.08rem;
  font-size: clamp(0.8rem, 0.62vw, 1.06rem);
}

.live-card__body {
  padding: 0.42rem 0.48rem 0.5rem;
  gap: 0.26rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.live-card__timecodes {
  margin: -0.42rem -0.48rem 0;
  padding: 0.22rem 0.48rem;
  font-size: clamp(0.68rem, 0.51vw, 0.84rem);
  font-weight: 800;
}

.live-card__clip {
  font-size: clamp(0.98rem, 0.78vw, 1.16rem);
  letter-spacing: -0.02em;
}

.live-card__title {
  font-size: clamp(0.72rem, 0.54vw, 0.88rem);
  line-height: 1.18;
}

.data-table,
.mapping-table,
.loop-status-table {
  background: transparent;
}

.data-table th,
.data-table td,
.mapping-table th,
.mapping-table td,
.loop-status-table th,
.loop-status-table td {
  border-color: rgba(98, 120, 149, 0.38);
}

.data-table th,
.mapping-table th,
.loop-status-table th {
  background: linear-gradient(180deg, #18385d, #112a46);
  color: #f1f6ff;
  font-weight: 800;
}

.data-table--alerts th {
  background: linear-gradient(180deg, #981212, #7d0f0f);
}

.data-table--requests th {
  background: linear-gradient(180deg, #0e5eae, #114886);
}

.data-table td,
.mapping-table td,
.loop-status-table td {
  background: rgba(15, 24, 39, 0.82);
  color: #eef3ff;
}

.empty-row td {
  background: rgba(16, 26, 42, 0.78);
  color: #8ea3bf;
}

.request-row--normal td {
  background: rgba(215, 240, 213, 0.92);
  color: #0e2015;
}

.request-row--normal:nth-child(4n + 1) td,
.request-row--normal:nth-child(4n + 2) td {
  background: rgba(201, 233, 197, 0.96);
}

.request-row--abnormal td {
  background: rgba(255, 228, 228, 0.95);
  color: #4a1212;
}

.request-row--abnormal:nth-child(4n + 1) td,
.request-row--abnormal:nth-child(4n + 2) td {
  background: rgba(255, 214, 214, 0.98);
}

.request-row--pending td {
  background: rgba(255, 239, 190, 0.95);
  color: #3f3208;
}

.request-row--disabled td {
  background: rgba(186, 195, 206, 0.9);
  color: #273241;
}

.request-controls {
  flex-wrap: wrap;
  gap: 0.65rem;
}

.request-controls label,
.drawer-group label {
  color: #d9e4f7;
}

.request-controls select,
.drawer-group input,
.drawer-group select {
  border: 1px solid rgba(109, 136, 172, 0.28);
  border-radius: 0.72rem;
  background: rgba(18, 30, 48, 0.96);
  color: #eff4ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.density-control,
.mini-button {
  color: #ecf3ff;
}

.board-pane .section-titlebar {
  background: linear-gradient(180deg, rgba(19, 31, 49, 0.96), rgba(13, 23, 38, 0.96));
}

.alert-monitor-pane,
.request-pane {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.status-pill {
  border-radius: 999px;
}

.request-modal-panel {
  background: linear-gradient(180deg, #f2f6fd, #ebf1f9);
}

@media (max-width: 1800px) {
  .topbar {
    grid-template-columns: minmax(15rem, 0.9fr) minmax(24rem, 1.08fr) minmax(34rem, 1.78fr) minmax(14rem, 0.68fr);
  }

  .monitor-content {
    grid-template-columns: minmax(0, 1fr) minmax(34rem, 0.95fr);
  }
}

@media (max-width: 1600px) {
  .topbar {
    grid-template-columns: 15rem 23rem minmax(30rem, 1fr) 15rem;
  }

  .monitor-content {
    grid-template-columns: minmax(0, 1fr) minmax(30rem, 0.94fr);
  }

  .alarm-popup {
    width: min(52%, 18rem);
  }
}

@media (max-width: 1360px) {
  .monitor-app {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .topbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitor-content {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .live-lists-row {
    grid-template-columns: 1fr;
  }
}

/* Layout refresh: v2.3.1 hard overrides */
.live-pane,
.alert-monitor-pane,
.request-pane,
.live-list-panel,
.live-grid,
.section-titlebar,
.section-titlebar--compact,
.topbar__brand,
.topbar__clock,
.topbar__status,
.topbar__actions {
  border-radius: 0 !important;
}

.alert-monitor-pane,
.request-pane,
.live-pane,
.live-list-panel,
.live-grid {
  background: linear-gradient(180deg, rgba(10, 17, 28, 0.99), rgba(8, 14, 23, 0.99)) !important;
}

.alert-monitor-pane::before,
.request-pane::before,
.live-pane::before,
.live-list-panel::before,
.live-grid::before {
  border-radius: 0 !important;
}

.alert-monitor-pane .data-table,
.request-pane .data-table,
.alert-monitor-pane .table-scroll,
.request-pane .table-scroll,
.alert-monitor-pane .table-scroll--alerts,
.request-pane .table-scroll--requests {
  background: #0b131f !important;
}

.request-controls,
.density-control {
  color: #d9e4f7 !important;
}

.mini-button {
  min-width: 2rem;
  min-height: 2rem;
  border: 1px solid rgba(109, 136, 172, 0.32) !important;
  background: linear-gradient(180deg, rgba(21, 31, 45, 0.98), rgba(11, 18, 29, 0.98)) !important;
  color: #ecf3ff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.mini-button:hover {
  background: linear-gradient(180deg, rgba(27, 41, 58, 0.98), rgba(15, 24, 37, 0.98)) !important;
  color: #ffffff !important;
}

/* Layout refresh: v2.2 timeline monitor */
.live-grid {
  padding: 0;
  display: block;
  min-height: 0;
  overflow: hidden;
}

.live-timeline {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.live-timeline__head,
.live-timeline__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.82rem 0.95rem;
}

.live-timeline__head {
  border-bottom: 1px solid rgba(88, 116, 154, 0.2);
  background: linear-gradient(180deg, rgba(15, 26, 40, 0.98), rgba(11, 20, 31, 0.94));
}

.live-timeline__title-block {
  display: grid;
  gap: 0.14rem;
}

.live-timeline__title-block strong {
  color: #f2f6ff;
  font-size: clamp(1.02rem, 0.84vw, 1.34rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.live-timeline__title-block span {
  color: #7f95b4;
  font-size: clamp(0.7rem, 0.54vw, 0.84rem);
}

.live-timeline__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.live-timeline__group-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}

.live-timeline__group-tab {
  min-width: 4rem;
  min-height: 2.15rem;
  padding: 0 0.78rem;
  border: 1px solid rgba(93, 124, 165, 0.34);
  background: rgba(13, 24, 39, 0.96);
  color: #b7cae6;
  font-size: clamp(0.74rem, 0.56vw, 0.86rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.live-timeline__group-tab:hover:not(:disabled) {
  border-color: rgba(124, 168, 226, 0.5);
  color: #eef5ff;
}

.live-timeline__group-tab.is-active {
  background: linear-gradient(180deg, rgba(37, 96, 182, 0.96), rgba(24, 64, 124, 0.96));
  border-color: rgba(126, 177, 248, 0.58);
  color: #ffffff;
}

.live-timeline__group-tab.is-disabled,
.live-timeline__group-tab:disabled {
  opacity: 0.38;
  cursor: default;
}

.live-timeline__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0 0.7rem;
  border-radius: 0.76rem;
  background: rgba(16, 29, 45, 0.96);
  border: 1px solid rgba(97, 126, 167, 0.24);
  color: #eff4ff;
  font-size: clamp(0.72rem, 0.56vw, 0.84rem);
  font-weight: 700;
}

.live-timeline__chip--range {
  background: linear-gradient(180deg, rgba(33, 88, 166, 0.96), rgba(23, 63, 120, 0.96));
}

.live-timeline__header {
  grid-template-columns: 11.2rem minmax(0, 1fr);
  padding-top: 0.68rem;
  padding-bottom: 0.68rem;
  border-bottom: 1px solid rgba(88, 116, 154, 0.18);
  background: rgba(10, 18, 29, 0.88);
}

.live-timeline__header-channel {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  padding: 0.55rem 0.8rem;
  border-radius: 0.82rem;
  background: rgba(19, 34, 52, 0.9);
  color: #d9e7fb;
  font-size: clamp(0.78rem, 0.62vw, 0.94rem);
  font-weight: 800;
  letter-spacing: 0.06em;
}

.live-timeline__axis {
  display: grid;
  grid-template-columns: repeat(var(--timeline-tick-count), minmax(0, 1fr));
  gap: 0;
  min-height: 3rem;
  border-radius: 0.82rem;
  overflow: hidden;
  border: 1px solid rgba(86, 111, 146, 0.18);
  background: linear-gradient(180deg, rgba(19, 34, 52, 0.92), rgba(12, 23, 37, 0.9));
}

.live-timeline__axis span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  color: #cfe1fb;
  font-size: clamp(0.75rem, 0.58vw, 0.9rem);
  font-weight: 800;
  border-left: 1px solid rgba(126, 154, 194, 0.14);
}

.live-timeline__axis span:first-child {
  border-left: 0;
}

.live-timeline__scroll {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.82rem 0.95rem 0.95rem;
  display: grid;
  align-content: start;
  gap: 0.52rem;
}

.live-timeline__row {
  display: grid;
  grid-template-columns: 11.2rem minmax(0, 1fr);
  align-items: stretch;
  gap: 0.7rem;
  min-height: 5.8rem;
}

.live-timeline__channel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.22rem;
  padding: 0.72rem 0.82rem;
  border-radius: 0.92rem;
  border: 1px solid rgba(151, 182, 219, 0.16);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.live-timeline__channel--apc-1 { background: linear-gradient(180deg, #f47d20, #dd6f13); }
.live-timeline__channel--apc-2 { background: linear-gradient(180deg, #8a59d6, #7345bd); }
.live-timeline__channel--apc-3 { background: linear-gradient(180deg, #1a9eab, #117d87); }
.live-timeline__channel--apc-4 { background: linear-gradient(180deg, #d85788, #bb3f6d); }
.live-timeline__channel--apc-5 { background: linear-gradient(180deg, #6ea534, #507b24); }
.live-timeline__channel--apc-6 { background: linear-gradient(180deg, #cb7f2d, #a45c1b); }
.live-timeline__channel--apc-7 { background: linear-gradient(180deg, #4784cf, #2867b2); }

.live-timeline__apc {
  font-size: clamp(0.84rem, 0.65vw, 1rem);
  font-weight: 900;
  letter-spacing: 0.05em;
}

.live-timeline__name {
  font-size: clamp(0.86rem, 0.66vw, 1.02rem);
  font-weight: 800;
  line-height: 1.12;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.live-timeline__channel-clip {
  margin-top: 0.16rem;
  font-size: clamp(0.72rem, 0.56vw, 0.84rem);
  font-weight: 800;
  line-height: 1.08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.96);
}

.live-timeline__channel-progress {
  font-size: clamp(0.64rem, 0.5vw, 0.76rem);
  font-weight: 700;
  line-height: 1.08;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-timeline__channel-progressbar {
  position: relative;
  width: 100%;
  height: 0.32rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(7, 13, 24, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.live-timeline__channel-progressbar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.35));
}

.live-timeline__lane {
  position: relative;
  min-width: 0;
  min-height: 5.8rem;
  border-radius: 0.92rem;
  border: 1px solid rgba(95, 122, 159, 0.18);
  background:
    repeating-linear-gradient(
      to right,
      rgba(72, 95, 126, 0.38) 0,
      rgba(72, 95, 126, 0.38) 1px,
      rgba(14, 25, 39, 0) 1px,
      rgba(14, 25, 39, 0) calc(100% / var(--timeline-tick-count))
    ),
    linear-gradient(180deg, rgba(13, 23, 36, 0.96), rgba(9, 16, 26, 0.93));
  overflow: hidden;
}

.live-timeline__lane-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #7f96b6;
  font-size: clamp(0.82rem, 0.62vw, 0.94rem);
  font-weight: 700;
}

.live-timeline__slot {
  position: absolute;
  top: 0.36rem;
  bottom: 0.36rem;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.16rem;
  min-width: 0;
  padding: 0.34rem 0.46rem 0.4rem;
  border-radius: 0.82rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.live-timeline__slot--compact {
  display: block;
  padding: 0;
  min-width: 0.7rem;
}

.live-timeline__slot-compact-marker {
  width: 100%;
  height: 100%;
}

.live-timeline__slot-time {
  font-size: clamp(0.66rem, 0.5vw, 0.78rem);
  font-weight: 800;
  line-height: 1.05;
  opacity: 0.92;
}

.live-timeline__slot-clip {
  font-size: clamp(0.84rem, 0.66vw, 1rem);
  font-weight: 900;
  line-height: 1.08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-timeline__slot-title {
  font-size: clamp(0.7rem, 0.52vw, 0.84rem);
  font-weight: 700;
  line-height: 1.14;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.live-timeline__slot--current {
  background: linear-gradient(180deg, #35a44e, #18863e);
  color: #f7fff9;
}

.live-timeline__slot--confirmed {
  background: linear-gradient(180deg, #7cd86d, #58c451);
  color: #09250d;
}

.live-timeline__slot--live {
  background: linear-gradient(180deg, #1881dc, #0d67bc);
  color: #fff;
}

.live-timeline__slot--missing {
  background: linear-gradient(180deg, #df1f1f, #b91010);
  color: #fff;
  animation: live-card-missing-blink 1s steps(1, end) infinite;
}

.live-timeline__slot--duration-short {
  background: linear-gradient(180deg, #f3a42d, #da8115);
  color: #261400;
}

.live-timeline__slot--duration-long {
  background: linear-gradient(180deg, #ffd8d1, #f7c5bc);
  color: #8d0000;
  box-shadow: inset 0 0 0 2px #ef1818;
}

.live-timeline__slot--pending,
.live-timeline__slot--support,
.live-timeline__slot--empty {
  background: linear-gradient(180deg, #d5dae3, #c3cad5);
  color: #34465d;
}

@media (max-width: 1880px) {
  .live-timeline__row,
  .live-timeline__header {
    grid-template-columns: 10rem minmax(0, 1fr);
  }
}

@media (max-width: 1600px) {
  .live-timeline__head,
  .live-timeline__header {
    grid-template-columns: 1fr;
  }

  .live-timeline__chips {
    justify-content: flex-start;
  }

  .live-timeline__row {
    grid-template-columns: 9.4rem minmax(0, 1fr);
    min-height: 5.2rem;
  }

  .live-timeline__lane {
    min-height: 5.2rem;
  }
}

/* Layout refresh: v2.3 timeline and modal cleanup */
.live-pane,
.alert-monitor-pane,
.request-pane,
.live-list-panel,
.live-grid,
.section-titlebar,
.icon-action-button,
.meta-chip,
.live-timeline__header-channel,
.live-timeline__axis,
.live-timeline__channel,
.live-timeline__lane,
.live-timeline__slot {
  border-radius: 0.32rem;
}

.table-scroll,
.table-scroll--alerts,
.table-scroll--requests,
.live-list-panel .table-scroll--overlay {
  background: #0b131f;
}

.request-pane,
.alert-monitor-pane {
  background: linear-gradient(180deg, rgba(10, 17, 28, 0.98), rgba(8, 14, 23, 0.98));
}

.request-pane .data-table,
.alert-monitor-pane .data-table {
  background: transparent;
}

.live-timeline__channel-progressbar {
  display: none;
}

.live-timeline__channel-clip {
  margin-top: 0.12rem;
  font-size: clamp(0.68rem, 0.52vw, 0.8rem);
}

.live-timeline__channel-progress {
  font-size: clamp(0.62rem, 0.48vw, 0.72rem);
  color: rgba(255, 255, 255, 0.92);
}

.live-timeline__slot {
  border-radius: 0.28rem;
}

.request-modal-backdrop {
  background: rgba(2, 7, 12, 0.82);
  backdrop-filter: blur(0.24rem);
}

.request-modal {
  border: 1px solid rgba(83, 110, 148, 0.42);
  border-radius: 0.38rem;
  background: linear-gradient(180deg, rgba(10, 18, 30, 0.985), rgba(8, 14, 24, 0.985));
  color: #edf4ff;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.42);
}

.request-modal-header {
  border-bottom: 1px solid rgba(84, 112, 149, 0.28);
  background: linear-gradient(180deg, rgba(18, 30, 47, 0.98), rgba(12, 22, 36, 0.96));
}

.request-modal-header h2,
.request-modal-section h3 {
  color: #f4f8ff;
}

.request-modal-header p,
.request-modal-status,
.request-modal-inline-image span,
.request-modal-comment__meta {
  color: #9db2cf;
}

.request-modal-content,
.request-modal-inline-image,
.request-modal-attachment,
.request-modal-comment {
  border: 1px solid rgba(84, 112, 149, 0.26);
  background: rgba(13, 22, 35, 0.96);
  color: #edf4ff;
}

.request-modal-inline-image img {
  border-color: rgba(84, 112, 149, 0.24);
  background: rgba(7, 12, 20, 0.98);
}

.request-modal-attachment a,
.request-modal-comment__attachment a {
  color: #7ec6ff;
}

.request-modal-comment__author {
  color: #ffffff;
}

.request-modal-content,
.request-modal-comment__message {
  line-height: 1.62;
}

/* Layout refresh: v2.1 visual redesign */
body {
  background:
    radial-gradient(circle at top left, rgba(45, 101, 173, 0.16), transparent 28%),
    radial-gradient(circle at top right, rgba(28, 62, 111, 0.18), transparent 24%),
    linear-gradient(180deg, #07111d 0%, #0a1420 42%, #09111b 100%);
  color: #edf3ff;
}

.monitor-app {
  gap: 0.7rem;
  padding: 0.7rem;
  grid-template-rows: 9.2vh minmax(0, 1fr);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0)),
    transparent;
}

.topbar {
  grid-template-columns: minmax(17rem, 0.84fr) minmax(28rem, 1.08fr) minmax(44rem, 1.95fr) minmax(16rem, 0.66fr);
  gap: 0.8rem;
}

.topbar__brand,
.topbar__clock,
.topbar__status,
.topbar__actions,
.live-pane,
.alert-monitor-pane,
.request-pane,
.live-list-panel,
.live-grid {
  backdrop-filter: blur(14px);
}

.topbar__brand,
.topbar__clock,
.topbar__status,
.topbar__actions {
  border-radius: 1.08rem;
  border: 1px solid rgba(103, 131, 169, 0.24);
  background:
    linear-gradient(180deg, rgba(19, 31, 48, 0.98), rgba(10, 18, 31, 0.94)),
    linear-gradient(135deg, rgba(81, 127, 194, 0.08), transparent 52%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0.85rem 2rem rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(7, 12, 19, 0.55);
}

.topbar__brand {
  gap: 1rem;
  padding: 0.6rem 0.9rem;
}

.topbar__logo {
  width: 3.15rem;
  height: 3.15rem;
  filter: drop-shadow(0 0 0.7rem rgba(56, 138, 255, 0.22));
}

.topbar__brand-text strong {
  font-size: clamp(1.45rem, 1.18vw, 2rem);
  letter-spacing: -0.03em;
}

.topbar__brand-text span {
  color: #86a0c2;
  font-size: clamp(0.75rem, 0.56vw, 0.92rem);
}

.topbar__clock {
  padding: 0.4rem;
}

.topbar__clock-frame {
  border-radius: 0.92rem;
  border: 1px solid rgba(104, 134, 171, 0.18);
  background:
    linear-gradient(180deg, rgba(9, 14, 22, 0.98), rgba(4, 7, 12, 0.98)),
    linear-gradient(90deg, rgba(255, 214, 82, 0.03), transparent 26%, rgba(255, 77, 77, 0.03) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.topbar__date-block {
  border-right: 1px solid rgba(94, 121, 154, 0.18);
}

.topbar__date {
  font-size: clamp(1.45rem, 1.34vw, 2.1rem);
  color: #f2f6ff;
}

.topbar__day {
  color: #7f96b6;
  letter-spacing: 0.24em;
}

.topbar__time {
  color: #ff4336;
  text-shadow:
    0 0 0.45rem rgba(255, 67, 54, 0.38),
    0 0 1.1rem rgba(255, 67, 54, 0.22);
}

.topbar__status {
  padding: 0.45rem 0.65rem;
  gap: 0.6rem;
}

.topbar__status-title {
  border-radius: 0.9rem;
  background: rgba(6, 10, 16, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: clamp(1.28rem, 1.06vw, 1.9rem);
  letter-spacing: -0.03em;
}

.topbar__status-card {
  min-height: 3.15rem;
  border-radius: 0.82rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0.2rem 0.65rem rgba(0, 0, 0, 0.16);
}

.topbar__status-card span {
  font-size: clamp(0.92rem, 0.72vw, 1.08rem);
}

.topbar__status-card strong {
  font-size: clamp(1.16rem, 0.95vw, 1.42rem);
}

.topbar__status-card--normal {
  background: linear-gradient(180deg, #6dbd33, #4e9721);
}

.topbar__status-card--abnormal {
  background: linear-gradient(180deg, #ff311f, #db180d);
}

.topbar__status-card--pending {
  background: linear-gradient(180deg, #7f8792, #656c76);
}

.topbar__sync-chip {
  min-height: 2.1rem;
  border-radius: 0.78rem;
  background: linear-gradient(180deg, rgba(59, 102, 179, 0.96), rgba(37, 71, 132, 0.96));
  border-color: rgba(104, 147, 220, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0.2rem 0.55rem rgba(0, 0, 0, 0.14);
}

.topbar__actions {
  padding: 0.45rem;
  gap: 0.65rem;
}

.icon-action-button {
  border-radius: 0.95rem;
  border: 1px solid rgba(116, 144, 181, 0.22);
  background:
    linear-gradient(180deg, rgba(21, 31, 45, 0.98), rgba(11, 18, 29, 0.98)),
    linear-gradient(135deg, rgba(70, 116, 190, 0.05), transparent 55%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0.4rem 1rem rgba(0, 0, 0, 0.2);
}

.icon-action-button:hover {
  transform: translateY(-1px);
}

.icon-action-button--accent {
  background: linear-gradient(180deg, #56a84b, #3d7d38);
}

.monitor-content {
  grid-template-columns: minmax(0, 1.12fr) minmax(42rem, 0.88fr);
  gap: 0.8rem;
  padding: 0;
}

.live-pane,
.alert-monitor-pane,
.request-pane {
  border-radius: 1.1rem;
  border: 1px solid rgba(97, 127, 168, 0.2);
  background:
    linear-gradient(180deg, rgba(15, 24, 37, 0.98), rgba(9, 16, 27, 0.95)),
    linear-gradient(135deg, rgba(76, 116, 178, 0.04), transparent 50%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 1.1rem 2.2rem rgba(0, 0, 0, 0.22);
}

.board-pane {
  gap: 0.8rem;
  grid-template-rows: minmax(18rem, 34%) minmax(0, 1fr);
}

.section-titlebar {
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid rgba(82, 109, 144, 0.2);
  background:
    linear-gradient(180deg, rgba(18, 31, 49, 0.98), rgba(10, 18, 30, 0.94)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent 70%);
}

.section-titlebar h1 {
  font-size: clamp(1.32rem, 1.08vw, 1.85rem);
  letter-spacing: -0.035em;
}

.section-meta {
  align-items: center;
  gap: 0.55rem;
}

.meta-chip {
  min-height: 2.12rem;
  padding: 0 0.72rem;
  border-radius: 0.8rem;
  background: rgba(16, 29, 45, 0.96);
  border: 1px solid rgba(97, 126, 167, 0.24);
  color: #eff4ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.meta-chip--danger {
  background: linear-gradient(180deg, rgba(172, 30, 30, 0.96), rgba(132, 18, 18, 0.96));
}

.meta-chip--countdown {
  min-width: 8.3rem;
  justify-content: center;
  font-size: clamp(0.98rem, 0.82vw, 1.18rem);
}

.live-pane__body {
  padding: 0.8rem;
  gap: 0.8rem;
  grid-template-rows: minmax(18rem, 28%) minmax(0, 1fr);
}

.live-lists-row {
  grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.96fr);
  gap: 0.8rem;
}

.live-list-panel {
  border-radius: 1rem;
  border: 1px solid rgba(93, 124, 165, 0.2);
  background:
    linear-gradient(180deg, rgba(14, 24, 39, 0.98), rgba(8, 15, 25, 0.95)),
    linear-gradient(135deg, rgba(64, 107, 181, 0.04), transparent 60%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 0.8rem 1.8rem rgba(0, 0, 0, 0.18);
}

.live-list-panel__header {
  padding: 0.8rem 0.95rem;
}

.live-list-panel__header h1 {
  font-size: clamp(1.15rem, 0.95vw, 1.58rem);
}

.table-scroll,
.live-list-panel .table-scroll--overlay,
.table-scroll--alerts,
.table-scroll--requests {
  background: linear-gradient(180deg, rgba(8, 13, 21, 0.76), rgba(9, 15, 25, 0.68));
}

.data-table th,
.data-table td,
.mapping-table th,
.mapping-table td,
.loop-status-table th,
.loop-status-table td {
  padding: calc(0.42rem * var(--dense-scale)) calc(0.48rem * var(--dense-scale));
}

.data-table th {
  font-size: calc((var(--font-sm) + 0.02rem) * var(--panel-font-scale));
  letter-spacing: -0.01em;
}

#missing-materials-table th {
  background: linear-gradient(180deg, #9d1111, #7e0b0b);
}

#live-daily-table th {
  background: linear-gradient(180deg, #1676d3, #0c59b2);
}

#alerts-table th {
  background: linear-gradient(180deg, #10243f, #0b182d);
}

#requests-table th {
  background: linear-gradient(180deg, #114f9a, #0d3f79);
}

.alert-monitor-pane .data-table td {
  background: rgba(244, 248, 254, 0.96);
  color: #1c2c44;
}

.request-pane .data-table td {
  background: rgba(238, 244, 250, 0.95);
  color: #10243d;
}

.request-row--normal td {
  background: rgba(224, 244, 218, 0.96);
  color: #17331d;
}

.request-row--normal:nth-child(4n + 1) td,
.request-row--normal:nth-child(4n + 2) td {
  background: rgba(213, 239, 206, 0.98);
}

.request-row--abnormal td {
  background: rgba(253, 226, 226, 0.98);
  color: #4c1414;
}

.request-row--abnormal:nth-child(4n + 1) td,
.request-row--abnormal:nth-child(4n + 2) td {
  background: rgba(249, 212, 212, 0.98);
}

.request-row--pending td {
  background: rgba(254, 242, 199, 0.98);
}

.request-row--disabled td {
  background: rgba(198, 206, 217, 0.95);
}

.table-alert-row--missing.table-item-pair--odd td,
.request-row--abnormal.table-item-pair--odd td {
  background: #c71010;
  color: #fff;
}

.table-alert-row--missing.table-item-pair--even td,
.request-row--abnormal.table-item-pair--even td {
  background: #8d1e1e;
  color: #fff;
}

.table-row--duration.table-item-pair--odd td,
.table-alert-row--duration.table-item-pair--odd td {
  background: #c99700;
  color: #4a1600;
}

.table-row--duration.table-item-pair--even td,
.table-alert-row--duration.table-item-pair--even td {
  background: #e0b437;
  color: #4a1600;
}

.table-row--duration-long td,
.table-alert-row--duration-long td {
  background: #f7d6cf;
  color: #8d0000;
  border-color: #ea2a2a;
}

.request-controls {
  gap: 0.75rem;
}

.request-controls label {
  gap: 0.24rem;
  color: #d8e5f8;
}

.request-controls select,
.drawer-group input,
.drawer-group select {
  min-width: 5.2rem;
  border-radius: 0.78rem;
  background: rgba(16, 28, 44, 0.98);
  border: 1px solid rgba(102, 130, 168, 0.24);
  color: #eef4ff;
}

.live-grid {
  padding: 0.8rem;
  gap: 0.48rem;
  border-radius: 1rem;
  border: 1px solid rgba(93, 124, 165, 0.2);
  background:
    linear-gradient(180deg, rgba(13, 22, 35, 0.97), rgba(8, 13, 22, 0.97)),
    linear-gradient(135deg, rgba(64, 107, 181, 0.04), transparent 60%);
}

.live-card {
  border-radius: 0.96rem;
  border: 1px solid rgba(154, 184, 221, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 0.7rem 1.2rem rgba(0, 0, 0, 0.14);
}

.live-card__header {
  padding: 0.42rem 0.54rem 0.46rem;
}

.live-card__apc {
  font-size: clamp(0.78rem, 0.58vw, 0.96rem);
  letter-spacing: 0.06em;
}

.live-card__channel {
  font-size: clamp(0.84rem, 0.64vw, 1.08rem);
  line-height: 1.08;
}

.live-card__body {
  padding: 0.46rem 0.54rem 0.56rem;
  gap: 0.3rem;
}

.live-card__timecodes {
  margin: -0.46rem -0.54rem 0;
  padding: 0.26rem 0.54rem;
  font-size: clamp(0.69rem, 0.5vw, 0.84rem);
}

.live-card__clip {
  font-size: clamp(1rem, 0.8vw, 1.18rem);
}

.live-card__title {
  font-size: clamp(0.74rem, 0.55vw, 0.9rem);
  line-height: 1.18;
}

.live-card--current .live-card__body {
  background: linear-gradient(180deg, #35a44e, #18863e);
  color: #f7fff9;
}

.live-card--confirmed .live-card__body {
  background: linear-gradient(180deg, #7cd86d, #58c451);
  color: #09250d;
}

.live-card--live .live-card__body {
  background: linear-gradient(180deg, #1881dc, #0d67bc);
  color: #fff;
}

.live-card--missing .live-card__body {
  background: linear-gradient(180deg, #df1f1f, #b91010);
}

.live-card--duration-short .live-card__body {
  background: linear-gradient(180deg, #f3a42d, #da8115);
}

.live-card--duration-long .live-card__body {
  background: linear-gradient(180deg, #ffd8d1, #f7c5bc);
}

.live-card--empty .live-card__body,
.live-card--pending .live-card__body,
.live-card--support .live-card__body {
  background: linear-gradient(180deg, #d5dae3, #c3cad5);
  color: #34465d;
}

.status-pill {
  min-height: 2.1rem;
  padding: 0 0.66rem;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (max-width: 1880px) {
  .topbar {
    grid-template-columns: minmax(15rem, 0.82fr) minmax(24rem, 1.04fr) minmax(37rem, 1.7fr) minmax(15rem, 0.66fr);
  }

  .monitor-content {
    grid-template-columns: minmax(0, 1.02fr) minmax(34rem, 0.94fr);
  }
}

@media (max-width: 1600px) {
  .monitor-app {
    padding: 0.5rem;
    gap: 0.55rem;
  }

  .topbar {
    grid-template-columns: 15rem 23rem minmax(30rem, 1fr) 15rem;
    gap: 0.55rem;
  }

  .monitor-content {
    grid-template-columns: minmax(0, 1fr) minmax(30rem, 0.92fr);
    gap: 0.55rem;
  }

  .live-pane__body,
  .live-lists-row {
    gap: 0.55rem;
  }
}

@media (max-width: 1360px) {
  .monitor-app {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .topbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitor-content {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1.04fr) minmax(0, 0.96fr);
  }

  .live-lists-row {
    grid-template-columns: 1fr;
  }
}