/* Pandora: midnight rainforest, luminous plants, cyan and violet accents. */
:root {
  color-scheme: dark;
  --bg: #040d1c;
  --ink: #edfaff;
  --muted: #a6c1d2;
  --line: rgba(100, 203, 239, .19);
  --green: #6ce8ec;
  --dark: #041221;
  --cyan: #65f1ed;
  --violet: #b9a1ff;
  --panel: rgba(7, 24, 43, .91);
}

body {
  background: radial-gradient(ellipse at 80% 0, #102346, transparent 60%), var(--bg);
  min-height: 100vh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgba(3, 13, 29, .67), rgba(3, 13, 29, .95)),
    url("images/pandora-forest.png") center / cover;
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 7% 24%, #62f8f4 0 1px, transparent 3px),
    radial-gradient(circle at 92% 47%, #b9a1ff 0 1px, transparent 3px),
    radial-gradient(circle at 17% 83%, #62f8f4 0 1px, transparent 4px),
    radial-gradient(circle at 86% 9%, #62f8f4 0 1px, transparent 3px);
  opacity: .6;
  animation: bioluminescence 7s ease-in-out infinite alternate;
}

@keyframes bioluminescence {
  from { opacity: .25; }
  to { opacity: .85; }
}

input, select {
  background: rgba(3, 15, 30, .85);
  border-color: rgba(111, 193, 232, .28);
  transition: border-color .18s, box-shadow .18s;
}

input::placeholder { color: #819eaf; }
select option { background: #0a1e33; color: var(--ink); }
input:hover, select:hover { border-color: #3a859e; }
input:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  box-shadow: 0 0 24px rgba(53, 214, 228, .12);
}

.brand { color: #f2fcff; }
.brand span { color: var(--cyan); }
.brand b { color: var(--cyan); text-shadow: 0 0 18px rgba(74, 250, 243, .55); }
.eyebrow { color: #91dce4; font-size: 10px; letter-spacing: 2.5px; }
.primary {
  color: #032232;
  background: linear-gradient(115deg, #83f5d4, #5cdbe9);
  border: 1px solid rgba(160, 255, 249, .65);
  box-shadow: 0 3px 22px rgba(41, 224, 228, .12), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: box-shadow .2s, transform .2s;
}
.primary:hover {
  background: linear-gradient(115deg, #a2ffe8, #7aedfa);
  box-shadow: 0 0 30px rgba(41, 224, 228, .27);
  transform: translateY(-1px);
}
.secondary {
  color: #cbf4f8;
  background: rgba(53, 120, 145, .14);
  border-color: rgba(115, 208, 231, .24);
}
.secondary:hover { background: rgba(63, 159, 179, .24); }
.subtle { color: #b1d4de; }
.subtle:hover, .original-link:hover { color: var(--cyan); }
.fine { color: #92afc2; }

/* The login carries the landscape; the studio keeps it behind the controls. */
.login-layout { grid-template-columns: 1.15fr 1fr; }
.login-story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 48px 64px;
  min-height: 100vh;
  background: linear-gradient(90deg, rgba(1, 12, 29, .77), rgba(2, 15, 35, .22)),
    linear-gradient(0deg, rgba(2, 11, 25, .6), transparent 45%),
    url("images/pandora-forest.png") 65% center / cover;
  border-right: 1px solid rgba(101, 219, 237, .18);
}
.login-story::after {
  content: "";
  position: absolute;
  inset: auto -20% -18% 25%;
  height: 36%;
  background: radial-gradient(ellipse, rgba(75, 74, 211, .22), transparent 65%);
  pointer-events: none;
  z-index: -1;
}
.story-copy { padding: 80px 0; }
.story-copy h1 {
  font-size: clamp(42px, 4.6vw, 74px);
  line-height: 1.04;
  text-shadow: 0 3px 40px #020b1b;
}
.story-copy em {
  color: #80fff0;
  text-shadow: 0 0 35px rgba(40, 217, 232, .28);
}
.story-copy > p:not(.eyebrow) { color: #c1d6e4; max-width: 375px; }
.story-copy .eyebrow { color: #9af2e7; }
.tags span {
  color: #cbf8f7;
  background: rgba(7, 31, 48, .68);
  border-color: rgba(129, 239, 235, .3);
  backdrop-filter: blur(10px);
}
.login-story > small { color: #aed1df; }
.login-panel {
  background: radial-gradient(ellipse at 85% 18%, rgba(91, 52, 146, .22), transparent 55%),
    radial-gradient(ellipse at 10% 85%, rgba(14, 135, 158, .12), transparent 60%),
    #061021;
  padding: 50px;
}
.login-box {
  max-width: 425px;
  padding: 36px;
  border-radius: 24px;
  border: 1px solid rgba(102, 189, 229, .22);
  background: linear-gradient(145deg, rgba(16, 40, 64, .72), rgba(7, 19, 38, .9));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(146, 222, 255, .08);
}
.mark {
  color: #8bfff0;
  background: linear-gradient(140deg, rgba(60, 215, 215, .18), rgba(107, 80, 220, .16));
  border: 1px solid rgba(110, 242, 235, .42);
  box-shadow: 0 0 35px rgba(51, 223, 233, .1);
  margin-bottom: 32px;
}
.login-box h2 { font-size: 32px; }
.google-button {
  color: #edfaff;
  background: rgba(12, 43, 62, .8);
  border-color: rgba(116, 225, 232, .45);
  box-shadow: 0 0 28px rgba(56, 216, 227, .05);
  transition: border-color .2s, background .2s;
}
.google-button:hover { background: #123c50; border-color: var(--cyan); }
.google-button strong {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 17px;
}
.google-button > span { color: var(--cyan); }
.notice { color: #e0d4fb; border-color: #65518a; background: rgba(74, 47, 112, .28); }

header {
  background: rgba(4, 15, 30, .86);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 25px rgba(27, 144, 183, .05);
}
.account { color: #c4dae5; }
.studio { padding-top: 32px; }
.intro {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 34px 32px;
  min-height: 195px;
  border: 1px solid rgba(104, 208, 235, .23);
  background: linear-gradient(90deg, rgba(3, 18, 36, .98), rgba(4, 22, 41, .8) 50%, rgba(4, 21, 40, .14)),
    url("images/pandora-forest.png") 65% 53% / cover;
}
.intro h1 { font-size: clamp(27px, 3.1vw, 40px); position: relative; }
.intro h1 span { color: var(--cyan); text-shadow: 0 0 20px #35afb8; }
.intro > p:last-child { color: #b1d0dd; margin-bottom: 0; }
.import-card, .editor, .library {
  background: linear-gradient(145deg, rgba(13, 37, 59, .93), rgba(5, 21, 39, .95));
  border-color: rgba(104, 195, 230, .22);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(147, 225, 255, .035);
}
.import-card { margin-top: 24px; }
.step {
  color: #8affec;
  background: rgba(59, 204, 202, .1);
  border: 1px solid rgba(111, 241, 227, .24);
}
.library-heading > span { color: #bdadff; background: rgba(139, 101, 216, .17); }
#empty-preview {
  background: radial-gradient(ellipse at center, rgba(27, 99, 120, .2), rgba(3, 18, 34, .55) 65%);
  border-color: rgba(105, 201, 227, .23);
}
.play-symbol {
  color: #9effef;
  background: radial-gradient(circle, rgba(39, 164, 176, .21), rgba(37, 102, 141, .08));
  border: 1px solid rgba(104, 236, 223, .3);
  box-shadow: 0 0 40px rgba(29, 218, 215, .12), inset 0 0 20px rgba(74, 226, 220, .05);
}
video { border: 1px solid var(--line); background: #020712; }
.job-actions a, .job-actions button { color: #bdf7ee; background: rgba(56, 158, 163, .17); }
.job-actions a:hover, .job-actions button:hover { background: rgba(56, 158, 163, .3); }
.job-actions .delete { color: #ffb8cb; background: rgba(183, 69, 109, .14); }
.badge { color: #77e7d0; }
.error .badge { color: #ffa5bf; }
.running .badge, .queued .badge { color: #c7b0ff; }
#status { color: #b9e8e8; }
.original-link { color: #b1e5e8; }
footer { color: #91aabe; }

@media (min-width: 1500px) {
  .login-story { padding: 56px 80px; }
}
@media (max-width: 1000px) {
  .login-story { padding: 36px; }
  .login-panel { padding: 28px; }
  .login-box { padding: 28px; }
  .story-copy h1 { letter-spacing: -2px; }
}
@media (max-width: 760px) {
  .login-layout { grid-template-columns: 1fr; }
  .login-story { min-height: 480px; padding: 28px; background-position: center, center, 70% center; }
  .story-copy { padding: 48px 0 26px; }
  .story-copy h1 { font-size: 48px; }
  .story-copy > p:not(.eyebrow) { font-size: 14px; }
  .tags { margin-top: 24px; }
  .login-panel { padding: 36px 20px 84px; }
  .login-box { width: 100%; max-width: 460px; padding: 28px; }
  .login-box h2 { font-size: 29px; }
  .login-panel > small { bottom: 28px; }
  .intro { min-height: 190px; padding: 26px 22px; }
  .intro h1 { line-height: 1.15; max-width: 290px; }
  .intro .eyebrow { font-size: 9px; letter-spacing: 1.5px; }
  .intro > p:last-child { font-size: 12px; max-width: 240px; }
  .editor, .library, .import-card { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  *, *::before, *::after { transition: none !important; }
}