:root {
  --background-color: #121216; /* Carbon Black */
  --primary-text-color: #e0e0e0; /* White */
  --secondary-text-color: #b0c4de; /* Light Steel Blue */
  
  /* New Accent Palette */
  --accent-pink: #ff33a1;
  --accent-blue: #00bfff;
  --accent-green: #00ff99; /* Neon Mint Green */
  --accent-gold: #ff9933; /* Gold/Orange */
  --accent-silver: #f5f5fa; /* Snow-white Silver */
  --accent-turquoise: #40E0D0; /* Light Turquoise */
  --accent-white-green: #F0FFF0; /* White-Green (Honeydew) */


  /* RGB versions for rgba() animations */
  --accent-blue-rgb: 0, 191, 255;
  --accent-green-rgb: 0, 255, 153;
  --accent-silver-rgb: 245, 245, 250;
  --accent-turquoise-rgb: 64, 224, 208;
  --accent-white-green-rgb: 240, 255, 240;
  
  /* Animated variables */
  --current-accent: var(--accent-blue);
  --current-accent-rgb: var(--accent-blue-rgb);

  --surface-color: rgba(28, 28, 32, 0.85);
  --border-color: rgba(var(--current-accent-rgb), 0.4); /* Dynamic border color */

  --font-heading: 'Michroma', sans-serif;
  --font-body: 'Share Tech Mono', monospace;
  
  animation: cycle-colors 45s steps(5, end) infinite;
}

@keyframes cycle-colors {
  0%, 100% { /* Light Green */
    --current-accent: var(--accent-green);
    --current-accent-rgb: var(--accent-green-rgb);
  }
  20% { /* Light Turquoise */
    --current-accent: var(--accent-turquoise);
    --current-accent-rgb: var(--accent-turquoise-rgb);
  }
  40% { /* Light Blue */
    --current-accent: var(--accent-blue);
    --current-accent-rgb: var(--accent-blue-rgb);
  }
  60% { /* Silver-white */
    --current-accent: var(--accent-silver);
    --current-accent-rgb: var(--accent-silver-rgb);
  }
  80% { /* White-green */
    --current-accent: var(--accent-white-green);
    --current-accent-rgb: var(--accent-white-green-rgb);
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--background-color);
  color: var(--primary-text-color);
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Align to top for scrolling on mobile */
  min-height: 100%;
  padding: 20px;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

#app-container {
  width: 100%;
  max-width: 1200px;
  height: 100%;
  z-index: 2;
  position: relative;
}

.hidden {
  display: none !important;
}

/* --- Typography & Global --- */
h1,
h2,
h3 {
  font-family: var(--font-heading);
  color: var(--primary-text-color);
  text-shadow: 0 0 8px var(--accent-blue), 0 0 15px var(--accent-pink);
  margin-bottom: 1rem;
}

p {
  color: var(--secondary-text-color);
  line-height: 1.6;
  margin-bottom: 1rem;
}

a {
  color: var(--accent-blue);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--accent-pink);
}

@keyframes pulseGlow {
  0%,
  100% {
    text-shadow: 0 0 8px var(--accent-blue), 0 0 16px var(--accent-pink);
  }
  50% {
    text-shadow: 0 0 12px var(--accent-blue), 0 0 24px var(--accent-pink),
      0 0 4px #fff;
  }
}

.logo {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 8px var(--accent-blue), 0 0 16px var(--accent-pink);
  animation: pulseGlow 4s ease-in-out infinite;
}

/* --- Animated Hyperdrive Background --- */
#space-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-color: #000;
  overflow: hidden; /* Hide overflowing nebulae */
}

#space-environment {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px); /* Softer blur */
  opacity: 0;
  transform-origin: center center;
}

@keyframes cycle-nebula-1 {
  0%, 100% {
    background: radial-gradient(circle, rgba(0, 191, 255, 0.3) 0%, transparent 50%); /* Blue */
  }
  50% {
    background: radial-gradient(circle, rgba(0, 255, 153, 0.3) 0%, transparent 50%); /* Green */
  }
}

.nebula-1 {
  width: 100vmax;
  height: 100vmax;
  top: 50%;
  left: 50%;
  animation: drift-fade 70s ease-in-out infinite, cycle-nebula-1 20s linear infinite;
}

.nebula-2 {
  width: 80vmax;
  height: 80vmax;
  top: 50%;
  left: 50%;
  background: radial-gradient(circle, rgba(0, 191, 255, 0.25) 0%, transparent 50%);
  animation: drift-fade 90s ease-in-out infinite reverse;
  animation-delay: -15s;
}

.nebula-3 {
  width: 60vmax;
  height: 60vmax;
  top: 50%;
  left: 50%;
  background: radial-gradient(circle, rgba(255, 51, 161, 0.2) 0%, transparent 50%);
  animation: drift-fade 110s ease-in-out infinite;
  animation-delay: -30s;
}

@keyframes drift-fade {
  0% {
    transform: translate(-50%, -50%) scale(0.9) rotate(0deg);
    opacity: 0.4;
  }
  50% {
    transform: translate(-45%, -55%) scale(1.1) rotate(15deg);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.9) rotate(0deg);
    opacity: 0.4;
  }
}

.planet {
    position: absolute;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 80px rgba(0,0,0,0.8), 0 0 20px rgba(255,255,255,0.1);
}

/* Real Planets */
.planet-mars { /* Mars */
    width: 150px;
    height: 150px;
    background-image: radial-gradient(circle at 20% 20%, #d48b51, #a0522d 80%);
    animation: slow-drift-1 180s linear infinite;
    z-index: 3;
    box-shadow: inset 0 0 80px rgba(0,0,0,0.8), 
                0 0 20px rgba(255,255,255,0.1), 
                0 0 40px rgba(212, 139, 81, 0.5),
                0 0 70px rgba(160, 82, 45, 0.3);
}

.planet-jupiter { /* Jupiter */
    width: 350px;
    height: 350px;
    background-image: 
        /* Bands */
        linear-gradient(170deg, 
            #d3c4a6 15%, #b28a6c 25%, #c8a081 35%, 
            #8a6f5a 50%, #d3c4a6 65%, #b28a6c 75%, 
            #c8a081 85%);
    animation: slow-drift-2 120s linear infinite -60s;
    z-index: 3;
}

.planet-venus { /* Venus */
    width: 180px;
    height: 180px;
    background-image: radial-gradient(circle at 70% 70%, #f0e6d2, #d8c0a8 70%);
    animation: slow-drift-3 240s linear infinite -120s;
    z-index: 3;
    box-shadow: inset 0 0 80px rgba(0,0,0,0.8), 
                0 0 20px #fff, 
                0 0 40px #f0e6d2, 
                0 0 80px #d8c0a8;
}

.planet-mercury { /* Mercury */
    width: 120px;
    height: 120px;
    background-image: radial-gradient(circle at 30% 70%, #b8b8b8, #808080 90%);
    animation: slow-drift-4 200s linear infinite -80s;
    z-index: 3;
}

.planet-saturn { /* Saturn Planet Body */
    width: 250px;
    height: 250px;
    animation: slow-drift-5 320s linear infinite;
    z-index: 3; /* Consistent with other planets */
    position: absolute;
    border-radius: 50%;
    background-image: linear-gradient(170deg, #f2e6c9 20%, #d4bda1 35%, #b39979 50%, #d4bda1 65%, #f2e6c9 80%);
    box-shadow: inset 0 0 100px rgba(0,0,0,0.9);
    /* Create a new stacking context for the rings */
    transform-style: preserve-3d;
}

.planet-saturn::before { /* FRONT ring */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160%;
    height: 160%;
    margin-left: -80%;
    margin-top: -80%;
    border-radius: 50%;
    border: 15px solid rgba(224, 216, 192, 0.6);
    transform: rotateX(75deg) rotate(20deg);
    box-sizing: border-box;
    z-index: 1; /* In front of body (which is 0 in this context) */
    clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}

.planet-saturn::after { /* BACK ring */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160%;
    height: 160%;
    margin-left: -80%;
    margin-top: -80%;
    border-radius: 50%;
    border: 15px solid rgba(224, 216, 192, 0.3);
    transform: rotateX(75deg) rotate(20deg);
    box-sizing: border-box;
    z-index: -1; /* Behind the body */
    clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
}

.planet-uranus { /* Uranus */
    width: 200px;
    height: 200px;
    background-image: radial-gradient(circle at 20% 80%, #d1e7f0, #a0c0d1 90%);
    animation: slow-drift-6 280s linear infinite -180s;
    z-index: 3;
    box-shadow: inset 0 0 80px rgba(0,0,0,0.8), 
                0 0 20px rgba(255,255,255,0.1),
                0 0 50px rgba(160, 192, 208, 0.6),
                0 0 90px rgba(209, 231, 240, 0.4);
}

.planet-neptune { /* Neptune */
    width: 220px;
    height: 220px;
    background-image: linear-gradient(150deg, #3b5a9d 0%, #5b87c7 40%, #adc0d1 48%, #adc0d1 52%, #5b87c7 60%, #3b5a9d 100%);
    animation: slow-drift-7 350s linear infinite;
    z-index: 3;
    box-shadow: inset 0 0 80px rgba(0,0,0,0.8), 0 0 20px rgba(255,255,255,0.1);
}

@keyframes slow-drift-1 {
    from { transform: translate(110vw, 80vh) scale(1); }
    to { transform: translate(-20vw, -30vh) scale(1); }
}

@keyframes slow-drift-2 {
    from { transform: translate(-15vw, 10vh) scale(0.8); }
    to { transform: translate(115vw, 40vh) scale(0.8); }
}

@keyframes slow-drift-3 {
    from { transform: translate(50vw, 120vh) scale(1.2); }
    to { transform: translate(20vw, -40vh) scale(1.2); }
}

@keyframes slow-drift-4 {
    from { transform: translate(120vw, 10vh) scale(0.9); }
    to { transform: translate(-30vw, 90vh) scale(0.9); }
}

@keyframes slow-drift-5 {
    from { transform: translate(110vw, 90vh) scale(1.1) rotate(-5deg); }
    to { transform: translate(-20vw, -10vh) scale(1.1) rotate(5deg); }
}

@keyframes slow-drift-6 {
    from { transform: translate(120vw, 50vh) scale(0.9); }
    to { transform: translate(-20vw, 30vh) scale(0.9); }
}

@keyframes slow-drift-7 {
    from { transform: translate(10vw, 120vh) scale(1); }
    to { transform: translate(90vw, -20vh) scale(1); }
}

/* --- VOYAGER PROBE --- */
@keyframes voyager-flyby {
    0% {
        top: 80%;
        left: -10%;
        transform: scale(1.2) rotate(25deg);
        opacity: 1;
    }
    100% {
        top: 20%;
        left: 110%;
        transform: scale(0.05) rotate(-10deg);
        opacity: 0.8;
    }
}

#voyager-probe {
    position: absolute;
    width: 50px;
    height: 50px;
    z-index: 3;
    animation: voyager-flyby 45s linear infinite;
    animation-delay: 3s;
}
#voyager-probe::before, #voyager-probe::after {
    content: '';
    position: absolute;
    background-color: #b0c4de;
    box-shadow: 0 0 5px #fff;
}
#voyager-probe::before {
    width: 15px;
    height: 15px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}
#voyager-probe::after {
    width: 40px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform-origin: left center;
    transform: translate(0, -50%) rotate(-45deg);
}


.stars {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-repeat: repeat;
    background-position: 0 0;
    z-index: 2;
}

#stars-small {
    background-image:
        radial-gradient(1px 1px at 20px 30px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 90px 160px, #FFFFE0, transparent),
        radial-gradient(0.5px 0.5px at 150px 220px, #C0D8F0, transparent),
        radial-gradient(1px 1px at 230px 80px, #FFFFFF, transparent);
    background-size: 250px 250px;
    animation: anim-stars-small 180s linear infinite;
}

#stars-medium {
    background-image:
        radial-gradient(2px 2px at 50px 150px, #FFFFE0, transparent),
        radial-gradient(1.5px 1.5px at 200px 50px, #FFFFFF, transparent),
        radial-gradient(2px 2px at 350px 350px, #C0D8F0, transparent),
        radial-gradient(1.5px 1.5px at 450px 200px, #FFFFE0, transparent);
    background-size: 500px 500px;
    animation: anim-stars-medium 120s linear infinite;
}

#stars-large {
    background-image:
        radial-gradient(3px 3px at 40px 80px, #FFFFFF, transparent),
        radial-gradient(2.5px 2.5px at 280px 220px, #C0D8F0, transparent),
        radial-gradient(3px 3px at 450px 100px, #FFFFE0, transparent);
    background-size: 600px 400px;
    animation: anim-stars-large 70s linear infinite;
}

@keyframes anim-stars-small {
    from { background-position: 0 0; }
    to { background-position: -250px 750px; }
}

@keyframes anim-stars-medium {
    from { background-position: 0 0; }
    to { background-position: 500px 1000px; }
}

@keyframes anim-stars-large {
    from { background-position: 0 0; }
    to { background-position: -600px 800px; }
}

/* --- Cockpit Overlay & HUD --- */
@keyframes cycle-reflection {
    0%, 100% {
        background: linear-gradient(
            160deg,
            rgba(255, 255, 255, 0.1) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0, 191, 255, 0.05) 100%
        );
    }
    50% {
        background: linear-gradient(
            160deg,
            rgba(255, 255, 255, 0.1) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0, 255, 153, 0.05) 100%
        );
    }
}

#cockpit-reflection {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  animation: subtle-reflection 15s ease-in-out infinite, cycle-reflection 20s linear infinite;
}

@keyframes subtle-reflection {
  0% {
    opacity: 0.05;
  }
  33% {
    opacity: 0.1;
  }
  66% {
    opacity: 0.03;
  }
  100% {
    opacity: 0.05;
  }
}

#cockpit-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden; /* To contain the scanline */
}

.hud-element {
  position: absolute;
  width: 60px;
  height: 60px;
  border-style: solid;
  border-color: var(--border-color);
  animation: pulse-hud 6s ease-in-out infinite;
  box-shadow: 0 0 5px rgba(var(--current-accent-rgb), 0.2), inset 0 0 5px rgba(var(--current-accent-rgb), 0.1);
}

@keyframes pulse-hud {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}

.top-left {
  top: 30px;
  left: 30px;
  border-width: 2px 0 0 2px;
}

.top-right {
  top: 30px;
  right: 30px;
  border-width: 2px 2px 0 0;
}

.bottom-left {
  bottom: 30px;
  left: 30px;
  border-width: 0 0 2px 2px;
}

.bottom-right {
  bottom: 30px;
  right: 30px;
  border-width: 0 2px 2px 0;
}

/* Scanline animation */
@keyframes scan {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  10% {
    transform: translateY(-100%);
    opacity: 0.6;
  }
  90% {
    transform: translateY(100vh);
    opacity: 0.6;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

.hud-scanline {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: var(--current-accent);
  box-shadow: 0 0 10px 2px var(--current-accent);
  animation: scan 9s linear infinite;
  animation-delay: 1s;
}

.hud-scanline::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 70px;
  bottom: 2px; /* Position trail above the line */
  left: 0;
  background: linear-gradient(to top, rgba(var(--current-accent-rgb), 0.4), transparent);
}

/* Crosshair */
@keyframes pulse-crosshair {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.98) translate(-50%, -50%);
  }
  50% {
    opacity: 0.8;
    transform: scale(1) translate(-50%, -50%);
  }
}

.hud-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  opacity: 0.6;
  animation: pulse-crosshair 5s ease-in-out infinite;
}

.hud-crosshair::before,
.hud-crosshair::after {
  content: '';
  position: absolute;
  background-color: var(--border-color);
}
/* horizontal line */
.hud-crosshair::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
}
/* vertical line */
.hud-crosshair::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
}

/* --- NEW Holographic HUD Panel --- */
#hud-panel { /* Replaces #hud-graphs */
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 900px;
  height: 180px; /* Increased height */
  perspective: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.hud-panel-base {
  width: 250px;
  height: 20px;
  background: linear-gradient(to top, #111, #222);
  clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
  position: relative;
  z-index: 2;
}
.hud-panel-base::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 2px;
  background: var(--accent-blue);
  box-shadow: 0 0 10px 2px var(--accent-blue);
  animation: pulse-hud 4s ease-in-out infinite;
}

.hologram-projection {
  width: 100%;
  height: 150px;
  background: 
    linear-gradient(to top, rgba(var(--current-accent-rgb), 0.2), transparent 70%),
    radial-gradient(ellipse at bottom, rgba(var(--current-accent-rgb), 0.2), transparent 60%);
  border-top: 1px solid var(--border-color);
  transform: rotateX(15deg);
  transform-origin: bottom center;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 10px 20px;
  position: relative;
}

/* Faint grid lines for holographic effect */
.hologram-projection::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(var(--current-accent-rgb), 0.1) 1px, transparent 1px),
        linear-gradient(to right, rgba(var(--current-accent-rgb), 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.5;
    pointer-events: none;
}

.panel-section {
    height: 100%;
    flex-basis: 32%;
    display: flex;
    flex-direction: column;
    animation: flicker-in 1.5s ease-out;
}

.panel-section-title {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: var(--accent-blue);
    text-shadow: 0 0 5px var(--accent-blue);
    text-align: center;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Left Section: Status Bars */
.panel-left {
    justify-content: center;
}
.status-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.status-bar { font-size: 0.8rem; }
.status-label {
    color: var(--secondary-text-color);
    margin-bottom: 4px;
    display: block;
    text-align: left;
}
.bar-track {
    width: 100%;
    height: 10px;
    background-color: rgba(var(--current-accent-rgb), 0.1);
    border: 1px solid rgba(var(--current-accent-rgb), 0.2);
    border-radius: 5px;
    padding: 1px;
}
.bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent-pink), var(--accent-blue));
    box-shadow: 0 0 8px var(--accent-blue);
    transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Center Section: Scanner */
.panel-center {
    align-items: center;
    justify-content: center;
    position: relative;
}
.scanner-display {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    position: relative;
    background: radial-gradient(circle, transparent 50%, rgba(var(--current-accent-rgb), 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Concentric rings */
.scanner-display::before, .scanner-display::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(var(--current-accent-rgb), 0.2);
    border-radius: 50%;
}
.scanner-display::before { width: 66%; height: 66%; }
.scanner-display::after { width: 33%; height: 33%; }

.scanner-reticle {
    width: 100%;
    height: 100%;
    position: absolute;
    animation: rotate-clockwise 20s linear infinite;
}
/* Crosshairs */
.scanner-reticle::before, .scanner-reticle::after {
    content: '';
    position: absolute;
    background-color: rgba(var(--current-accent-rgb), 0.2);
}
.scanner-reticle::before {
  left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px;
}
.scanner-reticle::after {
  top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -0.5px;
}

@keyframes scanner-sweep-anim {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.scanner-sweep {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: scanner-sweep-anim 3s linear infinite;
}
.scanner-sweep::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(var(--accent-green-rgb), 0.4), transparent);
    transform-origin: 0 50%;
}

.core-status {
    position: absolute;
    bottom: -5px;
    text-align: center;
}
.core-label {
    font-size: 0.75rem;
    color: var(--secondary-text-color);
}
.core-value {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--accent-green);
    text-shadow: 0 0 8px var(--accent-green);
    animation: pulse-hud 2s ease-in-out infinite;
}

/* Right Section: Log */
.panel-right {
    justify-content: space-between;
}
.log-display {
    height: 60px; /* Show 3 lines */
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(var(--current-accent-rgb), 0.2);
    background-color: rgba(0,0,0,0.2);
    padding: 5px;
}
.log-display::after { /* Fading effect */
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 20px;
    background: linear-gradient(to top, rgba(18,18,22,1), transparent);
}

@keyframes scroll-log {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); } /* Halfway point for seamless loop */
}
.log-lines {
    animation: scroll-log 8s linear infinite;
}
.log-lines p {
    margin: 0;
    padding: 0;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--primary-text-color);
    white-space: nowrap;
}

@keyframes scroll-graph {
  from { transform: translateX(0); }
  to { transform: translateX(-40px); } /* Width of one repeating EKG pattern */
}

.life-support-graph {
    width: 100%;
    height: 35px;
    margin-top: 5px;
    overflow: hidden; /* Important for scrolling effect */
}
.life-support-graph svg {
    transform-origin: center;
}
.life-support-graph svg path {
    stroke: var(--current-accent);
    filter: drop-shadow(0 0 3px var(--current-accent));
    animation: scroll-graph 1s linear infinite;
}

@keyframes flicker-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rotate-clockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- Navigation --- */
#navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: var(--surface-color);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
  margin-bottom: 2rem;
  border-radius: 8px;
}

#navbar .logo {
  font-size: 1.5rem;
}

#navbar .nav-links a {
  margin: 0 1rem;
  font-weight: 400;
  font-size: 1rem;
  padding-bottom: 5px;
  border-bottom: 2px solid transparent;
}

#navbar .nav-links a.active,
#navbar .nav-links a:hover {
  color: #fff;
  border-bottom-color: var(--accent-pink);
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* --- Forms & Buttons --- */
input[type='email'],
input[type='password'],
textarea,
select {
  width: 100%;
  padding: 12px;
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--primary-text-color);
  font-family: var(--font-body);
  font-size: 1rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

select {
  padding: 10px;
  margin-bottom: 0;
  width: auto;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent-pink);
  box-shadow: 0 0 10px var(--accent-pink);
}

button {
  width: 100%;
  padding: 12px;
  background: linear-gradient(
    45deg,
    var(--current-accent),
    var(--accent-pink),
    var(--accent-gold)
  );
  border: none;
  border-radius: 4px;
  color: #000;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-controls button {
  width: auto;
  padding: 10px 20px;
}

button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 51, 161, 0.4);
}

button:disabled {
  background: #555;
  color: #999;
  cursor: not-allowed;
}

/* --- Auth View --- */
#auth-view {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 80vh;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.auth-panel {
  width: 100%;
  max-width: 500px;
  padding: 2px; /* For the animated border */
  border-radius: 10px;
  position: relative;
  background: transparent;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@keyframes rotate-border {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.auth-panel::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    transparent,
    transparent,
    var(--current-accent),
    transparent
  );
  animation: rotate-border 4s linear infinite;
  z-index: 1;
}

.auth-panel > * {
  background-color: var(--surface-color);
  backdrop-filter: blur(10px);
  padding: 2rem;
  z-index: 2;
  text-align: center;
}
.auth-panel-header {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.auth-forms-container {
  padding-top: 0;
  padding-bottom: 0;
}
.auth-panel-footer {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}


.auth-switch {
  margin-top: 1rem;
  font-size: 0.9rem;
}
.error-message {
  color: #ff4d4d;
  margin-top: 1rem;
  min-height: 1.2em;
}

/* --- Auth View Title Effect --- */
@keyframes animate-text-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.auth-panel-header .logo,
.auth-forms-container h2 {
  color: transparent;
  animation: none;
  background: linear-gradient(
    -45deg,
    var(--accent-gold),
    var(--accent-pink),
    var(--accent-blue),
    var(--current-accent)
  );
  background-size: 300% 300%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: animate-text-gradient 8s ease-in-out infinite;
  text-shadow:
    0 0 5px rgba(255, 51, 161, 0.5),
    0 0 15px rgba(var(--current-accent-rgb), 0.4),
    0 0 25px rgba(0, 191, 255, 0.3);
}

.auth-panel-header .logo {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.info-slogan {
  margin: 0;
}

.auth-forms-container h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

/* --- Info Panel --- */
.auth-panel-footer h3 {
  font-size: 1.2rem;
}
.info-metric {
  margin: 1rem 0;
}
.info-metric span {
  display: block;
}
.info-metric span:first-child {
  font-size: 0.9rem;
  color: var(--secondary-text-color);
}
#visitor-count {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--accent-blue);
  text-shadow: 0 0 10px var(--accent-blue);
}

.info-graphs {
  margin-top: 0;
}
.info-graphs > p {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.circular-graphs-container {
  display: flex;
  justify-content: space-around;
  margin-top: 1.5rem;
}
.circular-graph {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.graph-inner {
  position: relative;
  width: 80px;
  height: 80px;
  transition: transform 0.3s ease;
}

.circular-graph:hover .graph-inner {
  transform: scale(1.1);
}

.circular-chart {
  display: block;
  transform-origin: center;
  transition: transform 0.3s ease;
}
.circle-bg {
  fill: none;
  stroke: var(--border-color);
  stroke-width: 0.5; /* Thinner background */
  opacity: 0.5;
}
.circle {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
  filter: drop-shadow(0 0 5px var(--accent-pink));
  stroke: url(#graph-gradient);
}

.graph-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: #fff;
  text-shadow: 0 0 8px var(--accent-blue);
}

.graph-label {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  color: var(--secondary-text-color);
  max-width: 100px;
}

.info-footer {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: var(--secondary-text-color);
  border-top: 1px solid var(--border-color);
  padding-top: 1rem;
  margin-bottom: 0;
}

/* Holographic Graph Animations */
.orbiting-ring {
  fill: none;
  stroke-width: 0.75;
  transform-origin: 50% 50%;
}
.ring-1 {
  stroke: var(--accent-blue);
  stroke-dasharray: 5 10;
  animation: rotate-clockwise 10s linear infinite;
}
.ring-2 {
  stroke: var(--current-accent);
  stroke-dasharray: 1 5;
  animation: rotate-counter-clockwise 15s linear infinite;
}
.ring-3 {
  stroke: var(--accent-pink);
  opacity: 0.7;
  stroke-dasharray: 20 5;
  animation: rotate-clockwise 20s linear infinite;
}

@keyframes rotate-counter-clockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.graph-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(var(--current-accent-rgb), 0.2), transparent 70%);
  filter: blur(15px);
  animation: pulse-glow-soft 5s ease-in-out infinite;
  transition: opacity 0.3s ease;
}

@keyframes pulse-glow-soft {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

.circular-graph:hover .graph-glow {
  opacity: 1;
}

/* --- Generator View --- */
.generator-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

.file-upload-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

input[type='file'] {
  display: none;
}

.file-upload-label {
  padding: 10px 20px;
  background: linear-gradient(
    45deg,
    var(--current-accent),
    var(--accent-pink)
  );
  color: #000;
  font-family: var(--font-heading);
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
  transition: all 0.3s ease;
}
.file-upload-label:hover {
  box-shadow: 0 0 15px var(--accent-pink);
}
#file-name, #image-file-name {
  color: var(--secondary-text-color);
}

#img, #image-img {
  max-width: 200px;
  margin-top: 1rem;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

#status-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  min-height: 30px;
}

#status {
  margin: 0;
}

.spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 4px solid var(--accent-blue);
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin-left: 10px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#output-container video, #output-container img {
  width: 100%;
  margin-top: 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.mode-switch {
  display: flex;
  gap: 10px;
  margin-bottom: 1rem;
}
.mode-switch button {
  flex-grow: 1;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--primary-text-color);
  background-image: none;
}
.mode-switch button.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #000;
  box-shadow: 0 0 10px var(--accent-blue);
}

.generator-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(var(--current-accent-rgb), 0.2);
}

.generator-option label {
    color: var(--secondary-text-color);
}

.generator-option select {
    width: 50%;
}

input[type="checkbox"] {
    appearance: none;
    background-color: rgba(0,0,0,0.3);
    margin: 0;
    font: inherit;
    color: var(--border-color);
    width: 1.15em;
    height: 1.15em;
    border: 1px solid var(--border-color);
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
}

input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--accent-blue);
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
}

input[type="checkbox"]:focus {
    outline: 2px solid var(--accent-pink);
}

.style-options-container {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--current-accent-rgb), 0.2);
}
.style-options-container > label {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--secondary-text-color);
    font-size: 1rem;
}

.style-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.style-pill {
    padding: 6px 12px;
    background-color: rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-size: 0.9rem;
    width: auto;
    font-family: var(--font-body);
}
.style-pill:hover {
    background-color: rgba(var(--current-accent-rgb), 0.3);
    border-color: var(--current-accent);
}
.style-pill.active {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #000;
    font-weight: bold;
    box-shadow: 0 0 8px var(--accent-blue);
}


/* --- Gallery View --- */
.gallery-container {
  padding: 2rem;
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
#media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}
.gallery-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

@keyframes fadeOutAndScale {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}
.gallery-item.deleting {
    animation: fadeOutAndScale 0.4s ease-out forwards;
}

.gallery-item:hover {
  border-color: var(--border-color);
  box-shadow: 0 0 15px var(--accent-pink);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.gallery-item video,
.gallery-item img {
  width: 100%;
  display: block;
  margin: 0;
  border: none;
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

.delete-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
}
.gallery-item:hover .delete-button {
  opacity: 1;
}
.delete-button:hover {
    transform: scale(1.1);
    background-color: var(--accent-pink);
    border-color: var(--accent-pink);
}

/* Gallery Item Loader and Error Styles */
.gallery-item-loader {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.3);
    min-height: 200px; /* Ensure it has some height */
}
.gallery-item-loader::after {
    content: '';
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 4px solid var(--accent-blue);
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}
.decryption-error {
    color: #ff4d4d;
    padding: 1rem;
    text-align: center;
    width: 100%;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* Gallery Filtering */
.filter-bar {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.filter-button {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--primary-text-color);
    font-family: var(--font-body);
    font-size: 0.9rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: auto;
    background-image: none; /* Override general button style */
}
.filter-button:hover {
    background-color: rgba(var(--current-accent-rgb), 0.3);
    border-color: var(--current-accent);
}
.filter-button.active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #000;
    box-shadow: 0 0 10px var(--accent-blue);
}


/* Gallery Item Info Overlay */
.gallery-item-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(18, 18, 22, 0.9), transparent);
    padding: 2rem 1rem 1rem 1rem;
    color: #fff;
    transform: translateY(100%);
    transition: transform 0.4s ease-out;
    z-index: 2;
}

.gallery-item:hover .gallery-item-info {
    transform: translateY(0);
}

.gallery-item-prompt {
    font-size: 0.9rem;
    margin: 0 0 0.5rem 0;
    color: var(--primary-text-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-item-date {
    font-size: 0.75rem;
    color: var(--secondary-text-color);
    opacity: 0.8;
}

/* --- App Logo --- */
#app-logo {
  position: absolute;
  bottom: 30px;
  right: 100px; /* Positioned next to the corner HUD element */
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 15px;
  color: #fff;
  opacity: 0.7;
  pointer-events: none; /* Make it non-interactive, part of the background */
  transition: opacity 0.3s ease;
}

body:hover #app-logo {
  opacity: 0.9;
}

#app-logo .logo-ship {
  width: 60px;
  height: 60px;
  fill: currentColor;
  transform: rotate(-45deg);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

#app-logo .logo-text {
  text-align: right;
}

#app-logo .logo-text-main {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  display: block;
  white-space: nowrap; /* Prevent wrapping */
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
}

#app-logo .logo-text-sub {
  font-family: var(--font-body);
  font-size: 0.75rem;
  display: block;
  white-space: nowrap; /* Prevent wrapping */
  letter-spacing: 1px;
}

/* Custom Language Switcher */
.custom-language-switcher-container {
    position: relative;
    z-index: 100;
}

#language-switcher-auth {
    position: fixed;
    top: 30px;
    right: 30px;
}

.custom-select-button {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--primary-text-color);
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease;
    width: auto;
    background-image: none;
}
.custom-select-button:hover {
    background-color: rgba(var(--current-accent-rgb), 0.2);
}

.arrow-down {
    border: solid var(--primary-text-color);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.custom-select-panel {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 5px;
    list-style: none;
    margin: 0;
    min-width: 150px;
    backdrop-filter: blur(10px);
}

.custom-select-panel a {
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--primary-text-color);
    text-align: left;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-select-panel a:hover {
    background-color: rgba(var(--current-accent-rgb), 0.3);
}

.custom-select-panel a.selected {
    background: var(--accent-blue);
    color: #000;
    font-weight: bold;
}


/* --- Copyright Footer --- */
.app-footer {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--secondary-text-color);
  font-size: 0.75rem;
  opacity: 0.5;
  z-index: 5;
  pointer-events: none;
}

/* --- Responsive Design --- */
@media (max-width: 960px) {
  #app-logo {
    display: none;
  }
  #hud-panel {
    max-width: 100%;
  }
  .panel-section {
    flex-basis: 33%;
  }
}

@media (max-width: 768px) {
  body {
    padding: 10px;
    align-items: flex-start;
  }

  #navbar {
    flex-direction: column;
    gap: 1rem;
  }
  
  .auth-panel {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  
  .generator-container, .gallery-container {
    padding: 1rem;
  }

  .hologram-projection {
    flex-direction: column;
    height: auto;
    transform: none;
    padding: 10px;
    gap: 1rem;
    align-items: stretch;
  }
  #hud-panel {
    position: relative;
    transform: none;
    left: auto;
    bottom: auto;
    height: auto;
    perspective: none;
    margin-top: 2rem;
  }
  .hud-panel-base { display: none; }
  .panel-section { width: 100%; }
  .panel-center { order: -1; } /* Scanner on top */
  .log-display { height: 48px; }
  .core-status { position: static; margin-top: 1rem; }

  .circular-graphs-container {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }

  .filter-bar {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .hud-element { display: none; }
  #media-grid {
    grid-template-columns: 1fr;
  }
  .generator-option {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .generator-option select {
    width: 100%;
  }
}

/* --- Language support via CSS --- */
[data-key]::before {
  content: attr(data-key); /* Fallback */
}

/* CS */
:lang(cs) [data-key="navGenerator"]::before { content: 'Generátor'; }
:lang(cs) [data-key="navGallery"]::before { content: 'Galerie'; }
:lang(cs) [data-key="logout"]::before { content: 'Odhlásit se'; }
:lang(cs) [data-key="loginTitle"]::before { content: 'Přihlášení'; }
:lang(cs) [data-key="loginButton"]::before { content: 'Přihlásit se'; }
:lang(cs) [data-key="loginSwitchPrompt"]::before { content: 'Nemáte účet? '; }
:lang(cs) [data-key="loginSwitchLink"]::before { content: 'Vytvořit účet'; }
:lang(cs) [data-key="registerTitle"]::before { content: 'Registrace'; }
:lang(cs) [data-key="registerButton"]::before { content: 'Zaregistrovat se'; }
:lang(cs) [data-key="registerSwitchPrompt"]::before { content: 'Máte již účet? '; }
:lang(cs) [data-key="registerSwitchLink"]::before { content: 'Přihlásit se'; }
:lang(cs) [data-key="generatorTitle"]::before { content: 'Generátor Videa'; }
:lang(cs) [data-key="generatorTitleImage"]::before { content: 'Generátor Obrázků'; }
:lang(cs) [data-key="generatorDescription"]::before { content: 'Popište video, které chcete vytvořit.'; }
:lang(cs) [data-key="generatorDescriptionImage"]::before { content: 'Popište obrázek, který chcete vytvořit.'; }
:lang(cs) [data-key="generatorImagePrompt"]::before { content: 'Volitelně nahrajte obrázek jako výchozí bod.'; }
:lang(cs) [data-key="generatorFileButton"]::before { content: 'Vybrat soubor'; }
:lang(cs) [data-key="generatorGenerateButton"]::before { content: 'Generovat Video'; }
:lang(cs) [data-key="generatorGenerateButtonImage"]::before { content: 'Generovat Obrázek'; }
:lang(cs) [data-key="quotaErrorLine1"]::before { content: 'Veo je k dispozici s omezeným počtem generování zdarma za den pro testování.'; }
:lang(cs) [data-key="quotaErrorLine2"]::before { content: 'Překročili jste svou aktuální kvótu. Pro pokračování použijte prosím svůj placený API klíč.'; }
:lang(cs) [data-key="quotaErrorButton"]::before { content: 'Klikněte zde pro přidání API klíče.'; }
:lang(cs) [data-key="statusReady"]::before { content: 'Připraveno.'; }
:lang(cs) [data-key="galleryTitle"]::before { content: 'Moje Galerie'; }
:lang(cs) [data-key="galleryEmpty"]::before { content: 'Zatím zde nejsou žádná média. Vygenerujte své první video nebo obrázek!'; }
:lang(cs) [data-key="infoPanelTitle"]::before { content: 'Stav Systému'; }
:lang(cs) [data-key="visitorCountLabel"]::before { content: 'Připojených operátorů'; }
:lang(cs) [data-key="systemAnalysisLabel"]::before { content: 'Analýza systému v reálném čase'; }
:lang(cs) [data-key="infoFooter"]::before { content: 'Vítejte ve studiu Sirius. Pro přístup k generátoru videa je vyžadována autorizace.'; }
:lang(cs) [data-key="modeVideo"]::before { content: 'Video'; }
:lang(cs) [data-key="modeImage"]::before { content: 'Obrázek'; }
:lang(cs) [data-key="generatorAspectRatioLabel"]::before { content: 'Poměr stran'; }
:lang(cs) [data-key="generatorImageCountLabel"]::before { content: 'Počet obrázků'; }
:lang(cs) [data-key="powerCoreLabel"]::before { content: 'Energetické Jádro'; }
:lang(cs) [data-key="infoSlogan"]::before { content: 'Sirius Studio Vaše cesta směrem k budoucnosti'; }
:lang(cs) [data-key="logoSubtitle"]::before { content: 'cestování mezi galaxiemi'; }
:lang(cs) [data-key="generatorImageReferencePrompt"]::before { content: 'Volitelně nahrajte referenční obrázek pro vytvoření podobného.'; }
:lang(cs) [data-key="generatorEffectsLabel"]::before { content: 'Foto efekty'; }
:lang(cs) [data-key="generatorMotifsLabel"]::before { content: 'Motivy'; }
:lang(cs) [data-key="galleryFilterAll"]::before { content: 'Vše'; }
:lang(cs) [data-key="galleryFilterVideos"]::before { content: 'Videa'; }
:lang(cs) [data-key="galleryFilterImages"]::before { content: 'Obrázky'; }
:lang(cs) [data-key="graphLabelImages"]::before { content: 'Generované Obrázky'; }
:lang(cs) [data-key="graphLabelVideos"]::before { content: 'Generovaná Videa'; }
:lang(cs) [data-key="graphLabelTotal"]::before { content: 'Celkem Médií'; }
:lang(cs) [data-key="shipStatusLabel"]::before { content: 'Stav Lodi'; }
:lang(cs) [data-key="shieldsLabel"]::before { content: 'Štíty'; }
:lang(cs) [data-key="hullLabel"]::before { content: 'Trup'; }
:lang(cs) [data-key="weaponsLabel"]::before { content: 'Zbraně'; }

/* EN */
:lang(en) [data-key="navGenerator"]::before { content: 'Generator'; }
:lang(en) [data-key="navGallery"]::before { content: 'Gallery'; }
:lang(en) [data-key="logout"]::before { content: 'Log Out'; }
:lang(en) [data-key="loginTitle"]::before { content: 'Login'; }
:lang(en) [data-key="loginButton"]::before { content: 'Log In'; }
:lang(en) [data-key="loginSwitchPrompt"]::before { content: "Don't have an account? "; }
:lang(en) [data-key="loginSwitchLink"]::before { content: 'Create account'; }
:lang(en) [data-key="registerTitle"]::before { content: 'Register'; }
:lang(en) [data-key="registerButton"]::before { content: 'Register'; }
:lang(en) [data-key="registerSwitchPrompt"]::before { content: 'Already have an account? '; }
:lang(en) [data-key="registerSwitchLink"]::before { content: 'Log In'; }
:lang(en) [data-key="generatorTitle"]::before { content: 'Video Generator'; }
:lang(en) [data-key="generatorTitleImage"]::before { content: 'Image Generator'; }
:lang(en) [data-key="generatorDescription"]::before { content: 'Describe the video you want to create.'; }
:lang(en) [data-key="generatorDescriptionImage"]::before { content: 'Describe the image you want to create.'; }
:lang(en) [data-key="generatorImagePrompt"]::before { content: 'Optionally, upload an image as a starting point.'; }
:lang(en) [data-key="generatorFileButton"]::before { content: 'Select File'; }
:lang(en) [data-key="generatorGenerateButton"]::before { content: 'Generate Video'; }
:lang(en) [data-key="generatorGenerateButtonImage"]::before { content: 'Generate Image'; }
:lang(en) [data-key="quotaErrorLine1"]::before { content: 'Veo is available with a limited number of free generations per day for testing.'; }
:lang(en) [data-key="quotaErrorLine2"]::before { content: 'You have exceeded your current quota. Please use your paid API key to continue.'; }
:lang(en) [data-key="quotaErrorButton"]::before { content: 'Click here to add API key.'; }
:lang(en) [data-key="statusReady"]::before { content: 'Ready.'; }
:lang(en) [data-key="galleryTitle"]::before { content: 'My Gallery'; }
:lang(en) [data-key="galleryEmpty"]::before { content: 'No media here yet. Go generate your first video or image!'; }
:lang(en) [data-key="infoPanelTitle"]::before { content: 'System Status'; }
:lang(en) [data-key="visitorCountLabel"]::before { content: 'Connected Operators'; }
:lang(en) [data-key="systemAnalysisLabel"]::before { content: 'Real-time System Analysis'; }
:lang(en) [data-key="infoFooter"]::before { content: 'Welcome to Sirius Studio. Authorization is required to access the video generator.'; }
:lang(en) [data-key="modeVideo"]::before { content: 'Video'; }
:lang(en) [data-key="modeImage"]::before { content: 'Image'; }
:lang(en) [data-key="generatorAspectRatioLabel"]::before { content: 'Aspect Ratio'; }
:lang(en) [data-key="generatorImageCountLabel"]::before { content: 'Number of Images'; }
:lang(en) [data-key="powerCoreLabel"]::before { content: 'Power Core'; }
:lang(en) [data-key="infoSlogan"]::before { content: 'Sirius Studio Your journey towards the future'; }
:lang(en) [data-key="logoSubtitle"]::before { content: 'intergalactic travel'; }
:lang(en) [data-key="generatorImageReferencePrompt"]::before { content: 'Optionally, upload a reference image to create a similar one.'; }
:lang(en) [data-key="generatorEffectsLabel"]::before { content: 'Photo Effects'; }
:lang(en) [data-key="generatorMotifsLabel"]::before { content: 'Motifs'; }
:lang(en) [data-key="galleryFilterAll"]::before { content: 'All'; }
:lang(en) [data-key="galleryFilterVideos"]::before { content: 'Videos'; }
:lang(en) [data-key="galleryFilterImages"]::before { content: 'Images'; }
:lang(en) [data-key="graphLabelImages"]::before { content: 'Generated Images'; }
:lang(en) [data-key="graphLabelVideos"]::before { content: 'Generated Videos'; }
:lang(en) [data-key="graphLabelTotal"]::before { content: 'Total Media'; }
:lang(en) [data-key="shipStatusLabel"]::before { content: 'Ship Status'; }
:lang(en) [data-key="shieldsLabel"]::before { content: 'Shields'; }
:lang(en) [data-key="hullLabel"]::before { content: 'Hull'; }
:lang(en) [data-key="weaponsLabel"]::before { content: 'Weapons'; }

/* DE */
:lang(de) [data-key="navGenerator"]::before { content: 'Generator'; }
:lang(de) [data-key="navGallery"]::before { content: 'Galerie'; }
:lang(de) [data-key="logout"]::before { content: 'Abmelden'; }
:lang(de) [data-key="loginTitle"]::before { content: 'Anmelden'; }
:lang(de) [data-key="loginButton"]::before { content: 'Anmelden'; }
:lang(de) [data-key="loginSwitchPrompt"]::before { content: 'Kein Konto? '; }
:lang(de) [data-key="loginSwitchLink"]::before { content: 'Konto erstellen'; }
:lang(de) [data-key="registerTitle"]::before { content: 'Registrieren'; }
:lang(de) [data-key="registerButton"]::before { content: 'Registrieren'; }
:lang(de) [data-key="registerSwitchPrompt"]::before { content: 'Haben Sie bereits ein Konto? '; }
:lang(de) [data-key="registerSwitchLink"]::before { content: 'Anmelden'; }
:lang(de) [data-key="generatorTitle"]::before { content: 'Video-Generator'; }
:lang(de) [data-key="generatorTitleImage"]::before { content: 'Bild-Generator'; }
:lang(de) [data-key="generatorDescription"]::before { content: 'Beschreiben Sie das Video, das Sie erstellen möchten.'; }
:lang(de) [data-key="generatorDescriptionImage"]::before { content: 'Beschreiben Sie das Bild, das Sie erstellen möchten.'; }
:lang(de) [data-key="generatorImagePrompt"]::before { content: 'Optional ein Bild als Ausgangspunkt hochladen.'; }
:lang(de) [data-key="generatorFileButton"]::before { content: 'Datei auswählen'; }
:lang(de) [data-key="generatorGenerateButton"]::before { content: 'Video generieren'; }
:lang(de) [data-key="generatorGenerateButtonImage"]::before { content: 'Bild generieren'; }
:lang(de) [data-key="quotaErrorLine1"]::before { content: 'Veo steht mit einer begrenzten Anzahl kostenloser Generierungen pro Tag zum Testen zur Verfügung.'; }
:lang(de) [data-key="quotaErrorLine2"]::before { content: 'Sie haben Ihr aktuelles Kontingent überschritten. Bitte verwenden Sie Ihren bezahlten API-Schlüssel, um fortzufahren.'; }
:lang(de) [data-key="quotaErrorButton"]::before { content: 'Klicken Sie hier, um den API-Schlüssel hinzuzufügen.'; }
:lang(de) [data-key="statusReady"]::before { content: 'Bereit.'; }
:lang(de) [data-key="galleryTitle"]::before { content: 'Meine Galerie'; }
:lang(de) [data-key="galleryEmpty"]::before { content: 'Noch keine Medien hier. Erstellen Sie Ihr erstes Video oder Bild!'; }
:lang(de) [data-key="infoPanelTitle"]::before { content: 'Systemstatus'; }
:lang(de) [data-key="visitorCountLabel"]::before { content: 'Verbundene Operatoren'; }
:lang(de) [data-key="systemAnalysisLabel"]::before { content: 'Echtzeit-Systemanalyse'; }
:lang(de) [data-key="infoFooter"]::before { content: 'Willkommen im Sirius Studio. Für den Zugriff auf den Videogenerator ist eine Autorisierung erforderlich.'; }
:lang(de) [data-key="modeVideo"]::before { content: 'Video'; }
:lang(de) [data-key="modeImage"]::before { content: 'Bild'; }
:lang(de) [data-key="generatorAspectRatioLabel"]::before { content: 'Seitenverhältnis'; }
:lang(de) [data-key="generatorImageCountLabel"]::before { content: 'Anzahl der Bilder'; }
:lang(de) [data-key="powerCoreLabel"]::before { content: 'Energiekern'; }
:lang(de) [data-key="infoSlogan"]::before { content: 'Sirius Studio Ihre Reise in die Zukunft'; }
:lang(de) [data-key="logoSubtitle"]::before { content: 'intergalaktische Reisen'; }
:lang(de) [data-key="generatorImageReferencePrompt"]::before { content: 'Optional ein Referenzbild hochladen, um ein ähnliches zu erstellen.'; }
:lang(de) [data-key="generatorEffectsLabel"]::before { content: 'Fotoeffekte'; }
:lang(de) [data-key="generatorMotifsLabel"]::before { content: 'Motive'; }
:lang(de) [data-key="galleryFilterAll"]::before { content: 'Alle'; }
:lang(de) [data-key="galleryFilterVideos"]::before { content: 'Videos'; }
:lang(de) [data-key="galleryFilterImages"]::before { content: 'Bilder'; }
:lang(de) [data-key="graphLabelImages"]::before { content: 'Generierte Bilder'; }
:lang(de) [data-key="graphLabelVideos"]::before { content: 'Generierte Videos'; }
:lang(de) [data-key="graphLabelTotal"]::before { content: 'Gesamtmedien'; }
:lang(de) [data-key="shipStatusLabel"]::before { content: 'Schiffsstatus'; }
:lang(de) [data-key="shieldsLabel"]::before { content: 'Schilde'; }
:lang(de) [data-key="hullLabel"]::before { content: 'Hülle'; }
:lang(de) [data-key="weaponsLabel"]::before { content: 'Waffen'; }

/* FR */
:lang(fr) [data-key="navGenerator"]::before { content: 'Générateur'; }
:lang(fr) [data-key="navGallery"]::before { content: 'Galerie'; }
:lang(fr) [data-key="logout"]::before { content: 'Déconnexion'; }
:lang(fr) [data-key="loginTitle"]::before { content: 'Connexion'; }
:lang(fr) [data-key="loginButton"]::before { content: 'Se connecter'; }
:lang(fr) [data-key="loginSwitchPrompt"]::before { content: 'Pas de compte ? '; }
:lang(fr) [data-key="loginSwitchLink"]::before { content: 'Créer un compte'; }
:lang(fr) [data-key="registerTitle"]::before { content: 'Inscription'; }
:lang(fr) [data-key="registerButton"]::before { content: "S'inscrire"; }
:lang(fr) [data-key="registerSwitchPrompt"]::before { content: 'Déjà un compte ? '; }
:lang(fr) [data-key="registerSwitchLink"]::before { content: 'Se connecter'; }
:lang(fr) [data-key="generatorTitle"]::before { content: 'Générateur de Vidéo'; }
:lang(fr) [data-key="generatorTitleImage"]::before { content: "Générateur d'images"; }
:lang(fr) [data-key="generatorDescription"]::before { content: 'Décrivez la vidéo que vous souhaitez créer.'; }
:lang(fr) [data-key="generatorDescriptionImage"]::before { content: "Décrivez l'image que vous souhaitez créer."; }
:lang(fr) [data-key="generatorImagePrompt"]::before { content: 'Optionnellement, téléchargez une image comme point de départ.'; }
:lang(fr) [data-key="generatorFileButton"]::before { content: 'Choisir un fichier'; }
:lang(fr) [data-key="generatorGenerateButton"]::before { content: 'Générer la vidéo'; }
:lang(fr) [data-key="generatorGenerateButtonImage"]::before { content: "Générer l'image"; }
:lang(fr) [data-key="quotaErrorLine1"]::before { content: 'Veo est disponible avec un nombre limité de générations gratuites par jour pour les tests.'; }
:lang(fr) [data-key="quotaErrorLine2"]::before { content: 'Vous avez dépassé votre quota actuel. Veuillez utiliser votre clé API payante pour continuer.'; }
:lang(fr) [data-key="quotaErrorButton"]::before { content: 'Cliquez ici pour ajouter une clé API.'; }
:lang(fr) [data-key="statusReady"]::before { content: 'Prêt.'; }
:lang(fr) [data-key="galleryTitle"]::before { content: 'Ma Galerie'; }
:lang(fr) [data-key="galleryEmpty"]::before { content: 'Aucun média pour le moment. Allez créer votre première vidéo ou image !'; }
:lang(fr) [data-key="infoPanelTitle"]::before { content: 'État du Système'; }
:lang(fr) [data-key="visitorCountLabel"]::before { content: 'Opérateurs Connectés'; }
:lang(fr) [data-key="systemAnalysisLabel"]::before { content: 'Analyse du système en temps réel'; }
:lang(fr) [data-key="infoFooter"]::before { content: 'Bienvenue au Sirius Studio. Une autorisation est requise pour accéder au générateur de vidéos.'; }
:lang(fr) [data-key="modeVideo"]::before { content: 'Vidéo'; }
:lang(fr) [data-key="modeImage"]::before { content: 'Image'; }
:lang(fr) [data-key="generatorAspectRatioLabel"]::before { content: "Rapport d'aspect"; }
:lang(fr) [data-key="generatorImageCountLabel"]::before { content: "Nombre d'images"; }
:lang(fr) [data-key="powerCoreLabel"]::before { content: 'Noyau Énergétique'; }
:lang(fr) [data-key="infoSlogan"]::before { content: "Sirius Studio Votre voyage vers l'avenir"; }
:lang(fr) [data-key="logoSubtitle"]::before { content: 'voyage intergalactique'; }
:lang(fr) [data-key="generatorImageReferencePrompt"]::before { content: 'Optionnellement, téléchargez une image de référence pour en créer une similaire.'; }
:lang(fr) [data-key="generatorEffectsLabel"]::before { content: 'Effets photo'; }
:lang(fr) [data-key="generatorMotifsLabel"]::before { content: 'Motifs'; }
:lang(fr) [data-key="galleryFilterAll"]::before { content: 'Tous'; }
:lang(fr) [data-key="galleryFilterVideos"]::before { content: 'Vidéos'; }
:lang(fr) [data-key="galleryFilterImages"]::before { content: 'Images'; }
:lang(fr) [data-key="graphLabelImages"]::before { content: 'Images Générées'; }
:lang(fr) [data-key="graphLabelVideos"]::before { content: 'Vidéos Générées'; }
:lang(fr) [data-key="graphLabelTotal"]::before { content: 'Médias Totaux'; }
:lang(fr) [data-key="shipStatusLabel"]::before { content: 'État du Vaisseau'; }
:lang(fr) [data-key="shieldsLabel"]::before { content: 'Boucliers'; }
:lang(fr) [data-key="hullLabel"]::before { content: 'Coque'; }
:lang(fr) [data-key="weaponsLabel"]::before { content: 'Armes'; }

/* NL */
:lang(nl) [data-key="navGenerator"]::before { content: 'Generator'; }
:lang(nl) [data-key="navGallery"]::before { content: 'Galerij'; }
:lang(nl) [data-key="logout"]::before { content: 'Uitloggen'; }
:lang(nl) [data-key="loginTitle"]::before { content: 'Inloggen'; }
:lang(nl) [data-key="loginButton"]::before { content: 'Inloggen'; }
:lang(nl) [data-key="loginSwitchPrompt"]::before { content: 'Geen account? '; }
:lang(nl) [data-key="loginSwitchLink"]::before { content: 'Account aanmaken'; }
:lang(nl) [data-key="registerTitle"]::before { content: 'Registreren'; }
:lang(nl) [data-key="registerButton"]::before { content: 'Registreren'; }
:lang(nl) [data-key="registerSwitchPrompt"]::before { content: 'Al een account? '; }
:lang(nl) [data-key="registerSwitchLink"]::before { content: 'Inloggen'; }
:lang(nl) [data-key="generatorTitle"]::before { content: 'Video Generator'; }
:lang(nl) [data-key="generatorTitleImage"]::before { content: 'Afbeelding Generator'; }
:lang(nl) [data-key="generatorDescription"]::before { content: 'Beschrijf de video die u wilt maken.'; }
:lang(nl) [data-key="generatorDescriptionImage"]::before { content: 'Beschrijf de afbeelding die u wilt maken.'; }
:lang(nl) [data-key="generatorImagePrompt"]::before { content: 'Upload optioneel een afbeelding als uitgangspunt.'; }
:lang(nl) [data-key="generatorFileButton"]::before { content: 'Bestand kiezen'; }
:lang(nl) [data-key="generatorGenerateButton"]::before { content: 'Video genereren'; }
:lang(nl) [data-key="generatorGenerateButtonImage"]::before { content: 'Afbeelding genereren'; }
:lang(nl) [data-key="quotaErrorLine1"]::before { content: 'Veo is beschikbaar met een beperkt aantal gratis generaties per dag om te testen.'; }
:lang(nl) [data-key="quotaErrorLine2"]::before { content: 'U heeft uw huidige quotum overschreden. Gebruik uw betaalde API-sleutel om door te gaan.'; }
:lang(nl) [data-key="quotaErrorButton"]::before { content: 'Klik hier om API-sleutel toe te voegen.'; }
:lang(nl) [data-key="statusReady"]::before { content: 'Klaar.'; }
:lang(nl) [data-key="galleryTitle"]::before { content: 'Mijn Galerij'; }
:lang(nl) [data-key="galleryEmpty"]::before { content: 'Nog geen media hier. Genereer je eerste video of afbeelding!'; }
:lang(nl) [data-key="infoPanelTitle"]::before { content: 'Systeemstatus'; }
:lang(nl) [data-key="visitorCountLabel"]::before { content: 'Verbonden Operators'; }
:lang(nl) [data-key="systemAnalysisLabel"]::before { content: 'Real-time Systeemanalyse'; }
:lang(nl) [data-key="infoFooter"]::before { content: 'Welkom bij Sirius Studio. Autorisatie is vereist om toegang te krijgen tot de videogenerator.'; }
:lang(nl) [data-key="modeVideo"]::before { content: 'Video'; }
:lang(nl) [data-key="modeImage"]::before { content: 'Afbeelding'; }
:lang(nl) [data-key="generatorAspectRatioLabel"]::before { content: 'Beeldverhouding'; }
:lang(nl) [data-key="generatorImageCountLabel"]::before { content: 'Aantal afbeeldingen'; }
:lang(nl) [data-key="powerCoreLabel"]::before { content: 'Energie Kern'; }
:lang(nl) [data-key="infoSlogan"]::before { content: 'Sirius Studio Jouw reis naar de toekomst'; }
:lang(nl) [data-key="logoSubtitle"]::before { content: 'intergalactisch reizen'; }
:lang(nl) [data-key="generatorImageReferencePrompt"]::before { content: 'Upload optioneel een referentieafbeelding om een vergelijkbare te maken.'; }
:lang(nl) [data-key="generatorEffectsLabel"]::before { content: 'Foto-effecten'; }
:lang(nl) [data-key="generatorMotifsLabel"]::before { content: 'Motieven'; }
:lang(nl) [data-key="galleryFilterAll"]::before { content: 'Alles'; }
:lang(nl) [data-key="galleryFilterVideos"]::before { content: 'Videos'; }
:lang(nl) [data-key="galleryFilterImages"]::before { content: 'Afbeeldingen'; }
:lang(nl) [data-key="graphLabelImages"]::before { content: 'Gegenereerde Afbeeldingen'; }
:lang(nl) [data-key="graphLabelVideos"]::before { content: "Gegenereerde Video's"; }
:lang(nl) [data-key="graphLabelTotal"]::before { content: 'Totaal Media'; }
:lang(nl) [data-key="shipStatusLabel"]::before { content: 'Scheepsstatus'; }
:lang(nl) [data-key="shieldsLabel"]::before { content: 'Schilden'; }
:lang(nl) [data-key="hullLabel"]::before { content: 'Romp'; }
:lang(nl) [data-key="weaponsLabel"]::before { content: 'Wapens'; }

/* ES */
:lang(es) [data-key="navGenerator"]::before { content: 'Generador'; }
:lang(es) [data-key="navGallery"]::before { content: 'Galería'; }
:lang(es) [data-key="logout"]::before { content: 'Cerrar sesión'; }
:lang(es) [data-key="loginTitle"]::before { content: 'Iniciar sesión'; }
:lang(es) [data-key="loginButton"]::before { content: 'Iniciar sesión'; }
:lang(es) [data-key="loginSwitchPrompt"]::before { content: '¿No tienes una cuenta? '; }
:lang(es) [data-key="loginSwitchLink"]::before { content: 'Crear cuenta'; }
:lang(es) [data-key="registerTitle"]::before { content: 'Registrarse'; }
:lang(es) [data-key="registerButton"]::before { content: 'Registrarse'; }
:lang(es) [data-key="registerSwitchPrompt"]::before { content: '¿Ya tienes una cuenta? '; }
:lang(es) [data-key="registerSwitchLink"]::before { content: 'Iniciar sesión'; }
:lang(es) [data-key="generatorTitle"]::before { content: 'Generador de Video'; }
:lang(es) [data-key="generatorTitleImage"]::before { content: 'Generador de Imágenes'; }
:lang(es) [data-key="generatorDescription"]::before { content: 'Describe el video que quieres crear.'; }
:lang(es) [data-key="generatorDescriptionImage"]::before { content: 'Describe la imagen que quieres crear.'; }
:lang(es) [data-key="generatorImagePrompt"]::before { content: 'Opcionalmente, sube una imagen como punto de partida.'; }
:lang(es) [data-key="generatorFileButton"]::before { content: 'Seleccionar archivo'; }
:lang(es) [data-key="generatorGenerateButton"]::before { content: 'Generar Video'; }
:lang(es) [data-key="generatorGenerateButtonImage"]::before { content: 'Generar Imagen'; }
:lang(es) [data-key="quotaErrorLine1"]::before { content: 'Veo está disponible con un número limitado de generaciones gratuitas por día para pruebas.'; }
:lang(es) [data-key="quotaErrorLine2"]::before { content: 'Ha excedido su cuota actual. Utilice su clave de API de pago para continuar.'; }
:lang(es) [data-key="quotaErrorButton"]::before { content: 'Haga clic aquí para agregar la clave de API.'; }
:lang(es) [data-key="statusReady"]::before { content: 'Listo.'; }
:lang(es) [data-key="galleryTitle"]::before { content: 'Mi Galería'; }
:lang(es) [data-key="galleryEmpty"]::before { content: 'Aún no hay medios aquí. ¡Ve a generar tu primer video o imagen!'; }
:lang(es) [data-key="infoPanelTitle"]::before { content: 'Estado del Sistema'; }
:lang(es) [data-key="visitorCountLabel"]::before { content: 'Operadores Conectados'; }
:lang(es) [data-key="systemAnalysisLabel"]::before { content: 'Análisis del sistema en tiempo real'; }
:lang(es) [data-key="infoFooter"]::before { content: 'Bienvenido a Sirius Studio. Se requiere autorización para acceder al generador de video.'; }
:lang(es) [data-key="modeVideo"]::before { content: 'Video'; }
:lang(es) [data-key="modeImage"]::before { content: 'Imagen'; }
:lang(es) [data-key="generatorAspectRatioLabel"]::before { content: 'Relación de aspecto'; }
:lang(es) [data-key="generatorImageCountLabel"]::before { content: 'Número de imágenes'; }
:lang(es) [data-key="powerCoreLabel"]::before { content: 'Núcleo de Energía'; }
:lang(es) [data-key="infoSlogan"]::before { content: 'Sirius Studio Tu viaje hacia el futuro'; }
:lang(es) [data-key="logoSubtitle"]::before { content: 'viaje intergaláctico'; }
:lang(es) [data-key="generatorImageReferencePrompt"]::before { content: 'Opcionalmente, sube una imagen de referencia para crear una similar.'; }
:lang(es) [data-key="generatorEffectsLabel"]::before { content: 'Efectos de foto'; }
:lang(es) [data-key="generatorMotifsLabel"]::before { content: 'Motivos'; }
:lang(es) [data-key="galleryFilterAll"]::before { content: 'Todos'; }
:lang(es) [data-key="galleryFilterVideos"]::before { content: 'Videos'; }
:lang(es) [data-key="galleryFilterImages"]::before { content: 'Imágenes'; }
:lang(es) [data-key="graphLabelImages"]::before { content: 'Imágenes Generadas'; }
:lang(es) [data-key="graphLabelVideos"]::before { content: 'Videos Generados'; }
:lang(es) [data-key="graphLabelTotal"]::before { content: 'Medios Totales'; }
:lang(es) [data-key="shipStatusLabel"]::before { content: 'Estado de la Nave'; }
:lang(es) [data-key="shieldsLabel"]::before { content: 'Escudos'; }
:lang(es) [data-key="hullLabel"]::before { content: 'Casco'; }
:lang(es) [data-key="weaponsLabel"]::before { content: 'Armas'; }