/* =========================================================
   ENDCORE WEB 1.0 — USER ADMINISTRATION
   ========================================================= */

.admin-section-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  padding: 6px;
  width: fit-content;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(5,12,23,.74);
}

.admin-section-tabs button {
  border: 0;
  border-radius: 10px;
  padding: 10px 18px;
  color: rgba(235,244,255,.68);
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.admin-section-tabs button.active {
  color: #fff;
  background:
    linear-gradient(
      135deg,
      rgba(40,137,255,.28),
      rgba(36,210,255,.10)
    );
  box-shadow:
    inset 0 0 0 1px
      rgba(91,181,255,.24),
    0 0 28px
      rgba(29,132,255,.10);
}

/*
 * Settings tabs: on narrow screens, keep the swipe within
 * the tab strip instead of moving the whole Settings page.
 * Desktop layout remains unchanged.
 */
html.endcore-pwa-mobile .admin-section-tabs {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
}

html.endcore-pwa-mobile .admin-section-tabs::-webkit-scrollbar {
  display: none;
}

html.endcore-pwa-mobile .admin-section-tabs button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.admin-users-header,
.admin-user-profile-header {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 28px;
}

.admin-users-header {
  justify-content: space-between;
}

.admin-users-header h1,
.admin-user-profile-header h1 {
  margin: 3px 0 5px;
}

.admin-users-header p,
.admin-user-profile-header p {
  margin: 0;
  color: var(--muted);
}

.admin-user-primary,
.admin-user-secondary,
.admin-danger-soft,
.admin-danger-button,
.admin-user-back {
  border-radius: 11px;
  padding: 10px 15px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.admin-user-primary {
  color: #fff;
  border: 1px solid
    rgba(69,167,255,.48);
  background:
    linear-gradient(
      135deg,
      rgba(35,130,255,.64),
      rgba(31,192,255,.32)
    );
  box-shadow:
    0 10px 32px
    rgba(20,109,255,.17);
}

.admin-user-secondary,
.admin-user-back {
  color: rgba(238,246,255,.88);
  border: 1px solid
    rgba(255,255,255,.10);
  background:
    rgba(255,255,255,.045);
}

.admin-danger-soft {
  color: #ffb0b7;
  border: 1px solid
    rgba(255,79,99,.25);
  background:
    rgba(255,55,77,.08);
}

.admin-danger-button {
  color: #fff;
  border: 1px solid
    rgba(255,66,91,.45);
  background:
    rgba(211,39,64,.28);
}

.admin-danger-button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.admin-user-grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(330px,1fr)
    );
  gap: 14px;
}

.admin-user-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 17px;
  width: 100%;
  min-height: 116px;
  padding: 18px;
  text-align: left;
  color: inherit;
  border: 1px solid
    rgba(255,255,255,.075);
  border-radius: 17px;
  background:
    linear-gradient(
      145deg,
      rgba(16,31,51,.88),
      rgba(5,13,25,.86)
    );
  cursor: pointer;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.admin-user-card:hover {
  transform:
    translateY(-2px);
  border-color:
    rgba(65,171,255,.32);
  box-shadow:
    0 18px 55px
      rgba(0,0,0,.25),
    0 0 30px
      rgba(26,123,255,.08);
}

.admin-user-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid
    rgba(85,180,255,.32);
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(63,179,255,.38),
      rgba(16,49,88,.48) 45%,
      rgba(5,16,31,.95)
    );
  box-shadow:
    0 0 28px
      rgba(29,137,255,.12);
}

.admin-user-avatar-large {
  width: 106px;
  height: 106px;
}

.admin-user-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-user-avatar-initial {
  font-size: 27px;
  font-weight: 800;
  color: #fff;
}

.admin-user-avatar-large
.admin-user-avatar-initial {
  font-size: 38px;
}

.admin-user-card-body {
  min-width: 0;
  flex: 1;
}

.admin-user-card-title {
  display: flex;
  align-items: center;
  gap: 9px;
}

.admin-user-card-title strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 17px;
}

.admin-user-name {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.admin-user-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 13px;
  color: var(--muted);
  font-size: 12px;
}

.admin-user-role {
  color: rgba(167,214,255,.90);
  font-weight: 800;
}

.admin-user-arrow {
  font-size: 29px;
  color: rgba(146,206,255,.55);
}

.admin-user-state {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.admin-user-state.enabled {
  color: #8fffc6;
  background:
    rgba(58,219,134,.11);
}

.admin-user-state.disabled {
  color: #ffb4b4;
  background:
    rgba(255,76,76,.10);
}

.admin-user-state.locked {
  color: #ffd276;
  background:
    rgba(255,174,44,.12);
}

.admin-create-user {
  margin-bottom: 24px;
  padding: 20px;
  border: 1px solid
    rgba(61,160,255,.18);
  border-radius: 16px;
  background:
    rgba(7,20,37,.78);
}

.admin-create-user > div {
  display: grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.admin-create-user
.admin-create-actions {
  display: flex;
  grid-template-columns: none;
}

.admin-user-panel label,
.admin-create-user label {
  display: grid;
  gap: 7px;
  color: rgba(217,230,244,.78);
  font-size: 12px;
  font-weight: 700;
}

.admin-user-panel input,
.admin-user-panel select,
.admin-create-user input,
.admin-create-user select {
  width: 100%;
  border: 1px solid
    rgba(255,255,255,.095);
  border-radius: 10px;
  padding: 11px 12px;
  color: #fff;
  background:
    rgba(3,10,20,.72);
  font: inherit;
}

.admin-user-message {
  margin-bottom: 18px;
  padding: 11px 14px;
  border: 1px solid
    rgba(52,185,255,.18);
  border-radius: 11px;
  color: #bde6ff;
  background:
    rgba(41,139,255,.08);
}

.admin-user-profile-header {
  padding: 24px;
  border: 1px solid
    rgba(255,255,255,.075);
  border-radius: 20px;
  background:
    linear-gradient(
      135deg,
      rgba(17,42,70,.82),
      rgba(5,14,28,.83)
    );
}

.admin-user-profile-header > div:nth-child(2) {
  flex: 1;
}

.admin-user-profile-status {
  align-self: flex-start;
}

.admin-user-detail-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );
  gap: 16px;
}

.admin-user-panel {
  min-width: 0;
  padding: 20px;
  border: 1px solid
    rgba(255,255,255,.07);
  border-radius: 16px;
  background:
    rgba(5,14,27,.76);
}

.admin-user-panel h2 {
  margin:
    0 0 17px;
  font-size: 17px;
}

.admin-user-panel h3 {
  margin:
    22px 0 10px;
  color: rgba(220,235,249,.72);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.admin-user-panel form {
  display: grid;
  gap: 13px;
}

.admin-access-panel,
.admin-security-panel,
.admin-danger-zone {
  grid-column:
    1 / -1;
}

.admin-avatar-actions,
.admin-user-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.admin-avatar-actions {
  justify-content: flex-start;
  margin-top: 14px;
}

.admin-avatar-picker {
  display: inline-flex !important;
  width: auto !important;
}

.admin-user-panel-heading h2 {
  margin: 0;
}

.admin-switch-row {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  cursor: pointer;
}

.admin-switch-row input {
  width: 17px;
  height: 17px;
}

.admin-access-roots,
.admin-permission-grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(190px,1fr)
    );
  gap: 9px;
  margin: 15px 0;
}

.admin-access-root {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  padding: 11px;
  border: 1px solid
    rgba(255,255,255,.065);
  border-radius: 11px;
  background:
    rgba(255,255,255,.025);
}

.admin-access-root input {
  width: 17px;
}

.admin-access-root span {
  display: grid;
}

.admin-access-root small {
  color: var(--muted);
}

.admin-security-list,
.admin-event-list {
  display: grid;
  gap: 8px;
}

.admin-security-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 12px;
  border: 1px solid
    rgba(255,255,255,.06);
  border-radius: 11px;
  background:
    rgba(255,255,255,.022);
}

.admin-security-item > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-security-item small,
.admin-event-item small {
  color: var(--muted);
}

.admin-user-device-id {
  overflow-wrap: anywhere;
  font-size: 11px;
  opacity: .82;
}

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

.admin-security-summary span {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid
    rgba(255,255,255,.06);
  border-radius: 11px;
  color: var(--muted);
  background:
    rgba(255,255,255,.025);
}

.admin-security-summary strong {
  color: #fff;
}

.admin-event-item {
  display: grid;
  grid-template-columns:
    minmax(130px,.7fr)
    minmax(120px,.7fr)
    minmax(220px,1fr);
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid
    rgba(255,255,255,.05);
}

.admin-user-notice {
  padding: 13px;
  border: 1px solid
    rgba(60,165,255,.15);
  border-radius: 11px;
  color: #b8dcfb;
  background:
    rgba(45,137,255,.07);
}

.admin-danger-zone {
  border-color:
    rgba(255,75,94,.13);
}

.admin-danger-zone p {
  color: var(--muted);
}

.admin-user-action-status {
  position: sticky;
  bottom: 18px;
  z-index: 4;
  width: fit-content;
  max-width: 100%;
  margin: 18px 0 0 auto;
  padding: 10px 14px;
  border-radius: 10px;
  color: #bfe8ff;
  background:
    rgba(5,19,34,.94);
}

.admin-user-action-status:empty {
  display: none;
}

.admin-user-action-status.error {
  color: #ffb4ba;
}

.admin-user-inline-status {
  color: var(--muted);
}

.admin-user-empty,
.admin-user-empty-small {
  color: var(--muted);
}

.admin-user-back {
  margin-bottom: 18px;
}

@media (max-width: 900px) {
  .admin-user-detail-grid {
    grid-template-columns: 1fr;
  }

  .admin-access-panel,
  .admin-security-panel,
  .admin-danger-zone {
    grid-column: auto;
  }

  .admin-users-header,
  .admin-user-profile-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .admin-create-user > div,
  .admin-security-summary {
    grid-template-columns: 1fr;
  }

  .admin-event-item {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   ENDCORE ADMIN — GENERAL
   ========================================================= */

.admin-general-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.admin-general-header h1 {
  margin: 3px 0 5px;
}

.admin-general-header p {
  margin: 0;
  color: var(--muted);
  max-width: 720px;
}

.admin-general-runtime {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(75,184,255,.18);
  border-radius: 12px;
  background: rgba(22,104,177,.09);
  color: rgba(225,241,255,.70);
  font-size: .82rem;
}

.admin-general-runtime strong {
  color: #69d7ff;
  letter-spacing: .08em;
}

.admin-general-status {
  margin-bottom: 20px;
  padding: 12px 14px;
  border: 1px solid rgba(72,181,255,.22);
  border-radius: 11px;
  background: rgba(31,130,210,.10);
  color: #ccecff;
}

.admin-general-status.error {
  border-color: rgba(255,82,103,.28);
  background: rgba(202,45,66,.10);
  color: #ffb9c1;
}

.admin-general-form {
  display: grid;
  gap: 20px;
}

.admin-general-panel {
  padding: 24px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      rgba(12,24,42,.92),
      rgba(5,13,25,.82)
    );
  box-shadow:
    0 18px 48px
    rgba(0,0,0,.14);
}

.admin-general-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.admin-general-panel-heading h2 {
  margin: 4px 0 0;
}

.admin-general-panel-heading p {
  margin: 0;
  max-width: 430px;
  color: var(--muted);
  text-align: right;
  line-height: 1.5;
}

.admin-general-grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(230px,1fr)
    );
  gap: 18px;
}

.admin-general-grid label {
  display: grid;
  gap: 8px;
  align-content: start;
  color: rgba(237,246,255,.88);
  font-weight: 650;
}

.admin-general-grid input,
.admin-general-grid select {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 11px;
  padding: 0 13px;
  color: #eef8ff;
  background: rgba(3,10,20,.76);
  font: inherit;
  outline: none;
}

.admin-general-grid input:focus,
.admin-general-grid select:focus {
  border-color: rgba(72,171,255,.52);
  box-shadow:
    0 0 0 3px
    rgba(28,135,255,.10);
}

.admin-general-grid small {
  color: var(--muted);
  font-weight: 500;
  line-height: 1.45;
}

.admin-general-grid .admin-general-maintenance-toggle {
  align-content: start;
}

.admin-general-grid .admin-general-maintenance-toggle input[type="checkbox"] {
  width: 20px;
  min-height: 20px;
  margin: 0;
  accent-color: #2595ff;
}

.admin-general-checkbox-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
}

.admin-general-grid input:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.admin-general-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding: 5px 0 8px;
}

.admin-general-updated {
  margin-right: auto;
  color: var(--muted);
  font-size: .85rem;
}

#adminGeneralSave:disabled {
  opacity: .55;
  cursor: wait;
}

@media (max-width: 760px) {

  .admin-general-header,
  .admin-general-panel-heading,
  .admin-general-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-general-panel-heading p {
    text-align: left;
  }

  .admin-general-runtime {
    width: fit-content;
  }

  .admin-general-updated {
    margin-right: 0;
  }

}



/* =========================================================
   ENDCORE ADMIN — DEVICES
   ========================================================= */

.admin-devices-view {
  width: 100%;
}

.admin-devices-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 26px;
}

.admin-devices-header h1 {
  margin: 5px 0 8px;
}

.admin-devices-header p {
  margin: 0;
  max-width: 720px;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.admin-devices-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 1px solid rgba(104, 170, 255, 0.18);
  border-radius: 999px;
  background: rgba(13, 35, 64, 0.55);
  color: #b8d7ff;
  font-size: 0.88rem;
  font-weight: 700;
}

.admin-devices-live span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #56d89d;
  box-shadow: 0 0 12px rgba(86, 216, 157, 0.6);
}

.admin-devices-status {
  margin-bottom: 20px;
  padding: 12px 15px;
  border: 1px solid rgba(73, 151, 255, 0.22);
  border-radius: 12px;
  background: rgba(24, 78, 142, 0.18);
  color: #cce2ff;
  font-weight: 650;
}

.admin-devices-status.error {
  border-color: rgba(255, 104, 104, 0.3);
  background: rgba(143, 31, 31, 0.2);
  color: #ffd0d0;
}

.admin-device-stats {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.admin-device-stat {
  padding: 20px;
  border: 1px solid rgba(130, 177, 230, 0.12);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      rgba(20, 44, 75, 0.82),
      rgba(10, 25, 47, 0.9)
    );
}

.admin-device-stat-label {
  margin-bottom: 8px;
  color: #8eabc9;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-device-stat strong {
  display: block;
  color: #f4f8ff;
  font-size: 2rem;
  line-height: 1;
}

.admin-device-stat span {
  display: block;
  margin-top: 8px;
  color: #8199b5;
  font-size: 0.88rem;
}

.admin-devices-panel {
  overflow: hidden;
  border: 1px solid rgba(130, 177, 230, 0.12);
  border-radius: 18px;
  background: rgba(7, 20, 39, 0.7);
}

.admin-devices-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(130, 177, 230, 0.1);
}

.admin-devices-panel-heading h2 {
  margin: 0;
  font-size: 1.1rem;
}

.admin-devices-panel-heading p {
  margin: 6px 0 0;
  color: #7f98b5;
  font-size: 0.9rem;
}

.admin-devices-panel-heading > span {
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(54, 118, 200, 0.15);
  color: #9ecbff;
  font-size: 0.82rem;
  font-weight: 750;
}

.admin-device-list {
  display: grid;
  gap: 1px;
}

.admin-device-card {
  padding: 22px;
  background: rgba(10, 26, 48, 0.72);
  transition:
    background 150ms ease,
    border-color 150ms ease;
}

.admin-device-card:hover {
  background: rgba(14, 34, 61, 0.9);
}

.admin-device-card + .admin-device-card {
  border-top: 1px solid rgba(130, 177, 230, 0.08);
}

.admin-device-card-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-device-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 1px solid rgba(81, 155, 255, 0.18);
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      rgba(45, 116, 205, 0.28),
      rgba(19, 51, 93, 0.25)
    );
  color: #c8e3ff;
  font-size: 1.15rem;
  font-weight: 850;
}

.admin-device-identity {
  min-width: 0;
}

.admin-device-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-device-title-row h3 {
  margin: 0 4px 0 0;
  color: #f4f8ff;
  font-size: 1.06rem;
}

.admin-device-subtitle {
  margin-top: 6px;
  color: #839db9;
  font-size: 0.9rem;
}

.admin-device-presence,
.admin-device-enabled {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 800;
}

.admin-device-presence.online {
  background: rgba(49, 178, 116, 0.14);
  color: #71e3ad;
}

.admin-device-presence.offline {
  background: rgba(124, 143, 165, 0.12);
  color: #95a8bd;
}

.admin-device-enabled.enabled {
  background: rgba(52, 130, 225, 0.14);
  color: #8bc3ff;
}

.admin-device-enabled.disabled {
  background: rgba(179, 84, 84, 0.13);
  color: #e9a0a0;
}

.admin-device-meta-grid {
  display: grid;
  grid-template-columns:
    1fr 0.75fr 1.5fr;
  gap: 14px;
  margin-top: 20px;
}

.admin-device-meta-grid > div {
  min-width: 0;
  padding: 13px 15px;
  border-radius: 12px;
  background: rgba(5, 16, 31, 0.55);
}

.admin-device-meta-grid span,
.admin-device-meta-grid small {
  display: block;
}

.admin-device-meta-grid span {
  margin-bottom: 6px;
  color: #7189a3;
  font-size: 0.75rem;
  font-weight: 750;
  text-transform: uppercase;
}

.admin-device-meta-grid strong {
  display: block;
  overflow: hidden;
  color: #dcecff;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-device-meta-grid small {
  overflow: hidden;
  margin-top: 4px;
  color: #657d98;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-device-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
}

.admin-device-card-footer code {
  overflow: hidden;
  color: #667f9a;
  font-size: 0.75rem;
  text-overflow: ellipsis;
}

.admin-device-status-button {
  flex: 0 0 auto;
  min-width: 132px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  transition:
    transform 120ms ease,
    opacity 120ms ease,
    background 120ms ease;
}

.admin-device-status-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.admin-device-status-button.enable {
  border-color: rgba(59, 185, 124, 0.24);
  background: rgba(48, 158, 106, 0.14);
  color: #84e6b8;
}

.admin-device-status-button.danger {
  border-color: rgba(225, 91, 91, 0.22);
  background: rgba(159, 55, 55, 0.13);
  color: #f0a6a6;
}

.admin-device-status-button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.admin-devices-empty,
.admin-devices-loading {
  padding: 42px 24px;
  color: #819ab6;
  text-align: center;
}

.admin-devices-empty strong,
.admin-devices-empty span {
  display: block;
}

.admin-devices-empty strong {
  margin-bottom: 7px;
  color: #cfdef0;
}


@media (max-width: 760px) {
  .admin-devices-header {
    flex-direction: column;
  }

  .admin-device-stats {
    grid-template-columns: 1fr;
  }

  .admin-device-meta-grid {
    grid-template-columns: 1fr;
  }

  .admin-device-card-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-device-status-button {
    width: 100%;
  }
}



/* =========================================================
   ENDCORE ADMIN — DEVICE DETAILS
   ========================================================= */

.admin-device-card-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}

.admin-device-details-button {
  min-width: 120px;
  padding: 9px 14px;
  border: 1px solid rgba(91, 161, 244, 0.2);
  border-radius: 10px;
  background: rgba(51, 108, 177, 0.12);
  color: #a9d1ff;
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
}

.admin-device-details-button:hover:not(:disabled) {
  background: rgba(60, 128, 211, 0.2);
}

.admin-device-details-button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.admin-device-details {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(130, 177, 230, 0.1);
}

.admin-device-detail-sections {
  display: grid;
  gap: 16px;
}

.admin-device-detail-section {
  padding: 18px;
  border: 1px solid rgba(130, 177, 230, 0.1);
  border-radius: 14px;
  background: rgba(4, 15, 29, 0.48);
}

.admin-device-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 15px;
}

.admin-device-detail-heading span {
  display: block;
  margin-bottom: 4px;
  color: #6787aa;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.09em;
}

.admin-device-detail-heading h4 {
  margin: 0;
  color: #e2efff;
  font-size: 0.98rem;
}

.admin-device-detail-heading small {
  color: #7894b2;
  font-size: 0.78rem;
}

.admin-device-capability-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-device-codec-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.admin-device-detail-value {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 10px;
  background: rgba(15, 34, 58, 0.65);
}

.admin-device-detail-value span,
.admin-device-detail-value strong {
  display: block;
}

.admin-device-detail-value span {
  margin-bottom: 5px;
  color: #6f89a6;
  font-size: 0.7rem;
  font-weight: 750;
  text-transform: uppercase;
}

.admin-device-detail-value strong {
  overflow-wrap: anywhere;
  color: #cfe3fb;
  font-size: 0.84rem;
  font-weight: 700;
}

.admin-device-playback-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-device-detail-empty,
.admin-device-details-loading,
.admin-device-details-error {
  padding: 18px;
  border-radius: 10px;
  background: rgba(13, 30, 51, 0.5);
  color: #839db8;
  font-size: 0.88rem;
}

.admin-device-details-error {
  border: 1px solid rgba(226, 91, 91, 0.2);
  color: #efaaaa;
}

.admin-device-command-list {
  display: grid;
  gap: 8px;
}

.admin-device-command {
  padding: 12px 13px;
  border-radius: 10px;
  background: rgba(14, 32, 54, 0.58);
}

.admin-device-command-main,
.admin-device-command-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.admin-device-command-main strong {
  color: #dcecff;
  font-size: 0.88rem;
}

.admin-device-command-status {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(60, 126, 208, 0.14);
  color: #9bc8fb;
  font-size: 0.7rem;
  font-weight: 800;
}

.admin-device-command-meta {
  margin-top: 7px;
  color: #718aa6;
  font-size: 0.76rem;
}

.admin-device-command-error {
  margin-top: 8px;
  color: #e8a0a0;
  font-size: 0.78rem;
}


@media (max-width: 900px) {
  .admin-device-capability-grid,
  .admin-device-playback-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 760px) {
  .admin-device-card-actions {
    width: 100%;
    flex-direction: column;
  }

  .admin-device-details-button {
    width: 100%;
  }

  .admin-device-codec-grid,
  .admin-device-capability-grid,
  .admin-device-playback-grid {
    grid-template-columns: 1fr;
  }

  .admin-device-command-main,
  .admin-device-command-meta {
    align-items: flex-start;
    flex-direction: column;
  }
}



/* =========================================================
   ENDCORE ADMIN — TRANSCODING
   ========================================================= */

.admin-transcoding-view {
  width: 100%;
}

.admin-transcoding-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 26px;
}

.admin-transcoding-header h1 {
  margin: 5px 0 8px;
}

.admin-transcoding-header p {
  margin: 0;
  max-width: 720px;
  color: var(--text-muted);
  line-height: 1.6;
}

.admin-transcoding-runtime {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 1px solid rgba(104, 170, 255, 0.18);
  border-radius: 999px;
  background: rgba(13, 35, 64, 0.55);
  color: #b8d7ff;
  font-size: 0.88rem;
  font-weight: 700;
}

.admin-transcoding-runtime span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #56d89d;
  box-shadow:
    0 0 12px
    rgba(86, 216, 157, 0.6);
}

.admin-transcoding-status {
  margin-bottom: 20px;
  padding: 12px 15px;
  border: 1px solid rgba(73, 151, 255, 0.22);
  border-radius: 12px;
  background: rgba(24, 78, 142, 0.18);
  color: #cce2ff;
  font-weight: 650;
}

.admin-transcoding-status.error {
  border-color: rgba(255, 104, 104, 0.3);
  background: rgba(143, 31, 31, 0.2);
  color: #ffd0d0;
}

.admin-transcoding-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.admin-transcoding-panel {
  padding: 22px;
  border: 1px solid rgba(130, 177, 230, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(12, 31, 55, 0.86),
      rgba(6, 19, 37, 0.92)
    );
}

.admin-transcoding-panel-heading {
  margin-bottom: 20px;
}

.admin-transcoding-panel-heading > div > span {
  color: #6e99c7;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.09em;
}

.admin-transcoding-panel-heading h2 {
  margin: 5px 0 6px;
  color: #edf5ff;
  font-size: 1.08rem;
}

.admin-transcoding-panel-heading p {
  margin: 0;
  color: #7893af;
  font-size: 0.88rem;
  line-height: 1.5;
}

.admin-transcoding-field {
  margin-bottom: 18px;
}

.admin-transcoding-field label {
  display: block;
  margin-bottom: 7px;
  color: #c9ddf4;
  font-size: 0.86rem;
  font-weight: 750;
}

.admin-transcoding-field select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(117, 165, 220, 0.16);
  border-radius: 10px;
  background: rgba(5, 18, 34, 0.85);
  color: #ecf5ff;
  font: inherit;
}

.admin-transcoding-field select:focus {
  border-color: rgba(84, 161, 255, 0.55);
  outline: none;
}

.admin-transcoding-field select:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.admin-transcoding-field small {
  display: block;
  margin-top: 7px;
  color: #667f9c;
  font-size: 0.78rem;
}

.admin-transcoding-switch {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 22px 0;
  padding: 15px;
  border-radius: 12px;
  background: rgba(6, 20, 38, 0.7);
  cursor: pointer;
}

.admin-transcoding-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.admin-transcoding-switch-control {
  position: relative;
  width: 42px;
  height: 23px;
  flex: 0 0 42px;
  border-radius: 999px;
  background: #293d52;
  transition: background 140ms ease;
}

.admin-transcoding-switch-control::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #d8e5f4;
  transition: transform 140ms ease;
}

.admin-transcoding-switch
input:checked +
.admin-transcoding-switch-control {
  background: #2477d4;
}

.admin-transcoding-switch
input:checked +
.admin-transcoding-switch-control::after {
  transform: translateX(19px);
}

.admin-transcoding-switch-copy strong,
.admin-transcoding-switch-copy small {
  display: block;
}

.admin-transcoding-switch-copy strong {
  color: #dbeaff;
  font-size: 0.88rem;
}

.admin-transcoding-switch-copy small {
  margin-top: 4px;
  color: #718aa7;
  font-size: 0.77rem;
}

.admin-transcoding-actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(130, 177, 230, 0.1);
}

.admin-transcoding-actions span,
.admin-transcoding-actions strong {
  display: block;
}

.admin-transcoding-actions span {
  margin-bottom: 4px;
  color: #6d87a3;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.admin-transcoding-actions strong {
  color: #bcd4ee;
  font-size: 0.82rem;
}

.admin-transcode-effective-list {
  display: grid;
  gap: 12px;
}

.admin-transcode-effective {
  padding: 16px;
  border-radius: 13px;
  background: rgba(5, 18, 34, 0.7);
}

.admin-transcode-effective-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 13px;
}

.admin-transcode-effective-title span {
  color: #7fa3ca;
  font-size: 0.78rem;
  font-weight: 850;
}

.admin-transcode-effective-title strong {
  color: #e4f1ff;
}

.admin-transcode-effective-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-transcode-effective-grid > div {
  padding: 10px;
  border-radius: 9px;
  background: rgba(13, 34, 58, 0.7);
}

.admin-transcode-effective-grid span,
.admin-transcode-effective-grid strong {
  display: block;
}

.admin-transcode-effective-grid span {
  margin-bottom: 5px;
  color: #66809d;
  font-size: 0.69rem;
  text-transform: uppercase;
}

.admin-transcode-effective-grid strong {
  overflow-wrap: anywhere;
  color: #cbdff5;
  font-size: 0.8rem;
}

.admin-transcode-effective-error {
  margin-top: 10px;
  color: #eba3a3;
  font-size: 0.78rem;
}

.admin-transcode-probed {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid rgba(130, 177, 230, 0.09);
  color: #7890aa;
  font-size: 0.78rem;
}

.admin-transcode-probed strong {
  color: #aec7e2;
}

.admin-transcoding-hardware {
  margin-bottom: 18px;
}

.admin-transcode-backends {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.admin-transcode-backend {
  padding: 17px;
  border: 1px solid rgba(130, 177, 230, 0.09);
  border-radius: 13px;
  background: rgba(5, 18, 34, 0.65);
}

.admin-transcode-backend.available {
  border-color: rgba(66, 194, 132, 0.18);
}

.admin-transcode-backend.unavailable {
  border-color: rgba(225, 157, 72, 0.15);
}

.admin-transcode-backend-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.admin-transcode-backend-top h3 {
  margin: 0;
  color: #e0edfc;
  font-size: 0.95rem;
}

.admin-transcode-backend-top p {
  margin: 4px 0 0;
  color: #6e87a2;
  font-size: 0.76rem;
}

.admin-transcode-backend-state {
  height: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 850;
}

.admin-transcode-backend-state.available {
  background: rgba(54, 179, 116, 0.13);
  color: #7ce0ae;
}

.admin-transcode-backend-state.unavailable {
  background: rgba(203, 138, 64, 0.12);
  color: #e7ae6e;
}

.admin-transcode-backend-state.disabled {
  background: rgba(122, 137, 156, 0.12);
  color: #98a8ba;
}

.admin-transcode-backend-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-transcode-backend-grid > div {
  padding: 9px;
  border-radius: 8px;
  background: rgba(11, 29, 49, 0.75);
}

.admin-transcode-backend-grid span,
.admin-transcode-backend-grid strong {
  display: block;
}

.admin-transcode-backend-grid span {
  margin-bottom: 4px;
  color: #627d9b;
  font-size: 0.67rem;
  text-transform: uppercase;
}

.admin-transcode-backend-grid strong {
  overflow-wrap: anywhere;
  color: #bfd6ee;
  font-size: 0.77rem;
}

.admin-transcode-device-path {
  margin-top: 10px;
  color: #728ca8;
  font-family: monospace;
  font-size: 0.72rem;
}

.admin-transcode-empty,
.admin-transcoding-loading {
  padding: 42px 24px;
  color: #819ab6;
  text-align: center;
}


@media (max-width: 900px) {
  .admin-transcoding-layout,
  .admin-transcode-backends {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 760px) {
  .admin-transcoding-header {
    flex-direction: column;
  }

  .admin-transcoding-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-transcode-effective-grid,
  .admin-transcode-backend-grid {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   ENDCORE ADMIN — PLAYBACK
   ========================================================= */

.admin-playback-view {
  width: 100%;
}

.admin-playback-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.admin-playback-header h1 {
  margin: 5px 0 8px;
}

.admin-playback-header p {
  margin: 0;
  color: #7992ad;
  line-height: 1.55;
}

.admin-playback-status {
  margin-bottom: 18px;
  padding: 12px 15px;
  border: 1px solid rgba(73, 151, 255, 0.22);
  border-radius: 12px;
  background: rgba(24, 78, 142, 0.18);
  color: #cce2ff;
  font-weight: 650;
}

.admin-playback-status.error {
  border-color: rgba(255, 104, 104, 0.3);
  background: rgba(143, 31, 31, 0.2);
  color: #ffd0d0;
}

.admin-playback-stats {
  display: grid;
  grid-template-columns:
    repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.admin-playback-stat {
  padding: 16px;
  border: 1px solid rgba(130, 177, 230, 0.11);
  border-radius: 14px;
  background: rgba(7, 23, 43, 0.82);
}

.admin-playback-stat span,
.admin-playback-stat strong,
.admin-playback-stat small {
  display: block;
}

.admin-playback-stat span {
  color: #718ba7;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-playback-stat strong {
  margin: 6px 0 3px;
  color: #edf6ff;
  font-size: 1.5rem;
}

.admin-playback-stat small {
  color: #607a95;
  font-size: 0.72rem;
}

.admin-playback-panel {
  margin-bottom: 18px;
  padding: 21px;
  border: 1px solid rgba(130, 177, 230, 0.11);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(12, 31, 55, 0.86),
      rgba(6, 19, 37, 0.92)
    );
}

.admin-playback-panel-heading {
  margin-bottom: 18px;
}

.admin-playback-panel-heading span {
  color: #6f99c6;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.09em;
}

.admin-playback-panel-heading h2 {
  margin: 5px 0 6px;
  color: #eaf4ff;
  font-size: 1.05rem;
}

.admin-playback-panel-heading p {
  margin: 0;
  color: #718aa5;
  font-size: 0.82rem;
}

.admin-playback-session-list,
.admin-playback-execution-list {
  display: grid;
  gap: 12px;
}

.admin-playback-session,
.admin-playback-execution {
  padding: 16px;
  border: 1px solid rgba(130, 177, 230, 0.09);
  border-radius: 13px;
  background: rgba(5, 18, 34, 0.68);
}

.admin-playback-session {
  display: flex;
  align-items: stretch;
  gap: 18px;
}

.admin-playback-session-main {
  min-width: 0;
  flex: 1;
}

.admin-playback-session-heading,
.admin-playback-execution-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.admin-playback-session-heading > div > span,
.admin-playback-execution-heading > div > span {
  color: #6686a7;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-playback-session-heading h3,
.admin-playback-execution-heading h3 {
  margin: 3px 0 0;
  color: #e0edfb;
  font-size: 0.98rem;
}

.admin-playback-state {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(105, 123, 145, 0.12);
  color: #9fb1c5;
  font-size: 0.68rem;
  font-weight: 850;
}

.admin-playback-state.playing,
.admin-playback-state.running {
  background: rgba(55, 184, 117, 0.13);
  color: #76dcaa;
}

.admin-playback-state.paused,
.admin-playback-state.starting {
  background: rgba(227, 165, 79, 0.13);
  color: #e8b36f;
}

.admin-playback-state.failed {
  background: rgba(207, 70, 70, 0.13);
  color: #e99696;
}

.admin-playback-session-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 11px 0;
  color: #7891ad;
  font-size: 0.77rem;
}

.admin-playback-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
  color: #7892ad;
  font-size: 0.73rem;
}

.admin-playback-progress-label strong {
  color: #bcd3ea;
}

.admin-playback-progress-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(85, 109, 137, 0.22);
}

.admin-playback-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #397ec7;
}

.admin-playback-session-details,
.admin-playback-execution-grid,
.admin-playback-policy-grid {
  display: grid;
  gap: 8px;
}

.admin-playback-session-details {
  grid-template-columns:
    90px
    90px
    minmax(180px, 1fr)
    minmax(220px, 1.4fr);
  margin-top: 13px;
}

.admin-playback-execution-grid {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.admin-playback-session-details > div,
.admin-playback-execution-grid > div,
.admin-playback-policy-grid > div {
  padding: 9px;
  border-radius: 8px;
  background: rgba(11, 29, 49, 0.72);
}

.admin-playback-session-details span,
.admin-playback-session-details strong,
.admin-playback-execution-grid span,
.admin-playback-execution-grid strong,
.admin-playback-policy-grid span,
.admin-playback-policy-grid strong {
  display: block;
}

.admin-playback-session-details span,
.admin-playback-execution-grid span,
.admin-playback-policy-grid span {
  margin-bottom: 4px;
  color: #617b98;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.admin-playback-session-details strong,
.admin-playback-execution-grid strong,
.admin-playback-policy-grid strong {
  overflow-wrap: anywhere;
  color: #bfd5ec;
  font-size: 0.76rem;
}

.admin-playback-id {
  font-family: monospace;
}

.admin-playback-session-action {
  display: flex;
  align-items: center;
}

.admin-playback-danger {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(229, 90, 90, 0.25);
  border-radius: 9px;
  background: rgba(134, 36, 36, 0.18);
  color: #f0aaaa;
  cursor: pointer;
  font: inherit;
  font-size: 0.77rem;
  font-weight: 800;
}

.admin-playback-danger:hover {
  background: rgba(161, 42, 42, 0.25);
}

.admin-playback-execution-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid rgba(130, 177, 230, 0.08);
}

.admin-playback-execution-footer > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: #718aa5;
  font-size: 0.72rem;
}

.admin-playback-error {
  margin-top: 10px;
  color: #e79c9c;
  font-size: 0.75rem;
}

.admin-playback-policy-grid {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}

.admin-playback-empty,
.admin-playback-loading {
  padding: 38px 20px;
  color: #7e97b2;
  text-align: center;
}


@media (max-width: 1100px) {
  .admin-playback-stats {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .admin-playback-session-details {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 850px) {
  .admin-playback-execution-grid,
  .admin-playback-policy-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 700px) {
  .admin-playback-header,
  .admin-playback-session,
  .admin-playback-execution-footer {
    flex-direction: column;
  }

  .admin-playback-stats,
  .admin-playback-session-details,
  .admin-playback-execution-grid,
  .admin-playback-policy-grid {
    grid-template-columns: 1fr;
  }

  .admin-playback-session-action {
    align-items: stretch;
  }
}



/* =========================================================
   ENDCORE ADMIN — PLAYBACK COMPACT CARDS V2
   ========================================================= */

.admin-playback-panel {
  padding: 16px;
}


.admin-playback-panel-heading {
  margin-bottom: 14px;
}


.admin-playback-session-list {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(350px, 1fr)
    );
  gap: 10px;
}


.admin-playback-session-compact {
  display: grid;
  grid-template-columns:
    auto minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 108px;
  gap: 11px;
  padding: 10px;
  overflow: hidden;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease;
}


.admin-playback-session-compact:hover {
  border-color:
    rgba(83, 157, 236, 0.25);
  background:
    rgba(8, 27, 49, 0.88);
}


.admin-playback-session-compact.active {
  border-color:
    rgba(65, 163, 255, 0.23);
}


.admin-playback-session-compact.ended {
  opacity: 0.76;
}


.admin-playback-session-art,
.admin-playback-detail-art {
  position: relative;
  flex: none;
  overflow: hidden;
  border-radius: 9px;
  background:
    linear-gradient(
      145deg,
      rgba(21, 48, 79, 0.95),
      rgba(7, 19, 35, 0.98)
    );
}


.admin-playback-session-art.poster {
  width: 68px;
  height: 98px;
}


.admin-playback-session-art.preview {
  width: 112px;
  height: 72px;
}


.admin-playback-session-art img,
.admin-playback-detail-art img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


.admin-playback-art-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: rgba(155, 191, 230, 0.38);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}


.admin-playback-compact-body {
  min-width: 0;
}


.admin-playback-compact-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}


.admin-playback-compact-title {
  min-width: 0;
}


.admin-playback-compact-title > span {
  display: block;
  margin-bottom: 2px;
  color: #6686a7;
  font-size: 0.6rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


.admin-playback-title-link,
.admin-playback-user-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}


.admin-playback-title-link {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  color: #e6f2ff;
  font-size: 0.88rem;
  font-weight: 800;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


.admin-playback-title-link:hover,
.admin-playback-user-link:hover {
  color: #72b7ff;
}


.admin-playback-session-compact
.admin-playback-state {
  flex: none;
  padding: 4px 7px;
  font-size: 0.58rem;
}


.admin-playback-compact-user {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 8px;
  min-width: 0;
  margin-top: 5px;
  color: #6f8aa8;
  font-size: 0.68rem;
}


.admin-playback-user-link {
  color: #9dc6ef;
  font-weight: 750;
}


.admin-playback-progress-compact {
  margin-top: 8px;
}


.admin-playback-progress-compact
.admin-playback-progress-label {
  margin-bottom: 4px;
  font-size: 0.64rem;
}


.admin-playback-progress-compact
.admin-playback-progress-track {
  height: 4px;
}


.admin-playback-compact-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 7px;
  color: #607b98;
  font-size: 0.61rem;
}


/* -------------------------
   Session details overlay
   ------------------------- */

.admin-playback-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    rgba(1, 7, 15, 0.76);
  backdrop-filter: blur(8px);
}


.admin-playback-detail {
  width: min(820px, 100%);
  max-height: min(760px, 92vh);
  overflow: auto;
  border:
    1px solid
    rgba(102, 167, 236, 0.2);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      #0b2139,
      #061426
    );
  box-shadow:
    0 28px 90px
    rgba(0, 0, 0, 0.52);
}


.admin-playback-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom:
    1px solid
    rgba(130, 177, 230, 0.1);
}


.admin-playback-detail-header > div:first-child {
  min-width: 0;
}


.admin-playback-detail-header
> div:first-child
> span {
  color: #6698c9;
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.admin-playback-detail-header h2 {
  margin: 4px 0;
  color: #edf7ff;
  font-size: 1.25rem;
}


.admin-playback-detail-header p {
  margin: 0;
  color: #7794b2;
  font-size: 0.77rem;
}


.admin-playback-detail-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}


.admin-playback-detail-close {
  width: 34px;
  height: 34px;
  border:
    1px solid
    rgba(130, 177, 230, 0.16);
  border-radius: 9px;
  background:
    rgba(11, 31, 52, 0.84);
  color: #bdd5ec;
  cursor: pointer;
  font-size: 1.2rem;
}


.admin-playback-detail-content {
  display: grid;
  grid-template-columns:
    auto minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
}


.admin-playback-detail-art.poster {
  width: 140px;
  height: 206px;
}


.admin-playback-detail-art.preview {
  width: 230px;
  height: 132px;
}


.admin-playback-detail-main {
  min-width: 0;
}


.admin-playback-detail-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}


.admin-playback-detail-grid > div {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 9px;
  background:
    rgba(7, 25, 45, 0.72);
}


.admin-playback-detail-grid span,
.admin-playback-detail-grid strong {
  display: block;
}


.admin-playback-detail-grid span {
  margin-bottom: 4px;
  color: #647f9d;
  font-size: 0.61rem;
  font-weight: 750;
  text-transform: uppercase;
}


.admin-playback-detail-grid strong {
  overflow-wrap: anywhere;
  color: #c1d9ef;
  font-size: 0.72rem;
}


.admin-playback-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 20px 18px;
  border-top:
    1px solid
    rgba(130, 177, 230, 0.1);
}


.admin-playback-detail-control-note {
  color: #6885a4;
  font-size: 0.7rem;
  font-weight: 750;
}


@media (max-width: 1250px) {
  .admin-playback-session-list {
    grid-template-columns:
      repeat(
        auto-fill,
        minmax(320px, 1fr)
      );
  }

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


@media (max-width: 720px) {
  .admin-playback-session-list {
    grid-template-columns: 1fr;
  }

  .admin-playback-detail-backdrop {
    padding: 12px;
  }

  .admin-playback-detail-content {
    grid-template-columns: 1fr;
  }

  .admin-playback-detail-art.poster {
    width: 105px;
    height: 154px;
  }

  .admin-playback-detail-art.preview {
    width: 180px;
    height: 103px;
  }

  .admin-playback-detail-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   ENDCORE ADMIN — BACKUP & RECOVERY
   ========================================================= */

.admin-recovery-view {
  width: 100%;
}

.admin-recovery-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.admin-recovery-header h1 {
  margin: 5px 0 8px;
}

.admin-recovery-header p {
  margin: 0;
  color: #7891ad;
  line-height: 1.55;
}

.admin-recovery-status {
  margin-bottom: 18px;
  padding: 12px 15px;
  border: 1px solid rgba(73,151,255,.22);
  border-radius: 12px;
  background: rgba(24,78,142,.18);
  color: #cce2ff;
  font-weight: 650;
}

.admin-recovery-status.error {
  border-color: rgba(255,104,104,.3);
  background: rgba(143,31,31,.2);
  color: #ffd0d0;
}

.admin-recovery-stats {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.admin-recovery-stat {
  padding: 16px;
  border: 1px solid rgba(130,177,230,.11);
  border-radius: 14px;
  background: rgba(7,23,43,.82);
}

.admin-recovery-stat span,
.admin-recovery-stat strong,
.admin-recovery-stat small {
  display: block;
}

.admin-recovery-stat span {
  color: #718ba7;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-recovery-stat strong {
  margin: 6px 0 3px;
  color: #edf6ff;
  font-size: 1.3rem;
}

.admin-recovery-stat small {
  color: #607a95;
  font-size: .72rem;
}

.admin-recovery-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(0, .8fr);
  gap: 18px;
  margin-bottom: 18px;
}

.admin-recovery-panel {
  padding: 21px;
  border: 1px solid rgba(130,177,230,.11);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(12,31,55,.86),
      rgba(6,19,37,.92)
    );
}

.admin-recovery-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.admin-recovery-panel-heading > div > span {
  color: #6f99c6;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .09em;
}

.admin-recovery-panel-heading h2 {
  margin: 5px 0 6px;
  color: #eaf4ff;
  font-size: 1.05rem;
}

.admin-recovery-panel-heading p {
  margin: 0;
  color: #718aa5;
  font-size: .82rem;
  line-height: 1.5;
}

.admin-recovery-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 850;
}

.admin-recovery-badge.good {
  background: rgba(55,184,117,.13);
  color: #76dcaa;
}

.admin-recovery-badge.working {
  background: rgba(227,165,79,.13);
  color: #e8b36f;
}

.admin-recovery-badge.bad {
  background: rgba(207,70,70,.13);
  color: #e99696;
}

.admin-recovery-badge.neutral {
  background: rgba(105,123,145,.12);
  color: #9fb1c5;
}

.admin-recovery-meta {
  display: grid;
  grid-template-columns:
    1.4fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.admin-recovery-meta > div,
.admin-maintenance-grid > div {
  padding: 10px;
  border-radius: 9px;
  background: rgba(11,29,49,.72);
}

.admin-recovery-meta span,
.admin-recovery-meta strong,
.admin-maintenance-grid span,
.admin-maintenance-grid strong {
  display: block;
}

.admin-recovery-meta span,
.admin-maintenance-grid span {
  margin-bottom: 4px;
  color: #617b98;
  font-size: .66rem;
  text-transform: uppercase;
}

.admin-recovery-meta strong,
.admin-maintenance-grid strong {
  overflow-wrap: anywhere;
  color: #bfd5ec;
  font-size: .76rem;
}

.admin-recovery-steps {
  display: grid;
  gap: 8px;
}

.admin-recovery-step {
  padding: 12px;
  border-radius: 10px;
  background: rgba(5,18,34,.68);
}

.admin-recovery-step > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-recovery-step > div:first-child strong {
  color: #cfe1f4;
  font-size: .81rem;
}

.admin-recovery-step-values {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  color: #6f88a3;
  font-size: .7rem;
}

.admin-recovery-step-values strong {
  margin-left: 4px;
  color: #adc8e4;
}

.admin-recovery-error {
  margin-top: 8px;
  color: #e89e9e;
  font-size: .73rem;
}

.admin-recovery-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid rgba(130,177,230,.09);
  color: #718aa5;
  font-size: .76rem;
}

.admin-maintenance-card {
  margin-top: 12px;
  padding: 15px;
  border-radius: 12px;
  background: rgba(5,18,34,.68);
}

.admin-maintenance-title {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.admin-maintenance-title h3 {
  margin: 0;
  color: #dceafa;
  font-size: .92rem;
}

.admin-maintenance-title p {
  margin: 4px 0 0;
  color: #7189a3;
  font-size: .75rem;
}

.admin-maintenance-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0,1fr));
  gap: 7px;
  margin-bottom: 12px;
}

.admin-recovery-secondary {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(94,153,219,.22);
  border-radius: 9px;
  background: rgba(31,87,150,.15);
  color: #bad9fa;
  cursor: pointer;
  font: inherit;
  font-size: .77rem;
  font-weight: 800;
}

.admin-recovery-secondary:hover {
  background: rgba(31,87,150,.25);
}

.admin-backup-placeholder {
  margin-bottom: 18px;
}

.admin-backup-plan {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0,1fr));
  gap: 10px;
}

.admin-backup-plan > div {
  padding: 13px;
  border-radius: 10px;
  background: rgba(5,18,34,.68);
}

.admin-backup-plan strong,
.admin-backup-plan span {
  display: block;
}

.admin-backup-plan strong {
  color: #cfe1f4;
  font-size: .8rem;
}

.admin-backup-plan span {
  margin-top: 4px;
  color: #718aa5;
  font-size: .72rem;
}

.admin-recovery-empty,
.admin-recovery-loading {
  padding: 38px 20px;
  color: #7e97b2;
  text-align: center;
}


@media (max-width: 1000px) {
  .admin-recovery-layout {
    grid-template-columns: 1fr;
  }

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


@media (max-width: 760px) {
  .admin-recovery-header,
  .admin-recovery-panel-heading,
  .admin-recovery-actions,
  .admin-maintenance-title {
    flex-direction: column;
  }

  .admin-recovery-stats,
  .admin-recovery-meta,
  .admin-maintenance-grid,
  .admin-backup-plan {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   ENDCORE ADMIN — BACKUPS B2B
   ========================================================= */

.admin-backups-panel {
  margin-bottom: 18px;
}

.admin-backup-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.admin-backup-toolbar > div > span {
  color: #6f99c6;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .09em;
}

.admin-backup-toolbar h2 {
  margin: 5px 0 6px;
  color: #eaf4ff;
  font-size: 1.05rem;
}

.admin-backup-toolbar p {
  margin: 0;
  color: #718aa5;
  font-size: .82rem;
  line-height: 1.5;
}

.admin-backup-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.admin-backup-card {
  padding: 15px;
  border: 1px solid rgba(130,177,230,.1);
  border-radius: 13px;
  background: rgba(5,18,34,.68);
}

.admin-backup-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-backup-card-header > div > strong,
.admin-backup-card-header > div > span {
  display: block;
}

.admin-backup-card-header > div > strong {
  color: #dcecff;
  font-size: .86rem;
}

.admin-backup-card-header > div > span {
  margin-top: 4px;
  color: #6f88a3;
  font-size: .72rem;
}

.admin-backup-meta {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 13px;
}

.admin-backup-meta > div {
  padding: 10px;
  border-radius: 9px;
  background: rgba(11,29,49,.72);
}

.admin-backup-meta span,
.admin-backup-meta strong {
  display: block;
}

.admin-backup-meta span {
  margin-bottom: 4px;
  color: #607a96;
  font-size: .65rem;
  text-transform: uppercase;
}

.admin-backup-meta strong {
  color: #bcd3ea;
  font-size: .77rem;
  overflow-wrap: anywhere;
}

.admin-backup-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
}

.admin-backup-card-footer > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-backup-card-footer > div span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(77,117,157,.1);
  color: #7895b4;
  font-size: .67rem;
}

.admin-migration-planned {
  margin-bottom: 18px;
}

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

.admin-migration-platforms article {
  padding: 15px;
  border-radius: 11px;
  background: rgba(5,18,34,.68);
}

.admin-migration-platforms strong,
.admin-migration-platforms span {
  display: block;
}

.admin-migration-platforms strong {
  color: #d5e6f7;
  font-size: .88rem;
}

.admin-migration-platforms span {
  margin-top: 4px;
  color: #718aa5;
  font-size: .72rem;
}


@media (max-width: 850px) {
  .admin-backup-meta {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }
}


@media (max-width: 700px) {
  .admin-backup-toolbar,
  .admin-backup-card-header,
  .admin-backup-card-footer {
    flex-direction: column;
  }

  .admin-backup-meta,
  .admin-migration-platforms {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   ENDCORE ADMIN — RESTORE B3
   ========================================================= */

.admin-backup-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.admin-backup-restore-button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(225,110,110,.28);
  border-radius: 9px;
  background: rgba(143,42,42,.14);
  color: #f0aaaa;
  cursor: pointer;
  font: inherit;
  font-size: .77rem;
  font-weight: 800;
}

.admin-backup-restore-button:hover {
  background: rgba(143,42,42,.25);
}

@media (max-width: 700px) {
  .admin-backup-actions {
    width: 100%;
  }
}


/* JOINME_USER_VISIBILITY_UI */

.admin-joinme-visibility-panel {
  grid-column: 1 / -1;
}

.admin-joinme-visibility-copy {
  margin: 6px 0 0;
  max-width: 720px;
  opacity: 0.72;
  line-height: 1.5;
}

.admin-joinme-user-list {
  margin-top: 18px;
}

.admin-joinme-user-option {
  cursor: pointer;
}

.admin-joinme-user-option.is-disabled {
  opacity: 0.48;
  cursor: default;
}

.admin-joinme-user-option strong {
  display: block;
}

.admin-joinme-visibility-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.admin-joinme-visibility-actions
.admin-user-inline-status.error {
  color: #ff8d8d;
}



/* =========================================================
   ENDCORE_CONTENT_COMMUNITY_ACCESS_STYLE
   ========================================================= */

.admin-content-access-copy {
  max-width: 720px;

  margin:
    5px 0
    0;

  color:
    var(--muted);

  font-size: 13px;

  line-height: 1.5;
}


.admin-content-community-access-panel
.admin-permission-grid {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(230px, 1fr)
    );

  gap: 11px;
}


.admin-content-community-access-panel
.admin-access-root {
  min-height: 78px;

  align-items:
    flex-start;

  padding:
    14px;

  border-radius:
    14px;
}


.admin-content-community-access-panel
.admin-access-root span {
  gap: 4px;
}


.admin-content-community-access-panel
.admin-access-root strong {
  color:
    rgba(239, 247, 255, .92);

  font-size: 14px;
}


.admin-content-community-access-panel
.admin-access-root small {
  font-size: 12px;

  line-height: 1.45;
}


.admin-access-save-actions {
  display: flex;

  align-items: center;

  gap: 13px;

  margin-top: 17px;
}


@media (min-width: 1500px) {

  .admin-content-community-access-panel
  .admin-access-root strong {
    font-size: 15px;
  }

  .admin-content-community-access-panel
  .admin-access-root small,
  .admin-content-access-copy {
    font-size: 13px;
  }
}



/* =========================================================
   ENDCORE_COMMUNITY_VISIBILITY_STYLE
   ========================================================= */

.admin-community-visibility-panel {
  grid-column:
    1 / -1;
}


.admin-community-visibility-copy {
  max-width:
    760px;

  margin:
    5px 0 0;

  color:
    var(--muted);

  font-size:
    13px;

  line-height:
    1.5;
}


.admin-community-visibility-modes {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    11px;

  margin:
    17px 0;
}


.admin-community-visibility-mode {
  display:
    flex !important;

  align-items:
    flex-start;

  gap:
    11px !important;

  min-height:
    92px;

  padding:
    14px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:
    14px;

  background:
    rgba(255,255,255,.026);

  cursor:
    pointer;
}


.admin-community-visibility-mode:has(
  input:checked
) {
  border-color:
    rgba(91,178,255,.3);

  background:
    rgba(62,139,220,.09);
}


.admin-community-visibility-mode input {
  width:
    18px;

  height:
    18px;

  margin-top:
    2px;
}


.admin-community-visibility-mode span {
  display:
    grid;

  gap:
    5px;
}


.admin-community-visibility-mode strong {
  color:
    rgba(242,248,255,.94);

  font-size:
    14px;
}


.admin-community-visibility-mode small {
  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.45;
}


.admin-community-user-section {
  transition:
    opacity .16s ease;
}


.admin-community-user-section.is-inactive {
  opacity:
    .42;
}


.admin-community-user-heading {
  display:
    flex;

  align-items:
    baseline;

  justify-content:
    space-between;

  gap:
    16px;

  margin:
    18px 0 4px;
}


.admin-community-user-heading small {
  color:
    var(--muted);
}


.admin-community-user-list {
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(220px, 1fr)
    );
}


.admin-community-user-option.is-disabled {
  opacity:
    .45;
}


.admin-community-visibility-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  margin-top:
    17px;
}


@media (max-width: 900px) {

  .admin-community-visibility-panel {
    grid-column:
      auto;
  }


  .admin-community-visibility-modes {
    grid-template-columns:
      1fr;
  }


  .admin-community-user-heading {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      4px;
  }
}


/* =========================================================
   ENDCORE_OVERVIEW_REALTIME_REMOTE_V1
   ========================================================= */

.admin-settings-overview
.admin-playback-session-action {
  display: none;
}

.admin-playback-overview-tech {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.admin-playback-overview-tech > div {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(11, 29, 49, 0.72);
}

.admin-playback-overview-tech span,
.admin-playback-overview-tech strong {
  display: block;
}

.admin-playback-overview-tech span {
  margin-bottom: 4px;
  color: #617b98;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.admin-playback-overview-tech strong {
  overflow: hidden;
  color: #bfd5ec;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-playback-remote {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
  padding-top: 12px;
  border-top:
    1px solid
    rgba(130, 177, 230, 0.09);
}

.admin-playback-remote button {
  min-width: 72px;
  min-height: 36px;
  padding: 0 13px;
  border:
    1px solid
    rgba(91, 154, 219, 0.24);
  border-radius: 8px;
  background:
    rgba(37, 91, 148, 0.18);
  color: #d7eaff;
  cursor: pointer;
  font: inherit;
  font-size: 0.77rem;
  font-weight: 800;
}

.admin-playback-remote button:hover {
  background:
    rgba(47, 111, 180, 0.28);
}

.admin-playback-remote button.danger {
  border-color:
    rgba(229, 90, 90, 0.25);
  background:
    rgba(134, 36, 36, 0.18);
  color: #f0aaaa;
}

.admin-playback-remote button:disabled {
  opacity: 0.45;
  cursor: wait;
}

@media (max-width: 1050px) {
  .admin-playback-overview-tech {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .admin-playback-overview-tech {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   ENDCORE OVERVIEW LIVE — LAYOUT FIX V2
   Keep normal Playback administration untouched.
   ========================================================= */

.admin-settings-overview
.admin-playback-session-list {
  width: 100%;
  min-width: 0;

  grid-template-columns:
    minmax(0, 1fr);

  justify-items: stretch;
}


.admin-settings-overview
.admin-playback-session {
  width: 100%;
  max-width: none;
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: stretch;

  gap: 14px;
}


.admin-settings-overview
.admin-playback-session-main {
  width: 100%;
  min-width: 0;
  flex: none;
}


.admin-settings-overview
.admin-playback-session-heading {
  width: 100%;
}


.admin-settings-overview
.admin-playback-session-details {
  width: 100%;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
}


.admin-settings-overview
.admin-playback-overview-tech {
  width: 100%;
  min-width: 0;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );
}


.admin-settings-overview
.admin-playback-remote {
  width: 100%;
  min-width: 0;

  justify-content:
    flex-start;
}


.admin-settings-overview
.admin-playback-overview-tech > div {
  min-width: 0;
}


.admin-settings-overview
.admin-playback-overview-tech strong {
  min-width: 0;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


@media (max-width: 1100px) {

  .admin-settings-overview
  .admin-playback-session-details,

  .admin-settings-overview
  .admin-playback-overview-tech {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}


@media (max-width: 700px) {

  .admin-settings-overview
  .admin-playback-session-details,

  .admin-settings-overview
  .admin-playback-overview-tech {
    grid-template-columns:
      minmax(0, 1fr);
  }
}


/* =========================================================
   ENDCORE OVERVIEW — COMPACT SESSION CARDS V3
   ========================================================= */

.admin-settings-overview
.admin-playback-panel {
  padding: 14px;
}


.admin-settings-overview
.admin-playback-session-list {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(520px, 1fr)
    );

  gap: 12px;

  align-items: start;
}


.admin-settings-overview
.admin-playback-session {
  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 8px;

  padding: 12px;

  border-radius: 11px;
}


.admin-settings-overview
.admin-playback-session-main {
  width: 100%;
  min-width: 0;

  flex: none;
}


.admin-settings-overview
.admin-playback-session img {
  width: 52px !important;
  height: 78px !important;

  max-width: 52px !important;
  max-height: 78px !important;

  object-fit: cover;

  border-radius: 7px;
}


.admin-settings-overview
.admin-playback-session-heading {
  gap: 9px;
}


.admin-settings-overview
.admin-playback-session-heading h3 {
  margin-top: 2px;

  font-size: 0.98rem;
  line-height: 1.22;
}


.admin-settings-overview
.admin-playback-session-heading > div > span {
  font-size: 0.61rem;
}


.admin-settings-overview
.admin-playback-state {
  flex: none;

  padding: 4px 7px;

  font-size: 0.61rem;
}


.admin-settings-overview
.admin-playback-session-meta {
  gap: 5px 10px;

  margin: 7px 0;

  font-size: 0.72rem;
}


.admin-settings-overview
.admin-playback-progress-label {
  margin-bottom: 5px;

  font-size: 0.72rem;
}


.admin-settings-overview
.admin-playback-progress-track {
  height: 5px;
}


/*
 * Overview does not need to show long Session ID
 * and Last Activity in every card.
 * They remain available in playback details.
 */
.admin-settings-overview
.admin-playback-session-details {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 6px;

  margin-top: 8px;
}


.admin-settings-overview
.admin-playback-session-details
> div:nth-child(3),

.admin-settings-overview
.admin-playback-session-details
> div:nth-child(4) {
  display: none;
}


.admin-settings-overview
.admin-playback-session-details > div {
  padding: 6px 8px;
}


.admin-settings-overview
.admin-playback-session-details span {
  font-size: 0.58rem;
}


.admin-settings-overview
.admin-playback-session-details strong {
  font-size: 0.71rem;
}


/*
 * Runtime telemetry:
 *
 * 3 columns gives enough room for readable
 * codec/mode strings without making the card huge.
 */
.admin-settings-overview
.admin-playback-overview-tech {
  width: 100%;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 6px;

  margin-top: 7px;
}


.admin-settings-overview
.admin-playback-overview-tech > div {
  padding: 7px 8px;
}


.admin-settings-overview
.admin-playback-overview-tech span {
  font-size: 0.57rem;
}


.admin-settings-overview
.admin-playback-overview-tech strong {
  margin-top: 2px;

  font-size: 0.72rem;
  line-height: 1.2;

  white-space: normal;
  overflow: visible;

  text-overflow: initial;
}


/*
 * Remote controls stay small enough for
 * several simultaneous users.
 */
.admin-settings-overview
.admin-playback-remote {
  gap: 6px;

  margin-top: 7px;
  padding-top: 8px;
}


.admin-settings-overview
.admin-playback-remote button {
  min-width: 58px;
  min-height: 31px;

  padding: 0 10px;

  border-radius: 7px;

  font-size: 0.69rem;
}


@media (max-width: 1200px) {

  .admin-settings-overview
  .admin-playback-session-list {
    grid-template-columns:
      repeat(
        auto-fit,
        minmax(430px, 1fr)
      );
  }

}


@media (max-width: 650px) {

  .admin-settings-overview
  .admin-playback-session-list {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .admin-settings-overview
  .admin-playback-overview-tech {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


/* =========================================================
   ENDCORE OVERVIEW — TRUE COMPACT GRID V4
   ========================================================= */

.admin-settings-overview
.admin-playback-session-list {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 12px;

  align-items: start;
}


.admin-settings-overview
.admin-playback-session {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;

  padding: 11px;

  gap: 7px;
}


.admin-settings-overview
.admin-playback-session img {
  width: 44px !important;
  height: 66px !important;

  max-width: 44px !important;
  max-height: 66px !important;
}


.admin-settings-overview
.admin-playback-session-heading h3 {
  font-size: 0.94rem;
}


.admin-settings-overview
.admin-playback-session-meta {
  margin: 5px 0;

  font-size: 0.69rem;
}


.admin-settings-overview
.admin-playback-session-details {
  margin-top: 6px;
}


.admin-settings-overview
.admin-playback-overview-tech {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  margin-top: 5px;
}


.admin-settings-overview
.admin-playback-overview-tech > div {
  padding: 6px 7px;
}


.admin-settings-overview
.admin-playback-overview-tech strong {
  font-size: 0.70rem;
}


.admin-settings-overview
.admin-playback-remote {
  margin-top: 5px;
  padding-top: 7px;
}


.admin-settings-overview
.admin-playback-remote button {
  min-width: 54px;
  min-height: 29px;

  padding: 0 8px;

  font-size: 0.67rem;
}


@media (max-width: 1500px) {

  .admin-settings-overview
  .admin-playback-session-list {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


@media (max-width: 900px) {

  .admin-settings-overview
  .admin-playback-session-list {
    grid-template-columns:
      minmax(0, 1fr);
  }

}


/* =========================================================
   ENDCORE OVERVIEW — READABLE COMMAND CARDS V5
   ========================================================= */

.admin-settings-overview
.admin-playback-session-list {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 14px;
}


.admin-settings-overview
.admin-playback-session {
  padding: 15px;
  gap: 10px;
}


.admin-settings-overview
.admin-playback-session img {
  width: 80px !important;
  height: 120px !important;

  max-width: 80px !important;
  max-height: 120px !important;

  border-radius: 9px;
}


.admin-settings-overview
.admin-playback-session-heading h3 {
  font-size: 1.08rem;
  line-height: 1.25;
}


.admin-settings-overview
.admin-playback-session-heading
> div > span {
  font-size: 0.67rem;
}


.admin-settings-overview
.admin-playback-session-meta {
  margin: 7px 0;

  gap: 7px 12px;

  font-size: 0.79rem;
}


.admin-settings-overview
.admin-playback-progress-label {
  margin-bottom: 6px;

  font-size: 0.82rem;
}


.admin-settings-overview
.admin-playback-progress-label strong {
  font-size: 0.84rem;
}


.admin-settings-overview
.admin-playback-progress-track {
  height: 6px;
}


.admin-settings-overview
.admin-playback-session-details span,

.admin-settings-overview
.admin-playback-overview-tech span {
  font-size: 0.64rem;
}


.admin-settings-overview
.admin-playback-session-details strong,

.admin-settings-overview
.admin-playback-overview-tech strong {
  font-size: 0.80rem;
}


.admin-settings-overview
.admin-playback-overview-tech {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 8px;
}


.admin-settings-overview
.admin-playback-overview-tech > div {
  padding: 8px 10px;
}


.admin-settings-overview
.admin-playback-remote {
  gap: 8px;

  margin-top: 8px;
  padding-top: 10px;
}


.admin-settings-overview
.admin-playback-remote button {
  min-width: 66px;
  min-height: 34px;

  padding: 0 12px;

  font-size: 0.76rem;
}


@media (max-width: 1100px) {

  .admin-settings-overview
  .admin-playback-session-list {
    grid-template-columns:
      minmax(0, 1fr);
  }

}


/* =========================================================
   ENDCORE OVERVIEW — POSTER IDENTITY CARDS V6
   ========================================================= */

.admin-settings-overview
.admin-playback-session-list {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 16px;
}


.admin-settings-overview
.admin-overview-session-card {
  min-width: 0;

  padding: 16px;

  cursor: pointer;

  transition:
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease;
}


.admin-settings-overview
.admin-overview-session-card:hover {
  border-color:
    rgba(89, 160, 231, 0.38);

  background:
    rgba(8, 27, 47, 0.88);
}


.admin-settings-overview
.admin-overview-session-card:focus-visible {
  outline:
    2px solid
    rgba(101, 177, 246, 0.76);

  outline-offset: 2px;
}


/* Poster is the visual anchor of collapsed card. */

.admin-settings-overview
.admin-overview-session-card
img:not(
  .admin-overview-user-avatar img
) {
  width: 96px !important;
  height: 144px !important;

  max-width: 96px !important;
  max-height: 144px !important;

  object-fit: cover;

  border-radius: 10px;
}


/* User identity */

.admin-settings-overview
.admin-playback-session-meta {
  display: flex;

  align-items: center;

  gap: 8px 11px;

  min-height: 40px;

  font-size: 0.80rem;
}


.admin-overview-user-avatar {
  position: relative;

  display: inline-flex;

  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  border:
    1px solid
    rgba(120, 178, 233, 0.25);

  border-radius: 50%;

  background:
    rgba(28, 69, 108, 0.50);
}


.admin-overview-user-avatar img {
  width: 36px !important;
  height: 36px !important;

  min-width: 36px !important;
  min-height: 36px !important;

  max-width: 36px !important;
  max-height: 36px !important;

  object-fit: cover;

  border-radius: 50%;
}


.admin-overview-avatar-initial {
  color: #d9eafa;

  font-size: 0.87rem;
  font-weight: 900;
}


/* More readable title/state/time. */

.admin-settings-overview
.admin-overview-session-card
.admin-playback-session-heading h3 {
  font-size: 1.10rem;

  line-height: 1.25;
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-state {
  font-size: 0.67rem;

  padding: 5px 8px;
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-progress-label {
  margin-top: 9px;

  font-size: 0.86rem;
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-progress-label strong {
  font-size: 0.87rem;
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-progress-track {
  height: 7px;
}


/*
 * COLLAPSED
 *
 * Poster + title + user/avatar + device +
 * actual position/progress only.
 */

.admin-settings-overview
.admin-overview-session-card:not(.expanded)
.admin-playback-session-details,

.admin-settings-overview
.admin-overview-session-card:not(.expanded)
.admin-playback-overview-tech,

.admin-settings-overview
.admin-overview-session-card:not(.expanded)
.admin-playback-remote {
  display: none;
}


/*
 * EXPANDED
 *
 * Reveal all existing telemetry and controls.
 */

.admin-settings-overview
.admin-overview-session-card.expanded {
  grid-column: span 2;

  background:
    rgba(8, 27, 47, 0.94);

  border-color:
    rgba(90, 162, 232, 0.35);
}


.admin-settings-overview
.admin-overview-session-card.expanded
.admin-playback-session-details {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;

  margin-top: 12px;
}


/*
 * Previous compact rule hid Last activity and
 * Session. Restore them only when expanded.
 */

.admin-settings-overview
.admin-overview-session-card.expanded
.admin-playback-session-details
> div:nth-child(3),

.admin-settings-overview
.admin-overview-session-card.expanded
.admin-playback-session-details
> div:nth-child(4) {
  display: block;
}


.admin-settings-overview
.admin-overview-session-card.expanded
.admin-playback-overview-tech {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 8px;

  margin-top: 12px;
}


.admin-settings-overview
.admin-overview-session-card.expanded
.admin-playback-remote {
  display: flex;

  gap: 9px;

  margin-top: 12px;
  padding-top: 12px;
}


.admin-settings-overview
.admin-overview-session-card.expanded
.admin-playback-remote button {
  min-width: 72px;
  min-height: 36px;

  font-size: 0.78rem;
}


@media (max-width: 1700px) {

  .admin-settings-overview
  .admin-playback-session-list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 1050px) {

  .admin-settings-overview
  .admin-playback-session-list {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .admin-settings-overview
  .admin-overview-session-card.expanded {
    grid-column: span 1;
  }

}


/* =========================================================
   ENDCORE OVERVIEW — REAL TWO-STATE CARDS V7
   ========================================================= */


/*
 * Cards have a real maximum width.
 *
 * A single user no longer stretches across the
 * entire Central Commander.
 */
.admin-settings-overview
.admin-playback-session-list {
  display: grid !important;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(360px, 430px)
    ) !important;

  justify-content: start;

  align-items: start;

  gap: 16px;
}


/* ---------------------------------------------------------
   BASE CARD
   --------------------------------------------------------- */

.admin-settings-overview
.admin-overview-session-card {
  width: 100% !important;
  max-width: 430px !important;
  min-width: 0;

  padding: 15px !important;

  cursor: pointer;
}


/*
 * Poster becomes the visual anchor.
 */
.admin-settings-overview
.admin-overview-session-card
img:not(
  .admin-overview-user-avatar img
) {
  width: 116px !important;
  height: 174px !important;

  min-width: 116px !important;

  max-width: 116px !important;
  max-height: 174px !important;

  object-fit: cover;

  border-radius: 10px;
}


/* ---------------------------------------------------------
   USER IDENTITY
   --------------------------------------------------------- */

.admin-settings-overview
.admin-overview-session-card
.admin-playback-session-meta {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 6px 9px;

  min-height: 46px;

  margin-top: 8px;

  font-size: 0.80rem;
}


.admin-settings-overview
.admin-overview-user-avatar {
  display: inline-flex !important;

  width: 42px;
  height: 42px;

  min-width: 42px;

  flex: 0 0 42px;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  border:
    1px solid
    rgba(115, 179, 238, 0.35);

  border-radius: 50%;

  background:
    rgba(28, 69, 108, 0.62);
}


.admin-settings-overview
.admin-overview-user-avatar img {
  width: 42px !important;
  height: 42px !important;

  min-width: 42px !important;
  min-height: 42px !important;

  max-width: 42px !important;
  max-height: 42px !important;

  object-fit: cover;

  border-radius: 50%;
}


.admin-settings-overview
.admin-overview-avatar-initial {
  font-size: 0.95rem;

  font-weight: 900;

  color: #e2f1ff;
}


/* ---------------------------------------------------------
   MAIN INFORMATION
   --------------------------------------------------------- */

.admin-settings-overview
.admin-overview-session-card
.admin-playback-session-heading h3 {
  font-size: 1.12rem;

  line-height: 1.25;
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-progress-label {
  margin-top: 10px;

  font-size: 0.86rem;

  color: #a8c6e4;
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-progress-label strong {
  font-size: 0.88rem;

  color: #d6eaff;
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-progress-track {
  height: 7px;
}


/* =========================================================
   STATE 1 — COLLAPSED
   Poster / media / user / avatar / live position
   ========================================================= */

.admin-settings-overview
.admin-overview-session-card:not(.expanded)
.admin-playback-session-details,

.admin-settings-overview
.admin-overview-session-card:not(.expanded)
.admin-playback-overview-tech,

.admin-settings-overview
.admin-overview-session-card:not(.expanded)
.admin-playback-remote,

.admin-settings-overview
.admin-overview-session-card:not(.expanded)
.admin-playback-session-action {
  display: none !important;
}


.admin-settings-overview
.admin-overview-session-card:not(.expanded)::after {
  content:
    "Details and remote control  ›";

  display: block;

  margin-top: 12px;

  padding-top: 10px;

  border-top:
    1px solid
    rgba(128, 178, 226, 0.10);

  color: #6d94ba;

  font-size: 0.72rem;
  font-weight: 800;

  text-align: right;
}


/* =========================================================
   STATE 2 — EXPANDED
   Full technical information + controls
   ========================================================= */

.admin-settings-overview
.admin-overview-session-card.expanded {
  grid-column:
    span 2;

  width: 100% !important;

  max-width: 876px !important;

  padding: 18px !important;

  background:
    rgba(8, 27, 47, 0.96);

  border-color:
    rgba(88, 164, 234, 0.40);
}


.admin-settings-overview
.admin-overview-session-card.expanded::after {
  content:
    "Click card to collapse  ↑";

  display: block;

  margin-top: 12px;

  color: #698caf;

  font-size: 0.70rem;

  text-align: right;
}


.admin-settings-overview
.admin-overview-session-card.expanded
.admin-playback-session-details {
  display: grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    ) !important;

  gap: 8px;

  margin-top: 13px;
}


.admin-settings-overview
.admin-overview-session-card.expanded
.admin-playback-session-details
> div {
  display: block !important;
}


.admin-settings-overview
.admin-overview-session-card.expanded
.admin-playback-overview-tech {
  display: grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    ) !important;

  gap: 8px;

  margin-top: 13px;
}


.admin-settings-overview
.admin-overview-session-card.expanded
.admin-playback-overview-tech > div {
  padding: 10px 11px;
}


.admin-settings-overview
.admin-overview-session-card.expanded
.admin-playback-overview-tech span {
  font-size: 0.64rem;
}


.admin-settings-overview
.admin-overview-session-card.expanded
.admin-playback-overview-tech strong {
  font-size: 0.82rem;
}


.admin-settings-overview
.admin-overview-session-card.expanded
.admin-playback-remote {
  display: flex !important;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 14px;

  padding-top: 13px;
}


.admin-settings-overview
.admin-overview-session-card.expanded
.admin-playback-remote button {
  min-width: 76px;
  min-height: 38px;

  padding: 0 13px;

  font-size: 0.79rem;
}


@media (max-width: 920px) {

  .admin-settings-overview
  .admin-playback-session-list {
    grid-template-columns:
      minmax(0, 430px) !important;
  }


  .admin-settings-overview
  .admin-overview-session-card.expanded {
    grid-column:
      span 1;

    max-width:
      430px !important;
  }

}


/*
 * ENDCORE_PLAYBACK_HISTORY_CARDS_V1
 *
 * Overview = live operational cards.
 * Playback = compact retained media history.
 */

.admin-playback-history-grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(190px, 1fr)
    );
  gap: 20px;
  align-items: start;
}


.admin-playback-history-card {
  display: flex !important;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}


.admin-playback-history-card:hover {
  transform: translateY(-3px);
}


.admin-playback-history-card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}


.admin-playback-history-card
.admin-playback-session-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}


.admin-playback-history-card
.admin-playback-session-art {
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
}


.admin-playback-history-card
.admin-playback-session-art.poster {
  aspect-ratio: 2 / 3;
}


.admin-playback-history-card
.admin-playback-session-art.preview {
  aspect-ratio: 16 / 9;
}


.admin-playback-history-card
.admin-playback-session-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.admin-playback-history-card
.admin-playback-session-heading {
  padding-top: 14px;
}


.admin-playback-history-card
.admin-playback-session-heading h3 {
  font-size: 1rem;
  line-height: 1.25;
}


.admin-playback-history-card
.admin-playback-session-details,

.admin-playback-history-card
.admin-playback-session-action,

.admin-playback-history-card
.admin-playback-progress-label,

.admin-playback-history-card
.admin-playback-progress-track {
  display: none !important;
}


.admin-playback-history-card
.admin-playback-session-meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
}


.admin-playback-history-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}


.admin-playback-history-summary > span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  font-size: .76rem;
  line-height: 1;
}


.admin-playback-history-mode {
  font-weight: 700;
}


.admin-playback-history-count {
  align-self: center;
  white-space: nowrap;
}


.admin-playback-technical-detail {
  margin: 0 24px 24px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}


.admin-playback-technical-heading {
  margin-bottom: 18px;
}


.admin-playback-technical-heading > span {
  display: block;
  margin-bottom: 5px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  opacity: .62;
}


.admin-playback-technical-heading h3 {
  margin: 0;
  font-size: 1.05rem;
}


.admin-playback-technical-heading p {
  margin: 8px 0 0;
  opacity: .7;
}


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


.admin-playback-technical-grid > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
}


.admin-playback-technical-grid span,
.admin-playback-technical-grid strong {
  display: block;
}


.admin-playback-technical-grid span {
  margin-bottom: 5px;
  font-size: .72rem;
  opacity: .62;
}


.admin-playback-technical-grid strong {
  overflow-wrap: anywhere;
  font-size: .88rem;
}


@media (max-width: 720px) {

  .admin-playback-history-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
    gap: 12px;
  }


  .admin-playback-technical-grid {
    grid-template-columns: 1fr;
  }


  .admin-playback-technical-detail {
    margin:
      0
      14px
      14px;
    padding: 16px;
  }
}


/*
 * ENDCORE_OVERVIEW_PREMIUM_LIVE_CARD_V1
 *
 * The live playback surface is intentionally much
 * richer than retained Playback history.
 */

.admin-settings-overview
.admin-playback-session-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}


.admin-settings-overview
.admin-overview-session-card {
  position: relative;
  overflow: hidden;
  padding: 0 !important;

  border-radius: 24px;

  border:
    1px solid
    rgba(255,255,255,.11);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.018)
    );

  box-shadow:
    0 22px 60px
    rgba(0,0,0,.20);
}


.admin-settings-overview
.admin-overview-session-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 14% 20%,
      rgba(255,255,255,.07),
      transparent 34%
    );
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-session-main {
  position: relative;
  z-index: 1;

  display: grid !important;

  grid-template-columns:
    230px
    minmax(0, 1fr);

  gap: 26px;

  align-items: stretch;

  width: 100%;
  min-width: 0;

  padding: 24px;
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-session-art {
  width: 230px !important;
  max-width: 230px !important;

  margin: 0 !important;

  overflow: hidden;

  border-radius: 18px;

  background:
    rgba(0,0,0,.28);

  box-shadow:
    0 18px 40px
    rgba(0,0,0,.28);
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-session-art.poster {
  aspect-ratio: 2 / 3;
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-session-art.preview {
  aspect-ratio: 2 / 3;
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-session-art img {
  display: block;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover;

  border-radius: inherit;
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-session-heading {
  align-items: flex-start;
  gap: 16px;
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-session-heading h3 {
  margin: 0;

  font-size:
    clamp(
      1.35rem,
      2vw,
      2rem
    );

  line-height: 1.08;
  letter-spacing: -.025em;
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-session-heading > div > span {
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .58;
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-session-meta {
  margin-top: 12px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 9px 12px;
}


.admin-settings-overview
.admin-overview-session-card
.admin-overview-user-avatar {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  border-radius: 50%;
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-progress-label {
  margin-top: 20px;
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-progress-track {
  height: 7px;

  margin-top: 8px;

  border-radius: 999px;

  overflow: hidden;

  background:
    rgba(255,255,255,.10);
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-overview-tech {
  display: grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 10px;

  margin-top: 20px;
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-overview-tech > div {
  min-width: 0;

  padding: 12px 14px;

  border-radius: 13px;

  border:
    1px solid
    rgba(255,255,255,.08);

  background:
    rgba(255,255,255,.035);
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-overview-tech span {
  display: block;

  margin-bottom: 5px;

  font-size: .69rem;
  letter-spacing: .08em;
  text-transform: uppercase;

  opacity: .54;
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-overview-tech strong {
  display: block;

  overflow-wrap: anywhere;

  font-size: .9rem;
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-remote {
  display: flex;

  align-items: center;
  flex-wrap: wrap;

  gap: 8px;

  margin-top: 18px;
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-remote button {
  min-height: 38px;

  padding:
    8px
    14px;

  border-radius: 999px;
}


.admin-settings-overview
.admin-overview-session-card
.admin-playback-session-action {
  margin-top: 16px;
}


@media (max-width: 900px) {

  .admin-settings-overview
  .admin-overview-session-card
  .admin-playback-session-main {
    grid-template-columns:
      180px
      minmax(0, 1fr);

    gap: 18px;

    padding: 18px;
  }


  .admin-settings-overview
  .admin-overview-session-card
  .admin-playback-session-art {
    width: 180px !important;
    max-width: 180px !important;
  }


  .admin-settings-overview
  .admin-overview-session-card
  .admin-playback-overview-tech {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}


@media (max-width: 620px) {

  .admin-settings-overview
  .admin-overview-session-card
  .admin-playback-session-main {
    display: flex !important;

    flex-direction: column;

    padding: 16px;
  }


  .admin-settings-overview
  .admin-overview-session-card
  .admin-playback-session-art {
    width: min(58vw, 230px) !important;
    max-width: none !important;

    align-self: center;
  }


  .admin-settings-overview
  .admin-overview-session-card
  .admin-playback-overview-tech {
    grid-template-columns: 1fr;
  }
}


/*
 * ENDCORE_PLAYBACK_CARDS_V2
 *
 * Standalone card system.
 * These classes intentionally avoid the old
 * admin-playback-session compact/expanded rules.
 */


/* ==========================================================
   LIVE OVERVIEW
   ========================================================== */

.admin-settings-overview
.admin-playback-session-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 280px));
  gap: 18px;
  align-items: start;
}


.admin-live-card {
  width: 280px;
  min-height: 0;

  display: flex;
  flex-direction: column;

  gap: 14px;

  padding: 24px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius: 24px;

  background:
    linear-gradient(
      135deg,
      rgba(27,49,77,.78),
      rgba(9,24,43,.96)
    );

  box-shadow:
    0 24px 65px
    rgba(0,0,0,.28);
}


.admin-live-poster {
  position: relative;

  width: 100%;

  aspect-ratio: 2 / 3;

  overflow: hidden;

  border-radius: 18px;

  background:
    rgba(0,0,0,.30);

  box-shadow:
    0 18px 42px
    rgba(0,0,0,.30);
}


.admin-live-poster img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.admin-live-body {
  min-width: 0;

  display: flex;
  flex-direction: column;
}


.admin-live-heading {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;

  gap: 20px;
}


.admin-live-type {
  display: block;

  margin-bottom: 7px;

  font-size: .72rem;
  font-weight: 700;

  letter-spacing: .12em;

  text-transform: uppercase;

  opacity: .58;
}


.admin-live-heading h3 {
  margin: 0;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.7rem
    );

  line-height: 1.05;

  letter-spacing: -.035em;
}


.admin-live-user {
  display: flex;
  flex-wrap: wrap;

  align-items: center;

  gap: 7px 12px;

  margin-top: 13px;

  font-size: .92rem;
}


.admin-live-user span {
  opacity: .68;
}


.admin-live-progress {
  margin-top: 14px;
}


.admin-live-card
.admin-playback-progress-label {
  font-size: .92rem;
}


.admin-live-card
.admin-playback-progress-track {
  height: 8px;

  margin-top: 9px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(255,255,255,.10);
}


.admin-live-tech-grid {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  gap: 10px;

  margin-top: 24px;
}


.admin-live-tech-grid > div {
  min-width: 0;

  padding: 13px 14px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 13px;

  background:
    rgba(255,255,255,.035);
}


.admin-live-tech-grid span,
.admin-live-tech-grid strong {
  display: block;
}


.admin-live-tech-grid span {
  margin-bottom: 5px;

  font-size: .68rem;

  letter-spacing: .08em;

  text-transform: uppercase;

  opacity: .54;
}


.admin-live-tech-grid strong {
  overflow-wrap: anywhere;

  font-size: .9rem;
}


.admin-live-actions {
  display: flex;

  align-items: center;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: auto;

  padding-top: 24px;
}


.admin-live-detail-button {
  min-height: 40px;

  padding: 9px 16px;

  border-radius: 999px;
}


.admin-live-card
.admin-playback-remote {
  display: flex;

  align-items: center;
  flex-wrap: wrap;

  gap: 8px;

  margin: 0;
}


.admin-live-card
.admin-playback-remote button {
  min-height: 40px;

  padding: 9px 15px;

  border-radius: 999px;
}


/* ==========================================================
   PLAYBACK HISTORY
   ========================================================== */

.admin-playback-history-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(175px, 215px)
    );

  gap: 22px;
}


.admin-history-card {
  min-width: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 18px;

  background:
    rgba(255,255,255,.025);

  cursor: pointer;

  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
}


.admin-history-card:hover {
  transform: translateY(-4px);

  border-color:
    rgba(255,255,255,.17);

  box-shadow:
    0 18px 38px
    rgba(0,0,0,.22);
}


.admin-history-card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}


.admin-history-poster {
  position: relative;

  width: 100%;

  aspect-ratio: 2 / 3;

  overflow: hidden;

  background:
    rgba(0,0,0,.28);
}


.admin-history-poster img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.admin-history-body {
  padding: 13px;
}


.admin-history-type {
  display: block;

  margin-bottom: 5px;

  font-size: .66rem;
  font-weight: 700;

  letter-spacing: .10em;

  text-transform: uppercase;

  opacity: .55;
}


.admin-history-body h3 {
  margin: 0;

  font-size: 1rem;
  line-height: 1.25;
}


.admin-history-body p {
  margin: 7px 0 0;

  font-size: .82rem;

  opacity: .72;
}


.admin-history-badges {
  display: flex;
  flex-wrap: wrap;

  gap: 5px;

  margin-top: 10px;
}


.admin-history-badges span {
  padding: 4px 7px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 999px;

  font-size: .69rem;
}


.admin-history-body time {
  display: block;

  margin-top: 10px;

  font-size: .72rem;

  opacity: .53;
}


/* ==========================================================
   STABLE TECHNICAL INSPECTOR
   ========================================================== */

.admin-playback-inspector-overlay {
  position: fixed;

  inset: 0;

  z-index: 10000;

  display: grid;

  place-items: center;

  padding: 28px;

  background:
    rgba(2,8,16,.78);

  backdrop-filter:
    blur(10px);
}


.admin-playback-inspector {
  width:
    min(
      1050px,
      calc(100vw - 40px)
    );

  max-height:
    calc(100vh - 40px);

  overflow: auto;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius: 24px;

  background:
    rgba(8,20,35,.98);

  box-shadow:
    0 32px 90px
    rgba(0,0,0,.50);
}


.admin-playback-inspector-header {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;

  gap: 24px;

  padding: 24px 26px;

  border-bottom:
    1px solid
    rgba(255,255,255,.08);
}


.admin-playback-inspector-header > div > span,
.admin-playback-inspector-section-title > span {
  display: block;

  margin-bottom: 5px;

  font-size: .69rem;
  font-weight: 700;

  letter-spacing: .12em;

  opacity: .58;
}


.admin-playback-inspector-header h2 {
  margin: 0;

  font-size: 1.7rem;
}


.admin-playback-inspector-header p {
  margin: 7px 0 0;

  opacity: .66;
}


.admin-playback-inspector-close {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  border-radius: 50%;

  font-size: 1.55rem;
}


.admin-playback-inspector-content {
  display: grid;

  grid-template-columns:
    190px
    minmax(0, 1fr);

  gap: 26px;

  padding: 26px;
}


.admin-playback-inspector-poster {
  position: relative;

  width: 190px;

  aspect-ratio: 2 / 3;

  overflow: hidden;

  border-radius: 16px;

  background:
    rgba(0,0,0,.28);
}


.admin-playback-inspector-poster img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.admin-playback-inspector-summary,
.admin-playback-inspector-technical {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 10px;
}


.admin-playback-inspector-summary > div,
.admin-playback-inspector-technical > div {
  min-width: 0;

  padding: 12px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 12px;

  background:
    rgba(255,255,255,.025);
}


.admin-playback-inspector-summary span,
.admin-playback-inspector-summary strong,
.admin-playback-inspector-technical span,
.admin-playback-inspector-technical strong {
  display: block;
}


.admin-playback-inspector-summary span,
.admin-playback-inspector-technical span {
  margin-bottom: 5px;

  font-size: .70rem;

  opacity: .55;
}


.admin-playback-inspector-summary strong,
.admin-playback-inspector-technical strong {
  overflow-wrap: anywhere;

  font-size: .88rem;
}


.admin-playback-inspector-section-title {
  margin:
    24px
    0
    13px;
}


.admin-playback-inspector-section-title h3 {
  margin: 0;

  font-size: 1.05rem;
}


.admin-playback-inspector-unavailable {
  padding: 16px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 12px;

  opacity: .65;
}


@media (max-width: 850px) {

  .admin-live-card {
    grid-template-columns:
      170px
      minmax(0, 1fr);

    gap: 18px;

    padding: 18px;
  }


  .admin-live-poster {
    width: 170px;
  }


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


  .admin-playback-inspector-content {
    grid-template-columns: 1fr;
  }


  .admin-playback-inspector-poster {
    width:
      min(
        190px,
        55vw
      );
  }


  .admin-playback-inspector-summary,
  .admin-playback-inspector-technical {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}


@media (max-width: 560px) {

  .admin-live-card {
    display: flex;

    flex-direction: column;
  }


  .admin-live-poster {
    width:
      min(
        220px,
        65vw
      );

    align-self: center;
  }


  .admin-live-tech-grid,
  .admin-playback-inspector-summary,
  .admin-playback-inspector-technical {
    grid-template-columns: 1fr;
  }


  .admin-playback-history-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 12px;
  }


  .admin-playback-inspector-overlay {
    padding: 10px;
  }


  .admin-playback-inspector {
    width:
      calc(100vw - 20px);

    max-height:
      calc(100vh - 20px);
  }
}


/*
 * ENDCORE_OVERVIEW_LIVE_LAYOUT_V3
 *
 * Final width correction for the standalone
 * live playback card.
 */

.admin-settings-overview
.admin-playback-overview-panel {
  box-sizing: border-box;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}


.admin-settings-overview
.admin-playback-overview-panel
.admin-playback-session-list {
  box-sizing: border-box;

  display: grid !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  grid-template-columns:
    repeat(auto-fill, minmax(250px, 280px)) !important;
}


.admin-settings-overview
.admin-live-card {
  box-sizing: border-box;

  width: 280px !important;
  max-width: 280px !important;
  min-width: 0 !important;

  grid-template-columns:
    260px
    minmax(0, 1fr);

  gap: 32px;

  padding: 26px;
}


.admin-settings-overview
.admin-live-poster {
  width: 260px;

  flex: none;
}


.admin-settings-overview
.admin-live-body {
  width: 100%;
  min-width: 0;
}


.admin-settings-overview
.admin-live-heading {
  width: 100%;
  min-width: 0;
}


.admin-settings-overview
.admin-live-heading > div {
  min-width: 0;
}


.admin-settings-overview
.admin-live-heading h3 {
  max-width: 100%;

  overflow: visible;

  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}


.admin-settings-overview
.admin-live-progress {
  width: 100%;
}


.admin-settings-overview
.admin-live-tech-grid {
  width: 100%;

  grid-template-columns:
    repeat(
      3,
      minmax(150px, 1fr)
    );
}


.admin-settings-overview
.admin-live-tech-grid > div {
  min-width: 0;
}


.admin-settings-overview
.admin-live-tech-grid strong {
  white-space: normal;

  word-break: normal;
  overflow-wrap: break-word;
}


.admin-settings-overview
.admin-live-actions {
  width: 100%;
}


@media (max-width: 1000px) {

  .admin-settings-overview
  .admin-live-card {
    grid-template-columns:
      220px
      minmax(0, 1fr);
  }


  .admin-settings-overview
  .admin-live-poster {
    width: 100%;
  }


  .admin-settings-overview
  .admin-live-tech-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(150px, 1fr)
      );
  }
}


@media (max-width: 650px) {

  .admin-settings-overview
  .admin-live-card {
    display: flex;

    flex-direction: column;
  }


  .admin-settings-overview
  .admin-live-poster {
    width: min(260px, 68vw);

    align-self: center;
  }


  .admin-settings-overview
  .admin-live-tech-grid {
    grid-template-columns: 1fr;
  }
}


/*
 * ENDCORE_PLAYBACK_CLIENT_INSPECTOR_V1
 */

.admin-playback-inspector-agent {
  margin-top: 14px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 12px;

  background:
    rgba(255,255,255,.02);
}


.admin-playback-inspector-agent summary {
  padding: 12px 14px;

  cursor: pointer;

  font-size: .82rem;
  font-weight: 700;
}


.admin-playback-inspector-agent > div {
  padding:
    0
    14px
    14px;
}


.admin-playback-inspector-agent span {
  display: block;

  margin-bottom: 7px;

  font-size: .69rem;

  opacity: .55;
}


.admin-playback-inspector-agent code {
  display: block;

  overflow-wrap: anywhere;

  white-space: normal;

  font-size: .76rem;

  opacity: .78;
}


/*
 * ENDCORE_OVERVIEW_OPTION_A_COMPACT_V1
 *
 * Preserve the approved live-card composition,
 * only reducing its desktop footprint ~12%.
 */

@media (min-width: 651px) {

  .admin-settings-overview
  .admin-live-card {
    width:
      min(
        100%,
        1040px
      ) !important;

    max-width:
      1040px !important;

    grid-template-columns:
      230px
      minmax(0, 1fr);

    gap: 26px;

    padding: 22px;
  }


  .admin-settings-overview
  .admin-live-poster {
    width: 230px;
  }


  .admin-settings-overview
  .admin-live-heading h3 {
    font-size:
      clamp(
        1.6rem,
        2.5vw,
        2.35rem
      );
  }


  .admin-settings-overview
  .admin-live-progress {
    margin-top: 24px;
  }


  .admin-settings-overview
  .admin-live-tech-grid {
    gap: 9px;

    margin-top: 18px;
  }


  .admin-settings-overview
  .admin-live-tech-grid > div {
    padding:
      11px
      12px;
  }


  .admin-settings-overview
  .admin-live-actions {
    padding-top: 18px;
  }
}


/* ==========================================================
   ENDCORE MIGRATION CENTER V1
   ========================================================== */

.admin-migration-view {
  max-width: 1180px;
}

.admin-migration-connect {
  display: grid;
  grid-template-columns:
    minmax(260px, 1.2fr)
    minmax(240px, 1fr)
    auto;
  gap: 14px;
  align-items: end;
  margin-top: 22px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
}

.admin-migration-field {
  display: grid;
  gap: 7px;
}

.admin-migration-field label {
  font-size: 12px;
  font-weight: 700;
  opacity: .68;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.admin-migration-field input {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  color: inherit;
  font: inherit;
  outline: none;
}

.admin-migration-field input:focus {
  border-color: rgba(130,165,255,.65);
  box-shadow: 0 0 0 3px rgba(110,145,255,.10);
}

.admin-migration-message {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  font-size: 14px;
}

.admin-migration-message.success {
  background: rgba(70,190,125,.10);
}

.admin-migration-message.error {
  background: rgba(230,85,85,.12);
}

.admin-migration-options {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.admin-migration-option {
  position: relative;
  display: flex;
  gap: 13px;
  min-height: 138px;
  padding: 19px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
  cursor: pointer;
  transition:
    border-color .18s ease,
    transform .18s ease,
    background .18s ease;
}

.admin-migration-option:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
}

.admin-migration-option:has(input:checked) {
  border-color: rgba(120,155,255,.72);
  background: rgba(95,130,235,.10);
}

.admin-migration-option input {
  margin-top: 4px;
  accent-color: currentColor;
}

.admin-migration-option strong {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
}

.admin-migration-option p {
  margin: 0;
  opacity: .62;
  line-height: 1.55;
}

.admin-migration-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}

.admin-migration-actions > div {
  display: grid;
  gap: 4px;
}

.admin-migration-actions span {
  font-size: 13px;
  opacity: .58;
}

.admin-migration-job {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
}

.admin-migration-job-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.admin-migration-job-heading > div {
  display: grid;
  gap: 4px;
}

.admin-migration-job-heading span,
.admin-migration-job small {
  opacity: .58;
}

.admin-migration-job-heading b {
  font-size: 18px;
}

.admin-migration-progress {
  overflow: hidden;
  height: 7px;
  margin: 16px 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.admin-migration-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  opacity: .7;
  transition: width .3s ease;
}

.admin-migration-job p {
  margin: 0 0 8px;
}

@media (max-width: 900px) {
  .admin-migration-connect,
  .admin-migration-options {
    grid-template-columns: 1fr;
  }

  .admin-migration-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ==========================================================
   ENDCORE MIGRATION PERSISTENT PROGRESS V1
   ========================================================== */

.admin-migration-live-progress {
  margin: 0 0 22px;
  padding: 22px 24px;
  border: 1px solid rgba(111, 143, 255, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(50, 77, 150, 0.16),
      rgba(17, 23, 35, 0.74)
    );
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.18);
}

.admin-migration-live-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.admin-migration-live-top > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-migration-live-eyebrow {
  color: rgba(174, 194, 255, 0.78);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.admin-migration-live-top strong {
  color: #f5f8ff;
  font-size: 20px;
  line-height: 1.25;
}

.admin-migration-live-percent {
  min-width: 72px;
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-migration-live-track {
  position: relative;
  height: 12px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.045);
}

.admin-migration-live-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #5f78ff 0%,
      #7d5cff 48%,
      #54c8ff 100%
    );
  box-shadow:
    0 0 18px rgba(102, 117, 255, 0.42);
  transition:
    width 320ms ease;
}

.admin-migration-live-message {
  margin: 15px 0 0;
  color: rgba(242, 246, 255, 0.94);
  font-size: 14px;
  font-weight: 650;
}

.admin-migration-live-note {
  display: block;
  margin-top: 7px;
  color: rgba(203, 212, 234, 0.68);
  font-size: 12px;
  line-height: 1.5;
}

.admin-migration-live-progress.complete {
  border-color: rgba(87, 214, 159, 0.28);
}

.admin-migration-live-progress.failed {
  border-color: rgba(255, 105, 120, 0.3);
}

.admin-migration-option.migration-locked {
  pointer-events: none;
  opacity: 0.48;
  filter: saturate(0.55);
}

.admin-migration-view.migration-running
  #adminMigrationStart,
.admin-migration-view.migration-running
  #adminMigrationTest {
  cursor: not-allowed;
  opacity: 0.52;
}

.admin-migration-view.migration-running
  #adminMigrationUrl,
.admin-migration-view.migration-running
  #adminMigrationApiKey {
  cursor: not-allowed;
  opacity: 0.62;
}

@media (max-width: 720px) {
  .admin-migration-live-progress {
    padding: 18px;
  }

  .admin-migration-live-percent {
    font-size: 24px;
  }
}

/* ==========================================================
   ENDCORE MIGRATION SINGLE PROGRESS PANEL V1

   adminMigrationJob is still maintained by the original
   controller internally, but its old visual progress block is
   hidden. The persistent Core-backed panel is the single UI.
   ========================================================== */

#adminMigrationJob {
  display: none !important;
}

.admin-migration-live-backup {
  display: block;
  margin-top: 8px;
  color: rgba(174, 190, 215, 0.58);
  font-size: 11px;
  line-height: 1.45;
}

.admin-migration-live-backup[hidden] {
  display: none;
}

/* Compact live playback cards */
.admin-live-card-compact {
  width: min(100%, 520px);
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
}

.admin-live-card-compact .admin-live-poster {
  display: none;
}

.admin-live-card-compact .admin-live-tech-grid,
.admin-live-card-compact .admin-live-actions {
  display: none;
}

.admin-live-card-compact .admin-live-body {
  min-width: 0;
}

/* Compact playback card final sizing override */
.admin-settings-overview .admin-live-card-compact {
  width: min(100%, 620px) !important;
  max-width: 620px !important;
  display: block;
  padding: 18px;
}

.admin-settings-overview .admin-live-card-compact .admin-live-heading h3 {
  font-size: 1.35rem;
  line-height: 1.25;
  max-width: 100%;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

.admin-settings-overview .admin-live-card-compact .admin-live-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.admin-settings-overview .admin-live-card-compact .admin-live-progress {
  margin-top: 12px;
}

.admin-settings-overview .admin-live-card-compact .admin-live-mode {
  margin-top: 10px;
}

/* Vertical poster playback cards */
.admin-settings-overview .admin-live-card-compact {
  width: 240px !important;
  max-width: 240px !important;
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 10px;
}

.admin-settings-overview .admin-live-card-compact .admin-live-poster {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 12px;
}

.admin-settings-overview .admin-live-card-compact .admin-live-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-settings-overview .admin-live-card-compact .admin-live-heading h3 {
  font-size: 1rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.admin-settings-overview .admin-live-card-compact .admin-live-heading {
  gap: 6px;
}

.admin-settings-overview .admin-live-card-compact .admin-live-user {
  font-size: .85rem;
}

/* ENDCORE_PLAYBACK_PLATFORM_META */
.admin-settings-overview .admin-live-card-compact .admin-live-user span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-settings-overview .admin-live-card-compact h3 {
  max-width: 100%;
}

/* ENDCORE_OVERVIEW_V17_STABLE_CARD_LAYOUT */
.admin-settings-overview .admin-live-card-compact {
  width: 240px !important;
  max-width: 240px !important;
  min-height: 0;
}

.admin-settings-overview .admin-live-card-compact .admin-live-heading h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.5em;
}

.admin-settings-overview .admin-live-card-compact .admin-live-user {
  min-height: 42px;
}

.admin-settings-overview .admin-live-card-compact .admin-live-user span {
  max-width: 180px;
}

/* ENDCORE_OVERVIEW_V17_IDENTITY_LAYOUT */
.admin-settings-overview .admin-live-card-compact .admin-live-user {
  display: grid;
  gap: 2px;
}

.admin-settings-overview .admin-live-card-compact .admin-live-platform,
.admin-settings-overview .admin-live-card-compact .admin-live-network {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ENDCORE_OVERVIEW_V18_BRAND_PLATFORM_ICONS */
.admin-client-platform-logo {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.admin-client-platform-logo--samsung,
.admin-client-platform-logo--fire {
  width: 42px;
}
.admin-settings-overview .admin-live-card-compact .admin-live-platform {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.admin-settings-overview .admin-live-card-compact .admin-live-client {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.admin-settings-overview .admin-live-card-compact .admin-live-user {
  min-height: 75px;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}
.admin-settings-overview .admin-live-card-compact .admin-live-network {
  font-size: .74rem;
  line-height: 1.3;
  opacity: .75;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow-wrap: anywhere;
  min-height: 2.6em;
  max-width: 100%;
}

/* WebCore 2.5 v21: stop is always reachable on each compact playback card. */
.admin-settings-overview .admin-live-card-compact .admin-live-stop-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.admin-settings-overview .admin-live-card-compact .admin-live-stop-button {
  padding: 5px 10px;
  min-height: 27px;
  border: 1px solid rgba(255, 124, 124, .45);
  border-radius: 8px;
  color: #ffb5b5;
  background: rgba(120, 26, 38, .16);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.admin-settings-overview .admin-live-card-compact .admin-live-stop-button:hover,
.admin-settings-overview .admin-live-card-compact .admin-live-stop-button:focus-visible {
  background: rgba(140, 38, 46, .3);
  outline-offset: 2px;
}
.admin-settings-overview .admin-live-card-compact .admin-live-stop-button:disabled {
  opacity: .55;
  cursor: wait;
}

/* =========================================================
   ENDCORE ADMIN — JOINME SESSION CONTROL
   ========================================================= */

.admin-playback-stat-interactive {
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}

.admin-playback-stat-interactive:hover,
.admin-playback-stat-interactive:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(130, 177, 230, 0.3);
  outline: none;
}

.admin-joinme-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 8, 16, 0.78);
  backdrop-filter: blur(8px);
}

.admin-joinme-modal {
  width: min(860px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid rgba(130, 177, 230, 0.16);
  border-radius: 20px;
  background: #07172b;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.admin-joinme-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(130, 177, 230, 0.1);
}

.admin-joinme-modal-header span {
  color: #6f99c6;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.09em;
}

.admin-joinme-modal-header h2 {
  margin: 5px 0 6px;
  color: #eaf4ff;
  font-size: 1.2rem;
}

.admin-joinme-modal-header p {
  max-width: 680px;
  margin: 0;
  color: #718aa5;
  font-size: 0.78rem;
  line-height: 1.5;
}

.admin-joinme-modal-close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid rgba(130, 177, 230, 0.14);
  border-radius: 10px;
  background: rgba(7, 23, 43, 0.8);
  color: #b8cce0;
  font-size: 1.5rem;
  cursor: pointer;
}

.admin-joinme-room-list {
  display: grid;
  gap: 10px;
  padding: 18px 24px 24px;
}

.admin-joinme-room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 16px;
  border: 1px solid rgba(130, 177, 230, 0.1);
  border-radius: 14px;
  background: rgba(5, 18, 34, 0.72);
}

.admin-joinme-room-main {
  min-width: 0;
}

.admin-joinme-room-code {
  color: #edf6ff;
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.admin-joinme-room-meta {
  margin-top: 5px;
  color: #718aa5;
  font-size: 0.76rem;
  line-height: 1.45;
}

.admin-joinme-close-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .admin-joinme-modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .admin-joinme-modal {
    max-height: 90vh;
    border-radius: 20px 20px 0 0;
  }

  .admin-joinme-room-row {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-joinme-close-button {
    width: 100%;
  }
}

/* Preserve the real multicolored Chrome brand, unlike monochrome TV/OS marks. */
.admin-client-platform-logo--chrome {
  filter: none;
}

/* External provider playback history */
.admin-playback-history-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-playback-history-filter {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(130,177,230,.14);
  border-radius: 10px;
  background: #07172b;
  color: #cfe2f5;
  font: inherit;
}
.admin-history-card-external .admin-history-type {
  color: #8eb7df;
}
.admin-history-card-external .admin-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 7px;
  color: #7892ad;
  font-size: .74rem;
}
@media (max-width: 700px) {
  .admin-playback-history-actions {
    width: 100%;
  }
  .admin-playback-history-filter {
    flex: 1;
  }
}


/* Restored per-user assigned server panel */
.admin-connected-servers-panel { min-width: 0; }
.admin-connected-servers-content { display: grid; gap: 1rem; }
.admin-connected-server-core,
.admin-connected-server-add { display: grid; gap: .8rem; padding: 1rem; border: 1px solid var(--border, rgba(128,140,160,.25)); border-radius: 12px; }
.admin-connected-server-core small { opacity: .72; }
.admin-connected-server-add h3 { margin: 0; }
.admin-connected-server-add label,
.admin-connected-server-core label { display: grid; gap: .35rem; }
.admin-connected-server-add label span { opacity: .7; font-size: .85em; }
.admin-connected-server-list { display: grid; gap: .55rem; }
.admin-connected-server-choice { display: flex; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid var(--border, rgba(128,140,160,.22)); border-radius: 10px; min-width: 0; }
.admin-connected-server-choice > span:first-of-type { display: grid; gap: .2rem; flex: 1; min-width: 0; }
.admin-connected-server-choice small { opacity: .72; overflow-wrap: anywhere; }
.admin-connected-server-choice input { flex: 0 0 auto; }
.admin-connected-server-choice button { flex: 0 0 auto; }
.admin-connected-servers-content input:not([type=checkbox]) { width: 100%; min-width: 0; }
@media (max-width: 640px) {
  .admin-connected-server-choice { align-items: flex-start; flex-wrap: wrap; }
  .admin-connected-server-choice > span:first-of-type { flex-basis: calc(100% - 3rem); }
  .admin-connected-server-choice button { margin-left: 2rem; }