/*
 * Global Styles for FTA Lab Website
 *
 * This stylesheet defines a high‑energy, modern design inspired by
 * performance marketing and the prestige of ranked play. Colors are
 * deliberately bold: dark backgrounds, vibrant red accents and warm
 * gold tones signal intensity, exclusivity and competitive drive.
 */

/* CSS Variables */
:root {
  --color-bg: #0a0a10; /* base dark background */
  --color-surface: #111119; /* slightly lighter surface */
  --color-overlay: rgba(255, 255, 255, 0.05); /* subtle overlay */
  --color-text: #f4f4f8; /* primary text */
  --color-muted: #8a8a9a; /* secondary text */
  --color-accent: #e50914; /* energy red accent */
  --color-accent-light: #ff3347; /* lighter accent for gradients */
  --color-premium: #d4af37; /* gold for premium items */
  --color-card-border: rgba(255, 255, 255, 0.15);
  --font-heading: 'Bebas Neue', sans-serif;
  --font-body: 'Poppins', sans-serif;
}

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  scroll-behavior: smooth;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Containers */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 0;
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(10, 10, 16, 0.85);
  backdrop-filter: blur(8px);
  z-index: 999;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-heading);
  font-size: 2rem;
  letter-spacing: 1px;
  color: var(--color-accent);
}

/* Logo icon style */
.logo-icon {
  width: 32px;
  height: 32px;
  /* Adjust vertical alignment so the icon sits closer to the FTA text */
  transform: translateY(-3px);
}
.main-nav a {
  margin-left: 1.5rem;
  font-size: 0.9rem;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.3s ease;
}
.main-nav a:hover {
  color: var(--color-accent);
}

/* Hero Section */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text);
  /* Use the stadium lights image as a subtle hero backdrop with overlays.  */
  background-image:
    linear-gradient(180deg, rgba(10, 10, 16, 0.8) 0%, rgba(10, 10, 16, 0.8) 100%),
    radial-gradient(circle at 50% 50%, rgba(229, 9, 20, 0.3), transparent 60%),
    url("assets/images/generated/madden_hero.jpg");
  background-size: cover;
  background-position: center;
}
.hero-content {
  padding-top: 6rem; /* offset for fixed header */
  max-width: 700px;
}
.headline {
  font-family: var(--font-heading);
  font-size: 6rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1rem;
}
.subhead {
  font-size: 1.2rem;
  color: var(--color-muted);
  margin-bottom: 2rem;
}
.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.btn-primary {
  background: var(--color-accent);
  color: #ffffff;
  border: 2px solid var(--color-accent);
}
.btn-primary:hover {
  background: var(--color-accent-light);
  border-color: var(--color-accent-light);
}
.btn-secondary {
  background: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
}
.btn-secondary:hover {
  background: var(--color-accent);
  color: #ffffff;
}
.btn-outline {
  background: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-card-border);
}
.btn-outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Problem Section */
.problem-section {
  background-color: var(--color-surface);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.problem-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.problem-col {
  flex: 1 1 300px;
}
.problem-col h2 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--color-accent);
  margin-bottom: 1rem;
}
.problem-col p {
  color: var(--color-muted);
  font-size: 1rem;
}

/* Section Titles & Subtitles */
.section-title {
  font-family: var(--font-heading);
  font-size: 3rem;
  color: var(--color-accent);
  text-align: center;
  margin-bottom: 1rem;
}
.section-subtitle,
.rank-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 2rem;
  color: var(--color-muted);
  line-height: 1.5;
}

/* Game Selection Section */
.select-section {
  background: var(--color-bg);
  padding-bottom: 6rem;
}
.select-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}
.select-card {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  padding: 2rem;
  border-radius: 12px;
  width: 280px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Prepare each card to accept a background image via class selectors. */
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.select-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}
.select-card h3 {
  font-family: var(--font-heading);
  font-size: 2rem;
  margin-top: 1rem;
  color: var(--color-accent);
}

/* Assign unique background images to the game select cards.  */
.madden-card {
  /* Madden gameplay screenshot for Madden card */
  background-image: linear-gradient(rgba(10, 10, 16, 0.7), rgba(10, 10, 16, 0.7)), url("assets/images/generated/madden_gameplay.png");
}

.cfb-card {
  /* College football gameplay or scoreboard screenshot for CFB card */
  background-image: linear-gradient(rgba(10, 10, 16, 0.7), rgba(10, 10, 16, 0.7)), url("assets/images/generated/cfb_gameplay.png");
}
.select-description {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin: 1rem 0 1.5rem;
  min-height: 60px;
}
.icon-wrapper {
  /* Hide the SVG icons when background images are used for the cards */
  display: none;
  height: 60px;
}

/* Rank Ladder Section */
.rank-section {
  background: var(--color-surface);
  padding-top: 4rem;
  padding-bottom: 6rem;
}
.rank-ladder {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}
.rank-node {
  flex: 1;
  margin: 0.5rem;
  padding: 1rem;
  text-align: center;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 1rem;
  position: relative;
  color: var(--color-text);
  min-width: 80px;
  min-height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}
.rank-node:hover {
  transform: scale(1.1);
}
.rank-node.bronze {
  background: radial-gradient(circle at top left, #8c6239, #6b4f30);
}
.rank-node.silver {
  /* Silver rank: lighter, more metallic gradient */
  background: radial-gradient(circle at top left, #d4d4d4, #b0b0b0);
  color: #0a0a10;
}
.rank-node.gold {
  background: radial-gradient(circle at top left, #d4af37, #b79c2b);
  color: #0a0a10;
}
.rank-node.elite {
  /* Elite rank: red/orange gradient */
  background: radial-gradient(circle at top left, #f25043, #c13f30);
}
.rank-node.hero {
  /* Hero rank: vibrant blue gradient */
  background: radial-gradient(circle at top left, #4faaff, #3c7ac1);
}
.rank-node.champion {
  /* Champion rank: purple gradient */
  background: radial-gradient(circle at top left, #a152e0, #7c39b1);
}
.rank-node.legend {
  /* Legend rank: regal gold gradient */
  background: radial-gradient(circle at top left, #d8b65d, #b08935);
}
.rank-node .sub-tier {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0;
  margin-top: 0.2rem;
}

/* Membership & Premium Sections */
.membership-section,
.premium-section {
  background: var(--color-bg);
  padding-bottom: 6rem;
}
.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: 12px;
  max-width: 500px;
  margin: 2rem auto;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.product-content h3 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}
.product-content .price {
  font-size: 1.5rem;
  color: var(--color-premium);
  margin-bottom: 1rem;
  font-weight: 600;
}
.features {
  list-style: none;
  text-align: left;
  margin: 1rem 0 1.5rem;
  padding-left: 0;
}
.features li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--color-muted);
  font-size: 0.95rem;
}
.features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-accent);
  border-radius: 50%;
}

/* Other products grid */
.other-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.other-card {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.other-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}
.other-card h4 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}
.other-card .price {
  font-size: 1.1rem;
  color: var(--color-premium);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

/* Price note for pre‑sale labels */
.price-note {
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-left: 0.3rem;
}
.other-card .desc {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.other-card .btn {
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
}

/* Proof Section */
.proof-section {
  background: var(--color-surface);
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.proof-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.stat h3 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--color-accent);
  margin-bottom: 0.3rem;
}
.stat p {
  color: var(--color-muted);
  font-size: 0.85rem;
}
.testimonial {
  margin-top: 3rem;
  font-style: italic;
  color: var(--color-muted);
  border-left: 3px solid var(--color-accent);
  padding-left: 1rem;
}
.testimonial cite {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-premium);
}

/* Access Section */
.access-section {
  background: var(--color-bg);
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.access-steps {
  list-style: none;
  counter-reset: step;
  max-width: 600px;
  margin: 0 auto;
  padding-left: 0;
}
.access-steps li {
  position: relative;
  margin-bottom: 1.5rem;
  padding-left: 2.5rem;
  color: var(--color-muted);
}
.access-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1rem;
}
.callout {
  text-align: center;
  margin-top: 2rem;
}

/* FAQ Section */
.faq-section {
  background: var(--color-surface);
  padding-top: 6rem;
  padding-bottom: 6rem;
}

/* Gallery Section */
.gallery-section {
  background: var(--color-bg);
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.gallery-item img {
  width: 100%;
  height: 250px;
  /* Crop images to focus on the centre of the field rather than overlays */
  object-fit: cover;
  object-position: center;
  /* Increase brightness so gameplay action is clearer */
  filter: brightness(0.85);
  transition: transform 0.3s ease;
}
.gallery-item:hover img {
  transform: scale(1.1);
}
.image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem;
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.6);
  color: var(--color-text);
  text-align: center;
}
.faq-item {
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 1rem;
}
.faq-item summary {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--color-accent);
  cursor: pointer;
  outline: none;
  list-style: none;
}
.faq-item p {
  margin-top: 0.5rem;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Community Section */
.community-section {
  background: var(--color-surface);
  padding-top: 6rem;
  padding-bottom: 6rem;
  text-align: center;
}

/* Content Section */
.content-section {
  background: var(--color-bg);
  padding-top: 6rem;
  padding-bottom: 6rem;
  text-align: center;
}

.content-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}

.content-card {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: 12px;
  padding: 1.5rem;
  width: 280px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.content-card h3 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

.content-card p {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* Policies Section */
.policies-section {
  background: var(--color-bg);
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.policy-list {
  list-style: none;
  margin-bottom: 2rem;
  padding-left: 0;
}
.policy-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.8rem;
  color: var(--color-muted);
  font-size: 0.9rem;
}
.policy-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-accent);
  border-radius: 50%;
}

/* Footer */
.site-footer {
  background: #07070d;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 2rem 0;
  color: var(--color-muted);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}
.footer-nav a {
  margin: 0 0.5rem;
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.3s ease;
}
.footer-nav a:hover {
  color: var(--color-accent);
}
.footer-support a {
  color: var(--color-accent);
  text-decoration: none;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .headline {
    font-size: 4rem;
  }
  .section-title {
    font-size: 2.5rem;
  }
  .rank-ladder {
    flex-direction: column;
    align-items: center;
  }
  .rank-node {
    margin: 0.5rem 0;
    max-width: 120px;
  }
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .main-nav {
    margin-top: 0.5rem;
  }
  .problem-grid {
    flex-direction: column;
  }
  .select-card {
    width: 100%;
  }
  .product-card {
    margin: 1.5rem 0;
  }
}

/* === FTA V4 STRUCTURE START === */
.logo { text-decoration: none; }
.main-nav { display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap; }
.main-nav a { margin-left: 0; }
.page-main { padding-top: 5.25rem; }
.v4-hero { min-height: 54vh; display: flex; align-items: center; background: linear-gradient(180deg, rgba(10,10,16,.92), rgba(10,10,16,.96)), radial-gradient(circle at 70% 20%, rgba(229,9,20,.18), transparent 45%); border-bottom: 1px solid rgba(255,255,255,.06); }
.v4-hero.cfb-hero { background-image: linear-gradient(180deg, rgba(10,10,16,.80), rgba(10,10,16,.96)), url("assets/images/generated/cfb_hero.jpg"); background-size: cover; background-position: center; }
.v4-hero.madden-hero { background-image: linear-gradient(180deg, rgba(10,10,16,.82), rgba(10,10,16,.96)), url("assets/images/generated/madden_hero.jpg"); background-size: cover; background-position: center; }
.v4-hero-inner { max-width: 980px; }
.kicker { color: var(--color-premium); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .82rem; margin-bottom: .8rem; }
.v4-hero h1 { font-family: var(--font-heading); font-size: clamp(3rem, 8vw, 6.5rem); color: var(--color-accent); letter-spacing: .04em; line-height: .95; margin-bottom: 1rem; text-transform: uppercase; }
.hero-copy { color: var(--color-text); max-width: 760px; font-size: 1.1rem; }
.hero-actions, .card-actions, .cta-stack { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 1.4rem; }
.v4-section { padding: 4.4rem 0; background: var(--color-bg); }
.v4-section:nth-of-type(even) { background: var(--color-surface); }
.v4-section.compact { padding: 3rem 0; }
.v4-grid { display: grid; gap: 1.45rem; margin-top: 2rem; }
.v4-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v4-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v4-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v4-card, .v4-content-card, .auth-card, .cta-panel, .locker-card { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)); border: 1px solid var(--color-card-border); border-radius: 18px; padding: 1.65rem; box-shadow: 0 14px 32px rgba(0,0,0,.28); }
.v4-card h3, .v4-content-card h3, .cta-panel h2, .locker-card h3 { font-family: var(--font-heading); color: var(--color-accent); font-size: 2rem; letter-spacing: .03em; margin-bottom: .55rem; }
.v4-card p, .v4-content-card p, .locker-card p, .cta-panel p { color: var(--color-muted); }
.v4-price { color: var(--color-premium) !important; font-size: 1.25rem; font-weight: 700; margin: .35rem 0 .85rem; }
.status-badge { display: inline-block; color: var(--color-premium); border: 1px solid rgba(212,175,55,.35); background: rgba(212,175,55,.08); border-radius: 999px; padding: .28rem .7rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: .9rem; }
.micro-copy { color: var(--color-muted); font-size: .82rem; }
.cta-panel { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.process-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.process-row div { border: 1px solid var(--color-card-border); border-radius: 14px; padding: 1rem; background: rgba(255,255,255,.035); }
.process-row strong { display: block; color: var(--color-accent); font-family: var(--font-heading); font-size: 2.2rem; line-height: 1; }
.process-row span { color: var(--color-muted); }
.faq-grid { display: grid; gap: 1rem; margin-top: 2rem; }
.faq-grid details { border: 1px solid var(--color-card-border); border-radius: 14px; padding: 1rem 1.25rem; background: rgba(255,255,255,.035); }
.faq-grid summary { cursor: pointer; color: var(--color-text); font-weight: 700; }
.faq-grid p { color: var(--color-muted); margin-top: .75rem; }
.detail-grid { display: grid; gap: 1rem; }
.v4-feature-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: 1.4rem; align-items: start; }
.detail-block { border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 1.2rem; background: rgba(255,255,255,.025); }
.video-box { padding: 2rem; border: 1px dashed rgba(212,175,55,.45); border-radius: 14px; background: rgba(212,175,55,.05); color: var(--color-premium); font-weight: 700; text-align: center; margin: 1rem 0; }
.auth-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.45fr); gap: 1.5rem; }
.auth-form { display: grid; gap: 1rem; }
.auth-form label { color: var(--color-text); font-weight: 600; display: grid; gap: .35rem; }
.auth-form input { background: rgba(255,255,255,.06); border: 1px solid var(--color-card-border); border-radius: 12px; color: var(--color-text); padding: .85rem 1rem; font: inherit; }
.auth-aside { border-left: 1px solid var(--color-card-border); padding-left: 1.5rem; }
.locker-grid-v4 { display: grid; gap: 1rem; margin-top: 2rem; }
.locker-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.account-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.btn.is-disabled { opacity: .65; cursor: not-allowed; pointer-events: none; }
code { color: var(--color-premium); }
@media (max-width: 980px) { .v4-grid.two, .v4-grid.three, .v4-grid.four, .process-row, .v4-feature-grid, .auth-card, .account-grid { grid-template-columns: 1fr; } .cta-panel, .locker-card { align-items: flex-start; flex-direction: column; } .main-nav { gap: .8rem; } }
@media (max-width: 640px) { .site-header { position: sticky; } .page-main { padding-top: 0; } .hero-buttons, .hero-actions, .card-actions { flex-direction: column; } .btn { width: 100%; } }
/* === FTA V4 STRUCTURE END === */


/* FTA Supabase Auth MVP */
.auth-message {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}
.auth-message.error {
  border-color: rgba(255, 88, 88, 0.55);
}
.auth-message:empty {
  display: none;
}
.auth-form input {
  width: 100%;
}
.locker-card.is-unlocked {
  border-color: rgba(244, 198, 92, 0.7);
}
.locker-card.is-locked {
  opacity: 0.86;
}
.locker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}
.member-panel {
  display: grid;
  gap: 1rem;
}
.member-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.member-detail {
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}
.member-detail h3 {
  margin-bottom: 0.35rem;
}


/* FTA auth visibility helpers */
[hidden] { display: none !important; }
.access-gate-card { max-width: 780px; margin: 0 auto; text-align: center; }
.access-gate-card .hero-actions { justify-content: center; }


/* FTA auth/access fixes */
[hidden] {
  display: none !important;
}

.access-gate-card {
  text-align: center;
}

.locker-card.is-unlocked {
  border-color: rgba(44, 214, 122, 0.55);
}

.locker-card.is-locked {
  border-color: rgba(255, 255, 255, 0.16);
}

/* Billing portal feedback */
[data-billing-status] {
  margin-top: 1rem;
}
[data-billing-status].is-error {
  color: #ff6b6b;
}
.btn.is-loading {
  opacity: 0.75;
  pointer-events: none;
}

/* FTA gated content library */
.locker-library {
  margin-top: 2rem;
}

.locker-library-header {
  margin-bottom: 1.4rem;
}

.locker-products-title {
  margin-top: 3rem;
}

.content-library-grid {
  display: grid;
  gap: 1.4rem;
  margin-top: 1.5rem;
}

.content-collection-card {
  border: 1px solid rgba(244, 198, 92, 0.34);
  border-radius: 20px;
  padding: 1.65rem;
  background: linear-gradient(180deg, rgba(244, 198, 92, 0.065), rgba(255, 255, 255, 0.025));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.content-collection-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.25rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.content-collection-header h3 {
  font-family: var(--font-heading);
  color: var(--color-accent);
  font-size: 2.35rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.45rem;
}

.content-collection-header p {
  color: var(--color-muted);
  max-width: 760px;
}

.content-section-block {
  margin-top: 1.35rem;
}

.content-section-title {
  color: var(--color-premium);
  font-family: var(--font-heading);
  font-size: 1.55rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.content-item-grid {
  display: grid;
  gap: 0.9rem;
}

.content-item-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.18);
}

.content-item-card.is-featured {
  border-color: rgba(44, 214, 122, 0.42);
}

.content-item-card h4 {
  color: var(--color-accent);
  margin: 0.35rem 0 0.45rem;
}

.content-item-card p {
  color: var(--color-muted);
}

.content-body-preview {
  margin-top: 0.6rem;
  color: var(--color-text) !important;
}

.type-pill {
  display: inline-block;
  color: var(--color-premium);
  border: 1px solid rgba(212, 175, 55, 0.28);
  background: rgba(212, 175, 55, 0.075);
  border-radius: 999px;
  padding: 0.22rem 0.58rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

@media (max-width: 980px) {
  .content-collection-header {
    flex-direction: column;
  }
}

/* === FTA UX ORGANIZATION PASS START === */
.locker-accordion {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
  margin-top: 1.35rem;
  overflow: hidden;
}

.locker-accordion > summary {
  cursor: pointer;
  list-style: none;
  padding: 1.25rem 1.55rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  color: var(--color-text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.locker-accordion > summary::-webkit-details-marker {
  display: none;
}

.locker-accordion > summary span {
  font-family: var(--font-heading);
  color: var(--color-accent);
  font-size: 2.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.locker-accordion > summary small {
  color: var(--color-muted);
  text-align: right;
}

.locker-accordion[open] > summary {
  background: rgba(255, 255, 255, 0.025);
}

.locker-library-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.locker-library-card {
  border: 1px solid rgba(44, 214, 122, 0.42);
  border-radius: 18px;
  padding: 1.35rem;
  background: linear-gradient(180deg, rgba(44, 214, 122, 0.06), rgba(255, 255, 255, 0.022));
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}

.locker-library-card h3 {
  font-family: var(--font-heading);
  color: var(--color-accent);
  font-size: 2.2rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}

.locker-library-card p {
  color: var(--color-muted);
}

.library-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.85rem;
}

.library-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: rgba(212, 175, 55, 0.07);
  border-radius: 999px;
  color: var(--color-premium);
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.compact-product-card {
  padding: 1.15rem;
  align-items: flex-start;
}

.compact-product-card h3 {
  font-size: 1.55rem;
}

.locker-grid-v4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-library-shell {
  border: 1px solid rgba(44, 214, 122, 0.46);
  border-radius: 22px;
  padding: 1.7rem;
  background: linear-gradient(180deg, rgba(44, 214, 122, 0.055), rgba(255, 255, 255, 0.022));
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.3);
}

.product-library-header {
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.product-library-header h2 {
  font-family: var(--font-heading);
  color: var(--color-accent);
  font-size: clamp(2.5rem, 6vw, 4.3rem);
  letter-spacing: 0.04em;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0.3rem 0 0.65rem;
}

.product-library-header p {
  color: var(--color-muted);
  max-width: 820px;
}

.library-section-stack {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.35rem;
}

.library-section-accordion {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.library-section-accordion > summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--color-text);
}

.library-section-accordion > summary::-webkit-details-marker {
  display: none;
}

.library-section-accordion > summary span {
  font-family: var(--font-heading);
  color: var(--color-premium);
  font-size: 1.55rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.library-section-accordion > summary small {
  color: var(--color-muted);
}

.library-section-accordion .content-item-grid {
  padding: 0 1.1rem 1.1rem;
}

@media (max-width: 980px) {
  .locker-library-card-grid,
  .locker-grid-v4 {
    grid-template-columns: 1fr;
  }

  .locker-accordion > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .locker-accordion > summary small {
    text-align: left;
  }
}
/* === FTA UX ORGANIZATION PASS END === */

/* === FTA ADMIN CONTENT MANAGER START === */
.compact-hero {
  min-height: 48vh;
}

.small-title {
  font-size: clamp(2rem, 5vw, 3.2rem) !important;
  text-align: left !important;
  margin-bottom: 0.75rem !important;
}

.admin-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.admin-toolbar-actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 1.25rem;
  align-items: start;
}

.admin-form-card,
.admin-list-card {
  min-height: 100%;
}

.admin-list-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.admin-filter-label {
  min-width: 220px;
  margin-bottom: 0 !important;
}

.form-label {
  display: grid;
  gap: 0.38rem;
  margin-bottom: 1rem;
  color: var(--color-text);
  font-weight: 700;
  font-size: 0.9rem;
}

.form-label input,
.form-label select,
.form-label textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--color-text);
  padding: 0.88rem 0.95rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
}

.form-label textarea {
  resize: vertical;
}

.form-label input:focus,
.form-label select:focus,
.form-label textarea:focus {
  border-color: rgba(229, 9, 20, 0.72);
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.14);
}

.form-label input::placeholder,
.form-label textarea::placeholder {
  color: rgba(244, 244, 248, 0.42);
}

.form-label select option {
  background: #111119;
  color: var(--color-text);
}

.form-help {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 400;
}

.form-grid.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-text);
  margin: 1rem 0 1.25rem;
  font-weight: 700;
}

.form-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
}

.admin-item-list {
  display: grid;
  gap: 0.85rem;
  max-height: 860px;
  overflow: auto;
  padding-right: 0.25rem;
}

.admin-item-card {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.2);
  padding: 1rem;
}

.admin-item-card h3 {
  font-family: var(--font-heading);
  color: var(--color-accent);
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  margin: 0.45rem 0 0.25rem;
}

.admin-item-card p {
  color: var(--color-muted);
}

.admin-item-actions {
  min-width: 135px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-item-state {
  border-radius: 999px;
  padding: 0.35rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-item-state.is-ready {
  border: 1px solid rgba(44, 214, 122, 0.4);
  background: rgba(44, 214, 122, 0.08);
  color: #2cd67a;
}

.admin-item-state.is-text {
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(212, 175, 55, 0.08);
  color: var(--color-premium);
}

@media (max-width: 1040px) {
  .admin-grid,
  .form-grid.two {
    grid-template-columns: 1fr;
  }

  .admin-toolbar,
  .admin-list-header,
  .admin-item-card {
    flex-direction: column;
  }

  .admin-filter-label {
    min-width: 0;
    width: 100%;
  }

  .admin-item-actions {
    align-items: flex-start;
    min-width: 0;
  }
}
/* === FTA ADMIN CONTENT MANAGER END === */

/* Admin Content Manager v3 - organized UX */
.admin-page-v3 .admin-container-v3 { max-width: 1180px; }
.admin-hero-v3 .hero-copy { max-width: 760px; }
.admin-status-bar-v3 {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.admin-status-actions-v3 { display: flex; gap: .75rem; flex-wrap: wrap; }
.admin-library-dashboard-v3 {
  display: grid;
  gap: 1rem;
  margin: 1.2rem 0 1.6rem;
}
.admin-library-group-v3 {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(0,0,0,.22);
}
.admin-library-group-v3 h3 {
  font-family: var(--font-heading);
  color: var(--color-accent);
  font-size: 1.65rem;
  letter-spacing: .03em;
  margin: 0 0 .7rem;
}
.admin-library-chip-grid-v3,
.admin-quick-picks-v3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .65rem;
}
.admin-library-chip-v3,
.admin-quick-picks-v3 button {
  text-align: left;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: .85rem .9rem;
  background: rgba(255,255,255,.045);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.admin-library-chip-v3:hover,
.admin-quick-picks-v3 button:hover {
  border-color: rgba(255, 23, 38, .75);
  background: rgba(255, 23, 38, .08);
  transform: translateY(-1px);
}
.admin-library-chip-v3 strong { display: block; font-size: .92rem; margin-bottom: .25rem; }
.admin-library-chip-v3 span,
.admin-library-chip-v3 small { display: block; color: var(--color-muted); font-size: .75rem; line-height: 1.4; }
.admin-layout-v3 {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, .9fr);
  gap: 1.25rem;
  align-items: start;
}
.admin-panel-card-v3 {
  border: 1px solid var(--color-card-border);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.02));
  box-shadow: 0 16px 38px rgba(0,0,0,.3);
  padding: 1.25rem;
}
.admin-panel-heading-v3 { margin-bottom: 1rem; }
.admin-panel-heading-v3 h2 {
  font-family: var(--font-heading);
  color: var(--color-accent);
  font-size: 2.3rem;
  letter-spacing: .03em;
  margin: .45rem 0 .3rem;
}
.admin-panel-heading-v3 p { color: var(--color-muted); margin: 0; }
.admin-form-v3 { display: grid; gap: 1rem; }
.admin-step-card-v3 {
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  padding: 1rem;
  background: rgba(0,0,0,.22);
}
.admin-step-card-v3 h3 {
  font-family: var(--font-heading);
  color: #fff;
  font-size: 1.45rem;
  letter-spacing: .03em;
  margin: 0 0 .85rem;
}
.admin-field-row-v3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}
.admin-source-grid-v3 { display: grid; gap: .85rem; }
.admin-page-v3 .form-label {
  display: grid;
  gap: .38rem;
  font-size: .82rem;
  color: #fff;
  font-weight: 700;
}
.admin-page-v3 .form-label input,
.admin-page-v3 .form-label select,
.admin-page-v3 .form-label textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  background: rgba(7,7,12,.94);
  color: #fff;
  padding: .78rem .82rem;
  font-family: var(--font-body);
  font-size: .9rem;
  outline: none;
}
.admin-page-v3 .form-label textarea { resize: vertical; min-height: 92px; }
.admin-page-v3 .form-label input:focus,
.admin-page-v3 .form-label select:focus,
.admin-page-v3 .form-label textarea:focus {
  border-color: rgba(255, 23, 38, .85);
  box-shadow: 0 0 0 3px rgba(255, 23, 38, .12);
}
.admin-page-v3 .form-help { color: var(--color-muted); font-size: .72rem; line-height: 1.35; font-weight: 500; }
.admin-selected-library-v3,
.content-type-help-v3 {
  margin-top: .8rem;
  padding: .85rem .9rem;
  border-radius: 14px;
  border: 1px dashed rgba(212, 175, 55, .48);
  background: rgba(212, 175, 55, .055);
  color: var(--color-muted);
  font-size: .82rem;
  line-height: 1.5;
}
.admin-selected-library-v3 strong { color: #fff; }
.admin-selected-library-v3 span { display: block; color: var(--color-muted); margin-top: .2rem; }
.admin-selected-library-v3 p { margin: .35rem 0 0; }
.admin-selected-library-v3 a { color: var(--color-accent); }
.source-field-v3 {
  opacity: .72;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: .85rem;
  background: rgba(255,255,255,.025);
}
.source-field-v3.is-recommended {
  opacity: 1;
  border-color: rgba(255, 23, 38, .5);
  background: rgba(255, 23, 38, .045);
}
.admin-feature-check-v3 {
  align-self: end;
  display: flex !important;
  align-items: center;
  gap: .55rem;
  min-height: 48px;
}
.admin-form-actions-v3 { margin-top: .25rem; }
.admin-filter-row-v3 { margin-bottom: .9rem; }
.admin-items-list-v3 { display: grid; gap: .8rem; max-height: 760px; overflow: auto; padding-right: .25rem; }
.admin-item-card-v3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .85rem;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  padding: .95rem;
  background: rgba(0,0,0,.22);
}
.admin-item-card-v3 h3 {
  color: #fff;
  font-size: 1rem;
  margin: .35rem 0 .4rem;
}
.admin-item-card-v3 p { margin: .28rem 0; }
.admin-item-meta-v3 {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.admin-item-meta-v3 span,
.admin-item-state {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .22rem .5rem;
  background: rgba(255,255,255,.07);
  color: var(--color-muted);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.admin-item-actions-v3 {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  align-items: flex-end;
  justify-content: center;
}
.admin-item-state.is-ready { background: rgba(43, 214, 140, .12); color: #88f1c4; }
.admin-item-state.is-text { background: rgba(212, 175, 55, .12); color: #f0cf69; }
@media (max-width: 980px) {
  .admin-layout-v3,
  .admin-field-row-v3 { grid-template-columns: 1fr; }
  .admin-status-bar-v3,
  .admin-item-card-v3 { grid-template-columns: 1fr; display: grid; }
  .admin-item-actions-v3 { align-items: flex-start; }
}


/* === FTA ADMIN/LOCKER UX FIX V4 START === */
/* Use this file through a new filename so Cloudflare/browser cannot reuse old cached CSS. */
.locker-accordion {
  border: 1px solid rgba(255, 23, 38, .38) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028)) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.38) !important;
  margin: 1.4rem 0 !important;
  overflow: hidden !important;
}
.locker-accordion > summary {
  cursor: pointer !important;
  list-style: none !important;
  padding: 1.25rem 1.45rem !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: .75rem 1rem !important;
  align-items: center !important;
  background: rgba(255,255,255,.04) !important;
}
.locker-accordion > summary::-webkit-details-marker { display: none !important; }
.locker-accordion > summary span {
  font-family: var(--font-heading) !important;
  color: var(--color-accent) !important;
  font-size: clamp(1.75rem, 2.6vw, 2.4rem) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.locker-accordion > summary small {
  grid-column: 1 / 2 !important;
  color: var(--color-muted) !important;
  font-size: .9rem !important;
  line-height: 1.45 !important;
}
.locker-accordion > summary::after {
  content: 'OPEN / CLOSE' !important;
  grid-column: 2 / 3 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  border: 1px solid rgba(255, 23, 38, .9) !important;
  border-radius: 999px !important;
  padding: .65rem .9rem !important;
  color: #fff !important;
  background: rgba(255, 23, 38, .16) !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}
.locker-accordion[open] > summary::after { content: 'COLLAPSE' !important; }
.locker-products-title:not([open]) { border-color: rgba(212,175,55,.45) !important; }
.locker-products-title:not([open]) > summary { background: rgba(212,175,55,.06) !important; }
.locker-products-title:not([open]) > summary::after { content: 'EXPAND' !important; border-color: rgba(212,175,55,.9) !important; background: rgba(212,175,55,.14) !important; }
.locker-library-card-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 1rem !important; }
.locker-library-card { border: 1px solid rgba(43,214,140,.45) !important; border-radius: 18px !important; padding: 1.05rem !important; background: rgba(43,214,140,.035) !important; }

.admin-page-v3 { background: #08090f !important; }
.admin-page-v3 .admin-container-v3 { max-width: 1240px !important; }
.admin-status-bar-v3,
.admin-panel-card-v3,
.admin-step-card-v3,
.admin-library-group-v3,
.admin-setup-card-v4 {
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.028)) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.32) !important;
}
.admin-status-bar-v3 { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 1rem !important; padding: 1rem 1.15rem !important; margin-bottom: 1.15rem !important; }
.admin-library-dashboard-v3 { display: grid !important; gap: 1rem !important; margin: 1.1rem 0 1.35rem !important; }
.admin-library-group-v3 { padding: 1rem !important; }
.admin-library-group-v3 h3,
.admin-panel-heading-v3 h2,
.admin-step-card-v3 h3 { font-family: var(--font-heading) !important; letter-spacing: .035em !important; }
.admin-library-group-v3 h3 { color: var(--color-accent) !important; font-size: 1.7rem !important; margin: 0 0 .8rem !important; }
.admin-library-chip-grid-v3,
.admin-quick-picks-v3 { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: .75rem !important; }
.admin-library-chip-v3,
.admin-quick-picks-v3 button {
  display: block !important;
  text-align: left !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 16px !important;
  padding: .95rem !important;
  background: rgba(255,255,255,.045) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  cursor: pointer !important;
}
.admin-library-chip-v3:hover,
.admin-quick-picks-v3 button:hover { border-color: rgba(255,23,38,.8) !important; background: rgba(255,23,38,.08) !important; }
.admin-library-chip-v3 strong { display: block !important; color: #fff !important; font-size: .96rem !important; margin-bottom: .24rem !important; }
.admin-library-chip-v3 span,
.admin-library-chip-v3 small { display: block !important; color: var(--color-muted) !important; font-size: .76rem !important; line-height: 1.4 !important; }
.admin-setup-card-v4 { padding: 1rem 1.1rem !important; border-color: rgba(212,175,55,.45) !important; background: linear-gradient(180deg, rgba(212,175,55,.12), rgba(255,255,255,.028)) !important; }
.admin-setup-card-v4 h3 { margin: 0 0 .4rem !important; color: #fff !important; font-size: 1.15rem !important; }
.admin-setup-card-v4 p { color: var(--color-muted) !important; margin: .25rem 0 .8rem !important; }
.admin-layout-v3 { display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .85fr) !important; gap: 1.25rem !important; align-items: start !important; }
.admin-panel-card-v3 { padding: 1.2rem !important; }
.admin-panel-heading-v3 h2 { color: var(--color-accent) !important; font-size: 2.25rem !important; margin: .25rem 0 .35rem !important; }
.admin-form-v3 { display: grid !important; gap: 1rem !important; }
.admin-step-card-v3 { padding: 1rem !important; }
.admin-step-card-v3 h3 { color: #fff !important; font-size: 1.42rem !important; margin: 0 0 .8rem !important; }
.admin-field-row-v3 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .9rem !important; }
.admin-source-grid-v3 { display: grid !important; gap: .9rem !important; }
.admin-page-v3 label.form-label,
.admin-page-v3 .form-label { display: grid !important; gap: .42rem !important; color: #fff !important; font-weight: 800 !important; font-size: .82rem !important; }
.admin-page-v3 input,
.admin-page-v3 select,
.admin-page-v3 textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255,255,255,.17) !important;
  border-radius: 13px !important;
  background: #090a10 !important;
  color: #fff !important;
  padding: .8rem .85rem !important;
  font-family: var(--font-body) !important;
  font-size: .92rem !important;
  outline: none !important;
}
.admin-page-v3 textarea { min-height: 120px !important; resize: vertical !important; }
.admin-page-v3 input:focus,
.admin-page-v3 select:focus,
.admin-page-v3 textarea:focus { border-color: rgba(255,23,38,.88) !important; box-shadow: 0 0 0 3px rgba(255,23,38,.13) !important; }
.admin-page-v3 .form-help { color: var(--color-muted) !important; font-size: .72rem !important; line-height: 1.35 !important; }
.admin-selected-library-v3,
.content-type-help-v3 { padding: .85rem .95rem !important; border-radius: 14px !important; border: 1px dashed rgba(212,175,55,.5) !important; background: rgba(212,175,55,.065) !important; color: var(--color-muted) !important; }
.source-field-v3 { opacity: .68 !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 14px !important; padding: .9rem !important; background: rgba(255,255,255,.025) !important; }
.source-field-v3.is-recommended { opacity: 1 !important; border-color: rgba(255,23,38,.58) !important; background: rgba(255,23,38,.055) !important; }
.admin-items-list-v3 { display: grid !important; gap: .8rem !important; max-height: 760px !important; overflow: auto !important; }
.admin-item-card-v3 { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: .9rem !important; border-radius: 16px !important; padding: .95rem !important; background: rgba(0,0,0,.24) !important; border: 1px solid rgba(255,255,255,.12) !important; }
.admin-item-meta-v3 { display: flex !important; flex-wrap: wrap !important; gap: .35rem !important; }
.admin-item-meta-v3 span,
.admin-item-state { border-radius: 999px !important; padding: .23rem .52rem !important; background: rgba(255,255,255,.075) !important; color: var(--color-muted) !important; font-size: .68rem !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: .04em !important; }
@media (max-width: 980px) {
  .admin-layout-v3,
  .admin-field-row-v3,
  .locker-accordion > summary { grid-template-columns: 1fr !important; }
  .locker-accordion > summary::after { grid-column: 1 !important; grid-row: auto !important; justify-self: start !important; }
  .admin-status-bar-v3 { display: grid !important; }
}
/* === FTA ADMIN/LOCKER UX FIX V4 END === */


/* === FTA ADMIN DELETE UX V5 START === */
.admin-item-actions-v3 .btn,
.admin-small-action {
  width: 100% !important;
  min-width: 128px !important;
  justify-content: center !important;
  text-align: center !important;
  padding: .68rem .85rem !important;
  font-size: .78rem !important;
}
.btn-danger {
  border: 1px solid rgba(255, 23, 38, .78) !important;
  background: rgba(255, 23, 38, .13) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-danger:hover {
  background: rgba(255, 23, 38, .24) !important;
  border-color: rgba(255, 23, 38, 1) !important;
}
.admin-item-card-v3:has([data-admin-publish-item]) {
  border-color: rgba(212, 175, 55, .34) !important;
}
.admin-item-actions-v3 button[disabled] {
  opacity: .55 !important;
  cursor: wait !important;
}
.admin-list-panel-v3 .admin-panel-heading-v3 p::after {
  content: ' Archive hides items from customers. Delete is permanent.';
  color: #f0cf69;
}
@media (max-width: 980px) {
  .admin-item-actions-v3 .btn,
  .admin-small-action { width: auto !important; min-width: 120px !important; }
}
/* === FTA ADMIN DELETE UX V5 END === */

/* === FTA CONTENT DELIVERY V7 INLINE PREVIEWS START === */
.content-item-card {
  display: grid !important;
  gap: 1rem !important;
}
.content-item-main {
  min-width: 0 !important;
}
.content-inline-preview {
  margin: 1rem 0 .75rem !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: rgba(0,0,0,.28) !important;
}
.inline-preview-skeleton {
  padding: 1.15rem !important;
  color: var(--color-muted) !important;
  font-size: .92rem !important;
}
.content-inline-image-button {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  text-align: left !important;
}
.content-inline-image {
  display: block !important;
  width: 100% !important;
  max-height: 520px !important;
  object-fit: contain !important;
  background: #05060a !important;
}
.content-inline-image-button:hover .content-inline-image {
  filter: brightness(1.06) !important;
}
.video-preview {
  aspect-ratio: 16 / 9 !important;
}
.content-inline-video {
  width: 100% !important;
  height: 100% !important;
  min-height: 320px !important;
  border: 0 !important;
  display: block !important;
  background: #000 !important;
}
.content-inline-preview.is-error {
  border-color: rgba(255, 23, 38, .35) !important;
}
.locker-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .7rem !important;
  align-items: center !important;
  margin-top: .55rem !important;
}
.content-item-card .btn {
  width: auto !important;
  min-width: 150px !important;
  justify-content: center !important;
}
@media (max-width: 720px) {
  .content-inline-image { max-height: 360px !important; }
  .content-inline-video { min-height: 220px !important; }
  .content-item-card .btn { width: 100% !important; }
}
/* === FTA CONTENT DELIVERY V7 INLINE PREVIEWS END === */


/* === FTA CONTENT DELIVERY V8 VIDEO UX START === */
.content-item-card[data-content-type="video"] {
  max-width: 860px !important;
}
.content-item-card[data-content-type="video"] .content-inline-preview {
  max-width: 760px !important;
  margin: 1rem 0 .75rem !important;
}
.content-item-card[data-content-type="video"] .video-preview {
  aspect-ratio: 16 / 9 !important;
}
.content-item-card[data-content-type="video"] .content-inline-video {
  width: 100% !important;
  height: 100% !important;
  min-height: 260px !important;
  max-height: 430px !important;
  border: 0 !important;
  display: block !important;
  background: #000 !important;
}
.content-video-note {
  margin-top: .55rem !important;
  color: var(--color-muted) !important;
  font-size: .85rem !important;
}
.content-item-card[data-content-type="video"] .locker-actions .btn-primary {
  background: transparent !important;
  color: var(--color-accent) !important;
  border-color: rgba(255, 23, 38, .7) !important;
}
@media (max-width: 720px) {
  .content-item-card[data-content-type="video"] .content-inline-video {
    min-height: 190px !important;
    max-height: 260px !important;
  }
}
/* === FTA CONTENT DELIVERY V8 VIDEO UX END === */

/* V9: site-wide product libraries wired. */
/* V30 readability baseline. Preserve headings while preventing tiny body and admin copy. */
html { font-size: 16px; }
body { font-size: 1rem; }
.main-nav a,
.footer-nav a,
.site-footer,
.v19-section-note,
.v19-detail-body,
.v19-detail-body p,
.v19-detail-body li,
.micro-copy,
.form-help,
.admin-item-meta-v3 span,
.admin-library-chip-v3 small,
.admin-library-chip-v3 span {
  font-size: max(0.9375rem, 15px) !important;
  line-height: 1.6;
}
.v19-accordion summary,
.form-label,
input,
select,
textarea,
button {
  font-size: 1rem;
}
.v19-accordion summary { min-height: 58px; padding: 1rem 1.15rem; }
.v19-detail-body { padding: 1rem 1.15rem 1.2rem; }
.admin-item-card-v3 p,
.admin-panel-heading-v3 p,
.fta-lesson-step-heading p {
  font-size: 0.9375rem !important;
  line-height: 1.6;
}
@media (max-width: 700px) {
  html { font-size: 17px; }
  .main-nav a { font-size: 0.95rem !important; }
}