:root {
  --bg: #eaf6fb;
  --surface: #ffffff;
  --surface-soft: #f3fbff;
  --surface-strong: #023047;
  --text: #023047;
  --muted: #2f6178;
  --line: #a6d6ea;
  --primary: #219ebc;
  --primary-strong: #023047;
  --accent: #ffb703;
  --accent-strong: #fb8500;
  --danger: #fb8500;
  --ring: rgba(33, 158, 188, 0.34);
  --radius-lg: 5px;
  --radius-md: 3.5px;
  --shadow-lg: 0 26px 68px rgba(2, 48, 71, 0.24);
  --shadow-md: 0 10px 24px rgba(2, 48, 71, 0.12);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--text);
  font-family: 'Lexend', 'Avenir Next', 'PingFang TC', 'Noto Sans TC', sans-serif;
  background: var(--bg);
  position: relative;
}

.page-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 12%, rgba(142, 202, 230, 0.62), transparent 46%),
    radial-gradient(circle at 84% 18%, rgba(33, 158, 188, 0.28), transparent 40%),
    linear-gradient(180deg, #edf8fd 0%, #deeff8 100%);
}

.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.62;
}

.orb-a {
  width: min(46vw, 620px);
  height: min(46vw, 620px);
  background: radial-gradient(circle at 32% 35%, rgba(33, 158, 188, 0.9), rgba(33, 158, 188, 0));
  left: -14vw;
  top: -12vh;
  animation: drift-a 16s ease-in-out infinite alternate;
}

.orb-b {
  width: min(38vw, 520px);
  height: min(38vw, 520px);
  background: radial-gradient(circle at 45% 45%, rgba(255, 183, 3, 0.74), rgba(255, 183, 3, 0));
  right: -10vw;
  top: 8vh;
  animation: drift-b 14s ease-in-out infinite alternate;
}

.orb-c {
  width: min(42vw, 560px);
  height: min(42vw, 560px);
  background: radial-gradient(circle at 52% 48%, rgba(251, 133, 0, 0.55), rgba(251, 133, 0, 0));
  left: 36vw;
  bottom: -28vh;
  animation: drift-c 18s ease-in-out infinite alternate;
}

.bg-grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(2, 48, 71, 0.12) 0.6px, transparent 0.6px);
  background-size: 3px 3px;
  opacity: 0.06;
  mix-blend-mode: multiply;
}

.shell {
  position: relative;
  z-index: 1;
  width: 95%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 24px 0 48px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.topbar h1,
.topbar p,
h2,
p {
  margin: 0;
}

.brand-wrap h1 {
  font-size: clamp(1.2rem, 2.1vw, 1.7rem);
  color: var(--primary-strong);
}

.status {
  display: none;
}

.status:empty {
  min-height: 0;
  margin-bottom: 0;
}

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

.toast-root {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 90;
  width: min(92vw, 460px);
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid #8ecae6;
  background: linear-gradient(180deg, #f6fcff, #e8f7fe);
  color: #023047;
  box-shadow: 0 16px 36px rgba(2, 48, 71, 0.28);
  font-weight: 550;
  transform: translate(-50%, -14px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast-root.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.toast-root.error {
  border-color: rgba(251, 133, 0, 0.62);
  background: linear-gradient(180deg, #fff6eb, #ffe8cf);
  color: #8f3f00;
}

.login-screen {
  min-height: calc(100vh - 94px);
  display: grid;
  place-items: center;
}

.auth-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.84));
  border: 1px solid rgba(166, 214, 234, 0.9);
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
  position: relative;
}

.login-card {
  width: min(94vw, 420px);
  padding: 34px 30px 30px;
  animation: login-reveal 700ms cubic-bezier(0.2, 0.74, 0.32, 1) both;
}

.login-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  border: 1px solid rgba(255, 183, 3, 0.44);
  mask-image: linear-gradient(to bottom, #000 0 34%, transparent 100%);
  pointer-events: none;
}

.login-card h2 {
  font-size: 1.62rem;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  color: var(--primary-strong);
  text-align: center;
}

.login-card .stack {
  align-items: center;
}

.login-card .stack input {
  width: 100%;
  max-width: 320px;
}

.login-card .stack button[type='submit'] {
  width: 100%;
  max-width: 180px;
}

.dashboard {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #9cd2e7;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(7px);
}

.tab-btn {
  min-height: 48px;
  border-radius: 4px;
  border: 1px solid #b9dded;
  background: #f3fbff;
  color: var(--primary-strong);
  box-shadow: none;
  transform: none;
}

.tab-btn:hover {
  filter: none;
  transform: none;
  box-shadow: none;
  background: #e8f7fe;
}

.tab-btn.is-active {
  background: linear-gradient(180deg, var(--primary), var(--primary-strong));
  color: #f2fbff;
  border-color: #1d8bab;
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block;
  animation: panel-enter 260ms ease;
}

.tab-panel[hidden] {
  display: none !important;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.summary-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #8ecae6;
  border-radius: var(--radius-md);
  padding: 13px 14px;
  background:
    linear-gradient(180deg, #ffffff, #f2fbff),
    linear-gradient(100deg, rgba(33, 158, 188, 0.1), rgba(255, 183, 3, 0.1));
  box-shadow: var(--shadow-md);
}

.summary-card::before {
  content: '';
  position: absolute;
  inset: -30% -10%;
  background: linear-gradient(110deg, transparent 34%, rgba(255, 255, 255, 0.38) 50%, transparent 64%);
  transform: translateX(-42%);
  animation: summary-shine 7.2s ease-in-out infinite;
  pointer-events: none;
}

.summary-card::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, #219ebc, #ffb703, #fb8500);
  opacity: 0.88;
  animation: summary-glow 4.2s ease-in-out infinite alternate;
  pointer-events: none;
}

.summary-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.summary-icon {
  width: 35px;
  height: 35px;
  border-radius: 4px;
  border: 1px solid #b8dfee;
  background: #ebf8ff;
  color: #0d5b77;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: icon-bob 3s ease-in-out infinite;
}

.summary-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.summary-title p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.summary-title strong {
  display: block;
  margin-top: 2px;
  color: var(--primary-strong);
  font-size: 1.36rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.summary-sub {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 7px;
}

.summary-sub span {
  color: var(--muted);
  font-size: 0.78rem;
}

.summary-sub strong {
  color: var(--primary-strong);
  font-size: 0.86rem;
}

.summary-list {
  display: grid;
  gap: 5px;
}

.summary-list span {
  color: #345f74;
  font-size: 0.79rem;
  line-height: 1.3;
}

.mini-track {
  height: 9px;
  border-radius: 2px;
  background: #d9ecf6;
  border: 1px solid #c8e2ef;
  display: flex;
  overflow: hidden;
  margin-bottom: 8px;
}

.mini-fill {
  width: 0%;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: width 760ms cubic-bezier(0.22, 0.61, 0.36, 1);
  animation: bar-breathe 3.6s ease-in-out infinite;
  --tug-a: rgba(255, 255, 255, 0.02);
  --tug-b: rgba(255, 255, 255, 0.42);
  --tug-c: rgba(255, 255, 255, 0.1);
  --tug-r: rgba(255, 255, 255, 0.38);
}

.mini-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 22%, rgba(255, 255, 255, 0.42) 52%, transparent 78%);
  transform: translateX(-120%);
  animation: bar-shimmer 3.8s linear infinite;
  pointer-events: none;
}

.mini-fill.image {
  background: linear-gradient(90deg, #219ebc, #147699);
}

.mini-fill.video {
  background: linear-gradient(90deg, #ffb703, #fb8500);
}

.mini-fill.assigned {
  background: linear-gradient(90deg, #219ebc, #023047);
  --tug-a: rgba(142, 202, 230, 0.08);
  --tug-b: rgba(33, 158, 188, 0.62);
  --tug-c: rgba(2, 48, 71, 0.22);
  --tug-r: rgba(142, 202, 230, 0.52);
}

.mini-fill.unassigned {
  background: linear-gradient(90deg, #ffb703, #fb8500);
  --tug-a: rgba(255, 183, 3, 0.08);
  --tug-b: rgba(255, 183, 3, 0.64);
  --tug-c: rgba(251, 133, 0, 0.2);
  --tug-r: rgba(255, 183, 3, 0.54);
}

.mini-fill.assigned::before,
.mini-fill.unassigned::before {
  content: '';
  position: absolute;
  inset: 0 -34% 0 -34%;
  background: linear-gradient(
    102deg,
    var(--tug-a) 0%,
    var(--tug-b) 46%,
    var(--tug-c) 54%,
    var(--tug-a) 100%
  );
  transform: translateX(-24%);
  animation: tug-strand-a 3.4s cubic-bezier(0.3, 0.05, 0.25, 1) infinite;
  animation-delay: var(--tug-delay, 0s);
  opacity: 0.78;
  pointer-events: none;
}

.mini-fill.assigned::after,
.mini-fill.unassigned::after {
  inset: 0 -30% 0 -30%;
  background: linear-gradient(
    258deg,
    rgba(0, 0, 0, 0) 0%,
    var(--tug-r) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  transform: translateX(24%);
  animation: tug-strand-b 3.9s cubic-bezier(0.3, 0.05, 0.25, 1) infinite;
  animation-delay: calc(var(--tug-delay, 0s) + 0.18s);
  opacity: 0.74;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 18px;
  width: 100%;
}

.page-card {
  min-height: calc(100vh - 230px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(190px, auto);
  gap: 12px;
}

.full-span {
  grid-column: 1 / -1;
}

.overview-coverage-card {
  grid-row: span 2;
}

.soft-card {
  background:
    linear-gradient(180deg, #ffffff, #f7fcff),
    linear-gradient(120deg, rgba(33, 158, 188, 0.08), rgba(255, 183, 3, 0.08));
  padding: 14px;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.panel-head h3 {
  margin: 0;
  color: var(--primary-strong);
  font-size: 1rem;
}

.panel-head small {
  color: var(--muted);
  font-size: 0.8rem;
}

.alert-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  display: grid;
  gap: 7px;
}

.donut-chart {
  position: relative;
  min-height: 248px;
  display: grid;
  place-items: center;
  border: 1px solid #d2e9f5;
  background: #fbfeff;
  border-radius: 5px;
  padding: 10px;
  overflow: hidden;
}

.donut-chart::before {
  content: '';
  position: absolute;
  width: 140%;
  height: 140%;
  border-radius: 50%;
  border: 1px dashed rgba(33, 158, 188, 0.28);
  top: -20%;
  left: -20%;
  pointer-events: none;
}

.donut-wrap {
  position: relative;
  width: min(100%, 218px);
  aspect-ratio: 1 / 1;
  animation: donut-float 4.6s ease-in-out infinite;
}

.donut-wrap.variant-device {
  animation-duration: 4.4s;
}

.donut-wrap.variant-media {
  animation-duration: 5.8s;
  animation-direction: alternate-reverse;
}

.donut-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.donut-track {
  fill: none;
  stroke: #d8ecf6;
}

.donut-pulse {
  fill: none;
  stroke-linecap: round;
  animation:
    donut-gap-size-device var(--donut-gap-duration, 4.5s) cubic-bezier(0.35, 0.02, 0.26, 0.99) infinite alternate,
    donut-gap-drift var(--donut-drift-duration, 9.4s) linear infinite;
  animation-delay: var(--donut-gap-delay, 0s), var(--donut-drift-delay, 0s);
  opacity: 0.95;
  will-change: stroke-dasharray, stroke-dashoffset;
}

.donut-pulse.variant-device {
  animation-name: donut-gap-size-device, donut-gap-drift;
}

.donut-pulse.variant-media {
  animation-name: donut-gap-size-media, donut-gap-drift;
  animation-direction: alternate-reverse, normal;
}

.donut-pulse.is-empty {
  stroke: #8ebbd0;
  opacity: 0.45;
  --donut-gap-duration: 5.2s;
  --donut-drift-duration: 10.8s;
}

.donut-pulse.online,
.legend-swatch.online {
  stroke: #219ebc;
  background: #219ebc;
}

.donut-pulse.idle,
.legend-swatch.idle {
  stroke: #ffb703;
  background: #ffb703;
}

.donut-pulse.offline,
.legend-swatch.offline {
  stroke: #fb8500;
  background: #fb8500;
}

.donut-pulse.image,
.legend-swatch.image {
  stroke: #2a8cab;
  background: #2a8cab;
}

.donut-pulse.video,
.legend-swatch.video {
  stroke: #d97706;
  background: #d97706;
}

.donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  pointer-events: none;
}

.donut-center strong {
  font-size: 1.06rem;
  color: var(--primary-strong);
  line-height: 1.2;
}

.donut-center span {
  font-size: 0.76rem;
  color: var(--muted);
}

.chart-legend {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.84rem;
  color: var(--muted);
}

.legend-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.legend-left span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legend-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
  flex: 0 0 auto;
}

.legend-item strong {
  color: var(--primary-strong);
  font-size: 0.83rem;
}

.coverage-wrap {
  display: grid;
  gap: 8px;
}

.coverage-track {
  height: 16px;
  border-radius: 4px;
  background: #e5f2f9;
  border: 1px solid #c5e2ef;
  overflow: hidden;
  display: flex;
}

.coverage-fill {
  width: 0%;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: width 760ms cubic-bezier(0.22, 0.61, 0.36, 1);
  animation: bar-breathe 2.8s ease-in-out infinite;
  transform: translateZ(0);
  will-change: transform, filter;
  --tug-a: rgba(255, 255, 255, 0.02);
  --tug-b: rgba(255, 255, 255, 0.42);
  --tug-c: rgba(255, 255, 255, 0.1);
  --tug-r: rgba(255, 255, 255, 0.38);
}

.coverage-fill::before {
  content: '';
  position: absolute;
  inset: 0 -36% 0 -36%;
  background: linear-gradient(
    102deg,
    var(--tug-a) 0%,
    var(--tug-b) 46%,
    var(--tug-c) 54%,
    var(--tug-a) 100%
  );
  transform: translateX(-24%);
  animation: tug-strand-a 3.6s cubic-bezier(0.3, 0.05, 0.25, 1) infinite;
  animation-delay: var(--bar-shift-delay, 0s);
  opacity: 0.82;
  pointer-events: none;
}

.coverage-fill::after {
  content: '';
  position: absolute;
  inset: 0 -32% 0 -32%;
  background: linear-gradient(
    258deg,
    rgba(0, 0, 0, 0) 0%,
    var(--tug-r) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  transform: translateX(24%);
  animation: tug-strand-b 4.2s cubic-bezier(0.3, 0.05, 0.25, 1) infinite;
  animation-delay: calc(var(--bar-shift-delay, 0s) + 0.18s);
  opacity: 0.78;
  pointer-events: none;
}

.coverage-fill.assigned {
  background: linear-gradient(90deg, #219ebc, #023047);
  --tug-a: rgba(142, 202, 230, 0.08);
  --tug-b: rgba(33, 158, 188, 0.62);
  --tug-c: rgba(2, 48, 71, 0.22);
  --tug-r: rgba(142, 202, 230, 0.52);
}

.coverage-fill.unassigned {
  background: linear-gradient(90deg, #ffb703, #fb8500);
  --tug-a: rgba(255, 183, 3, 0.08);
  --tug-b: rgba(255, 183, 3, 0.64);
  --tug-c: rgba(251, 133, 0, 0.2);
  --tug-r: rgba(255, 183, 3, 0.54);
}

.coverage-summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.rank-bars {
  margin-top: 10px;
  display: grid;
  gap: 9px;
}

.rank-row {
  display: grid;
  grid-template-columns: minmax(104px, 1fr) minmax(140px, 2.3fr) auto;
  align-items: center;
  gap: 9px;
}

.rank-label {
  color: var(--primary-strong);
  font-size: 0.84rem;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;
}

.rank-track {
  height: 12px;
  border-radius: 3px;
  background: #e3f1f8;
  border: 1px solid #cce6f2;
  overflow: hidden;
}

.rank-fill {
  width: 0%;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: width 760ms cubic-bezier(0.22, 0.61, 0.36, 1);
  animation: bar-breathe 2.9s ease-in-out infinite;
  transform: translateZ(0);
  will-change: transform, filter;
  --tug-a: rgba(255, 255, 255, 0.02);
  --tug-b: rgba(255, 255, 255, 0.42);
  --tug-c: rgba(255, 255, 255, 0.1);
  --tug-r: rgba(255, 255, 255, 0.38);
}

.rank-fill::before {
  content: '';
  position: absolute;
  inset: 0 -34% 0 -34%;
  background: linear-gradient(
    102deg,
    var(--tug-a) 0%,
    var(--tug-b) 46%,
    var(--tug-c) 54%,
    var(--tug-a) 100%
  );
  transform: translateX(-22%);
  animation: tug-strand-a 3.8s cubic-bezier(0.3, 0.05, 0.25, 1) infinite;
  animation-delay: var(--bar-shift-delay, 0s);
  opacity: 0.8;
  pointer-events: none;
}

.rank-fill::after {
  content: '';
  position: absolute;
  inset: 0 -30% 0 -30%;
  background: linear-gradient(
    258deg,
    rgba(0, 0, 0, 0) 0%,
    var(--tug-r) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  transform: translateX(22%);
  animation: tug-strand-b 4.4s cubic-bezier(0.3, 0.05, 0.25, 1) infinite;
  animation-delay: calc(var(--bar-shift-delay, 0s) + 0.2s);
  opacity: 0.76;
  pointer-events: none;
}

.rank-fill.online {
  background: linear-gradient(90deg, #219ebc, #0f6a8d);
  --tug-a: rgba(142, 202, 230, 0.08);
  --tug-b: rgba(33, 158, 188, 0.62);
  --tug-c: rgba(2, 48, 71, 0.22);
  --tug-r: rgba(142, 202, 230, 0.52);
}

.rank-fill.idle {
  background: linear-gradient(90deg, #ffb703, #d99100);
  --tug-a: rgba(255, 183, 3, 0.08);
  --tug-b: rgba(255, 183, 3, 0.64);
  --tug-c: rgba(251, 133, 0, 0.2);
  --tug-r: rgba(255, 183, 3, 0.54);
}

.rank-fill.offline {
  background: linear-gradient(90deg, #ffd166, #c99300);
  --tug-a: rgba(255, 183, 3, 0.08);
  --tug-b: rgba(255, 183, 3, 0.64);
  --tug-c: rgba(251, 133, 0, 0.2);
  --tug-r: rgba(255, 183, 3, 0.54);
}

.rank-meta-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rank-meta {
  color: #2f6178;
  font-size: 0.79rem;
  white-space: nowrap;
}

.heartbeat-bars {
  min-height: 198px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 10px;
  align-items: end;
}

.heartbeat-col {
  display: grid;
  gap: 5px;
  align-content: end;
}

.heartbeat-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #1d5f7a;
  background: #e7f4fb;
  border: 1px solid #b9dded;
  border-radius: 999px;
  padding: 0 8px;
  justify-self: start;
}

.heartbeat-track {
  height: 138px;
  border-radius: 4px;
  border: 1px solid #cbe5f2;
  background: #f4fbff;
  padding: 3px;
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
}

.heartbeat-track::before {
  content: '';
  position: absolute;
  inset: 3px;
  background: repeating-linear-gradient(
    to top,
    rgba(47, 97, 120, 0.14) 0,
    rgba(47, 97, 120, 0.14) 1px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0) 24px
  );
  pointer-events: none;
  border-radius: 2px;
}

.heartbeat-fill {
  width: 100%;
  height: 0%;
  border-radius: 2px;
  position: relative;
  z-index: 1;
  transition: height 820ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transform-origin: bottom center;
  animation: heartbeat-breathe 3.5s ease-in-out infinite, heartbeat-wave 2.9s ease-in-out infinite alternate;
  animation-delay: 0s, var(--beat-delay, 0s);
  will-change: transform, filter;
}

.heartbeat-fill.online {
  background: linear-gradient(180deg, #219ebc, #0d6f94);
}

.heartbeat-fill.idle {
  background: linear-gradient(180deg, #ffb703, #d58d00);
}

.heartbeat-fill.offline {
  background: linear-gradient(180deg, #fb8500, #bc5d00);
}

.heartbeat-label {
  margin: 0;
  color: var(--primary-strong);
  font-size: 0.77rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.heartbeat-meta {
  color: #4f7488;
  font-size: 0.7rem;
  line-height: 1.25;
}

.chart-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 650;
  padding: 4px 8px;
  border: 1px solid transparent;
}

.status-pill.tiny {
  min-width: 36px;
  padding: 2px 6px;
  font-size: 0.66rem;
}

.status-pill.online {
  color: #0f6a43;
  background: #d8f5e8;
  border-color: #9ad8ba;
}

.status-pill.idle {
  color: #8a6200;
  background: #fff0cc;
  border-color: #f8d47d;
}

.status-pill.offline {
  color: #7e2d1f;
  background: #ffe2d6;
  border-color: #f3b69f;
}

.section-head {
  margin-bottom: 12px;
}

.section-head h2 {
  font-size: 1.09rem;
  margin-bottom: 6px;
  color: var(--primary-strong);
}

.section-head p {
  color: var(--muted);
  font-size: 0.94rem;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.row label {
  color: var(--primary-strong);
  font-weight: 600;
}

input,
select,
button {
  font: inherit;
}

input,
select {
  width: 100%;
  min-height: 44px;
  border-radius: 6px;
  border: 1px solid #8ecae6;
  background: #ffffff;
  color: var(--text);
  padding: 0 12px;
}

input:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 1px;
}

button {
  min-height: 44px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--primary), var(--primary-strong));
  color: #f7fcff;
  padding: 0 16px;
  font-weight: 550;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

button:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(33, 158, 188, 0.28);
}

button.ghost {
  width: auto;
  border: 1px solid #219ebc;
  color: var(--text);
  background: #f2fbff;
}

button.danger {
  width: auto;
  background: linear-gradient(180deg, #fb8500, #d26f00);
}

.row input,
.row select {
  flex: 1 1 320px;
}

.row button {
  width: auto;
  white-space: nowrap;
}

.device-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.device-toolbar-left {
  flex: 1 1 420px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.device-toolbar-left input {
  flex: 1 1 280px;
  min-width: 220px;
}

.device-count-meta {
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

.device-mobile-sort {
  display: none;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.device-mobile-sort label {
  color: var(--primary-strong);
  font-weight: 600;
  white-space: nowrap;
}

.device-mobile-sort select {
  min-width: 0;
}

.device-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.device-page-info {
  color: #3b6478;
  font-size: 0.82rem;
  min-width: 170px;
  text-align: center;
}

.device-page-card {
  display: flex;
  flex-direction: column;
}

.device-page-card .table-wrap {
  flex: 1 1 auto;
}

.device-page-card .device-pagination {
  margin-top: auto;
  padding-top: 10px;
}

.media-page-card {
  display: flex;
  flex-direction: column;
}

.media-page-card .table-wrap {
  flex: 1 1 auto;
}

.media-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.media-toolbar-left {
  flex: 1 1 460px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.media-toolbar-left input {
  flex: 1 1 240px;
  min-width: 220px;
}

.media-toolbar-left select {
  width: auto;
  min-width: 136px;
}

.media-count-meta {
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

.media-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}

.media-page-info {
  color: #3b6478;
  font-size: 0.82rem;
  min-width: 170px;
  text-align: center;
}

.media-pagination .ghost {
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.84rem;
  border-radius: 4px;
}

.media-pagination .ghost:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.device-pagination .ghost {
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.84rem;
  border-radius: 4px;
}

.device-pagination .ghost:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 48, 71, 0.34);
  backdrop-filter: blur(4px);
}

.device-modal {
  width: min(94vw, 560px);
  padding: 24px 20px 18px;
  border-radius: 6px;
}

.delete-device-modal {
  width: min(94vw, 520px);
}

.media-modal {
  width: min(94vw, 780px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

#mediaUploadModalBackdrop {
  align-items: flex-start;
  overflow-y: auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}

.media-file-picker {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #b9dded;
  background: linear-gradient(180deg, #f9fdff, #edf8ff);
}

.media-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.media-file-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid #1d86a7;
  background: linear-gradient(180deg, #34b7d8, #1a89ab);
  color: #f6fcff;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.media-file-picker:focus-within .media-file-trigger {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

.media-file-trigger:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(23, 131, 164, 0.34);
}

.media-file-selected {
  margin: 0;
  min-width: 0;
  color: #3e6f85;
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-file-picker.has-file .media-file-selected {
  color: #0a4960;
  font-weight: 600;
}

.media-preview-wrap {
  border: 1px solid #b9dded;
  border-radius: 5px;
  background: #f8fcff;
  padding: 10px;
}

.media-preview-stage {
  min-height: 240px;
  border-radius: 5px;
  border: 1px dashed #9dcfe4;
  background: #ecf8ff;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.media-preview-empty {
  margin: 0;
  color: #3f6e84;
  font-size: 0.88rem;
  text-align: center;
}

.media-preview-canvas,
.media-preview-image,
.media-preview-video {
  max-width: 100%;
  max-height: 300px;
  border-radius: 3px;
  border: 1px solid #b8dfee;
  background: #ffffff;
}

.image-edit-controls {
  border: 1px solid #b9dded;
  border-radius: 5px;
  background: #f5fbff;
  padding: 10px;
  display: grid;
  gap: 10px;
}

.image-edit-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.image-edit-row .ghost {
  min-height: 36px;
  padding: 0 12px;
}

.image-edit-grid {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
}

.image-edit-grid label {
  color: #315f75;
  font-size: 0.84rem;
  font-weight: 600;
}

.image-edit-grid input[type='range'] {
  min-height: 34px;
  padding: 0;
}

.image-edit-grid select {
  min-height: 38px;
}

.media-upload-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.media-preview-modal {
  width: min(96vw, 980px);
}

.media-preview-modal-body {
  min-height: min(64vh, 560px);
  border-radius: 5px;
  border: 1px solid #b9dded;
  background: #edf8ff;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.media-preview-modal-image,
.media-preview-modal-video {
  max-width: 100%;
  max-height: min(62vh, 540px);
  object-fit: contain;
}

.media-rename-modal {
  width: min(94vw, 560px);
}

.delete-device-target-text {
  margin: 0;
  padding: 10px 12px;
  border-radius: 5px;
  border: 1px solid #ffd09b;
  background: #fff7ed;
  color: #8f3f00;
  font-size: 0.92rem;
}

.delete-device-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.device-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.device-modal-head h2 {
  color: var(--primary-strong);
  font-size: 1.08rem;
}

.device-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}

.icon-btn {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid #8ecae6;
  border-radius: 5px;
  background: #ffffff;
  color: var(--primary-strong);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover {
  filter: none;
  transform: none;
  box-shadow: none;
  background: #f3fbff;
}

.icon-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn svg,
.icon-btn svg * {
  pointer-events: none;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 10px 7px;
  border-bottom: 1px solid #d3e9f4;
  text-align: center;
  vertical-align: middle;
}

th {
  color: #28556d;
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

td {
  font-size: 0.93rem;
}

.table-sort-btn {
  min-height: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  box-shadow: none;
  filter: none;
  transform: none;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.table-sort-btn::after {
  content: '↕';
  font-size: 0.74rem;
  color: #4f7990;
  opacity: 0.9;
}

.table-sort-btn.is-active[data-order='asc']::after {
  content: '↑';
}

.table-sort-btn.is-active[data-order='desc']::after {
  content: '↓';
}

.table-sort-btn:hover {
  filter: none;
  transform: none;
  box-shadow: none;
  color: #023047;
}

.token-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 260px;
}

.token-value {
  margin: 0;
  border-radius: 4.5px;
  border: 1px solid #c6e5f3;
  padding: 6px 10px;
  background: #f3fbff;
  color: var(--surface-strong);
  font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.3;
  word-break: break-all;
  flex: 1 1 auto;
}

.token-value.is-hidden {
  color: #376074;
  letter-spacing: 0.05em;
}

.token-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  justify-content: center;
}

.token-copy.is-copied {
  border-color: #7dbf96;
  background: #ecfff3;
  color: #1f7a45;
}

.token-unavailable {
  color: var(--muted);
  font-size: 0.86rem;
}

.device-monitoring-cell {
  min-width: 320px;
}

.device-action-cell {
  min-width: 250px;
}

.device-action-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: min(100%, 238px);
}

.device-action-group .ghost,
.device-action-group .danger {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.8rem;
  width: 100%;
}

.device-action-group .ghost:disabled,
.device-action-group .danger:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.35);
  transform: none;
  box-shadow: none;
}

.device-action-group .ghost:disabled:hover,
.device-action-group .danger:disabled:hover {
  filter: grayscale(0.35);
  transform: none;
  box-shadow: none;
}

.device-revoke-auth {
  border-color: #f3b69f;
  color: #9d2f0f;
  background: #fff3ed;
}

.device-revoke-auth:hover {
  background: #ffe6db;
}

.device-monitoring {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
  min-width: 0;
}

.device-monitoring-simple {
  gap: 6px;
}

.device-monitoring-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.monitor-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 650;
}

.monitor-badge.ok {
  color: #0f6a43;
  background: #dcf8ea;
  border-color: #9fdabc;
}

.monitor-badge.warn {
  color: #895e00;
  background: #fff2cf;
  border-color: #f2cf7d;
}

.monitor-badge.stale {
  color: #7a3b12;
  background: #ffe7d8;
  border-color: #f3b599;
}

.monitor-badge.error {
  color: #7e2d1f;
  background: #ffe2d6;
  border-color: #f3b69f;
}

.device-monitoring-meta {
  color: #355f74;
  font-size: 0.76rem;
}

.device-monitoring-line {
  margin: 0;
  color: #355f74;
  font-size: 0.78rem;
  line-height: 1.32;
  word-break: break-word;
}

.device-monitoring-line.is-method {
  color: #1f5770;
  font-weight: 560;
}

.device-monitoring-line.is-error {
  color: #a54522;
}

.monitor-open-snapshot {
  width: 27px;
  min-width: 27px;
  min-height: 27px;
  margin-left: auto;
  padding: 0;
  border: 1px solid #8ecae6;
  border-radius: 999px;
  background: #ffffff;
  color: #1b6f8d;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.monitor-open-snapshot svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.monitor-open-snapshot svg,
.monitor-open-snapshot svg * {
  pointer-events: none;
}

.monitor-open-snapshot:hover {
  filter: none;
  transform: none;
  box-shadow: none;
  background: #ecf8ff;
}

.monitor-open-snapshot:disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

.monitor-open-snapshot:disabled:hover {
  transform: none;
  box-shadow: none;
  filter: none;
}

.device-snapshot-modal {
  width: min(96vw, 960px);
}

.device-snapshot-body {
  min-height: min(60vh, 540px);
  border-radius: 5px;
  border: 1px solid #b9dded;
  background: #edf8ff;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.device-snapshot-image,
.device-snapshot-video {
  max-width: 100%;
  max-height: min(58vh, 520px);
  object-fit: contain;
}

.device-snapshot-meta {
  margin: 10px 0 0;
  color: #355f74;
  font-size: 0.84rem;
}

.device-snapshot-empty {
  margin: 0;
  color: #355f74;
  font-size: 0.92rem;
  text-align: center;
}

.device-pairing-modal {
  width: min(94vw, 640px);
  max-height: min(92vh, 860px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.device-pairing-code-row,
.device-pairing-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.device-pairing-code-row .ghost,
.device-pairing-url-row .ghost {
  min-height: 36px;
  padding: 0 10px;
  white-space: nowrap;
}

.device-pairing-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 42px;
  border: 1px solid #c6e5f3;
  border-radius: 5px;
  background: #f3fbff;
  color: #0b4f68;
  font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0 12px;
}

#devicePairingUrlInput {
  flex: 1 1 auto;
}

.device-pairing-scanner-box {
  min-height: 176px;
  border: 1px dashed #9ccddd;
  border-radius: 8px;
  background: #edf8ff;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.device-pairing-scanner-video {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  display: block;
}

.device-pairing-scanner-empty {
  margin: 0;
  padding: 16px;
  text-align: center;
  color: #355f74;
  font-size: 0.84rem;
  line-height: 1.5;
}

.device-pairing-scanner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.device-pairing-scanner-actions .ghost {
  min-height: 34px;
  padding: 0 10px;
}

.device-pairing-scan-status {
  margin: 0;
  color: #325f74;
  font-size: 0.84rem;
}

.device-pairing-scan-status.error {
  color: #9a3a2f;
}

.device-pairing-scan-status.success {
  color: #1d7a53;
}

.device-pairing-expire-text {
  margin: 0;
  color: #325f74;
  font-size: 0.86rem;
}

@media (max-width: 720px) {
  #devicePairingModalBackdrop {
    align-items: flex-start;
    overflow-y: auto;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }

  .device-pairing-modal {
    width: 100%;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    padding: 16px 14px 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    margin: 0;
  }

  .device-pairing-modal .stack {
    gap: 9px;
  }

  .device-pairing-code-row,
  .device-pairing-url-row {
    flex-direction: column;
    align-items: stretch;
  }

  .device-pairing-code-row .ghost,
  .device-pairing-url-row .ghost {
    width: 100%;
  }

  .device-pairing-scanner-box {
    min-height: 124px;
    max-height: 186px;
  }

  .device-pairing-scanner-video {
    max-height: 184px;
  }

  .device-pairing-scanner-empty {
    padding: 12px;
    font-size: 0.8rem;
  }

  .device-pairing-modal .device-modal-actions {
    flex-wrap: wrap;
  }

  .device-pairing-modal .device-modal-actions > button {
    flex: 1 1 calc(50% - 4px);
    min-width: 120px;
  }
}

.media-type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 650;
  padding: 3px 8px;
}

.media-type-pill.image {
  color: #0f6a8d;
  border: 1px solid #8fcce3;
  background: #e8f7ff;
}

.media-type-pill.video {
  color: #925300;
  border: 1px solid #f7cc79;
  background: #fff2d4;
}

.media-usage-text {
  color: #345f74;
  font-size: 0.84rem;
}

.media-usage-open {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1d5f7a;
  font-size: 0.84rem;
  line-height: 1.45;
  text-align: left;
  text-decoration: underline dotted #7db8cf;
  text-underline-offset: 3px;
  cursor: pointer;
}

.media-usage-open:hover {
  color: #023047;
  background: transparent;
  transform: none;
  box-shadow: none;
}

.media-usage-open:focus-visible {
  outline: 2px solid #219ebc;
  outline-offset: 2px;
  border-radius: 2px;
}

.media-action-cell {
  min-width: 230px;
}

.media-action-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.media-action-group .ghost,
.media-action-group .danger {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.8rem;
}

.media-empty-cell {
  color: var(--muted);
}

.playlist-page-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.playlist-subtabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.playlist-subtab-btn {
  min-height: 42px;
  border-radius: 4px;
  border: 1px solid #b9dded;
  background: #f3fbff;
  color: var(--primary-strong);
  box-shadow: none;
  transform: none;
}

.playlist-subtab-btn:hover {
  filter: none;
  transform: none;
  box-shadow: none;
  background: #e8f7fe;
}

.playlist-subtab-btn.is-active {
  background: linear-gradient(180deg, var(--primary), var(--primary-strong));
  color: #f2fbff;
  border-color: #1d8bab;
}

.playlist-subpanel {
  display: none;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  animation: panel-enter 220ms ease;
}

.playlist-subpanel.is-active {
  display: flex;
}

.playlist-subpanel[hidden] {
  display: none !important;
}

.playlist-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
}

.playlist-modal-toolbar {
  margin-top: -2px;
  margin-bottom: 2px;
}

.playlist-toolbar-field {
  display: grid;
  gap: 6px;
}

.playlist-toolbar-field label {
  color: var(--primary-strong);
  font-weight: 600;
  font-size: 0.84rem;
}

.playlist-toolbar-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
}

.playlist-meta {
  margin: 0;
  color: #355f74;
  font-size: 0.84rem;
}

.playlist-editor-hint {
  margin: 0;
  color: #3d657a;
  font-size: 0.82rem;
  line-height: 1.45;
  background: #f6fbff;
  border: 1px solid #cde5f1;
  border-radius: 4px;
  padding: 8px 10px;
}

.playlist-device-grid,
.playlist-template-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

.playlist-device-card,
.playlist-template-card {
  border: 1px solid #b9dded;
  border-radius: 5px;
  background: #ffffff;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.playlist-device-card {
  min-height: 200px;
  grid-template-rows: auto auto 1fr auto;
}

.playlist-device-card h4,
.playlist-template-card h4 {
  margin: 0;
  color: #184d66;
  font-size: 0.96rem;
  font-weight: 700;
}

.playlist-device-card-meta {
  margin: 0;
  color: #355f74;
  font-size: 0.82rem;
  line-height: 1.45;
}

.playlist-template-preview {
  margin: 0;
  color: #2f5f75;
  font-size: 0.82rem;
  line-height: 1.45;
  min-height: 2.9em;
}

.playlist-device-open {
  justify-self: end;
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.8rem;
}

.playlist-template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.playlist-template-actions .ghost,
.playlist-template-actions .danger,
.playlist-template-actions .playlist-template-apply {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.8rem;
  width: auto;
}

.playlist-template-actions .playlist-template-apply {
  border: 1px solid transparent;
}

.playlist-empty-state {
  border: 1px dashed #b9dded;
  border-radius: 5px;
  padding: 14px;
  text-align: center;
  color: #4d7386;
  font-size: 0.86rem;
  background: #f6fbff;
}

.playlist-check-col {
  width: 72px;
}

.playlist-check-all-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #28556d;
  font-size: 0.78rem;
  white-space: nowrap;
}

.playlist-check-all-label input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
}

.apply-template-select {
  width: 16px;
  height: 16px;
}

.apply-template-time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.time-select-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.time-unit-select {
  min-height: 40px;
  padding: 0 10px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.time-select-separator {
  color: #1d5770;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1;
}

.playlist-pagination {
  margin-top: auto;
  padding-top: 8px;
}

.playlist-pagination-bottom {
  margin-top: auto;
}

.playlist-detail-btn {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.8rem;
}

.playlist-overview-items-cell {
  cursor: pointer;
  color: #1d5f7a;
  text-decoration: underline dotted #7db8cf;
  text-underline-offset: 3px;
}

.playlist-overview-items-cell:hover {
  color: #023047;
}

.playlist-overview-items-cell:focus-visible {
  outline: 2px solid #219ebc;
  outline-offset: -2px;
  border-radius: 2px;
}

#devicePlaylistModalBackdrop,
#playlistTemplateModalBackdrop,
#applyTemplateModalBackdrop {
  align-items: flex-start;
  overflow-y: auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}

.playlist-editor-modal,
.playlist-template-modal,
.playlist-apply-modal {
  width: min(96vw, 960px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.playlist-editor-modal {
  min-height: min(76vh, 860px);
}

.playlist-editor-modal .stack,
.playlist-template-modal .stack,
.playlist-apply-modal .stack {
  min-height: 0;
}

.playlist-editor-modal .playlist-editor,
.playlist-template-modal .playlist-editor {
  max-height: min(50vh, 460px);
  overflow-y: auto;
  padding-right: 2px;
}

.playlist-editor-modal .playlist-editor {
  max-height: min(66vh, 660px);
}

.playlist-detail-modal {
  width: min(94vw, 680px);
}

.media-usage-modal {
  width: min(94vw, 820px);
}

.playlist-detail-meta {
  margin: 0;
  color: #355f74;
  font-size: 0.84rem;
}

.media-usage-list {
  min-height: 120px;
  max-height: min(52vh, 420px);
  overflow: auto;
  margin-top: 8px;
  border: 1px solid #b9dded;
  border-radius: 5px;
  background: #f6fcff;
  padding: 10px 12px;
}

.media-usage-device-grid {
  display: grid;
  gap: 8px;
}

.media-usage-device-row {
  border: 1px solid #c7e2ef;
  border-radius: 5px;
  background: #ffffff;
  padding: 10px;
  display: grid;
  gap: 6px;
}

.media-usage-device-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.media-usage-device-name {
  color: #023047;
  font-size: 0.92rem;
  line-height: 1.35;
}

.media-usage-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.media-usage-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid #b6dbe9;
  background: #eaf8ff;
  color: #1c637f;
  font-size: 0.74rem;
  font-weight: 650;
  white-space: nowrap;
}

.media-usage-tag.is-source {
  border-color: #9bcfe2;
  background: #f4fbff;
  color: #245d74;
}

.media-usage-tag.is-warn {
  border-color: #e9c67d;
  background: #fff2d8;
  color: #875300;
}

.media-usage-tag.is-playing {
  border-color: #ffbd7f;
  background: #ffe8d3;
  color: #914900;
}

.media-usage-line {
  margin: 0;
  color: #355f74;
  font-size: 0.82rem;
}

.media-usage-template-section {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.media-usage-subtitle {
  margin: 0;
  color: #264e62;
  font-size: 0.88rem;
}

.media-usage-template-list {
  display: grid;
  gap: 8px;
}

.media-usage-template-item {
  border: 1px solid #c7e2ef;
  border-radius: 5px;
  background: #f8fcff;
  padding: 9px 10px;
  display: grid;
  gap: 4px;
}

.playlist-detail-list {
  min-height: 120px;
  max-height: min(50vh, 380px);
  overflow: auto;
  margin-top: 8px;
  border: 1px solid #b9dded;
  border-radius: 5px;
  background: #f6fcff;
  padding: 10px 12px;
}

.playlist-detail-items {
  margin: 0;
  padding-left: 18px;
  color: #355f74;
  display: grid;
  gap: 6px;
}

.playlist-editor {
  display: grid;
  gap: 10px;
}

.playlist-row {
  display: grid;
  grid-template-columns: auto 1fr 110px 128px;
  align-items: center;
  gap: 10px;
  border: 1px solid #b9dded;
  border-radius: 6px;
  padding: 11px;
  background: var(--surface-soft);
}

.playlist-row .pl-enabled {
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  margin: 0;
  justify-self: start;
  align-self: center;
}

.playlist-row input[type='text'] {
  min-height: 38px;
  text-align: center;
}

.playlist-row .meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.playlist-row .meta .tiny {
  color: var(--muted);
  font-size: 0.82rem;
}

.playlist-number-field {
  display: grid;
  gap: 4px;
}

.playlist-number-label {
  color: #39657b;
  font-size: 0.74rem;
  font-weight: 600;
  text-align: center;
}

.hidden {
  display: none;
}

@keyframes panel-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes summary-shine {
  0%,
  26% {
    transform: translateX(-56%);
  }
  72%,
  100% {
    transform: translateX(58%);
  }
}

@keyframes summary-glow {
  from {
    opacity: 0.5;
    filter: saturate(0.88);
  }
  to {
    opacity: 0.95;
    filter: saturate(1.15);
  }
}

@keyframes icon-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes bar-breathe {
  0%,
  100% {
    filter: saturate(0.94) brightness(0.96);
  }
  50% {
    filter: saturate(1.08) brightness(1.06);
  }
}

@keyframes bar-shimmer {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

@keyframes tug-strand-a {
  0% {
    transform: translateX(-24%) scaleX(1.14);
    opacity: 0.26;
  }
  34% {
    transform: translateX(8%) scaleX(0.86);
    opacity: 0.96;
  }
  68% {
    transform: translateX(16%) scaleX(0.94);
    opacity: 0.62;
  }
  100% {
    transform: translateX(-24%) scaleX(1.14);
    opacity: 0.26;
  }
}

@keyframes tug-strand-b {
  0% {
    transform: translateX(24%) scaleX(0.86);
    opacity: 0.24;
  }
  38% {
    transform: translateX(-8%) scaleX(1.12);
    opacity: 0.92;
  }
  72% {
    transform: translateX(-16%) scaleX(1.04);
    opacity: 0.58;
  }
  100% {
    transform: translateX(24%) scaleX(0.86);
    opacity: 0.24;
  }
}

@keyframes donut-orbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes donut-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-3px) scale(1.008);
  }
}

@keyframes donut-gap-size-device {
  0% {
    stroke-dasharray: 100 0;
  }
  36% {
    stroke-dasharray: 98.8 1.2;
  }
  68% {
    stroke-dasharray: 96.4 3.6;
  }
  100% {
    stroke-dasharray: 94.2 5.8;
  }
}

@keyframes donut-gap-size-media {
  0% {
    stroke-dasharray: 99.3 0.7;
  }
  34% {
    stroke-dasharray: 97.5 2.5;
  }
  66% {
    stroke-dasharray: 94.6 5.4;
  }
  100% {
    stroke-dasharray: 92.4 7.6;
  }
}

@keyframes donut-gap-drift {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: var(--donut-drift-distance, -14);
  }
}

@keyframes heartbeat-breathe {
  0%,
  100% {
    filter: saturate(0.92) brightness(0.94);
  }
  50% {
    filter: saturate(1.08) brightness(1.08);
  }
}

@keyframes heartbeat-wave {
  from {
    transform: scaleY(0.96) translateY(1px);
  }
  to {
    transform: scaleY(1.04) translateY(-1px);
  }
}

@keyframes drift-a {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(30px, 18px, 0) scale(1.06);
  }
}

@keyframes drift-b {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-24px, 32px, 0) scale(1.07);
  }
}

@keyframes drift-c {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(16px, -28px, 0) scale(1.1);
  }
}

@keyframes login-reveal {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 1100px) {
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .overview-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .overview-coverage-card {
    grid-row: auto;
  }
}

@media (max-width: 780px) {
  .shell {
    width: calc(100% - 18px);
    padding: 14px 0 30px;
  }

  .login-card {
    padding: 28px 20px 22px;
  }

  .tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px;
    scrollbar-width: thin;
  }

  .tab-btn {
    flex: 0 0 auto;
    padding: 0 14px;
    min-width: 108px;
  }

  .playlist-subtabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0;
    scrollbar-width: thin;
  }

  .playlist-subtab-btn {
    flex: 0 0 auto;
    min-width: 118px;
    padding: 0 12px;
  }

  .playlist-toolbar {
    grid-template-columns: 1fr;
  }

  .apply-template-time-grid {
    grid-template-columns: 1fr;
  }

  .playlist-toolbar-actions {
    justify-content: flex-start;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .page-card {
    min-height: calc(100vh - 260px);
  }

  .soft-card {
    padding: 12px;
  }

  .panel-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .donut-chart {
    min-height: 222px;
  }

  .rank-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .rank-meta-wrap {
    justify-content: flex-start;
  }

  .heartbeat-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
  }

  .heartbeat-track {
    height: 112px;
  }

  .row input,
  .row select,
  .row button {
    flex: 1 1 100%;
    width: 100%;
  }

  .device-toolbar-left {
    flex: 1 1 100%;
  }

  .device-toolbar-left input {
    min-width: 0;
  }

  .media-toolbar-left {
    flex: 1 1 100%;
  }

  .media-toolbar-left input,
  .media-toolbar-left select {
    min-width: 0;
    width: 100%;
    flex: 1 1 100%;
  }

  .media-count-meta {
    width: 100%;
    text-align: left;
  }

  .device-mobile-sort {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
  }

  .device-mobile-sort .ghost {
    width: auto;
    padding: 0 12px;
    min-height: 44px;
    white-space: nowrap;
  }

  #panelDevices .table-wrap {
    overflow-x: visible;
  }

  #panelDevices table,
  #panelDevices tbody,
  #panelDevices tr,
  #panelDevices td {
    display: block;
    width: 100%;
  }

  #panelDevices thead {
    display: none;
  }

  #panelDevices tbody {
    display: grid;
    gap: 10px;
  }

  #panelDevices tbody tr {
    border: 1px solid #d3e9f4;
    border-radius: 6px;
    padding: 10px 12px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(2, 48, 71, 0.08);
  }

  #panelDevices tbody td {
    border: 0;
    padding: 5px 0;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    text-align: left;
  }

  #panelDevices tbody td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    padding-top: 2px;
  }

  #panelDevices tbody td.device-empty-cell {
    display: block;
    padding: 4px 0;
  }

  #panelDevices tbody td.device-empty-cell::before {
    content: none;
  }

  #panelDevices tbody td.device-token-cell,
  #panelDevices tbody td.device-monitoring-cell,
  #panelDevices tbody td.device-action-cell {
    grid-template-columns: 1fr;
  }

  #panelDevices tbody td.device-token-cell::before,
  #panelDevices tbody td.device-monitoring-cell::before,
  #panelDevices tbody td.device-action-cell::before {
    margin-bottom: 2px;
  }

  #panelDevices .token-cell {
    min-width: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
  }

  #panelDevices .token-actions {
    justify-content: flex-start;
    width: 100%;
  }

  #panelDevices .device-delete {
    width: 100%;
  }

  #panelDevices .device-action-group {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  #panelDevices .device-action-group .ghost,
  #panelDevices .device-action-group .danger {
    width: 100%;
  }

  #panelDevices .device-monitoring-cell {
    min-width: 0;
  }

  #panelDevices .monitor-open-snapshot {
    width: 27px;
    min-width: 27px;
    margin-left: 0;
  }

  #panelMedia .table-wrap {
    overflow-x: visible;
  }

  #panelMedia table,
  #panelMedia tbody,
  #panelMedia tr,
  #panelMedia td {
    display: block;
    width: 100%;
  }

  #panelMedia thead {
    display: none;
  }

  #panelMedia tbody {
    display: grid;
    gap: 10px;
  }

  #panelMedia tbody tr {
    border: 1px solid #d3e9f4;
    border-radius: 6px;
    padding: 10px 12px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(2, 48, 71, 0.08);
  }

  #panelMedia tbody td {
    border: 0;
    padding: 5px 0;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    text-align: left;
  }

  #panelMedia tbody td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    padding-top: 2px;
  }

  #panelMedia tbody td.media-empty-cell {
    display: block;
    padding: 4px 0;
  }

  #panelMedia tbody td.media-empty-cell::before {
    content: none;
  }

  #panelMedia tbody td.media-action-cell {
    grid-template-columns: 1fr;
  }

  #panelMedia tbody td.media-action-cell::before {
    margin-bottom: 2px;
  }

  #panelMedia .media-action-group {
    justify-content: flex-start;
    width: 100%;
  }

  #panelMedia .media-usage-open {
    justify-self: start;
    width: fit-content;
  }

  .media-usage-device-head {
    flex-direction: column;
  }

  .media-usage-badges {
    justify-content: flex-start;
  }

  .playlist-device-grid,
  .playlist-template-grid {
    grid-template-columns: 1fr;
  }

  .playlist-device-open {
    width: 100%;
    justify-self: stretch;
  }

  .playlist-template-actions {
    justify-content: stretch;
  }

  .playlist-template-actions .ghost,
  .playlist-template-actions .danger,
  .playlist-template-actions .playlist-template-apply {
    flex: 1 1 calc(50% - 4px);
  }

  #playlistSubPanelOverview .table-wrap,
  .playlist-apply-modal .table-wrap {
    overflow-x: visible;
  }

  #playlistSubPanelOverview table,
  #playlistSubPanelOverview tbody,
  #playlistSubPanelOverview tr,
  #playlistSubPanelOverview td,
  .playlist-apply-modal table,
  .playlist-apply-modal tbody,
  .playlist-apply-modal tr,
  .playlist-apply-modal td {
    display: block;
    width: 100%;
  }

  #playlistSubPanelOverview thead,
  .playlist-apply-modal thead {
    display: none;
  }

  #playlistSubPanelOverview tbody,
  .playlist-apply-modal tbody {
    display: grid;
    gap: 10px;
  }

  #playlistSubPanelOverview tbody tr,
  .playlist-apply-modal tbody tr {
    border: 1px solid #d3e9f4;
    border-radius: 6px;
    padding: 10px 12px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(2, 48, 71, 0.08);
  }

  #playlistSubPanelOverview tbody td,
  .playlist-apply-modal tbody td {
    border: 0;
    padding: 5px 0;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    text-align: left;
  }

  #playlistSubPanelOverview tbody td::before,
  .playlist-apply-modal tbody td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    padding-top: 2px;
  }

  #playlistSubPanelOverview tbody td:last-child,
  .playlist-apply-modal tbody td:last-child {
    grid-template-columns: 1fr;
  }

  .playlist-apply-modal .playlist-check-col {
    width: auto;
  }

  .playlist-apply-modal .apply-template-select {
    width: 18px;
    height: 18px;
  }

  #playlistSubPanelOverview .playlist-detail-btn {
    width: 100%;
  }

  .media-pagination {
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 0;
  }

  .media-page-info {
    width: auto;
    min-width: 0;
    white-space: nowrap;
    font-size: 0.76rem;
    flex: 0 1 auto;
  }

  .media-pagination .ghost {
    min-height: 30px;
    padding: 0 9px;
    font-size: 0.78rem;
  }

  .media-modal {
    padding: 18px 14px 14px;
  }

  #mediaUploadModalBackdrop {
    align-items: flex-start;
    overflow-y: auto;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }

  .media-file-picker {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
  }

  .media-file-trigger {
    width: 100%;
  }

  #devicePlaylistModalBackdrop,
  #playlistTemplateModalBackdrop,
  #applyTemplateModalBackdrop {
    align-items: flex-start;
    overflow-y: auto;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }

  .playlist-editor-modal,
  .playlist-template-modal,
  .playlist-apply-modal {
    width: 100%;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 16px 14px 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .playlist-editor-modal {
    min-height: 0;
  }

  .playlist-editor-modal .stack,
  .playlist-template-modal .stack,
  .playlist-apply-modal .stack {
    min-height: 0;
    gap: 10px;
  }

  .playlist-editor-modal .playlist-editor,
  .playlist-template-modal .playlist-editor {
    max-height: min(52vh, 420px);
    overflow-y: auto;
    padding-right: 2px;
  }

  .playlist-editor-modal .device-modal-actions,
  .playlist-template-modal .device-modal-actions,
  .playlist-apply-modal .device-modal-actions {
    flex-wrap: wrap;
  }

  .playlist-editor-modal .device-modal-actions > button,
  .playlist-template-modal .device-modal-actions > button,
  .playlist-apply-modal .device-modal-actions > button {
    flex: 1 1 calc(50% - 4px);
    min-width: 120px;
  }

  .device-snapshot-body {
    min-height: 200px;
  }

  .image-edit-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .media-preview-stage {
    min-height: 180px;
  }

  .media-preview-canvas,
  .media-preview-image,
  .media-preview-video {
    max-height: 240px;
  }

  .device-pagination {
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 12px;
  }

  .device-page-info {
    width: auto;
    min-width: 0;
    white-space: nowrap;
    font-size: 0.76rem;
    flex: 0 1 auto;
  }

  .device-pagination .ghost {
    min-height: 30px;
    padding: 0 9px;
    font-size: 0.78rem;
  }

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

  .playlist-row .pl-enabled {
    width: 16px;
    height: 16px;
    min-height: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}