/* PulseSign visual system — loaded last so it wins the cascade. */

.topbar-crumb {
  min-width: 0;
}

.topbar-crumb-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.topbar-crumb-meta {
  margin-top: 1px;
  font-size: 11px;
  color: var(--color-text-subtle);
}

.topbar-brand {
  display: none;
}

.year-chip {
  display: none;
}

.user-chip {
  border: 0;
  background: transparent;
  border-radius: 9px;
}

@media (max-width: 768px) {
  .topbar-brand {
    display: flex;
  }

  .topbar-crumb {
    display: none;
  }
}

.page {
  padding: 28px 32px 40px;
  background: var(--color-bg);
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 24px;
  padding: 0;
  border-bottom: 0;
}

.page-header h1,
.page-header .page-title {
  margin: 0 0 5px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
  color: var(--color-text);
}

.page-kicker {
  display: none;
}

.page-header p,
.page-header .page-subtitle,
.page-header-subtitle {
  margin: 0;
  max-width: 42rem;
  color: var(--color-text-subtle);
  font-size: 14px;
  line-height: 1.45;
}

.page:has(.bell-tabs) .page-header,
.page:has(.ops-tabs) .page-header,
.page:has(.ps-subnav) .page-header {
  height: auto;
  min-height: 0;
  max-height: none;
  flex: 0 0 auto;
  overflow: visible;
  display: flex;
  grid-template-columns: unset;
}

.page:has(.bell-tabs) .page-header > :first-child,
.page:has(.ops-tabs) .page-header > :first-child,
.page:has(.ps-subnav) .page-header > :first-child {
  display: block;
  grid-template-rows: unset;
  min-width: 0;
}

.page:has(.bell-tabs),
.page:has(.ops-tabs),
.page:has(.ps-subnav) {
  padding-block: 28px;
}

.workspace:has(.timetable-board),
.workspace:has(.bell-workspace),
.workspace:has(.ops-workspace),
.workspace:has(.ps-page),
.workspace:has(.bell-dash) {
  height: auto;
  overflow: visible;
}

.workspace:has(.timetable-board) .app-footer,
.workspace:has(.bell-workspace) .app-footer,
.workspace:has(.ops-workspace) .app-footer,
.workspace:has(.ps-page) .app-footer {
  display: block;
}

.page:has(.timetable-board),
.page:has(.bell-workspace),
.page:has(.ops-workspace),
.page:has(.ps-page) {
  overflow: visible;
  min-height: 0;
}

.sidebar {
  background: var(--color-sidebar);
}

.sidebar-brand {
  height: 64px;
  min-height: 64px;
  padding: 0 14px;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(93, 95, 239, 0.35);
}

.brand-name {
  font-size: 15.5px;
}

.nav-section {
  margin: 0 10px 5px;
  padding-top: 15px;
  opacity: 1;
}

.nav-item {
  min-height: 0;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 1px;
}

.nav-item.is-active {
  background: rgba(93, 95, 239, 0.18);
  box-shadow: none;
}

html[dir="rtl"] .nav-item.is-active {
  box-shadow: none;
}

.topbar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  min-height: 4.25rem;
}

.tenant-chip,
.year-chip {
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
  border: 0;
}

.user-chip {
  border-radius: 999px;
  padding: 0.25rem 0.7rem 0.25rem 0.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

html[dir="rtl"] .user-chip {
  padding: 0.25rem 0.25rem 0.25rem 0.7rem;
}

.user-avatar {
  background: var(--color-primary);
  color: #fff;
}

.tabs,
.ps-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
  margin: 0 0 1.25rem;
  padding: 0.15rem 0 0;
  border: 0;
}

.tab,
.ps-subnav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.05rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  box-shadow: none;
}

.tab.is-active,
.ps-subnav a.is-active,
.tab[aria-current="page"] {
  background: var(--color-primary-soft);
  border-color: transparent;
  color: var(--color-primary-text);
}

.ps-subnav-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.ps-subnav-label {
  margin-inline-end: 0.15rem;
  color: var(--color-text-subtle);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.emergency-workspace,
.ps-page,
.ops-workspace,
.bell-workspace {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.ps-suspended-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin: 0 0 24px;
  padding: 28px;
  border-radius: 20px;
  background:
    radial-gradient(900px 220px at 0% 0%, rgba(239, 68, 68, 0.14), transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #fff5f5 100%);
  border: 1px solid #fecaca;
  box-shadow: var(--shadow-sm);
}

.ps-suspended-hero-mark {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #fee2e2;
  color: #dc2626;
  flex: 0 0 auto;
}

.ps-suspended-hero-copy {
  flex: 1 1 18rem;
  min-width: 0;
}

.ps-suspended-hero-copy h2 {
  margin: 8px 0 6px;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  color: #7f1d1d;
}

.ps-suspended-hero-copy p {
  margin: 0;
  max-width: 38rem;
  color: #991b1b;
  font-size: 15px;
  line-height: 1.5;
}

.ps-suspended-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.ps-suspended-fact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #fecaca;
  color: #991b1b;
  font-size: 13px;
  font-weight: 500;
}

.ps-suspended-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ps-dash-muted {
  opacity: 0.48;
  filter: grayscale(0.45);
}

.ps-dash-muted .kpi-ico.is-green {
  background: #fee2e2;
  color: #ef4444;
}

.ps-service-pause-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 20px 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.ps-service-pause-banner-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fee2e2;
  color: #dc2626;
  flex: 0 0 auto;
}

.ps-service-pause-banner strong {
  display: block;
  font-size: 14px;
}

.ps-service-pause-banner span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  color: #b91c1c;
}

.kpi-strip,
.ps-kpi,
.bell-ops-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.metric-card,
.kpi-card,
.ps-kpi-card {
  position: relative;
  overflow: hidden;
  padding: 20px 20px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.metric-card::before,
.kpi-card::before,
.ps-kpi-card::before {
  display: none;
}

.kpi-card .progress,
.metric-card .progress {
  display: none;
}

.kpi-card::after,
.metric-card::after {
  display: none;
}

.kpi-ico {
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.kpi-ico svg {
  width: 18px;
  height: 18px;
}

.kpi-ico.is-green { background: #d1fae5; color: #10b981; }
.kpi-ico.is-red { background: #fee2e2; color: #ef4444; }
.kpi-ico.is-amber { background: #fef3c7; color: #f59e0b; }
.kpi-ico.is-violet { background: #ede9fe; color: #8b5cf6; }
.kpi-ico.is-blue { background: #dbeafe; color: #3b82f6; }
.kpi-ico.is-slate { background: #f1f5f9; color: #94a3b8; }

.stat-card-label {
  color: var(--color-text-muted);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.stat-card-value {
  margin: 0 0 4px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.stat-card-hint {
  margin-top: 2px;
  color: var(--color-text-subtle);
  font-size: 11px;
}

.bell-toolbar,
.ps-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.bell-toolbar .form-field,
.ps-toolbar .form-field {
  margin: 0;
  min-width: 10rem;
  flex: 1 1 10rem;
}

.bell-toolbar-actions,
.ps-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-inline-start: auto;
}

.ps-view {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
}

.ps-view button {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-subtle);
  font-size: 12.5px;
  font-weight: 500;
}

.ps-view button.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.ps-surface,
.bell-pane,
.bell-composer,
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.ps-surface,
.bell-pane,
.bell-composer {
  padding: 1.15rem 1.2rem;
}

.bell-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.bell-stage:not(.is-single) {
  grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 22rem);
}

.ps-surface > h3,
.bell-pane > h3,
.bell-composer > h3,
.card-header h2 {
  margin: 0 0 0.85rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.catalog-grid,
.ps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.catalog-card,
.ps-card,
.bell-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.bell-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  border-inline-start: 0;
}

.catalog-card:hover,
.ps-card:hover,
.bell-item:hover {
  border-color: #c7c9f5;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.player-fleet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.player-fleet .kpi-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
}

.player-fleet .kpi-ico {
  margin: 0;
}

.player-fleet .stat-card-value {
  margin: 0 0 2px;
  font-size: 26px;
}

.player-card {
  border-inline-start: 4px solid #cbd5e1;
}

.player-card.is-online {
  border-inline-start-color: #10b981;
}

.player-card.is-warn {
  border-inline-start-color: #f59e0b;
}

.player-card.is-offline {
  border-inline-start-color: #ef4444;
}

.player-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  flex-shrink: 0;
}

.player-live.is-on {
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
}

.player-live.is-warn {
  background: #f59e0b;
}

.player-live.is-off {
  background: #ef4444;
}

.player-seen {
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.player-card-id {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
}

.player-card-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  flex-shrink: 0;
  background: var(--color-primary-soft);
  border: 1px solid #c7d2fe;
}

.player-card.is-offline .player-card-ico {
  background: var(--color-bg);
  border-color: var(--color-border);
}

.player-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.player-card-label {
  margin-bottom: 2px;
  font-size: 10.5px;
  color: var(--color-text-subtle);
}

.player-card-foot {
  margin-top: auto;
}

.player-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
  margin: 0 -18px -18px;
  padding-inline: 14px 14px;
  padding-bottom: 10px;
  border-top: 1px solid var(--color-border-light);
  background: var(--color-bg);
}

.player-card-actions form {
  margin: 0;
}

.player-card-actions.is-inline {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.device-type-picker {
  margin: 0 0 1rem;
  min-width: 0;
  border: 0;
  padding: 0;
}

.device-type-picker .form-label {
  margin-bottom: 0.55rem;
}

.device-type-picks {
  display: grid;
  gap: 8px;
}

.device-type-pick {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 4.25rem;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  cursor: pointer;
}

.device-type-pick:hover {
  border-color: var(--color-primary);
}

.device-type-pick:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.device-type-pick input {
  margin-top: 0.35rem;
  flex-shrink: 0;
}

.device-type-pick-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: 1px;
  border-radius: 9px;
  background: var(--color-bg);
  color: var(--color-primary);
  flex-shrink: 0;
}

.device-type-pick-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.device-type-pick-copy strong {
  font-size: 0.95rem;
}

.device-type-pick-copy span {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.35;
}

#change-type-dialog {
  width: min(640px, 94vw);
}

.html-param-map {
  display: grid;
  gap: 10px;
}

.html-param-row {
  display: grid;
  grid-template-columns: minmax(8rem, 0.7fr) minmax(10rem, 1fr) minmax(10rem, 1.2fr);
  gap: 8px;
  align-items: center;
}

.html-param-row .form-label {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  direction: ltr;
  unicode-bidi: isolate;
}

@media (max-width: 720px) {
  .html-param-row {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 840px) {
  .bell-pane .device-type-picks,
  #change-type-dialog .device-type-picks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.catalog-card-title,
.ps-card-title,
.bell-item-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

.catalog-card-thumb,
.ps-thumb {
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin: -0.15rem -0.15rem 0.15rem;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(93, 95, 239, 0.12), rgba(15, 23, 42, 0.04)),
    var(--color-surface-muted);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.catalog-card-thumb img,
.ps-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-view-host][data-view="list"] .catalog-grid,
[data-view-host][data-view="list"] .ps-grid,
.ps-collection[data-view="list"] .catalog-grid,
.ps-collection[data-view="list"] .ps-grid {
  grid-template-columns: 1fr;
}

[data-view-host][data-view="list"] .catalog-card,
[data-view-host][data-view="list"] .ps-card,
.ps-collection[data-view="list"] .catalog-card,
.ps-collection[data-view="list"] .ps-card {
  flex-direction: row;
  align-items: center;
}

[data-view-host][data-view="list"] .catalog-card-thumb,
[data-view-host][data-view="list"] .ps-thumb,
.ps-collection[data-view="list"] .catalog-card-thumb,
.ps-collection[data-view="list"] .ps-thumb {
  flex: 0 0 7.5rem;
  aspect-ratio: 4 / 3;
  margin: 0;
}

.table-wrap {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: auto;
}

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

.table th {
  padding: 0.7rem 0.85rem;
  background: #f8faff;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: start;
}

.table td {
  padding: 0.85rem;
  border-top: 1px solid var(--color-border-light);
  font-size: 0.84rem;
}

.table tbody tr:hover {
  background: #fafafe;
}

.btn {
  min-height: 0;
  padding: 8px 16px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
}

.btn-sm {
  padding: 5px 12px;
  font-size: 12.5px;
  border-radius: 6px;
}

.btn-primary,
.btn-navy {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.btn-navy:hover,
.btn-primary:hover {
  background: var(--color-primary-hover);
}

.empty-state,
.timetable-empty {
  padding: 2.25rem 1.25rem;
  text-align: center;
}

.empty-state h2,
.timetable-empty strong {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
}

.ps-hero,
.welcome-card,
.hub-identity .welcome-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem 1.5rem;
  padding: 1.35rem 1.45rem;
  background:
    linear-gradient(135deg, rgba(93, 95, 239, 0.12), rgba(255, 255, 255, 0.9) 42%),
    var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}

.welcome-hello {
  margin: 0 0 0.35rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.welcome-school {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.welcome-logo {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  overflow: hidden;
  border-radius: 16px;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
}

.welcome-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.welcome-school-copy h2 {
  margin: 0;
  font-size: 1.35rem;
}

.hub-grid,
.ps-dash {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.hub-identity,
.ps-dash-hero {
  grid-column: 1 / -1;
}

.kpi-strip {
  grid-column: 1 / -1;
}

.hub-next,
.ps-next {
  grid-column: span 5;
}

.hub-schedule,
.ps-schedule {
  grid-column: span 7;
}

.hub-devices,
.hub-screens,
.hub-activity,
.hub-modules {
  grid-column: span 6;
}

.hub-next,
.ps-next {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.bell-ops > .bell-next,
.bell-next {
  background: linear-gradient(135deg, #0e1117 0%, #1e1b4b 100%);
  color: #fff;
  border: 0;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}

.hub-next .card-header,
.hub-next h2,
.hub-next h3,
.hub-next .form-help,
.ps-next .form-help {
  color: inherit;
}

.bell-next .card-header,
.bell-next h2,
.bell-next h3,
.bell-next p {
  color: #fff;
}

.hub-next .card-header,
.bell-next .card-header {
  border: 0;
}

.next-bell-time,
.bell-next-time,
.bell-next-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 68px;
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1;
  text-align: center;
}

.hub-next .progress,
.bell-next .progress,
.ps-next .progress {
  background: rgba(255, 255, 255, 0.22);
}

.hub-next .progress span,
.bell-next .progress span,
.ps-next .progress span {
  background: #fff;
}

.next-actions .btn-navy,
.hub-next .btn-navy {
  background: #fff;
  border-color: #fff;
  color: var(--color-primary-text);
}

.timeline,
.ps-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.timeline-row,
.device-row,
.activity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  background: var(--color-surface-muted);
}

.timeline-row.is-current {
  background: var(--color-primary-soft);
  border-color: transparent;
}

.screen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.75rem;
}

.screen-tile {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.screen-tile-art {
  height: 4.6rem;
  background:
    linear-gradient(135deg, rgba(93, 95, 239, 0.28), #0e1117);
}

.screen-tile-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.55rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 650;
}

.module-health {
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 1px solid var(--color-border);
}

.module-health.is-ok {
  background: var(--color-success-soft);
  border-color: transparent;
}

.module-health.is-warn {
  background: var(--color-warning-soft);
  border-color: transparent;
}

.bell-ops {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 20px;
}

.bell-ops > .bell-next {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.bell-ops-metrics {
  grid-column: auto;
}

.ps-split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 24rem);
  gap: 1rem;
}

.ps-calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.ps-calendar-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}

.ps-calendar-toolbar h2 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.ps-calendar-toolbar p {
  margin: 0 0 6px;
}

.ps-calendar-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ps-modal.calendar-program-dialog {
  width: min(640px, 94vw);
}

.calendar-program-list {
  display: grid;
  gap: 8px;
  max-height: min(60vh, 28rem);
  margin: 14px 0 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.calendar-program-list li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-surface-muted, #f6f7fb);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.calendar-program-time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.calendar-program-name {
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-program-type {
  font-size: 12px;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .calendar-program-list li {
    grid-template-columns: 4.25rem minmax(0, 1fr) auto;
  }

  .calendar-program-type {
    display: none;
  }
}

.ps-calendar-head h2 {
  margin: 0 0 1rem;
}

.ps-cal-weekdays,
.ps-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.45rem;
}

.ps-cal-weekdays {
  margin-bottom: 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ps-cal-cell {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 6.4rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface-muted, #f6f7fb);
  color: inherit;
  text-decoration: none;
}

.ps-cal-cell.is-empty {
  background: transparent;
  border-color: transparent;
}

.ps-cal-cell.is-selected {
  border-color: #5d5fef;
  box-shadow: 0 0 0 3px rgba(93, 95, 239, 0.18);
}

.ps-cal-cell.is-off {
  opacity: 0.72;
}

.ps-cal-day {
  font-size: 1.05rem;
  font-weight: 750;
}

.ps-cal-meta {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.ps-source-list,
.ps-event-list {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.ps-studio {
  display: grid;
  grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr) minmax(16rem, 20rem);
  gap: 1rem;
  min-height: 32rem;
}

.ps-studio-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  padding: 1rem 1.05rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

.timetable-board {
  gap: 1rem;
}

.timetable-meta,
.timetable-days,
.timetable-stage {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

.timetable-days,
.timetable-stage {
  padding: 0.9rem 1rem;
}

.timetable-day-tab {
  border-radius: 999px;
}

.timetable-event {
  border-radius: 14px;
  background: var(--color-surface-muted, #f6f7fb);
}

.ps-studio-panel h2,
.ps-studio-panel h3 {
  margin: 0;
  font-size: 0.95rem;
}

.ps-library-list,
.ps-playlist-items {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 0;
  overflow: auto;
}

.ps-library-item,
.ps-playlist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface-muted);
}

.layout-studio .ops-workspace,
.layout-studio-workspace {
  gap: 0.75rem;
}

.layout-studio .layout-workspace {
  display: grid;
  direction: ltr;
  grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr) minmax(14rem, 17rem);
  grid-template-areas: "props stage tools";
  gap: 0.75rem;
  min-height: min(68vh, 46rem);
}

html[dir="rtl"] .layout-studio .layout-props,
html[dir="rtl"] .layout-studio .layout-stage-wrap,
html[dir="rtl"] .layout-studio .layout-side-start {
  direction: rtl;
}

.layout-studio .layout-props {
  grid-area: props;
}

.layout-studio .layout-stage-wrap {
  grid-area: stage;
  background: #11141c;
  border-radius: 18px;
}

.layout-studio .layout-side-start {
  grid-area: tools;
}

.layout-studio .layout-toolbox,
.layout-studio .layout-layers,
.layout-studio .layout-props {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.layout-studio .layout-props {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}

.layout-studio .layout-command {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
}

.layout-tool {
  justify-content: flex-start;
  border-radius: 10px;
}

.ps-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.4rem;
}

.ps-cal-day {
  min-height: 5.5rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
}

.ps-cal-day.is-today {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.lesson-program-page,
.lesson-program-board {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lesson-classes,
.lesson-section,
.lesson-program-board {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

.lesson-classes,
.lesson-section {
  padding: 1rem 1.1rem;
}

.lesson-chip {
  border-radius: 12px;
  background: var(--color-surface-muted);
}

.pagination {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.85rem;
}

@media (max-width: 1200px) {
  .hub-next,
  .hub-schedule,
  .hub-devices,
  .hub-screens,
  .hub-activity,
  .hub-modules,
  .ps-next,
  .ps-schedule {
    grid-column: 1 / -1;
  }

  .bell-ops,
  .ps-studio,
  .ps-split,
  .ps-calendar-layout,
  .bell-stage:not(.is-single) {
    grid-template-columns: 1fr;
  }

  .layout-studio .layout-workspace {
    grid-template-columns: 1fr;
    grid-template-areas:
      "tools"
      "stage"
      "props";
  }
}

@media (max-width: 768px) {
  .page {
    padding: 1rem 0.9rem 1.5rem;
  }

  .page-header h1,
  .page-header .page-title {
    font-size: 1.4rem;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .kpi-strip,
  .ps-kpi,
  .bell-ops-metrics {
    grid-template-columns: 1fr 1fr;
  }
}

.signage-ops {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.signage-ops-wide {
  grid-column: 1 / -1;
}

@media (max-width: 480px) {
  .kpi-strip,
  .ps-kpi,
  .bell-ops-metrics {
    grid-template-columns: 1fr;
  }
}

.kpi-strip.is-six {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

html.sidebar-collapsed .app-shell {
  grid-template-columns: 68px 1fr;
}

html.sidebar-collapsed .sidebar {
  width: 68px;
  min-width: 68px;
}

html.sidebar-collapsed .brand-copy,
html.sidebar-collapsed .nav-label,
html.sidebar-collapsed .nav-section,
html.sidebar-collapsed .sidebar-user-meta,
html.sidebar-collapsed .nav-more-items {
  display: none;
}

html.sidebar-collapsed .nav-item,
html.sidebar-collapsed .sidebar-collapse {
  justify-content: center;
  padding: 9px;
  gap: 0;
}

html.sidebar-collapsed .nav-item.is-active::before {
  display: none;
}

html.sidebar-collapsed .sidebar-brand {
  justify-content: center;
  padding: 0;
}

html.sidebar-collapsed .sidebar-user {
  justify-content: center;
}

.nav-label {
  flex: 1;
  min-width: 0;
}

.nav-more {
  margin-top: 8px;
}

.nav-more-toggle {
  list-style: none;
  cursor: pointer;
  width: 100%;
}

.nav-more-toggle::-webkit-details-marker {
  display: none;
}

.nav-more-items {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-inline-start: 8px;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  margin-bottom: 6px;
}

.sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #5d5fef, #8b5cf6);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.sidebar-user-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-user-meta strong {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-meta span {
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
  margin-top: 1px;
}

.sidebar-collapse {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
}

.sidebar-collapse:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

html.sidebar-collapsed .sidebar-collapse-ico {
  transform: scaleX(-1);
}

.sidebar-foot {
  padding: 10px 8px;
  background: transparent;
}

.sidebar-tenant,
.sidebar-version,
.sidebar-logout {
  display: none;
}

.topbar {
  padding: 0 28px;
  min-height: 64px;
  height: 64px;
  background: #fff;
}

.topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 220px;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text-subtle);
}

.topbar-search input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: 13px;
  outline: none;
}

.topbar-health {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}

.topbar-health.is-ok {
  background: #d1fae5;
  color: #065f46;
}

.topbar-health.is-warn {
  background: #fef3c7;
  color: #92400e;
}

.topbar-health-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.icon-btn {
  position: relative;
}

.icon-btn-badge {
  position: absolute;
  top: 5px;
  inset-inline-end: 5px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 10px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
}

.ps-mod-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 18px;
  font-size: 14px;
  font-weight: 700;
}

.ps-mod-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.ps-mod-ico {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
}

.ps-mod-ico.is-signage {
  background: #eeeeff;
  color: #5d5fef;
}

.ps-mod-ico.is-bell {
  background: #fef3c7;
  color: #f59e0b;
}

.ps-mod-label[data-dash-module="bell"] {
  color: #92400e;
}

.ps-mod-label[data-dash-module="signage"] {
  color: var(--color-primary-text);
}

.ps-dash-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  background: transparent;
}

.ps-dash-section-head h2 {
  margin: 0;
  font-family: var(--font-display, "Rubik", sans-serif);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
}

.ps-system-status,
.ps-bell-today {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
}

.ps-system-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 216px);
  gap: 10px;
  align-items: start;
  justify-content: start;
}

.ps-system-status-item {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 216px;
  max-width: 100%;
  min-height: 56px;
  padding: 11px 14px;
  background: #f1f5f9;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.ps-system-status-item:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
}

.ps-system-status-ico {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--color-border);
  display: grid;
  place-items: center;
  color: var(--color-text-subtle);
}

.ps-system-status-dot {
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #f1f5f9;
  background: #94a3b8;
}

.ps-system-status-dot.is-online { background: #10b981; }
.ps-system-status-dot.is-offline { background: #ef4444; }
.ps-system-status-dot.is-warning { background: #f59e0b; }

.ps-system-status-meta {
  min-width: 0;
  flex: 1;
}

.ps-system-status-name {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-system-status-sub {
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--color-text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-bell-today {
  overflow: hidden;
}

.ps-bell-today-track {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 0;
}

.ps-bell-today-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ps-bell-today-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #f1f5f9;
  z-index: 0;
  pointer-events: none;
}

html[dir="rtl"] .ps-bell-today-item:not(:last-child)::after,
[dir="rtl"] .ps-bell-today-item:not(:last-child)::after {
  right: 50%;
  left: auto;
}

html[dir="ltr"] .ps-bell-today-item:not(:last-child)::after,
[dir="ltr"] .ps-bell-today-item:not(:last-child)::after {
  left: 50%;
  right: auto;
}

.ps-bell-today-item.is-done:not(:last-child)::after {
  background: #10b981;
}

.ps-bell-today-mark {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  margin: 0 auto 8px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: #f1f5f9;
  display: grid;
  place-items: center;
  color: #10b981;
}

.ps-bell-today-item.is-done .ps-bell-today-mark {
  background: #d1fae5;
  border-color: #10b981;
}

.ps-bell-today-item.is-next .ps-bell-today-mark,
.ps-bell-today-item.is-current .ps-bell-today-mark {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.ps-bell-today-time {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-text-subtle);
}

.ps-bell-today-item.is-next .ps-bell-today-time,
.ps-bell-today-item.is-current .ps-bell-today-time {
  color: var(--color-primary);
  font-weight: 700;
}

.ps-bell-today-label {
  margin-top: 2px;
  max-width: 100%;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-bell-today-item.is-next .ps-bell-today-label,
.ps-bell-today-item.is-current .ps-bell-today-label {
  color: var(--color-primary-text);
  font-weight: 600;
}

.card-body.is-flush {
  padding: 0;
}

.ps-dash-row {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 20px;
  align-items: start;
}

.ps-dash-row.is-split {
  grid-template-columns: 1fr 1fr;
}

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

.ps-table th {
  padding: 10px 20px;
  text-align: start;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-subtle);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.ps-table td {
  padding: 13px 20px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--color-border-light);
}

.screen-card-preview {
  aspect-ratio: 16 / 9;
  border-radius: 10px 10px 0 0;
  background:
    linear-gradient(135deg, rgba(93, 95, 239, 0.16), rgba(139, 92, 246, 0.08)),
    repeating-linear-gradient(90deg, #e2e8f0 0 12px, transparent 12px 24px);
  display: grid;
  place-items: center;
  color: var(--color-text-subtle);
  font-size: 12px;
  font-weight: 600;
}

a.catalog-card {
  text-decoration: none;
  color: inherit;
}

.catalog-card.is-screen {
  padding: 0;
  overflow: hidden;
  gap: 0;
}

.catalog-card.is-screen .catalog-card-head,
.catalog-card.is-screen .catalog-card-body,
.catalog-card.is-screen .catalog-card-actions {
  padding: 12px 14px 0;
}

.catalog-card.is-screen .catalog-card-actions {
  padding-bottom: 14px;
}

.ps-toolbar.is-compact .form-label {
  display: none;
}

.ps-toolbar.is-compact .form-field {
  min-width: 8rem;
  flex: 1 1 8rem;
}

.media-thumb {
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #eef2ff;
  color: #5d5fef;
  font-size: 12px;
  font-weight: 700;
}

.media-thumb.is-image { background: #dbeafe; color: #1d4ed8; }
.media-thumb.is-video { background: #ede9fe; color: #6d28d9; }
.media-thumb.is-audio { background: #fef3c7; color: #b45309; }
.media-thumb img,
.catalog-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playlist-mosaic {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: linear-gradient(135deg, #5d5fef, #8b5cf6);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
}

.scheduler-shell {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  align-items: start;
}

.scheduler-modes {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
}

.scheduler-modes a,
.scheduler-modes button {
  padding: 6px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-subtle);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
}

.scheduler-modes .is-active {
  background: #fff;
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.scheduler-week,
.scheduler-day {
  display: grid;
  grid-template-columns: 56px repeat(7, minmax(0, 1fr));
  min-height: 640px;
  background:
    linear-gradient(var(--color-border-light) 1px, transparent 1px);
  background-size: 100% 48px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
}

.scheduler-day {
  grid-template-columns: 56px 1fr;
}

.scheduler-axis {
  background: var(--color-bg);
  border-inline-end: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-subtle);
}

.scheduler-axis span {
  display: block;
  height: 48px;
  padding: 4px 6px;
}

.scheduler-col {
  position: relative;
  min-height: 640px;
  border-inline-end: 1px solid var(--color-border-light);
}

.scheduler-event {
  position: absolute;
  inset-inline: 4px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #eeeeff;
  border: 1px solid #c7d2fe;
  color: #3730a3;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
}

.scheduler-event.is-off {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #64748b;
}

.ps-cal-event {
  display: block;
  margin-top: 4px;
  padding: 3px 6px;
  border-radius: 6px;
  background: #eeeeff;
  color: #3730a3;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bell-next {
  background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 100%);
  color: #fff;
  border-color: transparent;
}

.bell-next .card-header h2,
.bell-next h2,
.bell-next p,
.bell-next .form-help,
.bell-next .bell-next-meta {
  color: rgba(255, 255, 255, 0.78);
}

.bell-next-time,
.bell-next-clock {
  color: #fff;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-family: var(--font-sans);
  line-height: 1;
}

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

@media (max-width: 1280px) {
  .kpi-strip.is-six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .ps-dash-row,
  .ps-dash-row.is-split,
  .scheduler-shell,
  .exceptions-grid {
    grid-template-columns: 1fr;
  }

  .topbar-search,
  .topbar-health {
    display: none;
  }
}

@media (max-width: 768px) {
  html.sidebar-collapsed .app-shell {
    grid-template-columns: 1fr;
  }

  .ps-suspended-hero {
    padding: 20px;
  }

  .ps-suspended-hero-copy h2 {
    font-size: 22px;
  }
}

.bell-ops {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.bell-ops > .bell-next {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px;
  border-radius: 18px;
  background: linear-gradient(135deg, #0e1117 0%, #1e1b4b 100%);
}

.bell-ops-metrics {
  grid-column: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bell-ops-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bell-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bell-hero-kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.bell-hero-program {
  padding: 3px 10px;
  border-radius: 6px;
  background: #5d5fef;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
}

.bell-hero-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  margin-bottom: 8px;
}

.bell-next .bell-next-clock,
.bell-next .bell-next-time {
  font-family: var(--font-mono);
  font-size: 68px;
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1;
  color: #fff;
}

.bell-next h2 {
  margin: 8px 0 0;
  text-align: center;
  font-size: 16px;
  color: #a5b4fc;
}

.bell-hero-count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 0;
  color: #f59e0b !important;
  font-weight: 500;
}

.bell-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}

.bell-hero-meta div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.bell-hero-meta span {
  color: rgba(255, 255, 255, 0.4);
}

.bell-hero-meta strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

.bell-hero-cta {
  width: 100%;
  justify-content: center;
  padding: 12px;
}

.bell-fail-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
  padding: 14px 20px;
  border: 1.5px solid #fecaca;
  border-radius: 12px;
  background: #fef2f2;
}

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

.bell-zone-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 500;
}

.bell-zone-chip.is-online {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #065f46;
}

.bell-zone-chip.is-offline {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.bell-zone-chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.bell-ops-bottom {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
}

.bell-upcoming {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bell-upcoming-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1.5px solid transparent;
  border-radius: 10px;
}

.bell-upcoming-row.is-next {
  background: rgba(93, 95, 239, 0.06);
  border-color: rgba(93, 95, 239, 0.2);
}

.bell-upcoming-row.is-done {
  opacity: 0.55;
}

.bell-upcoming-time {
  min-width: 54px;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
}

.bell-upcoming-copy {
  flex: 1;
  min-width: 0;
}

.bell-upcoming-copy strong {
  display: block;
  font-size: 13.5px;
}

.bell-upcoming-copy span,
.bell-type {
  font-size: 11.5px;
  color: var(--color-text-subtle);
}

.bell-type {
  padding: 2px 8px;
  border-radius: 5px;
  font-weight: 600;
}

.bell-type.is-start { background: #eeeeff; color: #5d5fef; }
.bell-type.is-end { background: #fee2e2; color: #ef4444; }
.bell-type.is-break { background: #fef3c7; color: #f59e0b; }
.bell-type.is-recess { background: #d1fae5; color: #10b981; }

.bell-controller-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
}

.bell-controller-ico {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #fee2e2;
}

.bell-controller-ico.is-online {
  background: #d1fae5;
}

.bell-program-summary {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  background: #eeeeff;
}

.ps-studio-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ps-studio-title {
  font-size: 16px;
  font-weight: 700;
}

.ps-studio {
  grid-template-columns: 260px minmax(0, 1fr) 280px;
}

.ps-studio-panel {
  border-radius: 14px;
}

.ps-seq {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #eeeeff;
  color: #5d5fef;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}

.ps-playlist-item .media-thumb,
.ps-library-item .media-thumb {
  width: 42px;
  height: 42px;
  aspect-ratio: auto;
  border-radius: 8px;
  flex: 0 0 42px;
}

.media-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.6fr;
  gap: 14px;
  margin-bottom: 24px;
}

.media-summary .kpi-card {
  display: flex;
  align-items: center;
  gap: 14px;
}

.media-storage-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
}

.media-storage-bar {
  display: flex;
  height: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-border-light);
}

.media-storage-bar span { height: 100%; }
.media-storage-bar .is-video { background: #dc2626; }
.media-storage-bar .is-image { background: #7c3aed; }
.media-storage-bar .is-other { background: #ea580c; }

.media-storage-legend {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--color-text-subtle);
}

.ps-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ps-chip {
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  color: var(--color-text-muted);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
}

.ps-chip.is-active {
  background: #eeeeff;
  border-color: #c7d2fe;
  color: #3730a3;
}

.ps-modal {
  width: min(520px, 92vw);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}

.ps-modal-body {
  padding: 22px 24px;
}

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

.ps-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 40;
  width: min(380px, 92vw);
  padding: 20px 22px;
  background: #fff;
  border-inline-start: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.ps-drawer[hidden],
.fig-drawer-scrim[hidden] {
  display: none !important;
}

.ps-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

.user-table-avatar {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #5d5fef, #8b5cf6);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.school-page .ps-thumb,
.school-page .catalog-card-title {
  font-family: var(--font-sans);
}

.school-page .ps-thumb {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ecfdf5, #eeeeff);
  color: #065f46;
  font-size: 13px;
  font-weight: 700;
}

.layout-studio .layout-tool {
  justify-content: flex-start;
  border-radius: 10px;
  padding: 10px 12px;
}

@media (max-width: 1280px) {
  .bell-ops,
  .bell-ops-bottom,
  .media-summary {
    grid-template-columns: 1fr;
  }

  .bell-zone-grid,
  .bell-ops-metrics,
  .kpi-strip.is-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .ps-studio,
  .bell-zone-grid,
  .bell-ops-metrics {
    grid-template-columns: 1fr;
  }
}

.ps-ic {
  display: block;
  flex-shrink: 0;
}

.player-card-ico .ps-ic {
  color: var(--color-primary);
}

.program-card {
  min-height: 220px;
}

.program-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.program-stats > div {
  background: var(--color-bg);
  border-radius: 8px;
  padding: 10px 12px;
}

.program-stat-value {
  font-size: 18px;
  font-weight: 700;
}

.program-stat-value.is-mono,
.is-mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.badge.is-type-weekday { background: #eeeeff; color: #5d5fef; }
.badge.is-type-exam { background: #fef2f2; color: #dc2626; }
.badge.is-type-holiday { background: #fef3c7; color: #f59e0b; }
.badge.is-type-event { background: #d1fae5; color: #059669; }

.program-event .timetable-event-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.program-event-grip {
  color: var(--color-text-subtle);
}

.program-event-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5d5fef;
  flex-shrink: 0;
}

.program-event.is-break .program-event-dot { background: #f59e0b; }
.program-event.is-lesson .program-event-dot { background: #5d5fef; }
.program-event.is-announcement .program-event-dot { background: #64748b; }
.program-event.is-music .program-event-dot { background: #7c3aed; }
.program-event.is-disabled { opacity: 0.55; }

.manual-studio {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
}

.manual-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
}

.manual-main,
.manual-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.manual-quick,
.manual-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.manual-quick-btn,
.manual-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 12.5px;
}

.manual-quick-btn.is-start { background: #eeeeff; color: #5d5fef; border-color: #c7d2fe; }
.manual-quick-btn.is-end { background: #fee2e2; color: #ef4444; border-color: #fecaca; }
.manual-quick-btn.is-break { background: #fef3c7; color: #d97706; border-color: #fde68a; }

.manual-tile.is-on {
  background: #eeeeff;
  border-color: var(--color-primary);
  color: #3730a3;
  font-weight: 600;
}

.manual-tile small {
  font-size: 11px;
  color: var(--color-text-subtle);
}

.manual-trigger { text-align: center; padding: 28px 24px; }

.manual-now-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.manual-now {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 36px;
  font-weight: 700;
  margin: 6px 0 18px;
}

.manual-fire {
  width: 100%;
  min-height: 56px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
}

.manual-recent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}

.manual-recent-ico {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
}

.manual-recent-ico.is-ok { background: #d1fae5; color: #059669; }
.manual-recent-ico.is-off { background: #fee2e2; color: #dc2626; }

.sound-storage {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 22px;
  padding: 18px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.sound-storage-body { flex: 1; min-width: 0; }

.sound-storage-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 600;
}

.sound-storage-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.sound-storage.is-full {
  border-color: #fecaca;
  background: #fff8f8;
}

.sound-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sound-ico {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #eeeeff;
  color: #5d5fef;
}

.sound-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sound-actions audio { max-width: 160px; height: 32px; }

.admin-table th,
.admin-table td {
  padding: 13px 16px;
}

.template-preview-frame {
  width: 100%;
  min-height: 62vh;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #0f0f1a;
}

.screen-card-preview {
  flex-direction: column;
  gap: 8px;
}

.playlist-mosaic {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ps-toolbar.is-compact .search-input {
  width: 260px;
  max-width: 100%;
}

@media (max-width: 1024px) {
  .manual-grid,
  .manual-quick,
  .manual-tiles {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .manual-grid,
  .manual-quick,
  .manual-tiles,
  .program-stats {
    grid-template-columns: 1fr;
  }

  .ps-toolbar.is-compact .search-input {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .kpi-strip,
  .kpi-strip.is-six,
  .kpi-strip.is-four,
  .catalog-grid {
    grid-template-columns: 1fr;
  }

  .page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .sound-actions audio {
    max-width: 110px;
  }
}

.nav-item .ps-ic.nav-ico,
.nav-item-disabled .ps-ic.nav-ico,
.sidebar-collapse .ps-ic.nav-ico {
  width: 16px;
  height: 16px;
}

.page-header h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 4px;
}

.page-header-subtitle {
  font-size: 13.5px;
  color: var(--color-text-subtle);
  margin: 0;
}

.kpi-card {
  padding: 20px 20px 18px;
}

.kpi-card .kpi-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  margin-bottom: 14px;
}

.kpi-card .stat-card-value {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}

.kpi-card .stat-card-label {
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.kpi-card .stat-card-hint {
  font-size: 11px;
  color: var(--color-text-subtle);
}

@media (max-width: 768px) {
  .ps-system-status-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .ps-system-status-item {
    width: 100%;
  }

  .ps-bell-today {
    overflow-x: auto;
  }

  .ps-bell-today-track {
    min-width: 640px;
  }
}

.status-dots {
  display: flex;
  gap: 16px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-text-subtle);
}

.status-dots span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.status-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.status-dots .is-ok { color: #10b981; }
.status-dots .is-off { color: #ef4444; }
.status-dots .is-warn { color: #f59e0b; }

.player-card-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #eeeeff;
  border: 1px solid #c7d2fe;
  color: var(--color-primary);
  display: grid;
  place-items: center;
}

.player-card.is-offline .player-card-ico {
  background: #f1f5f9;
  border-color: var(--color-border);
  color: var(--color-text-subtle);
}

.player-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--color-border-light);
  background: var(--color-bg);
  padding: 10px 14px;
}

.ps-data-table {
  width: 100%;
  border-collapse: collapse;
}

.ps-data-table thead tr {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.ps-data-table th {
  padding: 11px 16px;
  text-align: start;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.ps-data-table td {
  padding: 13px 16px;
  font-size: 13px;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-light);
}

.ps-data-table tbody tr:hover {
  background: var(--color-bg);
}

.screen-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.screen-name-cell .ps-thumb-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  display: grid;
  place-items: center;
  color: var(--color-text-subtle);
  flex: 0 0 auto;
}

.ps-inline-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 3px 10px;
}

.ps-filter-tabs {
  display: flex;
  gap: 2px;
  background: var(--color-bg);
  border-radius: 8px;
  padding: 3px;
}

.ps-filter-tabs a,
.ps-filter-tabs button {
  padding: 5px 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-subtle);
  font-size: 13px;
  text-decoration: none;
}

.ps-filter-tabs .is-active {
  background: #fff;
  color: var(--color-text);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}

.ps-filter-tabs .count {
  margin-inline-start: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
}

[data-view-host][data-view="list"] .catalog-grid,
.ps-collection[data-view="list"] .catalog-grid {
  display: none;
}

[data-view-host][data-view="grid"] .ps-screens-table,
[data-view-host][data-view="grid"] .ps-players-table {
  display: none;
}

.status-dots {
  margin-bottom: 18px;
}

/* ── Figma fidelity: type / status ── */
.ps-type-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.ps-type-tag.is-sm { padding: 2px 6px; font-size: 11px; }
.ps-type-tag.is-image { background: #f5f3ff; color: #7c3aed; border: 1px solid #c4b5fd55; }
.ps-type-tag.is-video { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a555; }
.ps-type-tag.is-pdf { background: #fff7ed; color: #ea580c; border: 1px solid #fdba7455; }
.ps-type-tag.is-audio { background: #ecfeff; color: #0891b2; border: 1px solid #67e8f955; }
.ps-type-tag.is-web { background: #f0fdf4; color: #059669; border: 1px solid #6ee7b755; }

.ps-dot-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #d1fae5;
  color: #065f46;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 20px;
  padding: 3px 9px;
  white-space: nowrap;
}
.ps-dot-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  flex: 0 0 auto;
}
.ps-dot-badge.is-ready { background: #d1fae5; color: #065f46; }
.ps-dot-badge.is-ready i { background: #10b981; }
.ps-dot-badge.is-draft,
.ps-dot-badge.is-off { background: #f1f5f9; color: #64748b; }
.ps-dot-badge.is-draft i,
.ps-dot-badge.is-off i { background: #94a3b8; }
.ps-dot-badge.is-warn { background: #fef3c7; color: #92400e; }
.ps-dot-badge.is-warn i { background: #f59e0b; }
.ps-dot-badge.is-fail { background: #fee2e2; color: #991b1b; }
.ps-dot-badge.is-fail i { background: #ef4444; }

.ps-mthumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}
.ps-mthumb.is-image { background: #f5f3ff; color: #7c3aed; border: 1px solid #c4b5fd44; }
.ps-mthumb.is-video { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a544; }
.ps-mthumb.is-pdf { background: #fff7ed; color: #ea580c; border: 1px solid #fdba7444; }
.ps-mthumb.is-audio { background: #ecfeff; color: #0891b2; border: 1px solid #67e8f944; }
.ps-mthumb.is-web { background: #f0fdf4; color: #059669; border: 1px solid #6ee7b744; }
.ps-mthumb img { width: 100%; height: 100%; object-fit: cover; }
.ps-mthumb .ps-dur {
  position: absolute;
  bottom: 5px;
  inset-inline-start: 5px;
  background: #000c;
  color: #fff;
  border-radius: 3px;
  font-size: 9px;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  padding: 1px 4px;
}

/* ── Media library ── */
.fig-media-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.6fr;
  gap: 14px;
  margin-bottom: 24px;
}
.fig-media-summary .kpi-card {
  padding: 18px 20px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.fig-media-summary .media-storage {
  display: block;
  padding: 18px 22px;
}
.fig-media-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.fig-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  padding: 8px 14px;
  flex: 1 1 220px;
  max-width: 280px;
  color: var(--color-text-subtle);
}
.fig-search input {
  border: 0;
  background: transparent;
  font-size: 13px;
  color: var(--color-text);
  outline: none;
  flex: 1;
  min-width: 0;
  width: 100%;
}
.fig-select-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  padding: 7px 12px;
  color: var(--color-text-muted);
  font-size: 13px;
}
.fig-select-chip select {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 13px;
  outline: none;
  cursor: pointer;
}
.fig-type-tabs.is-inline { margin: 0; }
.ps-toolbar-actions.is-end { margin-inline-start: auto; }
.fig-tpl-table-wrap.is-flush,
.fig-media-table-wrap.is-flush,
.fig-pl-table-wrap.is-flush,
.fig-prog-table-wrap.is-flush {
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
}

.fig-type-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.fig-type-tabs a,
.fig-type-tabs button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 9px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.fig-type-tabs a.is-active,
.fig-type-tabs button.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-dim, #eeeeff);
  color: var(--color-primary-text, #3730a3);
  font-weight: 600;
}
.fig-type-tabs .count {
  font-size: 11px;
  padding: 0 5px;
  border-radius: 4px;
  min-width: 18px;
  text-align: center;
  background: var(--color-bg);
  color: var(--color-text-subtle);
  font-weight: 500;
}
.fig-type-tabs a.is-active .count {
  background: color-mix(in srgb, var(--color-primary) 13%, transparent);
  color: var(--color-primary-text, #3730a3);
}

.fig-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}
.fig-media-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s;
}
.fig-media-card:hover { border-color: #c7d2fe; box-shadow: var(--shadow-md, 0 8px 24px #0f172a12); }
.fig-media-card.is-off { opacity: .75; }
.fig-media-hero {
  height: 136px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.fig-media-hero.is-image { background: #f5f3ff; color: #7c3aed; }
.fig-media-hero.is-video { background: #fef2f2; color: #dc2626; }
.fig-media-hero.is-pdf { background: #fff7ed; color: #ea580c; }
.fig-media-hero img { width: 100%; height: 100%; object-fit: cover; }
.fig-media-hover {
  position: absolute;
  inset: 0;
  background: #0f172a22;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.fig-media-card:hover .fig-media-hover { display: flex; }
.fig-media-hover .icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #ffffffee;
  border: 0;
}
.fig-media-body { padding: 12px 14px 14px; }
.fig-media-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fig-media-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.fig-media-size {
  font-size: 11.5px;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  color: var(--color-text-subtle);
}
.fig-media-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--color-border-light, #eef2f6);
}

.fig-media-table { width: 100%; border-collapse: collapse; }
.fig-media-table th {
  padding: 10px 14px;
  text-align: start;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-subtle);
  white-space: nowrap;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.fig-media-table td { padding: 11px 14px; }
.fig-media-table tbody tr { border-bottom: 1px solid var(--color-border-light, #eef2f6); cursor: pointer; }
.fig-media-table tbody tr:hover { background: var(--color-bg); }
.fig-name-cell { display: flex; align-items: center; gap: 12px; }

.ps-drawer.fig-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: auto;
  inset-inline-end: 0;
  width: min(420px, 92vw);
  background: var(--color-surface);
  z-index: 40;
  box-shadow: -4px 0 40px #0f172a18;
  display: flex;
  flex-direction: column;
}
html[dir="rtl"] .ps-drawer.fig-drawer { box-shadow: 4px 0 40px #0f172a18; }
.fig-drawer-scrim {
  position: fixed;
  inset: 0;
  inset-inline-start: var(--sidebar-width);
  background: #0f172a60;
  z-index: 39;
}
html.sidebar-collapsed .fig-drawer-scrim {
  inset-inline-start: 68px;
}
.fig-drawer-hero {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fig-drawer-hero.is-image { background: #f5f3ff; color: #7c3aed; }
.fig-drawer-hero.is-video { background: #fef2f2; color: #dc2626; }
.fig-drawer-hero.is-pdf { background: #fff7ed; color: #ea580c; }
.fig-drawer-hero img { width: 100%; height: 100%; object-fit: cover; }
.fig-drawer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  padding: 22px;
}
.fig-drawer-grid .lbl { font-size: 11px; color: var(--color-text-subtle); margin-bottom: 4px; }
.fig-drawer-grid .val { font-size: 13.5px; font-weight: 500; color: var(--color-text); }
.fig-drawer-grid .val.is-mono { font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); }
.fig-drawer-actions {
  border-top: 1px solid var(--color-border);
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.fig-drop {
  margin: 20px 24px 0;
  border: 2px dashed var(--color-border);
  border-radius: 14px;
  padding: 36px 24px;
  text-align: center;
  background: var(--color-bg);
  cursor: pointer;
}
.fig-drop:hover,
.fig-drop.is-over { border-color: var(--color-primary); background: var(--color-primary-dim, #eeeeff); }
.ps-modal.fig-upload { width: min(540px, 92vw); border-radius: 18px; padding: 0; }

[data-view-host][data-view="list"] .fig-media-grid,
[data-view-host][data-view="list"] .fig-pl-grid,
[data-view-host][data-view="list"] .fig-tpl-grid,
[data-view-host][data-view="list"] .fig-prog-grid { display: none; }
[data-view-host][data-view="grid"] .fig-media-table-wrap,
[data-view-host][data-view="grid"] .fig-pl-table-wrap,
[data-view-host][data-view="grid"] .fig-tpl-table-wrap,
[data-view-host][data-view="grid"] .fig-prog-table-wrap { display: none; }

/* ── Playlists ── */
.fig-pl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.fig-pl-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color .16s, box-shadow .16s;
}
.fig-pl-card:hover { border-color: #c7d2fe; box-shadow: var(--shadow-md, 0 8px 24px #0f172a12); }
.fig-pl-mosaic {
  height: 90px;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  position: relative;
}
.fig-pl-mosaic .ps-mthumb { width: 46px; height: 46px; border-radius: 8px; }
.fig-pl-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--color-text-subtle); font-size: 11.5px; }
.fig-pl-hover {
  position: absolute;
  inset: 0;
  background: #0f172a18;
  display: none;
  align-items: center;
  justify-content: center;
}
.fig-pl-card:hover .fig-pl-hover { display: flex; }
.fig-pl-body { padding: 14px 16px 16px; }
.fig-pl-title { font-size: 14px; font-weight: 600; color: var(--color-text); }
.fig-pl-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--color-text-subtle); }
.fig-pl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-light, #eef2f6);
}

/* ── Playlist editor studio ── */
.page:has(.fig-studio-page) .page-header { display: none; }
.page:has(.fig-studio-page) { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.fig-studio-page { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.fig-studio-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: 56px;
  flex-shrink: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.fig-studio-bar .fig-studio-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  border: 0;
  outline: none;
  background: transparent;
  min-width: 180px;
  max-width: 320px;
}
.fig-studio-meta { font-size: 12.5px; color: var(--color-text-subtle); margin-inline-start: auto; }
.fig-studio-meta b { font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); color: var(--color-text-muted); font-weight: 500; }
.fig-studio {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.fig-studio-props,
.fig-studio-lib {
  width: 280px;
  flex-shrink: 0;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fig-studio-props { width: 280px; border-inline-end: 1px solid var(--color-border); }
.fig-studio-lib { width: 260px; border-inline-start: 1px solid var(--color-border); }
.fig-studio-seq {
  flex: 1;
  overflow: auto;
  background: var(--color-bg);
  padding: 16px 20px;
  min-width: 0;
}
.fig-panel-head {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--color-border-light, #eef2f6);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.fig-panel-body { flex: 1; overflow: auto; padding: 14px 16px; }
.fig-prop-group { margin-bottom: 18px; }
.fig-prop-group > label,
.fig-prop-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 9px;
}
.fig-seq-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  margin-bottom: 4px;
  background: transparent;
}
.fig-seq-item.is-on {
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 19%, transparent);
}
.fig-seq-num {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  color: var(--color-text-subtle);
  flex: 0 0 auto;
}
.fig-seq-item.is-on .fig-seq-num { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.fig-seq-dur {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  color: var(--color-text-muted);
  min-width: 36px;
  text-align: center;
}
.fig-lib-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.fig-lib-item:hover { background: var(--color-bg); border-color: var(--color-border); }
.fig-lib-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.fig-lib-chips a,
.fig-lib-chips button {
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-subtle);
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
}
.fig-lib-chips .is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-dim, #eeeeff);
  color: var(--color-primary-text, #3730a3);
  font-weight: 600;
}
.fig-empty-drop {
  min-height: 320px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 2px dashed var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  text-align: center;
  padding: 24px;
}
.fig-studio-tabs { display: none; }

/* ── Scheduler ── */
.fig-sched-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.fig-sched-nav { display: flex; align-items: center; gap: 6px; }
.fig-sched-label { font-size: 15px; font-weight: 700; color: var(--color-text); min-width: 180px; }
.scheduler-modes {
  display: flex;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}
.scheduler-modes a {
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--color-text-subtle);
  text-decoration: none;
}
.scheduler-modes a.is-active {
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.scheduler-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}
.scheduler-week,
.scheduler-day {
  --hour-px: 72px;
  display: grid;
  position: relative;
}
.scheduler-head-day {
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  text-align: center;
}
.scheduler-head-day b { display: block; font-size: 15px; color: var(--color-text); }
.scheduler-head-day.is-today { color: var(--color-primary); }
.scheduler-week { grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.scheduler-day { grid-template-columns: 56px minmax(0, 1fr); }
.scheduler-head {
  display: contents;
}
.scheduler-head span {
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  text-align: center;
}
.scheduler-axis {
  display: flex;
  flex-direction: column;
}
.scheduler-axis span {
  height: var(--hour-px);
  font-size: 11px;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  color: var(--color-text-subtle);
  border-top: 1px solid var(--color-border-light, #eef2f6);
  padding-top: 4px;
}
.scheduler-col {
  position: relative;
  height: calc(16 * var(--hour-px));
  border-inline-start: 1px solid var(--color-border-light, #eef2f6);
  background-image: repeating-linear-gradient(to bottom, transparent, transparent calc(var(--hour-px) - 1px), var(--color-border-light, #eef2f6) var(--hour-px));
}
.scheduler-event {
  position: absolute;
  inset-inline: 4px;
  border-radius: 8px;
  padding: 6px 8px;
  background: var(--color-primary-dim, #eeeeff);
  color: var(--color-primary-text, #3730a3);
  border: 1px solid #c7d2fe;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-decoration: none;
  z-index: 1;
}
.scheduler-event.is-off { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.scheduler-event .form-help { color: inherit; opacity: .75; font-weight: 400; }
.scheduler-now {
  position: absolute;
  inset-inline: 56px 0;
  height: 2px;
  background: #ef4444;
  z-index: 3;
  pointer-events: none;
}
.scheduler-now::before {
  content: "";
  position: absolute;
  inset-inline-start: -5px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
}
.fig-upcoming { padding: 18px 16px; }
.fig-upcoming h3 { margin: 0 0 14px; font-size: 14px; }
.fig-up-item {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-light, #eef2f6);
}
.fig-up-time {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  min-width: 44px;
}

/* ── Templates ── */
.fig-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.fig-tpl-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.fig-tpl-card:hover { border-color: #c7d2fe; box-shadow: var(--shadow-md, 0 8px 24px #0f172a12); }
.fig-tpl-preview {
  aspect-ratio: 16 / 9;
  background: #0f172a;
  display: grid;
  place-items: center;
  color: #94a3b8;
  position: relative;
  overflow: hidden;
}
.fig-tpl-card.is-portrait .fig-tpl-preview { aspect-ratio: 9 / 16; max-height: 220px; margin: 0 auto; width: 42%; }
.fig-tpl-preview iframe { width: 200%; height: 200%; transform: scale(.5); transform-origin: top left; border: 0; pointer-events: none; }
.fig-tpl-badge {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 5px;
  background: #dbeafe;
  color: #1e40af;
  font-weight: 600;
}
.fig-tpl-hover {
  position: absolute;
  inset: 0;
  background: #0f172a40;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.fig-tpl-card:hover .fig-tpl-hover { display: flex; }
.fig-tpl-body { padding: 14px 16px 16px; }
.fig-tpl-title { font-size: 14px; font-weight: 600; }
.fig-tpl-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--color-text-subtle); }

/* ── Bell programs ── */
.fig-prog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.fig-prog-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.fig-prog-card.is-off { opacity: .7; }
.fig-prog-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; gap: 10px; }
.fig-prog-name { font-size: 14px; font-weight: 700; color: var(--color-text); margin-bottom: 5px; }
.fig-prog-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fig-prog-desc { font-size: 12.5px; color: var(--color-text-subtle); margin-bottom: 14px; }
.fig-prog-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fig-prog-stat { background: var(--color-bg); border-radius: 8px; padding: 10px 12px; }
.fig-prog-stat .lbl { font-size: 11px; color: var(--color-text-subtle); margin-bottom: 3px; }
.fig-prog-stat .val { font-size: 18px; font-weight: 700; color: var(--color-text); }
.fig-prog-stat .val.is-mono { font-size: 12px; font-weight: 600; font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); }

.program-event {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  margin-bottom: 4px;
}
.program-event.is-disabled { opacity: .55; background: #f8fafc; }
.program-event-grip { color: var(--color-text-subtle); cursor: grab; }
.program-event-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5d5fef;
  flex: 0 0 auto;
}
.program-event.is-lesson .program-event-dot { background: #5d5fef; }
.program-event.is-break .program-event-dot { background: #f59e0b; }
.program-event.is-bell .program-event-dot { background: #10b981; }
.program-event.is-announcement .program-event-dot { background: #64748b; }
.program-event.is-music .program-event-dot { background: #0891b2; }
.timetable-event-time {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 13px;
  font-weight: 600;
  min-width: 42px;
}
.timetable-event-row { display: flex; align-items: center; gap: 10px; }

.timetable-cubes .program-event {
  margin-bottom: 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

.timetable-cubes .timetable-event .timetable-event-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  padding: 0;
}

.timetable-cubes .timetable-event-time {
  min-width: 0;
  font-size: 1.35rem;
  font-weight: 700;
}

/* ── School admin ── */
.school-page .catalog-card,
.fig-school-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.lesson-program-page .lesson-program-board {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
}
.lesson-program-page .timetable-day-tabs { margin-bottom: 16px; }

/* ── Admin tables ── */
.admin-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary-dim, #eeeeff);
  color: var(--color-primary-text, #3730a3);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}
.ps-data-table tbody tr.is-on { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.role-badge {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 5px;
  background: #eeeeff;
  color: #5d5fef;
  font-size: 11.5px;
  font-weight: 600;
}

@media (max-width: 1280px) {
  .fig-media-summary { grid-template-columns: repeat(3, 1fr); }
  .fig-media-summary .media-storage { grid-column: 1 / -1; }
  .scheduler-shell { grid-template-columns: 1fr; }
  .player-fleet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .fig-studio { flex-direction: column; overflow: auto; }
  .fig-studio-props,
  .fig-studio-lib { width: 100%; border: 0; border-bottom: 1px solid var(--color-border); max-height: none; }
  .fig-studio-tabs { display: flex; gap: 6px; padding: 10px 16px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
  .fig-studio-tabs button {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: transparent;
    font-size: 13px;
  }
  .fig-studio-tabs button.is-active { background: var(--color-primary-dim, #eeeeff); border-color: var(--color-primary); color: var(--color-primary-text, #3730a3); font-weight: 600; }
  .fig-studio[data-pane="props"] .fig-studio-seq,
  .fig-studio[data-pane="props"] .fig-studio-lib,
  .fig-studio[data-pane="seq"] .fig-studio-props,
  .fig-studio[data-pane="seq"] .fig-studio-lib,
  .fig-studio[data-pane="lib"] .fig-studio-props,
  .fig-studio[data-pane="lib"] .fig-studio-seq { display: none; }
  .layout-studio .layout-workspace { grid-template-columns: 1fr !important; }
}
@media (max-width: 960px) {
  .fig-drawer-scrim,
  html.sidebar-collapsed .fig-drawer-scrim {
    inset-inline-start: 0;
  }
}
@media (max-width: 768px) {
  .fig-media-summary { grid-template-columns: 1fr 1fr; }
  .player-fleet { grid-template-columns: 1fr 1fr; }
  .fig-pl-grid,
  .fig-prog-grid,
  .fig-tpl-grid { grid-template-columns: 1fr; }
  .fig-sched-label { min-width: 0; }
  .scheduler-week { grid-template-columns: 40px repeat(7, minmax(72px, 1fr)); min-width: 640px; }
}
@media (max-width: 390px) {
  .fig-media-summary { grid-template-columns: 1fr; }
  .fig-studio-bar { height: auto; min-height: 56px; flex-wrap: wrap; padding: 8px 12px; }
  .ps-drawer.fig-drawer { width: 100vw; }
}

/* Bell Dashboard — Figma Make BellDashboard.tsx fidelity */
@keyframes pulse-status {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.bell-dash {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1300px;
  margin-inline: auto;
  gap: 20px;
}

.bell-dash .empty-state {
  text-align: center;
  padding: 18px 8px;
}

.bell-dash .empty-state h2 {
  margin: 0 0 6px;
  font-size: 16px;
  color: inherit;
}

.bell-dash-fail {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border: 1.5px solid #fecaca;
  border-radius: 12px;
  background: #fef2f2;
}

.bell-dash-fail-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #fee2e2;
  flex-shrink: 0;
}

.bell-dash-fail strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #991b1b;
}

.bell-dash-fail p {
  margin: 2px 0 0;
  font-size: 12px;
  color: #ef4444;
}

.bell-dash-top {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.bell-dash-hero {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: 28px 24px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #0e1117 0%, #1e1b4b 100%);
  box-shadow: var(--shadow-lg);
  color: #fff;
}

.bell-dash-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bell-dash-hero-kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.bell-dash-hero-program {
  padding: 3px 10px;
  border-radius: 6px;
  background: #5d5fef;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
}

.bell-dash-hero-live {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.bell-dash-hero-label {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.bell-dash-hero-time {
  font-family: var(--font-mono);
  font-size: 68px;
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1;
  color: #fff;
}

.bell-dash-hero-live h2 {
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: #a5b4fc;
}

.bell-dash-hero-count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: #f59e0b;
}

.bell-dash-hero-count::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  animation: pulse-status 1.5s ease-in-out infinite;
}

.bell-dash-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 20px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  text-align: start;
}

.bell-dash-hero-meta div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.bell-dash-hero-meta span {
  color: rgba(255, 255, 255, 0.4);
}

.bell-dash-hero-meta strong {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.bell-dash-hero-cta {
  width: 100%;
  justify-content: center;
  padding: 12px;
  background: #5d5fef;
  border: none;
}

.bell-dash-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.bell-dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.bell-dash-kpi {
  min-width: 0;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.bell-dash-kpi-label,
.bell-dash-kpi-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.bell-dash-kpi-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  border-radius: 9px;
  background: #eeeeff;
  color: #5d5fef;
}

.bell-dash-kpi-ico .ps-ic,
.bell-dash-kpi-ico svg {
  width: 17px;
  height: 17px;
}

.bell-dash-kpi-ico.is-green { background: #d1fae5; color: #059669; }
.bell-dash-kpi-ico.is-amber { background: #fef3c7; color: #f59e0b; }
.bell-dash-kpi-ico.is-red { background: #fee2e2; color: #ef4444; }

.bell-dash-kpi-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: #0f172a;
}

.bell-dash-kpi-label {
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
}

.bell-dash-kpi-sub {
  margin-top: 1px;
  font-size: 11px;
  color: #94a3b8;
}

.bell-dash-panel {
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.bell-dash-schedule,
.bell-dash-controllers,
.bell-dash-program-panel {
  padding: 20px 24px;
}

.bell-dash-program-panel .bell-dash-program {
  margin-top: 0;
}

.bell-dash-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: transparent;
}

.bell-dash-sec-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: #0f172a;
}

.bell-dash-sec-head span,
.bell-dash-sec-head .btn {
  font-size: 12px;
  color: #94a3b8;
}

.bell-dash-zones {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.bell-dash-zone {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 500;
}

.bell-dash-zone > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bell-dash-zone.is-online {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #065f46;
}

.bell-dash-zone.is-offline {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.bell-dash-zone-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

.bell-dash-zone.is-online .bell-dash-zone-dot {
  background: #10b981;
  animation: pulse-status 2.5s ease-in-out infinite;
}

.bell-dash-zone.is-offline .bell-dash-zone-dot {
  background: #ef4444;
}

.bell-dash-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.bell-dash-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bell-dash-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  min-height: 0;
  margin-bottom: 6px;
  padding: 12px 14px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: transparent;
}

.bell-dash-row.is-next {
  background: rgba(93, 95, 239, 0.03);
  border-color: rgba(93, 95, 239, 0.2);
}

.bell-dash-row.is-done {
  opacity: 0.55;
}

.bell-dash-row-time {
  flex: 0 0 54px;
  min-width: 54px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #0f172a;
}

.bell-dash-row.is-next .bell-dash-row-time {
  color: #5d5fef;
}

.bell-dash-row-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #5d5fef;
}

.bell-dash-row-dot.is-start { background: #5d5fef; }
.bell-dash-row-dot.is-end { background: #ef4444; }
.bell-dash-row-dot.is-break { background: #f59e0b; }
.bell-dash-row-dot.is-recess { background: #10b981; }

.bell-dash-row.is-next .bell-dash-row-dot {
  animation: pulse-status 1.5s ease-in-out infinite;
}

.bell-dash-row-copy {
  flex: 1;
  min-width: 0;
}

.bell-dash-row-copy strong {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.25;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bell-dash-row.is-next .bell-dash-row-copy strong {
  font-weight: 700;
}

.bell-dash-row-copy span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.2;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bell-dash-type {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
}

.bell-dash-type.is-start { background: #eeeeff; color: #5d5fef; }
.bell-dash-type.is-end { background: #fee2e2; color: #ef4444; }
.bell-dash-type.is-break { background: #fef3c7; color: #f59e0b; }
.bell-dash-type.is-recess { background: #d1fae5; color: #10b981; }

.bell-dash-next {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 5px;
  background: #eeeeff;
  color: #3730a3;
  font-size: 11px;
  font-weight: 700;
}

.bell-dash-ctrl {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 12px 14px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.bell-dash-ctrl-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  flex-shrink: 0;
  background: #fee2e2;
}

.bell-dash-ctrl-ico.is-online {
  background: #d1fae5;
}

.bell-dash-ctrl-copy {
  flex: 1;
  min-width: 0;
}

.bell-dash-ctrl-copy strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bell-dash-ctrl-copy span {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  color: #94a3b8;
  font-family: var(--font-mono);
}

.bell-dash-program {
  margin-top: 16px;
  padding: 14px 16px;
  background: #eeeeff;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
}

.bell-dash-program-kicker {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #94a3b8;
}

.bell-dash-program strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #3730a3;
}

.bell-dash-program p {
  margin: 3px 0 0;
  font-size: 12px;
  color: #3730a3;
  opacity: 0.7;
}

.bell-dash-program .btn {
  margin-top: 10px;
}

@media (max-width: 1440px) {
  .bell-dash-top {
    grid-template-columns: 340px minmax(0, 1fr);
  }

  .bell-dash-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1366px) {
  .bell-dash-top {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .bell-dash-bottom {
    grid-template-columns: minmax(0, 1fr);
  }

  .bell-dash-kpis,
  .bell-dash-zones {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .bell-dash-hero-time {
    font-size: 56px;
  }
}

@media (max-width: 1100px) {
  .bell-dash-top,
  .bell-dash-bottom {
    grid-template-columns: 1fr;
  }

  .bell-dash-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .bell-dash-zones {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .bell-dash-kpis,
  .bell-dash-zones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bell-dash-hero-time {
    font-size: 48px;
  }

  .bell-dash-row {
    flex-wrap: wrap;
  }
}

.ca-head {
  align-items: center;
}

.ca-title {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.ca-title-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  flex: 0 0 auto;
}

.ca-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ca-online-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.ca-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
}

.ca-live.is-on { background: #10b981; }
.ca-live.is-off { background: #ef4444; }

.ca-kpi {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.ca-kpi-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.ca-kpi-card .kpi-ico {
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 9px;
}

.ca-kpi-card .stat-card-value {
  font-size: 22px;
  margin: 0 0 2px;
}

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

.ca-toolbar .search-input,
.ca-toolbar .form-select {
  width: auto !important;
  max-width: none;
}

.ca-toolbar .search-input {
  flex: 1 1 16rem;
  min-width: 14rem;
  max-width: 22rem;
}

.ca-toolbar .form-select {
  flex: 0 0 10.5rem;
  min-width: 10.5rem;
}

.ca-toolbar .ps-toolbar-actions {
  flex: 1 0 auto;
}

.ca-switch {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
}

.ca-switch button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-subtle);
  font-size: 12.5px;
  font-weight: 600;
}

.ca-switch button.is-active {
  background: var(--color-text);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

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

.ca-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start-width: 3px;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.ca-card.is-offline { border-inline-start-color: #ef4444; }
.ca-card.is-displaying { border-inline-start-color: #7c3aed; }
.ca-card.is-teacheractive { border-inline-start-color: #2563eb; }
.ca-card.is-waitingforidle { border-inline-start-color: #d97706; }
.ca-card.is-suppressedbyteacher { border-inline-start-color: #64748b; }
.ca-card.is-unassigned { border-inline-start-color: #94a3b8; }
.ca-card.is-needsattention { border-inline-start-color: #ea580c; }
.ca-card.is-online { border-inline-start-color: #10b981; }

.ca-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ca-card-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.ca-card-id {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ca-host {
  color: var(--color-text-muted);
  font-size: 12.5px;
  font-weight: 600;
  unicode-bidi: isolate;
}

.ca-place {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-subtle);
  font-size: 12px;
}

.ca-card-body {
  min-height: 88px;
}

.ca-label {
  color: var(--color-text-subtle);
  font-size: 11px;
  font-weight: 700;
}

.ca-strong {
  margin-top: 2px;
  font-size: 14.5px;
  font-weight: 700;
}

.ca-time,
.ca-timer {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.ca-timer {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
}

.ca-lessons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ca-lesson.is-now {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--color-primary-soft);
}

.ca-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.ca-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
  margin-top: auto;
}

.ca-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.ca-badge.is-online { background: #d1fae5; color: #047857; }
.ca-badge.is-offline { background: #fee2e2; color: #b91c1c; }
.ca-badge.is-displaying { background: #ede9fe; color: #6d28d9; }
.ca-badge.is-teacher { background: #dbeafe; color: #1d4ed8; }
.ca-badge.is-waiting { background: #fef3c7; color: #b45309; }
.ca-badge.is-suppressed { background: #e2e8f0; color: #334155; }
.ca-badge.is-unassigned { background: #f1f5f9; color: #64748b; }
.ca-badge.is-attention { background: #ffedd5; color: #c2410c; }

.ca-table,
.ca-map { display: none; }

[data-classroom-views][data-view="table"] .ca-grid,
[data-classroom-views][data-view="table"] .ca-map,
[data-classroom-views][data-view="map"] .ca-grid,
[data-classroom-views][data-view="map"] .ca-table,
[data-classroom-views][data-view="cards"] .ca-table,
[data-classroom-views][data-view="cards"] .ca-map { display: none; }

[data-classroom-views][data-view="table"] .ca-table,
[data-classroom-views][data-view="map"] .ca-map,
[data-classroom-views][data-view="cards"] .ca-grid { display: grid; }

[data-classroom-views][data-view="table"] .ca-table { display: block; }

.ca-table-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ca-map {
  display: none;
  gap: 22px;
}

[data-classroom-views][data-view="map"] .ca-map {
  display: flex;
  flex-direction: column;
}

.ca-map-building h2 {
  margin: 0 0 10px;
  font-size: 16px;
}

.ca-map-floor h3 {
  margin: 0 0 8px;
  color: var(--color-text-muted);
  font-size: 13px;
}

.ca-map-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.ca-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-inline-start-width: 3px;
  border-radius: 12px;
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
}

.ca-tile.is-offline { border-inline-start-color: #ef4444; }
.ca-tile.is-displaying { border-inline-start-color: #7c3aed; }
.ca-tile.is-teacheractive { border-inline-start-color: #2563eb; }
.ca-tile.is-waitingforidle { border-inline-start-color: #d97706; }
.ca-tile.is-suppressedbyteacher { border-inline-start-color: #64748b; }
.ca-tile.is-unassigned { border-inline-start-color: #94a3b8; }
.ca-tile.is-needsattention { border-inline-start-color: #ea580c; }
.ca-tile.is-online { border-inline-start-color: #10b981; }

.ca-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ca-tile span {
  color: var(--color-text-muted);
  font-size: 12px;
}

.ca-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ca-panel h2 {
  margin: 0 0 12px;
  font-size: 16px;
}

.ca-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
}

.ca-tl-item {
  display: grid;
  grid-template-rows: auto 8px auto;
  justify-items: center;
  flex: 1 1 0;
  min-width: 72px;
  gap: 6px;
  font-size: 11px;
  text-align: center;
}

.ca-tl-bar {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
}

.ca-tl-item.is-lesson .ca-tl-bar { background: #c7d2fe; }
.ca-tl-item.is-break .ca-tl-bar { background: #fde68a; }
.ca-tl-item.is-now .ca-tl-bar { background: var(--color-primary); }
.ca-tl-time { font-variant-numeric: tabular-nums; color: var(--color-text-subtle); }
.ca-tl-now {
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 700;
}

@media (max-width: 1600px) {
  .ca-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

@media (max-width: 1180px) {
  .ca-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .ca-overview { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .ca-kpi,
  .ca-grid,
  .ca-lessons { grid-template-columns: 1fr; }
  .ca-switch { width: 100%; }
  .ca-switch button { flex: 1; }
}

.sc-board {
  display: grid;
  grid-template-rows: 96px 1fr 92px;
  min-height: 540px;
  background: #e8eef4;
  border-radius: 12px;
  overflow: hidden;
  color: #102033;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}
.sc-preview-frame[data-width="1366"] .sc-board { transform-origin: top center; }
.sc-header, .sc-footer {
  background: #0b1c2c;
  color: #f4f7fb;
  display: grid;
  grid-template-columns: 280px 1fr 1fr 240px;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
}
.sc-footer { grid-template-columns: 280px 1fr 240px; }
.sc-brand, .sc-identity, .sc-clock { display: flex; align-items: center; gap: 10px; }
.sc-brand strong, .sc-identity strong, .sc-clock strong { display: block; }
.sc-brand small, .sc-identity small, .sc-clock small { opacity: .75; }
.sc-logo { width: 28px; height: 22px; border-radius: 6px; background: #3b82f6; }
.sc-countdown {
  display: flex; align-items: center; gap: 10px;
  background: #f4f7fb; color: #1b4fd8; border-radius: 28px; padding: 8px 16px;
}
.sc-countdown strong { font-size: 22px; }
.sc-countdown-ico { width: 22px; height: 22px; border-radius: 50%; background: #1b4fd8; }
.sc-clock { justify-self: end; text-align: end; }
.sc-clock strong { font-size: 28px; }
.sc-main { display: grid; grid-template-columns: 1fr 28%; gap: 16px; padding: 16px 24px 0; min-height: 320px; }
.sc-hero {
  border-radius: 22px;
  background: linear-gradient(180deg, #c5d4e2, #e8f0e4);
  padding: 48px 36px;
  display: flex; flex-direction: column; justify-content: center;
}
.sc-school-msg { color: #1d6ef5; font-weight: 600; margin: 0 0 8px; }
.sc-hero h1 { margin: 0 0 8px; font-size: 42px; }
.sc-hero-sub { margin: 0; font-size: 18px; }
.sc-schedule { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 8px 24px #0f172a14; }
.sc-schedule header { background: #1d6ef5; color: #fff; padding: 12px 16px; font-weight: 600; }
.sc-schedule ul { list-style: none; margin: 0; padding: 0; }
.sc-schedule li { display: grid; grid-template-columns: 110px 1fr 18px; gap: 8px; align-items: center; padding: 10px 16px; }
.sc-schedule li.is-currentbreak, .sc-schedule li.is-currentlesson { background: #1d6ef5; color: #fff; }
.sc-schedule li.is-completed { color: #7a8794; }
.sc-mark { width: 12px; height: 12px; border-radius: 50%; background: #d5dee7; justify-self: end; }
.sc-schedule li.is-completed .sc-mark { background: #2e9b57; }
.sc-schedule li.is-currentbreak .sc-mark, .sc-schedule li.is-currentlesson .sc-mark { background: #fff; }
.sc-cards { display: grid; gap: 12px; padding: 16px 24px; }
.sc-cards[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
.sc-cards[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.sc-cards[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.sc-cards[data-count="1"] { grid-template-columns: 1fr; }
.sc-card { border-radius: 18px; padding: 16px; min-height: 120px; }
.sc-card h3 { margin: 0 0 6px; font-size: 16px; }
.sc-card-text { margin: 0; }
.sc-card.is-weather .sc-card-text { font-size: 32px; font-weight: 700; }
.sc-exit { border: 1.5px solid #fff; border-radius: 12px; padding: 8px 14px; text-align: center; }
.sc-exit small { display: block; opacity: .75; }
.sc-footer blockquote { margin: 0; text-align: center; }
.sc-footer cite { display: block; opacity: .75; }
.sc-thumb { display: grid; grid-template-rows: 14% 1fr 18% 12%; height: 100%; background: #d7e3ee; }
.sc-thumb-bar { background: #0b1c2c; }
.sc-thumb-body { display: grid; grid-template-columns: 1fr 28%; gap: 4px; padding: 6px; }
.sc-thumb-hero { background: linear-gradient(180deg, #9bb7a4, #c5d4e2); border-radius: 6px; }
.sc-thumb-side { background: #fff; border-radius: 6px; }
.sc-thumb-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0 6px 6px; }
.sc-thumb-cards span:nth-child(1) { background: #cfe8d2; border-radius: 4px; }
.sc-thumb-cards span:nth-child(2) { background: #ddd0f0; border-radius: 4px; }
.sc-thumb-cards span:nth-child(3) { background: #f6e3a8; border-radius: 4px; }
.sc-thumb-cards span:nth-child(4) { background: #c7e4f6; border-radius: 4px; }
.sc-preview-wrap { margin-bottom: 24px; }

.auth-app .page.auth-page {
  display: grid;
  place-items: center;
  max-width: none;
  min-height: calc(100vh - var(--topbar-height));
}

.auth-app .auth-card h1 {
  margin: 0 0 0.35rem;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
}

.player-server-url {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg);
}

.player-server-url-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.player-server-url .form-help {
  margin: 4px 0 10px;
}

.player-server-url-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.voice-layout {
  display: grid;
  grid-template-columns: minmax(20rem, 1.15fr) minmax(18rem, 0.85fr);
  gap: 1rem;
  align-items: start;
}

.voice-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.voice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.voice-actions .btn {
  min-height: 2.75rem;
  padding-inline: 1.15rem;
  font-weight: 700;
}

.voice-text {
  min-height: 12rem;
  resize: vertical;
}

.voice-player {
  width: 100%;
  margin-top: 0.75rem;
}

.voice-preview h3 {
  margin: 0 0 0.75rem;
}

@media (max-width: 900px) {
  .voice-layout,
  .voice-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

.player-server-url-value {
  display: inline-block;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 14px;
  font-weight: 600;
  direction: ltr;
  unicode-bidi: isolate;
}