/* Multi Video Manager — component styles (tokens: design-system.css) */

:focus {
  outline: none;
}

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 0;
  z-index: var(--z-a11y);
  padding: 0.55rem 0.9rem;
  border-radius: 0 0 8px 8px;
  background: var(--brand-primary, #007cba);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform 0.18s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

a:focus-visible {
  outline-color: var(--accent-text);
}

.linkish:focus-visible {
  outline-offset: 3px;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 1100px 640px at 12% -10%, var(--atmosphere-a) 0%, transparent 56%),
    radial-gradient(ellipse 900px 520px at 94% 0%, var(--atmosphere-b) 0%, transparent 50%),
    radial-gradient(ellipse 700px 420px at 50% 110%, var(--atmosphere-c) 0%, transparent 62%),
    linear-gradient(180deg, #070b12 0%, var(--bg) 42%, var(--bg-deep) 100%);
  color: var(--text);
  line-height: var(--leading-normal);
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(3.25rem + env(safe-area-inset-bottom, 0px));
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(var(--atmosphere-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--atmosphere-grid) 1px, transparent 1px);
  background-size: var(--atmosphere-grid-size) var(--atmosphere-grid-size);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 20%, transparent 75%);
}

.shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 1.75rem) 3.5rem;
  animation: shell-enter var(--duration-slow) var(--ease-out);
}

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

.app-chrome {
  position: sticky;
  top: 0;
  z-index: 100;
  margin: 0 calc(-1 * clamp(1rem, 3vw, 1.75rem));
  padding: 0 clamp(1rem, 3vw, 1.75rem);
  background:
    linear-gradient(180deg, rgba(6, 9, 15, 0.96) 0%, rgba(8, 12, 19, 0.9) 78%, transparent 100%);
  backdrop-filter: blur(var(--chrome-blur)) saturate(1.12);
  -webkit-backdrop-filter: blur(var(--chrome-blur)) saturate(1.12);
  border-bottom: 1px solid var(--border);
}

.app-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  padding: 0.85rem 0;
}

.app-header-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  flex: 1 1 240px;
}

.app-header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  border-radius: 8px;
  transition: opacity 0.2s ease;
}

.app-header-logo:hover {
  opacity: 0.88;
}

.app-header-logo-img {
  display: block;
  height: 2rem;
  width: auto;
  max-width: 7.5rem;
  object-fit: contain;
}

.app-header-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  background: var(--brand-gradient);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}

.app-header-titles {
  min-width: 0;
}

.app-header-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header-sub {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.4;
  max-width: 36rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.app-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  gap: 0.65rem;
}

/* --- System health widget (header) --- */
.health-widget-wrap {
  position: relative;
}

.health-widget {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.7rem 0.38rem 0.55rem;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.health-widget:hover,
.health-widget:focus-visible {
  border-color: var(--border-accent);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow-glow);
  outline: none;
}

.health-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.health-dot--ok {
  background: #3d9a6a;
  box-shadow: 0 0 0 2px rgba(61, 154, 106, 0.25);
}

.health-dot--warn {
  background: #d4a017;
  box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.25);
}

.health-dot--error {
  background: #c44;
  box-shadow: 0 0 0 2px rgba(204, 68, 68, 0.25);
}

.health-dot--unknown {
  background: #7a8494;
  animation: health-dot-pulse 1.4s ease-in-out infinite;
}

@keyframes health-dot-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.health-widget-label {
  white-space: nowrap;
}

.health-tooltip {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 120;
  min-width: 11.5rem;
  max-width: 16rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: rgba(14, 18, 26, 0.98);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.health-widget-wrap:hover .health-tooltip,
.health-widget-wrap:focus-within .health-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.health-tooltip-title {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.health-tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.12rem 0;
}

.health-tooltip-row span:last-child {
  font-weight: 600;
}

.health-tooltip-ok {
  color: #6ecf8a;
}

.health-tooltip-bad {
  color: #e07a7a;
}

/* --- Job monitor --- */
.job-monitor-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.72rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.job-monitor-trigger:hover,
.job-monitor-trigger:focus-visible {
  border-color: var(--border-accent);
  background: rgba(11, 126, 184, 0.12);
  box-shadow: 0 0 0 1px rgba(61, 180, 230, 0.12);
  outline: none;
}

.job-monitor-trigger-icon {
  opacity: 0.85;
}

.job-monitor-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(0, 124, 186, 0.35);
}

.job-monitor-badge.hidden {
  display: none;
}

.job-monitor-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.job-monitor-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.job-monitor-filter {
  padding: 0.38rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.22);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.job-monitor-filter:hover,
.job-monitor-filter:focus-visible {
  border-color: var(--border-accent);
  color: var(--text);
  outline: none;
}

.job-monitor-filter.active {
  border-color: rgba(61, 180, 230, 0.5);
  background: rgba(11, 126, 184, 0.2);
  color: #fff;
}

.job-monitor-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 2rem;
}

.job-monitor-empty,
.job-monitor-loading {
  margin: 0;
  padding: 1.25rem 0.85rem;
  border: 1px dashed var(--border);
  border-radius: 12px;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}

.job-monitor-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  border-style: solid;
  background: rgba(255, 255, 255, 0.02);
}

.job-monitor-loading .bt-spinner {
  width: 1.1rem;
  height: 1.1rem;
  border-width: 2px;
}

.job-monitor-list[aria-busy="true"] {
  opacity: 0.92;
}

.job-progress-track[role="progressbar"] {
  position: relative;
}

.job-progress.is-active {
  outline: none;
}

.job-progress.is-active .job-progress-track {
  box-shadow: 0 0 0 1px rgba(0, 158, 253, 0.28);
}

.job-progress.is-indeterminate .job-progress-bar,
.job-progress-bar--indeterminate {
  width: 40% !important;
  opacity: 0.65;
  animation: progress-indeterminate 1.4s ease-in-out infinite;
}

@keyframes progress-indeterminate {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(280%);
  }
}

.dl-progress-wrap.is-active {
  position: sticky;
  bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  margin-top: 0.85rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(0, 158, 253, 0.28);
  border-radius: 12px;
  background: rgba(12, 16, 24, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

button:disabled[title],
button[aria-disabled="true"][title] {
  cursor: not-allowed;
}

.results-searching {
  position: relative;
  min-height: 3.5rem;
}

.results-searching::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: rgba(8, 12, 18, 0.45);
  pointer-events: none;
}

.search-loading-banner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.75rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 0.875rem;
}

.search-loading-banner .bt-spinner {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
  flex-shrink: 0;
}

.yt-idle-hint {
  margin: 0.75rem 0 0;
}

.job-monitor-card {
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.24);
  box-shadow: var(--shadow-sm);
}

.job-monitor-card--running {
  border-color: rgba(0, 158, 253, 0.35);
  background: linear-gradient(135deg, rgba(0, 124, 186, 0.1) 0%, rgba(0, 0, 0, 0.22) 100%);
}

.job-monitor-card--completed {
  border-color: rgba(52, 211, 153, 0.28);
}

.job-monitor-card--failed {
  border-color: rgba(248, 113, 113, 0.28);
}

.job-monitor-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.55rem;
}

.job-monitor-card-meta {
  min-width: 0;
  flex: 1;
}

.job-monitor-card-id {
  display: block;
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--muted);
  word-break: break-all;
}

.job-monitor-card-title {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  word-break: break-word;
}

.job-monitor-status {
  flex-shrink: 0;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.job-monitor-status--running {
  background: rgba(0, 158, 253, 0.18);
  color: #7dd3fc;
}

.job-monitor-status--completed {
  background: rgba(52, 211, 153, 0.15);
  color: #6ee7b7;
}

.job-monitor-status--failed {
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
}

.job-monitor-card-progress {
  margin-top: 0.15rem;
}

.job-monitor-card-progress .job-progress-head {
  margin-bottom: 0.35rem;
}

.job-monitor-card-message {
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
  word-break: break-word;
}

.job-monitor-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.job-monitor-card-actions button {
  font-size: 0.78rem;
  padding: 0.35rem 0.65rem;
  min-height: 34px;
}

.job-monitor-auto-refresh {
  margin-top: 0.75rem;
}

.job-monitor-drawer .job-monitor-list {
  max-height: none;
}

/* --- System health drawer --- */
.system-drawer {
  position: fixed;
  inset: 0;
  z-index: 220;
  pointer-events: none;
}

.system-drawer:not(.hidden) {
  pointer-events: auto;
}

.system-drawer-backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(4, 8, 14, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.24s ease;
}

.system-drawer:not(.hidden) .system-drawer-backdrop {
  opacity: 1;
}

.system-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  max-width: 100%;
  height: 100%;
  border-left: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(12, 16, 24, 0.98) 0%, rgba(10, 13, 18, 0.98) 100%);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.system-drawer:not(.hidden) .system-drawer-panel {
  transform: translateX(0);
}

.system-drawer-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.85rem;
  border-bottom: 1px solid var(--border);
}

.system-drawer-header .yu-section-title {
  margin: 0 0 0.2rem;
}

.system-drawer-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.system-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.system-drawer-close:hover,
.system-drawer-close:focus-visible {
  border-color: rgba(0, 158, 253, 0.45);
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  outline: none;
}

.system-drawer-body {
  flex: 1;
  overflow: auto;
  padding: 1rem;
}

.system-health-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.8125rem;
  font-weight: 600;
}

.system-health-badge--ok {
  border-color: rgba(61, 154, 106, 0.45);
  background: rgba(61, 154, 106, 0.12);
  color: #8fd9a8;
}

.system-health-badge--warn {
  border-color: rgba(212, 160, 23, 0.45);
  background: rgba(212, 160, 23, 0.12);
  color: #e8c45a;
}

.system-health-badge--error {
  border-color: rgba(204, 68, 68, 0.45);
  background: rgba(204, 68, 68, 0.12);
  color: #f0a0a0;
}

.system-health-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}

.system-health-meta-item {
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-inset);
}

.system-health-meta-item strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.system-health-jobs {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.system-health-jobs h3 {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.system-health-jobs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.system-health-job-chip {
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 640px) {
  .health-widget-label {
    display: none;
  }

  .system-drawer-panel {
    width: 100%;
    max-width: 100%;
  }

  .system-drawer-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 100%;
  }

  .system-drawer-actions .secondary {
    font-size: 0.8125rem;
    padding: 0.4rem 0.65rem;
    min-height: 44px;
  }

  .system-health-meta {
    grid-template-columns: 1fr;
  }
}

.user-menu {
  position: relative;
}

.user-menu-trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.65rem 0.4rem 0.45rem;
  margin: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.user-menu-trigger::-webkit-details-marker {
  display: none;
}

.user-menu-trigger::marker {
  content: "";
}

.user-menu-trigger:hover,
.user-menu[open] > .user-menu-trigger {
  border-color: rgba(0, 158, 253, 0.45);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow-glow);
}

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.user-menu-label {
  max-width: 9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu-chevron {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.user-menu[open] .user-menu-chevron {
  transform: rotate(180deg);
}

.user-menu-panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  min-width: 13.5rem;
  padding: 0.35rem;
  background: rgba(14, 18, 26, 0.98);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.user-menu-header {
  padding: 0.55rem 0.65rem 0.65rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.25rem;
}

.user-menu-name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.user-menu-role {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.65rem;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.user-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.user-menu-item--danger {
  color: #fca5a5;
}

.user-menu-item--danger:hover {
  background: rgba(248, 113, 113, 0.12);
  color: #fecaca;
}

.page-context {
  padding: 0.55rem 0 0.75rem;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.breadcrumb-item {
  color: var(--muted);
}

.breadcrumb-item--current {
  color: var(--text);
  font-weight: 500;
}

.breadcrumb-sep {
  color: rgba(255, 255, 255, 0.22);
  user-select: none;
}

.head h1 {
  margin: 0 0 0.4rem;
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 42rem;
}

.tabs {
  display: flex;
  gap: 0.3rem;
  margin-top: 0;
  flex-wrap: nowrap;
  padding: 0.3rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.tab-bar {
  position: relative;
  margin-top: 0.35rem;
}

.tabs-scroll::-webkit-scrollbar {
  height: 4px;
}

.tabs-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

.tabs-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

@media (max-width: 640px) {
  .app-chrome {
    margin: 0;
    padding: 0 1rem;
  }

  .shell {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .app-header-sub {
    display: none;
  }

  .user-menu-label {
    max-width: 6rem;
  }

  .tabs-scroll {
    margin-left: 0;
    margin-right: 0;
    padding: 0.35rem 0.15rem;
    gap: 0.35rem;
  }

  .tabs-scroll .tab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0.55rem 0.95rem;
    font-size: 0.82rem;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}

.tab {
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.84375rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    color var(--duration-normal) var(--ease-out),
    background var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.tab:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.tab.active {
  background: var(--brand-gradient);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 14px rgba(6, 90, 134, 0.38);
}

.tab.hidden {
  display: none !important;
}

.tab-panel {
  margin-top: 0.5rem;
  animation: panel-enter var(--duration-normal) var(--ease-out);
}

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

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-3);
  margin-top: var(--space-3);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.card:focus-within {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(61, 180, 230, 0.08);
}

.card > .lbl:first-child,
.card[id$="SearchCard"] > .lbl:first-of-type {
  margin-top: 0;
}

.glass-card {
  background: rgba(12, 17, 26, 0.72);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

/* --- Unified form system --- */

.lbl {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 var(--field-gap);
  line-height: 1.35;
}

.form-field,
.st-field,
.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--field-gap);
  min-width: 0;
}

.form-field > input,
.form-field > select,
.form-field > textarea,
.st-field > input,
.st-field > select,
.input-group > input,
.input-group > select {
  width: 100%;
  max-width: none;
  flex: none;
}

.row {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  align-items: center;
}

.row.form-actions,
.row.st-actions {
  margin-top: var(--form-section-gap);
  padding-top: var(--form-section-gap);
  border-top: 1px solid var(--border);
  align-items: center;
}

input[type="url"],
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="datetime-local"],
input[type="tel"],
select,
textarea,
#yuDescription {
  flex: 1;
  min-width: 0;
  min-height: var(--input-min-height);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  border-radius: var(--input-radius);
  padding: 0.65rem 0.85rem;
  font-size: 0.9375rem;
  font-family: inherit;
  line-height: 1.4;
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    background var(--duration-normal) var(--ease-out);
}

select {
  flex: 1;
  min-width: 10rem;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.35rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%239aa8bc' d='M4.5 6 8 9.5 11.5 6h-7Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  cursor: pointer;
}

textarea,
#yuDescription {
  min-height: 7.5rem;
  resize: vertical;
  flex: none;
  width: 100%;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

input::placeholder,
textarea::placeholder {
  color: rgba(154, 168, 188, 0.72);
}

input[type="url"]:focus-visible,
input[type="text"]:focus-visible,
input[type="password"]:focus-visible,
input[type="email"]:focus-visible,
input[type="search"]:focus-visible,
input[type="number"]:focus-visible,
input[type="datetime-local"]:focus-visible,
input[type="tel"]:focus-visible,
select:focus-visible,
textarea:focus-visible,
#yuDescription:focus-visible {
  outline: none;
  border-color: rgba(62, 181, 255, 0.55);
  box-shadow: var(--focus-shadow);
  background: var(--input-bg-focus);
}

.tab:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: var(--input-min-height);
  border: 1px solid var(--border);
  border-radius: var(--input-radius);
  padding: 0.55rem 1.05rem;
  font-size: 0.9375rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  transition:
    background var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    color var(--duration-normal) var(--ease-out);
}

button:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-strong);
}

button.primary {
  background: var(--brand-gradient);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 14px rgba(6, 90, 134, 0.32);
}

button.primary:hover:not(:disabled) {
  background: var(--brand-gradient-hover);
  box-shadow: 0 6px 22px rgba(6, 90, 134, 0.42);
  transform: translateY(-1px);
}

button.primary:focus-visible,
.tab.active:focus-visible {
  outline-color: #fff;
  box-shadow: var(--focus-shadow);
}

button.secondary {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-strong);
  color: var(--text);
}

button.secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(62, 181, 255, 0.38);
  color: #fff;
}

button.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  box-shadow: none;
}

button.ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  border-color: transparent;
  color: var(--text);
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.hint {
  margin: 0.65rem 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted);
}

.hint:empty {
  display: none;
}

.hint.err {
  color: var(--danger);
}

.hint.ok {
  color: var(--accent-text);
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: rgba(252, 165, 165, 0.65);
  box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.16);
}

.form-field.has-error .lbl {
  color: var(--danger);
}

.field-error {
  margin: 0.35rem 0 0;
  min-height: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--danger);
}

.field-error:empty {
  display: none;
}

.form-field.shake {
  animation: field-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes field-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  18%,
  62% {
    transform: translateX(-5px);
  }

  40%,
  80% {
    transform: translateX(5px);
  }
}

button.primary.is-loading {
  opacity: 0.88;
  pointer-events: none;
  cursor: wait;
}

.settings-form,
#stSettingsForm,
#stCustKeysForm,
.usr-apikeys-form {
  display: flex;
  flex-direction: column;
  gap: var(--form-gap);
  min-width: 0;
}

.card[id$="SearchCard"],
.search-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card[id$="SearchCard"] > .row,
.card[id$="SearchCard"] .acq-filters > .row,
.search-form > .row {
  align-items: stretch;
}

.card[id$="SearchCard"] > .row input[type="search"],
.card[id$="SearchCard"] > .row input[type="text"],
.card[id$="SearchCard"] .acq-filters > .row input[type="search"],
.card[id$="SearchCard"] .acq-filters > .row input[type="text"],
.search-form > .row input {
  flex: 1 1 12rem;
  min-width: 0;
}

.card[id$="SearchCard"] > .row button,
.card[id$="SearchCard"] .acq-filters > .row button,
.search-form > .row button {
  flex: 0 0 auto;
  align-self: stretch;
}

.card[id$="SearchCard"] .grid2,
.search-form .grid2 {
  margin-top: var(--form-section-gap);
}

.card[id$="SearchCard"] .grid2 .grid2,
.search-form .grid2 .grid2 {
  margin-top: 0;
  gap: 0.5rem;
}

.card[id$="SearchCard"] .hint,
.search-form .hint,
.card[id$="SearchCard"] .bt-results-header,
.card[id$="SearchCard"] .bt-loading,
.card[id$="SearchCard"] .bulk-bar,
.card[id$="SearchCard"] .bt-bulk-bar,
.card[id$="SearchCard"] .yt-results,
.search-form .yt-results,
.card[id$="SearchCard"] > button.hidden,
.card[id$="SearchCard"] .btn-more-results {
  margin-top: var(--form-gap);
}

.admin-login-card .lbl,
.auth-card .lbl,
.landing-login .lbl {
  margin-top: 0.85rem;
}

.admin-login-card .lbl:first-of-type,
.auth-card .lbl:first-of-type {
  margin-top: 0.35rem;
}

.admin-login-card input,
.auth-card input {
  width: 100%;
  flex: none;
}

.intro-upload-lbl span.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--input-min-height);
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--input-radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.intro-upload-lbl span.secondary:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(62, 181, 255, 0.38);
}

.yt-item:focus-visible,
.yu-cache-row:focus-visible,
button.accordion:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

.hidden {
  display: none !important;
}

.meta-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1rem;
}

@media (max-width: 640px) {
  .meta-grid {
    grid-template-columns: 1fr;
  }
}

.thumb {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.meta-line {
  color: var(--muted);
  font-size: 0.9rem;
}

.desc {
  color: var(--muted);
  font-size: 0.9rem;
  max-height: 5.5rem;
  overflow: hidden;
}

button.accordion,
.linkish {
  min-height: auto;
}

button.accordion {
  width: 100%;
  text-align: left;
  background: transparent;
  border-color: transparent;
  padding: 0.35rem 0;
  margin-top: var(--form-gap);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

button.accordion:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
}

.badge {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(62, 181, 255, 0.12);
  color: var(--accent-text);
}

.wm-license-badge {
  margin-left: 0.35rem;
  vertical-align: middle;
  background: #1e3a2f;
  color: #9fd4b8;
}

.eu-type-badge {
  margin-right: 0.35rem;
  vertical-align: middle;
  background: #2a2840;
  color: #b9b3f0;
}

.yt-item-title .wm-license-badge {
  font-size: 0.68rem;
}

.panel {
  margin-top: var(--form-section-gap);
  padding-top: var(--form-section-gap);
  border-top: 1px solid var(--border);
}

.panel.hidden {
  display: none;
}

.panel > .fine:first-child {
  margin-top: 0;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin: 0;
  align-items: start;
}

.grid2 > div {
  display: flex;
  flex-direction: column;
  gap: var(--field-gap);
  min-width: 0;
}

.grid2 select,
.grid2 input {
  width: 100%;
  min-width: 0;
  flex: none;
}

.card .grid2 {
  margin-top: var(--form-section-gap);
}

.card .grid2 .grid2 {
  margin-top: 0;
}

@media (max-width: 640px) {
  .grid2 {
    grid-template-columns: 1fr;
  }
}

.fine {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 0.5rem;
}

.checks {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.chk {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.875rem;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.chk.block {
  display: flex;
  margin: 0.35rem 0;
}

.chk.warn,
.warn {
  color: #fecaca;
}

.checks-col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  justify-content: flex-start;
}

.h3 {
  margin: 1rem 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.section-title,
.yu-section-title {
  margin: 0 0 0.35rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text);
}

.section-title--sub,
.st-category-title {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: var(--muted);
}

.status {
  color: var(--muted);
  font-size: 0.92rem;
}

.dl-progress-wrap,
.job-progress,
.yu-upload-progress {
  margin-top: 0.65rem;
}

.dl-progress-wrap.hidden,
.job-progress.hidden {
  display: none;
}

.job-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.job-progress-phase {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

.job-progress-pct {
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.dl-progress-track,
.job-progress-track,
.yu-progress-bar-wrap {
  height: 7px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.dl-progress-bar,
.job-progress-bar,
.yu-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--brand-gradient);
  border-radius: 999px;
  transition: width 0.4s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.dl-progress-bar::after,
.job-progress-bar::after,
.yu-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 100%
  );
  animation: progress-shimmer 1.8s ease-in-out infinite;
}

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

.dl-progress-meta,
.job-progress-meta {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
}

.download-results {
  border-color: rgba(0, 158, 253, 0.25);
  background: linear-gradient(180deg, rgba(0, 124, 186, 0.08) 0%, var(--card) 45%);
  scroll-margin-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow-glow);
}

.download-results--success {
  border-color: rgba(52, 211, 153, 0.35);
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.08) 0%, var(--card) 45%);
}

.download-results--error {
  border-color: rgba(248, 113, 113, 0.35);
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.08) 0%, var(--card) 45%);
}

.download-results--warning {
  border-color: rgba(251, 191, 36, 0.35);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.06) 0%, var(--card) 45%);
}

.download-results-header {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.75rem;
}

.download-results-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(0, 158, 253, 0.25);
}

.download-results--success .download-results-icon {
  background: rgba(52, 211, 153, 0.14);
  color: #6ee7b7;
  border-color: rgba(52, 211, 153, 0.3);
}

.download-results--error .download-results-icon {
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.3);
}

.download-results--warning .download-results-icon {
  background: rgba(251, 191, 36, 0.12);
  color: #fcd34d;
  border-color: rgba(251, 191, 36, 0.3);
}

.download-results-head-text {
  min-width: 0;
  flex: 1;
}

.download-results-title {
  margin: 0 0 var(--space-1);
  color: var(--accent-text);
}

.download-results--success .download-results-title {
  color: #a7f3d0;
}

.download-results--error .download-results-title {
  color: #fecaca;
}

.download-results-hint {
  margin: 0;
}

.job-status-card {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.job-status-card--success {
  border-color: rgba(52, 211, 153, 0.25);
}

.job-status-card--error {
  border-color: rgba(248, 113, 113, 0.25);
}

.job-status-card--warning {
  border-color: rgba(251, 191, 36, 0.25);
}

.job-status-card-icon {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
}

.job-status-card--success .job-status-card-icon {
  background: rgba(52, 211, 153, 0.15);
  color: #6ee7b7;
}

.job-status-card--error .job-status-card-icon {
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
}

.job-status-card--warning .job-status-card-icon {
  background: rgba(251, 191, 36, 0.12);
  color: #fcd34d;
}

.job-status-card-body {
  min-width: 0;
  flex: 1;
}

.job-status-card-title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.job-status-card-message {
  margin: 0;
  font-size: 0.9rem;
  word-break: break-word;
}

.job-status-card-filename {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 500;
  word-break: break-all;
}

.job-status-card-hint {
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
}

.download-results-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  align-items: center;
}

.results {
  margin-top: 0.25rem;
}

.results a.dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0;
  padding: 0.65rem 1.15rem;
  background: var(--brand-gradient);
  color: #fff !important;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 124, 186, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 44px;
}

.results a.dl-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0, 124, 186, 0.45);
}

.results a.dl-btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  outline-color: #fff;
}

.results a.dl-link:not(.dl-btn) {
  color: var(--accent);
  font-weight: 500;
}

.results ul {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}

.results .results-more-label {
  margin: 0.75rem 0 0.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.yt-results {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 420px;
  overflow-y: auto;
}

.yt-item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.65rem;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.yt-item:hover {
  border-color: rgba(0, 158, 253, 0.35);
  box-shadow: var(--shadow-sm);
}

.yt-item img {
  width: 120px;
  height: 68px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--surface-inset);
}

.yt-item-no-thumb {
  width: 120px;
  height: 68px;
  border-radius: 6px;
  background: var(--surface-inset);
  border: 1px solid var(--border);
}

.yt-item-title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}

.yt-item-meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.yt-item-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.yt-item-actions button {
  white-space: nowrap;
  font-size: 0.85rem;
  padding: 0.45rem 0.65rem;
  min-height: 2.125rem;
}

.tab-panel.hidden {
  display: none;
}

.bt-item .yt-item-meta {
  white-space: pre-line;
}

.bt-item {
  grid-template-columns: auto 120px 1fr auto;
}

.bt-item.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim);
}

.ar-item.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim);
}

.yt-item-desc {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bt-item-check {
  display: flex;
  align-items: center;
  padding: 0 0.15rem;
}

.bt-item-check input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.bt-bulk-bar,
.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
  padding: 0.65rem 0.85rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.28) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.bt-bulk-bar button,
.bulk-bar button {
  min-height: 2.125rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.875rem;
}

.bulk-bar.is-busy,
.bt-bulk-bar.is-busy {
  border-color: rgba(0, 158, 253, 0.45);
  box-shadow: 0 0 0 1px rgba(0, 158, 253, 0.12), var(--shadow-sm);
  animation: bulk-bar-pulse 2s ease-in-out infinite;
}

@keyframes bulk-bar-pulse {
  0%,
  100% {
    border-color: rgba(0, 158, 253, 0.35);
  }
  50% {
    border-color: rgba(0, 158, 253, 0.55);
  }
}

.bt-bulk-count,
.bulk-count {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  margin-right: auto;
}

.bulk-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0.1rem 0.45rem;
  margin-right: 0.35rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(0, 158, 253, 0.25);
}

.yt-item.has-check {
  grid-template-columns: auto 120px 1fr auto;
  cursor: default;
}

.yt-item.has-check.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim);
}

.yt-item-check {
  display: flex;
  align-items: center;
  padding: 0 0.15rem;
}

.yt-item-check input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
  cursor: pointer;
}

#btMetaPreview {
  color: var(--accent);
}

.bt-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding: 0.45rem 0.65rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--muted);
}

.bt-results-count {
  color: var(--text);
  font-weight: 500;
}

.bt-loading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}

.bt-loading.hidden {
  display: none;
}

.bt-spinner {
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: bt-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes bt-spin {
  to {
    transform: rotate(360deg);
  }
}

.bt-hl {
  background: rgba(99, 179, 237, 0.22);
  color: #e8f4ff;
  padding: 0 0.12em;
  border-radius: 2px;
}

.bt-empty-state {
  margin: 0.75rem 0 0;
  padding: 1rem 1.1rem;
  background: var(--surface-inset);
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.bt-empty-state strong {
  color: var(--text);
  font-weight: 600;
}

#btnBtSearch.is-loading {
  opacity: 0.75;
  pointer-events: none;
}

.row #btnBtClear {
  flex-shrink: 0;
}

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

.yu-section-head,
.yu-auth-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.yu-auth-row {
  align-items: flex-start;
}

.cl-provider-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.cl-provider-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-inset);
}

.cl-provider-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cl-provider-actions {
  margin: 0;
}

.yu-cache-wrap {
  margin-top: 0.75rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-inset);
}

.yu-cache-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.yu-cache-table th,
.yu-cache-table td {
  padding: 0.55rem 0.65rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.yu-cache-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--bg-elevated);
}

.yu-cache-table tbody tr:last-child td {
  border-bottom: none;
}

.yu-cache-row {
  cursor: pointer;
  transition: background 0.12s ease;
}

.yu-cache-row:hover {
  background: rgba(91, 140, 255, 0.06);
}

.yu-cache-row.selected {
  background: rgba(91, 140, 255, 0.12);
  box-shadow: inset 3px 0 0 var(--accent);
}

.yu-col-check {
  width: 2.5rem;
}

.yu-filename {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.yu-size,
.yu-date {
  color: var(--muted);
  white-space: nowrap;
}

.yu-actions button {
  font-size: 0.82rem;
  padding: 0.35rem 0.55rem;
}

.yu-check-label {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.yu-check-label input {
  accent-color: var(--accent);
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.yu-cache-stats {
  margin: 0.35rem 0 0.5rem;
  color: var(--muted);
}

.yu-cache-toolbar {
  margin-bottom: 0.35rem;
  gap: 0.5rem;
}

.yu-col-bulk {
  width: 2.5rem;
}

.yu-cache-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.65rem;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}

.yu-thumb-source {
  margin: 0.35rem 0 0.65rem;
}

#yuThumbnailCache {
  width: 100%;
  margin-top: 0.35rem;
}

.st-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.65rem;
  margin: 0.75rem 0;
}

.st-health-item {
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-inset);
}

.st-health-item strong {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.st-health-ok {
  color: #6ecf8a;
}

.st-health-bad {
  color: #e07a7a;
}

.st-ytdlp-status {
  margin-top: 0.35rem;
  color: var(--muted);
  line-height: 1.45;
}

/* --- Admin system dashboard (settings tab) --- */

.admin-dashboard {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(0, 124, 186, 0.14) 0%, rgba(0, 158, 253, 0.06) 42%, rgba(14, 18, 26, 0.88) 100%);
  border-color: rgba(0, 158, 253, 0.28);
  box-shadow:
    var(--shadow-md),
    0 0 0 1px rgba(0, 124, 186, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.admin-dashboard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #007cba 0%, #009efd 100%);
  pointer-events: none;
}

.adb-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  margin-bottom: 0.25rem;
}

.adb-head-main {
  flex: 1;
  min-width: 200px;
}

.adb-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem 0.75rem;
}

.adb-last-update {
  color: var(--muted);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.adb-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  line-height: 1.2;
}

.adb-badge::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.adb-badge--healthy {
  color: #6ee7a0;
  background: rgba(110, 231, 160, 0.12);
  border-color: rgba(110, 231, 160, 0.35);
}

.adb-badge--degraded {
  color: #fcd34d;
  background: rgba(252, 211, 77, 0.12);
  border-color: rgba(252, 211, 77, 0.35);
}

.adb-badge--unknown {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
}

.adb-badge--error {
  color: #fca5a5;
  background: rgba(252, 165, 165, 0.12);
  border-color: rgba(252, 165, 165, 0.35);
}

.adb-loading {
  margin: 0.75rem 0 0.25rem;
}

.adb-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
  gap: 0.85rem;
  margin: 1rem 0 0.65rem;
}

.adb-kpi-card {
  position: relative;
  padding: 0.95rem 1rem 0.9rem;
  border-radius: var(--radius-lg);
  background: rgba(8, 12, 18, 0.55);
  border: 1px solid rgba(0, 158, 253, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 4px 18px rgba(0, 0, 0, 0.22);
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}

.adb-kpi-card:hover {
  border-color: rgba(0, 158, 253, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 6px 22px rgba(0, 124, 186, 0.18);
  transform: translateY(-1px);
}

.adb-kpi-card::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, rgba(0, 124, 186, 0.65) 0%, rgba(0, 158, 253, 0.35) 100%);
  opacity: 0.85;
}

.adb-kpi-card--ok::after {
  background: linear-gradient(90deg, rgba(0, 124, 186, 0.85) 0%, #009efd 100%);
}

.adb-kpi-card--warn::after {
  background: linear-gradient(90deg, #b45309 0%, #fcd34d 100%);
}

.adb-kpi-card--bad::after {
  background: linear-gradient(90deg, #991b1b 0%, #fca5a5 100%);
}

.adb-kpi-card--accent::after {
  background: linear-gradient(90deg, #007cba 0%, #009efd 100%);
}

.adb-kpi-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 0.45rem;
}

.adb-kpi-value {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.adb-kpi-sub {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.adb-kpi-value.adb-kpi-value--sm {
  font-size: 1rem;
  font-weight: 600;
}

.adb-auto-refresh {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

@media (max-width: 640px) {
  .adb-head-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .adb-refresh-btn {
    margin-left: auto;
  }
}

.yu-selected-file {
  margin: 0 0 0.75rem;
  color: var(--accent);
}

.yu-ai-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.yu-ai-provider {
  flex: 1;
  min-width: 160px;
}

.yu-upload-progress {
  margin-top: 0.75rem;
}

.yu-progress-bar-wrap {
  height: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.yu-progress-bar {
  height: 100%;
  width: 0;
  background: var(--brand-gradient);
  border-radius: 999px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.yu-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 100%
  );
  animation: progress-shimmer 1.8s ease-in-out infinite;
}

.intro-list-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-inset);
  max-height: 220px;
  overflow-y: auto;
}

.intro-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
}

.intro-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}

.intro-list li:last-child {
  border-bottom: none;
}

.intro-list-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.intro-upload-lbl input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.mdl-modal {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: 0;
  background: var(--card-solid);
  color: var(--text);
  max-width: 28rem;
  width: calc(100% - 2rem);
  box-shadow: var(--shadow-lg);
}

.mdl-modal::backdrop {
  background: rgba(6, 8, 12, 0.75);
  backdrop-filter: blur(8px);
}

.mdl-modal-inner {
  padding: 1.1rem 1.15rem 1rem;
  margin: 0;
}

.mdl-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1rem;
  gap: 0.5rem;
}

.results-intro-btn,
.results-outro-btn {
  font-size: 0.88rem;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
}

#yuThumbnail {
  font-size: 0.88rem;
  color: var(--muted);
}

.foot {
  margin-top: 2rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.mono {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

.st-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.st-token-row {
  display: flex;
  flex-direction: column;
  gap: var(--field-gap);
  margin-bottom: 1rem;
  max-width: 36rem;
}

.st-token-row input {
  width: 100%;
  max-width: none;
  flex: none;
}

.st-category {
  margin-top: var(--form-section-gap);
  padding-top: var(--form-section-gap);
  border-top: 1px solid var(--border);
}

.st-fields {
  display: flex;
  flex-direction: column;
  gap: var(--form-gap);
}

.st-field {
  max-width: 36rem;
}

.st-field input,
.st-cust-input {
  width: 100%;
  max-width: none;
  flex: none;
}

.st-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0;
}

.st-field-head .lbl {
  margin-bottom: 0;
}

.st-status {
  font-size: 0.75rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
}

.st-status.st-ok {
  color: #7dcea0;
  border-color: rgba(125, 206, 160, 0.35);
}

.st-status.st-missing {
  color: var(--muted);
}

.st-desc {
  margin: 0 0 0.35rem;
}

.st-test-btn {
  margin-top: 0.45rem;
}

.st-oauth-redirect-callout {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(125, 206, 160, 0.35);
  border-radius: 8px;
  background: rgba(125, 206, 160, 0.06);
  max-width: 42rem;
}

.st-mail-callout {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(100, 160, 220, 0.35);
  border-radius: 8px;
  background: rgba(100, 160, 220, 0.06);
  max-width: 42rem;
}

.st-mail-test-row {
  margin-top: 0.65rem;
}

.st-oauth-redirect-title {
  margin: 0 0 0.35rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.st-oauth-redirect-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.st-oauth-redirect-uri {
  flex: 1 1 16rem;
  word-break: break-all;
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.st-copy-btn {
  flex-shrink: 0;
}

.st-oauth-effective-uri {
  margin-top: 0.35rem;
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
}

.st-actions {
  margin-top: 1.25rem;
}

/* Premium API keys / settings (Einstellungen) */
#panelSettings .st-settings-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 72rem;
  min-width: 0;
}

#panelSettings .st-zone {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

#panelSettings .st-zone > .card {
  margin-top: 0.65rem;
}

#panelSettings .st-zone-head {
  padding: 0.15rem 0.15rem 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 0.15rem;
}

#panelSettings .st-zone-label {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text, var(--accent));
}

#panelSettings .st-zone-desc {
  margin: 0;
  max-width: 40rem;
}

#panelSettings .st-zone.hidden,
#panelSettings .st-zone.st-admin-only.hidden {
  display: none !important;
}

/* Shared collapse / details chrome */
.st-collapse {
  margin: 0.65rem 0 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.12);
  min-width: 0;
}

.st-collapse-summary {
  list-style: none;
  cursor: pointer;
  padding: 0.65rem 0.85rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-secondary, var(--muted));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  user-select: none;
}

.st-collapse-summary::-webkit-details-marker {
  display: none;
}

.st-collapse-summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  flex-shrink: 0;
  opacity: 0.7;
}

.st-collapse[open] > .st-collapse-summary::after {
  transform: rotate(-135deg);
}

.st-collapse-body {
  padding: 0 0.85rem 0.85rem;
  min-width: 0;
}

.st-token-collapse {
  max-width: 36rem;
}

.st-token-collapse .st-token-row {
  margin-bottom: 0;
  max-width: none;
}

.job-monitor-advanced-wrap {
  margin-top: 0;
  margin-bottom: 0.85rem;
}

.job-monitor-advanced-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  min-width: 0;
}

.job-monitor-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1 1 9rem;
}

.job-monitor-select {
  width: 100%;
  max-width: 16rem;
  min-width: 0;
}

.job-monitor-export-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

#stSettingsCard.st-premium-card {
  border: 1px solid rgba(62, 181, 255, 0.14);
  background:
    linear-gradient(165deg, rgba(0, 124, 186, 0.07) 0%, transparent 42%),
    var(--card);
  box-shadow: var(--shadow-glow);
}

#stCdnServersCard.st-infra-card,
#stYtdlpCard.st-infra-card {
  border: 1px solid rgba(62, 181, 255, 0.1);
}

.st-premium-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: 0.5rem;
}

.st-premium-section {
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-normal) var(--ease-out);
  min-width: 0;
  overflow: hidden;
}

.st-premium-section:hover {
  border-color: rgba(62, 181, 255, 0.22);
}

.st-premium-section--advanced {
  background: rgba(0, 0, 0, 0.14);
}

.st-premium-section > .st-premium-section-head {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.15rem;
  margin-bottom: 0;
  user-select: none;
}

.st-premium-section > .st-premium-section-head::-webkit-details-marker {
  display: none;
}

.st-premium-section-body {
  padding: 0 1.15rem 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  min-width: 0;
}

.st-premium-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  margin-bottom: 0.85rem;
}

.st-premium-section-brand {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  flex: 1 1 14rem;
  min-width: 0;
}

.st-section-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.04);
  position: relative;
}

.st-section-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 4px;
  background: var(--brand-gradient);
  opacity: 0.85;
}

.st-section-icon--youtube::after {
  clip-path: polygon(35% 25%, 35% 75%, 72% 50%);
  border-radius: 2px;
}

.st-section-icon--twitch::after {
  border-radius: 3px;
  background: #9146ff;
}

.st-section-icon--europeana::after {
  background: linear-gradient(135deg, #0066cc, #00a3e0);
}

.st-section-icon--ddb::after {
  background: linear-gradient(135deg, #c8102e, #1a1a1a);
}

.st-section-icon--cloud::after {
  border-radius: 50% 50% 40% 40%;
  background: linear-gradient(135deg, #5b8cff, #3eb5ff);
  width: 1.25rem;
  height: 0.85rem;
}

.st-section-icon--smtp::after {
  clip-path: polygon(10% 30%, 90% 30%, 90% 70%, 10% 70%, 10% 40%, 50% 55%, 90% 40%);
  background: var(--brand-primary);
}

.st-section-icon--obs::after {
  border-radius: 50%;
  background: #302e31;
  box-shadow: inset 0 0 0 3px #fff;
}

.st-section-icon--advanced::after {
  background: linear-gradient(135deg, var(--muted), var(--text-secondary));
}

.st-premium-section-title {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.st-premium-section-desc {
  margin: 0;
  max-width: 42rem;
}

.st-premium-section-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.st-section-count {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}

.st-section-chevron {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}

.st-premium-section[open] > .st-premium-section-head .st-section-chevron {
  transform: rotate(-135deg);
}

.st-section-test-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  width: 100%;
  margin: 0.85rem 0 0.35rem;
}

.st-section-test-btn {
  font-size: 0.82rem;
}

.st-section-test-result {
  margin-bottom: 0.85rem;
  min-height: 0;
}

.st-section-test-result:empty {
  display: none;
}

.st-test-running {
  margin: 0;
  color: var(--muted);
}

.st-test-result {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.st-test-result--ok {
  border-color: rgba(110, 231, 160, 0.35);
  background: rgba(110, 231, 160, 0.08);
}

.st-test-result--error {
  border-color: rgba(252, 165, 165, 0.35);
  background: rgba(252, 165, 165, 0.08);
}

.st-test-result-icon {
  flex-shrink: 0;
  width: 1.65rem;
  height: 1.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
}

.st-test-result--ok .st-test-result-icon {
  background: rgba(110, 231, 160, 0.2);
  color: var(--success);
}

.st-test-result--error .st-test-result-icon {
  background: rgba(252, 165, 165, 0.2);
  color: var(--danger);
}

.st-test-result-body {
  flex: 1;
  min-width: 0;
}

.st-test-result-title {
  margin: 0 0 0.2rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.st-test-result--ok .st-test-result-title {
  color: var(--success);
}

.st-test-result--error .st-test-result-title {
  color: var(--danger);
}

.st-test-result-message {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

.st-test-result-hint {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

.st-key-fields {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.st-key-field {
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.16);
}

.st-key-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.35rem;
}

.st-key-label {
  margin: 0;
  font-weight: 500;
}

.st-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.st-status-pill.st-ok {
  color: var(--success);
  border-color: rgba(110, 231, 160, 0.35);
  background: rgba(110, 231, 160, 0.08);
}

.st-status-pill.st-missing {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
}

.st-status-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}

.st-input-group {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}

.st-key-input {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.88rem;
}

.st-icon-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--input-min-height);
  min-height: var(--input-min-height);
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--input-radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.st-icon-btn:hover {
  background: var(--accent-soft);
  border-color: rgba(62, 181, 255, 0.35);
  color: var(--accent-text);
}

.st-premium-callout {
  margin-top: 0.85rem;
  max-width: none;
}

.st-advanced-cat {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--border);
}

.st-advanced-cat:first-of-type {
  margin-top: 0.25rem;
  padding-top: 0;
  border-top: none;
}

.st-advanced-cat-title {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

#stCustomerKeysCard.st-premium-card {
  border: 1px solid rgba(62, 181, 255, 0.12);
}

@media (max-width: 640px) {
  #panelSettings .st-settings-page {
    gap: var(--space-3);
  }

  #panelSettings .card {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .st-premium-section > .st-premium-section-head,
  .st-premium-section-body {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .st-premium-section-head {
    flex-direction: column;
  }

  .st-premium-section-meta {
    align-items: center;
    width: 100%;
    justify-content: space-between;
  }

  .st-input-group {
    flex-wrap: wrap;
  }

  .st-key-input {
    width: 100%;
    flex: 1 1 100%;
  }

  .job-monitor-select {
    max-width: none;
  }

  .st-head {
    flex-direction: column;
    align-items: stretch;
  }

  .st-head > .secondary {
    align-self: flex-start;
  }

  .adb-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Live Stream tab */
.ls-hint-card {
  border-color: rgba(91, 140, 255, 0.25);
  background: rgba(91, 140, 255, 0.04);
}

.ls-settings-hint {
  margin: 0;
}

.linkish {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.linkish:hover {
  color: var(--accent-text);
}

.ls-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.ls-actions {
  margin-top: 0.75rem;
}

.ls-channel-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ls-channel-list li {
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-inset);
  font-size: 0.88rem;
}

.ls-channel-ok {
  border-left: 3px solid #3d9a6a;
}

.ls-channel-off {
  opacity: 0.65;
  border-left: 3px solid var(--muted);
}

.ls-empty {
  border: none;
  background: transparent;
  padding: 0;
}

.ls-selected-file {
  margin-top: 0.65rem;
  color: var(--accent-dim);
}

.ls-restream-opt label {
  color: var(--text);
}

.ls-platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.ls-platform-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  background: var(--surface-inset);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  transition: border-color 0.15s ease;
}

.ls-platform-card.selected {
  border-color: var(--accent);
  background: rgba(91, 140, 255, 0.06);
}

.ls-platform-card.configured {
  border-left: 3px solid #3d9a6a;
}

.ls-platform-card.not-configured {
  border-left: 3px solid var(--muted);
  opacity: 0.85;
}

.ls-platform-card.live {
  box-shadow: 0 0 0 1px rgba(61, 154, 106, 0.35);
}

.ls-platform-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
}

.ls-platform-name {
  font-weight: 600;
  font-size: 0.92rem;
}

.ls-platform-status {
  font-size: 0.75rem;
  color: var(--muted);
}

.ls-platform-status.ok {
  color: #3d9a6a;
}

.ls-platform-status.live {
  color: #5bff9a;
}

.ls-platform-actions {
  margin-top: 1rem;
}

.ls-platform-card .chk {
  margin: 0;
  font-size: 0.82rem;
}

.ls-platform-card button.ls-go-live {
  width: 100%;
  font-size: 0.82rem;
  padding: 0.35rem 0.5rem;
}

.ls-platform-card button.ls-stop {
  width: 100%;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  padding: 0.35rem 0.5rem;
}

.yu-auth-actions {
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.ls-platform-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.ls-oauth-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: #3a3020;
  color: #e8c878;
  border: 1px solid #5a4a28;
  cursor: help;
  white-space: nowrap;
}

.ls-oauth-stub-note {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(62, 181, 255, 0.06);
  border: 1px solid rgba(62, 181, 255, 0.2);
}

.ls-playlist-toolbar {
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.ls-playlist-toolbar select {
  flex: 1;
  min-width: 12rem;
}

.ls-playlist-duration {
  margin: 0.35rem 0 0.75rem;
  color: var(--muted);
}

.ls-playlist-editor {
  margin-top: 0.5rem;
}

.ls-playlist-add {
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.ls-playlist-add select {
  flex: 1;
  min-width: 14rem;
}

.ls-playlist-items {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.ls-playlist-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--border);
  background: var(--card2);
}

.ls-playlist-item-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
}

.ls-playlist-item-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  padding: 0 0.65rem 0.55rem;
  border-top: 1px dashed var(--border);
  background: rgba(0, 0, 0, 0.12);
}

.ls-playlist-item-edit label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.ls-playlist-item-edit input,
.ls-playlist-item-edit select {
  min-width: 5.5rem;
  font-size: 0.85rem;
}

.ls-playlist-item-edit select.ls-pl-item-intro {
  min-width: 9rem;
}

.ls-playlist-item:last-child {
  border-bottom: none;
}

.ls-playlist-item.playing {
  background: rgba(62, 181, 255, 0.08);
  border-left: 3px solid var(--accent);
}

.ls-playlist-item-order {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  min-width: 1.5rem;
}

.ls-playlist-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ls-playlist-item-dur {
  font-size: 0.85rem;
  color: var(--muted);
}

.ls-playlist-item-actions {
  display: flex;
  gap: 0.25rem;
}

.ls-playlist-item-actions button {
  padding: 0.2rem 0.45rem;
  font-size: 0.85rem;
}

.ls-playlist-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.ls-playlist-now {
  margin-top: 0.85rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: var(--card2);
  border: 1px solid #2a3544;
}

.ls-playlist-queue {
  margin: 0.35rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.9rem;
}

.ls-playlist-queue li.playing {
  font-weight: 600;
  color: var(--accent);
}

.url-hint-toggle {
  margin-bottom: 0;
}

.head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-3)) 0;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.premium-header {
  /* sticky handled by .app-chrome */
}

.head-auth {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(6, 8, 12, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.auth-overlay.premium-overlay {
  background:
    radial-gradient(ellipse 640px 320px at 50% 0%, rgba(0, 124, 186, 0.12) 0%, transparent 60%),
    rgba(4, 6, 10, 0.88);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  animation: premium-overlay-in 0.28s ease;
}

@keyframes premium-overlay-in {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }

  to {
    opacity: 1;
    backdrop-filter: blur(20px) saturate(1.15);
    -webkit-backdrop-filter: blur(20px) saturate(1.15);
  }
}

.auth-overlay:not(.hidden) ~ .shell {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
}

.premium-modal {
  width: min(760px, 100%);
  max-height: min(92vh, 880px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  animation: premium-modal-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes premium-modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.premium-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.premium-modal-header .yu-section-title {
  margin: 0 0 0.25rem;
}

.premium-modal-header .fine {
  margin: 0;
  color: var(--accent);
  font-weight: 500;
}

.premium-modal-close {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.premium-modal-close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(62, 181, 255, 0.35);
}

.premium-modal-close:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  color: var(--text);
}

.premium-modal-body {
  flex: 1;
  overflow: auto;
  padding: 0 1.5rem 1rem;
}

.premium-modal-footer {
  padding: 1rem 1.5rem 1.35rem;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.12);
  margin: 0;
}

.premium-login-card {
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  border-color: var(--border-strong);
}

/* --- Landing page (IMH Group branding) --- */

body.landing-mode {
  background:
    radial-gradient(ellipse 1100px 600px at 6% -8%, rgba(11, 126, 184, 0.24) 0%, transparent 58%),
    radial-gradient(ellipse 880px 500px at 96% 2%, rgba(61, 180, 230, 0.1) 0%, transparent 52%),
    radial-gradient(ellipse 640px 360px at 48% 108%, rgba(6, 90, 134, 0.14) 0%, transparent 60%),
    linear-gradient(180deg, #070b12 0%, var(--bg) 48%, #05080d 100%);
  padding-bottom: 0;
}

body.landing-mode::before {
  opacity: 0.28;
}

.landing-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 1.75rem) 2.75rem;
  padding-bottom: calc(2.75rem + 3.5rem + env(safe-area-inset-bottom, 0px));
}

.landing-page.hidden {
  display: none;
}

.landing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0 2rem;
  flex-shrink: 0;
}

.head-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
}

/* Language picker — fixed bottom-left, vertical native-name list */
.mdl-lang-bar {
  position: fixed;
  z-index: 1035;
  left: max(1.25rem, env(safe-area-inset-left, 0px));
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  font-size: 0.875rem;
  pointer-events: none;
}

.mdl-lang-details {
  position: relative;
  pointer-events: auto;
}

.mdl-lang-trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem 0.5rem 1rem;
  margin: 0;
  background: rgba(12, 16, 24, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.mdl-lang-trigger::-webkit-details-marker {
  display: none;
}

.mdl-lang-trigger::marker {
  content: "";
}

.mdl-lang-trigger:hover,
.mdl-lang-details[open] > .mdl-lang-trigger {
  border-color: rgba(0, 158, 253, 0.4);
  background: rgba(16, 22, 34, 0.95);
  box-shadow: var(--shadow-glow);
}

.mdl-lang-trigger:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

.mdl-lang-current {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  white-space: nowrap;
}

.mdl-lang-chevron {
  display: flex;
  opacity: 0.6;
  flex-shrink: 0;
  transition: transform 0.25s ease, opacity 0.22s ease;
}

.mdl-lang-details[open] .mdl-lang-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.mdl-lang-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.5rem);
  min-width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.98);
  transform-origin: bottom left;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
  pointer-events: none;
}

.mdl-lang-details[open] .mdl-lang-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.mdl-lang-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0.35rem 0;
  margin: 0;
  list-style: none;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: rgba(12, 16, 24, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--shadow-lg);
}

.mdl-lang-option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.55rem 1rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}

.mdl-lang-option:hover,
.mdl-lang-option:focus-visible {
  color: var(--text);
  background: rgba(0, 158, 253, 0.1);
  outline: none;
}

.mdl-lang-option.active {
  color: #7ec8ff;
  background: rgba(0, 158, 253, 0.16);
  font-weight: 600;
}

.mdl-lang-option-name {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .premium-bg::before,
  .premium-bg::after,
  .premium-bg-orb {
    animation: none !important;
  }

  .admin-login-card {
    animation: none !important;
  }

  .form-field.shake {
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .mdl-lang-trigger,
  .mdl-lang-chevron,
  .mdl-lang-panel,
  .mdl-lang-option,
  .user-menu-chevron,
  .dl-progress-bar::after,
  .job-progress-bar::after,
  .yu-progress-bar::after,
  .bt-spinner,
  .job-progress.is-indeterminate .job-progress-bar,
  .auth-overlay.premium-overlay,
  .premium-modal {
    transition: none;
    animation: none;
  }

  .bulk-bar.is-busy,
  .bt-bulk-bar.is-busy {
    animation: none;
  }

  button.primary:hover:not(:disabled),
  .landing-cta:hover,
  .landing-feature-card:hover,
  .results a.dl-btn:hover,
  .card:hover {
    transform: none;
  }
}

@media (max-width: 767px) {
  .mdl-lang-trigger {
    gap: 0.35rem;
  }

  .mdl-lang-current {
    font-size: 0.82rem;
  }

  .mdl-lang-option {
    font-size: 0.82rem;
  }

  .landing-feature-grid {
    grid-template-columns: 1fr;
  }
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.landing-logo {
  display: block;
  max-width: min(260px, 72vw);
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.landing-logo-text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-accent);
}

.landing-main {
  flex: 1;
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 960px) {
  .landing-main {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 3rem;
  }
}

.landing-content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  min-width: 0;
}

.landing-aside {
  min-width: 0;
}

.landing-hero {
  padding-top: 0.35rem;
  animation: landing-rise 0.55s var(--ease-out) both;
}

.landing-eyebrow {
  margin: 0 0 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.landing-title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 5.8vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.landing-title-gradient {
  display: inline;
  background: linear-gradient(135deg, #ffffff 0%, #c8e8f7 38%, #3db4e6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-lead {
  margin: 0;
  color: var(--text-secondary);
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.65;
  max-width: 34rem;
}

.landing-hero-actions {
  margin-top: 2rem;
}

.landing-features-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.landing-features-heading {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.landing-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 540px) {
  .landing-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.125rem;
  }
}

.landing-feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.2rem 1.25rem 1.3rem;
  margin: 0;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    background var(--duration-normal) var(--ease-out);
}

.landing-feature-card:hover {
  border-color: var(--border-accent);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.landing-feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(11, 126, 184, 0.08) 0%, transparent 55%);
  pointer-events: none;
}

.landing-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 0;
  line-height: 1;
  border-radius: 10px;
  background: rgba(11, 126, 184, 0.14);
  border: 1px solid rgba(61, 180, 230, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

.landing-feature-icon::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  background-color: var(--accent-text);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.landing-feature-icon[data-icon="acquire"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 11 5 5 5-5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 11 5 5 5-5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E");
}

.landing-feature-icon[data-icon="archive"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='4' rx='1'/%3E%3Cpath d='M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8'/%3E%3Cpath d='M10 12h4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='4' rx='1'/%3E%3Cpath d='M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8'/%3E%3Cpath d='M10 12h4'/%3E%3C/svg%3E");
}

.landing-feature-icon[data-icon="film"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M7 5v14M17 5v14M3 9h18M3 15h18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M7 5v14M17 5v14M3 9h18M3 15h18'/%3E%3C/svg%3E");
}

.landing-feature-icon[data-icon="parliament"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M6 20V10l6-4 6 4v10'/%3E%3Cpath d='M9 20v-5h6v5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M6 20V10l6-4 6 4v10'/%3E%3Cpath d='M9 20v-5h6v5'/%3E%3C/svg%3E");
}

.landing-feature-icon[data-icon="live"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M16.5 7.5a6.5 6.5 0 0 1 0 9'/%3E%3Cpath d='M7.5 7.5a6.5 6.5 0 0 0 0 9'/%3E%3Cpath d='M19.5 4.5a11 11 0 0 1 0 15'/%3E%3Cpath d='M4.5 4.5a11 11 0 0 0 0 15'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M16.5 7.5a6.5 6.5 0 0 1 0 9'/%3E%3Cpath d='M7.5 7.5a6.5 6.5 0 0 0 0 9'/%3E%3Cpath d='M19.5 4.5a11 11 0 0 1 0 15'/%3E%3Cpath d='M4.5 4.5a11 11 0 0 0 0 15'/%3E%3C/svg%3E");
}

.landing-feature-icon[data-icon="publish"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V7'/%3E%3Cpath d='m7 11 5-5 5 5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V7'/%3E%3Cpath d='m7 11 5-5 5 5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E");
}

.landing-feature-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.landing-feature-desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
}

.landing-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem 1.75rem;
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}

.landing-proof-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
  min-width: 7rem;
}

.landing-proof-value {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-proof-label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.landing-proof-divider {
  width: 1px;
  height: 2.25rem;
  background: var(--border-strong);
  flex-shrink: 0;
}

.landing-cta {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0.85rem 2.15rem;
  background: var(--brand-gradient);
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 6px 28px rgba(6, 90, 134, 0.4);
  transition:
    transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    filter var(--duration-normal) var(--ease-out);
}

.landing-cta:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(6, 90, 134, 0.5);
}

.landing-login {
  margin: 0;
  align-self: start;
  scroll-margin-top: 1.5rem;
  position: sticky;
  top: 1.75rem;
  padding-top: 1.55rem;
  animation: landing-rise 0.6s var(--ease-out) 0.08s both;
}

.landing-login-badge {
  display: inline-block;
  margin-bottom: 0.85rem;
  padding: 0.28rem 0.62rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: rgba(11, 126, 184, 0.16);
  border: 1px solid rgba(61, 180, 230, 0.28);
  border-radius: var(--radius-sm);
}

.landing-login h2 {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.landing-login .lbl {
  margin-top: 0.75rem;
}

.landing-footer {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.landing-footer-text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.landing-footer-copy {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
  opacity: 0.75;
}

.landing-footer a {
  color: var(--accent-text);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.18s ease;
}

.landing-footer a:hover {
  color: #a8dff5;
  text-decoration: underline;
}

@media (max-width: 959px) {
  .landing-aside {
    order: -1;
  }

  .landing-login {
    position: static;
    top: auto;
  }

  .landing-proof-divider {
    display: none;
  }

  .landing-proof {
    gap: 1rem;
  }

  .landing-proof-item {
    flex: 1 1 calc(33% - 1rem);
    min-width: 5.5rem;
  }
}

@media (max-width: 640px) {
  .landing-page {
    padding:
      max(1.25rem, env(safe-area-inset-top, 0px))
      max(1.125rem, env(safe-area-inset-right, 0px))
      calc(5rem + env(safe-area-inset-bottom, 0px))
      max(1.125rem, env(safe-area-inset-left, 0px));
  }

  .landing-content {
    gap: 2.25rem;
  }

  .landing-cta {
    width: 100%;
  }

  .landing-proof-item {
    flex: 1 1 100%;
  }
}

.auth-card {
  width: min(420px, 100%);
  margin: 0;
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.auth-card .lbl {
  margin-top: 0.75rem;
}

.auth-forgot {
  margin-top: 1rem;
  text-align: center;
}

.auth-warn {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid #8a5a20;
  background: #2a1f10;
  color: #f0d8a8;
  font-size: 0.9rem;
}

.auth-admin-hint {
  margin: 0.5rem 0 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid rgba(100, 160, 220, 0.45);
  background: rgba(100, 160, 220, 0.08);
  color: #b8d4f0;
  font-size: 0.88rem;
  line-height: 1.45;
}

.usr-admin-card {
  margin-top: 0;
}

.usr-create-section {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.usr-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 1rem 0 0;
}

.usr-list-empty {
  margin: 1rem 0 0;
  padding: 1.25rem;
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
}

.usr-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.usr-row:hover {
  border-color: rgba(0, 158, 253, 0.22);
  box-shadow: var(--shadow-glow);
}

.usr-row.inactive {
  opacity: 0.72;
  background: rgba(0, 0, 0, 0.18);
}

.usr-row-main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  flex: 1 1 220px;
}

.usr-avatar {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  color: #7ec8ff;
  background: var(--brand-gradient);
  box-shadow: 0 2px 12px rgba(0, 124, 186, 0.28);
}

.usr-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.usr-meta strong {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.usr-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usr-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
}

.usr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}

.usr-actions .usr-grants {
  font-weight: 600;
}

.usr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  letter-spacing: 0.02em;
}

.usr-badge.admin {
  border-color: rgba(61, 98, 184, 0.55);
  background: rgba(61, 98, 184, 0.14);
  color: #9ab8ff;
}

.usr-status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.usr-status.ok {
  color: #7dcea0;
  border-color: rgba(125, 206, 160, 0.35);
  background: rgba(125, 206, 160, 0.08);
}

.usr-status.off {
  color: #d4a574;
  border-color: rgba(212, 165, 116, 0.35);
  background: rgba(212, 165, 116, 0.08);
}

/* --- Benutzer admin table (v50) --- */

.usr-admin-count {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.usr-admin-toolbar {
  margin-top: 0.25rem;
}

.usr-admin-toolbar-filters {
  flex: 1 1 auto;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.usr-admin-search {
  min-width: 0;
}

.usr-admin-filter {
  flex: 0 1 auto;
  min-width: 9.5rem;
  max-width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: var(--input-radius);
  border: 1px solid var(--border-strong);
  background: var(--surface-inset);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
}

.usr-admin-toolbar-actions {
  flex-shrink: 0;
}

.usr-toolbar-btn {
  white-space: nowrap;
}

.usr-table-wrap {
  margin-top: 0.75rem;
}

.usr-admin-table .usr-col-actions {
  width: 1%;
  white-space: nowrap;
}

.usr-admin-table .usr-col-date {
  white-space: nowrap;
}

.usr-table-user {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.usr-table-avatar {
  width: 2rem;
  height: 2rem;
  font-size: 0.78rem;
  border-radius: 10px;
}

.usr-table-name {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usr-table-email {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usr-table-date,
.usr-last-login {
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.usr-last-login.muted {
  opacity: 0.55;
}

.usr-table-row.inactive,
.usr-table-row.locked {
  opacity: 0.78;
}

.usr-table-row.inactive .usr-table-name,
.usr-table-row.locked .usr-table-name {
  color: var(--muted);
}

.usr-row-actions .usr-action-btn {
  min-width: 2.1rem;
  padding-inline: 0.55rem;
}

.usr-row-actions .usr-grants {
  min-width: auto;
  font-weight: 600;
}

.usr-action-danger:hover:not(:disabled) {
  border-color: rgba(224, 85, 85, 0.45);
  color: #f0a0a0;
}

.usr-admin-note {
  color: var(--muted);
  font-size: 0.85rem;
}

.usr-lock-btn {
  border-color: color-mix(in srgb, var(--warn, #c77800) 55%, transparent);
}

.usr-unlock-btn {
  border-color: color-mix(in srgb, var(--ok, #2d8a4e) 45%, transparent);
}

.usr-badge-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

.usr-badge.customer {
  border-color: rgba(125, 206, 160, 0.35);
  background: rgba(125, 206, 160, 0.1);
  color: #9fd4b8;
}

.usr-status.admin-role {
  color: var(--muted);
}

.usr-empty-state {
  margin-top: 0.75rem;
  padding: 2.75rem 1.5rem 2.25rem;
  text-align: center;
  border: 1px dashed rgba(62, 181, 255, 0.22);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(0, 124, 186, 0.1) 0%, transparent 55%),
    rgba(255, 255, 255, 0.02);
}

.usr-empty-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.usr-empty-desc {
  margin: 0 auto;
  max-width: 24rem;
}

.usr-empty-illus {
  position: relative;
  width: 5.5rem;
  height: 4.25rem;
  margin: 0 auto 1.35rem;
}

.usr-empty-illus::before,
.usr-empty-illus::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 124, 186, 0.14);
  border: 1px dashed rgba(62, 181, 255, 0.35);
}

.usr-empty-illus::before {
  width: 2.1rem;
  height: 2.1rem;
  left: 0.15rem;
  top: 0.35rem;
  box-shadow:
    2.35rem 0.55rem 0 -0.15rem rgba(0, 124, 186, 0.1),
    2.35rem 0.55rem 0 0 rgba(62, 181, 255, 0.22),
    4.55rem 0.15rem 0 -0.25rem rgba(0, 124, 186, 0.08),
    4.55rem 0.15rem 0 0 rgba(62, 181, 255, 0.18);
}

.usr-empty-illus::after {
  width: 5rem;
  height: 2rem;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border-radius: 999px 999px 0.65rem 0.65rem;
  background: linear-gradient(180deg, rgba(0, 124, 186, 0.12) 0%, rgba(0, 124, 186, 0.04) 100%);
}

/* Freigaben modal polish */

.usr-apikeys-card.premium-modal {
  max-width: 780px;
}

.usr-modal-subtitle {
  margin: 0.25rem 0 0;
  color: var(--muted);
}

.usr-modal-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1rem;
  margin: 0 1.35rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(62, 181, 255, 0.18);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 100% 120% at 0% 0%, rgba(0, 124, 186, 0.14) 0%, transparent 58%),
    rgba(255, 255, 255, 0.03);
}

.usr-modal-avatar {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #7ec8ff;
  background: var(--brand-gradient);
  box-shadow: 0 2px 14px rgba(0, 124, 186, 0.28);
}

.usr-modal-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 160px;
}

.usr-modal-hero-meta strong {
  font-size: 1rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usr-modal-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usr-modal-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-left: auto;
}

.usr-modal-stat {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #9fd4ff;
  background: rgba(0, 124, 186, 0.14);
  border: 1px solid rgba(62, 181, 255, 0.22);
  font-variant-numeric: tabular-nums;
}

.usr-modal-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.1rem 0.45rem;
  margin-left: 0.35rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  vertical-align: middle;
  color: #7ec8ff;
  background: rgba(0, 124, 186, 0.16);
  border: 1px solid rgba(62, 181, 255, 0.22);
}

.usr-apikeys-card .premium-modal-body {
  padding-top: 0.85rem;
}

.usr-apikeys-card .usr-modal-section {
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.12);
}

.usr-apikeys-card .usr-modal-section:first-of-type {
  margin-top: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 640px) {
  .usr-modal-hero {
    margin-inline: 1.15rem;
  }

  .usr-modal-stats {
    width: 100%;
    margin-left: 0;
  }

  .usr-modal-stat {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* --- Premium animated background (landing + admin) --- */

.premium-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 1100px 560px at 8% -6%, rgba(0, 124, 186, 0.22) 0%, transparent 58%),
    radial-gradient(ellipse 900px 480px at 92% 4%, rgba(0, 158, 253, 0.12) 0%, transparent 52%),
    radial-gradient(ellipse 600px 320px at 50% 100%, rgba(0, 124, 186, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #0b0f16 0%, var(--bg) 45%);
}

.premium-bg::before,
.premium-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.62;
  will-change: transform;
  animation: premium-orb-drift 20s ease-in-out infinite alternate;
}

.premium-bg::before {
  width: min(58vw, 760px);
  height: min(58vw, 760px);
  top: -16%;
  left: -14%;
  background: radial-gradient(circle, rgba(0, 124, 186, 0.38) 0%, transparent 68%);
}

.premium-bg::after {
  width: min(48vw, 640px);
  height: min(48vw, 640px);
  bottom: -12%;
  right: -10%;
  background: radial-gradient(circle, rgba(0, 158, 253, 0.24) 0%, transparent 68%);
  animation-delay: -10s;
  animation-direction: alternate-reverse;
}

.premium-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
  will-change: transform;
  animation: premium-orb-drift 24s ease-in-out infinite;
}

.premium-bg-orb--mid {
  width: min(36vw, 460px);
  height: min(36vw, 460px);
  top: 38%;
  left: 34%;
  background: radial-gradient(circle, rgba(62, 181, 255, 0.14) 0%, transparent 70%);
  animation-delay: -6s;
}

.premium-bg-orb--accent {
  width: min(28vw, 360px);
  height: min(28vw, 360px);
  top: 8%;
  right: 18%;
  background: radial-gradient(circle, rgba(0, 124, 186, 0.16) 0%, transparent 72%);
  animation-delay: -14s;
  animation-direction: alternate-reverse;
}

@keyframes premium-orb-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(3.5%, 2.5%) scale(1.05);
  }

  100% {
    transform: translate(-2.5%, -2%) scale(0.97);
  }
}

/* --- Admin login (/admin, hidden route) --- */

body.admin-login-body {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  background: transparent;
}

.admin-login-wrap {
  width: min(440px, 100%);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-login-card {
  margin: 0;
  width: 100%;
  padding: 1.75rem 1.65rem 1.5rem;
  background: rgba(14, 18, 28, 0.72);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    var(--shadow-lg),
    var(--shadow-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: admin-login-card-in 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes admin-login-card-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.admin-login-brand {
  text-align: center;
  margin-bottom: 1.15rem;
}

.admin-login-brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.admin-login-brand-link:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.admin-login-brand-link:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

.admin-login-logo {
  display: block;
  margin: 0 auto;
  max-width: min(280px, 85%);
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.admin-login-badge {
  display: block;
  width: fit-content;
  margin: 0 auto 0.85rem;
  padding: 0.32rem 0.72rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7ec8ff;
  background: rgba(0, 124, 186, 0.18);
  border: 1px solid rgba(0, 158, 253, 0.28);
  border-radius: 999px;
}

.admin-login-eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #009efd;
  text-align: center;
}

.admin-login-title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.35rem, 4vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-align: center;
  background: linear-gradient(135deg, #ffffff 0%, #b8dff8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.admin-login-subtitle {
  text-align: center;
  margin: 0 0 0.25rem;
}

.admin-login-card .form-field .lbl {
  margin-top: 0.85rem;
}

.admin-login-card .form-field:first-of-type .lbl {
  margin-top: 0.35rem;
}

.admin-login-actions {
  margin-top: 0.5rem;
}

.admin-login-actions .primary {
  width: 100%;
  justify-content: center;
  padding: 0.78rem 1.25rem;
  font-size: 1rem;
  box-shadow: 0 4px 24px rgba(0, 124, 186, 0.35);
}

.admin-back-link-wrap {
  margin: 1.1rem 0 0;
  text-align: center;
}

.admin-back-link {
  color: #009efd;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: color 0.18s ease;
}

.admin-back-link:hover {
  color: #7ec8ff;
  text-decoration: underline;
}

.admin-back-link:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  border-radius: 4px;
}

.admin-login-footer {
  width: min(440px, 100%);
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.st-cust-key {
  border: 1px solid var(--border);
  border-radius: var(--input-radius);
  padding: 0.85rem 1rem;
  margin-bottom: 0.65rem;
  background: rgba(0, 0, 0, 0.18);
}

.st-cust-key-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.st-cust-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.st-cust-dot.ok {
  background: #3d9a6a;
}

.st-cust-dot.bad {
  background: #c44;
}

.st-cust-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.5rem 0;
  font-size: 0.88rem;
}

.st-cust-mode label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

.st-cust-blocked {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0.35rem 0 0;
}

.usr-modal-section {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.usr-modal-section:first-child {
  margin-top: 0.5rem;
  padding-top: 0;
  border-top: none;
}

.usr-modal-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}

.usr-modal-section-head .st-category-title {
  margin: 0;
}

.usr-apikeys-form {
  margin: 0.5rem 0 0;
}

.usr-apikeys-cat {
  margin-bottom: 1.15rem;
}

.usr-apikeys-cat:last-child {
  margin-bottom: 0;
}

.usr-apikeys-cat-title {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.65rem;
  color: var(--muted);
}

.usr-apikeys-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.55rem;
}

.usr-apikey-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  font-size: 0.875rem;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.usr-apikey-card:has(.usr-apikey-grant:checked) {
  border-color: rgba(0, 158, 253, 0.35);
  background: rgba(0, 158, 253, 0.06);
  box-shadow: 0 0 0 1px rgba(0, 158, 253, 0.08);
}

.usr-apikey-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.usr-apikey-card-head label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1;
  cursor: pointer;
  font-weight: 500;
  line-height: 1.35;
}

.usr-apikey-own-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
}

.usr-apikeys-bulk,
.usr-modules-bulk {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.usr-modules-bulk .secondary,
.usr-apikeys-bulk .secondary {
  font-size: 0.82rem;
  padding: 0.45rem 0.75rem;
}

.usr-modules-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.55rem;
  margin: 0.65rem 0 0;
}

.usr-module-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  font-size: 0.875rem;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.usr-module-row:has(.usr-module-toggle:checked) {
  border-color: rgba(0, 158, 253, 0.38);
  background: rgba(0, 158, 253, 0.08);
  box-shadow: 0 0 0 1px rgba(0, 158, 253, 0.1);
}

.usr-module-row label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1;
  cursor: pointer;
  min-width: 0;
}

.usr-module-row label > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usr-module-icon {
  flex-shrink: 0;
  font-size: 1.15rem;
  line-height: 1;
}

.usr-switch {
  position: relative;
  flex-shrink: 0;
  width: 2.35rem;
  height: 1.35rem;
}

.usr-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.usr-switch-track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-strong);
  transition: background 0.22s ease, border-color 0.22s ease;
}

.usr-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.35rem - 6px);
  height: calc(1.35rem - 6px);
  border-radius: 50%;
  background: #c8d0dc;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.22s ease, background 0.22s ease;
}

.usr-switch input:checked + .usr-switch-track {
  background: var(--brand-gradient);
  border-color: transparent;
}

.usr-switch input:checked + .usr-switch-track::after {
  transform: translateX(1rem);
  background: #fff;
}

.usr-switch input:focus-visible + .usr-switch-track {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

@media (max-width: 640px) {
  .usr-row-main {
    flex: 1 1 100%;
  }

  .usr-actions {
    width: 100%;
    justify-content: stretch;
  }

  .usr-actions button {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
    font-size: 0.82rem;
    padding: 0.5rem 0.65rem;
  }

  .usr-apikeys-grid {
    grid-template-columns: 1fr;
  }

  .premium-modal-header,
  .premium-modal-body,
  .premium-modal-footer {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }
}

.module-blocked-card {
  max-width: 520px;
  margin: 1rem auto;
  text-align: center;
}

/* --- Admin design system (v50) — backend / admin GUI --- */

.admin-shell,
.st-admin-only {
  --admin-surface: rgba(12, 17, 26, 0.92);
  --admin-surface-elevated: rgba(16, 22, 34, 0.96);
  --admin-surface-hover: rgba(62, 181, 255, 0.06);
  --admin-border-glow: rgba(0, 158, 253, 0.28);
  --admin-accent-line: linear-gradient(90deg, #007cba 0%, #3eb5ff 55%, rgba(62, 181, 255, 0.35) 100%);
  --admin-kpi-glow:
    0 0 0 1px rgba(62, 181, 255, 0.1),
    0 8px 32px rgba(0, 124, 186, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --admin-table-sticky-bg: rgba(10, 14, 22, 0.94);
}

/* Shell & page chrome */

.admin-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-3) var(--space-5);
}

.admin-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.admin-page-title {
  margin: 0;
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, #ffffff 0%, #b8dff8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.admin-page-subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 42rem;
  line-height: 1.5;
}

.admin-page-eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #009efd;
}

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.admin-section {
  margin-top: var(--space-4);
}

.admin-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: var(--space-3);
}

.admin-section-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.admin-section-desc {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.admin-card {
  background: var(--admin-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}

.admin-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.admin-card-body {
  padding: 1.15rem 1.25rem;
}

.admin-card-foot {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.14);
}

/* Dashboard layout */

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}

.dashboard-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.dashboard-card {
  position: relative;
  background: var(--admin-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.dashboard-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--admin-accent-line);
  opacity: 0.65;
}

.dashboard-card:hover {
  border-color: var(--admin-border-glow);
  box-shadow: var(--admin-kpi-glow);
}

.dashboard-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.dashboard-card-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.dashboard-card-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(0, 124, 186, 0.14);
  border: 1px solid rgba(62, 181, 255, 0.22);
  color: var(--accent-text);
  font-size: 1.05rem;
}

.dashboard-card-metric {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text);
}

.dashboard-card-foot {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.82rem;
  color: var(--muted);
}

.dashboard-card--wide {
  grid-column: 1 / -1;
}

/* KPI cards */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}

.kpi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(ellipse 120% 80% at 100% 0%, rgba(0, 124, 186, 0.12) 0%, transparent 55%),
    var(--admin-surface-elevated);
  box-shadow: var(--admin-kpi-glow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition:
    border-color var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.kpi-card:hover {
  border-color: var(--admin-border-glow);
  transform: translateY(-1px);
}

.kpi-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.kpi-card-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.kpi-card-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(62, 181, 255, 0.12);
  color: var(--accent-text);
  font-size: 0.95rem;
}

.kpi-card-value {
  margin: 0;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kpi-card-unit {
  font-size: 0.72em;
  font-weight: 500;
  color: var(--muted);
  margin-left: 0.15rem;
}

.kpi-card-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 0.15rem;
}

.kpi-card-delta--up {
  color: var(--success);
}

.kpi-card-delta--down {
  color: var(--danger);
}

.kpi-card-delta--neutral {
  color: var(--muted);
}

.kpi-card-foot {
  margin-top: auto;
  padding-top: 0.65rem;
  font-size: 0.78rem;
  color: var(--muted);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.kpi-card--accent {
  border-color: rgba(0, 158, 253, 0.35);
  background:
    radial-gradient(ellipse 140% 90% at 0% 0%, rgba(0, 124, 186, 0.22) 0%, transparent 58%),
    var(--admin-surface-elevated);
}

.kpi-card--compact {
  padding: 0.85rem 1rem;
}

.kpi-card--compact .kpi-card-value {
  font-size: 1.35rem;
}

/* Status indicators */

.status-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--muted);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
}

.status-dot--healthy {
  background: #3d9a6a;
  box-shadow: 0 0 0 2px rgba(61, 154, 106, 0.2), 0 0 8px rgba(61, 154, 106, 0.45);
}

.status-dot--degraded {
  background: #d4a017;
  box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.2), 0 0 8px rgba(212, 160, 23, 0.35);
}

.status-dot--error {
  background: #e05555;
  box-shadow: 0 0 0 2px rgba(224, 85, 85, 0.2), 0 0 8px rgba(224, 85, 85, 0.4);
}

.status-dot--unknown {
  background: var(--muted);
}

.status-dot--pulse {
  animation: status-dot-pulse 2s ease-in-out infinite;
}

@keyframes status-dot-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.65;
    transform: scale(0.92);
  }
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  white-space: nowrap;
}

.status-badge--healthy {
  color: #7dcea0;
  border-color: rgba(125, 206, 160, 0.35);
  background: rgba(125, 206, 160, 0.1);
}

.status-badge--degraded {
  color: #e8c547;
  border-color: rgba(232, 197, 71, 0.35);
  background: rgba(232, 197, 71, 0.1);
}

.status-badge--error {
  color: #f0a0a0;
  border-color: rgba(240, 160, 160, 0.35);
  background: rgba(240, 160, 160, 0.1);
}

.status-badge--warning {
  color: var(--warning);
  border-color: rgba(252, 211, 77, 0.35);
  background: rgba(252, 211, 77, 0.08);
}

.status-badge--neutral {
  color: var(--muted);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}

.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.status-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.875rem;
}

.status-banner--degraded {
  border-color: rgba(232, 197, 71, 0.35);
  background: rgba(232, 197, 71, 0.08);
  color: #f0d878;
}

.status-banner--error {
  border-color: rgba(240, 160, 160, 0.35);
  background: rgba(240, 160, 160, 0.08);
  color: #f0b0b0;
}

.status-banner--healthy {
  border-color: rgba(125, 206, 160, 0.3);
  background: rgba(125, 206, 160, 0.06);
  color: #9fd4b8;
}

.status-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.status-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.875rem;
}

.status-list-item-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-secondary);
}

/* Premium data tables */

.admin-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.admin-table-search {
  flex: 1 1 220px;
  max-width: 320px;
}

.admin-table-wrap {
  overflow: auto;
  max-height: min(68vh, 720px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-inset);
  -webkit-overflow-scrolling: touch;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.admin-table-wrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.admin-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
}

.admin-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.7rem 0.85rem;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--admin-table-sticky-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
  user-select: none;
}

.admin-table thead th.sortable {
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}

.admin-table thead th.sortable:hover {
  color: var(--accent-text);
}

.admin-table thead th.sorted-asc::after,
.admin-table thead th.sorted-desc::after {
  margin-left: 0.35rem;
  font-size: 0.65rem;
  opacity: 0.85;
}

.admin-table thead th.sorted-asc::after {
  content: "▲";
}

.admin-table thead th.sorted-desc::after {
  content: "▼";
}

.admin-table tbody td {
  padding: 0.7rem 0.85rem;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}

.admin-table tbody tr {
  transition: background var(--duration-fast) var(--ease-out);
}

.admin-table--zebra tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.admin-table tbody tr:hover {
  background: var(--admin-surface-hover);
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-table tbody tr.is-selected {
  background: rgba(0, 158, 253, 0.1);
  box-shadow: inset 3px 0 0 var(--accent);
}

.admin-table-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.admin-table-row-actions button {
  font-size: 0.78rem;
  padding: 0.35rem 0.65rem;
  min-height: 2rem;
}

.admin-table-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--muted);
}

.admin-table-empty-icon {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: rgba(0, 124, 186, 0.12);
  border: 1px solid rgba(62, 181, 255, 0.2);
  color: var(--accent-text);
}

.admin-table-empty-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.admin-table-empty-desc {
  margin: 0;
  font-size: 0.875rem;
  max-width: 28rem;
  margin-inline: auto;
}

/* Drawers */

.admin-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background:
    radial-gradient(ellipse 640px 320px at 100% 50%, rgba(0, 124, 186, 0.1) 0%, transparent 60%),
    rgba(4, 6, 10, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.28s var(--ease-out),
    visibility 0.28s var(--ease-out);
}

.admin-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.admin-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 1101;
  width: min(420px, 100%);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--admin-surface-elevated);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg), -8px 0 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-drawer--right {
  right: 0;
  border-left: 1px solid var(--admin-border-glow);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.admin-drawer--left {
  left: 0;
  border-right: 1px solid var(--admin-border-glow);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  transform: translateX(-100%);
}

.admin-drawer-overlay.is-open .admin-drawer {
  transform: translateX(0);
}

.admin-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.35rem 1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.admin-drawer-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.admin-drawer-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.admin-drawer-close {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition:
    color var(--duration-normal) var(--ease-out),
    background var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
}

.admin-drawer-close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--admin-border-glow);
}

.admin-drawer-body {
  flex: 1;
  overflow: auto;
  padding: 1.15rem 1.35rem;
  -webkit-overflow-scrolling: touch;
}

.admin-drawer-footer {
  padding: 1rem 1.35rem 1.25rem;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.14);
}

/* Toasts */

.admin-toast-stack {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top, 0px));
  right: max(1rem, env(safe-area-inset-right, 0px));
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: min(380px, calc(100vw - 2rem));
  pointer-events: none;
}

.admin-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--admin-surface-elevated);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  pointer-events: auto;
  animation: admin-toast-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes admin-toast-in {
  from {
    opacity: 0;
    transform: translateX(12px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.admin-toast.is-leaving {
  animation: admin-toast-out 0.22s var(--ease-out) forwards;
}

@keyframes admin-toast-out {
  to {
    opacity: 0;
    transform: translateX(12px) scale(0.96);
  }
}

.admin-toast-icon {
  flex-shrink: 0;
  width: 1.65rem;
  height: 1.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0.95rem;
}

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

.admin-toast-title {
  margin: 0 0 0.15rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.admin-toast-message {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.admin-toast-hint {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.admin-toast-close {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  min-height: auto;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  border-radius: 6px;
  cursor: pointer;
}

.admin-toast-close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.admin-toast--success {
  border-color: rgba(125, 206, 160, 0.35);
}

.admin-toast--success .admin-toast-icon {
  background: rgba(125, 206, 160, 0.14);
  color: #7dcea0;
}

.admin-toast--error {
  border-color: rgba(240, 160, 160, 0.35);
}

.admin-toast--error .admin-toast-icon {
  background: rgba(240, 160, 160, 0.14);
  color: #f0a0a0;
}

.admin-toast--warning {
  border-color: rgba(252, 211, 77, 0.35);
}

.admin-toast--warning .admin-toast-icon {
  background: rgba(252, 211, 77, 0.12);
  color: var(--warning);
}

.admin-toast--info {
  border-color: rgba(62, 181, 255, 0.35);
}

.admin-toast--info .admin-toast-icon {
  background: rgba(62, 181, 255, 0.14);
  color: var(--accent-text);
}

/* Admin badges (distinct from customer .badge) */

.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  white-space: nowrap;
}

.admin-badge--primary {
  border-color: rgba(62, 181, 255, 0.35);
  background: rgba(62, 181, 255, 0.12);
  color: var(--accent-text);
}

.admin-badge--success {
  border-color: rgba(125, 206, 160, 0.35);
  background: rgba(125, 206, 160, 0.1);
  color: #7dcea0;
}

.admin-badge--warning {
  border-color: rgba(252, 211, 77, 0.35);
  background: rgba(252, 211, 77, 0.1);
  color: var(--warning);
}

.admin-badge--danger {
  border-color: rgba(240, 160, 160, 0.35);
  background: rgba(240, 160, 160, 0.1);
  color: #f0a0a0;
}

.admin-badge--neutral {
  color: var(--muted);
}

.admin-badge--role-admin {
  border-color: rgba(154, 184, 255, 0.45);
  background: rgba(61, 98, 184, 0.16);
  color: #9ab8ff;
}

.admin-badge--role-customer {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}

.admin-badge--outline {
  background: transparent;
}

/* Skeleton loaders */

.admin-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.admin-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.06) 55%,
    transparent 100%
  );
  animation: admin-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes admin-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.admin-skeleton--text {
  height: 0.85rem;
  width: 100%;
  border-radius: 6px;
}

.admin-skeleton--title {
  height: 1.25rem;
  width: 55%;
  border-radius: 6px;
}

.admin-skeleton--avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.admin-skeleton--kpi {
  height: 4.5rem;
  width: 100%;
  border-radius: var(--radius-lg);
}

.admin-skeleton--row {
  height: 2.75rem;
  width: 100%;
  border-radius: 8px;
  margin-bottom: 0.45rem;
}

.admin-skeleton-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.kpi-grid.is-loading .kpi-card {
  pointer-events: none;
}

.kpi-grid.is-loading .kpi-card-value,
.kpi-grid.is-loading .kpi-card-label {
  visibility: hidden;
}

.kpi-grid.is-loading .kpi-card {
  min-height: 6.5rem;
}

.kpi-grid.is-loading .kpi-card::after {
  content: "";
  position: absolute;
  inset: 1rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  animation: admin-skeleton-shimmer 1.4s ease-in-out infinite;
  overflow: hidden;
}

/* Empty states */

.admin-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
}

.admin-empty-icon {
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  background:
    radial-gradient(circle at 30% 30%, rgba(62, 181, 255, 0.2) 0%, transparent 60%),
    rgba(0, 124, 186, 0.12);
  border: 1px solid rgba(62, 181, 255, 0.22);
  color: var(--accent-text);
}

.admin-empty-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
}

.admin-empty-desc {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
  max-width: 24rem;
}

@media (prefers-reduced-motion: reduce) {
  .admin-toast,
  .admin-drawer,
  .admin-drawer-overlay,
  .status-dot--pulse,
  .admin-skeleton::after,
  .kpi-grid.is-loading .kpi-card::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 900px) {
  .dashboard-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .admin-shell {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }

  .kpi-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .admin-table-wrap {
    max-height: none;
    border-radius: var(--radius-sm);
  }

  .admin-table thead {
    display: none;
  }

  .admin-table--cards tbody tr {
    display: block;
    margin-bottom: 0.65rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--admin-surface);
  }

  .admin-table--cards tbody tr:hover {
    background: var(--admin-surface-hover);
  }

  .admin-table--cards tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-bottom: none;
  }

  .admin-table--cards tbody td::before {
    content: attr(data-label);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    flex-shrink: 0;
  }

  .admin-drawer {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }

  .admin-toast-stack {
    left: max(1rem, env(safe-area-inset-left, 0px));
    right: max(1rem, env(safe-area-inset-right, 0px));
    width: auto;
  }

  .admin-toolbar button,
  .admin-table-row-actions button {
    min-height: 44px;
  }
}

/* --- Mobile responsive (Multi Video Manager) --- */

@media (max-width: 767px) {
  body {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }

  .shell {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
    padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
    max-width: 100%;
  }

  .head {
    margin-left: 0;
    margin-right: 0;
    margin-top: -1rem;
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .head h1 {
    font-size: 1.35rem;
  }

  .head-right,
  .head-auth {
    width: 100%;
    justify-content: flex-start;
  }

  .head-auth button {
    flex: 1 1 auto;
    min-width: 0;
  }

  .card {
    padding: 1rem 1.1rem;
  }

  input[type="url"],
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="search"],
  input[type="number"],
  input[type="datetime-local"],
  select {
    min-width: 0;
    width: 100%;
  }

  /* Horizontal tab bars only — do not clip the vertical .rail-nav sidebar */
  .tabs:not(.rail-nav),
  .tabs-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 0.35rem;
    max-width: 100%;
  }

  .tabs:not(.rail-nav)::-webkit-scrollbar,
  .tabs-scroll::-webkit-scrollbar {
    display: none;
  }

  .tabs:not(.rail-nav) .tab,
  .tabs-scroll .tab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0.55rem 0.95rem;
    font-size: 0.82rem;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  button,
  .tab,
  .landing-cta,
  .mdl-lang-trigger,
  .mdl-lang-option,
  .accordion,
  .results a.dl-btn {
    min-height: 44px;
  }

  button {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }

  .yt-item,
  .yt-item.has-check,
  .bt-item {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .yt-item img,
  .yt-item-no-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .yt-item-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .yt-item-actions button {
    flex: 1 1 calc(50% - 0.2rem);
    min-height: 44px;
  }

  .bt-item-check,
  .yt-item-check {
    padding: 0.25rem 0;
  }

  .bt-item-check input,
  .yt-item-check input {
    width: 1.25rem;
    height: 1.25rem;
  }

  .mdl-lang-bar {
    left: max(1rem, env(safe-area-inset-left, 0px));
    right: auto;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }

  .mdl-lang-trigger {
    min-height: 44px;
    padding: 0.55rem 0.95rem 0.55rem 1rem;
  }

  .mdl-lang-option {
    min-height: 44px;
    padding: 0.65rem 1rem;
  }

  .mdl-modal {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .mdl-modal-inner {
    min-height: 100%;
    max-height: none;
    overflow-y: auto;
    padding:
      max(1rem, env(safe-area-inset-top, 0px))
      max(1rem, env(safe-area-inset-right, 0px))
      max(1rem, env(safe-area-inset-bottom, 0px))
      max(1rem, env(safe-area-inset-left, 0px));
  }

  .mdl-modal-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .mdl-modal-actions button {
    width: 100%;
  }

  .auth-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .auth-card,
  .auth-overlay .auth-card,
  .usr-apikeys-card {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    overflow-y: auto;
    padding:
      max(1.25rem, env(safe-area-inset-top, 0px))
      max(1.25rem, env(safe-area-inset-right, 0px))
      max(1.25rem, env(safe-area-inset-bottom, 0px))
      max(1.25rem, env(safe-area-inset-left, 0px));
  }

  .usr-apikeys-form {
    max-height: none;
  }

  .landing-page {
    padding:
      max(1rem, env(safe-area-inset-top, 0px))
      max(1rem, env(safe-area-inset-right, 0px))
      calc(5rem + env(safe-area-inset-bottom, 0px))
      max(1rem, env(safe-area-inset-left, 0px));
    max-width: 100%;
  }

  .landing-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .landing-main {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .landing-content {
    gap: 2rem;
  }

  .landing-feature-grid {
    grid-template-columns: 1fr;
  }

  .landing-aside {
    order: -1;
  }

  .landing-login {
    position: static;
    top: auto;
    width: 100%;
  }

  .landing-proof {
    flex-direction: column;
    align-items: stretch;
  }

  .landing-proof-divider {
    display: none;
  }

  .landing-proof-item {
    flex: 1 1 auto;
  }

  .landing-cta {
    width: 100%;
  }

  .landing-footer {
    margin-top: 2rem;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  body.admin-login-body {
    padding: 0;
    align-items: stretch;
  }

  body.admin-login-body .admin-login-wrap {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
  }

  body.admin-login-body .admin-login-card {
    min-height: 100dvh;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding:
      max(1.25rem, env(safe-area-inset-top, 0px))
      max(1.25rem, env(safe-area-inset-right, 0px))
      max(1.25rem, env(safe-area-inset-bottom, 0px))
      max(1.25rem, env(safe-area-inset-left, 0px));
  }

  .yu-cache-wrap {
    -webkit-overflow-scrolling: touch;
  }

  .st-oauth-redirect-uri {
    flex: 1 1 100%;
    min-width: 0;
  }

  .bulk-bar,
  .bt-bulk-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .bulk-count,
  .bt-bulk-count {
    margin-right: 0;
  }

  .app-chrome {
    margin-left: 0;
    margin-right: 0;
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }

  .tab-bar {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  .shell,
  .landing-page,
  .app-chrome {
    overflow-x: clip;
  }

  .auth-overlay.premium-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .premium-modal,
  .auth-card.premium-modal,
  .usr-apikeys-card.premium-modal {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .premium-modal-header {
    padding:
      max(1.25rem, env(safe-area-inset-top, 0px))
      max(1.15rem, env(safe-area-inset-right, 0px))
      1rem
      max(1.15rem, env(safe-area-inset-left, 0px));
  }

  .premium-modal-body {
    flex: 1;
    padding-left: max(1.15rem, env(safe-area-inset-left, 0px));
    padding-right: max(1.15rem, env(safe-area-inset-right, 0px));
  }

  .premium-modal-footer {
    padding:
      1rem
      max(1.15rem, env(safe-area-inset-right, 0px))
      max(1.25rem, env(safe-area-inset-bottom, 0px))
      max(1.15rem, env(safe-area-inset-left, 0px));
  }

  .premium-modal-close {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }

  .premium-modal-footer .row {
    flex-direction: column;
    align-items: stretch;
  }

  .premium-modal-footer button {
    width: 100%;
    min-height: 44px;
  }

  .usr-actions button {
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .shell {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
  }

  .head h1 {
    font-size: 1.2rem;
  }

  .sub {
    font-size: 0.875rem;
  }
}

/* --- Mobile admin / backend GUI (v50) --- */

@media (max-width: 767px) {
  .admin-dashboard,
  .admin-panel {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
  }

  .admin-dashboard-head,
  .dashboard-head,
  .st-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .admin-dashboard-head .secondary,
  .admin-dashboard-head .primary,
  .dashboard-head button,
  .st-head > button {
    width: 100%;
    min-height: 44px;
  }

  /* Dashboard KPI stack */
  .dashboard-kpi-grid,
  .kpi-grid,
  .admin-dashboard-kpis,
  .st-health-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .kpi-card,
  .dashboard-kpi,
  .admin-kpi {
    min-width: 0;
    padding: 0.85rem 1rem;
  }

  .kpi-card-value,
  .dashboard-kpi-value {
    font-size: clamp(1.35rem, 6vw, 1.75rem);
  }

  .dashboard-status-row,
  .admin-status-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  /* Settings forms full width */
  .settings-form,
  #stSettingsForm,
  #stCustKeysForm,
  .admin-settings-form,
  .st-fields,
  .st-token-row,
  .st-field,
  .st-oauth-redirect-callout,
  .st-mail-callout,
  .st-cust-key,
  .admin-settings .form-field {
    max-width: none;
    width: 100%;
  }

  .st-field-head {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .st-oauth-redirect-row {
    flex-direction: column;
    align-items: stretch;
  }

  .st-oauth-redirect-row button,
  .st-copy-btn {
    width: 100%;
    min-height: 44px;
  }

  .row.st-actions,
  .admin-settings-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .row.st-actions button,
  .admin-settings-actions button {
    width: 100%;
    min-height: 44px;
  }

  /* Data tables → card list */
  .admin-table-wrap,
  .data-table-wrap,
  .usr-table-wrap {
    overflow-x: visible;
    margin-left: calc(-1 * max(0.75rem, env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * max(0.75rem, env(safe-area-inset-right, 0px)));
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
  }

  .admin-table,
  table.data-table,
  .usr-admin-table {
    display: block;
    width: 100%;
    border-collapse: separate;
  }

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

  .admin-table tbody,
  table.data-table tbody,
  .usr-admin-table tbody {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }

  .admin-table tbody tr,
  table.data-table tbody tr,
  .usr-admin-table tbody tr {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: var(--shadow-sm);
  }

  .admin-table tbody tr:hover,
  table.data-table tbody tr:hover,
  .usr-admin-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  .admin-table tbody td,
  table.data-table tbody td,
  .usr-admin-table tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.3rem 0;
    border: none;
    text-align: right;
    min-width: 0;
  }

  .admin-table tbody td::before,
  table.data-table tbody td::before,
  .usr-admin-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    text-align: left;
    line-height: 1.35;
  }

  .admin-table tbody td[data-label=""]::before,
  table.data-table tbody td[data-label=""]::before,
  .usr-admin-table tbody td[data-label=""]::before,
  .admin-table tbody td.admin-table-actions::before,
  .admin-table tbody td.usr-table-actions::before {
    display: none;
  }

  .admin-table tbody td.admin-table-actions,
  .admin-table tbody td.usr-table-actions,
  table.data-table tbody td.admin-table-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding-top: 0.5rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--border);
  }

  .admin-table tbody td.admin-table-actions button,
  .admin-table tbody td.usr-table-actions button,
  table.data-table tbody td.admin-table-actions button {
    width: 100%;
    min-height: 44px;
  }

  /* Card-list mode (JS-rendered) */
  .admin-table-cards,
  .data-table-cards {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }

  .admin-table-card,
  .data-table-card {
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: var(--shadow-sm);
  }

  .admin-table-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.25rem 0;
    font-size: 0.875rem;
  }

  .admin-table-card-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
  }

  .admin-table-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
  }

  .admin-table-card-actions button {
    width: 100%;
    min-height: 44px;
  }

  /* Job monitor scrollable */
  .job-monitor,
  .admin-job-monitor {
    min-width: 0;
  }

  .job-monitor-filters,
  .admin-job-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    gap: 0.4rem;
    padding-bottom: 0.35rem;
    margin-bottom: 0.5rem;
    scrollbar-width: none;
  }

  .job-monitor-filters::-webkit-scrollbar,
  .admin-job-filters::-webkit-scrollbar {
    display: none;
  }

  .job-monitor-filters button,
  .admin-job-filters button,
  .job-monitor-filter {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 44px;
    white-space: nowrap;
  }

  .job-monitor-body,
  .job-monitor-list,
  .admin-job-list {
    max-height: min(58vh, calc(100dvh - 16rem - env(safe-area-inset-bottom, 0px)));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-right: 0.15rem;
    scroll-padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .job-monitor-card,
  .admin-job-card {
    min-width: 0;
  }

  .job-monitor-card-actions,
  .admin-job-card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .job-monitor-card-actions button,
  .admin-job-card-actions button {
    width: 100%;
    min-height: 44px;
  }

  /* Users admin toolbar */
  .usr-admin-toolbar,
  .admin-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .usr-admin-toolbar input,
  .admin-toolbar input,
  .usr-admin-search {
    width: 100%;
    min-height: 44px;
  }

  .usr-admin-toolbar button,
  .admin-toolbar button {
    width: 100%;
    min-height: 44px;
  }

  /* Health widget & system drawer */
  .health-widget,
  .health-widget-trigger {
    min-width: 44px;
    min-height: 44px;
  }

  .admin-drawer,
  .system-drawer {
    width: 100%;
    max-width: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .admin-drawer-body,
  .system-drawer-body {
    max-height: calc(100dvh - 5.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-drawer-close,
  .system-drawer-close {
    min-width: 44px;
    min-height: 44px;
  }

  /* Toasts — safe area above lang bar */
  .admin-toast-stack,
  .toast-stack {
    left: max(1rem, env(safe-area-inset-left, 0px));
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Touch targets — admin controls */
  .admin-dashboard button,
  .admin-panel button,
  .kpi-card button,
  .status-badge-btn,
  .admin-test-btn,
  .st-test-btn {
    min-height: 44px;
  }

  .admin-dashboard input,
  .admin-dashboard select,
  .admin-panel input,
  .admin-panel select,
  .admin-settings-form input,
  .admin-settings-form select {
    min-height: 44px;
  }

  .usr-switch {
    width: 2.75rem;
    height: 1.65rem;
  }

  .usr-switch input:checked + .usr-switch-track::after {
    transform: translateX(1.1rem);
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
  }

  .user-menu-trigger {
    min-height: 44px;
  }

  .user-menu-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .job-monitor-body,
  .job-monitor-list,
  .admin-job-list {
    max-height: min(52vh, calc(100dvh - 14rem - env(safe-area-inset-bottom, 0px)));
  }

  .kpi-card,
  .dashboard-kpi,
  .admin-kpi {
    padding: 0.75rem 0.85rem;
  }

  .admin-table tbody tr,
  table.data-table tbody tr,
  .usr-admin-table tbody tr,
  .admin-table-card,
  .data-table-card {
    padding: 0.75rem 0.85rem;
  }
}

/* --- Premium UX: toasts, form errors, health banner (v50) --- */

.mdl-toast-host {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top, 0px));
  right: max(1rem, env(safe-area-inset-right, 0px));
  z-index: 12000;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}

.mdl-toast {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.65rem 0.75rem;
  align-items: start;
  padding: 0.85rem 0.75rem 0.85rem 0.85rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: rgba(14, 18, 26, 0.94);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  opacity: 0;
  transform: translateX(1rem) scale(0.98);
  transition:
    opacity 0.28s var(--ease-out),
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: auto;
  overflow: hidden;
}

.mdl-toast--visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.mdl-toast--leaving {
  opacity: 0;
  transform: translateX(0.75rem) scale(0.96);
}

.mdl-toast-accent {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.mdl-toast--success .mdl-toast-accent {
  background: linear-gradient(180deg, #34d399, var(--success));
}

.mdl-toast--error .mdl-toast-accent {
  background: linear-gradient(180deg, #f87171, var(--danger));
}

.mdl-toast--warning .mdl-toast-accent {
  background: linear-gradient(180deg, #fbbf24, var(--warning));
}

.mdl-toast--info .mdl-toast-accent {
  background: var(--brand-gradient);
}

.mdl-toast-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-left: 0.35rem;
}

.mdl-toast--success .mdl-toast-icon {
  background: rgba(110, 231, 160, 0.16);
  color: var(--success);
}

.mdl-toast--error .mdl-toast-icon {
  background: rgba(252, 165, 165, 0.14);
  color: var(--danger);
}

.mdl-toast--warning .mdl-toast-icon {
  background: rgba(252, 211, 77, 0.14);
  color: var(--warning);
}

.mdl-toast--info .mdl-toast-icon {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.mdl-toast-body {
  min-width: 0;
  padding-top: 0.05rem;
}

.mdl-toast-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.mdl-toast-hint {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}

.mdl-toast-code {
  margin: 0.25rem 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  opacity: 0.75;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.mdl-form-error-code {
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.mdl-toast-close {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.15rem 0.35rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.mdl-toast-close:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.hint.mdl-form-error,
.hint.err.mdl-form-error {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid rgba(252, 165, 165, 0.28);
  background: rgba(127, 29, 29, 0.18);
  color: var(--danger);
}

.mdl-form-error-detail {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.4;
}

.mdl-form-error-hint {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-secondary);
  font-weight: 400;
}

.hint.mdl-form-hint--success {
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid rgba(110, 231, 160, 0.28);
  background: rgba(6, 78, 59, 0.2);
  color: var(--success);
}

input.mdl-input-invalid,
textarea.mdl-input-invalid,
select.mdl-input-invalid {
  border-color: rgba(252, 165, 165, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(252, 165, 165, 0.2);
}

.mdl-health-banner {
  margin: 0 var(--space-3) var(--space-2);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(252, 211, 77, 0.35);
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.42), rgba(14, 18, 26, 0.92));
  box-shadow: var(--shadow-md);
  animation: mdl-banner-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.mdl-health-banner.hidden {
  display: none;
}

@keyframes mdl-banner-in {
  from {
    opacity: 0;
    transform: translateY(-0.35rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mdl-health-banner-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  flex-wrap: wrap;
}

.mdl-health-banner-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

.mdl-health-banner-text {
  flex: 1 1 12rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.mdl-health-banner-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--warning);
}

.mdl-health-banner-detail {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.mdl-health-banner-action {
  flex-shrink: 0;
  font-size: 0.8125rem;
}

.mdl-health-banner-dismiss {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-left: auto;
}

.mdl-health-banner-dismiss:hover {
  color: var(--text);
  background: var(--surface-hover);
}

body.mdl-health-degraded .app-chrome {
  border-top: 2px solid rgba(252, 211, 77, 0.35);
}

@media (max-width: 640px) {
  .mdl-toast-host {
    left: max(0.75rem, env(safe-area-inset-left, 0px));
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    width: auto;
  }

  .mdl-health-banner-inner {
    padding: 0.65rem 0.75rem;
  }

  .mdl-health-banner-action {
    width: 100%;
  }
}

/* ==========================================================================
   Broadcast Ink — redesign polish layer (responsive + motion)
   ========================================================================== */

@keyframes landing-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.shell.hidden {
  animation: none;
}

.page-context {
  padding: 0.65rem 0 0.85rem;
  border-bottom: 1px solid transparent;
}

.breadcrumb-item--current {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.head h1,
.st-head h2,
.st-zone-title,
.usr-admin-card > h2,
.usr-audit-card > h2 {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}

.user-menu-trigger {
  border-radius: var(--radius);
}

.user-avatar {
  font-family: var(--font-display);
  font-weight: 700;
}

.mdl-lang-trigger {
  border-radius: var(--radius);
}

.mdl-lang-list {
  border-radius: var(--radius);
}

.tab-bar::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0;
  bottom: 0.3rem;
  width: 2.25rem;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(6, 9, 15, 0.88));
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  opacity: 0.9;
}

@media (min-width: 1100px) {
  .tab-bar::after {
    display: none;
  }
}

.job-monitor-card {
  border-radius: var(--radius-lg);
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.job-monitor-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.landing-features-section,
.landing-proof {
  animation: landing-rise 0.65s var(--ease-out) 0.12s both;
}

.landing-aside {
  animation: landing-rise 0.6s var(--ease-out) 0.05s both;
}

/* Tablet */
@media (max-width: 959px) and (min-width: 641px) {
  .shell {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .app-header-title {
    font-size: 1.05rem;
  }

  .landing-main {
    gap: 2rem;
  }

  .card {
    padding: 1.35rem 1.2rem;
  }
}

/* Mobile shell polish */
@media (max-width: 640px) {
  .app-header {
    gap: 0.75rem;
    padding: 0.7rem 0 0.55rem;
  }

  .app-header-actions {
    gap: 0.45rem;
    width: 100%;
    justify-content: flex-start;
  }

  .health-widget-label,
  .job-monitor-trigger-label {
    display: none;
  }

  .tabs {
    border-radius: var(--radius);
    padding: 0.25rem;
  }

  .tab-bar::after {
    width: 1.75rem;
  }

  .card {
    padding: 1.15rem 1rem;
    border-radius: var(--radius-lg);
  }

  .landing-hero-actions {
    margin-top: 1.5rem;
  }

  .landing-cta {
    width: 100%;
  }

  .landing-login .row,
  .landing-login .row .primary {
    width: 100%;
  }

  .landing-feature-card {
    padding: 1.05rem 1.1rem 1.15rem;
  }

  .page-context {
    padding: 0.5rem 0 0.65rem;
  }

  .breadcrumb {
    font-size: 0.75rem;
  }
}

/* Narrow phones */
@media (max-width: 400px) {
  .app-header-logo-img {
    max-width: 5.5rem;
  }

  .app-header-title {
    font-size: 0.98rem;
  }

  .job-monitor-filters {
    gap: 0.3rem;
  }

  .job-monitor-filter {
    padding: 0.35rem 0.55rem;
    font-size: 0.72rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   App shell — left rail IA + mobile drawer (Agent 3)
   Groups: Acquire / Produce / Distribute / Live / System
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --rail-width: 17.5rem;
  --rail-width-collapsed: 4.25rem;
  --topbar-height: 3.5rem;
  --z-rail: 240;
  --z-nav-scrim: 230;
}

body.app-mode {
  overflow: hidden;
}

body.app-mode > .mdl-lang-bar--dock {
  display: none;
}

.shell.app-layout {
  --shell-max: none;
  max-width: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  grid-template-rows: 100dvh;
  height: 100dvh;
  min-height: 100dvh;
  animation: none;
}

.shell.app-layout[data-rail-collapsed="true"] {
  grid-template-columns: var(--rail-width-collapsed) minmax(0, 1fr);
}

.nav-scrim {
  display: none;
}

.app-rail {
  grid-column: 1;
  grid-row: 1;
  z-index: var(--z-rail);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(11, 16, 24, 0.98) 0%, rgba(8, 12, 19, 0.96) 100%);
  border-right: 1px solid var(--border);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02);
}

.rail-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
  padding: 0.85rem 0.85rem 0.75rem;
  border-bottom: 1px solid var(--border);
  min-height: var(--topbar-height);
}

.rail-logo .app-header-logo-img {
  height: 1.75rem;
  max-width: 5.5rem;
}

.rail-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  gap: 0.1rem;
}

.rail-product {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.rail-org {
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.rail-collapse,
.rail-close,
.nav-open {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.rail-collapse:hover,
.rail-close:hover,
.nav-open:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text);
}

.rail-close {
  display: none;
}

.rail-collapse-icon,
.rail-close-icon,
.nav-open-bars {
  display: block;
  width: 1rem;
  height: 1rem;
  position: relative;
}

.rail-collapse-icon::before,
.rail-collapse-icon::after {
  content: "";
  position: absolute;
  left: 0.15rem;
  width: 0.7rem;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.rail-collapse-icon::before {
  top: 0.28rem;
  box-shadow: 0 0.28rem 0 currentColor;
}

.rail-collapse-icon::after {
  top: 0.56rem;
  width: 0.45rem;
}

.rail-close-icon::before,
.rail-close-icon::after {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.45rem;
  width: 0.8rem;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.rail-close-icon::before {
  transform: rotate(45deg);
}

.rail-close-icon::after {
  transform: rotate(-45deg);
}

.nav-open-bars::before,
.nav-open-bars::after {
  content: "";
  position: absolute;
  left: 0.1rem;
  width: 0.8rem;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  box-shadow: 0 0.28rem 0 currentColor;
}

.nav-open-bars::before {
  top: 0.22rem;
}

.nav-open-bars::after {
  top: 0.5rem;
  box-shadow: none;
  width: 0.55rem;
}

.rail-nav.tabs {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0.65rem 0.55rem 1.25rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(168, 190, 214, 0.06);
}

.nav-group:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.nav-group-toggle:hover {
  background: var(--surface-hover);
  color: var(--text-secondary);
}

.nav-group-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.nav-group-chevron {
  width: 0.55rem;
  height: 0.55rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-out);
  opacity: 0.7;
}

.nav-group[data-expanded="true"] .nav-group-chevron,
.nav-group.is-expanded .nav-group-chevron {
  transform: rotate(225deg);
  margin-top: 0.2rem;
}

/* Fail-open: items visible unless the group is explicitly collapsed.
   (Previously display:none by default hid all tabs if expand attrs were missing.) */
.nav-group-items,
.nav-group.is-expanded .nav-group-items,
.nav-group[data-expanded="true"] .nav-group-items {
  display: flex !important;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0 0.15rem 0.25rem;
  min-height: 0;
  visibility: visible;
  opacity: 1;
}

.nav-group[data-expanded="false"] .nav-group-items {
  display: none !important;
}

.rail-nav .tab {
  display: block;
  width: 100%;
  flex: 0 0 auto;
  text-align: left;
  white-space: normal;
  line-height: 1.3;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  scroll-snap-align: none;
}

.rail-nav .tab.active {
  box-shadow: inset 3px 0 0 var(--brand-accent), 0 2px 14px rgba(6, 90, 134, 0.28);
}

.app-rail[data-collapsed="true"] .rail-brand-text {
  display: none;
}

.app-rail[data-collapsed="true"] .rail-nav .tab {
  padding: 0.55rem 0.4rem;
  font-size: 0.7rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-rail[data-collapsed="true"] .nav-group-toggle {
  justify-content: center;
  padding: 0.4rem;
}

.app-rail[data-collapsed="true"] .nav-group-label {
  display: none;
}

.app-rail[data-collapsed="true"] .nav-group-chevron {
  margin: 0;
}

.app-stage {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-shrink: 0;
  min-height: var(--topbar-height);
  padding: 0.55rem clamp(0.85rem, 2vw, 1.35rem);
  background:
    linear-gradient(180deg, rgba(6, 9, 15, 0.97) 0%, rgba(8, 12, 19, 0.92) 85%, transparent 100%);
  backdrop-filter: blur(var(--chrome-blur)) saturate(1.12);
  -webkit-backdrop-filter: blur(var(--chrome-blur)) saturate(1.12);
  border-bottom: 1px solid var(--border);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1 1 auto;
}

.nav-open {
  display: none;
}

.topbar-logo {
  display: none;
}

.topbar-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.05rem;
}

.topbar-product {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-context {
  min-width: 0;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

.breadcrumb-item--current {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(42vw, 22rem);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.mdl-lang-bar--header {
  position: static;
  left: auto;
  bottom: auto;
  pointer-events: auto;
  font-size: 0.8125rem;
}

.mdl-lang-bar--header .mdl-lang-panel {
  left: auto;
  right: 0;
  bottom: auto;
  top: calc(100% + 0.4rem);
}

.app-workspace {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  overflow-x: clip;
  overscroll-behavior: contain;
  padding: 0 clamp(0.85rem, 2vw, 1.5rem) 2.5rem;
}

body.nav-drawer-open {
  overflow: hidden;
}

body.nav-drawer-open .nav-scrim {
  display: block;
  position: fixed;
  inset: 0;
  z-index: var(--z-nav-scrim);
  background: rgba(4, 6, 10, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

@media (max-width: 959px) {
  .shell.app-layout,
  .shell.app-layout[data-rail-collapsed="true"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(var(--rail-width), 88vw);
    min-width: 0;
    max-width: 100%;
    transform: translateX(-105%);
    transition: transform var(--duration-normal) var(--ease-out);
    box-shadow: var(--shadow-lg);
  }

  .app-rail[data-open="true"],
  body.nav-drawer-open .app-rail {
    transform: translateX(0);
  }

  .app-stage {
    grid-column: 1;
  }

  .nav-open {
    display: inline-flex !important;
  }

  .rail-collapse {
    display: none;
  }

  .rail-close {
    display: inline-flex;
    margin-left: auto;
  }

  .topbar-logo {
    display: flex;
  }

  .topbar-logo .app-header-logo-img {
    height: 1.6rem;
    max-width: 4.75rem;
  }
}

@media (max-width: 640px) {
  .health-widget-label,
  .job-monitor-trigger-label,
  .user-menu-label {
    display: none;
  }

  .topbar-product {
    font-size: 0.85rem;
  }

  .mdl-lang-bar--header .mdl-lang-current {
    max-width: 4.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shell,
  .tab-panel,
  .landing-hero,
  .landing-aside,
  .landing-features-section,
  .landing-proof,
  .landing-login,
  .app-rail {
    animation: none !important;
    transition: none !important;
  }

  body::before {
    opacity: 0.18;
  }
}

/* === JOBS LIVE === */
/* Premium job monitor cards + Live Stream workspace chrome */

.job-monitor-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2b, 0.75rem);
  margin-bottom: var(--space-2b, 0.75rem);
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  background:
    linear-gradient(165deg, rgba(11, 126, 184, 0.08) 0%, transparent 55%),
    rgba(0, 0, 0, 0.18);
}

.job-monitor-toolbar .job-monitor-filters {
  margin-bottom: 0;
}

.job-monitor-toolbar .job-monitor-advanced-filters,
.job-monitor-toolbar .job-monitor-advanced-wrap {
  margin-bottom: 0;
}

.job-monitor-drawer .system-drawer-header {
  gap: 0.85rem;
  align-items: flex-start;
}

.job-monitor-drawer .system-drawer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}

.job-monitor-drawer .system-drawer-actions .secondary {
  font-size: 0.78rem;
  padding: 0.4rem 0.7rem;
  min-height: 2.25rem;
}

.job-monitor-drawer .job-monitor-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 0;
}

.job-monitor-drawer .job-monitor-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.job-monitor-drawer .job-monitor-list {
  flex: 1;
  min-height: 0;
  max-height: min(62vh, calc(100dvh - 14rem - env(safe-area-inset-bottom, 0px)));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.2rem;
  gap: 0.75rem;
}

.job-monitor-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.job-monitor-filter {
  position: relative;
  letter-spacing: 0.01em;
}

.job-monitor-filter.active {
  box-shadow: inset 0 0 0 1px rgba(61, 180, 230, 0.35);
}

.job-monitor-filter[data-filter="running"].active {
  border-color: rgba(0, 158, 253, 0.55);
  background: rgba(0, 124, 186, 0.28);
}

.job-monitor-filter[data-filter="completed"].active {
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(52, 211, 153, 0.16);
  color: #b7f5d4;
}

.job-monitor-filter[data-filter="failed"].active {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.14);
  color: #fecaca;
}

/* Premium job cards — phase + % + bar always scannable */
.job-monitor-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.95rem 1rem;
  border-radius: var(--radius-lg, 14px);
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, transparent 42%),
    rgba(0, 0, 0, 0.28);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-normal, 0.2s) var(--ease-out, ease),
    box-shadow var(--duration-normal, 0.2s) var(--ease-out, ease),
    transform var(--duration-fast, 0.15s) var(--ease-out, ease);
}

.job-monitor-card:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(61, 180, 230, 0.08);
}

.job-monitor-card--running {
  border-color: rgba(0, 158, 253, 0.42);
  background:
    linear-gradient(135deg, rgba(0, 124, 186, 0.16) 0%, rgba(0, 0, 0, 0.2) 55%),
    rgba(0, 0, 0, 0.28);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(0, 158, 253, 0.12);
}

.job-monitor-card--running .job-monitor-card-progress {
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius, 10px);
  border: 1px solid rgba(0, 158, 253, 0.22);
  background: rgba(6, 20, 32, 0.55);
}

.job-monitor-card--completed {
  border-color: rgba(52, 211, 153, 0.32);
}

.job-monitor-card--failed {
  border-color: rgba(248, 113, 113, 0.32);
}

.job-monitor-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0;
}

.job-monitor-card-id {
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.job-monitor-card-title {
  margin: 0.2rem 0 0;
  font-family: var(--font-display, inherit);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.job-monitor-status {
  flex-shrink: 0;
  align-self: flex-start;
  min-width: 5.5rem;
  text-align: center;
  padding: 0.28rem 0.55rem;
  border: 1px solid transparent;
}

.job-monitor-status--running {
  border-color: rgba(125, 211, 252, 0.28);
  animation: job-status-pulse 1.8s ease-in-out infinite;
}

.job-monitor-status--completed {
  border-color: rgba(110, 231, 183, 0.28);
}

.job-monitor-status--failed {
  border-color: rgba(252, 165, 165, 0.28);
}

@keyframes job-status-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 158, 253, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(0, 158, 253, 0.12);
  }
}

.job-monitor-bulk-badge {
  margin: 0.35rem 0 0;
}

.job-monitor-card-progress {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.job-monitor-card-progress .job-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0;
  min-height: 1.25rem;
}

.job-monitor-card-progress .job-progress-phase {
  flex: 1;
  min-width: 0;
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-monitor-card-progress .job-progress-pct {
  flex-shrink: 0;
  min-width: 3.25rem;
  text-align: right;
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--accent);
  letter-spacing: -0.02em;
}

.job-monitor-card-progress .job-progress-track {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border-strong);
  overflow: hidden;
}

.job-monitor-card-progress .job-progress-bar {
  min-width: 2px;
}

.job-monitor-card--running .job-progress-bar:not(.job-progress-bar--indeterminate) {
  box-shadow: 0 0 12px rgba(61, 180, 230, 0.35);
}

.job-monitor-item-status,
.job-monitor-card-message {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-secondary, var(--muted));
  word-break: break-word;
}

.job-monitor-card-actions {
  margin-top: 0.15rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
}

.job-monitor .job-monitor-list,
#stJobMonitorList.job-monitor-list {
  gap: 0.75rem;
}

/* Live Stream workspace: controls | preview | playlist */
#panelLive.tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 1rem);
}

#panelLive .ls-hint-card {
  margin: 0;
}

.ls-live-workspace {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1.5rem);
}

.ls-zone {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl, 18px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, transparent 40%),
    rgba(8, 12, 18, 0.45);
}

.ls-zone-head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.15rem 0.25rem 0.35rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.15rem;
}

.ls-zone-label {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text, var(--accent));
}

.ls-zone-desc {
  margin: 0;
  max-width: 42rem;
}

.ls-zone > .card {
  margin: 0;
}

.ls-zone--controls {
  border-color: rgba(61, 180, 230, 0.18);
}

.ls-zone--controls .ls-zone-label {
  color: #7dd3fc;
}

.ls-zone--preview {
  border-color: rgba(110, 231, 160, 0.16);
  background:
    linear-gradient(165deg, rgba(52, 211, 153, 0.06) 0%, transparent 48%),
    rgba(8, 12, 18, 0.45);
}

.ls-zone--preview .ls-zone-label {
  color: #86efac;
}

.ls-zone--playlist {
  border-color: rgba(168, 190, 214, 0.16);
}

.ls-zone--playlist .ls-zone-label {
  color: var(--text-secondary, #b7c3d4);
}

#lsStatusCard {
  border-color: rgba(52, 211, 153, 0.22);
  background:
    linear-gradient(145deg, rgba(52, 211, 153, 0.08) 0%, transparent 50%),
    var(--card);
}

#lsStatusCard .job-progress:not(.hidden) {
  margin-top: 0.75rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: var(--radius, 10px);
  background: rgba(0, 0, 0, 0.28);
}

#lsStatusCard .job-progress-head {
  min-height: 1.25rem;
}

#lsStatusCard .job-progress-phase {
  font-weight: 650;
}

#lsStatusCard .job-progress-pct {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 3.25rem;
  text-align: right;
}

#lsFileCard .ls-actions .primary {
  min-width: 11rem;
}

.ls-zone--controls .ls-platform-grid {
  margin-top: 0.5rem;
}

.ls-zone--playlist .ls-playlist-now:not(.hidden) {
  margin-top: 0.85rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(61, 180, 230, 0.22);
  border-radius: var(--radius, 10px);
  background: rgba(11, 126, 184, 0.08);
}

.ls-zone--playlist .ls-playlist-item.playing {
  border-color: rgba(61, 180, 230, 0.4);
  background: rgba(11, 126, 184, 0.12);
}

@media (min-width: 1100px) {
  .ls-zone--controls {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    gap: 0.85rem;
    align-items: start;
  }

  .ls-zone--controls > .ls-zone-head {
    grid-column: 1 / -1;
  }

  .ls-zone--preview {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr;
    gap: 0.85rem;
    align-items: start;
  }

  .ls-zone--preview > .ls-zone-head {
    grid-column: 1 / -1;
  }

  #lsStatusCard {
    position: sticky;
    top: 0.75rem;
  }
}

@media (max-width: 640px) {
  .job-monitor-toolbar {
    padding: 0.65rem 0.7rem;
  }

  .job-monitor-drawer .system-drawer-actions {
    width: 100%;
  }

  .job-monitor-drawer .system-drawer-actions .secondary {
    flex: 1 1 auto;
  }

  .job-monitor-card-progress .job-progress-phase {
    white-space: normal;
  }

  .ls-zone {
    padding: 0.65rem;
    border-radius: var(--radius-lg, 14px);
  }

  .ls-live-workspace {
    gap: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .job-monitor-status--running {
    animation: none;
  }

  .job-monitor-card {
    transition: none;
  }
}

/* === ACQUIRE MODULES === */
/* Unified search → results → download pattern for archive / parliament panels */

.acq-module {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 56rem;
}

.acq-flow {
  margin: 0;
}

.acq-steps {
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: stretch;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.acq-step {
  flex: 1 1 7rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.acq-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-strong);
  flex-shrink: 0;
}

.acq-step-label {
  line-height: 1.2;
}

.acq-step--search .acq-step-num {
  color: var(--accent-text);
  border-color: var(--border-accent);
  background: var(--accent-soft);
}

.acq-step--results .acq-step-num,
.acq-step--download .acq-step-num {
  color: var(--text-secondary);
}

.acq-step.is-active {
  color: var(--text);
  background: rgba(11, 126, 184, 0.12);
}

.acq-step.is-active .acq-step-num {
  color: var(--accent-text);
  border-color: var(--border-accent);
  background: var(--accent-soft);
}

.acq-card.acq-zone--download,
.acq-module > .acq-card {
  margin-top: 0;
}

.acq-zone {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.acq-zone--search {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.acq-zone--results {
  padding-top: 0.15rem;
}

.acq-zone--download {
  position: relative;
  overflow: hidden;
}

.acq-zone--download::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--brand-gradient);
  opacity: 0.9;
  pointer-events: none;
}

.acq-zone-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.15rem;
}

.acq-zone-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--border-accent);
  flex-shrink: 0;
}

.acq-zone-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.acq-filters {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.acq-filters > .lbl:first-child {
  margin-top: 0;
}

.acq-module .acq-filters > .row {
  margin-top: 0;
}

.acq-module .search-saved-row {
  padding: 0.65rem 0.75rem;
  margin-top: var(--space-2b);
  background: rgba(0, 0, 0, 0.22);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}

.acq-module .acq-filters .grid2 {
  gap: 0.75rem 1rem;
}

.acq-module .acq-zone--results > .hint,
.acq-module .acq-zone--results > .fine {
  margin-top: 0;
}

.acq-module .bt-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.75rem;
  margin-top: 0;
  background: rgba(61, 180, 230, 0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.acq-module .bt-results-count {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.acq-module .bt-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  margin-top: 0;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.acq-module .bt-spinner {
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid rgba(61, 180, 230, 0.22);
  border-top-color: var(--brand-accent);
  border-radius: 50%;
  animation: acq-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes acq-spin {
  to {
    transform: rotate(360deg);
  }
}

.acq-module .bulk-bar,
.acq-module .bt-bulk-bar {
  position: sticky;
  top: 0.5rem;
  z-index: 2;
  margin-top: 0;
  padding: 0.7rem 0.9rem;
  background: linear-gradient(180deg, rgba(15, 21, 32, 0.96) 0%, rgba(11, 16, 24, 0.94) 100%);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.acq-module .bulk-bar .primary,
.acq-module .bt-bulk-bar .primary {
  margin-left: auto;
}

.acq-module .yt-results {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0;
  padding: 0.15rem;
  max-height: min(52vh, 28rem);
}

.acq-module .yt-item {
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius);
  gap: 0.75rem 0.85rem;
  transition:
    border-color var(--duration-normal) var(--ease-out),
    background var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.acq-module .yt-item:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  box-shadow: var(--shadow-sm);
}

.acq-module .yt-item.has-check.selected,
.acq-module .yt-item.selected {
  border-color: var(--border-accent);
  background: rgba(61, 180, 230, 0.08);
  box-shadow: 0 0 0 1px rgba(61, 180, 230, 0.12);
}

.acq-module .yt-item-title {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}

.acq-module .yt-item-actions {
  gap: 0.4rem;
}

.acq-module .yt-item-actions .primary,
.acq-module .yt-item-actions button.primary {
  min-height: 2.15rem;
}

.acq-module .acq-zone--results > button[id$="More"],
.acq-module .acq-zone--results > button.btn-more-results {
  align-self: center;
  min-width: 12rem;
  margin-top: var(--space-2);
}

.acq-zone--download .acq-zone-head {
  margin-bottom: 0.35rem;
}

.acq-zone--download .h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.acq-zone--download .row .primary {
  min-width: 12rem;
}

@media (max-width: 720px) {
  .acq-module {
    max-width: none;
  }

  .acq-steps {
    gap: 0.25rem;
  }

  .acq-step {
    flex: 1 1 calc(50% - 0.25rem);
    padding: 0.4rem 0.55rem;
  }

  .acq-module .bulk-bar .primary,
  .acq-module .bt-bulk-bar .primary {
    margin-left: 0;
    width: 100%;
    order: 5;
  }

  .acq-module .search-saved-row {
    flex-direction: column;
    align-items: stretch;
  }

  .acq-module .search-saved-row select,
  .acq-module .search-saved-row button,
  .acq-module .search-saved-row input {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .acq-step--download {
    flex-basis: 100%;
  }

  .acq-module .acq-filters > .row {
    flex-direction: column;
    align-items: stretch;
  }

  .acq-module .acq-filters > .row button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acq-module .bt-spinner {
    animation: none;
    border-top-color: var(--brand-accent);
    opacity: 0.85;
  }

  .acq-module .yt-item {
    transition: none;
  }
}

/* ==========================================================================
   Integration layer — app rail shell, landing stage, mobile polish (v71)
   ========================================================================== */

:root {
  --rail-width: 17.5rem;
  --rail-width-collapsed: 4.5rem;
  --topbar-height: 3.5rem;
  --z-scrim: 200;
  --z-rail: 210;
  --z-topbar: 150;
}

html.nav-lock,
html.nav-lock body {
  overflow: hidden;
}

/* --- Landing stage (new IA layout) --- */

.landing-stage {
  position: relative;
  max-width: 1180px;
}

.landing-stage-bg {
  position: absolute;
  inset: -2rem -1rem auto;
  height: min(70vh, 36rem);
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 18% 20%, rgba(11, 126, 184, 0.22), transparent 70%),
    radial-gradient(ellipse 50% 40% at 88% 8%, rgba(61, 180, 230, 0.1), transparent 65%);
}

.landing-stage-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(17rem, 22rem);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.landing-brand-pane {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
  padding-top: 0.35rem;
}

.landing-capability-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-capability-list li {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.landing-auth-pane {
  min-width: 0;
}

.landing-auth-foot {
  margin: 0.85rem 0 0;
  text-align: center;
}

.landing-below {
  position: relative;
  z-index: 1;
  margin-top: clamp(2rem, 5vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.landing-below-head {
  margin-bottom: 1.25rem;
  max-width: 40rem;
}

.landing-below-lead {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .landing-stage-grid {
    grid-template-columns: 1fr;
  }

  .landing-auth-pane {
    order: -1;
  }
}

/* --- App layout: sidebar + stage --- */

body.app-mode {
  padding-bottom: 0;
}

.shell.app-layout {
  --shell-max: none;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  grid-template-rows: 1fr;
  align-items: stretch;
  animation: none;
}

body.rail-collapsed .shell.app-layout,
.shell.app-layout:has(.app-rail[data-collapsed="true"]) {
  grid-template-columns: var(--rail-width-collapsed) minmax(0, 1fr);
}

.nav-scrim {
  display: none;
}

.app-rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100dvh;
  z-index: var(--z-rail);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: var(--rail-width);
  min-width: var(--rail-width);
  max-width: var(--rail-width);
  padding:
    max(0.85rem, env(safe-area-inset-top, 0px))
    0.75rem
    max(0.85rem, env(safe-area-inset-bottom, 0px));
  background:
    linear-gradient(180deg, rgba(11, 16, 24, 0.98) 0%, rgba(8, 12, 19, 0.96) 100%);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

.app-rail[data-collapsed="true"],
body.rail-collapsed .app-rail {
  width: var(--rail-width-collapsed);
  min-width: var(--rail-width-collapsed);
  max-width: var(--rail-width-collapsed);
}

.rail-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.2rem 0.35rem 0.85rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.35rem;
}

.rail-logo .app-header-logo-img {
  height: 1.85rem;
  max-width: 6.5rem;
}

.rail-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 0.05rem;
}

.rail-product {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-org {
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rail-collapse {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  cursor: pointer;
}

.rail-collapse:hover,
.rail-collapse:focus-visible {
  color: var(--text);
  border-color: var(--border-accent);
  outline: none;
}

.rail-collapse-icon {
  width: 0.7rem;
  height: 0.7rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 0.15rem;
}

.app-rail[data-collapsed="true"] .rail-brand-text,
.app-rail[data-collapsed="true"] .nav-group-label,
body.rail-collapsed .rail-brand-text,
body.rail-collapsed .nav-group-label {
  display: none;
}

.app-rail[data-collapsed="true"] .rail-logo .app-header-logo-img {
  max-width: 2.4rem;
}

.tabs.rail-nav,
.rail-nav.tabs {
  flex: 1;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 0.85rem;
  margin: 0;
  padding: 0.35rem 0.15rem 0.75rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  scrollbar-width: thin;
  min-width: 0;
  min-height: 8rem;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.nav-group-items,
.nav-group.is-expanded .nav-group-items,
.nav-group[data-expanded="true"] .nav-group-items {
  display: flex !important;
  flex-direction: column;
  gap: 0.15rem;
  visibility: visible;
  opacity: 1;
}

.nav-group[data-expanded="false"] .nav-group-items {
  display: none !important;
}

.nav-group-label {
  margin: 0 0 0.2rem;
  padding: 0 0.55rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.rail-nav .tab {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  line-height: 1.25;
  min-height: 2.35rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  scroll-snap-align: none;
}

.rail-nav .tab.active {
  background: rgba(11, 126, 184, 0.2);
  border-color: rgba(61, 180, 230, 0.35);
  box-shadow: none;
}

.app-stage {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: transparent;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  min-height: var(--topbar-height);
  padding:
    max(0.55rem, env(safe-area-inset-top, 0px))
    max(1rem, env(safe-area-inset-right, 0px))
    0.55rem
    max(1rem, env(safe-area-inset-left, 0px));
  background:
    linear-gradient(180deg, rgba(6, 9, 15, 0.96) 0%, rgba(8, 12, 19, 0.9) 78%, transparent 100%);
  backdrop-filter: blur(var(--chrome-blur)) saturate(1.12);
  -webkit-backdrop-filter: blur(var(--chrome-blur)) saturate(1.12);
  border-bottom: 1px solid var(--border);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1;
}

.topbar-actions {
  flex-shrink: 0;
}

.nav-open {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-open:hover,
.nav-open:focus-visible {
  border-color: var(--border-accent);
  outline: none;
}

.nav-open-bars,
.nav-open-bars::before,
.nav-open-bars::after {
  display: block;
  width: 1.05rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  position: relative;
}

.nav-open-bars::before,
.nav-open-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-open-bars::before { top: -5px; }
.nav-open-bars::after { top: 5px; }

.app-workspace {
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: var(--shell-wide, 1280px);
  margin: 0 auto;
  padding:
    1rem
    max(1rem, env(safe-area-inset-right, 0px))
    calc(2.5rem + env(safe-area-inset-bottom, 0px))
    max(1rem, env(safe-area-inset-left, 0px));
  overflow-x: clip;
}

.workflow-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
  min-width: 0;
}

.topbar-brand-inline {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.topbar-brand-inline .app-header-logo-img {
  height: 1.6rem;
  max-width: 5.5rem;
}

/* Settings as dedicated page feel */
body.settings-active .app-workspace {
  max-width: 72rem;
}

body.settings-active #panelSettings {
  min-height: calc(100dvh - var(--topbar-height) - 3rem);
}

body.settings-active #panelSettings .st-settings-page {
  gap: var(--space-5);
}

body.settings-active .workflow-stack {
  display: none;
}

/* Desktop collapse polish */
@media (min-width: 960px) {
  .nav-open,
  .topbar-brand-inline {
    display: none !important;
  }

  .app-rail[data-collapsed="true"] .rail-nav .tab {
    justify-content: center;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    font-size: 0;
  }

  .app-rail[data-collapsed="true"] .rail-nav .tab::first-letter {
    font-size: 0.85rem;
  }
}

/* Mobile / tablet: drawer nav */
@media (max-width: 959px) {
  .shell.app-layout,
  body.rail-collapsed .shell.app-layout,
  .shell.app-layout:has(.app-rail[data-collapsed="true"]) {
    grid-template-columns: 1fr;
  }

  .nav-open {
    display: inline-flex;
  }

  .topbar-brand-inline {
    display: inline-flex;
  }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--z-scrim);
    background: rgba(2, 5, 10, 0.62);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal) var(--ease-out);
  }

  .nav-scrim.is-visible,
  body.nav-drawer-open .nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .app-rail {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(20rem, calc(100vw - 2.5rem));
    min-width: 0;
    max-width: 100%;
    height: 100dvh;
    z-index: var(--z-rail);
    transform: translateX(-105%);
    transition: transform var(--duration-normal) var(--ease-out);
    box-shadow: none;
    border-right: 1px solid var(--border-strong);
  }

  .app-rail.is-open,
  body.nav-drawer-open .app-rail {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }

  .rail-collapse {
    display: none;
  }

  .app-rail[data-collapsed="true"] .rail-brand-text,
  .app-rail[data-collapsed="true"] .nav-group-label {
    display: flex;
  }

  .app-rail[data-collapsed="true"] .nav-group-label {
    display: block;
  }

  .app-workspace {
    max-width: none;
    padding-left: max(0.85rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.85rem, env(safe-area-inset-right, 0px));
  }

  /* Settings as full mobile page */
  body.settings-active .app-topbar .page-context {
    flex: 1;
  }

  body.settings-active #panelSettings .st-settings-page {
    gap: 1.25rem;
  }

  body.settings-active #panelSettings .st-zone-head {
    position: sticky;
    top: calc(var(--topbar-height) + 0.25rem);
    z-index: 5;
    padding: 0.55rem 0.15rem;
    margin: 0 -0.15rem 0.35rem;
    background: rgba(6, 9, 15, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  body.settings-active #panelSettings .card {
    border-radius: var(--radius-lg);
  }

  /* Single + bulk download usability on narrow screens */
  #panelUrl .row,
  #urlImportCard .row,
  .card[id$="SearchCard"] > .row {
    flex-direction: column;
    align-items: stretch;
  }

  #panelUrl .row > input,
  #panelUrl .row > button,
  #urlImportCard .row > button,
  #urlImportCard .row > label,
  .card[id$="SearchCard"] > .row > input,
  .card[id$="SearchCard"] > .row > button {
    width: 100%;
    min-height: 44px;
  }

  .bulk-bar,
  .bt-bulk-bar,
  #ytBulkBar,
  #urlImportCard .row {
    position: sticky;
    bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.75rem;
    margin-top: 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: rgba(10, 14, 22, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-md);
  }

  .bulk-bar button,
  .bt-bulk-bar button,
  #ytBulkBar button,
  #urlImportCard .row button {
    width: 100%;
    min-height: 44px;
  }

  .bulk-count,
  .bt-bulk-count {
    margin: 0 0 0.15rem;
    width: 100%;
  }

  #dlProgressWrap,
  .job-progress.dl-progress-wrap {
    position: sticky;
    bottom: max(0.35rem, env(safe-area-inset-bottom, 0px));
    z-index: 35;
  }

  .page-context {
    min-width: 0;
  }

  .breadcrumb {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .breadcrumb-item:first-child {
    display: none;
  }

  .breadcrumb-sep:first-of-type {
    display: none;
  }
}

@media (max-width: 640px) {
  .app-topbar {
    flex-wrap: wrap;
  }

  .topbar-actions.app-header-actions {
    width: auto;
    margin-left: auto;
  }

  .rail-nav .tab {
    min-height: 44px;
  }

  #panelUrl .card,
  #panelCdn .card {
    padding: 1rem 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-scrim,
  .app-rail,
  .landing-stage-bg,
  .landing-capability-list li,
  .bulk-bar,
  .bt-bulk-bar {
    transition: none !important;
    animation: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}


/* === DISTRIBUTE CDN === */
/* Distribute workflow: CDN Delivery, Cloud storage, YouTube Upload */

.dist-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  animation: panel-enter var(--duration-normal) var(--ease-out);
}

/* —— Step rail —— */
.dist-steps {
  margin: 0 0 var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    linear-gradient(135deg, rgba(11, 126, 184, 0.1) 0%, transparent 55%),
    var(--card-solid);
  box-shadow: var(--shadow-sm);
}

.dist-steps--compact {
  padding: var(--space-2b) var(--space-3);
}

.dist-steps-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.dist-steps-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.dist-steps-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--text-sm, 0.8125rem);
  font-weight: var(--weight-bold, 700);
  letter-spacing: var(--tracking-snug, -0.02em);
  color: var(--text-inverse, #061018);
  background: var(--brand-gradient);
  box-shadow: 0 0 0 1px rgba(61, 180, 230, 0.25);
}

.dist-steps-label {
  font-size: var(--text-sm, 0.8125rem);
  font-weight: var(--weight-medium, 500);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11rem;
}

.dist-steps-connector {
  display: block;
  width: 1.5rem;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--border-accent), var(--border));
  opacity: 0.7;
}

.dist-steps-item.is-done .dist-steps-num {
  color: var(--accent-text);
  background: var(--accent-soft);
  box-shadow: none;
  border: 1px solid var(--border-accent);
}

.dist-steps-item.is-active .dist-steps-num {
  transform: scale(1.06);
  box-shadow: 0 0 0 2px rgba(61, 180, 230, 0.35), var(--shadow-glow);
}

.dist-steps-item.is-active .dist-steps-label {
  color: var(--text);
  font-weight: var(--weight-semibold, 600);
}

.dist-steps-item.is-done .dist-steps-label {
  color: var(--text-secondary);
}

.dist-card.is-current,
.dist-start-zone.is-current {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-glow);
}

.dist-card.is-current {
  outline: 1px solid rgba(61, 180, 230, 0.22);
}

/* —— Step cards —— */
.dist-card {
  position: relative;
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border-color: var(--border);
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.dist-card:hover {
  border-color: var(--border-strong);
}

.dist-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.dist-card-step {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-top: 0.1rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-md, 0.875rem);
  font-weight: var(--weight-bold, 700);
  color: var(--accent-text);
  background: var(--brand-soft);
  border: 1px solid var(--border-accent);
}

.dist-card-titles {
  flex: 1;
  min-width: 0;
}

.dist-card-titles .yu-section-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-snug, -0.02em);
}

.dist-card-sub {
  margin: 0;
  color: var(--muted);
  line-height: var(--leading-snug, 1.4);
}

.dist-admin-hint {
  margin: 0 0 var(--space-2b);
  padding: var(--space-2) var(--space-2b);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border-accent);
  background: var(--surface-inset);
  color: var(--muted);
  font-size: var(--text-sm, 0.8125rem);
}

.dist-card-actions {
  margin-top: var(--space-3);
  gap: var(--space-2);
}

.dist-server-form {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--divider, var(--border));
}

.dist-server-list {
  margin-top: var(--space-2);
}

/* —— Playlist —— */
.dist-playlist-row {
  margin-top: var(--space-1);
  gap: var(--space-2);
  align-items: stretch;
}

.dist-playlist-row input[type="text"],
.dist-playlist-row input[type="search"] {
  flex: 1;
  min-width: 0;
}

.dist-examples {
  margin: var(--space-2) 0 0;
  color: var(--muted);
}

.dist-video-toolbar {
  margin-top: var(--space-3);
  gap: var(--space-2);
  align-items: center;
}

.dist-video-count {
  margin-left: auto;
  font-weight: var(--weight-medium, 500);
  color: var(--accent-text);
}

.dist-video-list {
  margin-top: var(--space-2b);
}

/* —— Deliver: resolution hero + fields —— */
.dist-card--deliver {
  background:
    linear-gradient(180deg, rgba(11, 126, 184, 0.07) 0%, transparent 28%),
    var(--card);
}

.dist-deliver-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.dist-resolution-hero {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-accent);
  background:
    linear-gradient(160deg, rgba(61, 180, 230, 0.14) 0%, rgba(6, 90, 134, 0.08) 48%, transparent 100%),
    var(--surface-inset);
  box-shadow: var(--shadow-glow);
}

.dist-resolution-label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-md, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: var(--tracking-snug, -0.02em);
  color: var(--accent-text);
}

.dist-resolution-select {
  width: 100%;
  min-height: 3.15rem;
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--weight-semibold, 600);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-snug, -0.02em);
  color: var(--text);
  border-color: var(--border-accent);
  background: rgba(0, 0, 0, 0.38);
}

.dist-resolution-select:focus-visible {
  box-shadow: var(--focus-shadow);
  border-color: var(--brand-accent);
}

.dist-resolution-hint {
  margin: var(--space-2b) 0 0;
  color: var(--text-secondary);
  line-height: var(--leading-snug, 1.4);
}

.dist-deliver-fields {
  display: grid;
  gap: var(--space-3);
}

.dist-pattern-field .fine {
  margin-top: var(--space-1);
}

.dist-delete-chk {
  margin-top: var(--space-1);
  align-self: end;
}

/* Embed options under CDN delivery — full labels, never clipped */
.dist-embed-opts {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-inset, rgba(0, 0, 0, 0.22));
  min-width: 0;
  overflow: visible;
}

.dist-embed-legend {
  padding: 0 var(--space-1);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold, 600);
  color: var(--accent-text);
}

.dist-embed-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-2);
}

.dist-embed-checks .chk {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.35;
  align-items: flex-start;
}

.dist-embed-checks .chk span {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

/* —— Step 4: Start + progress —— */
.dist-start-zone {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--divider, var(--border));
}

.dist-start-head {
  display: flex;
  align-items: center;
  gap: var(--space-2b);
  margin-bottom: var(--space-3);
}

.dist-start-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: var(--tracking-snug, -0.02em);
  color: var(--text);
}

.dist-start-actions {
  gap: var(--space-2b);
  align-items: center;
  margin-bottom: var(--space-2);
}

.dist-start-btn {
  min-height: 2.85rem;
  padding-inline: 1.35rem;
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.01em;
}

.dist-progress {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-accent);
  background:
    linear-gradient(180deg, rgba(61, 180, 230, 0.1) 0%, transparent 55%),
    var(--surface-inset);
  box-shadow: var(--shadow-sm);
}

.dist-progress.is-active {
  border-color: rgba(61, 180, 230, 0.55);
  box-shadow: var(--shadow-glow), var(--shadow-md);
}

.dist-progress:not(.hidden) {
  animation: landing-rise 0.4s var(--ease-out) both;
}

.dist-progress .job-progress-head {
  margin-bottom: var(--space-2);
}

.dist-progress .job-progress-phase {
  font-weight: var(--weight-semibold, 600);
  color: var(--text);
}

.dist-progress .job-progress-pct {
  font-family: var(--font-mono);
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--weight-bold, 700);
  color: var(--accent-text);
}

.dist-progress-track {
  height: 0.85rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.dist-progress-track .job-progress-bar,
.dist-progress-track .yu-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: var(--brand-gradient);
}

.dist-progress .job-progress-meta {
  margin-top: var(--space-2);
  color: var(--text-secondary);
}

/* —— Upload auth row with step badge —— */
#panelUpload .yu-auth-row.dist-card-head {
  align-items: flex-start;
}

#panelUpload .yu-section-head.dist-card-head {
  align-items: flex-start;
}

/* —— Responsive —— */
@media (max-width: 860px) {
  .dist-deliver-layout {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .dist-steps-label {
    max-width: 8.5rem;
  }

  .dist-steps-connector {
    width: 0.85rem;
  }
}

@media (max-width: 640px) {
  .dist-panel {
    gap: var(--space-3);
  }

  .dist-steps {
    padding: var(--space-2b);
  }

  .dist-steps-rail {
    gap: var(--space-1) var(--space-2);
  }

  .dist-steps-label {
    max-width: 6.5rem;
    font-size: var(--text-xs, 0.75rem);
  }

  .dist-card {
    padding: var(--space-3);
  }

  .dist-card-head {
    flex-wrap: wrap;
  }

  .dist-card-head > .secondary,
  .dist-card-head > .yu-auth-actions {
    margin-left: calc(2rem + var(--space-3));
  }

  .dist-playlist-row {
    flex-direction: column;
  }

  .dist-playlist-row .primary,
  .dist-playlist-row .secondary {
    width: 100%;
  }

  .dist-video-count {
    margin-left: 0;
    width: 100%;
  }

  .dist-start-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .dist-start-btn,
  .dist-start-actions .secondary {
    width: 100%;
  }

  .dist-resolution-hero {
    padding: var(--space-3);
  }

  .dist-progress {
    padding: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dist-panel,
  .dist-progress:not(.hidden) {
    animation: none !important;
  }
}


/* === URL / YOUTUBE PANEL (#panelUrl) === */
/* Two clearly separated zones:
   1) .url-zone--single  — search → one result → quality → Download
   2) .url-zone--bulk    — multi-select + ZIP CTA + bulk progress + URL import
*/

#panelUrl {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.url-zone {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  position: relative;
  isolation: isolate;
}

.url-zone--single {
  --url-zone-tint: rgba(110, 217, 160, 0.07);
  --url-zone-edge: rgba(110, 217, 160, 0.22);
  margin-bottom: 0;
  border-color: var(--url-zone-edge);
  background:
    linear-gradient(165deg, var(--url-zone-tint) 0%, transparent 48%),
    linear-gradient(180deg, rgba(12, 18, 28, 0.9) 0%, rgba(8, 12, 19, 0.96) 100%);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.url-zone--single::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  background: linear-gradient(180deg, #6ed9a0 0%, rgba(110, 217, 160, 0.2) 100%);
  pointer-events: none;
}

.url-zone--bulk {
  --url-zone-tint: rgba(61, 180, 230, 0.08);
  --url-zone-edge: rgba(61, 180, 230, 0.26);
  margin-top: 0;
  border-color: var(--url-zone-edge);
  background:
    linear-gradient(165deg, var(--url-zone-tint) 0%, transparent 48%),
    linear-gradient(180deg, rgba(12, 18, 28, 0.9) 0%, rgba(8, 12, 19, 0.96) 100%);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.url-zone--bulk::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  background: var(--brand-gradient);
  pointer-events: none;
}

.url-zone-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.url-zone-head-text {
  min-width: min(100%, 16rem);
  flex: 1 1 14rem;
}

.url-zone-label {
  margin: 0 0 var(--space-1);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.url-zone--single .url-zone-label {
  color: #8be0b0;
}

.url-zone-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}

.url-zone-desc {
  margin: var(--space-1) 0 0;
  max-width: 38rem;
  line-height: 1.45;
}

/* Step chips — single flow */
.url-flow-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 1 auto;
}

.url-flow-step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem 0.35rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.22);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 550;
}

.url-zone--single .url-flow-step .url-flow-num,
.url-flow-card-kicker .url-flow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(110, 217, 160, 0.16);
  color: #8be0b0;
}

.url-flow-card {
  margin: 0;
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(255, 255, 255, 0.06);
}

.url-flow-card-kicker {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 var(--space-2);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.url-results-hint {
  margin: 0.65rem 0 0.35rem;
}

.url-more-btn {
  margin-top: 0.75rem;
}

.url-advanced {
  margin-top: var(--space-3);
}

.yt-search-filters .grid2 {
  gap: 0.65rem 1rem;
}

.yt-search-filters select,
.yt-search-filters input[type="text"],
.yt-search-filters input[type="date"] {
  width: 100%;
}

.url-single-cta-card {
  border-color: rgba(110, 217, 160, 0.2);
  background:
    linear-gradient(180deg, rgba(110, 217, 160, 0.06) 0%, transparent 55%),
    rgba(0, 0, 0, 0.2);
}

.url-single-cta-title {
  margin: 0 0 0.25rem;
}

.url-single-quality {
  margin-top: var(--space-3);
}

.url-single-quality-hint {
  margin: 0.45rem 0 0;
}

.url-single-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: var(--space-3);
}

.url-single-download-btn {
  min-height: 2.5rem;
  padding: 0.55rem 1.25rem;
  font-weight: 700;
}

.url-single-progress {
  margin-top: var(--space-3);
}

/* Divider between single and bulk zones */
.url-zone-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  color: var(--muted);
}

.url-zone-divider::before,
.url-zone-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(61, 180, 230, 0.35), transparent);
}

.url-zone-divider-label {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(61, 180, 230, 0.28);
  background: rgba(61, 180, 230, 0.08);
  color: var(--accent-text);
}

.url-zone--bulk > .bulk-zone {
  margin-top: 0;
}

.url-zone--bulk .bulk-zone--import {
  margin-top: var(--space-3);
}

.url-import-textarea {
  width: 100%;
  margin-top: 0.5rem;
  min-height: 7rem;
  resize: vertical;
}

.url-import-actions {
  margin-top: 0.65rem;
}

.url-import-file-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.url-bulk-progress {
  margin-top: var(--space-3);
}

@media (max-width: 720px) {
  .url-zone {
    padding: var(--space-3);
  }

  .url-zone-head {
    flex-direction: column;
  }

  .url-flow-steps {
    width: 100%;
  }

  .url-single-cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .url-single-download-btn {
    width: 100%;
  }
}

/* === BULK DOWNLOAD === */
/* Dedicated multi-select + ZIP zone — visually distinct from single-video flow */

.bulk-zone {
  --bulk-tint: rgba(61, 180, 230, 0.08);
  --bulk-edge: rgba(61, 180, 230, 0.28);
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--bulk-edge);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(165deg, rgba(61, 180, 230, 0.1) 0%, transparent 42%),
    linear-gradient(180deg, rgba(15, 21, 32, 0.92) 0%, rgba(8, 12, 19, 0.96) 100%);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  position: relative;
  isolation: isolate;
}

.bulk-zone::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  background: var(--brand-gradient);
  opacity: 0.9;
  pointer-events: none;
}

.bulk-zone.hidden {
  display: none;
}

.bulk-zone.is-busy {
  border-color: rgba(61, 180, 230, 0.45);
  box-shadow: 0 0 0 1px rgba(61, 180, 230, 0.12), var(--shadow-sm);
}

.bulk-zone--import {
  margin-top: var(--space-5);
}

.bulk-zone-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.bulk-zone-titles {
  min-width: min(100%, 16rem);
  flex: 1 1 14rem;
}

.bulk-zone-eyebrow {
  margin: 0 0 var(--space-1);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.bulk-zone-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text);
}

.bulk-zone-lead {
  margin: var(--space-1) 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 36rem;
}

.bulk-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 1 auto;
}

.bulk-step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem 0.35rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.22);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 550;
  transition: border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.bulk-step + .bulk-step {
  position: relative;
}

.bulk-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
}

.bulk-step.is-done {
  border-color: rgba(110, 217, 160, 0.28);
  color: var(--success);
}

.bulk-step.is-done .bulk-step-num {
  background: rgba(110, 217, 160, 0.16);
}

.bulk-step.is-active {
  border-color: var(--border-accent);
  background: var(--accent-soft);
  color: var(--accent-text);
}

.bulk-step.is-active .bulk-step-num {
  background: rgba(61, 180, 230, 0.22);
  color: var(--accent);
}

/* Shared control strip (YT zone + all source tabs) */
.bt-bulk-bar,
.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 0.75rem;
  align-items: center;
  margin-top: 0;
  padding: 0.75rem 0.9rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(0, 0, 0, 0.28) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.bulk-zone .bulk-bar {
  margin-top: 0;
  border-color: rgba(61, 180, 230, 0.22);
  background:
    linear-gradient(180deg, rgba(61, 180, 230, 0.08) 0%, rgba(0, 0, 0, 0.32) 100%);
}

.bulk-bar-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.85rem;
  margin-right: auto;
  min-width: 0;
}

.bulk-bar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.bt-bulk-bar button,
.bulk-bar button,
.bulk-bar-actions button {
  min-height: 2.25rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.875rem;
}

.bulk-bar.is-busy,
.bt-bulk-bar.is-busy {
  border-color: rgba(0, 158, 253, 0.45);
  box-shadow: 0 0 0 1px rgba(0, 158, 253, 0.12), var(--shadow-sm);
  animation: bulk-bar-pulse 2s ease-in-out infinite;
}

.bt-bulk-count,
.bulk-count {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-right: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.bulk-size-preview {
  display: block;
  width: 100%;
  margin: 0;
  font-size: 0.82rem;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

.bulk-bar-stats .bulk-size-preview {
  width: auto;
}

.bulk-single-cta {
  /* Secondary path — single download stays available but not the bulk hero */
  opacity: 0.92;
}

.bulk-zip-cta,
.bulk-bar .primary.bulk-zip-cta,
.bt-bulk-bar .primary.bulk-zip-cta {
  min-height: 2.5rem;
  padding: 0.55rem 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, var(--shadow-sm);
}

.bulk-zone[data-bulk-ready="true"] .bulk-zip-cta {
  animation: bulk-cta-ready 1.8s var(--ease-out) 1;
}

@keyframes bulk-cta-ready {
  0% { transform: scale(1); }
  40% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Bulk job progress — clearer than single download */
.dl-progress-wrap.is-bulk,
.job-progress.is-bulk {
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(61, 180, 230, 0.28);
  background: linear-gradient(180deg, rgba(61, 180, 230, 0.1) 0%, rgba(0, 0, 0, 0.25) 100%);
}

.dl-progress-wrap.is-bulk .job-progress-phase::before,
.job-progress.is-bulk .job-progress-phase::before {
  content: "ZIP";
  display: inline-block;
  margin-right: 0.45rem;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  vertical-align: 0.05em;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(61, 180, 230, 0.28);
}

.dl-progress-wrap.is-bulk .dl-progress-track,
.dl-progress-wrap.is-bulk .job-progress-track,
.job-progress.is-bulk .job-progress-track {
  height: 9px;
}

.bulk-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0.1rem 0.45rem;
  margin-right: 0.35rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(0, 158, 253, 0.25);
}

/* Acquire-module bulk bars — same visual language without full zone chrome */
.acq-zone--results .bulk-bar,
.acq-zone--results .bt-bulk-bar,
.card[id$="SearchCard"] .bulk-bar:not(.bulk-zone .bulk-bar),
.card[id$="SearchCard"] .bt-bulk-bar {
  border-color: rgba(61, 180, 230, 0.2);
  background:
    linear-gradient(180deg, rgba(61, 180, 230, 0.06) 0%, rgba(0, 0, 0, 0.3) 100%);
}

@media (max-width: 720px) {
  .bulk-zone {
    padding: var(--space-3);
  }

  .bulk-zone-head {
    flex-direction: column;
  }

  .bulk-steps {
    width: 100%;
  }

  .bulk-bar,
  .bt-bulk-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .bulk-bar-stats {
    margin-right: 0;
  }

  .bulk-bar-actions {
    width: 100%;
  }

  .bulk-bar-actions > *,
  .bulk-bar > button,
  .bt-bulk-bar > button {
    flex: 1 1 auto;
  }

  .bulk-zip-cta {
    order: 10;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bulk-bar.is-busy,
  .bt-bulk-bar.is-busy,
  .bulk-zone[data-bulk-ready="true"] .bulk-zip-cta {
    animation: none !important;
  }
}

/* === LANDING === */
/* Brand-first hero + login. Fortune-500 media ops. Logo: /static/img/imh-group-logo.png */

@keyframes landing-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes landing-wash {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}

@keyframes landing-reel {
  from { transform: translateX(0); }
  to { transform: translateX(-48px); }
}

body.landing-mode {
  background: #05070c;
  padding-bottom: 0;
  overflow-x: hidden;
}

body.landing-mode::before {
  opacity: 0.12;
}

.landing-page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: none;
  margin: 0;
  padding: 0;
}

.landing-page.hidden {
  display: none !important;
}

/* Full-bleed atmosphere — dominant visual plane */
.landing-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(11, 40, 78, 0.55) 0%, transparent 58%),
    radial-gradient(ellipse 55% 45% at 88% 18%, rgba(180, 28, 42, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 8% 72%, rgba(11, 126, 184, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #060a12 0%, #04070c 48%, #030509 100%);
}

.landing-atmosphere-wash {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(circle at 42% 28%, rgba(61, 180, 230, 0.09) 0%, transparent 42%),
    radial-gradient(circle at 62% 48%, rgba(180, 28, 42, 0.07) 0%, transparent 38%);
  animation: landing-wash 18s var(--ease-standard, ease) infinite;
}

.landing-atmosphere-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(168, 190, 214, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 190, 214, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 20%, transparent 78%);
  opacity: 0.7;
}

.landing-atmosphere-reel {
  position: absolute;
  left: -8%;
  right: -8%;
  top: 18%;
  height: 120px;
  opacity: 0.07;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 28px,
    rgba(238, 242, 247, 0.55) 28px,
    rgba(238, 242, 247, 0.55) 30px,
    transparent 30px,
    transparent 48px
  );
  animation: landing-reel 28s linear infinite;
}

.landing-atmosphere-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 75% at 50% 40%, transparent 35%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, transparent 60%, rgba(3, 5, 9, 0.85) 100%);
}

/* First viewport — one composition */
.landing-viewport {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(0.85rem, 2vw, 1.35rem);
  padding:
    max(2rem, env(safe-area-inset-top, 0px))
    clamp(1.15rem, 4vw, 2.5rem)
    max(2.5rem, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-bottom: clamp(0.35rem, 1.5vw, 0.85rem);
  animation: landing-rise 0.7s var(--ease-out, ease) both;
}

.landing-logo {
  display: block;
  width: min(22rem, 78vw);
  height: auto;
  max-height: min(8.5rem, 22vh);
  object-fit: contain;
  filter: drop-shadow(0 12px 36px rgba(0, 0, 0, 0.45));
}

.landing-logo.hidden {
  display: none;
}

.landing-logo-text {
  font-family: var(--font-display, "Syne", sans-serif);
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text, #eef2f7);
}

.landing-logo-text.hidden {
  display: none;
}

.landing-title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display, "Syne", sans-serif);
  font-size: clamp(1.85rem, 4.6vw, 3.15rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--text, #eef2f7);
  animation: landing-rise 0.7s var(--ease-out, ease) 0.06s both;
}

.landing-title-gradient,
.landing-eyebrow,
.landing-hero-actions,
.landing-capability-list,
.landing-login-badge {
  /* Legacy hooks neutralized if leftover markup appears */
}

.landing-eyebrow {
  display: none !important;
}

.landing-capability-list {
  display: none !important;
}

.landing-lead {
  margin: 0;
  max-width: 38rem;
  font-family: var(--font-ui, "Sora", sans-serif);
  font-size: clamp(0.98rem, 1.7vw, 1.125rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-secondary, #b7c3d4);
  animation: landing-rise 0.7s var(--ease-out, ease) 0.12s both;
}

.landing-cta-group {
  width: min(26rem, 100%);
  margin-top: clamp(0.65rem, 2vw, 1.25rem);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  animation: landing-rise 0.75s var(--ease-out, ease) 0.18s both;
}

/* Visually hidden focus helper — keeps app.js scroll hook without cluttering hero */
.landing-cta-focus {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.landing-login {
  width: 100%;
  text-align: left;
  padding: 1.35rem 1.35rem 1.25rem;
  border-radius: var(--radius-lg, 14px);
  border: 1px solid rgba(168, 190, 214, 0.16);
  background: rgba(10, 14, 22, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 18px 48px rgba(0, 0, 0, 0.38);
}

.landing-login h2 {
  margin: 0 0 0.25rem;
  font-family: var(--font-display, "Syne", sans-serif);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text, #eef2f7);
}

.landing-login-hint,
.landing-login .fine {
  margin: 0 0 1rem;
  color: var(--muted, #8b9bb0);
}

.landing-login .lbl {
  display: block;
  margin: 0.65rem 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary, #b7c3d4);
}

.landing-login .lbl:first-of-type {
  margin-top: 0;
}

.landing-login input[type="text"],
.landing-login input[type="password"],
.landing-login input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--input-min-height, 2.75rem);
  padding: 0.65rem 0.85rem;
  border-radius: var(--input-radius, 9px);
  border: 1px solid var(--input-border, rgba(168, 190, 214, 0.18));
  background: var(--input-bg, rgba(0, 0, 0, 0.32));
  color: var(--text, #eef2f7);
  font-family: inherit;
  font-size: 0.95rem;
}

.landing-login input:focus-visible {
  outline: none;
  border-color: rgba(61, 180, 230, 0.55);
  box-shadow: var(--focus-shadow, 0 0 0 3px rgba(61, 180, 230, 0.28));
  background: var(--input-bg-focus, rgba(0, 0, 0, 0.42));
}

.landing-login .row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.landing-login .row .primary,
.landing-login .row .secondary {
  flex: 1 1 auto;
  min-height: 2.75rem;
}

.landing-login .auth-forgot {
  margin: 0.85rem 0 0;
  text-align: center;
}

.landing-login .hint {
  min-height: 1.15rem;
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--danger, #f5a3a3);
}

.landing-auth-foot {
  margin: 0;
  text-align: center;
  color: var(--muted, #8b9bb0);
}

.landing-auth-foot a {
  color: var(--accent-text, #7ecceb);
  text-decoration: none;
}

.landing-auth-foot a:hover {
  text-decoration: underline;
}

/* Below-fold features — not in first viewport */
.landing-below {
  position: relative;
  z-index: 1;
  width: min(1080px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 3.5rem 0 4rem;
}

.landing-below-head {
  margin-bottom: 1.5rem;
  text-align: center;
}

.landing-features-heading {
  margin: 0;
  font-family: var(--font-display, "Syne", sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #8b9bb0);
}

.landing-below-lead {
  display: none;
}

.landing-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

@media (min-width: 640px) {
  .landing-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .landing-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.landing-feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: var(--radius-lg, 14px);
  border: 1px solid rgba(168, 190, 214, 0.1);
  background: rgba(12, 17, 26, 0.45);
  transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.landing-feature-card:hover {
  border-color: rgba(61, 180, 230, 0.28);
  background: rgba(12, 17, 26, 0.62);
  transform: translateY(-2px);
}

.landing-feature-icon {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.25rem;
  border-radius: 8px;
  background: rgba(61, 180, 230, 0.1);
  border: 1px solid rgba(61, 180, 230, 0.2);
  position: relative;
}

.landing-feature-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.85rem;
  height: 0.85rem;
  background: currentColor;
  color: var(--brand-accent, #3db4e6);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.landing-feature-icon[data-icon="acquire"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M8 1v9.2L4.7 7 3.5 8.2 8 12.7l4.5-4.5L11.3 7 8 10.2V1zm-6 12v2h12v-2z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M8 1v9.2L4.7 7 3.5 8.2 8 12.7l4.5-4.5L11.3 7 8 10.2V1zm-6 12v2h12v-2z'/%3E%3C/svg%3E");
}

.landing-feature-icon[data-icon="archive"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M1 2h14v3H1zm1 4h12v8H2zm3 2v1h6V8z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M1 2h14v3H1zm1 4h12v8H2zm3 2v1h6V8z'/%3E%3C/svg%3E");
}

.landing-feature-icon[data-icon="film"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M1 2h3v2H1zm0 3h3v2H1zm0 3h3v2H1zm0 3h3v2H1zm11-9h3v2h-3zm0 3h3v2h-3zm0 3h3v2h-3zm0 3h3v2h-3zM5 2h6v12H5z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M1 2h3v2H1zm0 3h3v2H1zm0 3h3v2H1zm0 3h3v2H1zm11-9h3v2h-3zm0 3h3v2h-3zm0 3h3v2h-3zm0 3h3v2h-3zM5 2h6v12H5z'/%3E%3C/svg%3E");
}

.landing-feature-icon[data-icon="parliament"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M8 1 1 5v1h14V5zm1 5H7v5H5v2h6v-2H9zm-7 7v1h12v-1z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M8 1 1 5v1h14V5zm1 5H7v5H5v2h6v-2H9zm-7 7v1h12v-1z'/%3E%3C/svg%3E");
}

.landing-feature-icon[data-icon="live"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M3 4h7l3 3v5H3zm2 2v5h5V7.4L8.6 6z'/%3E%3Ccircle fill='%23fff' cx='6' cy='9' r='1.2'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M3 4h7l3 3v5H3zm2 2v5h5V7.4L8.6 6z'/%3E%3Ccircle fill='%23fff' cx='6' cy='9' r='1.2'/%3E%3C/svg%3E");
}

.landing-feature-icon[data-icon="publish"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M8 1 3.5 5.5h3V10h3V5.5h3zM2 12v2h12v-2z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M8 1 3.5 5.5h3V10h3V5.5h3zM2 12v2h12v-2z'/%3E%3C/svg%3E");
}

.landing-feature-title {
  margin: 0;
  font-family: var(--font-display, "Syne", sans-serif);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text, #eef2f7);
}

.landing-feature-desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted, #8b9bb0);
}

.landing-footer {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(168, 190, 214, 0.1);
  text-align: center;
}

.landing-footer-copy {
  margin: 0;
  color: var(--muted, #8b9bb0);
}

.landing-footer a {
  color: var(--accent-text, #7ecceb);
  text-decoration: none;
}

.landing-footer a:hover {
  text-decoration: underline;
}

/* Wide desktop: brand left, login right — still one first-viewport composition */
@media (min-width: 980px) {
  .landing-viewport {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 26rem);
    grid-template-areas:
      "brand login"
      "title login"
      "lead  login";
    align-items: center;
    justify-content: center;
    column-gap: clamp(2.5rem, 6vw, 5rem);
    row-gap: 0.85rem;
    text-align: left;
    max-width: 1100px;
    margin: 0 auto;
  }

  .landing-brand { grid-area: brand; justify-content: flex-start; margin-bottom: 0.25rem; }
  .landing-title { grid-area: title; max-width: 14ch; }
  .landing-lead { grid-area: lead; }
  .landing-cta-group { grid-area: login; margin-top: 0; align-self: center; }
}

@media (max-width: 640px) {
  .landing-logo {
    width: min(17rem, 84vw);
    max-height: 6.5rem;
  }

  .landing-login {
    padding: 1.15rem 1.1rem 1.1rem;
  }

  .landing-login .row .primary,
  .landing-login .row .secondary {
    width: 100%;
  }

  .landing-below {
    width: calc(100% - 1.75rem);
    padding: 2.5rem 0 3.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-atmosphere-wash,
  .landing-atmosphere-reel,
  .landing-brand,
  .landing-title,
  .landing-lead,
  .landing-cta-group,
  .landing-login,
  .landing-feature-card {
    animation: none !important;
  }

  .landing-feature-card:hover {
    transform: none;
  }
}


/* === CRITICAL GUI PASS: settings page + brand hierarchy === */

#panelSettings .st-page-intro {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.15rem 0.1rem 0.85rem;
  border-bottom: 1px solid var(--divider, rgba(168, 190, 214, 0.08));
  margin-bottom: 0.35rem;
}

#panelSettings .st-page-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--tracking-caps, 0.08em);
  text-transform: uppercase;
  color: var(--accent-text, var(--brand-accent));
}

#panelSettings .st-page-title {
  margin: 0;
  font-family: var(--font-display, "Syne", sans-serif);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text);
}

#panelSettings .st-page-desc {
  margin: 0;
  max-width: 42rem;
  color: var(--text-secondary, var(--muted));
}

/* Zones: scannable sections, not a card wall */
#panelSettings .st-zone {
  gap: 0.55rem;
  padding: 0.85rem 0 1.15rem;
  border-bottom: 1px solid var(--divider, rgba(168, 190, 214, 0.08));
}

#panelSettings .st-zone:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

#panelSettings .st-zone > .card,
#panelSettings .st-zone > .glass-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0.35rem 0 0.15rem;
}

#panelSettings .st-zone .st-head {
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(168, 190, 214, 0.06);
  margin-bottom: 0.65rem;
}

body.settings-active #panelSettings .st-settings-page {
  gap: var(--space-3);
}

/* Brand-first: logo dominates product title on landing */
.landing-logo {
  width: min(26rem, 86vw);
  max-height: min(10.5rem, 28vh);
}

.landing-title {
  font-size: clamp(1.35rem, 3.2vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-secondary, #b7c3d4);
  max-width: 22ch;
}

.landing-lead {
  font-size: clamp(0.92rem, 1.5vw, 1.05rem);
  max-width: 34rem;
}

.app-header-logo-img {
  display: block;
  height: 2rem;
  width: auto;
  max-width: 7.5rem;
  object-fit: contain;
}

.rail-logo .app-header-logo-img {
  height: 2.05rem;
  max-width: 7.25rem;
}

.topbar-logo .app-header-logo-img {
  height: 1.85rem;
  max-width: 6.75rem;
}