/* 
 * Overpay - Shop Amazon with Zcash
 * Minimalist, professional design
 */

/* ==========================================================================
   CSS Variables & Base Styles
   ========================================================================== */

:root {
  /* Colors - Clean light theme */
  --color-bg: #ffffff;
  --color-bg-secondary: #f7f7f7;
  --color-bg-tertiary: #ededed;
  
  --color-text: #111111;
  --color-text-secondary: #565959;
  --color-text-tertiary: #888888;
  
  --color-link: #007185;
  --color-link-hover: #c7511f;

  --color-accent: #636fe9;
  --color-accent-dark: #4f5bd5;
  
  --color-price: #b12704;
  --color-success: #067d62;
  --color-error: #c40000;
  --color-warning: #c7511f;
  
  --color-border: #dddddd;
  --color-border-dark: #888888;
  
  /* Typography - System fonts, Apple preferred */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
  
  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  
  /* Max widths */
  --max-width: 1200px;
  --max-width-narrow: 800px;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.main-content {
  flex: 1;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-sm) 0;
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.logo {
  text-decoration: none;
  color: var(--color-text);
  flex-shrink: 0;
}

.logo:hover {
  text-decoration: none;
  color: var(--color-text);
}

.logo-text {
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.5px;
}

/* Header Search */
.header-search-form {
  flex: 1;
  max-width: 600px;
}

.header-search-wrapper {
  display: flex;
  border: 1px solid var(--color-border-dark);
  border-radius: 3px;
  overflow: hidden;
}

.header-search-wrapper:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(99, 111, 233, 0.15);
}

.header-search-input {
  flex: 1;
  background: var(--color-bg);
  border: none;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
  outline: none;
  min-width: 0;
}

.header-search-input::placeholder {
  color: var(--color-text-tertiary);
}

.header-search-button {
  background: var(--color-bg-tertiary);
  color: var(--color-text);
  border: none;
  border-left: 1px solid var(--color-border);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  cursor: pointer;
}

.header-search-button:hover {
  background: var(--color-border);
}

.site-nav {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Account Dropdown */
.account-dropdown {
  position: relative;
}

.account-dropdown-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: var(--space-xs);
  border-radius: 50%;
  list-style: none;
  color: var(--color-text);
}

.account-dropdown-toggle::-webkit-details-marker {
  display: none;
}

.account-dropdown-toggle:hover {
  background: var(--color-bg-tertiary);
}

.account-icon {
  display: block;
}

.account-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-xs);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 160px;
  z-index: 100;
}

.account-dropdown-item {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text);
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

.account-dropdown-item:hover {
  background: var(--color-bg-secondary);
  color: var(--color-link-hover);
  text-decoration: none;
}

@media (max-width: 600px) {
  .account-dropdown-toggle {
    padding: var(--space-sm);
  }

  .account-dropdown-item {
    padding: var(--space-md);
  }
}

.tagline {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

/* ==========================================================================
   Flash Messages
   ========================================================================== */

.flash {
  padding: var(--space-sm) 0;
}

.flash-notice {
  background: #f0fff4;
  border-bottom: 1px solid #9ae6b4;
  color: var(--color-success);
}

.flash-alert {
  background: #fff5f5;
  border-bottom: 1px solid #feb2b2;
  color: var(--color-error);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero {
  padding: var(--space-xl) 0;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.hero-centered {
  text-align: center;
}

.hero-centered .search-form {
  margin: 0 auto;
}

.hero h1 {
  font-size: 2rem;
  font-weight: 400;
  margin: 0 0 var(--space-sm);
  color: var(--color-text);
}

.hero-subtitle {
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-lg);
}

/* ==========================================================================
   Search Form (Hero)
   ========================================================================== */

.search-form {
  max-width: 600px;
}

.search-input-wrapper {
  display: flex;
  border: 1px solid var(--color-border-dark);
  border-radius: 3px;
  overflow: hidden;
}

.search-input-wrapper:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(99, 111, 233, 0.15);
}

.search-input {
  flex: 1;
  background: var(--color-bg);
  border: none;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
  outline: none;
  min-width: 0;
}

.search-input::placeholder {
  color: var(--color-text-tertiary);
}

.search-button {
  background: var(--color-bg-tertiary);
  color: var(--color-text);
  border: none;
  border-left: 1px solid var(--color-border);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-sans);
  font-size: 1rem;
  cursor: pointer;
}

.search-button:hover {
  background: var(--color-border);
}

/* ==========================================================================
   Error Section
   ========================================================================== */

.error-section {
  padding: var(--space-md) 0;
}

.error-message {
  background: #fff5f5;
  border: 1px solid #feb2b2;
  padding: var(--space-md);
  color: var(--color-error);
}

/* ==========================================================================
   Results Section
   ========================================================================== */

.results-section {
  padding: var(--space-lg) 0 var(--space-2xl);
}

.results-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 var(--space-lg);
  color: var(--color-text);
}

.results-count {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-left: var(--space-sm);
}

/* Products List View */
.products-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.product-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
}

.product-row:hover {
  text-decoration: none;
  background: var(--color-bg-secondary);
  margin: 0 calc(-1 * var(--space-md));
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.product-row-image {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-row-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.product-row-info {
  flex: 1;
  min-width: 0;
}

.product-row-title {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 var(--space-xs);
  color: var(--color-link);
}

.product-row:hover .product-row-title {
  color: var(--color-link-hover);
}

.product-row-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.product-rating {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.review-count {
  color: var(--color-text-tertiary);
}

.product-row-price {
  font-size: 1.25rem;
  color: var(--color-price);
  flex-shrink: 0;
  text-align: right;
  min-width: 100px;
}

.price-unavailable {
  color: var(--color-text-tertiary);
  font-size: 0.9rem;
}

/* No Results */
.no-results {
  padding: var(--space-2xl) 0;
  text-align: center;
}

.no-results h2 {
  margin: 0 0 var(--space-sm);
  font-size: 1.25rem;
  font-weight: 400;
}

.no-results p {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-sm);
}

.no-results-cta {
  margin-top: var(--space-lg) !important;
  padding: var(--space-md);
  background: var(--color-bg-secondary);
  border-left: 3px solid var(--color-link);
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.5;
}

.no-results-link {
  color: var(--color-link);
  font-weight: 500;
  text-decoration: underline;
}

.no-results-link:hover {
  color: var(--color-link-hover);
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.pagination-link {
  color: var(--color-link);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: 3px;
}

.pagination-link:hover {
  background: var(--color-bg-secondary);
  text-decoration: none;
}

.pagination-current {
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Features Section
   ========================================================================== */

.features-section {
  padding: var(--space-xl) 0 var(--space-2xl);
}

.features-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 var(--space-lg);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
}

.feature-card {
  padding: var(--space-md);
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-bg-tertiary);
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.feature-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 var(--space-xs);
}

.feature-card p {
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* ==========================================================================
   Product Detail Page
   ========================================================================== */

.product-detail {
  padding: var(--space-lg) 0 var(--space-2xl);
}

/* Breadcrumb */
.breadcrumb {
  font-size: 0.9rem;
  margin-bottom: var(--space-lg);
  color: var(--color-text-secondary);
}

.breadcrumb a {
  color: var(--color-link);
}

.breadcrumb-separator {
  margin: 0 var(--space-xs);
  color: var(--color-text-tertiary);
}

.breadcrumb-current {
  color: var(--color-text-secondary);
}

/* Product Layout */
.product-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

@media (max-width: 768px) {
  .product-layout {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   CSS-Only Product Gallery (Spectre.css-inspired tricks)
   Uses radio buttons + :checked selectors for zero-JS image switching
   ========================================================================== */

/* Product Gallery Container */
.product-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.image-placeholder {
  color: var(--color-text-tertiary);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
}

/* Hide radio buttons visually but keep them functional */
.gallery-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* Main gallery viewport */
.gallery-main {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  overflow: hidden;
}

.gallery-viewport {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Individual image figures - all stacked, only active one visible */
.gallery-figure {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

/* Zoom container magic */
.zoom-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.gallery-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center center;
}

/* Zoom lens effect (visible on hover) */
.zoom-lens {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 120px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    transparent 0%,
    rgba(0, 0, 0, 0.02) 100%
  );
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* Hover zoom effect - pure CSS magnification */
.zoom-container:hover .gallery-image {
  transform: scale(1.8);
}

.zoom-container:hover .zoom-lens {
  opacity: 1;
}

/* Make image follow mouse on hover using CSS custom properties */
.zoom-container:hover {
  --zoom-active: 1;
}


/* Thumbnail strip */
.gallery-thumbnails {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  padding: var(--space-xs) 0;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.gallery-thumbnails::-webkit-scrollbar {
  height: 4px;
}

.gallery-thumbnails::-webkit-scrollbar-track {
  background: transparent;
}

.gallery-thumbnails::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 2px;
}

.thumbnail-label {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border: 2px solid var(--color-border);
  padding: 4px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  background: var(--color-bg);
}

.thumbnail-label:hover {
  border-color: var(--color-text-tertiary);
  transform: translateY(-2px);
}

.thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ==========================================================================
   THE CSS MAGIC: Radio button state management
   When a radio is checked, we target its corresponding elements using
   sibling selectors - this is the core Spectre.css trick!
   ========================================================================== */

/* Image 0 (first image) */
.gallery-radio#gallery-img-0:checked ~ .gallery-main .gallery-figure[data-index="0"] {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.gallery-radio#gallery-img-0:checked ~ .gallery-thumbnails .thumbnail-label[data-index="0"] {
  border-color: var(--color-link);
  box-shadow: 0 0 0 1px var(--color-link);
}

/* Image 1 */
.gallery-radio#gallery-img-1:checked ~ .gallery-main .gallery-figure[data-index="1"] {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.gallery-radio#gallery-img-1:checked ~ .gallery-thumbnails .thumbnail-label[data-index="1"] {
  border-color: var(--color-link);
  box-shadow: 0 0 0 1px var(--color-link);
}

/* Image 2 */
.gallery-radio#gallery-img-2:checked ~ .gallery-main .gallery-figure[data-index="2"] {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.gallery-radio#gallery-img-2:checked ~ .gallery-thumbnails .thumbnail-label[data-index="2"] {
  border-color: var(--color-link);
  box-shadow: 0 0 0 1px var(--color-link);
}

/* Image 3 */
.gallery-radio#gallery-img-3:checked ~ .gallery-main .gallery-figure[data-index="3"] {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.gallery-radio#gallery-img-3:checked ~ .gallery-thumbnails .thumbnail-label[data-index="3"] {
  border-color: var(--color-link);
  box-shadow: 0 0 0 1px var(--color-link);
}

/* Image 4 */
.gallery-radio#gallery-img-4:checked ~ .gallery-main .gallery-figure[data-index="4"] {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.gallery-radio#gallery-img-4:checked ~ .gallery-thumbnails .thumbnail-label[data-index="4"] {
  border-color: var(--color-link);
  box-shadow: 0 0 0 1px var(--color-link);
}

/* Image 5 */
.gallery-radio#gallery-img-5:checked ~ .gallery-main .gallery-figure[data-index="5"] {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.gallery-radio#gallery-img-5:checked ~ .gallery-thumbnails .thumbnail-label[data-index="5"] {
  border-color: var(--color-link);
  box-shadow: 0 0 0 1px var(--color-link);
}

/* ==========================================================================
   Advanced CSS trick: Keyboard navigation support via :focus-visible
   ========================================================================== */
.gallery-radio:focus-visible ~ .gallery-main {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

/* ==========================================================================
   Responsive gallery adjustments
   ========================================================================== */
@media (max-width: 768px) {
  .gallery-main {
    aspect-ratio: 4/3;
  }
  
  .thumbnail-label {
    width: 48px;
    height: 48px;
  }
  
  /* Disable zoom on touch devices - it's not useful */
  .zoom-container:hover .gallery-image {
    transform: none;
  }
}

/* ==========================================================================
   Legacy fallback styles (keep for non-gallery pages)
   ========================================================================== */
.main-image-wrapper {
  aspect-ratio: 1;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.main-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.thumbnail-gallery {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
}

.thumbnail-wrapper {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border);
  padding: 2px;
  cursor: pointer;
}

.thumbnail-wrapper.active,
.thumbnail-wrapper:hover {
  border-color: var(--color-link);
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Product Details */
.product-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.product-brand {
  font-size: 0.9rem;
  color: var(--color-link);
  margin: 0;
}

.product-detail .product-title {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
  color: var(--color-text);
}

.product-rating-detail {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.rating-number {
  color: var(--color-link);
}

.review-count-detail {
  color: var(--color-link);
}

/* Price Section */
.price-section {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.current-price {
  font-size: 1.75rem;
  color: var(--color-price);
}

.original-price {
  font-size: 0.9rem;
  color: var(--color-text-tertiary);
  text-decoration: line-through;
}

/* Buy Section */
.buy-section {
  padding-top: var(--space-sm);
}

.buy-button {
  display: inline-block;
  background: var(--color-link);
  border: 1px solid var(--color-link);
  color: white;
  text-decoration: none;
  padding: var(--space-sm) var(--space-xl);
  font-size: 1rem;
  cursor: pointer;
  border-radius: 3px;
}

.buy-button:hover {
  background: #005f73;
  border-color: #005f73;
  text-decoration: none;
  color: white;
}

.buy-icon {
  display: none;
}

.unavailable-section {
  padding: var(--space-md);
  background: #fff5f5;
  border: 1px solid #feb2b2;
}

.unavailable-message {
  margin: 0;
  color: var(--color-error);
}

/* Amazon Link */
.amazon-link-section {
  padding-top: var(--space-sm);
}

.amazon-link {
  color: var(--color-link);
}

.external-icon {
  font-size: 0.75rem;
}

/* Seller Info */
.seller-info {
  color: var(--color-text-secondary);
}

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

/* Feature Section */
.feature-section {
  padding-top: var(--space-md);
}

.feature-section h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 var(--space-sm);
}

.feature-list {
  margin: 0;
  padding-left: var(--space-lg);
}

.feature-list li {
  margin-bottom: var(--space-xs);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* Categories */
.categories-section {
  padding-top: var(--space-md);
}

.categories-section h4 {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 var(--space-xs);
  color: var(--color-text-secondary);
}

.category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.category-tag {
  font-size: 0.85rem;
  padding: 2px var(--space-sm);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

/* Product Description Section */
.product-description-section,
.product-specs-section {
  padding: var(--space-lg);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-md);
}

.product-description-section h2,
.product-specs-section h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 var(--space-md);
}

.description-content {
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.description-content p {
  margin: 0 0 var(--space-sm);
}

/* Description formatted as list (for products with bullet points) */
.description-list {
  margin: 0;
  padding-left: var(--space-lg);
  list-style-type: disc;
}

.description-list li {
  margin-bottom: var(--space-sm);
  line-height: 1.6;
}

.specs-list {
  margin: 0;
  padding-left: var(--space-lg);
}

.specs-list li {
  margin-bottom: var(--space-xs);
  color: var(--color-text-secondary);
}

/* Offers Section */
.offers-section {
  padding: var(--space-lg);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

.offers-section h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 var(--space-md);
}

.offers-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.offer-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.offer-card.best-offer {
  border-color: var(--color-link);
  background: #f7fffe;
}

.offer-price {
  font-size: 1.1rem;
  color: var(--color-price);
  min-width: 80px;
}

.offer-seller {
  flex: 1;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.offer-badges {
  display: flex;
  gap: var(--space-xs);
}

.badge {
  font-size: 0.8rem;
  padding: 2px var(--space-sm);
}

.badge-fba {
  background: #f0fff4;
  border: 1px solid #9ae6b4;
  color: var(--color-success);
}

.badge-condition {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Checkout / Buy Page
   ========================================================================== */

.checkout-section {
  padding: var(--space-lg) 0 var(--space-2xl);
  font-size: 16px; /* Smaller base font for checkout pages */
}

/* Keep breadcrumb at normal size, then reset for content below */
.checkout-section .breadcrumb {
  font-size: 0.9rem;
}

.checkout-section .checkout-layout,
.checkout-section .checkout-actions,
.checkout-section .order-expired-notice,
.checkout-section .order-paid-notice {
  font-size: 15px;
}

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
}

@media (max-width: 768px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }
}

/* Order Summary */
.order-summary {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  padding: var(--space-lg);
}

.order-summary h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

/* Order ID Display */
.order-id-display {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.order-id-label {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.order-id-value {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-tertiary);
  background: var(--color-bg);
  padding: 2px var(--space-sm);
  border: 1px solid var(--color-border);
}

.order-product {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.order-product-image {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border: 1px solid var(--color-border);
}

.order-product-info {
  flex: 1;
}

.order-product-title {
  font-size: 1rem;
  font-weight: 400;
  margin: 0 0 var(--space-xs);
  line-height: 1.4;
}

.order-product-brand {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin: 0;
}

.order-price-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.price-line {
  display: flex;
  justify-content: space-between;
  color: var(--color-text-secondary);
}

.price-line.price-total {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-price);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.zcash-equivalent {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.equivalent-label {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-xs);
}

.equivalent-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-xs);
  font-family: var(--font-mono);
}

.equivalent-rate {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-sm);
}

.equivalent-note {
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
  margin: 0;
}

/* Order Expiration */
.order-expiration {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  text-align: center;
}

.expiration-value {
  margin: 0;
  color: var(--color-text-secondary);
}

.expiration-exact {
  margin: var(--space-xs) 0 0;
  font-size: 0.85rem;
  color: var(--color-text-tertiary);
}

/* Payment Section */
.payment-section {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  padding: var(--space-lg);
}

.payment-section h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 var(--space-lg);
}

.qr-code-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-lg);
}

.qr-code {
  background: var(--color-bg);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
}

.qr-code svg {
  display: block;
  width: 180px;
  height: 180px;
}

.address-section {
  margin-bottom: var(--space-lg);
}

.address-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
  color: var(--color-text-secondary);
}

.address-display {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: var(--space-md);
  overflow-x: auto;
}

.zcash-address {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  word-break: break-all;
  color: var(--color-text);
}

.address-note {
  font-size: 0.85rem;
  color: var(--color-text-tertiary);
  margin: var(--space-sm) 0 0;
}

/* Payment Status */
.payment-status {
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-warning);
}

/* Different payment status states */
.status-indicator.waiting .status-dot {
  background: var(--color-warning);
  animation: pulse 2s ease-in-out infinite;
}

.status-indicator.confirming {
  color: var(--color-link);
}

.status-indicator.confirming .status-dot {
  background: var(--color-link);
  animation: pulse 1.5s ease-in-out infinite;
}

.status-indicator.confirmed {
  color: var(--color-success);
}

.status-indicator.confirmed .status-dot {
  background: var(--color-success);
}

.status-indicator.wrong-amount {
  color: var(--color-error);
}

.status-indicator.wrong-amount .status-dot {
  background: var(--color-error);
}

.status-indicator.error {
  color: var(--color-error);
}

.status-indicator.error .status-dot {
  background: var(--color-error);
}

.status-detail {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin: var(--space-sm) 0 0;
}

.status-detail.error {
  color: var(--color-error);
}

.status-detail.warning {
  color: var(--color-warning);
}

/* Underpaid status */
.status-indicator.underpaid {
  color: var(--color-warning);
}

.status-indicator.underpaid .status-dot {
  background: var(--color-warning);
}

/* Overpaid status */
.status-indicator.overpaid {
  color: var(--color-link);
}

.status-indicator.overpaid .status-dot {
  background: var(--color-link);
}

/* Transaction Details */
.transaction-details {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.transactions-label {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-sm);
}

.transaction-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  font-size: 0.9rem;
}

.tx-amount {
  font-family: var(--font-mono);
  font-weight: 500;
}

.tx-link {
  color: var(--color-link);
  font-size: 0.85rem;
}

.tx-link:hover {
  color: var(--color-link-hover);
}

.tx-confirmations {
  color: var(--color-text-tertiary);
  font-size: 0.85rem;
}

/* Order paid notice transaction link */
.order-paid-notice .transaction-link {
  margin-top: var(--space-md);
  font-size: 0.9rem;
}

.order-paid-notice .transaction-link a {
  font-family: var(--font-mono);
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

/* Payment Instructions */
.payment-instructions {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.payment-instructions h3 {
  font-weight: 700;
  margin: 0 0 var(--space-sm);
}

.payment-instructions ol {
  margin: 0;
  padding-left: var(--space-lg);
}

.payment-instructions li {
  margin-bottom: var(--space-xs);
  color: var(--color-text-secondary);
}

/* Privacy Notice */
.privacy-notice,
.shipping-notice {
  padding: var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-sm);
}

.privacy-notice h4,
.shipping-notice h4 {
  font-weight: 700;
  margin: 0 0 var(--space-xs);
  color: var(--color-text);
}

.privacy-notice p,
.shipping-notice p {
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Checkout Actions */
.checkout-actions {
  margin-top: var(--space-lg);
}

.cancel-link {
  color: var(--color-link);
}

/* ==========================================================================
   Authentication Pages
   ========================================================================== */

.auth-section {
  padding: var(--space-xl) 0 var(--space-2xl);
}

.container-narrow {
  max-width: 480px;
}

.auth-box {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  padding: var(--space-xl);
}

.auth-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 var(--space-xs);
}

.auth-subtitle {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-lg);
}

.auth-warning {
  padding: var(--space-md);
  background: var(--color-bg-secondary);
  border-left: 3px solid var(--color-warning);
  margin-bottom: var(--space-lg);
  color: var(--color-text);
  line-height: 1.5;
}

.auth-errors {
  padding: var(--space-md);
  background: #fff5f5;
  border: 1px solid #feb2b2;
  margin-bottom: var(--space-lg);
  color: var(--color-error);
}

.auth-errors ul {
  margin: 0;
  padding-left: var(--space-lg);
}

.auth-errors li {
  margin-bottom: var(--space-xs);
}

.auth-form {
  margin-bottom: var(--space-lg);
}

.form-group {
  margin-bottom: var(--space-md);
}

.form-label {
  display: block;
  font-weight: 700;
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}

.form-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans);
  font-size: 1rem;
  border: 1px solid var(--color-border-dark);
  border-radius: 3px;
  background: var(--color-bg);
  color: var(--color-text);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(99, 111, 233, 0.15);
}

.form-hint {
  margin: var(--space-xs) 0 0;
  font-size: 0.85rem;
  color: var(--color-text-tertiary);
}

/* Radio button group */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.radio-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.radio-option:hover {
  border-color: var(--color-border-dark);
  background-color: var(--color-bg-secondary);
}

.radio-option:has(.radio-input:checked) {
  border-color: var(--color-link);
  background-color: #f0f9ff;
}

.radio-input {
  margin: 3px 0 0 0;
  width: 18px;
  height: 18px;
  accent-color: var(--color-link);
  cursor: pointer;
}

.radio-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.radio-label strong {
  color: var(--color-text);
  font-weight: 600;
}

.radio-description {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

/* Price input with $ prefix */
.price-input-wrapper {
  display: flex;
  align-items: center;
  position: relative;
}

.price-prefix {
  position: absolute;
  left: 14px;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  pointer-events: none;
}

.price-input {
  padding-left: 32px !important;
  max-width: 200px;
}

/* Hide number input spinners */
.price-input::-webkit-outer-spin-button,
.price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.price-input[type=number] {
  -moz-appearance: textfield;
}

.auth-button {
  display: inline-block;
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
  background: #636fe9;
  border: 1px solid #636fe9;
  color: white;
  font-family: var(--font-sans);
  font-size: 1rem;
  cursor: pointer;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
}

.auth-button:hover {
  background: #4f5bd5;
  border-color: #4f5bd5;
  text-decoration: none;
  color: white;
}

.auth-button:active {
  background: #3d4abf;
  border-color: #3d4abf;
}

.auth-button-secondary {
  background: var(--color-bg);
  border: 1px solid var(--color-border-dark);
  color: var(--color-text);
}

.auth-button-secondary:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

.auth-footer {
  text-align: center;
  color: var(--color-text-secondary);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.auth-footer p {
  margin: 0;
}

/* Username confirmation page */
.username-confirmation-details {
  background: var(--color-bg-secondary);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  text-align: center;
}

.username-confirmation-details p {
  margin: 0 0 var(--space-md);
  color: var(--color-text-secondary);
}

.username-preview {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  padding: var(--space-md);
  background: var(--color-bg);
  border: 2px solid var(--color-accent);
  margin-bottom: var(--space-md);
}

.username-confirmation-note {
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
  margin: 0;
}

.username-confirmation-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
}

.username-confirmation-actions .auth-button {
  flex: 0 1 auto;
  min-width: 150px;
}

.username-confirm-form {
  display: contents;
}

/* Account created success box */
.auth-success-box {
  background: #f0fff4;
  border: 1px solid #9ae6b4;
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.auth-success-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 var(--space-sm);
  color: var(--color-success);
}

.auth-success-message {
  margin: 0 0 var(--space-lg);
  color: var(--color-text);
  line-height: 1.5;
}

.account-number-display {
  background: var(--color-bg);
  border: 2px solid var(--color-success);
  padding: var(--space-lg);
  text-align: center;
  margin-bottom: var(--space-lg);
}

.account-number-label {
  display: block;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}

.account-number-value {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 2px;
}

/* Account details */
.account-details {
  margin-bottom: var(--space-lg);
}

.account-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
}

.account-detail-row:first-child {
  border-top: 1px solid var(--color-border);
}

.account-detail-label {
  color: var(--color-text-secondary);
}

.account-detail-value {
  font-weight: 500;
}

.account-detail-value.account-number {
  font-family: var(--font-mono);
  font-size: 0.95rem;
}

.account-actions {
  padding-top: var(--space-md);
}

/* Username section */
.username-section {
  padding: var(--space-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  margin: var(--space-lg) 0;
}

.username-section-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 var(--space-xs);
}

.username-section-desc {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-md);
  font-size: 0.9rem;
}

.username-form .form-group-inline {
  display: flex;
  gap: var(--space-sm);
}

.username-form .form-group-inline .form-input {
  flex: 1;
}

.username-form .form-group-inline .auth-button {
  width: auto;
  white-space: nowrap;
}

/* Auth info box */
.auth-info {
  padding: var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* Header auth links */
.header-auth-link {
  color: var(--color-text);
  font-size: 0.9rem;
}

.header-auth-link:hover {
  color: var(--color-link-hover);
  text-decoration: none;
}

/* ==========================================================================
   Shipping Summary / Address Display
   ========================================================================== */

.shipping-summary,
.shipping-confirmation {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.shipping-summary h3,
.shipping-confirmation h3 {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 var(--space-sm);
  color: var(--color-text-secondary);
}

.shipping-address-display {
  font-style: normal;
  line-height: 1.6;
  color: var(--color-text);
}

/* ==========================================================================
   Shipping Form
   ========================================================================== */

.shipping-form-section {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  padding: var(--space-lg);
}

.shipping-form-section h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 var(--space-lg);
}

.shipping-form .form-row {
  display: flex;
  gap: var(--space-md);
}

.shipping-form .form-group-half {
  flex: 1;
}

.shipping-form .form-group-quarter {
  flex: 0 0 25%;
  min-width: 100px;
}

.shipping-form .form-select {
  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='%23333' 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 8px center;
  background-size: 12px;
  padding-right: 32px;
}

.shipping-form .form-actions {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.shipping-form .shipping-submit {
  width: 100%;
  font-size: 1.1rem;
  padding: var(--space-md) var(--space-xl);
}

@media (max-width: 768px) {
  .shipping-form .form-row {
    flex-direction: column;
    gap: 0;
  }
  
  .shipping-form .form-group-half,
  .shipping-form .form-group-quarter {
    flex: none;
    width: 100%;
  }
}

/* Checkout Steps List */
.checkout-steps-list {
  margin: var(--space-md) 0;
  padding-left: var(--space-lg);
}

.checkout-steps-list li {
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

.order-info-list {
  margin: var(--space-md) 0 0;
  padding-left: var(--space-lg);
}

.order-info-list li {
  margin-bottom: var(--space-xs);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  padding: var(--space-lg) 0;
  margin-top: auto;
}

.site-footer p {
  margin: 0 0 var(--space-xs);
  color: var(--color-text-secondary);
}

.footer-legal {
  font-size: 0.85rem;
  color: var(--color-text-tertiary);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 768px) {
  .site-header .container {
    flex-wrap: wrap;
  }

  .header-search-form {
    order: 3;
    flex-basis: 100%;
    max-width: none;
    margin-top: var(--space-sm);
  }

  .product-row {
    flex-wrap: wrap;
  }

  .product-row-image {
    width: 80px;
    height: 80px;
  }

  .product-row-price {
    width: 100%;
    text-align: left;
    margin-top: var(--space-sm);
  }
}

@media (max-width: 480px) {
  .hero {
    padding: var(--space-lg) 0;
  }
  
  .hero h1 {
    font-size: 1.5rem;
  }
  
  .search-input-wrapper {
    flex-direction: column;
  }
  
  .search-button {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--color-border);
  }
  
  .tagline {
    display: none;
  }
}

/* ==========================================================================
   Shopping Mission Pages
   ========================================================================== */

.mission-section {
  padding: var(--space-lg) 0 var(--space-2xl);
}

.mission-header {
  margin-bottom: var(--space-xl);
}

.mission-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 var(--space-xs);
}

.mission-subtitle {
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Mission Layout - Two Column */
.mission-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-xl);
  align-items: start;
}

@media (max-width: 968px) {
  .mission-layout {
    grid-template-columns: 1fr;
  }
}

.mission-main {
  min-width: 0;
}

.mission-sidebar {
  position: sticky;
  top: var(--space-lg);
}

/* Mission Form */
.mission-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.mission-form .form-group {
  margin-bottom: 0;
}

.form-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.form-section-desc {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-md);
  font-size: 0.95rem;
  line-height: 1.5;
}

.mission-info {
  margin-top: var(--space-xl);
}

.mission-info h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.mission-steps {
  margin: 0 0 var(--space-md);
  padding-left: var(--space-lg);
}

.mission-steps li {
  margin-bottom: var(--space-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  font-size: 0.9rem;
}

.mission-note {
  margin: var(--space-md) 0 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-secondary);
  border-left: 3px solid var(--color-link);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

/* Input with prefix (dollar sign) */
.input-with-prefix {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border-dark);
  border-radius: 3px;
  overflow: hidden;
}

.input-with-prefix:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(99, 111, 233, 0.15);
}

.input-prefix {
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-tertiary);
  border-right: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-weight: 500;
}

.input-with-prefix .form-input {
  border: none;
  border-radius: 0;
}

.input-with-prefix .form-input:focus {
  box-shadow: none;
}

/* Bounty Options */
.bounty-description {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-md);
  font-size: 0.9rem;
}

.bounty-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

@media (max-width: 600px) {
  .bounty-options {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bounty-option {
  cursor: pointer;
}

.bounty-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bounty-option-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: 3px;
  transition: border-color 0.2s, background 0.2s;
}

.bounty-option input:checked + .bounty-option-content {
  border-color: var(--color-link);
  background: var(--color-bg-secondary);
}

.bounty-option:hover .bounty-option-content {
  border-color: var(--color-text-tertiary);
}

.bounty-percentage {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
}

.bounty-label {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin-top: var(--space-xs);
}

.bounty-option-custom .bounty-option-content {
  padding: var(--space-sm);
}

.bounty-custom-input {
  display: flex;
  align-items: center;
  margin-top: var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}

.bounty-custom-input .input-prefix {
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.85rem;
}

.bounty-custom-input .form-input {
  width: 60px;
  padding: var(--space-xs);
  border: none;
  font-size: 0.85rem;
}

.bounty-calculated {
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
}

/* Expiration Options */
.expiration-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.expiration-option {
  cursor: pointer;
}

.expiration-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.expiration-option-content {
  display: block;
  padding: var(--space-md);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: 3px;
  transition: border-color 0.2s, background 0.2s;
}

.expiration-option input:checked + .expiration-option-content {
  border-color: var(--color-link);
  background: var(--color-bg-secondary);
}

.expiration-option:hover .expiration-option-content {
  border-color: var(--color-text-tertiary);
}

.expiration-value {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
}

.expiration-desc {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-top: var(--space-xs);
}

/* Mission Summary */
.mission-summary {
  padding: var(--space-lg);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

.mission-summary h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.summary-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.summary-line {
  display: flex;
  justify-content: space-between;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}

.summary-line.summary-total {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-price);
  padding-top: var(--space-sm);
  margin-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.summary-note {
  margin: var(--space-md) 0 0;
  font-size: 0.85rem;
  color: var(--color-text-tertiary);
  line-height: 1.4;
}

/* Mission Submit Button */
.mission-submit {
  width: 100%;
  font-size: 1.1rem;
  padding: var(--space-md) var(--space-xl);
}

/* Mission Show Page */
.mission-description-box,
.mission-urls-box {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.mission-description-box h3,
.mission-urls-box h3 {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 var(--space-sm);
  color: var(--color-text-secondary);
}

.mission-description-content {
  color: var(--color-text);
  line-height: 1.6;
}

.mission-description-content p {
  margin: 0 0 var(--space-sm);
}

.mission-description-content p:last-child {
  margin-bottom: 0;
}

.mission-urls-list {
  margin: 0;
  padding-left: var(--space-lg);
}

.mission-urls-list li {
  margin-bottom: var(--space-xs);
}

.mission-urls-list a {
  word-break: break-all;
}

/* Pay Later Section */
.pay-later-section {
  padding: var(--space-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
  text-align: center;
}

.pay-later-section h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 var(--space-xs);
}

.pay-later-section > p {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-md);
}

.pay-later-button {
  display: inline-block;
  margin-bottom: var(--space-sm);
}

.pay-later-note {
  font-size: 0.85rem;
  color: var(--color-text-tertiary);
  margin: 0;
}

/* Mission Notices */
.mission-notice {
  padding: var(--space-xl);
  text-align: center;
  margin-top: var(--space-lg);
}

.mission-notice h2 {
  font-size: 1.5rem;
  margin: 0 0 var(--space-md);
}

.mission-notice p {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-md);
}

.mission-expired {
  background: #fff5f5;
  border: 1px solid #feb2b2;
}

.mission-expired h2 {
  color: var(--color-error);
}

/* Mission Status Page */
.mission-status-box,
.mission-complete-box,
.mission-closed-box {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  padding: var(--space-xl);
}

.status-header,
.complete-header,
.closed-header {
  text-align: center;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.status-header h1,
.complete-header h1,
.closed-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: var(--space-md) 0 var(--space-sm);
}

.status-header p,
.complete-header p,
.closed-header p {
  color: var(--color-text-secondary);
  margin: 0;
}

.mission-id {
  font-size: 0.9rem;
  color: var(--color-text-tertiary);
}

.mission-id code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* Status Badge */
.status-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 3px;
}

.status-badge-paid {
  background: #f0fff4;
  border: 1px solid #9ae6b4;
  color: var(--color-success);
}

.status-badge-progress {
  background: #f7fffe;
  border: 1px solid var(--color-link);
  color: var(--color-link);
}

/* Status Timeline */
.status-timeline {
  position: relative;
  padding-left: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.status-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-border);
}

.timeline-step {
  position: relative;
  padding-bottom: var(--space-lg);
}

.timeline-step:last-child {
  padding-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: calc(-1 * var(--space-xl) + 4px);
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
  border: 2px solid var(--color-bg-secondary);
}

.timeline-step.completed .timeline-marker {
  background: var(--color-success);
}

.timeline-step.active .timeline-marker {
  background: var(--color-link);
  animation: pulse 2s ease-in-out infinite;
}

.timeline-step.pending .timeline-marker {
  background: var(--color-border);
}

.timeline-content h3 {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 var(--space-xs);
  color: var(--color-text);
}

.timeline-step.pending .timeline-content h3 {
  color: var(--color-text-tertiary);
}

.timeline-content p {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin: 0;
}

.timeline-step.pending .timeline-content p {
  color: var(--color-text-tertiary);
}

/* Mission Details Summary */
.mission-details-summary {
  margin-bottom: var(--space-xl);
}

.mission-details-summary h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.detail-section {
  margin-bottom: var(--space-lg);
}

.detail-section:last-child {
  margin-bottom: 0;
}

.detail-section h3 {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 var(--space-sm);
  color: var(--color-text-secondary);
}

.detail-note {
  font-size: 0.85rem;
  color: var(--color-text-tertiary);
  margin: var(--space-xs) 0 0;
}

.payment-summary-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.payment-summary-lines .summary-line {
  padding: var(--space-xs) 0;
}

/* Complete Icon */
.complete-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-success);
  color: white;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 700;
}

/* Timeline Summary */
.timeline-summary {
  margin: 0;
  padding-left: var(--space-lg);
}

.timeline-summary li {
  margin-bottom: var(--space-xs);
  color: var(--color-text-secondary);
}

/* Refund Info */
.refund-info {
  padding: var(--space-md);
  background: #f0fff4;
  border: 1px solid #9ae6b4;
}

.refund-info h3 {
  color: var(--color-success);
}

/* Mission Actions */
.mission-actions {
  text-align: center;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.mission-actions .auth-button {
  display: inline-block;
  margin-bottom: var(--space-md);
}

.mission-contact-note {
  color: var(--color-text-secondary);
  margin: 0;
  font-size: 0.9rem;
}

/* Agent Notes */
.agent-notes-content {
  padding: var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  line-height: 1.6;
}

/* Payment Expiration Note */
.payment-expiration-note {
  margin-top: var(--space-sm);
  text-align: center;
}

.payment-expiration-note p {
  font-size: 0.85rem;
  color: var(--color-text-tertiary);
  margin: 0;
}

.expiration-label {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-xs);
}

/* Email Section */
.email-section {
  padding: var(--space-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  margin: var(--space-lg) 0;
}

.email-section-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 var(--space-xs);
}

.email-section-desc {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-md);
  font-size: 0.9rem;
}

.email-form .form-group-inline {
  display: flex;
  gap: var(--space-sm);
}

.email-form .form-group-inline .form-input {
  flex: 1;
}

.email-form .form-group-inline .auth-button {
  width: auto;
  white-space: nowrap;
}

/* Email Required Section in Mission Form */
.email-required-section {
  background: var(--color-bg-secondary);
  border-left: 3px solid var(--color-link);
  padding: var(--space-md);
}

.email-required-desc {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-md);
}

/* Account Orders List */
.account-orders {
  margin: var(--space-lg) 0;
  padding: var(--space-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.account-orders-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 var(--space-md);
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.order-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

.order-row-image {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.order-product-thumbnail {
  max-width: 70px;
  max-height: 70px;
  object-fit: contain;
}

.order-row-details {
  flex: 1;
  min-width: 0;
}

.order-row-title {
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}

.order-row-meta {
  display: flex;
  gap: var(--space-md);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}

.order-row-price {
  font-weight: 500;
}

.order-row-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.status-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-delivered {
  background: #dcfce7;
  color: #166534;
}

.status-shipping {
  background: #dbeafe;
  color: #1e40af;
}

.status-processing,
.status-paid {
  background: #fef3c7;
  color: #92400e;
}

.status-pending {
  background: #f3f4f6;
  color: #6b7280;
}

.status-expired,
.status-cancelled {
  background: #f3f4f6;
  color: #9ca3af;
}

.status-failed {
  background: #fee2e2;
  color: #991b1b;
}

.order-status-detail {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.order-track-link {
  font-size: 0.8rem;
  color: var(--color-link);
  text-decoration: none;
}

.order-track-link:hover {
  text-decoration: underline;
}

.order-row-action {
  flex-shrink: 0;
}

.order-view-link {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.85rem;
  color: var(--color-link);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: 3px;
}

.order-view-link:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-link);
}

@media (max-width: 600px) {
  .order-row {
    flex-direction: column;
    align-items: stretch;
  }

  .order-row-image {
    width: 60px;
    height: 60px;
    align-self: flex-start;
  }

  .order-row-action {
    align-self: flex-end;
  }
}

/* Pagination */
.pagination-nav {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

.pagination-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-primary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: all 0.15s ease;
}

.pagination-link:hover:not(.pagination-disabled) {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

.pagination-disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.5;
}

.pagination-info {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  min-width: 100px;
  text-align: center;
}

.pagination-prev::before {
  content: "\2190";
  margin-right: var(--space-xs);
}

.pagination-next::after {
  content: "\2192";
  margin-left: var(--space-xs);
}

@media (max-width: 600px) {
  .pagination {
    gap: var(--space-sm);
  }

  .pagination-link {
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.8125rem;
  }

  .pagination-info {
    font-size: 0.8125rem;
    min-width: auto;
  }
}

/* Account Missions List */
.account-missions,
.account-missions-empty {
  margin: var(--space-lg) 0;
  padding: var(--space-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.account-missions-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 var(--space-md);
}

.account-missions-empty h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 var(--space-sm);
}

.account-missions-empty p {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-md);
}

.missions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.mission-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

.mission-row-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 100px;
}

.mission-row-status {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 2px var(--space-sm);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mission-status-pending {
  background: var(--color-bg-secondary);
  color: var(--color-warning);
  border: 1px solid var(--color-border);
}

.mission-status-paid {
  background: #f0fff4;
  color: var(--color-success);
  border: 1px solid #9ae6b4;
}

.mission-status-in_progress {
  background: #f7fffe;
  color: var(--color-link);
  border: 1px solid var(--color-link);
}

.mission-status-completed {
  background: #f0fff4;
  color: var(--color-success);
  border: 1px solid #9ae6b4;
}

.mission-status-expired,
.mission-status-cancelled,
.mission-status-refunded {
  background: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
  border: 1px solid var(--color-border);
}

.mission-row-date {
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
}

.mission-row-description {
  flex: 1;
  font-size: 0.9rem;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mission-row-amount {
  font-weight: 500;
  color: var(--color-price);
  min-width: 80px;
  text-align: right;
}

.mission-row-action {
  min-width: 50px;
}

.mission-view-link {
  font-size: 0.9rem;
}

.mission-new-button {
  display: inline-block;
}

@media (max-width: 600px) {
  .mission-row {
    flex-wrap: wrap;
  }

  .mission-row-info {
    flex-direction: row;
    min-width: auto;
    width: 100%;
  }

  .mission-row-description {
    width: 100%;
    order: 3;
  }

  .mission-row-amount,
  .mission-row-action {
    min-width: auto;
  }
}

/* ========================================
   Conversational Shopping Request Flow
   ======================================== */

/* Step 1: Landing page */
.mission-landing {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: var(--space-2xl) var(--space-lg);
}

.mission-hero {
  max-width: 600px;
  text-align: center;
}

.mascot {
  position: relative;
  height: 180px;
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mascot-image {
  height: auto;
  position: absolute;
  bottom: 0;
}

.mascot-default {
  width: 135px;
  visibility: visible;
  transition: visibility 0s;
  transition-delay: 0s;
}

.mascot-hover {
  width: 180px;
  visibility: hidden;
  transition: visibility 0s;
  transition-delay: 0s;
  cursor: pointer;
}

.mascot:hover .mascot-default {
  visibility: hidden;
  transition-delay: 200ms;
}

.mascot:hover .mascot-hover {
  visibility: visible;
  transition-delay: 200ms;
}

/* Details page mascot - taller for pointing pose */
.mascot-details {
  height: 200px;
}

.mascot-details .mascot-default {
  width: 150px;
}

.mascot-details .mascot-hover {
  width: 190px;
}

.mascot-sidebar {
  margin-top: var(--space-lg);
}

.mascot-sidebar .mascot-hover {
  transform: translateX(25px);
}

.mission-hero h1 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: var(--space-xl);
  color: var(--color-text);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .mission-hero h1 {
    white-space: normal;
  }
}

@media (max-width: 500px) {
  .mission-hero h1 {
    font-size: 1.4rem;
  }
}

.mission-initial-form {
  width: 100%;
}

.mission-input-wrapper {
  margin-bottom: var(--space-lg);
}

.mission-input {
  width: 100%;
  padding: var(--space-lg);
  font-size: 1.1rem;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  transition: border-color 0.2s;
}

.mission-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.mission-input::placeholder {
  color: #aaa;
}

.mission-actions {
  margin-bottom: var(--space-xl);
}

.mission-submit-btn {
  width: 100%;
  padding: var(--space-md) var(--space-xl);
  font-size: 1.1rem;
}

.mission-note {
  color: var(--color-text-light);
  font-size: 0.95rem;
  margin-bottom: var(--space-lg);
}

.mission-instant {
  color: var(--color-text-light);
  font-size: 0.9rem;
}

.mission-link {
  color: var(--color-link);
  text-decoration: none;
}

.mission-link:hover {
  text-decoration: underline;
}

/* How it works section */
.how-it-works {
  padding: var(--space-2xl) 0;
  background: var(--color-bg-secondary);
}

.how-it-works-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: var(--space-xl);
  color: var(--color-text);
}

.how-it-works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  max-width: 900px;
  margin: 0 auto;
}

.how-it-works-step {
  text-align: center;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #636fe9;
  color: white;
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
}

.how-it-works-step h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

.how-it-works-step p {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 640px) {
  .how-it-works-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* Vision page */
.vision-hero {
  padding: var(--space-2xl) 0;
  text-align: center;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: white;
}

.vision-hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
  line-height: 1.2;
}

.vision-tagline {
  font-size: 1.25rem;
  opacity: 0.9;
  margin: 0;
}

.vision-section {
  padding: var(--space-2xl) 0;
}

.vision-section-alt {
  background: var(--color-bg-secondary);
}

.vision-section h2 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: var(--space-lg);
  text-align: center;
}

.vision-lead {
  font-size: 1.2rem;
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-lg);
}

.vision-section > .container > p:last-child {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  color: var(--color-text-secondary);
}

/* Chat comparison */
.vision-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  max-width: 900px;
  margin: 0 auto;
}

.vision-chat {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  flex: 1;
}

.vision-chat h3 {
  padding: var(--space-md) var(--space-lg);
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.vision-chat-before h3 {
  background: #fee2e2;
  color: #991b1b;
}

.vision-chat-after h3 {
  background: #dcfce7;
  color: #166534;
}

.vision-chat-column {
  display: flex;
  flex-direction: column;
}

.vision-comparison {
  align-items: stretch;
}

.vision-mascot {
  text-align: center;
  padding-top: var(--space-xl);
  height: 200px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.vision-mascot-image {
  max-width: 180px;
  height: auto;
}

.vision-mascot-centered {
  text-align: center;
  padding: var(--space-2xl) 0 var(--space-lg);
}

.vision-mascot-centered .vision-mascot-image {
  max-width: 120px;
}

.chat-messages {
  padding: var(--space-md);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.chat-message {
  padding: var(--space-sm) var(--space-md);
  border-radius: 12px;
  max-width: 85%;
}

.chat-message p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

.chat-role {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.chat-user {
  background: var(--color-bg-secondary);
  align-self: flex-end;
}

.chat-user .chat-role {
  color: var(--color-text-secondary);
}

.chat-assistant {
  background: #f0f9ff;
  align-self: flex-start;
}

.chat-assistant .chat-role {
  color: var(--color-link);
}

.chat-approve {
  font-style: italic;
  color: var(--color-success);
}

/* Vision points grid */
.vision-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  max-width: 1000px;
  margin: 0 auto;
}

.vision-point {
  padding: var(--space-lg);
  background: var(--color-bg);
  border-radius: 12px;
  border: 1px solid var(--color-border);
}

.vision-point h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

.vision-point p {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Vision CTA */
.vision-cta {
  padding: var(--space-2xl) 0;
  text-align: center;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: white;
}

.vision-cta h2 {
  font-size: 1.75rem;
  margin-bottom: var(--space-sm);
}

.vision-cta p {
  opacity: 0.9;
  margin-bottom: var(--space-lg);
}

.vision-cta .auth-button {
  background: white;
  color: #1a1a2e;
  width: auto;
  padding: var(--space-md) var(--space-xl);
}

.vision-cta .auth-button:hover {
  background: #f0f0f0;
}

@media (max-width: 768px) {
  .vision-hero h1 {
    font-size: 1.75rem;
  }

  .vision-comparison {
    grid-template-columns: 1fr;
  }
}

/* Step 2: Details form */
.container-narrow {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.mission-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.mission-header h1 {
  font-size: 1.75rem;
  margin-bottom: var(--space-sm);
}

.mission-subtitle {
  color: var(--color-text-light);
}

.email-section {
  background: var(--color-bg-secondary);
  padding: var(--space-lg);
  border-radius: 8px;
  margin-top: var(--space-lg);
}

.mission-info-box {
  background: var(--color-bg-secondary);
  padding: var(--space-lg);
  border-radius: 8px;
  margin-top: var(--space-xl);
}

.mission-info-box h3 {
  font-size: 1rem;
  margin-bottom: var(--space-md);
}

.mission-steps-list {
  margin: 0;
  padding-left: var(--space-lg);
  color: var(--color-text-light);
}

.mission-steps-list li {
  margin-bottom: var(--space-sm);
}

/* Step 3: Confirmation */
.mission-confirmation {
  text-align: center;
  padding: var(--space-2xl) 0;
}

.confirmation-icon {
  width: 80px;
  height: 80px;
  background: var(--color-success);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin: 0 auto var(--space-xl);
}

.mission-confirmation h1 {
  font-size: 2rem;
  margin-bottom: var(--space-md);
}

.confirmation-message {
  font-size: 1.1rem;
  margin-bottom: var(--space-sm);
}

.confirmation-email {
  color: var(--color-text-light);
  margin-bottom: var(--space-xl);
}

.confirmation-email strong {
  color: var(--color-text);
}

.request-summary {
  background: var(--color-bg-secondary);
  padding: var(--space-lg);
  border-radius: 8px;
  text-align: left;
  margin-bottom: var(--space-xl);
}

.request-summary h3 {
  font-size: 0.9rem;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}

.request-description {
  color: var(--color-text);
  white-space: pre-wrap;
  margin-bottom: var(--space-sm);
}

.request-urls {
  color: var(--color-text-light);
  font-size: 0.9rem;
}

.confirmation-cta {
  background: var(--color-bg-secondary);
  padding: var(--space-lg);
  border-radius: 8px;
  margin-bottom: var(--space-xl);
}

.confirmation-cta p {
  margin: 0;
  color: var(--color-text-light);
}

.confirmation-cta p:first-child {
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.confirmation-note {
  color: var(--color-text-light);
  font-size: 0.9rem;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .mission-landing {
    min-height: auto;
    padding: var(--space-xl) var(--space-md);
  }

  .mission-hero h1 {
    font-size: 1.5rem;
  }

  .mission-input {
    font-size: 1rem;
    padding: var(--space-md);
  }

  .container-narrow {
    padding: 0 var(--space-md);
  }
}

/* Auth page mascot */
.auth-mascot {
  text-align: center;
  margin-top: auto;
  padding-top: var(--space-xl);
}

.auth-mascot-image {
  max-width: 420px;
  height: auto;
  display: block;
  margin: 0 auto;
  vertical-align: bottom;
}

@media (max-width: 600px) {
  .auth-mascot-image {
    max-width: 280px;
  }
}

/* ========================================
   Zeboot Launch Party Page
   ======================================== */

.zeboot-landing {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: var(--space-2xl) var(--space-lg);
}

.zeboot-hero {
  max-width: 500px;
  text-align: center;
}

.zeboot-hero .mascot {
  margin-bottom: var(--space-lg);
}

.zeboot-hero .mascot-image {
  width: 150px;
  height: auto;
}

.zeboot-hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

.zeboot-subtitle {
  font-size: 1.1rem;
  color: var(--color-text-light);
  margin-bottom: var(--space-xl);
  line-height: 1.6;
}

.zeboot-subtitle strong {
  color: var(--color-accent);
}

.zeboot-form {
  text-align: left;
  background: var(--color-bg-secondary);
  padding: var(--space-xl);
  border-radius: 12px;
  margin-bottom: var(--space-lg);
}

.zeboot-form .form-group {
  margin-bottom: var(--space-md);
}

.zeboot-form .form-group:last-child {
  margin-bottom: 0;
  margin-top: var(--space-lg);
}

.zeboot-or {
  text-align: center;
  position: relative;
  margin: var(--space-lg) 0;
}

.zeboot-or span {
  background: var(--color-bg-secondary);
  padding: 0 var(--space-md);
  color: var(--color-text-light);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.zeboot-or::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
  z-index: -1;
}

.zeboot-fine-print {
  font-size: 0.85rem;
  color: var(--color-text-light);
}

@media (max-width: 600px) {
  .zeboot-landing {
    min-height: auto;
    padding: var(--space-xl) var(--space-md);
  }

  .zeboot-hero h1 {
    font-size: 1.8rem;
  }

  .zeboot-form {
    padding: var(--space-lg);
  }
}