:root {
  --primary-bg-start: #070B10;
  --primary-bg-end: #0C1118;
  --text-main: #ffffff;
  --text-secondary: #c7c7c7;
  /* For history text */
  --accent-white-transparent: rgba(255, 255, 255, 0.1);
  --error-red: #ff4444;
  /* For error badges/buttons */
  --error-red-rgb: 255, 75, 75;
  --success-green: #00c851;
  /* For success badges/buttons */
  --success-green-rgb: 76, 217, 100;
  --glass-bg: rgba(255, 255, 255, .06);
  --accent-cyan: #00b2ff;
  --accent-pink: #ff3bff;
  --radius-lg: 20px;
  /* As per T3 */
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .4);
  /* As per T3 */
}

/* New Navbar Styling */
.navbar {
  background: #061228;
  /* Deep dark blue */
  height: 64px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 0 24px;
  /* For logo and nav links spacing */
  display: flex;
  /* Added for nav-inner alignment */
  align-items: center;
  /* Added for nav-inner alignment */
}

.nav-inner {
  /* Added container for flex layout */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.navbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, #007cff 0%, #6e0bcf 100%);
  filter: blur(2px);
  /* Light glow */
}

.logo img {
  height: 48px;
  vertical-align: middle;
  /* Ensure proper alignment */
}

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
  list-style: none;
  /* Remove default list styling if nav-links is ul */
  margin: 0;
  /* Remove default margin if nav-links is ul */
  padding: 0;
  /* Remove default padding if nav-links is ul */
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  position: relative;
  padding: 8px 0;
  /* Add some padding for easier clicking and hover underline placement */
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  /* Adjusted from -8px to be closer to text, assuming padding on link */
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #00BFFF 0%, #6e0bcf 100%);
  /* Neon underline */
  transition: width .2s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  /* Added .active for underline */
  width: 100%;
}

/* Style for the active page link's persistent underline */
.nav-links a.active {
  /* This is for the 2px gradient line for active page */
  /* The ::after rule above already creates the line on hover,
       this class ensures it's visible if the link is active.
       JS will need to add this 'active' class to the current page's link.
       If the underline is different from hover, specific rules are needed.
       The task says "under the link a 2-pixel gradient line",
       which is what hover also does. So .active::after might be enough.
       Let's assume for now JS adds 'active' class and the existing ::after handles it.
       If a *different* or *additional* line is needed for active state (not just hover style),
       this needs clarification. For now, this makes .active look like hover. */
}


.hamburger {
  display: none;
  /* Hidden on desktop */
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  /* Easier to click */
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px 0;
  background: #fff;
  transition: .3s;
}

/* Mobile specific styles */
@media (max-width: 991px) {
  .navbar {
    padding: 0 16px;
    /* Adjust padding for mobile */
  }

  .nav-links {
    display: none;
    /* Hidden on mobile, shown in off-canvas */
  }

  .hamburger {
    display: block;
    /* Visible on mobile */
  }

  .mobile-menu {
    position: fixed;
    top: 0;
    right: -320px;
    /* Start off-screen, ensure width is applied for animation */
    width: 280px;
    height: 100%;
    background: rgba(10, 20, 40, 0.75);
    /* Adjusted background for a cleaner glass effect */
    backdrop-filter: blur(15px);
    /* Ensured backdrop-filter is present */
    border-radius: 16px;
    /* Added rounded corners */
    border: none;
    /* Explicitly no border, removed box-shadow and border-left */
    transition: right .3s ease-in-out;
    z-index: 1000;
    /* Above navbar, below backdrop if backdrop is separate */
    overflow-y: auto;
    /* Allow scrolling if content overflows */
  }

  .mobile-menu.open {
    right: 0;
    /* Slide in */
  }

  .mobile-menu nav {
    /* Styling for the nav element inside mobile-menu */
    display: flex;
    flex-direction: column;
    padding: 80px 24px 24px;
    /* Top padding for close button, rest for links */
    gap: 24px;
  }

  .mobile-menu nav a {
    color: #fff;
    font-size: 1.25rem;
    text-decoration: none;
    display: block;
    /* Ensure links take full width for easier tapping */
    padding: 8px 0;
  }

  /* Optional: Add a close button to mobile menu if not handled by JS/backdrop */
  /* .mobile-menu .close-btn { ... } */

  .backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .3);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease-in-out;
    z-index: 998;
    /* Below mobile menu, above main content */
  }

  .backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }
}

body {
  font-family: -apple-system, Inter, Roboto, sans-serif;
  color: var(--text-main);
  background: linear-gradient(to bottom, var(--primary-bg-start), var(--primary-bg-end));
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  /* As per T3 requirement */
}

@keyframes swirl {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    /* Subtle rotation and scale up */
    transform: rotate(5deg) scale(1.15);
  }

  100% {
    transform: rotate(0deg) scale(1);
  }
}


.glass-nav .nav-links .btn {
  min-width: 90px;
  padding: 0.5rem 1rem;
  text-align: center;
  display: inline-block;
  line-height: initial;
  height: auto;
  margin-top: calc((64px - (0.5rem * 2 + 22px + 4px)) / 2);
}

New btn-accent style .btn-accent {
  background: linear-gradient(to right, #007CFF, #6E33FF);
  color: #fff !important;
  /* Ensure text is white, !important if overridden by general .btn styles */
  border-radius: 56px;
  padding: 0.75rem 1.5rem;
  /* Or adjust if needed for visual balance */
  border: none;
  /* Or 2px solid transparent if it needs to align with btn-outline-light structure */
  font-weight: 500;
  /* Or T3 specified if any */
  text-decoration: none;
  /* Ensure no underline */
  display: inline-block;
  /* For proper padding and sizing */
  text-align: center;
  /* Keep existing transitions from previous step (background, transform, box-shadow) */
  transition: background .25s,
    transform .25s,
    box-shadow .25s;
}

.btn-accent:hover {
  /* Slightly adjusted hover gradient if needed, or keep as is from Step 2 */
  background: linear-gradient(to right, #0062cc, #5829cc);
  /* Example darker shade */
  color: #fff !important;
  box-shadow: 0 0 10px rgba(0, 124, 255, 0.5);
  transform: translateY(-1px) scale(1.02);
}

.btn-accent:active {
  transform: scale(0.95) translateY(0px);
  box-shadow: none;
}

/* New/Updated btn-outline-light style */
.btn-outline-light {
  border: 2px solid #fff;
  color: #fff !important;
  /* Ensure text is white */
  background-color: transparent;
  border-radius: 56px;
  padding: 0.75rem 1.5rem;
  /* Or adjust for visual balance, ensure it matches btn-accent if side-by-side */
  font-weight: 500;
  /* Or T3 specified if any */
  text-decoration: none;
  /* Ensure no underline */
  display: inline-block;
  /* For proper padding and sizing */
  text-align: center;
  /* Keep existing transitions from previous step (background-color, color, transform) */
  transition: background-color .25s, color .25s, transform .25s;
}

.btn-outline-light:hover {
  background-color: #fff;
  color: var(--primary-bg-end, #0C1118) !important;
  /* Dark text on hover */
  transform: translateY(-1px) scale(1.02);
}

.btn-outline-light:active {
  transform: scale(0.95) translateY(0px);
  /* Optional: slightly darken background on active if needed */
  /* background-color: rgba(255, 255, 255, 0.9); */
}

Styling for active navigation link .glass-nav .nav-links a.active,
.glass-nav .nav-links li.active>a {
  color: var(--accent-cyan);
  font-weight: 700;
}

.glass-nav .nav-links .nav-link-logout {
  color: var(--text-secondary);
  background-color: transparent;
  border: none;
  padding: 0.5rem;
  min-width: 90px;
  text-align: center;
  display: inline-block;
  line-height: initial;
  height: auto;
  margin-top: calc((64px - (0.5rem * 2 + 18px)) / 2);
}

.glass-nav .nav-links .nav-link-logout:hover {
  color: var(--accent-pink);
  text-decoration: underline;
}

@media (max-width: 991px) {
  .glass-nav .nav-links .btn {
    display: block;
    width: calc(100% - 2rem);
    margin: 0.5rem auto;
    min-width: 0;
    height: 48px;
    line-height: calc(48px - 4px);
  }

  .glass-nav .nav-links .nav-link-logout {
    display: block;
    width: calc(100% - 2rem);
    margin: 0.5rem auto;
    min-width: 0;
    height: 48px;
    line-height: 48px;
    text-align: left;
  }

  .glass-nav .nav-links a.nav-link {
    height: 48px;
    line-height: 48px;
  }
}

*/ body::before {
  content: "";
  position: fixed;
  /* As per T3.Refined.1 */
  inset: 0;
  /* As per T3.Refined.1 */
  pointer-events: none;
  /* As per T3.Refined.1 */
  z-index: -1;
  /* As per T3.Refined.1 */
  background: radial-gradient(ellipse 80% 70% at 10% 10%, rgba(0, 124, 255, 1) 0%, transparent 60%);
  /* #007CFF, now top-left */
  filter: blur(120px);
  opacity: 0.35;
  animation: swirl 22s linear infinite alternate;
  /* Slightly different timing/direction */
  transform-origin: top left;
  /* Animation origin changed to top left */
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  /* Same level as ::before, but distinct for separate transforms */
  background: radial-gradient(ellipse 80% 70% at 90% 90%, rgba(255, 45, 173, 1) 0%, transparent 60%);
  /* #FF2DAD */
  filter: blur(120px);
  opacity: 0.35;
  animation: swirl 20s linear infinite alternate-reverse;
  /* Different timing/direction */
  transform-origin: bottom right;
  /* Animation origin */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-main);
}

p {
  color: var(--text-secondary);
}

a {
  color: var(--accent-cyan);
  text-decoration: none;
}

.rounded-2xl {
  border-radius: 16px;
}

.soft-shadow {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.glassmorphism {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Navbar Styles */
/*
.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #001026;
  padding: 1rem 2rem;
  position: relative;
  z-index: 2000;
}

.nav-logo a {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--text-main);
}

.main-nav .nav-links {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.main-nav .nav-links li {
  margin-left: 1.5rem;
}

.main-nav .nav-links a {
  color: var(--text-main);
  font-weight: 500;
  transition: color 0.3s ease;
}

.main-nav .nav-links a:hover {
  color: var(--accent-cyan);
}
*/
/* Hero Section Styles */
.hero-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 90vh;
  padding: 6rem 2rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.hero-content h1 {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.hero-content p {
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 2rem;
  max-width: 600px;
  color: var(--text-secondary);
}

.hero-buttons .btn {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0.5rem;
}

.btn-primary {
  background-color: var(--accent-cyan);
  color: var(--text-main);
  transition: background-color 0.25s, color 0.25s, transform 0.25s, border-color 0.25s;
}

.btn-primary:hover {
  background-color: #1a8cd8;
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: scale(0.96) translateY(-1px);
  /* Adjust translateY due to existing hover transform */
}

.btn-secondary {
  background-color: var(--accent-white-transparent);
  color: var(--text-main);
  border: 1px solid var(--accent-cyan);
  transition: background-color 0.25s, color 0.25s, transform 0.25s, border-color 0.25s;
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.btn-secondary:active {
  transform: scale(0.96) translateY(-1px);
  /* Adjust translateY due to existing hover transform */
}


/* Animated Waves (Basic Example) */
.animated-waves {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  z-index: -1;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-size: 1000px 100px;
  opacity: 0.1;
}

.wave.wave1 {
  animation: animateWave 15s linear infinite;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100'%3e%3cpath d='M0 50 Q 250 0 500 50 T 1000 50 L 1000 100 L 0 100 Z' fill='%2300b2ff'%3e%3c/path%3e%3c/svg%3e");
  animation-delay: 0s;
  bottom: 0;
}

.wave.wave2 {
  animation: animateWave 20s linear infinite reverse;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100'%3e%3cpath d='M0 60 Q 200 20 500 60 T 1000 40 L 1000 100 L 0 100 Z' fill='rgba(255,255,255,0.2)'%3e%3c/path%3e%3c/svg%3e");
  animation-delay: -5s;
  bottom: 10px;
  opacity: 0.05;
}

.wave.wave3 {
  animation: animateWave 25s linear infinite;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100'%3e%3cpath d='M0 40 Q 300 70 500 40 T 1000 55 L 1000 100 L 0 100 Z' fill='%2300b2ff'%3e%3c/path%3e%3c/svg%3e");
  animation-delay: -2s;
  bottom: 20px;
  opacity: 0.08;
}

@keyframes animateWave {
  0% {
    background-position-x: 0;
  }

  100% {
    background-position-x: 1000px;
  }
}

/* Steps Section Styles (Formerly Features) */
.steps-section {
  padding: 4rem 2rem;
  text-align: center;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 3rem;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.step-card {
  padding: 2rem;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInSlideUp 0.6s ease-out forwards;
}

.step-card:nth-child(1) {
  animation-delay: 0.2s;
}

.step-card:nth-child(2) {
  animation-delay: 0.4s;
}

.step-card:nth-child(3) {
  animation-delay: 0.6s;
}

.step-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--accent-cyan);
}

.step-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.75rem;
}

.step-card p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

@keyframes fadeInSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Video Examples Section Styles */
.video-examples-section {
  padding: 4rem 2rem;
  text-align: center;
}





.video-thumbnail {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease-in-out;
}

.video-card:hover .video-thumbnail {
  transform: scale(1.1);
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 64px;
  height: 64px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.play-button svg {
  fill: var(--text-main);
  width: 32px;
  height: 32px;
}

.video-card:hover .play-button {
  background-color: var(--accent-cyan);
  transform: translate(-50%, -50%) scale(1.1);
}

.video-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: var(--text-main);
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}

.video-card:hover .video-card-overlay {
  transform: translateY(0);
}

.video-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

/* Testimonials Section Styles */
.testimonials-section {
  padding: 4rem 2rem;
  text-align: center;
}

.testimonial-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}

.testimonial-card {
  position: relative;
  padding: 2rem;
  overflow: hidden;
}

.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: -0.1em;
  left: 0.1em;
  font-family: serif;
  font-size: 8rem;
  font-weight: bold;
  color: var(--accent-white-transparent);
  opacity: 0.3;
  z-index: 0;
  line-height: 1;
}

.testimonial-avatar,
.testimonial-name,
.testimonial-text {
  position: relative;
  z-index: 1;
}

.testimonial-avatar {
  margin-bottom: 1rem;
  display: flex;
  justify-content: flex-start;
}

.testimonial-avatar img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid var(--accent-cyan);
}

.testimonial-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.testimonial-text {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
  font-style: italic;
}

/* Pricing Section Styles */
.pricing-section {
  padding: 4rem 2rem;
  text-align: center;
}

.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
}

.pricing-card {
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--accent-white-transparent);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.plan-name {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.plan-price {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--accent-cyan);
  margin-bottom: 1.5rem;
}

.plan-price .price-suffix {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-secondary);
}

.plan-features {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
  text-align: left;
  flex-grow: 1;
}

.plan-features li {
  margin-bottom: 0.75rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
}

.plan-features .feature-icon {
  margin-right: 0.5rem;
  stroke: var(--success-green);
  width: 18px;
  height: 18px;
}

.plan-features .feature-icon.cross {
  stroke: var(--error-red);
}

.btn-choose-plan {
  background-color: var(--accent-cyan);
  color: var(--text-main);
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  margin-top: auto;
  width: 100%;
}

.btn-choose-plan:hover {
  background-color: var(--text-main);
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  box-shadow: 0 5px 15px rgba(0, 178, 255, 0.4);
}

.btn-choose-plan:active {
  transform: scale(0.96) translateY(1px);
}

.popular-plan {
  border-color: var(--accent-cyan);
  position: relative;
  transform: scale(1.05);
  padding-top: 3.5rem;
}

.popular-plan:hover {
  transform: translateY(-10px) scale(1.05);
}

.popular-plan::before {
  content: 'POPULAR';
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--accent-cyan);
  color: var(--text-main);
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

/* FAQ Section Styles */
.faq-section {
  padding: 4rem 2rem;
  text-align: center;
}

.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  margin-bottom: 1rem;
}

.faq-question {
  background-color: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-main);
  padding: 1.25rem 1.5rem;
  width: 100%;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s ease;
}

.faq-question:hover,
.faq-question.active {
  background-color: rgba(255, 255, 255, 0.08);
}

.faq-question.active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.faq-icon {
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform 0.3s ease-out;
}

.faq-question.active .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-top: none;
  padding: 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.23, 1, 0.32, 1), padding 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  margin-top: -1px;
}

.faq-answer.open {
  max-height: 600px;
  padding: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-answer p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
  font-size: 1rem;
}

/* General Auth Page Structure */
.auth-page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.auth-main-content {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  padding-top: 100px;
  box-sizing: border-box;
}

.auth-container {
  width: 100%;
  max-width: 450px;
  padding: 2.5rem;
  text-align: center;
}

.auth-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 1.5rem;
}

.auth-form .form-group {
  margin-bottom: 1.5rem;
  text-align: left;
}

.auth-form label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.auth-form .form-control {
  width: 100%;
  padding: 0.85rem 1rem;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-main);
  border-radius: 8px;
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.auth-form .form-control:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(0, 178, 255, 0.3);
}

.auth-form .form-control::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.auth-button {
  width: 100%;
  padding: 0.85rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 500;
  margin-top: 1rem;
  /* .btn-primary is often used for auth buttons, so its transition might be inherited */
  /* Adding specific transition and active state if it's a unique style / not covered by .btn or .btn-primary */
  transition: background-color 0.25s, color 0.25s, transform 0.25s, border-color 0.25s;
}

.auth-button:active {
  transform: scale(0.96) translateY(1px);
}


.auth-switch-link {
  margin-top: 1.5rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.auth-switch-link a {
  color: var(--accent-cyan);
  font-weight: 500;
  text-decoration: none;
}

.auth-switch-link a:hover {
  text-decoration: underline;
}

/* Alert Message Styling */
.alert {
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 500;
}

.alert-danger,
/* General style for alert-danger */
#errorMessage.alert-danger {
  /* ID-specific for auth pages */
  color: var(--text-main);
  background-color: rgba(var(--error-red-rgb), 0.15);
  border-color: var(--error-red);
}

.alert-success,
/* General style for alert-success */
#successMessage.alert-success {
  /* ID-specific for auth pages */
  color: var(--text-main);
  background-color: rgba(var(--success-green-rgb), 0.15);
  border-color: var(--success-green);
}

/* Dashboard Specific Styles */
.page-container {
  background-color: transparent;
  min-height: calc(100vh - 80px);
}

.content-card {
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.section-title-sm {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 1rem;
}

.progress-container {
  width: 100%;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
}

.progress-bar-custom {
  height: 100%;
  width: 0%;
  background-color: var(--accent-cyan);
  border-radius: 6px;
  transition: width 0.4s ease;
}

.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

.list-group-item:last-child {
  border-bottom: none;
}

.list-group-item .badge.bg-success {
  background-color: var(--success-green);
  color: var(--text-main);
}

.list-group-item .badge.bg-danger {
  background-color: var(--error-red);
  color: var(--text-main);
}

.list-group-item .badge.bg-warning {
  background-color: #ffc107;
  color: #000;
}

.list-group-item .badge.bg-info {
  background-color: var(--accent-cyan);
  color: var(--text-main);
}

.list-group-item button {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  margin-left: 0.5rem;
}

/* General .btn styling if not covered by .auth-button or other specific button styles */
.btn {
  display: inline-block;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-main);
  /* Default text color for generic .btn */
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  /* Default background */
  border: 1px solid transparent;
  /* Default border */
  padding: 0.375rem 0.75rem;
  /* Bootstrap default padding, adjust as needed */
  font-size: 1rem;
  border-radius: 0.375rem;
  /* Bootstrap default radius, use .rounded-2xl for larger */
  transition: color .25s ease-in-out, background-color .25s ease-in-out, border-color .25s ease-in-out, box-shadow .25s ease-in-out, transform .25s ease-in-out;
}

/* Active state for general .btn, can be overridden by more specific selectors */
.btn:active {
  transform: scale(0.96) translateY(1px);
}

.btn-success {
  /* Example for download button */
  background-color: var(--success-green);
  border-color: var(--success-green);
  color: var(--text-main);
  /* Ensure text is readable on green */
}

.btn-success:hover {
  background-color: #3aa850;
  /* Darker green */
  border-color: #3aa850;
}

.btn-outline-secondary {
  color: var(--text-secondary);
  border-color: var(--text-secondary);
}

.btn-outline-secondary:hover {
  color: var(--text-main);
  background-color: var(--text-secondary);
  border-color: var(--text-secondary);
}

.btn-outline-primary {
  /* For Repeat button */
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

.btn-outline-primary:hover {
  color: var(--text-main);
  background-color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

.btn-outline-warning {
  /* For Retry button */
  color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:hover {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-danger {
  /* For Delete button */
  color: var(--error-red);
  border-color: var(--error-red);
}

.btn-outline-danger:hover {
  color: var(--text-main);
  background-color: var(--error-red);
  border-color: var(--error-red);
}


#dashboardForm .form-control,
.content-card .form-control {
  width: 100%;
  padding: 0.85rem 1rem;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-main);
  border-radius: 8px;
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#dashboardForm .form-control:focus,
.content-card .form-control:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(0, 178, 255, 0.3);
}

#dashboardForm label,
.content-card label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.content-card select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c7c7c7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  padding-right: 2.5rem;
}

.content-card select.form-control option {
  background-color: var(--primary-bg-end);
  color: var(--text-main);
}

.content-card .btn {}

.badge {
  display: inline-block;
  padding: .35em .65em;
  font-size: .75em;
  font-weight: 700;
  line-height: 1;
  color: var(--text-main);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .375rem;
}

.badge.bg-success {
  background-color: var(--success-green);
}

.badge.bg-danger {
  background-color: var(--error-red);
}

.badge.bg-warning {
  background-color: #ffc107;
  color: #000;
}

.badge.bg-info {
  background-color: var(--accent-cyan);
}

.badge.bg-secondary {
  background-color: var(--text-secondary);
  color: var(--primary-bg-end);
}

.badge.bg-primary {
  background-color: var(--accent-cyan);
}

/* Added for consistency if statusMap uses 'primary' */

/* Ensure d-none utility class is available if not using Bootstrap CSS */
.d-none {
  display: none !important;
}

/* Responsive container for dashboard content */
.page-container>.container-fluid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  /* Default padding for <= 991px */
  padding-right: 16px;
  /* Default padding for <= 991px */
  box-sizing: border-box;
  /* Ensure padding is included in width calculations */
}

/* Tablet: 992px - 1199px */
@media (min-width: 992px) {
  .page-container>.container-fluid {
    width: 90%;
    /* Overwrite default padding */
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* "Create New Video" Card Styling */
#video-generation-section .content-card {
  background: var(--glass-bg);
  backdrop-filter: blur(22px);
  /* From T3 .glass-card general style */
  border-radius: var(--radius-lg);
  /* 20px */
  box-shadow: var(--shadow-lg);
  /* Matched to My Requests block */
  border: 1px solid rgba(255, 255, 255, .08);
  /* Matched to My Requests block */
  transition: .35s transform;
  /* From T3 .glass-card general style */
  padding: 40px;
  /* Default for desktop > 991px */
  width: 100%;
  /* Default, max-width will control actual size */
  max-width: 480px;
  /* Desktop fixed width */
  margin-left: auto;
  /* Centering for desktop if not part of a 2-col layout yet */
  margin-right: auto;
  /* Centering for desktop */
  box-sizing: border-box;
  z-index: 1;
}

#video-generation-section .content-card:hover {
  transform: translateY(-4px);
  /* From T3 .glass-card general style */
}

/* Topic Textarea */
#video-generation-section #topic {
  /* width: 100%; is default for .form-control */
  /* Placeholder color is tricky with just CSS for all browsers, 
       but modern browsers support ::placeholder */
  resize: none;
  height: 120px !important;
  min-height: 120px !important;
  max-height: 120px !important;
}

#video-generation-section #topic::placeholder {
  color: #666;
  opacity: 1;
  /* Firefox needs this */
}

/* Language and Style Selectors Row */
/* The existing HTML uses .row and .col-md-6. These are Bootstrap classes.
   If Bootstrap is not used, these classes won't apply flex/grid behavior.
   The following provides a basic flex implementation for the .row parent. */
#video-generation-section .row {
  display: flex;
  flex-wrap: wrap;
  /* Allow wrapping on smaller screens if not overridden */
  margin-left: -0.75rem;
  /* Simulate Bootstrap gutter, adjust if needed */
  margin-right: -0.75rem;
  /* Simulate Bootstrap gutter, adjust if needed */
}

#video-generation-section .row>[class*="col-"] {
  /* Basic styling for columns */
  padding-left: 0.75rem;
  /* Simulate Bootstrap gutter */
  padding-right: 0.75rem;
  /* Simulate Bootstrap gutter */
  width: 100%;
  /* Default to full width (mobile first) */
}

/* Desktop layout for Language/Style: two columns */
@media (min-width: 992px) {
  #video-generation-section .row>.col-md-6 {
    /* Target .col-md-6 for 2 columns */
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Tablet and Mobile specific padding for the card */
@media (max-width: 991px) {
  #video-generation-section .content-card {
    padding: 32px;
    max-width: 100%;
    /* Full width */
  }

  /* On tablet, .col-md-6 will stack because of 100% width default if not overridden by a larger breakpoint */
}

@media (max-width: 575px) {
  /* Card Paddings are already 24px from previous steps */
  /* #video-generation-section .content-card { padding: 24px; } */
  /* #status-section #statusBox { padding: 24px; } */
  /* #history-section > .content-card { padding: 24px; } */

  html {
    font-size: 95%;
    /* Adjusted for -1px from a typical 16px base */
  }

  #history-section h3.section-title-sm {
    font-size: 20px !important;
  }
}

/* Generate Video Button */
#generateForm button[type="submit"] {
  background: #fff;
  color: #000;
  border-radius: 56px;
  height: 48px;
  padding: 0 2rem;
  /* Add some horizontal padding */
  font-weight: 600;
  /* Make text bolder */
  border: none;
  /* Remove default border */
  cursor: pointer;
  width: 100%;
  /* T3 shows it as full width in some mockups */
  transition: background 0.25s, color 0.25s, transform 0.25s, border-color 0.25s;
}

#generateForm button[type="submit"]:hover {
  background: linear-gradient(to right, var(--accent-cyan), var(--accent-pink));
  color: #fff;
  transform: scale(1.03);
}

#generateForm button[type="submit"]:active {
  transform: scale(0.96) translateY(1px);
}

/* Ensure form elements inside use the new_style.css styling */
/* These are already defined in new_style.css, but ensure they apply if specificity is an issue */
#video-generation-section .form-control {
  /* Ensure styles from new_style.css for .form-control are applied */
  /* background-color: rgba(255,255,255,0.08); */
  /* border: 1px solid rgba(255,255,255,0.15); */
  /* color: var(--text-main); */
  /* ... etc ... */
}

/* Layout for Video Generation and Status columns */
.dashboard-main-columns {
  display: flex;
  flex-wrap: wrap;
  /* Allow wrapping to single column on smaller screens */
  margin-left: -1rem;
  /* Adjust for potential padding/margin on sections */
  margin-right: -1rem;
  /* Adjust for potential padding/margin on sections */
}

.dashboard-main-columns>section {
  padding-left: 1rem;
  /* Gutter between columns */
  padding-right: 1rem;
  /* Gutter between columns */
  box-sizing: border-box;
  width: 100%;
  /* Default for mobile/tablet - stacked */
}

@media (min-width: 992px) {

  /* Desktop: side-by-side */
  .dashboard-main-columns {
    flex-wrap: nowrap;
    /* Prevent wrapping on desktop */
    align-items: flex-start;
    /* Align items to the top */
  }

  .dashboard-main-columns>#video-generation-section {
    width: 480px;
    /* Fixed width as per form spec */
    flex-shrink: 0;
    /* Prevent shrinking */
  }

  .dashboard-main-columns>#status-section {
    width: 340px;
    /* Changed from 480px */
    flex-shrink: 0;
    /* Prevent shrinking */
    /* If form is centered, this might need margin adjustment or the parent needs to manage spacing */
  }

  /* If the total width 480+340 exceeds container, they might wrap.
       The container is 1100px. 480+480 = 960px. This should fit.
       May need to adjust margins on .dashboard-main-columns if sections are not equidistant.
       For now, assuming they are primary content within their respective column spaces.
    */
}

@media (max-width: 1199px) {
  .dashboard-main-columns {
    flex-direction: column;
    align-items: center;
    /* Center the columns if they don't take full width */
  }

  .dashboard-main-columns>#video-generation-section,
  .dashboard-main-columns>#status-section {
    width: 100%;
    /* Allow them to take full width of the centered column area */
    /* Their internal max-width (480px for form, 340px for status) will still apply if container is wider */
    /* Reset flex-basis or specific width if previously set for desktop */
    flex-basis: auto;
  }

  .dashboard-main-columns>#status-section {
    margin-top: 32px;
  }
}


/* "Generation Status" Card Styling (#statusBox) */
#status-section #statusBox {
  /* Inherits .content-card from HTML, apply glass styles */
  background: var(--glass-bg);
  backdrop-filter: blur(22px);
  border-radius: var(--radius-lg);
  /* 20px */
  box-shadow: var(--shadow-lg);
  /* Removed inset shadow, matched to My Requests */
  border: 1px solid rgba(255, 255, 255, .08);
  transition: .35s transform;
  padding: 40px;
  /* Default for desktop > 991px, matching form card */
  width: 100%;
  /* Takes width of its container column */
  box-sizing: border-box;
  height: 100%;
  /* Optional: if it should match height of form card */
}

#status-section #statusBox:hover {
  transform: translateY(-4px);
}

/* Content Stack inside Status Box */
#statusBox>div:not(.progress-container):not(.alert),
#statusBox>a.btn,
#statusBox>.progress-container {
  /* Target direct children that are part of the stack */
  margin-bottom: 16px;
}

#statusBox>*:last-child {
  margin-bottom: 0;
  /* Remove margin from the last element in the stack */
}

/* Progress Bar Styling */
/* Container for the bar - for unfilled part style */
#statusBox .progress-container {
  /* Overriding .progress-container from new_style.css if it exists */
  width: 100%;
  height: 6px;
  /* Updated height */
  background-color: rgba(255, 255, 255, .15);
  border-radius: 4px;
  /* Updated radius */
  overflow: hidden;
  /* Ensure inner bar respects radius */
}

/* Actual moving bar - #progressBar */
#statusBox #progressBar {
  /* Overriding .progress-bar-custom from new_style.css */
  height: 100%;
  /* Should remain 100% of container */
  width: 0%;
  /* Initial width, will be updated by JS */
  background-color: var(--accent-cyan);
  border-radius: 4px;
  /* Updated radius */
  transition: width 0.5s ease;
  /* Updated transition */
}

/* Badge Palette Styling */
#statusBox #taskState.badge {
  /* Specificity for task state badge */
  padding: .5em .75em;
  /* Slightly larger badge */
  font-size: .85em;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 1;
  /* Start visible */
}

/* Keyframe animation for a "fade-in" effect */
@keyframes fadeInBadge {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

/* A class JS could toggle to trigger the animation */
#statusBox #taskState.badge-fade-in {
  animation: fadeInBadge 0.3s ease-in-out forwards;
}


#statusBox #taskState.badge[data-status="success"],
/* Assuming JS will set a data-status attribute or class */
#statusBox #taskState.badge.bg-success {
  /* Fallback for existing class if ui.js uses it */
  background-color: var(--success-green);
  /* #00c851 */
  color: #fff;
}

#statusBox #taskState.badge[data-status="error"],
#statusBox #taskState.badge.bg-danger {
  background-color: var(--error-red);
  /* #ff4444 */
  color: #fff;
}

#statusBox #taskState.badge[data-status="in_progress"],
#statusBox #taskState.badge[data-status="processing"],
/* common alternatives */
#statusBox #taskState.badge.bg-info {
  /* Bootstrap 'info' often used for 'in progress' */
  background-color: var(--accent-cyan);
  color: #fff;
}

#statusBox #taskState.badge[data-status="queued"],
#statusBox #taskState.badge[data-status="pending"],
#statusBox #taskState.badge.bg-secondary {
  background-color: #888;
  color: #fff;
}

/* Responsive padding for Status card */
@media (max-width: 991px) {
  #status-section #statusBox {
    padding: 32px;
    /* height: auto; /* Allow height to adjust on mobile */
  }
}

@media (max-width: 575px) {
  #status-section #statusBox {
    padding: 24px;
  }
}

/* Download button styling (ensure it's full width if needed) */
#statusBox #downloadLink.btn {
  width: 100%;
  box-sizing: border-box;
}

#video-generation-section label {
  /* Ensure styles from new_style.css for label are applied */
  /* color: var(--text-secondary); */
  /* ... etc ... */
}

/* Main History Section Card (#history-section .content-card) */
#history-section>.content-card {
  /* Target the direct .content-card of #history-section */
  background: var(--glass-bg);
  backdrop-filter: blur(22px);
  border-radius: var(--radius-lg);
  /* 20px, consistent with other main cards */
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 40px;
  /* Default for desktop > 991px */
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 991px) {
  #history-section>.content-card {
    padding: 32px;
  }
}

@media (max-width: 575px) {
  #history-section>.content-card {
    padding: 24px;
  }
}

/* Individual History Item Card */
/* Assuming #historyList is the container for these items */
#historyList .history-item-card {
  /* Or whatever class is actually used by JS */
  background: var(--glass-bg);
  /* Nested glass card */
  backdrop-filter: blur(22px);
  border-radius: 16px;
  /* Specific radius for history items */
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* Updated "thin glass border" */
  transition: .3s transform;
}

#historyList .history-item-card:hover {
  transform: translateY(-3px) scale(1.01);
  /* Subtle hover effect */
}

#historyList .history-item-card:last-child {
  margin-bottom: 0;
}

/* History Item Content Styling */
.history-item-header {
  /* Container for title and date */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.history-item-title {
  /* Assuming a h5 or similar for title */
  font-size: 1.1rem;
  /* Slightly larger than date */
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.25rem;
  /* Space between title and date if they were stacked */
}

.history-item-date {
  font-size: 14px;
  /* 0.875rem or 14px */
  color: var(--text-secondary);
  /* #c7c7c7 */
  white-space: nowrap;
  margin-left: 1rem;
  /* Space between title and date */
}

.history-item-text {
  font-size: 1rem;
  color: var(--text-main);
  /* Main text, slightly less prominent than title */
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  /* Limit to 4 lines */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  /* Adjust for readability */
  min-height: calc(1.5em * 4);
  /* Approx height for 4 lines to prevent jitter if possible */
}

/* Action Buttons Container */
.history-item-actions {
  display: flex;
  justify-content: flex-end;
  /* Align buttons to the right */
  align-items: center;
  gap: 8px;
  /* Space between buttons */
}

/* General style for history action buttons */
.history-item-actions .btn-icon {
  width: 44px;
  /* Updated size */
  height: 44px;
  /* Updated size */
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  /* Slightly larger icon for larger button */
  line-height: 1;
  border-width: 2px;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}

.history-item-actions .btn-icon:active {
  transform: scale(0.94);
}

/* Specific button styles */
/* Eye (open) button */
.history-item-actions .btn-outline-accent {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.history-item-actions .btn-outline-accent:hover {
  background-color: var(--accent-cyan);
  color: #fff;
}

/* Repeat button */
.history-item-actions .btn-outline-secondary {
  border-color: #888;
  color: #888;
}

.history-item-actions .btn-outline-secondary:hover {
  background-color: #888;
  color: #fff;
}

/* Delete button */
.history-item-actions .btn-outline-danger {
  border-color: var(--error-red);
  color: var(--error-red);
}

.history-item-actions .btn-outline-danger:hover {
  background-color: var(--error-red);
  color: #fff;
}

/* FontAwesome Icon styling (ensure icons are visible) */
.history-item-actions .btn-icon i {
  /* Icons should inherit color from button by default */
}

@media (max-width: 480px) {
  /* Adjust Topic textarea height - This was removed as per T12 */
  /* #video-generation-section #topic { */
  /* height: 140px; */
  /* } */

  /* Global font size reduction */
  html {
    font-size: 93%;
  }

  /* Optional: Review padding on main cards for very small screens if needed */
  /* #video-generation-section .content-card,
       #status-section #statusBox,
       #history-section > .content-card {
        padding-left: 16px;
        padding-right: 16px;
    } */
  /* The above padding adjustment for cards to 16px is already part of their mobile styles (e.g. for <=575px), 
       so check if current padding (24px for <=575px) is acceptable or needs to be reduced further to 16px at 480px.
       The T3 for general container (<=991px) says padding 16px.
       The T3 for "Create new video" card says padding 24px for mobile <=575px.
       This seems a bit inconsistent. I will stick to the specific card paddings already implemented (24px for cards at this size)
       unless explicitly told to reduce them further to 16px at 480px.
       The html font-size reduction will make the 24px effectively smaller anyway.
    */
}

/* Navbar General Styling */
/*
.glass-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: var(--glass-bg);
  backdrop-filter: blur(18px);
  height: 64px;
}

Logo Styling
.glass-nav .nav-logo a {
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  text-decoration: none;
}

Nav Links General Styling (Desktop)
.glass-nav .nav-links {
  display: flex !important;
  flex-direction: row;
  position: static !important;
  background: none;
  backdrop-filter: none;
  width: auto;
}

.glass-nav .nav-links li {
  margin-left: 1.5rem;
}

.glass-nav .nav-links a {
  color: var(--text-main);
  font-weight: 500;
  text-decoration: none;
  padding: 0.5rem;
  display: block;
  line-height: calc(64px - 1rem);
}

.glass-nav .nav-links a:hover {
  color: var(--accent-cyan);
}

Burger Menu Specific Styles - initially hidden
.burger-checkbox {
  display: none;
}

.burger-label {
  display: none;
}

.burger-icon {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #fff;
  position: relative;
  transition: background-color 0.3s ease-in-out;
}

.burger-icon::before,
.burger-icon::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background-color: #fff;
  left: 0;
  transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
}

.burger-icon::before {
  top: -7px;
}

.burger-icon::after {
  top: 7px;
}

Mobile Styles (<= 991px)
@media (max-width: 991px) {
  .glass-nav {
    padding: 0 1rem;
  }

  .glass-nav .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 64px;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    z-index: 1000;
  }

  .glass-nav .nav-links li {
    margin: 0;
    width: 100%;
  }

  .glass-nav .nav-links a {
    height: 48px;
    line-height: 48px;
    padding: 0 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    box-sizing: border-box;
  }

  .glass-nav .nav-links li:last-child a {
    border-bottom: none;
  }

  .burger-label {
    display: inline-block;
    cursor: pointer;
    padding: 10px;
    z-index: 1100;
  }

  .burger-icon {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #fff;
    position: relative;
  }

  .burger-icon::before,
  .burger-icon::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: #fff;
    left: 0;
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
  }

  .burger-icon::before {
    top: -7px;
  }

  .burger-icon::after {
    top: 7px;
  }

  .burger-checkbox:checked~.nav-links {
    display: flex;
  }

  .burger-checkbox:checked~.burger-label .burger-icon {
    background-color: transparent;
  }

  .burger-checkbox:checked~.burger-label .burger-icon::before {
    transform: rotate(45deg);
    top: 0;
  }

  .burger-checkbox:checked~.burger-label .burger-icon::after {
    transform: rotate(-45deg);
    top: 0;
  }
}
*/
/* Desktop: >= 1200px */
@media (min-width: 1200px) {
  .page-container>.container-fluid {
    max-width: 1100px;
    /* Fixed width */
    width: 1100px;
    /* Fallback or explicit width */
    /* Overwrite tablet & default padding */
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* ======= Custom Buttons Styling Overwrites ======= */

/* Hero button: Create Video (white by default, blue on hover) */
.hero-buttons .btn-primary {
  background-color: #ffffff;
  color: #000000;
  border: 2px solid #ffffff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.hero-buttons .btn-primary:hover {
  background-color: var(--brand-1);
  color: #ffffff;
  border-color: var(--brand-1);
}

/* Hero button: See Examples (gray by default, blue on hover) */
.hero-buttons .btn-secondary {
  background-color: #d4d4d4;
  color: #000000;
  border: 2px solid #d4d4d4;
  font-weight: 600;
  transition: all 0.3s ease;
}

.hero-buttons .btn-secondary:hover {
  background-color: var(--brand-1);
  color: #ffffff;
  border-color: var(--brand-1);
}

/* Pricing plan button (white with black text, blue on hover) */
.btn-choose-plan {
  background-color: #ffffff;
  color: #000000;
  border: 2px solid #ffffff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-choose-plan:hover {
  background-color: var(--brand-1);
  color: #ffffff;
  border-color: var(--brand-1);
  transform: translateY(-2px);
}

/* Поднимаем мобильное меню */
/*
.glass-nav {
  position: relative;
  z-index: 9999;
}

.glass-nav .nav-links {
  position: absolute;
  top: 64px;
  left: 0;
  width: 100%;
  z-index: 99999;
  background: rgba(0, 7, 45, 0.9);
  backdrop-filter: blur(8px);
}
*/
#video-generation-section .content-card {
  position: relative;
  z-index: 0;
  transform: none !important;
  /* Убери transform, если он был */
  isolation: auto !important;
  /* не создавай новый контекст */
}

.video-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.custom-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
  cursor: pointer;
  display: block;
}

.video-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 9 / 16;
  /* Вертикальное видео */
  cursor: pointer;
  background-color: #111;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-button-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 64px;
  color: white;
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.video-card.playing .play-button-overlay {
  opacity: 0;
}

video-generation-section .content-card {
  position: relative;
  z-index: 0;
  transform: none !important;
  isolation: auto !important;
}

@media (min-width: 992px) {

  /* Ensure new .nav-links are displayed on desktop */
  /* This is already default in new .nav-links, but explicit for clarity */
  /* .navbar .nav-links { display: flex; } */
  /* .navbar .hamburger { display: none; } */

  /*
  .glass-nav .nav-links {
    display: flex !important;
    position: static !important;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    height: 64px;
  }

  .burger-label {
    display: none !important;
  }

  .glass-nav .nav-links li {
    margin-left: 1.5rem;
    margin-right: 0;
  }

  .glass-nav .nav-links a {
    display: block;
    padding: 0 0.75rem;
    line-height: 64px;
  }
*/
}

.auth-button.btn-primary {
  background-color: #ffffff;
  color: #000000;
  border: 2px solid #ffffff;
}

/* Task Card Styles */
.task-card {
  background: var(--glass-bg, rgba(255, 255, 255, .06));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg, 16px);
  padding: 1.5rem;
  /* 24px */
  margin-bottom: 0;
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.2));
  display: flex;
  flex-direction: column;
}

@media (max-width: 575px) {
  .task-card {
    padding: 1rem;
  }
}

.task-text-container {
  /* Container for the task text and the expand/collapse button */
  /* No specific styling needed for the container itself, but helps structure */
  /* margin-bottom: 0.5rem; /* Space before the actions bar, if button is inside task-text-container */
}

.task-text-content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  /* Show a maximum of 3 lines */
  line-height: 1.5;
  /* Adjust for readability */
  /* max-height: calc(1.5em * 3); */
  /* Fallback or if padding/margin within content affects line clamping. `line-clamp` is primary. */
  color: var(--text-main, #ffffff);
  /* Ensure text is readable */
  margin-bottom: 0.25rem;
  /* Reduced space before the expand toggle button, if button is outside */
}

.task-text-content.expanded {
  -webkit-line-clamp: none;
  /* Effectively show all lines */
  max-height: none;
  /* Or a large value like 1000px if 'none' is problematic */
  overflow: visible;
}

.task-expand-toggle {
  background: none;
  border: none;
  color: var(--accent-cyan, #00b2ff);
  cursor: pointer;
  padding: 0.25rem 0;
  /* Minimal vertical padding, no horizontal */
  margin-top: 0.25rem;
  /* Space between task text and this button */
  font-size: 0.9rem;
  text-align: left;
  /* Ensures the button text aligns left */
  display: block;
  /* Make it block to ensure it takes its own line if needed */
}

.task-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  /* Space between text container/expand button and actions bar */
}

.task-actions-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  /* Space between status badge and buttons, and between buttons themselves */
}

.task-actions-left>* {
  min-width: 0;
}

.task-date-time {
  color: #aaa;
  font-size: 0.875rem;
  /* 14px */
}

.task-date-time small {
  color: #e0e0e0 !important;
}

@media (max-width: 575px) {
  .task-actions-left {
    flex-direction: column;
    align-items: stretch;
  }
}

/*
  The JavaScript was modified so that .task-card replaces .list-group-item.
  Therefore, specific overrides for .list-group-item are likely not needed.
  If #historyList itself has .list-group class, it might impose some default styling on children,
  but .task-card defines its own background, border, padding, etc., which should take precedence.
*/

/* Ensure buttons within task-actions-left are styled as expected. */
/* They generally rely on .btn and .btn-outline-* classes already defined. */
.task-actions-left .btn {
  /* Example: if smaller buttons are needed in this context */
  /* padding: 0.2rem 0.4rem; */
  /* font-size: 0.8rem; */
}

/* ======= Gallery Page ======= */
.gallery-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1200px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.gallery-placeholder {
  padding: 2.5rem 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* === Gallery Page Styles === */

/* Gallery Grid - Existing rules are similar, this ensures they match the new spec precisely */
#video-gallery-grid {
    display: grid;
    gap: 20px; /* As per spec */
    grid-template-columns: repeat(3, 1fr); /* Desktop default */
}

@media (max-width: 1024px) { /* Tablet */
    #video-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) { /* Mobile */
    #video-gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* Video Card - Overriding the existing simple .video-card if it was different */
.video-card {
    /* Assuming .glassmorphism and .soft-shadow are defined as:
       .glassmorphism { background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); }
       .soft-shadow { box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
       .rounded-2xl { border-radius: 16px; }
       If not, they need to be defined, but the prompt says they are existing.
       The current new_style.css has:
       --glass-bg: rgba(255, 255, 255, .06);
       .glassmorphism { background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); }
       .soft-shadow { box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
       .rounded-2xl { border-radius: 16px; }
       These seem fine.
    */
    padding: 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Helps contain children, especially with border-radius */
    /* animation: fadeIn 0.5s ease-in-out; /* Added fade-in animation */
}


/* Keyframes for fadeIn animation */
@keyframes galleryItemFadeIn { /* Renamed to avoid conflict if 'fadeIn' is too generic */
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Apply animation to cards when they are added by JS (applied by default to all cards) */
#video-gallery-grid > .video-card {
    animation: galleryItemFadeIn 0.5s ease-in-out;
}


.video-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem; /* 12px, slightly less than card's 16px due to padding */
    aspect-ratio: 9 / 16; /* Changed from 16/9 to 9/16 */
    background-color: #000; /* Placeholder background */
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hide default video controls - cross-browser attempt */
.video-wrapper video::-webkit-media-controls {
    display: none !important;
}
.video-wrapper video::-moz-media-controls {
    display: none !important;
}
.video-wrapper video::media-controls {
    display: none !important;
}

.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 3rem;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.3s ease;
    border-radius: inherit; /* Inherit border-radius from .video-wrapper */
}

.play-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.video-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}

.prompt-text {
    font-size: 0.9rem;
    color: #e0e0e0; /* Light color for dark card background */
    margin: 0;
    flex-grow: 1; /* Allow text to take available space */
    margin-right: 10px; /* Space before download icon */
    /* For text truncation (already handled in JS, but good for fallback) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.download-icon { /* Styling the <a> tag */
    text-decoration: none;
}

.download-icon i { /* Styling the <i> icon */
    font-size: 1.2rem;
    color: #a0a0a0;
    transition: color 0.2s ease;
}

.download-icon:hover i {
    color: #ffffff;
}

/* Load more button styling (already has btn and btn-secondary) */
#load-more-videos {
    /* Add any specific overrides if needed, e.g., min-width */
}

/* Ensure page container gives enough vertical space */
.page-container {
    padding-top: 100px; /* Adjust if navbar height is different */
    padding-bottom: 40px; /* Space for footer or end of content */
}

/* New Prompt Bar Styling for Gallery Video Cards */
.prompt-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 0.2); /* Dark semi-transparent background */
    /* margin-top: 10px; /* This will be controlled by .video-info's padding-top */
    border-radius: 0.5rem; /* 8px */
    box-sizing: border-box; /* Include padding in width/height */
}

/* Ensure .video-info container itself doesn't add extra padding if .prompt-bar is its only child */
/* Or, if .video-info is meant to be the bar, style .video-info instead of creating .prompt-bar */
/* Based on plan, .prompt-bar is a child of .video-info.
   The existing .video-info style has `padding-top: 10px;`. This will create space between video-wrapper and prompt-bar. */

/* Prompt text within the bar */
.prompt-bar .prompt-text {
    font-size: 0.9rem;
    color: var(--text-secondary, #c7c7c7); /* Using theme variable */
    margin: 0; /* Reset margin if any from general p tags */
    flex-grow: 1;
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Download icon within the bar */
.prompt-bar .download-icon {
    /* The existing .download-icon styles should largely apply.
       Ensure color and hover are suitable on the new bar background. */
}

.prompt-bar .download-icon i {
    color: var(--text-secondary, #c7c7c7); /* Default color for icon */
    transition: color 0.2s ease;
}

.prompt-bar .download-icon:hover i {
    color: var(--text-main, #ffffff); /* Brighter on hover */
}

.video-unavailable-message {
    padding: 20px;
    color: var(--text-secondary, #c7c7c7);
    font-size: 0.9rem;
    width: 100%; /* Fill the video-wrapper */
    height: 100%; /* Fill the video-wrapper */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* Ensure text itself is centered if it wraps */
}
