/* Cyberpunk command-center theme. Existing IDs and media behavior stay untouched. */
:root {
  --cyber-bg: #060914;
  --cyber-bg-deep: #03050b;
  --cyber-panel: rgba(10, 15, 28, 0.92);
  --cyber-line: rgba(112, 242, 255, 0.22);
  --cyber-line-soft: rgba(255, 255, 255, 0.11);
  --cyber-text: #f4fbff;
  --cyber-muted: #91a6b9;
  --cyber-cyan: #6ef7ff;
  --cyber-magenta: #ff4fd8;
  --cyber-lime: #b8ff6a;
  --cyber-shadow: 0 22px 70px rgba(0, 0, 0, 0.42);
}

html,
body {
  color-scheme: dark;
}

body {
  color: var(--cyber-text) !important;
  background:
    linear-gradient(rgba(110, 247, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 247, 255, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 78% 12%, rgba(255, 79, 216, 0.16), transparent 26rem),
    radial-gradient(circle at 18% 25%, rgba(110, 247, 255, 0.14), transparent 30rem),
    var(--cyber-bg-deep) !important;
  background-size: 36px 36px, 36px 36px, auto, auto, auto;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: 0.5;
  background:
    linear-gradient(115deg, transparent 0 48%, rgba(110, 247, 255, 0.09) 49%, transparent 50%),
    linear-gradient(295deg, transparent 0 58%, rgba(255, 79, 216, 0.07) 59%, transparent 60%);
  animation: cyberScan 18s linear infinite;
}

.appLayout {
  display: block !important;
  min-height: 100vh !important;
  padding-top: 104px !important;
  background: transparent !important;
}

.sideNav {
  position: fixed !important;
  inset: 14px 24px auto !important;
  left: 50% !important;
  right: auto !important;
  z-index: 80 !important;
  display: flex !important;
  align-items: center !important;
  width: min(1480px, calc(100vw - 48px)) !important;
  max-width: 1480px !important;
  min-height: 0 !important;
  padding: 8px 10px !important;
  transform: translateX(-50%) !important;
  border: 1px solid var(--cyber-line) !important;
  border-radius: 6px !important;
  background: linear-gradient(90deg, rgba(3, 8, 18, 0.98), rgba(10, 15, 29, 0.9)) !important;
  box-shadow: 0 0 0 1px rgba(255, 79, 216, 0.08), 0 16px 54px rgba(0, 0, 0, 0.46) !important;
  backdrop-filter: blur(18px);
}

.sideNav::before,
.sideNav::after {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 3px;
  content: "";
  pointer-events: none;
}

.sideNav::before {
  left: -1px;
  background: var(--cyber-cyan);
  box-shadow: 0 0 18px var(--cyber-cyan);
}

.sideNav::after {
  right: -1px;
  background: var(--cyber-magenta);
  box-shadow: 0 0 18px var(--cyber-magenta);
}

.brandBlock {
  position: relative;
  z-index: 1;
  flex: 0 0 auto !important;
  min-width: 150px;
  color: var(--cyber-text) !important;
}

.brandBlock strong {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brandMark {
  color: #06111b !important;
  background: linear-gradient(135deg, var(--cyber-cyan), var(--cyber-lime)) !important;
  box-shadow: 0 0 18px rgba(110, 247, 255, 0.55) !important;
}

.sideMenu {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 4px !important;
  min-width: 0;
  max-width: none !important;
  overflow-x: auto !important;
  scrollbar-width: none;
}

.sideMenu::-webkit-scrollbar {
  display: none;
}

.moduleButton {
  flex: 0 0 auto !important;
  min-height: 36px !important;
  gap: 6px !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  color: rgba(231, 247, 255, 0.68) !important;
  background: transparent !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.025em;
}

.moduleButton .menuIcon {
  width: 22px !important;
  height: 22px !important;
  border: 1px solid rgba(110, 247, 255, 0.18);
  border-radius: 3px !important;
  color: var(--cyber-cyan) !important;
  background: rgba(110, 247, 255, 0.08) !important;
  font-size: 0.62rem !important;
}

.moduleButton:hover {
  color: #fff !important;
  border-color: rgba(110, 247, 255, 0.28) !important;
  background: rgba(110, 247, 255, 0.08) !important;
}

.moduleButton.active {
  color: #041016 !important;
  border-color: var(--cyber-cyan) !important;
  background: var(--cyber-cyan) !important;
  box-shadow: 0 0 20px rgba(110, 247, 255, 0.28) !important;
}

.moduleButton.active .menuIcon {
  color: #041016 !important;
  border-color: transparent !important;
  background: rgba(255, 255, 255, 0.58) !important;
}

.shell {
  max-width: 1500px !important;
  margin: 0 auto !important;
  padding: 0 24px 48px !important;
}

.workspace {
  color: var(--cyber-muted) !important;
  background: transparent !important;
}

.topbar {
  align-items: center !important;
  padding: 20px 0 18px !important;
  color: var(--cyber-text) !important;
  background: transparent !important;
}

.topbar .eyebrow,
.eyebrow {
  color: var(--cyber-cyan) !important;
  letter-spacing: 0.16em !important;
}

.topbar h1 {
  color: #fff !important;
  text-shadow: 0 0 26px rgba(110, 247, 255, 0.2);
}

.topActions {
  padding-right: 46px !important;
  color: var(--cyber-text) !important;
}

.accountBadge,
.status {
  border-color: var(--cyber-line) !important;
  color: var(--cyber-text) !important;
  background: rgba(8, 17, 31, 0.78) !important;
  box-shadow: inset 0 0 22px rgba(110, 247, 255, 0.04) !important;
}

.accountBadge strong,
.accountBadge span {
  color: var(--cyber-text) !important;
}

.topbar .secondary,
.topLanguageToggle {
  color: var(--cyber-cyan) !important;
  border-color: var(--cyber-line) !important;
  background: rgba(8, 17, 31, 0.86) !important;
}

.topbar .secondary:hover,
.topLanguageToggle:hover {
  border-color: var(--cyber-cyan) !important;
  background: rgba(110, 247, 255, 0.1) !important;
  box-shadow: 0 0 18px rgba(110, 247, 255, 0.2);
}

.topLanguageToggle {
  top: 16px !important;
  right: 18px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 4px !important;
}

.topLanguageToggle .menuIcon {
  color: var(--cyber-cyan) !important;
  background: rgba(110, 247, 255, 0.08) !important;
}

.homeHero {
  display: grid !important;
  min-height: clamp(260px, 34vw, 430px) !important;
  margin-bottom: 22px !important;
  padding: clamp(24px, 4vw, 48px) !important;
  border: 1px solid var(--cyber-line) !important;
  border-radius: 6px !important;
  background:
    linear-gradient(90deg, rgba(3, 7, 18, 0.96), rgba(3, 7, 18, 0.76) 48%, rgba(3, 7, 18, 0.46)),
    url("/media/workbench-hero.png") center / cover no-repeat !important;
  box-shadow: var(--cyber-shadow), 0 0 42px rgba(110, 247, 255, 0.07) !important;
}

.homeHero::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(transparent 49%, rgba(110, 247, 255, 0.08) 50%, transparent 51%),
    linear-gradient(90deg, transparent 49%, rgba(255, 79, 216, 0.06) 50%, transparent 51%);
  background-size: 100% 9px, 9px 100%;
  mix-blend-mode: screen;
  opacity: 0.45;
}

.homeHero h2 {
  color: #fff !important;
  text-shadow: 0 0 30px rgba(110, 247, 255, 0.26);
}

.homeHero p,
.homeHeroStats span {
  color: rgba(244, 251, 255, 0.76) !important;
}

.homeHeroStats span {
  border-color: rgba(110, 247, 255, 0.24) !important;
  border-radius: 4px !important;
  background: rgba(4, 14, 27, 0.7) !important;
}

.homeHeroStats strong {
  color: var(--cyber-lime) !important;
}

.homeHeroVisual {
  border-color: rgba(110, 247, 255, 0.3) !important;
  border-radius: 4px !important;
  background: rgba(3, 7, 18, 0.72) !important;
}

.homeHeroVisual img {
  filter: saturate(1.25) hue-rotate(10deg) contrast(1.08);
  mix-blend-mode: screen;
  opacity: 0.72;
}

.panel,
.modulePanel:not(.hidden),
.grid {
  color: var(--cyber-text) !important;
}

.panel {
  border-color: var(--cyber-line-soft) !important;
  border-radius: 6px !important;
  background: var(--cyber-panel) !important;
  box-shadow: var(--cyber-shadow) !important;
}

.blockHeader,
.libraryPageHeader,
.libraryToolbar,
.drawerHeader,
.promptHeader {
  border-color: var(--cyber-line-soft) !important;
}

.blockHeader h2,
.libraryPageHeader h2,
.drawerHeader h2,
.panel h2,
.panel h3 {
  color: #fff !important;
}

.panel p,
.panel small,
.drawerMeta,
.timingText,
.libraryPageHeader .eyebrow {
  color: var(--cyber-muted) !important;
}

.field > span,
.field label,
.field legend {
  color: #bfd4e2 !important;
}

input,
select,
textarea {
  color: var(--cyber-text) !important;
  border-color: rgba(110, 247, 255, 0.2) !important;
  border-radius: 4px !important;
  background: rgba(3, 8, 18, 0.82) !important;
  box-shadow: inset 0 0 18px rgba(110, 247, 255, 0.025) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(145, 166, 185, 0.7) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--cyber-cyan) !important;
  outline: 2px solid rgba(110, 247, 255, 0.12) !important;
  box-shadow: 0 0 20px rgba(110, 247, 255, 0.13) !important;
}

button.primary,
.primary {
  color: #031016 !important;
  border: 1px solid var(--cyber-cyan) !important;
  border-radius: 4px !important;
  background: linear-gradient(100deg, var(--cyber-cyan), var(--cyber-lime)) !important;
  box-shadow: 0 0 20px rgba(110, 247, 255, 0.18) !important;
}

button.primary:hover:not(:disabled),
.primary:hover:not(:disabled) {
  background: linear-gradient(100deg, #a3fbff, #d0ff96) !important;
  box-shadow: 0 0 28px rgba(110, 247, 255, 0.34) !important;
}

button.secondary,
.secondary,
.miniButton,
.modeChip,
.secretRevealButton {
  color: #c7e5f1 !important;
  border-color: rgba(110, 247, 255, 0.22) !important;
  border-radius: 4px !important;
  background: rgba(8, 17, 31, 0.9) !important;
}

button.secondary:hover:not(:disabled),
.secondary:hover:not(:disabled),
.miniButton:hover:not(:disabled),
.modeChip:hover:not(:disabled),
.secretRevealButton:hover:not(:disabled) {
  color: #fff !important;
  border-color: var(--cyber-cyan) !important;
  background: rgba(110, 247, 255, 0.1) !important;
}

.miniButton.active,
.modeChip.active {
  color: #041016 !important;
  border-color: var(--cyber-cyan) !important;
  background: var(--cyber-cyan) !important;
}

.message,
.status {
  border-color: rgba(110, 247, 255, 0.2) !important;
  color: #cbeaf2 !important;
  background: rgba(8, 17, 31, 0.78) !important;
}

.message.error {
  color: #ffd1de !important;
  border-color: rgba(255, 79, 216, 0.44) !important;
  background: rgba(66, 10, 48, 0.42) !important;
}

.message.success {
  color: #ddffb9 !important;
  border-color: rgba(184, 255, 106, 0.4) !important;
  background: rgba(35, 65, 22, 0.36) !important;
}

/* Keep generated media inspectable: no global filters, no cropping, no forced downloads. */
.resultStage,
.videoStage,
.gallery,
.batchList,
.libraryGrid,
.libraryThumb,
.previewPanel,
.previewMedia {
  background: #02050b !important;
  border-color: rgba(110, 247, 255, 0.18) !important;
}

.resultStage img,
.resultStage video,
.videoStage video,
.galleryItem img,
.galleryItem video,
.batchItem img,
.batchItem video,
.libraryThumb img,
.libraryThumb video,
.previewPanel img,
.previewPanel video {
  display: block;
  max-width: 100%;
  background: #02050b !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: 1 !important;
}

.resultStage img,
.resultStage video,
.videoStage video {
  min-height: 240px;
}

.resultStage .emptyState,
.gallery.empty,
.batchList.empty {
  color: var(--cyber-muted) !important;
}

.libraryCard,
.batchItem,
.galleryItem,
.historyImageCard,
.adminUserCard,
.collectionRow,
.collectionTable {
  border-color: rgba(110, 247, 255, 0.16) !important;
  border-radius: 4px !important;
  background: rgba(8, 14, 27, 0.8) !important;
  box-shadow: none !important;
}

.libraryCard:hover,
.batchItem:hover,
.galleryItem:hover,
.adminUserCard:hover {
  border-color: rgba(110, 247, 255, 0.42) !important;
  box-shadow: 0 0 24px rgba(110, 247, 255, 0.08) !important;
}

.libraryCard strong,
.libraryCard h3,
.batchItem strong,
.adminUserCard strong,
.adminUserCard span {
  color: var(--cyber-text) !important;
}

.libraryCard p,
.libraryCard small,
.batchItem small,
.adminUserMeta,
.adminUserTop span {
  color: var(--cyber-muted) !important;
}

.historyDrawer,
.adminDrawer {
  z-index: 120 !important;
  color: var(--cyber-text) !important;
  border-left-color: var(--cyber-line) !important;
  background:
    linear-gradient(180deg, rgba(6, 10, 20, 0.98), rgba(3, 7, 15, 0.98)),
    linear-gradient(rgba(110, 247, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 247, 255, 0.035) 1px, transparent 1px) !important;
  background-size: auto, 26px 26px, 26px 26px !important;
  box-shadow: -24px 0 70px rgba(0, 0, 0, 0.54) !important;
}

.adminConfigForm,
.adminForm {
  border-color: var(--cyber-line-soft) !important;
  background: rgba(8, 14, 27, 0.72) !important;
}

.configGroup {
  border-color: rgba(110, 247, 255, 0.12) !important;
}

.previewModal {
  z-index: 200 !important;
  background: rgba(0, 0, 0, 0.82) !important;
  backdrop-filter: blur(8px);
}

.previewPanel {
  border: 1px solid var(--cyber-line) !important;
  border-radius: 6px !important;
  box-shadow: 0 0 70px rgba(110, 247, 255, 0.12) !important;
}

.previewTop {
  color: var(--cyber-text) !important;
  border-color: var(--cyber-line-soft) !important;
}

.loginOverlay {
  display: grid !important;
  grid-template-columns: minmax(320px, 440px) !important;
  place-content: center !important;
  padding: clamp(24px, 6vw, 86px) !important;
  overflow: hidden !important;
  color: var(--cyber-text) !important;
  background:
    linear-gradient(90deg, rgba(3, 6, 14, 0.98) 0%, rgba(3, 6, 14, 0.78) 48%, rgba(3, 6, 14, 0.62)),
    url("/media/workbench-hero.png") center / cover no-repeat !important;
}

.loginOverlay::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(rgba(110, 247, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 247, 255, 0.06) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, #000, transparent 82%);
  opacity: 0.7;
}

.loginOverlay::after {
  position: absolute;
  top: 12%;
  left: 4%;
  width: min(38vw, 520px);
  height: min(38vw, 520px);
  pointer-events: none;
  content: "";
  border: 1px solid rgba(110, 247, 255, 0.24);
  border-radius: 50%;
  box-shadow:
    0 0 0 18px rgba(110, 247, 255, 0.025),
    0 0 0 42px rgba(255, 79, 216, 0.025),
    0 0 70px rgba(110, 247, 255, 0.12);
  opacity: 0.55;
}

.loginBackdrop,
.loginStory,
.loginBackdropImage,
.loginMotionLayer {
  display: block !important;
}

.loginBackdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.loginMotionLayer {
  position: absolute;
  inset: 0;
  opacity: 0.26;
  filter: saturate(1.35) hue-rotate(48deg) contrast(1.18);
  mix-blend-mode: screen;
}

.loginBackdrop::after {
  background:
    linear-gradient(90deg, rgba(3, 6, 14, 0.98), rgba(3, 6, 14, 0.75) 52%, rgba(3, 6, 14, 0.44)),
    linear-gradient(180deg, transparent 70%, rgba(255, 79, 216, 0.1)) !important;
}

.loginStory {
  position: relative;
  z-index: 1;
  max-width: 760px;
  padding: 18px 0;
}

.loginStory::before {
  display: block;
  width: min(280px, 50vw);
  height: 3px;
  margin-bottom: 22px;
  content: "";
  background: linear-gradient(90deg, var(--cyber-cyan), var(--cyber-magenta), transparent);
  box-shadow: 0 0 16px rgba(110, 247, 255, 0.65);
}

.loginStory h1 {
  max-width: 720px;
  color: #fff !important;
  font-size: clamp(3rem, 7vw, 7rem) !important;
  line-height: 0.88 !important;
  text-shadow:
    0 0 18px rgba(110, 247, 255, 0.24),
    0 0 42px rgba(255, 79, 216, 0.12);
}

.loginStory p {
  color: rgba(244, 251, 255, 0.76) !important;
}

.loginCard {
  position: relative;
  z-index: 2;
  width: 100% !important;
  padding: 30px !important;
  border: 1px solid var(--cyber-line) !important;
  border-radius: 6px !important;
  color: var(--cyber-text) !important;
  background: linear-gradient(145deg, rgba(10, 17, 31, 0.96), rgba(4, 9, 18, 0.9)) !important;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 79, 216, 0.08),
    0 0 44px rgba(110, 247, 255, 0.08) !important;
  backdrop-filter: blur(20px) !important;
}

.loginCard::before {
  position: absolute;
  top: -1px;
  right: 28px;
  left: 28px;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--cyber-cyan), var(--cyber-magenta), transparent);
  box-shadow: 0 0 16px rgba(110, 247, 255, 0.6);
}

.loginCard h1 {
  color: #fff !important;
  font-size: 1.8rem !important;
}

.loginCard .eyebrow,
.loginCard .field span {
  color: var(--cyber-cyan) !important;
}

.loginCard input {
  border-color: rgba(110, 247, 255, 0.24) !important;
  color: #fff !important;
  background: rgba(2, 7, 16, 0.76) !important;
}

.loginCard input::placeholder {
  color: rgba(145, 166, 185, 0.7) !important;
}

.loginCard .primary {
  color: #031016 !important;
  background: linear-gradient(100deg, var(--cyber-cyan), var(--cyber-lime)) !important;
}

.loginCard .message {
  border-color: rgba(110, 247, 255, 0.2) !important;
  color: #cbeaf2 !important;
  background: rgba(8, 17, 31, 0.74) !important;
}

.loginCopyrightDisplay {
  color: var(--cyber-muted) !important;
}

@keyframes cyberScan {
  from {
    transform: translate3d(-4%, -2%, 0);
  }
  to {
    transform: translate3d(4%, 2%, 0);
  }
}

@media (max-width: 1100px) {
  .loginOverlay {
    grid-template-columns: minmax(320px, 440px) !important;
    place-content: center !important;
  }

  .loginStory {
    display: none !important;
  }

  .loginOverlay::after {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 900px) {
  .appLayout {
    padding-top: 144px !important;
  }

  .sideNav {
    inset: 10px 10px auto !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  .brandBlock {
    min-width: 0;
  }

  .sideMenu {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }

  .topLanguageToggle {
    top: 12px !important;
    right: 12px !important;
  }
}

@media (max-width: 640px) {
  .shell {
    padding-inline: 12px !important;
  }

  .topbar {
    align-items: flex-start !important;
  }

  .topbar h1 {
    font-size: 1.4rem !important;
  }

  .loginOverlay {
    padding: 16px !important;
  }

  .loginCard {
    padding: 24px !important;
  }
}

/* Reference-inspired layout pass: vertical navigation, clean content canvas, no blocking artwork. */
.appLayout {
  display: grid !important;
  grid-template-columns: 248px minmax(0, 1fr) !important;
  min-height: 100vh !important;
  padding-top: 0 !important;
  background: transparent !important;
}

.sideNav {
  position: sticky !important;
  inset: 0 auto auto 0 !important;
  z-index: 30 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: auto !important;
  max-width: none !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 24px 14px !important;
  transform: none !important;
  border-width: 0 1px 0 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(5, 10, 22, 0.98), rgba(3, 7, 15, 0.98)) !important;
  box-shadow: 12px 0 42px rgba(0, 0, 0, 0.28) !important;
}

.sideNav::before,
.sideNav::after {
  top: 0;
  bottom: auto;
  width: auto;
  height: 2px;
}

.sideNav::before {
  right: 20%;
  left: 0;
  background: linear-gradient(90deg, var(--cyber-cyan), transparent) !important;
}

.sideNav::after {
  top: auto;
  right: 0;
  bottom: 0;
  left: 28%;
  background: linear-gradient(90deg, transparent, var(--cyber-magenta)) !important;
}

.brandBlock {
  min-width: 0 !important;
  margin-bottom: 26px;
  padding: 0 10px 18px !important;
  border-bottom: 1px solid var(--cyber-line-soft);
}

.brandBlock strong {
  display: block;
  max-width: none !important;
  overflow: visible;
  text-overflow: clip;
  font-size: 0.82rem;
}

.sideMenu {
  display: grid !important;
  flex: 1 1 auto !important;
  align-content: start;
  gap: 6px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 0 14px !important;
}

.moduleButton {
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  font-size: 0.86rem !important;
  text-align: left;
}

.moduleButton .menuIcon {
  flex: 0 0 auto;
}

.sideSection {
  display: grid !important;
  gap: 8px !important;
  margin: auto 0 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(110, 247, 255, 0.16) !important;
  border-radius: 5px !important;
  background: rgba(7, 15, 28, 0.82) !important;
}

.sideSection p {
  color: var(--cyber-cyan) !important;
}

.sideSection span {
  color: var(--cyber-muted) !important;
  font-size: 0.78rem;
}

.shell {
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 32px 48px !important;
}

.workspace {
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 86px;
  margin: 0 -32px 22px;
  padding: 18px 32px !important;
  border-bottom: 1px solid var(--cyber-line-soft) !important;
  background: rgba(3, 7, 15, 0.88) !important;
  backdrop-filter: blur(18px);
}

.topbar h1 {
  font-size: clamp(1.3rem, 2vw, 2rem) !important;
}

.topActions {
  padding-right: 48px !important;
}

.homeHero {
  display: block !important;
  min-height: 0 !important;
  margin: 0 0 22px !important;
  padding: 26px 30px !important;
  overflow: hidden !important;
  border-radius: 7px !important;
  background:
    linear-gradient(90deg, rgba(7, 16, 30, 0.98), rgba(8, 19, 37, 0.9)),
    linear-gradient(110deg, rgba(110, 247, 255, 0.12), transparent 48%, rgba(255, 79, 216, 0.12)) !important;
}

.homeHero::before {
  z-index: 0 !important;
  pointer-events: none !important;
}

.homeHero::after {
  z-index: 0;
}

.homeHeroCopy {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.homeHero h2 {
  max-width: 720px;
  font-size: clamp(2rem, 4vw, 3.6rem) !important;
  line-height: 1 !important;
}

.homeHeroVisual {
  display: none !important;
}

.grid.modulePanel,
.modulePanel {
  min-width: 0;
}

.controls,
.resultPanel {
  min-width: 0;
}

.panel {
  overflow: hidden;
}

.panel > *,
.modulePanel > *,
.resultStage > *,
.videoStage > * {
  position: relative;
  z-index: 1;
}

.dropzone,
.previewWrap,
.resultStage,
.videoStage,
.batchPanel,
.downloadPanel,
.listingPanel,
.libraryToolbar,
.libraryPagerTop,
.collectionToolbar,
.billingSummary,
.billingList {
  position: relative;
  z-index: 1;
}

.dropzone::before,
.resultStage::before,
.videoStage::before,
.panel::before {
  pointer-events: none !important;
}

.adminDrawer,
.historyDrawer {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(560px, calc(100vw - 24px)) !important;
  height: 100vh !important;
  overflow: auto !important;
}

.adminDrawer .drawerHeader,
.historyDrawer .drawerHeader {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(6, 10, 20, 0.94) !important;
  backdrop-filter: blur(16px);
}

.previewModal {
  z-index: 250 !important;
  pointer-events: auto !important;
}

.previewPanel {
  position: relative;
  z-index: 1;
}

.previewStage {
  position: relative;
  z-index: 1;
  background: #02050b !important;
}

.previewStage img,
.previewStage video {
  position: relative;
  z-index: 2;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  object-fit: contain !important;
}

.loginOverlay {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px) !important;
  place-content: stretch !important;
  align-items: center !important;
  gap: clamp(24px, 6vw, 96px) !important;
  padding: clamp(28px, 5vw, 72px) !important;
  background:
    radial-gradient(circle at 70% 44%, rgba(110, 247, 255, 0.11), transparent 28rem),
    radial-gradient(circle at 35% 70%, rgba(255, 79, 216, 0.09), transparent 24rem),
    linear-gradient(135deg, #03050b, #071122 54%, #040713) !important;
}

.loginOverlay::before,
.loginOverlay::after {
  z-index: 0 !important;
  pointer-events: none !important;
}

.loginVisual {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  min-height: min(760px, calc(100vh - 96px));
  padding: clamp(26px, 5vw, 78px);
  overflow: hidden;
  border: 1px solid rgba(110, 247, 255, 0.28);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(7, 16, 33, 0.9), rgba(5, 8, 20, 0.62)),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(110, 247, 255, 0.04) 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(255, 79, 216, 0.035) 32px);
  box-shadow: var(--cyber-shadow), inset 0 0 70px rgba(110, 247, 255, 0.05);
}

.loginVisual::before {
  position: absolute;
  right: -10%;
  bottom: -18%;
  width: min(600px, 70vw);
  aspect-ratio: 1;
  pointer-events: none;
  content: "";
  border: 1px solid rgba(110, 247, 255, 0.28);
  border-radius: 50%;
  box-shadow:
    0 0 0 18px rgba(110, 247, 255, 0.03),
    0 0 0 48px rgba(255, 79, 216, 0.025),
    0 0 80px rgba(110, 247, 255, 0.14);
  transform: rotate(-18deg);
}

.loginVisual::after {
  position: absolute;
  right: 18%;
  bottom: 9%;
  width: 30%;
  height: 1px;
  pointer-events: none;
  content: "";
  background: linear-gradient(90deg, transparent, var(--cyber-cyan), transparent);
  box-shadow: 0 0 18px rgba(110, 247, 255, 0.74);
}

.loginVisual > * {
  position: relative;
  z-index: 1;
}

.loginVisualBrand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 34px;
  color: #dffaff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.loginVisualBrand .brandMark {
  width: 42px;
  height: 42px;
  border-radius: 8px;
}

.loginVisual h2 {
  margin: 8px 0 18px;
  color: #fff;
  font-size: clamp(3.2rem, 7vw, 7rem);
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-shadow: 0 0 26px rgba(110, 247, 255, 0.24);
}

.loginVisual h2 span {
  color: var(--cyber-cyan);
  background: linear-gradient(90deg, var(--cyber-cyan), #8e80ff 58%, var(--cyber-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.loginVisualCopy {
  max-width: 560px;
  margin: 0;
  color: rgba(244, 251, 255, 0.72);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.7;
}

.loginVisualTelemetry {
  display: grid;
  gap: 10px;
  margin-top: 34px;
  color: #c6e8f0;
  font-size: 0.82rem;
}

.loginVisualTelemetry span {
  display: flex;
  align-items: center;
  gap: 9px;
}

.loginVisualTelemetry i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyber-lime);
  box-shadow: 0 0 14px var(--cyber-lime);
}

.loginVisualGrid {
  position: absolute !important;
  right: 10%;
  bottom: 10%;
  display: grid;
  grid-template-columns: repeat(3, 8px);
  gap: 8px;
  opacity: 0.8;
}

.loginVisualGrid span {
  width: 8px;
  height: 8px;
  border: 1px solid var(--cyber-cyan);
  background: rgba(110, 247, 255, 0.18);
  box-shadow: 0 0 10px rgba(110, 247, 255, 0.6);
}

.loginCard {
  justify-self: center;
  align-self: center;
  max-width: 430px;
}

@media (max-width: 1100px) {
  .appLayout {
    grid-template-columns: 220px minmax(0, 1fr) !important;
  }

  .sideNav {
    width: 220px !important;
  }

  .loginOverlay {
    grid-template-columns: minmax(320px, 430px) !important;
    place-content: center !important;
  }

  .loginVisual {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .appLayout {
    display: block !important;
    padding-top: 78px !important;
  }

  .sideNav {
    position: fixed !important;
    inset: 0 0 auto !important;
    display: block !important;
    width: 100% !important;
    height: 78px !important;
    min-height: 78px !important;
    padding: 8px 10px !important;
    border-width: 0 0 1px !important;
  }

  .brandBlock {
    display: none !important;
  }

  .sideMenu {
    display: flex !important;
    height: 60px;
    overflow-x: auto !important;
  }

  .moduleButton {
    width: auto !important;
    min-width: max-content;
  }

  .sideSection {
    display: none !important;
  }

  .shell {
    padding: 0 16px 36px !important;
  }

  .topbar {
    margin: 0 -16px 18px;
    padding: 16px !important;
  }
}

@media (max-width: 640px) {
  .loginCard {
    max-width: none;
    padding: 24px !important;
  }

  .shell {
    padding-inline: 12px !important;
  }

  .topbar {
    margin-inline: -12px;
    padding-inline: 12px !important;
  }
}

/* Final harmony pass: one dark surface system and a slimmer desktop sidebar. */
.appLayout {
  grid-template-columns: 208px minmax(0, 1fr) !important;
  color: var(--cyber-text) !important;
  background: var(--cyber-bg-deep) !important;
}

.sideNav {
  width: 208px !important;
  padding: 22px 10px !important;
  color: var(--cyber-text) !important;
}

.brandBlock {
  padding-inline: 8px !important;
}

.moduleButton {
  padding-inline: 9px !important;
  font-size: 0.8rem !important;
}

.shell {
  padding-inline: 28px !important;
  background: var(--cyber-bg-deep) !important;
}

.workspace,
.teamRail {
  background: var(--cyber-bg-deep) !important;
}

.modulePanel,
.grid.modulePanel {
  background: transparent !important;
}

.teamRail {
  display: none !important;
}

.controls,
.result,
.promptManager,
.configManager,
.libraryPage,
.collectionPage,
.billingPage,
.panel,
.settings,
.batchPanel,
.downloadPanel,
.listing,
.blockControls,
.collectionBatchBar,
.libraryToolbar,
.libraryPagerTop,
.billingSummary article,
.billingItem,
.railCard,
.historyImageCard,
.adminUserCard,
.configGroup,
.adminForm,
.adminConfigForm {
  color: var(--cyber-text) !important;
  border-color: var(--cyber-line-soft) !important;
  background: var(--cyber-panel) !important;
}

.controls,
.result,
.promptManager,
.configManager,
.libraryPage,
.collectionPage,
.billingPage {
  box-shadow: var(--cyber-shadow) !important;
}

.batchHeader,
.batchItem,
.batchActions,
.resultActions,
.previewWrap,
.referenceGrid,
.imageTabs,
.librarySearchRow,
.libraryFilters,
.libraryPagination,
.collectionBatchActions,
.billingSummary,
.listing,
.drawerDownloadPanel,
.historyList {
  border-color: var(--cyber-line-soft) !important;
  background: rgba(7, 13, 25, 0.76) !important;
}

.dropzone {
  border-color: rgba(110, 247, 255, 0.24) !important;
  background: linear-gradient(145deg, rgba(8, 18, 34, 0.92), rgba(6, 10, 21, 0.88)) !important;
}

.dropzone:hover,
.dropzone:focus-within {
  border-color: var(--cyber-cyan) !important;
  background: rgba(110, 247, 255, 0.08) !important;
}

.resultStage,
.videoStage,
.gallery,
.gallery.empty,
.batchList,
.batchList.empty,
.libraryGrid,
.libraryGrid.empty,
.collectionGrid,
.collectionGrid.empty,
.billingList,
.billingList.empty,
.printGallery {
  color: var(--cyber-muted) !important;
  border-color: var(--cyber-line-soft) !important;
  background: #02050b !important;
}

.resultStage *,
.videoStage *,
.gallery *,
.batchList *,
.libraryGrid *,
.collectionGrid *,
.billingList * {
  color: inherit;
}

.resultStage img,
.resultStage video,
.videoStage video,
.gallery img,
.gallery video,
.batchList img,
.batchList video,
.libraryGrid img,
.libraryGrid video,
.collectionGrid img,
.collectionGrid video {
  background: #02050b !important;
}

.field,
.field.compact,
.checkField {
  color: var(--cyber-muted) !important;
}

.field > span,
.field label,
.checkField span {
  color: #bfd4e2 !important;
}

.libraryPageHeader,
.collectionPageHeader,
.billingPageHeader,
.blockHeader {
  background: transparent !important;
}

.libraryPageHeader h2,
.collectionPageHeader h2,
.billingPageHeader h2,
.blockHeader h2,
.result h2,
.promptManager h2,
.configManager h2 {
  color: #fff !important;
}

.libraryCard,
.collectionCard,
.collectionTable,
.collectionRow,
.billingItem,
.adminUserCard,
.historyImageCard {
  background: rgba(8, 14, 27, 0.88) !important;
}

.libraryCard strong,
.libraryCard h3,
.collectionCard strong,
.collectionRow strong,
.billingItem strong,
.adminUserCard strong {
  color: #f4fbff !important;
}

.libraryCard p,
.libraryCard small,
.collectionCard p,
.collectionRow span,
.billingItem span,
.adminUserCard span {
  color: var(--cyber-muted) !important;
}

@media (max-width: 1100px) {
  .appLayout {
    grid-template-columns: 196px minmax(0, 1fr) !important;
  }

  .sideNav {
    width: 196px !important;
  }
}

@media (max-width: 900px) {
  .appLayout {
    display: block !important;
    padding-top: 78px !important;
  }

  .sideNav {
    width: 100% !important;
  }

  .shell {
    padding-inline: 16px !important;
  }
}

/* Compact navigation controls and top-right account actions. */
.sideNav {
  transition: width 180ms ease, padding 180ms ease;
}

.sidebarToggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  margin: 0 0 12px;
  padding: 0 10px;
  border: 1px solid rgba(110, 247, 255, 0.16);
  border-radius: 4px;
  color: var(--cyber-muted);
  background: rgba(7, 15, 28, 0.72);
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.sidebarToggle svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  transition: transform 180ms ease;
}

.sidebarToggle:hover {
  color: var(--cyber-cyan);
  border-color: var(--cyber-cyan);
  background: rgba(110, 247, 255, 0.08);
}

.menuIcon {
  display: inline-grid !important;
  place-items: center;
}

.menuIcon svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.moduleButton {
  position: relative;
}

.moduleButton.active::after {
  content: "\203A";
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--cyber-cyan);
  font-size: 1.35rem;
  line-height: 1;
}

.moduleButton.active {
  justify-content: flex-start !important;
}

.topActions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.topLanguageToggle {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  z-index: auto !important;
  flex: 0 0 auto;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
}

.topActions .accountBadge {
  min-width: 126px;
}

.appLayout.sidebar-collapsed {
  grid-template-columns: 76px minmax(0, 1fr) !important;
}

.appLayout.sidebar-collapsed .sideNav {
  width: 76px !important;
  padding-inline: 8px !important;
}

.appLayout.sidebar-collapsed .brandBlock {
  justify-content: center;
  padding-inline: 0 !important;
}

.appLayout.sidebar-collapsed .brandBlock strong,
.appLayout.sidebar-collapsed .sidebarToggleLabel,
.appLayout.sidebar-collapsed .moduleButton > span:last-child,
.appLayout.sidebar-collapsed .sideSection {
  display: none !important;
}

.appLayout.sidebar-collapsed .sidebarToggle,
.appLayout.sidebar-collapsed .moduleButton {
  justify-content: center !important;
  padding-inline: 0 !important;
}

.appLayout.sidebar-collapsed .moduleButton.active::after {
  position: absolute;
  right: 4px;
  margin: 0;
  font-size: 1.1rem;
}

.appLayout.sidebar-collapsed .sidebarToggle svg {
  transform: rotate(180deg);
}

@media (max-width: 900px) {
  .sidebarToggle {
    display: none !important;
  }

  .appLayout.sidebar-collapsed {
    grid-template-columns: 1fr !important;
  }

  .appLayout.sidebar-collapsed .sideNav {
    width: 100% !important;
    padding-inline: 10px !important;
  }

  .appLayout.sidebar-collapsed .moduleButton > span:last-child {
    display: inline !important;
  }

  .appLayout.sidebar-collapsed .moduleButton {
    justify-content: flex-start !important;
    padding-inline: 9px !important;
  }
}

/* Final compact dark-shell pass. */
body,
.appLayout,
.shell,
.workspace {
  background: #03050b !important;
}

.appLayout {
  grid-template-columns: 176px minmax(0, 1fr) !important;
}

.sideNav {
  width: 176px !important;
  padding-inline: 8px !important;
}

.sideSection {
  margin: auto 0 10px !important;
  color: #9db1c1 !important;
}

.sidebarToggle {
  margin: 0 !important;
  flex: 0 0 auto;
  min-height: 36px;
  color: #c7e5f1 !important;
  border-color: rgba(110, 247, 255, 0.22) !important;
  background: rgba(7, 15, 28, 0.9) !important;
}

.sidebarToggleLabel {
  white-space: nowrap;
}

.modulePanel:not(.hidden),
.grid.modulePanel:not(.hidden),
.controls,
.result,
.promptManager,
.configManager,
.libraryPage,
.collectionPage,
.billingPage,
.adminDrawer,
.historyDrawer,
.panel,
.settings,
.batchPanel,
.downloadPanel,
.listing,
.blockControls,
.collectionBatchBar,
.libraryToolbar,
.libraryPagerTop,
.billingSummary article,
.billingItem,
.railCard,
.configGroup,
.adminForm,
.adminConfigForm {
  background-color: #0a0f1c !important;
  color: #f4fbff !important;
}

.modulePanel:not(.hidden) h1,
.modulePanel:not(.hidden) h2,
.modulePanel:not(.hidden) h3,
.modulePanel:not(.hidden) strong,
.modulePanel:not(.hidden) label,
.modulePanel:not(.hidden) .field > span,
.modulePanel:not(.hidden) .field label,
.modulePanel:not(.hidden) .checkField span {
  color: #f4fbff !important;
}

.modulePanel:not(.hidden) p,
.modulePanel:not(.hidden) small,
.modulePanel:not(.hidden) .muted,
.modulePanel:not(.hidden) .drawerMeta,
.modulePanel:not(.hidden) .timingText {
  color: #9db1c1 !important;
}

.modulePanel:not(.hidden) .blockHeader,
.modulePanel:not(.hidden) .libraryPageHeader,
.modulePanel:not(.hidden) .collectionPageHeader,
.modulePanel:not(.hidden) .billingPageHeader,
.modulePanel:not(.hidden) .batchHeader,
.modulePanel:not(.hidden) .resultActions,
.modulePanel:not(.hidden) .settings,
.modulePanel:not(.hidden) .libraryToolbar,
.modulePanel:not(.hidden) .collectionBatchBar {
  background: transparent !important;
  color: #f4fbff !important;
}

.modulePanel:not(.hidden) input,
.modulePanel:not(.hidden) select,
.modulePanel:not(.hidden) textarea {
  color: #f4fbff !important;
  background: #050914 !important;
  border-color: rgba(110, 247, 255, 0.24) !important;
}

.modulePanel:not(.hidden) input::placeholder,
.modulePanel:not(.hidden) textarea::placeholder {
  color: #7890a2 !important;
}

.resultStage,
.videoStage,
.gallery,
.gallery.empty,
.batchList,
.batchList.empty,
.libraryGrid,
.libraryGrid.empty,
.collectionGrid,
.collectionGrid.empty,
.billingList,
.billingList.empty,
.printGallery,
.previewStage {
  background: #02050b !important;
  color: #9db1c1 !important;
}

.libraryCard,
.collectionCard,
.collectionTable,
.collectionRow,
.billingItem,
.adminUserCard,
.historyImageCard {
  background: #0d1424 !important;
  color: #f4fbff !important;
}

.libraryCard p,
.libraryCard small,
.collectionCard p,
.collectionRow span,
.billingItem span,
.adminUserCard span {
  color: #9db1c1 !important;
}

.topbar {
  background: rgba(3, 5, 11, 0.94) !important;
}

.topbar > div:last-child {
  margin-left: auto !important;
}

.topActions {
  margin-left: auto !important;
  padding-right: 0 !important;
}

.topActions .accountBadge,
.topActions .status,
.topActions .secondary,
.topActions .topLanguageToggle {
  color: #dffaff !important;
}

.topActions .topLanguageToggle {
  border-color: rgba(110, 247, 255, 0.3) !important;
}

@media (max-width: 1100px) {
  .appLayout {
    grid-template-columns: 168px minmax(0, 1fr) !important;
  }

  .sideNav {
    width: 168px !important;
  }
}

@media (max-width: 900px) {
  .appLayout {
    grid-template-columns: 1fr !important;
  }

  .sideNav {
    width: 100% !important;
  }
}

.appLayout.sidebar-collapsed {
  grid-template-columns: 64px minmax(0, 1fr) !important;
}

.appLayout.sidebar-collapsed .sideNav {
  width: 64px !important;
}

/* Final dark admin shell: a compact vertical rail with a stable content column. */
html,
body {
  min-height: 100%;
  background: #03050b !important;
  color: #f4fbff !important;
}

body {
  background:
    linear-gradient(rgba(110, 247, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 247, 255, 0.025) 1px, transparent 1px),
    #03050b !important;
  background-size: 36px 36px !important;
}

.appLayout {
  display: grid !important;
  grid-template-columns: 156px minmax(0, 1fr) !important;
  align-items: stretch !important;
  min-height: 100vh !important;
  padding-top: 0 !important;
  background: transparent !important;
}

.sideNav {
  position: sticky !important;
  inset: 0 auto auto 0 !important;
  z-index: 80 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 156px !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  padding: 18px 8px 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  transform: none !important;
  border: 0 !important;
  border-right: 1px solid rgba(110, 247, 255, 0.16) !important;
  border-radius: 0 !important;
  background: #070b15 !important;
  box-shadow: 12px 0 34px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: none !important;
}

.sideNav::before,
.sideNav::after {
  top: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
}

.sideNav::before {
  left: 0 !important;
}

.sideNav::after {
  right: auto !important;
  left: 2px !important;
  opacity: 0.18 !important;
}

.brandBlock {
  justify-content: flex-start !important;
  min-width: 0 !important;
  margin: 0 4px 18px !important;
  padding: 0 !important;
  gap: 8px !important;
}

.brandBlock strong {
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.74rem !important;
}

.sideMenu {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

.moduleButton {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  justify-content: flex-start !important;
  padding: 0 8px !important;
  gap: 7px !important;
  font-size: 0.74rem !important;
  text-align: left !important;
}

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

.moduleButton.active .menuIcon {
  color: #06111b !important;
  background: rgba(110, 247, 255, 0.22) !important;
}

.sideSection {
  margin: auto 4px 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(110, 247, 255, 0.12) !important;
  font-size: 0.68rem !important;
}

.sideSection span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebarToggle {
  order: 3 !important;
  width: 100% !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  justify-content: flex-start !important;
  border-radius: 4px !important;
}

.shell {
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 26px 48px !important;
}

.workspace {
  min-width: 0 !important;
  background: transparent !important;
}

.topbar {
  min-height: 82px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 18px 0 !important;
}

.topbar > div:first-child {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.topActions {
  position: relative !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  justify-content: flex-end !important;
}

.topActions .status {
  min-width: 88px !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.shell,
.homeHero,
.modulePanel:not(.hidden),
.libraryModule,
.collectionModule,
.billingModule {
  width: 100% !important;
  box-sizing: border-box !important;
}

.collectionPage {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.appLayout.sidebar-collapsed {
  grid-template-columns: 58px minmax(0, 1fr) !important;
}

.appLayout.sidebar-collapsed .sideNav {
  width: 58px !important;
  padding-inline: 7px !important;
}

.appLayout.sidebar-collapsed .brandBlock {
  justify-content: center !important;
  margin-inline: 0 !important;
}

.appLayout.sidebar-collapsed .brandBlock strong,
.appLayout.sidebar-collapsed .moduleButton > span:last-child,
.appLayout.sidebar-collapsed .sideSection,
.appLayout.sidebar-collapsed .sidebarToggleLabel {
  display: none !important;
}

.appLayout.sidebar-collapsed .moduleButton,
.appLayout.sidebar-collapsed .sidebarToggle {
  justify-content: center !important;
  padding-inline: 0 !important;
}

.appLayout.sidebar-collapsed .moduleButton.active::after {
  right: 2px !important;
}

/* Keep every result and utility surface dark, including legacy blocks. */
.uploadIcon,
.imageTab,
.outputBlock,
.galleryPending,
.copyrightDisplay,
#listingBlock {
  color: #f4fbff !important;
  border-color: rgba(110, 247, 255, 0.16) !important;
  background: #0a0f1c !important;
}

.imageTab.active {
  color: #06111b !important;
  background: #6ef7ff !important;
}

.galleryPending {
  color: #9db1c1 !important;
  background: #02050b !important;
}

.copyrightDisplay {
  color: #8196a8 !important;
  background: #03050b !important;
}

.collectionItem,
.collectionTableHeader,
.collectionTable.empty,
.collectionBatchBar,
.collectionThumb {
  color: #f4fbff !important;
  border-color: rgba(110, 247, 255, 0.16) !important;
  background: #0a0f1c !important;
}

.collectionItem {
  box-shadow: none !important;
}

.collectionTableHeader {
  background: #070b15 !important;
}

.collectionThumb {
  background: #050914 !important;
}

.collectionTitleCell strong,
.collectionPrice {
  color: #f4fbff !important;
}

.collectionTitleCell small,
.collectionLinkCell,
.collectionPlatform,
.collectionOwner,
.collectionSuiteProgress,
.collectionCounts {
  color: #9db1c1 !important;
}

.collectionLinkCell a {
  color: #8edff1 !important;
}

.collectionLinkCell a:hover {
  color: #dffaff !important;
}

.libraryItem,
.libraryThumb,
.libraryGrid.empty,
.libraryMetaGrid span,
.libraryDownloadPanel {
  color: #f4fbff !important;
  border-color: rgba(110, 247, 255, 0.16) !important;
  background: #0a0f1c !important;
  box-shadow: none !important;
}

.libraryItem:hover {
  border-color: rgba(110, 247, 255, 0.42) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32) !important;
}

.libraryThumb {
  background: #050914 !important;
}

.libraryTitleRow strong,
.libraryMetaGrid b {
  color: #f4fbff !important;
}

.libraryBody p,
.libraryBody span,
.libraryBody small,
.libraryUpdated {
  color: #9db1c1 !important;
}

.libraryBadge {
  color: #06111b !important;
  background: rgba(110, 247, 255, 0.9) !important;
}

.chatButton {
  color: #dffaff !important;
  border-color: rgba(110, 247, 255, 0.18) !important;
  background: #0a0f1c !important;
}

.outputBlock,
.outputBlock * {
  border-color: rgba(110, 247, 255, 0.16) !important;
}

.outputBlock h2,
.outputBlock strong,
.outputBlock label,
.outputBlock .field > span {
  color: #f4fbff !important;
}

.outputBlock p,
.outputBlock small,
.outputBlock .muted {
  color: #9db1c1 !important;
}

.panel,
.libraryPage,
.collectionPage,
.billingPage,
.promptManager,
.configManager,
.adminDrawer,
.historyDrawer {
  border-color: rgba(110, 247, 255, 0.14) !important;
}

/* Final placement overrides for wide screens. */
.shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 24px 48px !important;
  box-sizing: border-box !important;
}

.workspace {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.topbar {
  width: 100% !important;
  max-width: none !important;
  min-height: 82px !important;
  margin: 0 !important;
  padding: 18px 0 16px !important;
  box-sizing: border-box !important;
  justify-content: flex-end !important;
}

.topbar > .topActions {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  transform: translateX(0) !important;
}

.homeHero {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 22px !important;
  padding: 34px 42px 34px 74px !important;
  box-sizing: border-box !important;
}

.homeHeroCopy {
  max-width: 920px !important;
}

.homeHero h2 {
  max-width: 880px !important;
}

.grid,
.promptModule,
.configModule,
.libraryModule,
.collectionModule,
.billingModule,
.modulePanel:not(.hidden) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Final dark pass for drawers, history, and API configuration. */
.historyDrawer,
.adminDrawer {
  color: #f4fbff !important;
  border-left-color: rgba(110, 247, 255, 0.18) !important;
  background: rgba(3, 5, 11, 0.98) !important;
  box-shadow: -20px 0 52px rgba(0, 0, 0, 0.45) !important;
}

.drawerHeader,
.historyList,
.historyRecord,
.historySummary,
.historyDetail,
.historyListing,
.historyListingBody,
.historyImages,
.historyImageCard,
.historyTiming,
.drawerDownloadPanel {
  color: #f4fbff !important;
  border-color: rgba(110, 247, 255, 0.16) !important;
  background: #0a0f1c !important;
  box-shadow: none !important;
}

.historySummary:hover,
.historyImageCard:hover {
  background: #0d1424 !important;
}

.drawerHeader h2,
.historySummary strong,
.historyListingBody h3,
.historyImageCard strong,
.historyImageCard span {
  color: #f4fbff !important;
}

.historySummary span,
.historySummary small,
.historyListingBody p,
.historyListingBody li,
.historyImageCard small,
.historyList.empty,
.drawerMeta {
  color: #9db1c1 !important;
}

.historyImagePreview,
.historyImagePreview img,
.historyImageCard img,
.historyImageCard video {
  background: #050914 !important;
}

.configManager,
.adminConfigForm,
.configGroup,
.secretField,
.diagnosticActions,
.adminConfigForm .field,
.adminConfigForm label,
.adminUsers,
.adminUserCard {
  color: #f4fbff !important;
  border-color: rgba(110, 247, 255, 0.16) !important;
  background: #0a0f1c !important;
  box-shadow: none !important;
}

.configManager .blockHeader,
.configManager .promptHeader,
.configManager .settings,
.configManager .modeSwitch,
.configManager .configSwitch {
  color: #f4fbff !important;
  border-color: rgba(110, 247, 255, 0.16) !important;
  background: #070b15 !important;
}

.configManager input,
.configManager select,
.configManager textarea,
.adminConfigForm input,
.adminConfigForm select,
.adminConfigForm textarea {
  color: #f4fbff !important;
  border-color: rgba(110, 247, 255, 0.24) !important;
  background: #050914 !important;
}

.configManager input::placeholder,
.configManager textarea::placeholder,
.adminConfigForm input::placeholder,
.adminConfigForm textarea::placeholder {
  color: #7890a2 !important;
}

.secretRevealButton,
.configManager .modeChip,
.adminConfigForm .secondary,
.adminConfigForm .miniButton {
  color: #dffaff !important;
  border-color: rgba(110, 247, 255, 0.22) !important;
  background: #0d1424 !important;
}

.secretRevealButton:hover:not(:disabled),
.configManager .modeChip:hover,
.configManager .modeChip.active {
  color: #06111b !important;
  border-color: #6ef7ff !important;
  background: #6ef7ff !important;
}

.configManager h2,
.configManager h3,
.configManager strong,
.configManager label,
.configManager .field > span,
.adminConfigForm .field > span {
  color: #f4fbff !important;
}

.configManager p,
.configManager small,
.configManager .muted,
.adminConfigForm small {
  color: #9db1c1 !important;
}

/* Hard stop for legacy white surfaces inside drawers and admin modules. */
.historyDrawer *,
.adminDrawer *,
.configManager *,
.adminConfigForm *,
.libraryPage *,
.collectionPage *,
.billingPage * {
  border-color: rgba(110, 247, 255, 0.16) !important;
}

.historyDrawer .panel,
.historyDrawer .outputBlock,
.historyDrawer .historyRecord,
.historyDrawer .historyDetail,
.historyDrawer .historyDetailActions,
.historyDrawer .historyListing,
.historyDrawer .listingSection,
.historyDrawer .historyListingBody,
.historyDrawer .historyImages,
.historyDrawer .historyImageCard,
.historyDrawer .downloadPanel,
.historyDrawer .drawerDownloadPanel,
.historyDrawer .timingPanel,
.historyDrawer .historyTiming,
.adminDrawer .adminForm,
.adminDrawer .adminUsers,
.adminDrawer .adminUserCard,
.adminDrawer .adminUserActions,
.adminDrawer .message,
.configManager .adminForm,
.configManager .adminConfigForm,
.configManager .configGroup,
.configManager .diagnosticActions,
.configManager .field,
.configManager .message,
.configManager .secretField,
.libraryPage .libraryToolbar,
.libraryPage .librarySearchRow,
.libraryPage .libraryPagerTop,
.libraryPage .libraryPagination,
.collectionPage .libraryToolbar,
.collectionPage .librarySearchRow,
.collectionPage .libraryPagerTop,
.collectionPage .libraryPagination,
.collectionPage .collectionBatchBar,
.billingPage .billingSummary,
.billingPage .billingList {
  color: #f4fbff !important;
  background: #0a0f1c !important;
  box-shadow: none !important;
}

.historyDrawer .drawerHeader,
.adminDrawer .drawerHeader,
.configManager .blockHeader,
.configManager .promptHeader,
.libraryPage .libraryPageHeader,
.collectionPage .libraryPageHeader,
.billingPage .libraryPageHeader {
  color: #f4fbff !important;
  background: #070b15 !important;
}

.historyDrawer button,
.adminDrawer button,
.configManager button,
.libraryPage button,
.collectionPage button,
.billingPage button {
  color: #dffaff !important;
  background: #0d1424 !important;
  border-color: rgba(110, 247, 255, 0.22) !important;
}

.historyDrawer button:hover:not(:disabled),
.adminDrawer button:hover:not(:disabled),
.configManager button:hover:not(:disabled),
.libraryPage button:hover:not(:disabled),
.collectionPage button:hover:not(:disabled),
.billingPage button:hover:not(:disabled) {
  color: #06111b !important;
  background: #6ef7ff !important;
  border-color: #6ef7ff !important;
}

.historyDrawer .primary,
.adminDrawer .primary,
.configManager .primary,
.libraryPage .primary,
.collectionPage .primary,
.billingPage .primary {
  color: #06111b !important;
  background: #6ef7ff !important;
  border-color: #6ef7ff !important;
}

.adminDrawer input,
.adminDrawer select,
.adminDrawer textarea,
.configManager input,
.configManager select,
.configManager textarea,
.libraryPage input,
.libraryPage select,
.collectionPage input,
.collectionPage select,
.collectionPage textarea {
  color: #f4fbff !important;
  background: #050914 !important;
  border-color: rgba(110, 247, 255, 0.24) !important;
}

.adminDrawer input::placeholder,
.configManager input::placeholder,
.configManager textarea::placeholder,
.libraryPage input::placeholder,
.collectionPage input::placeholder {
  color: #7890a2 !important;
}

.historyDrawer h1,
.historyDrawer h2,
.historyDrawer h3,
.historyDrawer strong,
.adminDrawer h1,
.adminDrawer h2,
.adminDrawer h3,
.adminDrawer strong,
.configManager h1,
.configManager h2,
.configManager h3,
.configManager strong,
.libraryPage h1,
.libraryPage h2,
.libraryPage h3,
.libraryPage strong,
.collectionPage h1,
.collectionPage h2,
.collectionPage h3,
.collectionPage strong,
.billingPage h1,
.billingPage h2,
.billingPage h3,
.billingPage strong,
.adminDrawer label,
.configManager label,
.libraryPage label,
.collectionPage label {
  color: #f4fbff !important;
}

.historyDrawer p,
.historyDrawer span,
.historyDrawer small,
.historyDrawer li,
.historyDrawer .muted,
.historyDrawer .drawerMeta,
.adminDrawer p,
.adminDrawer span,
.adminDrawer small,
.adminDrawer .muted,
.adminDrawer .adminUserMeta,
.configManager p,
.configManager span,
.configManager small,
.configManager .muted,
.libraryPage p,
.libraryPage span,
.libraryPage small,
.libraryPage .muted,
.libraryPage .drawerMeta,
.collectionPage p,
.collectionPage span,
.collectionPage small,
.collectionPage .muted,
.collectionPage .drawerMeta,
.billingPage p,
.billingPage span,
.billingPage small,
.billingPage .muted {
  color: #9db1c1 !important;
}

.historyDrawer .eyebrow,
.adminDrawer .eyebrow,
.configManager .eyebrow,
.libraryPage .eyebrow,
.collectionPage .eyebrow,
.billingPage .eyebrow {
  color: #6ef7ff !important;
}

.historyDrawer .message.info,
.adminDrawer .message.info,
.configManager .message.info {
  color: #bdefff !important;
  background: rgba(110, 247, 255, 0.08) !important;
  border-color: rgba(110, 247, 255, 0.22) !important;
}

.historyDrawer .message.error,
.adminDrawer .message.error,
.configManager .message.error {
  color: #ffb4c4 !important;
  background: rgba(255, 78, 122, 0.1) !important;
  border-color: rgba(255, 78, 122, 0.28) !important;
}

.billingToolbar {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 0 14px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(110, 247, 255, 0.16) !important;
  border-radius: 8px !important;
  background: #070b15 !important;
}

.billingToolbar .field {
  min-width: 180px !important;
  margin: 0 !important;
}

.billingToolbar select {
  min-height: 38px !important;
  color: #f4fbff !important;
  border-color: rgba(110, 247, 255, 0.24) !important;
  background: #050914 !important;
}

.billingVisibleCount {
  color: #9db1c1 !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.billingPage .billingList {
  max-height: min(58vh, 620px) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  align-content: start !important;
  padding: 2px !important;
  scrollbar-color: rgba(110, 247, 255, 0.38) #050914 !important;
}

.billingPage .billingList.empty {
  min-height: 150px !important;
  max-height: 220px !important;
  overflow: hidden !important;
}

.billingPage .billingSummary article {
  min-height: 92px !important;
  background: #0a0f1c !important;
}

.billingPage .billingSummary b {
  color: #6ef7ff !important;
}

.billingPage .billingAmount.positive {
  color: #a8ffbd !important;
}

.billingPage .billingAmount.negative {
  color: #ff9eb5 !important;
}

@media (max-width: 760px) {
  .billingToolbar {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .billingToolbar .field {
    min-width: 0 !important;
  }
}

/* Video studio mode switch must stay dark; older white pill rules are loaded before this. */
#videoModule #videoModeSwitch,
#videoModule .modeSwitch {
  color: #f4fbff !important;
  border-color: rgba(110, 247, 255, 0.18) !important;
  background: #070b15 !important;
  box-shadow: inset 0 0 0 1px rgba(110, 247, 255, 0.04) !important;
}

#videoModule #videoTextMode,
#videoModule #videoImageMode,
#videoModule .modeChip {
  color: #dffaff !important;
  border: 1px solid rgba(110, 247, 255, 0.2) !important;
  background: #0d1424 !important;
  box-shadow: none !important;
}

#videoModule #videoTextMode:hover:not(:disabled),
#videoModule #videoImageMode:hover:not(:disabled),
#videoModule .modeChip:hover:not(:disabled) {
  color: #06111b !important;
  border-color: #6ef7ff !important;
  background: #6ef7ff !important;
}

#videoModule #videoTextMode.active,
#videoModule #videoImageMode.active,
#videoModule .modeChip.active {
  color: #6ef7ff !important;
  border-color: #6ef7ff !important;
  background: #101a2f !important;
  box-shadow: inset 0 0 0 1px rgba(110, 247, 255, 0.18), 0 0 18px rgba(110, 247, 255, 0.18) !important;
}

@media (max-width: 900px) {
  .appLayout {
    display: block !important;
  }

  .sideNav {
    position: sticky !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(110, 247, 255, 0.16) !important;
  }

  .sideMenu {
    flex-direction: row !important;
    overflow-x: auto !important;
  }

  .sideSection,
  .sidebarToggle {
    display: none !important;
  }
}

/* Final library and preview polish: keep the dark workspace consistent. */
.libraryGrid {
  gap: 16px !important;
}

.libraryItem {
  border-color: rgba(110, 247, 255, 0.2) !important;
  background: #080d18 !important;
}

.libraryThumb {
  min-height: 220px !important;
  border-bottom: 1px solid rgba(110, 247, 255, 0.14) !important;
  background: #02050b !important;
}

.libraryThumb img,
.libraryThumb video {
  padding: 6px !important;
}

.libraryThumb .galleryPending {
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 220px !important;
  place-items: center !important;
  color: #dffaff !important;
  background:
    linear-gradient(135deg, rgba(110, 247, 255, 0.14), rgba(255, 79, 216, 0.08)),
    #050914 !important;
  font-size: 1.12rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.libraryBadge {
  left: 12px !important;
  top: 12px !important;
  max-width: calc(100% - 24px) !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(110, 247, 255, 0.36) !important;
  border-radius: 6px !important;
  color: #dffaff !important;
  background: rgba(3, 8, 16, 0.82) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28) !important;
  font-size: 0.86rem !important;
}

.libraryTitleRow strong {
  color: #f4fbff !important;
  font-size: 1rem !important;
  line-height: 1.38 !important;
}

.libraryBody {
  gap: 12px !important;
  padding: 15px !important;
}

.libraryBody p {
  min-height: 3.1em !important;
  color: #c4d3df !important;
  font-size: 0.93rem !important;
  line-height: 1.5 !important;
}

.libraryMetaGrid span {
  border: 1px solid rgba(110, 247, 255, 0.12) !important;
  background: #050914 !important;
}

.libraryStatus {
  border: 1px solid rgba(168, 255, 189, 0.28) !important;
  border-radius: 6px !important;
  color: #a8ffbd !important;
  background: rgba(61, 255, 126, 0.1) !important;
}

.libraryStatus.failed {
  color: #ffb4c4 !important;
  border-color: rgba(255, 78, 122, 0.3) !important;
  background: rgba(255, 78, 122, 0.1) !important;
}

.libraryStatus.running,
.libraryStatus.pending,
.libraryStatus.partial {
  color: #ffd88a !important;
  border-color: rgba(255, 216, 138, 0.28) !important;
  background: rgba(255, 216, 138, 0.1) !important;
}

.previewModal {
  z-index: 260 !important;
  background: rgba(0, 0, 0, 0.86) !important;
  backdrop-filter: blur(10px) !important;
}

.previewPanel {
  width: min(1180px, calc(100vw - 48px)) !important;
  height: min(820px, calc(100vh - 48px)) !important;
  border: 1px solid rgba(110, 247, 255, 0.24) !important;
  border-radius: 8px !important;
  background: #050914 !important;
  box-shadow: 0 0 0 1px rgba(255, 79, 216, 0.08), 0 24px 90px rgba(0, 0, 0, 0.62) !important;
}

.previewTop {
  min-height: 54px !important;
  padding: 10px 12px 10px 16px !important;
  border-bottom: 1px solid rgba(110, 247, 255, 0.16) !important;
  color: #f4fbff !important;
  background: #080d18 !important;
}

.previewTop strong {
  min-width: 0 !important;
  color: #f4fbff !important;
  font-size: 0.96rem !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.previewActions {
  flex: 0 0 auto !important;
  gap: 8px !important;
}

.previewCounter {
  min-width: 62px !important;
  color: #9db1c1 !important;
  font-size: 0.84rem !important;
}

.previewActions .miniButton {
  display: inline-grid !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 1px solid rgba(110, 247, 255, 0.24) !important;
  border-radius: 6px !important;
  color: #dffaff !important;
  background: #0d1424 !important;
  box-shadow: none !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.previewActions .miniButton:hover:not(:disabled) {
  color: #06111b !important;
  border-color: #6ef7ff !important;
  background: #6ef7ff !important;
}

.previewActions .miniButton:disabled {
  opacity: 0.38 !important;
}

#closePreview {
  color: #ffb4c4 !important;
  border-color: rgba(255, 78, 122, 0.32) !important;
  background: rgba(255, 78, 122, 0.08) !important;
}

#closePreview:hover:not(:disabled) {
  color: #19070d !important;
  border-color: #ff7aa2 !important;
  background: #ff7aa2 !important;
}

.previewStage {
  background:
    linear-gradient(rgba(110, 247, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 247, 255, 0.03) 1px, transparent 1px),
    #02050b !important;
  background-size: 28px 28px, 28px 28px, auto !important;
}

.previewStage img,
.previewStage video,
.previewStage #previewImageLarge {
  padding: 10px !important;
  background: #02050b !important;
  object-fit: contain !important;
}

@media (max-width: 760px) {
  .previewPanel {
    width: calc(100vw - 20px) !important;
    height: calc(100vh - 20px) !important;
  }

  .previewTop {
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .previewTop strong {
    white-space: normal !important;
  }
}

/* Keep long library titles from pushing preview controls out of view. */
.previewTop {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

#previewTitle {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.previewActions {
  display: flex !important;
  flex: 0 0 auto !important;
  justify-self: end !important;
  min-width: max-content !important;
  gap: 7px !important;
}

.previewActions .miniButton {
  width: 33px !important;
  min-width: 33px !important;
  height: 33px !important;
  border-radius: 6px !important;
  font-size: 1rem !important;
}

.previewCounter {
  min-width: 54px !important;
  font-size: 0.82rem !important;
}

.libraryBadge {
  min-height: 26px !important;
  padding: 5px 10px !important;
  border-radius: 5px !important;
  font-size: 0.88rem !important;
  line-height: 1.1 !important;
}

.libraryFilters {
  gap: 7px !important;
  padding: 8px !important;
  border-radius: 8px !important;
  background: rgba(3, 8, 16, 0.7) !important;
}

.libraryFilters .miniButton {
  min-height: 32px !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  color: #dffaff !important;
  border-color: rgba(110, 247, 255, 0.22) !important;
  background: #0d1424 !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
}

.libraryFilters .miniButton.active {
  color: #06111b !important;
  border-color: #6ef7ff !important;
  background: #6ef7ff !important;
}

@media (max-width: 760px) {
  .previewTop {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  #previewTitle {
    white-space: nowrap !important;
  }

  .previewActions {
    gap: 5px !important;
  }

  .previewActions .miniButton {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
  }

  .previewCounter {
    min-width: 42px !important;
    font-size: 0.76rem !important;
  }
}