:root {
  --panel: rgba(4, 20, 18, 0.72);
  --panel-border: rgba(105, 255, 214, 0.24);
  --text: #ddfff7;
  --muted: #84b8ac;
  --accent: #63ffd6;
  --accent-strong: #0affb9;
  --shadow: 0 0 0 1px rgba(99, 255, 214, 0.1), 0 16px 44px rgba(0, 0, 0, 0.38), 0 0 40px rgba(10, 255, 185, 0.08);
  --footer-safe-space: 170px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body,
.rows,
.hierarchy-panel,
.template-list,
.admin-table-wrap,
.upload-results,
.results-grid,
.library-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: rgba(98, 255, 216, 0.9) rgba(5, 25, 21, 0.82);
  scroll-behavior: smooth;
}

body::-webkit-scrollbar,
.rows::-webkit-scrollbar,
.hierarchy-panel::-webkit-scrollbar,
.template-list::-webkit-scrollbar,
.admin-table-wrap::-webkit-scrollbar,
.upload-results::-webkit-scrollbar,
.results-grid::-webkit-scrollbar,
.library-table-wrap::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

body::-webkit-scrollbar-track,
.rows::-webkit-scrollbar-track,
.hierarchy-panel::-webkit-scrollbar-track,
.template-list::-webkit-scrollbar-track,
.admin-table-wrap::-webkit-scrollbar-track,
.upload-results::-webkit-scrollbar-track,
.results-grid::-webkit-scrollbar-track,
.library-table-wrap::-webkit-scrollbar-track {
  background:
    linear-gradient(180deg, rgba(8, 28, 23, 0.9), rgba(3, 16, 13, 0.94));
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(99, 255, 214, 0.12),
    inset 0 0 20px rgba(7, 48, 39, 0.3);
}

body::-webkit-scrollbar-thumb,
.rows::-webkit-scrollbar-thumb,
.hierarchy-panel::-webkit-scrollbar-thumb,
.template-list::-webkit-scrollbar-thumb,
.admin-table-wrap::-webkit-scrollbar-thumb,
.upload-results::-webkit-scrollbar-thumb,
.results-grid::-webkit-scrollbar-thumb,
.library-table-wrap::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, rgba(152, 255, 232, 0.98), rgba(92, 255, 214, 0.96) 46%, rgba(16, 201, 155, 0.98));
  border-radius: 999px;
  border: 2px solid rgba(5, 22, 19, 0.92);
  box-shadow:
    0 0 12px rgba(91, 255, 214, 0.3),
    0 0 24px rgba(12, 179, 139, 0.18);
}

body::-webkit-scrollbar-thumb:hover,
.rows::-webkit-scrollbar-thumb:hover,
.hierarchy-panel::-webkit-scrollbar-thumb:hover,
.template-list::-webkit-scrollbar-thumb:hover,
.admin-table-wrap::-webkit-scrollbar-thumb:hover,
.upload-results::-webkit-scrollbar-thumb:hover,
.results-grid::-webkit-scrollbar-thumb:hover,
.library-table-wrap::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, rgba(188, 255, 240, 0.99), rgba(111, 255, 222, 0.98) 48%, rgba(22, 223, 172, 0.99));
  box-shadow:
    0 0 16px rgba(111, 255, 222, 0.42),
    0 0 28px rgba(20, 198, 153, 0.24);
}

body::-webkit-scrollbar-corner,
.rows::-webkit-scrollbar-corner,
.hierarchy-panel::-webkit-scrollbar-corner,
.template-list::-webkit-scrollbar-corner,
.admin-table-wrap::-webkit-scrollbar-corner,
.upload-results::-webkit-scrollbar-corner,
.results-grid::-webkit-scrollbar-corner,
.library-table-wrap::-webkit-scrollbar-corner {
  background: transparent;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 14%, rgba(25, 178, 147, 0.14), transparent 24%),
    radial-gradient(circle at 82% 10%, rgba(52, 131, 246, 0.1), transparent 22%),
    radial-gradient(circle at 50% 120%, rgba(14, 177, 137, 0.16), transparent 34%),
    linear-gradient(180deg, #041412 0%, #031411 26%, #02100f 58%, #010707 100%);
}

body {
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(118, 255, 223, 0.025), transparent 18%, transparent 82%, rgba(118, 255, 223, 0.03)),
    radial-gradient(circle at 50% 0%, rgba(124, 255, 226, 0.05), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(66, 122, 245, 0.04), transparent 30%);
  mix-blend-mode: screen;
  opacity: 0.9;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(125, 255, 227, 0.02) 1px, transparent 1px);
  background-size: 100% 48px;
  opacity: 0.16;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 18%, rgba(0, 0, 0, 0.8) 82%, transparent 100%);
}

.sky,
.starfield,
.aurora {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.sky {
  background-image:
    radial-gradient(circle at 4% 18%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 7% 58%, rgba(255, 255, 255, 0.6) 0 1px, transparent 1.5px),
    radial-gradient(circle at 10% 84%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 14% 64%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 18% 42%, rgba(255, 255, 255, 0.75) 0 1px, transparent 1.5px),
    radial-gradient(circle at 22% 78%, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.5px),
    radial-gradient(circle at 26% 12%, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.5px),
    radial-gradient(circle at 31% 56%, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.5px),
    radial-gradient(circle at 35% 84%, rgba(255, 255, 255, 0.62) 0 1px, transparent 1.5px),
    radial-gradient(circle at 40% 16%, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 47% 31%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 52% 68%, rgba(255, 255, 255, 0.58) 0 1px, transparent 1.5px),
    radial-gradient(circle at 58% 48%, rgba(255, 255, 255, 0.84) 0 1px, transparent 1.5px),
    radial-gradient(circle at 64% 13%, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.5px),
    radial-gradient(circle at 69% 76%, rgba(255, 255, 255, 0.52) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 28%, rgba(255, 255, 255, 0.88) 0 1px, transparent 1.5px),
    radial-gradient(circle at 77% 60%, rgba(255, 255, 255, 0.52) 0 1px, transparent 1.5px),
    radial-gradient(circle at 81% 16%, rgba(255, 255, 255, 0.65) 0 1px, transparent 1.5px),
    radial-gradient(circle at 84% 44%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 34%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 91% 70%, rgba(255, 255, 255, 0.66) 0 1px, transparent 1.5px),
    radial-gradient(circle at 95% 88%, rgba(255, 255, 255, 0.6) 0 1px, transparent 1.5px),
    radial-gradient(circle at 97% 24%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px);
  opacity: 0.78;
  animation: starsPulseBase 11s ease-in-out infinite;
}

.starfield {
  opacity: 0.65;
  mix-blend-mode: screen;
}

.starfield-far {
  background-image:
    radial-gradient(circle at 6% 26%, rgba(210, 255, 247, 0.95) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 12% 72%, rgba(176, 255, 236, 0.76) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 18% 44%, rgba(215, 255, 244, 0.9) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 24% 88%, rgba(173, 255, 234, 0.82) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 33% 18%, rgba(222, 255, 246, 0.85) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 41% 64%, rgba(179, 255, 239, 0.7) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 48% 34%, rgba(222, 255, 247, 0.9) 0 1px, transparent 1.6px),
    radial-gradient(circle at 57% 81%, rgba(182, 255, 238, 0.72) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 66% 21%, rgba(223, 255, 247, 0.86) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 74% 56%, rgba(170, 255, 233, 0.82) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 82% 12%, rgba(220, 255, 247, 0.88) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 91% 67%, rgba(171, 255, 233, 0.76) 0 0.8px, transparent 1.4px);
  animation: starDriftFar 34s linear infinite, starsTwinkleA 8s ease-in-out infinite;
}

.starfield-mid {
  background-image:
    radial-gradient(circle at 9% 12%, rgba(230, 255, 248, 0.92) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 17% 58%, rgba(145, 255, 224, 0.78) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 29% 28%, rgba(232, 255, 249, 0.96) 0 1.3px, transparent 2px),
    radial-gradient(circle at 39% 86%, rgba(141, 255, 222, 0.74) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 51% 42%, rgba(228, 255, 248, 0.9) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 61% 72%, rgba(152, 255, 226, 0.8) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 73% 24%, rgba(232, 255, 249, 0.94) 0 1.3px, transparent 2px),
    radial-gradient(circle at 84% 52%, rgba(143, 255, 224, 0.78) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 94% 18%, rgba(230, 255, 248, 0.92) 0 1.2px, transparent 1.9px);
  animation: starDriftMid 24s linear infinite, starsTwinkleB 6.5s ease-in-out infinite;
}

.starfield-near {
  background-image:
    radial-gradient(circle at 14% 36%, rgba(244, 255, 252, 0.98) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 27% 74%, rgba(120, 255, 216, 0.88) 0 1.5px, transparent 2.3px),
    radial-gradient(circle at 46% 16%, rgba(244, 255, 252, 0.98) 0 1.7px, transparent 2.5px),
    radial-gradient(circle at 58% 58%, rgba(123, 255, 218, 0.9) 0 1.5px, transparent 2.3px),
    radial-gradient(circle at 76% 31%, rgba(244, 255, 252, 0.96) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 88% 82%, rgba(122, 255, 217, 0.88) 0 1.5px, transparent 2.3px);
  filter: drop-shadow(0 0 10px rgba(126, 255, 220, 0.22));
  animation: starDriftNear 18s linear infinite, starsTwinkleC 5.2s ease-in-out infinite;
}

.starfield-pulse {
  background-image:
    radial-gradient(circle at 22% 22%, rgba(255, 255, 255, 0.95) 0 2px, transparent 7px),
    radial-gradient(circle at 44% 66%, rgba(168, 255, 235, 0.9) 0 1.6px, transparent 6px),
    radial-gradient(circle at 67% 37%, rgba(255, 255, 255, 0.95) 0 2px, transparent 7px),
    radial-gradient(circle at 86% 24%, rgba(156, 255, 232, 0.9) 0 1.6px, transparent 6px),
    radial-gradient(circle at 91% 78%, rgba(255, 255, 255, 0.95) 0 2px, transparent 7px);
  opacity: 0.18;
  filter: blur(0.2px) drop-shadow(0 0 12px rgba(136, 255, 228, 0.24));
  animation: starsFlash 7s ease-in-out infinite;
}

.aurora {
  filter: blur(70px);
  opacity: 0.35;
}

.aurora-left {
  background: radial-gradient(circle at 20% 20%, rgba(0, 255, 183, 0.35), transparent 34%);
}

.aurora-right {
  background: radial-gradient(circle at 80% 10%, rgba(0, 194, 145, 0.28), transparent 32%);
}

@keyframes starsPulseBase {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 0.92; transform: scale(1.01); }
}

@keyframes starsTwinkleA {
  0%, 100% { opacity: 0.34; }
  25% { opacity: 0.58; }
  55% { opacity: 0.28; }
  80% { opacity: 0.64; }
}

@keyframes starsTwinkleB {
  0%, 100% { opacity: 0.26; }
  18% { opacity: 0.52; }
  48% { opacity: 0.22; }
  74% { opacity: 0.62; }
}

@keyframes starsTwinkleC {
  0%, 100% { opacity: 0.2; }
  20% { opacity: 0.56; }
  46% { opacity: 0.18; }
  70% { opacity: 0.68; }
}

@keyframes starsFlash {
  0%, 100% { opacity: 0.12; transform: scale(1); }
  18% { opacity: 0.28; transform: scale(1.04); }
  36% { opacity: 0.08; transform: scale(0.98); }
  62% { opacity: 0.24; transform: scale(1.02); }
  78% { opacity: 0.14; transform: scale(1); }
}

@keyframes starDriftFar {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-8px, 10px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes starDriftMid {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(10px, -8px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes starDriftNear {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-12px, 8px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.page {
  position: relative;
  z-index: 1;
  width: min(1500px, calc(100% - 28px));
  margin: 0 auto;
  padding: 20px 0 96px;
}

.auth-gate {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
}

.page.app-hidden,
.auth-gate.auth-hidden {
  display: none;
}

.auth-gate::before,
.auth-gate::after {
  content: "";
  position: absolute;
  inset: auto;
  width: 22vw;
  height: 22vw;
  min-width: 180px;
  min-height: 180px;
  border-radius: 46% 54% 58% 42% / 42% 38% 62% 58%;
  filter: blur(24px);
  opacity: 0.34;
  pointer-events: none;
}

.auth-gate::before {
  left: 12%;
  top: 16%;
  background:
    radial-gradient(circle at 34% 36%, rgba(168, 255, 240, 0.98) 0%, rgba(80, 255, 214, 0.82) 16%, rgba(19, 205, 154, 0.38) 36%, transparent 58%),
    radial-gradient(ellipse at 50% 50%, rgba(96, 255, 223, 0.52) 0%, rgba(96, 255, 223, 0.24) 22%, transparent 56%),
    conic-gradient(from 0deg, transparent 0deg 24deg, rgba(135, 255, 232, 0.5) 24deg 34deg, transparent 34deg 74deg, rgba(82, 255, 209, 0.42) 74deg 86deg, transparent 86deg 138deg, rgba(113, 255, 225, 0.32) 138deg 148deg, transparent 148deg 360deg);
  animation: paintFloatLeft 12s ease-in-out infinite;
}

.auth-gate::after {
  right: 10%;
  bottom: 14%;
  background:
    radial-gradient(circle at 58% 42%, rgba(159, 255, 235, 0.92) 0%, rgba(88, 255, 214, 0.76) 18%, rgba(14, 196, 148, 0.34) 38%, transparent 58%),
    radial-gradient(ellipse at 50% 50%, rgba(96, 255, 223, 0.48) 0%, rgba(96, 255, 223, 0.2) 20%, transparent 56%),
    conic-gradient(from 18deg, transparent 0deg 28deg, rgba(144, 255, 233, 0.46) 28deg 40deg, transparent 40deg 102deg, rgba(82, 255, 209, 0.36) 102deg 114deg, transparent 114deg 210deg, rgba(116, 255, 226, 0.32) 210deg 220deg, transparent 220deg 360deg);
  animation: paintFloatRight 14s ease-in-out infinite;
}

.auth-card {
  position: relative;
  width: min(460px, 100%);
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  overflow: hidden;
}

.auth-card::before,
.auth-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(18px);
  opacity: 0.2;
}

.auth-card::before {
  width: 120px;
  height: 120px;
  left: -18px;
  top: -12px;
  background:
    radial-gradient(circle, rgba(133, 255, 229, 0.56) 0%, rgba(38, 212, 166, 0.16) 44%, transparent 72%),
    conic-gradient(from 0deg, transparent 0deg 28deg, rgba(132, 255, 228, 0.36) 28deg 40deg, transparent 40deg 360deg);
  animation: paintDriftInner 9s ease-in-out infinite;
}

.auth-card::after {
  width: 96px;
  height: 96px;
  right: -12px;
  bottom: -10px;
  background:
    radial-gradient(circle, rgba(161, 255, 237, 0.44) 0%, rgba(26, 160, 127, 0.14) 42%, transparent 72%),
    conic-gradient(from 32deg, transparent 0deg 34deg, rgba(124, 255, 226, 0.26) 34deg 46deg, transparent 46deg 360deg);
  animation: paintDriftInner 11s ease-in-out infinite reverse;
}

.auth-head {
  align-items: start;
}

.auth-head h1 {
  margin: 4px 0 0;
}

.auth-form {
  display: grid;
  gap: 14px;
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-remember input {
  width: auto;
}

.auth-message {
  min-height: 20px;
  color: #ff9ab4;
}

@keyframes paintFloatLeft {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  33% {
    transform: translate3d(28px, -18px, 0) rotate(18deg) scale(1.12);
  }
  66% {
    transform: translate3d(-14px, 20px, 0) rotate(-12deg) scale(0.9);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes paintFloatRight {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  30% {
    transform: translate3d(-24px, -16px, 0) rotate(-16deg) scale(0.92);
  }
  65% {
    transform: translate3d(18px, 20px, 0) rotate(14deg) scale(1.1);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes paintDriftInner {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(14px, -10px, 0) scale(1.16) rotate(10deg);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.tab-nav {
  display: flex;
  gap: 12px;
  position: sticky;
  top: 14px;
  z-index: 5;
  align-items: center;
  justify-content: space-between;
  background: rgba(4, 20, 18, 0.84);
  backdrop-filter: blur(18px);
}

.tab-nav-left {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.session-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.session-user {
  color: var(--muted);
  white-space: nowrap;
}

.tab-button {
  color: var(--text);
  background: rgba(99, 255, 214, 0.08);
  border: 1px solid rgba(99, 255, 214, 0.16);
}

.tab-button.is-active {
  color: #03231d;
  background: linear-gradient(135deg, var(--accent-strong), #9bffe6);
  box-shadow: 0 12px 28px rgba(10, 255, 185, 0.25);
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block;
}

.admin-nav-panel {
  position: sticky;
  top: 92px;
  z-index: 4;
  padding: 14px 18px;
  background: rgba(3, 17, 15, 0.9);
  border-color: rgba(99, 255, 214, 0.18);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 0 18px rgba(10, 255, 185, 0.05);
}

.admin-subnav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-subnav-button {
  min-width: 132px;
  padding: 11px 16px;
  border-radius: 14px;
  border: 1px solid rgba(99, 255, 214, 0.16);
  background: linear-gradient(180deg, rgba(8, 31, 27, 0.88), rgba(4, 18, 16, 0.9));
  color: var(--muted);
  box-shadow: inset 0 0 0 1px rgba(99, 255, 214, 0.03);
  transition: transform 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.admin-subnav-button:hover {
  transform: translateY(-1px);
  color: var(--text);
  border-color: rgba(99, 255, 214, 0.32);
  box-shadow: 0 0 18px rgba(10, 255, 185, 0.08);
}

.admin-subnav-button.is-active {
  color: #042821;
  border-color: rgba(99, 255, 214, 0.72);
  background: linear-gradient(135deg, rgba(98, 255, 216, 0.96), rgba(162, 255, 236, 0.98));
  box-shadow: 0 14px 28px rgba(10, 255, 185, 0.18), 0 0 18px rgba(99, 255, 214, 0.16);
}

.admin-section-block {
  display: none;
}

.admin-section-block.is-active {
  display: block;
}

.collapsible-admin-block {
  display: grid;
  gap: 0;
  overflow: hidden;
  transition: grid-template-rows 180ms ease, opacity 180ms ease, transform 180ms ease, margin-top 180ms ease;
  grid-template-rows: 1fr;
  opacity: 1;
}

.collapsible-admin-block[hidden] {
  display: none;
}

.collapsible-admin-block.is-collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.collapsible-admin-block > * {
  min-height: 0;
}

.panel {
  margin-bottom: 18px;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  min-width: 0;
}

.row-label {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
}

.steps,
.rows,
.form-grid,
.geo-presets,
.geo-link-grid,
.template-layout,
.template-list,
.template-card-grid {
  display: grid;
  gap: 14px;
}

.step-card,
.row-card,
.geo-card {
  border: 1px solid rgba(99, 255, 214, 0.18);
  border-radius: 20px;
  background: rgba(2, 14, 12, 0.7);
}

.step-card,
.geo-card {
  padding: 16px;
}

.step-card p,
.section-head span,
label {
  color: var(--muted);
}

.section-head,
.row-topline,
.creative-tools,
.actions,
.template-apply-bar,
.template-card-actions,
.template-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.section-head {
  margin-bottom: 16px;
  align-items: flex-start;
}

.editor-head {
  position: sticky;
  top: 92px;
  z-index: 4;
  padding: 10px 12px;
  margin: -4px -4px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(4, 20, 18, 0.96), rgba(4, 20, 18, 0.84));
  backdrop-filter: blur(12px);
  border: 1px solid rgba(99, 255, 214, 0.14);
}

.editor-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.section-head h2,
.row-topline h3 {
  margin: 0;
}

.row-topline-actions,
.admin-actions-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.row-preview-button,
.inline-action {
  min-height: 38px;
  padding: 0 14px;
  text-decoration: none;
}

.rows {
  grid-template-columns: 1fr;
  max-height: none;
  overflow: visible;
  padding-right: 0;
  padding-bottom: calc(var(--footer-safe-space) - 24px);
  align-content: start;
  min-width: 0;
  gap: 16px;
}

.workspace-layout {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  min-height: auto;
  min-width: 0;
  padding-bottom: var(--footer-safe-space);
}

.preview-modal[hidden] {
  display: none;
}

.action-modal[hidden] {
  display: none;
}

.preview-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
}

.action-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
}

.preview-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 11, 10, 0.76);
  backdrop-filter: blur(10px);
}

.preview-modal-card {
  position: relative;
  width: min(1180px, calc(100% - 36px));
  max-height: calc(100vh - 40px);
  margin: 20px auto;
  padding: 20px;
  overflow: auto;
  border-radius: 26px;
  background: rgba(4, 20, 18, 0.94);
  border: 1px solid rgba(99, 255, 214, 0.18);
  box-shadow: var(--shadow);
}

.action-modal-card {
  position: relative;
  width: min(560px, calc(100% - 32px));
  margin: 10vh auto 0;
  padding: 22px 22px 20px;
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(99, 255, 214, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(6, 24, 21, 0.98), rgba(3, 14, 12, 0.98));
  border: 1px solid rgba(99, 255, 214, 0.18);
  box-shadow:
    0 26px 52px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(99, 255, 214, 0.08),
    0 0 28px rgba(10, 255, 185, 0.08);
  backdrop-filter: blur(18px);
}

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

.preview-modal-head h3 {
  margin: 0;
}

.preview-modal-content {
  display: grid;
  gap: 14px;
}

.action-modal-body {
  display: grid;
  gap: 12px;
  margin-top: 6px;
}

.action-modal-message {
  margin: 0;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(99, 255, 214, 0.12);
  background: rgba(8, 24, 21, 0.72);
  color: var(--muted);
  line-height: 1.55;
}

.action-modal[data-mode="confirm"] .action-modal-body {
  gap: 0;
}

.action-modal-actions {
  display: flex;
  justify-content: end;
  gap: 12px;
  margin-top: 18px;
}

.preview-slot {
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(99, 255, 214, 0.14);
  background: rgba(3, 15, 13, 0.76);
}

.preview-slot.is-custom {
  border-color: rgba(99, 255, 214, 0.34);
  box-shadow: 0 0 0 1px rgba(99, 255, 214, 0.12);
}

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

.preview-slot-head span {
  color: var(--muted);
}

.preview-slot-grid {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.preview-asset {
  min-height: 220px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(7, 21, 18, 0.92);
  border: 1px solid rgba(99, 255, 214, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.preview-switcher {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(4, 20, 18, 0.74);
  border: 1px solid rgba(99, 255, 214, 0.14);
  backdrop-filter: blur(8px);
}

.preview-switcher span {
  color: var(--text);
  font-size: 13px;
}

.preview-switch-button {
  min-width: 42px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.white-video-progress {
  margin-top: 14px;
  margin-bottom: 14px;
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(99, 255, 214, 0.18);
  background:
    linear-gradient(180deg, rgba(6, 22, 18, 0.92), rgba(3, 14, 12, 0.88)),
    radial-gradient(circle at top right, rgba(99, 255, 214, 0.14), transparent 34%);
  box-shadow:
    inset 0 0 0 1px rgba(99, 255, 214, 0.06),
    0 10px 28px rgba(0, 0, 0, 0.2);
}

.white-video-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.white-video-progress-head strong {
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.white-video-progress-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(99, 255, 214, 0.22);
  background: rgba(9, 35, 29, 0.72);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.white-video-progress-bar {
  width: 100%;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(4, 18, 15, 0.96), rgba(2, 12, 10, 0.96));
  border: 1px solid rgba(99, 255, 214, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(99, 255, 214, 0.05),
    inset 0 0 18px rgba(7, 48, 39, 0.28);
}

.white-video-progress-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(157, 255, 234, 0.98), rgba(86, 255, 216, 0.96) 42%, rgba(10, 212, 164, 0.98));
  box-shadow:
    0 0 16px rgba(98, 255, 216, 0.2),
    0 0 28px rgba(12, 201, 155, 0.14);
  transition: width 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.white-video-progress-text {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.white-video-progress-text.is-error {
  color: #ff9db0;
}

.white-video-progress-counter {
  color: var(--text);
  font-size: 13px;
}

.white-video-progress[data-state="working"] .white-video-progress-bar span {
  box-shadow:
    0 0 16px rgba(98, 255, 216, 0.24),
    0 0 30px rgba(12, 201, 155, 0.16);
}

.white-video-progress[data-state="working"] .white-video-progress-badge {
  border-color: rgba(99, 255, 214, 0.28);
  box-shadow: 0 0 14px rgba(99, 255, 214, 0.14);
}

.white-video-progress[data-state="done"] .white-video-progress-bar span {
  background: linear-gradient(90deg, rgba(140, 255, 231, 0.98), rgba(69, 255, 206, 0.96));
}

.white-video-progress[data-state="done"] .white-video-progress-badge {
  border-color: rgba(99, 255, 214, 0.4);
  background: rgba(13, 48, 39, 0.78);
}

.white-video-progress[data-state="error"] .white-video-progress-bar span {
  background: linear-gradient(90deg, rgba(255, 161, 188, 0.96), rgba(255, 112, 154, 0.94));
  box-shadow: 0 0 16px rgba(255, 126, 165, 0.2);
}

.white-video-progress[data-state="error"] .white-video-progress-badge {
  border-color: rgba(255, 128, 165, 0.32);
  background: rgba(47, 15, 25, 0.78);
  color: #ffd6e0;
}

.toast-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 70;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.toast {
  min-width: 280px;
  max-width: 420px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(99, 255, 214, 0.18);
  background:
    linear-gradient(180deg, rgba(5, 21, 18, 0.98), rgba(3, 14, 12, 0.96)),
    radial-gradient(circle at top right, rgba(99, 255, 214, 0.16), transparent 30%);
  color: var(--text);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(99, 255, 214, 0.08),
    0 0 28px rgba(10, 255, 185, 0.08);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast-success {
  border-color: rgba(99, 255, 214, 0.26);
}

.toast-error {
  border-color: rgba(255, 128, 165, 0.3);
  color: #ffd7e2;
}

.preview-asset img,
.preview-asset video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
}

.preview-asset-fallback {
  padding: 16px;
  color: var(--muted);
  text-align: center;
  word-break: break-word;
}

.preview-slot-empty-note {
  min-height: 220px;
  border-radius: 18px;
  border: 1px dashed rgba(99, 255, 214, 0.16);
  background: rgba(5, 17, 15, 0.58);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  color: var(--muted);
}

.preview-meta {
  display: grid;
  gap: 10px;
}

.preview-meta div {
  color: var(--text);
  word-break: break-word;
}

.preview-meta span,
.preview-link {
  color: var(--muted);
}

body.modal-open {
  overflow: hidden;
}

.hierarchy-panel {
  position: sticky;
  top: 104px;
  padding: 18px;
  border: 1px solid rgba(99, 255, 214, 0.18);
  border-radius: 20px;
  background: rgba(2, 14, 12, 0.72);
  box-shadow: var(--shadow);
  min-height: 0;
  max-height: calc(100vh - 104px - var(--footer-safe-space));
  overflow-y: auto;
  overflow-x: hidden;
}

.hierarchy-head {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}

.hierarchy-head span,
.hierarchy-empty {
  color: var(--muted);
  font-size: 13px;
}

.hierarchy-tree {
  display: grid;
  gap: 14px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.hierarchy-campaign,
.hierarchy-adset {
  display: grid;
  gap: 8px;
}

.hierarchy-campaign-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(99, 255, 214, 0.1);
  border: 1px solid rgba(99, 255, 214, 0.14);
  font-weight: 700;
}

.hierarchy-campaign.is-active .hierarchy-campaign-title {
  background: rgba(99, 255, 214, 0.18);
  border-color: rgba(99, 255, 214, 0.32);
  box-shadow:
    0 0 0 1px rgba(99, 255, 214, 0.14),
    0 0 22px rgba(10, 255, 185, 0.1);
}

.hierarchy-campaign-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hierarchy-budget {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(99, 255, 214, 0.14);
  border: 1px solid rgba(99, 255, 214, 0.18);
  color: var(--text);
  font-size: 12px;
}

.hierarchy-adset {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid rgba(99, 255, 214, 0.18);
}

.hierarchy-adset-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  color: var(--text);
  opacity: 0.92;
  font-size: 13px;
}

.hierarchy-adset.is-active .hierarchy-adset-title {
  color: #e8fff9;
  text-shadow: 0 0 12px rgba(99, 255, 214, 0.12);
}

.hierarchy-adset-title span:last-of-type {
  flex: 1 1 auto;
  min-width: 0;
}

.hierarchy-icon {
  flex: 0 0 auto;
  display: inline-block;
}

.hierarchy-icon-campaign {
  width: 14px;
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(180deg, #4ecbff, #2a82ff);
}

.hierarchy-icon-adset {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(99, 255, 214, 0.7);
  box-shadow:
    inset 4px 0 0 rgba(99, 255, 214, 0.2),
    inset -4px 0 0 rgba(99, 255, 214, 0.08);
}

.hierarchy-ad {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
  text-align: left;
  padding: 11px 13px;
  border-radius: 14px;
  color: var(--text);
  background: rgba(99, 255, 214, 0.06);
  border: 1px solid rgba(99, 255, 214, 0.12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hierarchy-ad.is-active {
  background: rgba(99, 255, 214, 0.16);
  border-color: rgba(99, 255, 214, 0.32);
  box-shadow: 0 0 0 1px rgba(99, 255, 214, 0.14);
}

.hierarchy-ad-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.hierarchy-remove {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 107, 143, 0.3);
  background: rgba(255, 107, 143, 0.1);
  color: #ffc4d4;
  font-size: 14px;
  line-height: 1;
}

.hierarchy-remove:hover {
  background: rgba(255, 107, 143, 0.18);
  border-color: rgba(255, 107, 143, 0.44);
}

.hierarchy-remove-ad {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 12px;
  border-radius: 7px;
}

.template-layout {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  align-items: start;
}

.template-form,
.template-library {
  border: 1px solid rgba(99, 255, 214, 0.18);
  border-radius: 20px;
  background: rgba(2, 14, 12, 0.7);
  padding: 18px;
  min-width: 0;
}

.template-library {
  max-height: 640px;
  overflow: hidden;
}

.template-apply-bar {
  align-items: end;
}

.template-apply-bar label {
  flex: 1 1 auto;
}

.geo-link-grid {
  grid-template-columns: 1fr;
  margin-bottom: 14px;
}

.geo-presets {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.row-card {
  padding: 18px;
  scroll-margin-top: 156px;
}

.row-card.is-selected {
  border-color: rgba(99, 255, 214, 0.4);
  box-shadow: 0 0 0 1px rgba(99, 255, 214, 0.18), 0 16px 44px rgba(0, 0, 0, 0.38), 0 0 36px rgba(10, 255, 185, 0.08);
}

input.is-campaign-locked {
  opacity: 0.74;
  background: rgba(7, 18, 16, 0.82);
  border-style: dashed;
}

.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

label {
  display: grid;
  gap: 8px;
  font-size: 13px;
}

label.wide {
  grid-column: 1 / -1;
}

input,
textarea,
select,
button {
  font: inherit;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid rgba(99, 255, 214, 0.2);
  border-radius: 16px;
  padding: 14px 15px;
  color: var(--text);
  background: rgba(2, 10, 9, 0.94);
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(10, 255, 185, 0.72);
  box-shadow: 0 0 0 4px rgba(10, 255, 185, 0.1);
  transform: translateY(-1px);
}

button {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  cursor: pointer;
}

.primary-button,
.upload-button,
.file-button {
  color: #03231d;
  background: linear-gradient(135deg, var(--accent-strong), #9bffe6);
  box-shadow: 0 12px 28px rgba(10, 255, 185, 0.25);
}

.file-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid rgba(99, 255, 214, 0.2);
  border-radius: 18px;
  background: rgba(2, 10, 9, 0.94);
  overflow: hidden;
}

.file-picker input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.file-button,
.file-name {
  position: relative;
  z-index: 1;
}

.file-name {
  color: var(--text);
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ghost-button,
.remove-button,
.danger-button {
  color: var(--text);
  background: rgba(99, 255, 214, 0.08);
  border: 1px solid rgba(99, 255, 214, 0.16);
}

.remove-button,
.danger-button {
  color: #ffd4e0;
  background: rgba(255, 107, 143, 0.08);
  border-color: rgba(255, 107, 143, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 107, 143, 0.04);
}

.danger-button:hover {
  background: rgba(255, 107, 143, 0.16);
  border-color: rgba(255, 107, 143, 0.32);
}

.creative-tools {
  align-items: end;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(99, 255, 214, 0.12);
  flex-wrap: wrap;
}

.creative-tools label {
  flex: 1 1 0;
  min-width: 220px;
}

.save-preset-button {
  align-self: stretch;
}

.footer-panel {
  position: sticky;
  bottom: 16px;
  z-index: 3;
  backdrop-filter: blur(14px);
  background: rgba(4, 18, 16, 0.92);
  border-color: rgba(99, 255, 214, 0.18);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34), 0 0 26px rgba(10, 255, 185, 0.06);
}

.top-gap {
  margin-top: 16px;
}

.upload-fixed-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.upload-fixed-pill {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(99, 255, 214, 0.16);
  background: rgba(99, 255, 214, 0.08);
  color: var(--text);
}

.upload-results {
  display: grid;
  gap: 12px;
}

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

.admin-editor textarea {
  min-height: 320px;
  font-family: "Cascadia Code", "Consolas", monospace;
  font-size: 12px;
  line-height: 1.45;
  resize: vertical;
}

.admin-table-wrap {
  overflow: auto;
  border: 1px solid rgba(99, 255, 214, 0.16);
  border-radius: 18px;
  background: rgba(2, 14, 12, 0.7);
  max-width: 100%;
}

.white-media-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(99, 255, 214, 0.14);
  background: linear-gradient(180deg, rgba(5, 19, 16, 0.92), rgba(3, 14, 12, 0.88));
}

.white-media-filter-bar label {
  display: grid;
  gap: 6px;
  min-width: 180px;
}

.white-media-filter-bar label span {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.white-media-filter-bar select {
  min-width: 160px;
}

.admin-table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(99, 255, 214, 0.12);
  background: linear-gradient(180deg, rgba(5, 19, 16, 0.9), rgba(3, 14, 12, 0.84));
}

.admin-table-pagination-meta {
  display: grid;
  gap: 4px;
}

.admin-table-pagination-meta strong {
  font-size: 15px;
}

.admin-table-pagination-meta span {
  color: var(--muted);
  font-size: 13px;
}

.admin-table-pagination-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.page-chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-chip {
  min-width: 40px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(99, 255, 214, 0.14);
  background: rgba(99, 255, 214, 0.08);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(99, 255, 214, 0.04);
}

.page-chip.is-active {
  color: #03231d;
  background: linear-gradient(135deg, var(--accent-strong), #9bffe6);
  border-color: rgba(99, 255, 214, 0.5);
  box-shadow: 0 10px 20px rgba(10, 255, 185, 0.18);
}

.white-group-manager {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(99, 255, 214, 0.14);
  background: linear-gradient(180deg, rgba(5, 19, 16, 0.9), rgba(3, 14, 12, 0.86));
}

.white-group-manager-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}

.white-group-manager-head strong {
  font-size: 18px;
}

.white-group-manager-head span {
  color: var(--muted);
}

.white-group-toolbar {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
}

.white-group-toolbar label {
  display: grid;
  gap: 6px;
  min-width: 240px;
  flex: 1 1 280px;
}

.white-group-toolbar label span {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.white-group-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.white-group-card {
  display: grid;
  gap: 12px;
  padding: 16px 16px 14px;
  border-radius: 20px;
  border: 1px solid rgba(99, 255, 214, 0.16);
  background:
    radial-gradient(circle at top right, rgba(99, 255, 214, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(7, 28, 24, 0.92), rgba(4, 18, 16, 0.9));
  color: var(--text);
  text-align: left;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
  align-content: start;
  min-height: 190px;
  overflow: hidden;
}

.white-group-card:hover {
  transform: translateY(-1px);
  border-color: rgba(99, 255, 214, 0.34);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2), 0 0 18px rgba(99, 255, 214, 0.08);
}

.white-group-card.is-active {
  border-color: rgba(99, 255, 214, 0.58);
  background: linear-gradient(180deg, rgba(10, 36, 31, 0.96), rgba(5, 24, 21, 0.94));
  box-shadow: 0 0 0 1px rgba(99, 255, 214, 0.12), 0 0 20px rgba(99, 255, 214, 0.1);
}

.white-group-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.white-group-card-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
  flex: 0 0 auto;
}

.white-group-card-actions .inline-action {
  min-width: 132px;
  padding: 9px 12px;
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.white-group-card strong {
  font-size: 18px;
  line-height: 1.15;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-shadow: 0 0 18px rgba(99, 255, 214, 0.08);
}

.white-group-card span {
  color: var(--muted);
  font-size: 13px;
}

.white-group-card .danger-button.inline-action {
  background: linear-gradient(180deg, rgba(60, 18, 28, 0.9), rgba(32, 10, 18, 0.92));
}

.group-create-input {
  min-width: 220px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 940px;
}

.admin-table th,
.admin-table td {
  padding: 12px;
  border-bottom: 1px solid rgba(99, 255, 214, 0.1);
  vertical-align: top;
}

.admin-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  color: var(--muted);
  background: rgba(4, 18, 15, 0.96);
}

.admin-table td input,
.admin-table td select,
.admin-table td textarea {
  min-width: 140px;
  padding: 10px 12px;
  border-radius: 12px;
}

.admin-table td textarea {
  min-height: 74px;
  resize: vertical;
}

.neon-check input[type="checkbox"] {
  display: none;
}

.neon-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.neon-check-head {
  margin: 0 auto;
}

.neon-check-box {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(99, 255, 214, 0.34);
  background: linear-gradient(180deg, rgba(5, 22, 19, 0.94), rgba(3, 15, 13, 0.96));
  box-shadow: inset 0 0 0 1px rgba(99, 255, 214, 0.06), 0 0 0 1px rgba(99, 255, 214, 0.04);
  position: relative;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease, transform 140ms ease;
}

.neon-check:hover .neon-check-box {
  border-color: rgba(99, 255, 214, 0.52);
  box-shadow: inset 0 0 0 1px rgba(99, 255, 214, 0.08), 0 0 12px rgba(99, 255, 214, 0.12);
  transform: translateY(-1px);
}

.neon-check input[type="checkbox"]:checked + .neon-check-box {
  border-color: rgba(99, 255, 214, 0.82);
  background: linear-gradient(180deg, rgba(140, 255, 231, 0.98), rgba(69, 255, 206, 0.96));
  box-shadow: 0 0 14px rgba(99, 255, 214, 0.24), 0 0 0 1px rgba(99, 255, 214, 0.14);
}

.neon-check-box::after {
  content: "";
  position: absolute;
  inset: 3px 5px 4px 5px;
  border-right: 2px solid rgba(1, 16, 13, 0.98);
  border-bottom: 2px solid rgba(1, 16, 13, 0.98);
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 120ms ease;
}

.neon-check input[type="checkbox"]:checked + .neon-check-box::after {
  transform: rotate(45deg) scale(1);
}

.batch-video-button[data-loading="true"] {
  position: relative;
  padding-left: 44px;
}

.batch-video-button[data-loading="true"]::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  border: 2px solid rgba(99, 255, 214, 0.24);
  border-top-color: rgba(99, 255, 214, 0.96);
  animation: spinNeon 0.9s linear infinite;
}

@keyframes spinNeon {
  to {
    transform: rotate(360deg);
  }
}

.password-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
  min-width: 220px;
}

.password-toggle {
  min-width: 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  line-height: 1;
}

.admin-table-empty {
  color: var(--muted);
  text-align: center;
}

.media-preview-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.media-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(99, 255, 214, 0.18);
  background: rgba(8, 31, 26, 0.68);
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
}

.media-status-chip.is-ready,
.media-status-chip.is-generated {
  border-color: rgba(99, 255, 214, 0.32);
  background: rgba(11, 48, 39, 0.78);
}

.media-status-chip.is-missing {
  border-color: rgba(255, 145, 178, 0.26);
  background: rgba(42, 14, 23, 0.76);
  color: #ffd6e1;
}

.media-status-chip.is-pending {
  border-color: rgba(255, 214, 126, 0.24);
  background: rgba(40, 28, 8, 0.74);
  color: #ffe2a5;
}

.template-list {
  max-height: 520px;
  overflow-y: auto;
  padding-right: 6px;
}

.template-list::-webkit-scrollbar {
  width: 8px;
}

.template-list::-webkit-scrollbar-thumb {
  background: rgba(99, 255, 214, 0.28);
  border-radius: 999px;
}

.upload-result-card {
  padding: 14px 16px;
  border: 1px solid rgba(99, 255, 214, 0.18);
  border-radius: 18px;
  background: rgba(2, 14, 12, 0.7);
}

.template-card {
  padding: 11px 13px;
  border: 1px solid rgba(99, 255, 214, 0.18);
  border-radius: 16px;
  background: rgba(2, 14, 12, 0.7);
}

.template-card-meta,
.template-card-grid span {
  color: var(--muted);
  font-size: 12px;
}

.template-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 8px;
  gap: 8px;
}

.template-card-actions {
  margin-top: 10px;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.template-card-actions button {
  padding: 8px 12px;
  font-size: 12px;
}

.upload-result-name {
  font-weight: 600;
  margin-bottom: 6px;
}

.upload-result-meta {
  color: var(--muted);
  margin-bottom: 8px;
}

.upload-result-meta.is-error {
  color: #ff9ab4;
}

.upload-result-hash {
  word-break: break-all;
  color: var(--text);
}

.upload-result-hash.is-success {
  color: var(--accent);
}

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

.download-hint {
  margin-top: 12px;
  color: var(--muted);
}

.download-hint.is-error {
  color: #ff9ab4;
}

.download-hint.is-success {
  color: var(--accent);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}

@media (max-width: 860px) {
  .workspace-layout {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-bottom: 0;
  }

  .hierarchy-panel {
    position: static;
    max-height: none;
  }

  .rows {
    max-height: none;
    overflow: visible;
    padding-right: 0;
    padding-bottom: 0;
  }

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

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

  label.wide {
    grid-column: auto;
  }

  .creative-tools,
  .section-head,
  .row-topline,
  .actions,
  .template-apply-bar,
  .template-card-actions,
  .template-card-head {
    flex-direction: column;
    align-items: stretch;
  }

  .footer-panel {
    position: static;
  }

  .tab-nav {
    position: static;
    flex-direction: column;
  }

  .page {
    width: min(100%, calc(100% - 16px));
    padding-bottom: 28px;
  }
}

/* Security edition visual layer */
:root {
  --panel: rgba(255, 255, 255, 0.88);
  --panel-border: rgba(33, 93, 148, 0.16);
  --text: #102132;
  --muted: #66768a;
  --accent: #2276d2;
  --accent-strong: #1f9f8f;
  --shadow: 0 18px 50px rgba(29, 62, 97, 0.13), 0 0 0 1px rgba(255, 255, 255, 0.78);
}

html,
body {
  background:
    linear-gradient(135deg, rgba(232, 246, 255, 0.94), rgba(248, 251, 255, 0.96) 42%, rgba(235, 250, 246, 0.94)),
    #f6f9fc;
  color: var(--text);
}

body::before {
  background:
    linear-gradient(90deg, rgba(31, 118, 210, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(31, 118, 210, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.48;
  mix-blend-mode: normal;
}

body::after,
.sky,
.starfield,
.aurora {
  display: none;
}

.page {
  width: min(1540px, calc(100% - 32px));
  padding-top: 22px;
}

.panel,
.auth-card,
.template-form,
.template-library,
.row-card,
.hierarchy-panel,
.admin-table-wrap,
.upload-results,
.white-group-manager,
.white-group-card,
.upload-result-card,
.template-card,
.step-card,
.geo-card {
  background: var(--panel);
  border-color: var(--panel-border);
  border-radius: 8px;
  color: var(--text);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.tab-nav,
.admin-nav-panel,
.editor-head,
.footer-panel {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(33, 93, 148, 0.14);
}

.section-head h2,
.row-topline h3,
.auth-head h1,
.white-group-card strong {
  color: #102132;
  letter-spacing: 0;
}

.row-label {
  color: var(--accent);
  letter-spacing: 0.08em;
}

.section-head span,
.hierarchy-head span,
.hierarchy-empty,
.template-card-meta,
.template-card-grid span,
.upload-result-meta,
.download-hint,
label,
.session-user,
.white-group-card span,
.preview-meta span,
.preview-link {
  color: var(--muted);
}

input,
textarea,
select,
.file-picker {
  background: rgba(248, 251, 255, 0.96);
  border-color: rgba(33, 93, 148, 0.18);
  border-radius: 8px;
  color: var(--text);
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(31, 118, 210, 0.58);
  box-shadow: 0 0 0 4px rgba(31, 118, 210, 0.1);
}

button,
.admin-subnav-button,
.page-chip,
.media-status-chip,
.upload-fixed-pill {
  border-radius: 8px;
}

.primary-button,
.upload-button,
.file-button,
.tab-button.is-active,
.admin-subnav-button.is-active,
.page-chip.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, #2276d2, #1f9f8f);
  border-color: rgba(31, 118, 210, 0.34);
  box-shadow: 0 12px 24px rgba(31, 118, 210, 0.18);
}

.ghost-button,
.tab-button,
.admin-subnav-button {
  color: #23415f;
  background: rgba(238, 246, 255, 0.9);
  border: 1px solid rgba(33, 93, 148, 0.16);
}

.ghost-button:hover,
.tab-button:hover,
.admin-subnav-button:hover {
  border-color: rgba(31, 118, 210, 0.28);
  background: rgba(226, 240, 255, 0.96);
}

.remove-button,
.danger-button {
  color: #b32648;
  background: rgba(255, 239, 244, 0.96);
  border-color: rgba(179, 38, 72, 0.16);
}

.workspace-layout {
  gap: 16px;
}

.hierarchy-campaign-title,
.hierarchy-ad,
.hierarchy-budget,
.white-media-filter-bar,
.admin-table-pagination {
  background: rgba(239, 247, 255, 0.92);
  border-color: rgba(33, 93, 148, 0.14);
}

.hierarchy-campaign.is-active .hierarchy-campaign-title,
.hierarchy-ad.is-active,
.row-card.is-selected,
.white-group-card.is-active {
  border-color: rgba(31, 118, 210, 0.34);
  box-shadow: 0 0 0 1px rgba(31, 118, 210, 0.12), 0 14px 34px rgba(31, 118, 210, 0.12);
}

.admin-table th {
  color: #53677e;
  background: rgba(244, 248, 252, 0.98);
}

.admin-table th,
.admin-table td {
  border-bottom-color: rgba(33, 93, 148, 0.1);
}

.toast,
.action-modal-card,
.preview-modal-card {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(33, 93, 148, 0.16);
  color: var(--text);
}