/* Dark Lab Design System - Design Tokens */
:root {
  /* Core */
  --bg: #151D2F;            /* deep navy */
  --bg-2: #0F1626;          /* darker navy for gradient */
  --surface: #2D3849;       /* card */
  --surface-2: #334158;     /* elevated card */
  --border: rgba(255,255,255,0.10);

  /* Text */
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.72);
  --muted-2: rgba(255,255,255,0.50);

  /* Accent */
  --accent: #F87D26;        /* orange */
  --accent-2: #FF9A55;      /* hover */
  --accent-ink: rgba(0,0,0,0.85);

  /* Status */
  --danger: #EF4444;
  --success: #22C55E;
  --warning: #F59E0B;

  /* Shape */
  --radius-card: 28px;
  --radius-control: 22px;  /* pill-ish */
  --radius-tight: 16px;

  /* Shadows */
  --shadow-soft: 0 18px 45px rgba(0,0,0,0.40);
  --shadow-card: 0 10px 28px rgba(0,0,0,0.32);
}

/* Global Base Styles */
html, body {
  margin: 0;
  color: var(--text) !important;
  background: radial-gradient(1200px 800px at 20% -10%, rgba(255,255,255,0.08), transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg-2));
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji" !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { 
  color: inherit; 
}

/* Surfaces */
.ui-surface {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.ui-surface-2 {
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.ui-muted { 
  color: var(--muted); 
}

.ui-muted-2 { 
  color: var(--muted-2); 
}

.ui-shadow { 
  box-shadow: var(--shadow-soft); 
}

/* Buttons */
.ui-btn {
  border-radius: var(--radius-control);
  padding: 16px 18px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform 120ms ease, opacity 120ms ease, background 140ms ease, box-shadow 140ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
}

.ui-btn:active { 
  transform: translateY(1px); 
}

.ui-btn:disabled { 
  opacity: 0.45; 
  cursor: not-allowed; 
}

.ui-btn-primary {
  background: var(--accent);
  color: rgba(255,255,255,0.96);
  box-shadow: 0 14px 32px rgba(248,125,38,0.25);
}

.ui-btn-primary:hover { 
  background: var(--accent-2); 
}

.ui-btn-secondary {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  color: var(--text);
}

.ui-btn-secondary:hover { 
  background: rgba(255,255,255,0.10); 
}

.ui-btn-danger {
  background: rgba(239,68,68,0.92);
  color: rgba(255,255,255,0.96);
}

.ui-btn-danger:hover {
  background: #DC2626;
}

/* Inputs / Textareas */
.ui-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-tight);
  padding: 12px 12px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.ui-input::placeholder { 
  color: var(--muted-2); 
}

.ui-input:focus {
  border-color: rgba(248,125,38,0.65);
  box-shadow: 0 0 0 3px rgba(248,125,38,0.22);
}

.ui-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Camera Frame */
.ui-camera-frame {
  background: #0B0F18;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Clickable cards (recommendations, list items) */
.ui-card-clickable {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform 120ms ease, background 140ms ease;
  cursor: pointer;
}

.ui-card-clickable:hover { 
  background: var(--surface-2); 
}

.ui-card-clickable:active { 
  transform: translateY(1px); 
}

/* Toasts */
.ui-toast-error { 
  border-left: 3px solid var(--danger); 
}

.ui-toast-success { 
  border-left: 3px solid var(--success); 
}

.ui-toast-warning {
  border-left: 3px solid var(--warning);
}

/* Дополнительные стили для GastroMatch V3 */

/* Editable title input - выглядит как заголовок, но редактируемый */
.editable-title-input {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.5;
    padding: 0.75rem 1rem;
    background-color: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-tight);
    transition: all 0.2s ease;
}

.editable-title-input:focus {
    background-color: rgba(255,255,255,0.08);
    border-color: rgba(248,125,38,0.65);
    box-shadow: 0 0 0 3px rgba(248,125,38,0.22);
}

.editable-title-input::placeholder {
    color: var(--muted-2);
    font-weight: 500;
}

/* Плавные переходы для кнопок */
button {
    transition: all 0.2s ease-in-out;
}

button:active {
    transform: scale(0.98);
}

/* Стилизация скроллбара для результата */
#resultContent {
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.6;
}

#resultContent::-webkit-scrollbar {
    width: 6px;
}

#resultContent::-webkit-scrollbar-track {
    background: var(--surface-2);
    border-radius: var(--radius);
}

#resultContent::-webkit-scrollbar-thumb {
    background: var(--muted-2);
    border-radius: var(--radius-tight);
}

#resultContent::-webkit-scrollbar-thumb:hover {
    background: var(--muted);
}

/* Анимация появления результата */
#resultContainer {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Стили для видео элемента */
#videoElement {
    transform: scaleX(1); /* Прямое отображение - текст читается слева направо */
}

/* Вертикальная камера */
#video-container {
    width: 100%;
    height: 75vh;
    min-height: 500px;
    max-height: 600px;
}

#video-container .relative {
    width: 100%;
    height: 100%;
}

#videoElement {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Адаптивность для очень маленьких экранов */
@media (max-width: 320px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Стили для кнопок-блюд из меню (удобно для нажатия пальцем на iPhone) */
#menuDishesList button {
    min-height: 80px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(248,125,38,0.3);
    user-select: none;
}

#menuDishesList button:active {
    transform: scale(0.98);
    background-color: var(--surface-2);
}

/* Стили для контейнера детального анализа */
#detailAnalysisContainer {
    animation: fadeIn 0.3s ease-in;
}

#detailAnalysisResult {
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Стили для карточки детального анализа */
.detail-analysis-card {
    font-size: 1.125rem;
    line-height: 1.75rem;
    padding: 1rem;
    background-color: #374151;
    border-radius: 0.5rem;
    word-wrap: break-word;
}

.detail-analysis-card strong {
    font-weight: 700;
    color: #ffffff;
}

.detail-analysis-card br {
    margin-bottom: 0.5rem;
}

/* Стили для интерактивного рейтинга */
#ratingInput[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}

#ratingInput[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#ratingInput[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#ratingStars {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.rating-star {
    font-size: 2rem;
    cursor: pointer;
    transition: transform 0.2s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.rating-star:hover {
    transform: scale(1.2);
}

.rating-star.active {
    color: #fbbf24;
}

.rating-star.inactive {
    color: #6b7280;
}

/* Стили для кнопок рейтинга пользователя */
.rating-number-btn {
    min-width: 48px;
    min-height: 48px;
    font-size: 1.125rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(248,125,38,0.3);
    user-select: none;
}

.rating-number-btn:active {
    transform: scale(0.95);
}

.rating-number-btn:hover {
    transform: scale(1.05);
}

/* Стили для карточек истории в стиле iOS */
.history-card {
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.history-card:active {
    transform: scale(0.98);
}

.history-card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.history-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    flex: 1;
    line-height: 1.4;
}

.history-card-rating {
    font-size: 0.875rem;
    font-weight: 600;
    color: #f59e0b;
    white-space: nowrap;
    flex-shrink: 0;
}

.history-card-analysis {
    font-size: 0.9375rem;
    color: #4b5563;
    line-height: 1.5;
    margin-top: 4px;
    word-wrap: break-word;
}

/* Стили для изображения в карточке истории */
.history-card-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Стили для кнопки удаления */
.delete-history-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
}

.delete-history-btn:hover {
    opacity: 0.8;
}

/* Стили для карты Leaflet */
#mapid {
    z-index: 1;
}

/* Темная тема для карты (опционально) */
.leaflet-container {
    background: var(--surface);
}

/* Tabs */
.ui-tab {
  color: var(--muted-2);
  border-top: 2px solid transparent;
}

.ui-tab-active {
  color: var(--accent);
  border-top-color: var(--accent);
}

/* === HERO FIXED-ONLY (COMMIT 1) === */
.hero{
  position:fixed;
  inset:0;
  height:100vh;
  overflow:hidden;
  z-index:2000;
  background:
    radial-gradient(900px 700px at 50% 18%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(1200px 900px at 80% 70%, rgba(248,115,22,0.06), transparent 70%),
    linear-gradient(180deg, #0D0D0D, #070707);
  color: rgba(255,255,255,0.92);
}

.hero::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0.06;
  mix-blend-mode:overlay;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 3px
  );
}

.hero-header{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
  backdrop-filter: blur(10px);
}

.hero-brand{
  font-family: Inter, ui-sans-serif, system-ui;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#F87316;
  opacity:0.92;
}

.hero-about{
  font-family: Inter, ui-sans-serif, system-ui;
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color: rgba(255,255,255,0.70);
  background:transparent;
  border:0;
}

.hero-content{
  height: calc(100vh - 60px);
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 20px 28px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.hero-center{
  max-width: 720px;
  margin: 34px auto 22px;
  text-align:center;
}

@media (min-height: 800px){
  .hero-center{
    margin-top: 56px;
  }
}

.hero-wordmark{
  font-family: "Playfair Display", serif;
  font-size: clamp(44px, 7vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-align:center;
}

.hero-subtitle{
  margin-top: 10px;
  font-family: Inter, ui-sans-serif, system-ui;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(160,170,185,0.80);
  text-align:center;
}

.hero-actions{
  max-width: 520px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding-bottom: 18px;
}

.hero-card{
  text-align:left;
  width:100%;
  border-radius: 34px;
  padding: 22px 22px;
  min-height: clamp(200px, 28vh, 320px);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(248,115,22,0.30);
  box-shadow: 0 10px 40px rgba(0,0,0,0.65);
  transition: box-shadow 500ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(248,115,22,0.25),
              0 12px 50px rgba(248,115,22,0.08),
              0 18px 60px rgba(0,0,0,0.75);
}

.hero-emblem{
  position:relative;
  width:54px;
  height:54px;
  margin-bottom:16px;
}

.hero-emblem-ring{
  position:absolute;
  inset:0;
  border-radius:999px;
  border:1px solid rgba(248,115,22,0.32);
  box-shadow: 0 0 0 1px rgba(248,115,22,0.12) inset;
}

.hero-emblem-icon{
  position:absolute;
  inset:0;
  margin:auto;
  width:24px;
  height:24px;
  stroke: rgba(255,255,255,0.78);
}

.hero-card:hover .hero-emblem-ring{
  border-color: rgba(248,115,22,0.46);
  box-shadow:
    0 0 0 1px rgba(248,115,22,0.18) inset,
    0 14px 40px rgba(248,115,22,0.10);
}

.hero-card:hover .hero-emblem-icon{
  stroke: rgba(255,255,255,0.90);
}

.hero-card-title{
  font-family: Inter, ui-sans-serif, system-ui;
  font-size: 18px;
  font-weight: 600;
}

.hero-card-micro{
  margin-top: 8px;
  font-family: Inter, ui-sans-serif, system-ui;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(160,170,185,0.72);
}

@media (min-width: 860px){
  .hero-actions{
    max-width: 980px;
    flex-direction:row;
    gap:24px;
  }
  .hero-card{
    min-height: 360px;
    padding: 26px 26px;
  }
}

/* App interaction disabled when Hero is visible */
body.hero-active #mainContent,
body.hero-active #historyScreen,
body.hero-active #profileScreen,
body.hero-active #nearbyScreen {
  pointer-events: none;
  user-select: none;
}

/* === END HERO FIXED-ONLY === */

```css
/* ============================================================================
   HOME SCREEN OVERRIDE - EXACT REFERENCE MATCH
   ============================================================================ */

#mainContent[data-camera-mode="home"] {
  background: #0D0D0D;
  position: relative;
  overflow: hidden;
}

/* Subtle warm ambient glow */
#mainContent[data-camera-mode="home"]::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background: radial-gradient(ellipse at center, rgba(255, 140, 60, 0.03) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Subtle grain texture */
#mainContent[data-camera-mode="home"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.95'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
}

/* Hide camera preview on Home */
#mainContent[data-camera-mode="home"] #video-container {
  display: none !important;
}

/* Brand - top left */
#mainContent[data-camera-mode="home"] #brandName {
  position: absolute;
  top: 24px;
  left: 28px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: #F5F1ED;
  z-index: 100;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* About - top right */
#mainContent[data-camera-mode="home"] #aboutBtn {
  position: absolute;
  top: 26px;
  right: 28px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: rgba(245, 241, 237, 0.65);
  background: transparent;
  border: none;
  padding: 0;
  z-index: 100;
  cursor: pointer;
  transition: color 0.3s ease;
}

#mainContent[data-camera-mode="home"] #aboutBtn:hover {
  color: rgba(245, 241, 237, 0.9);
}

/* Slogan - large serif left-aligned */
#mainContent[data-camera-mode="home"] #tagline {
  position: absolute;
  top: 120px;
  left: 32px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 42px;
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 1.2;
  color: #F5F1ED;
  z-index: 100;
  max-width: 320px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* Controls container - vertical stack */
#mainContent[data-camera-mode="home"] #controlsContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  z-index: 50;
  margin-top: 40px;
}

/* Portal buttons - reset card styling */
#mainContent[data-camera-mode="home"] #analyzeMenuBtn,
#mainContent[data-camera-mode="home"] #analyzeDishBtn {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  border-radius: 0;
  padding: 0;
  width: 280px;
  min-height: 200px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Portal light window - diffused vertical glow */
#mainContent[data-camera-mode="home"] #analyzeMenuBtn::before,
#mainContent[data-camera-mode="home"] #analyzeDishBtn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 240px;
  background: radial-gradient(ellipse at center, rgba(255, 140, 60, 0.08) 0%, rgba(255, 180, 100, 0.04) 40%, transparent 70%);
  filter: blur(30px);
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 0.4s ease, filter 0.4s ease;
}

/* Glowing circle emblem */
#mainContent[data-camera-mode="home"] #analyzeMenuBtn::after,
#mainContent[data-camera-mode="home"] #analyzeDishBtn::after {
  content: '';
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255, 160, 80, 0.15) 0%, rgba(255, 140, 60, 0.08) 50%, transparent 100%);
  box-shadow: 
    0 0 20px rgba(255, 140, 60, 0.25),
    0 0 40px rgba(255, 140, 60, 0.12),
    inset 0 0 20px rgba(255, 180, 100, 0.1);
  pointer-events: none;
  transition: all 0.4s ease;
}

/* Navigator emblem - 4-point star using gradients */
#mainContent[data-camera-mode="home"] #analyzeMenuBtn::after {
  background: 
    radial-gradient(circle at center, #F5F1ED 0%, #F5F1ED 8%, transparent 8%),
    conic-gradient(from 0deg at 50% 50%, 
      transparent 0deg, transparent 40deg,
      rgba(245, 241, 237, 0.9) 40deg, rgba(245, 241, 237, 0.9) 50deg,
      transparent 50deg, transparent 130deg,
      rgba(245, 241, 237, 0.9) 130deg, rgba(245, 241, 237, 0.9) 140deg,
      transparent 140deg, transparent 220deg,
      rgba(245, 241, 237, 0.9) 220deg, rgba(245, 241, 237, 0.9) 230deg,
      transparent 230deg, transparent 310deg,
      rgba(245, 241, 237, 0.9) 310deg, rgba(245, 241, 237, 0.9) 320deg,
      transparent 320deg, transparent 360deg
    ),
    radial-gradient(circle at center, rgba(255, 140, 60, 0.2) 0%, rgba(255, 140, 60, 0.1) 50%, transparent 100%);
  box-shadow: 
    0 0 24px rgba(255, 140, 60, 0.3),
    0 0 48px rgba(255, 140, 60, 0.15),
    inset 0 0 16px rgba(255, 180, 100, 0.12);
}

/* Collection emblem - infinity/loop symbol using gradients */
#mainContent[data-camera-mode="home"] #analyzeDishBtn::after {
  background: 
    radial-gradient(ellipse 16px 12px at 35% 50%, #F5F1ED 0%, #F5F1ED 100%, transparent 100%),
    radial-gradient(ellipse 16px 12px at 65% 50%, #F5F1ED 0%, #F5F1ED 100%, transparent 100%),
    radial-gradient(ellipse 10px 8px at 35% 50%, #0D0D0D 0%, #0D0D0D 100%, transparent 100%),
    radial-gradient(ellipse 10px 8px at 65% 50%, #0D0D0D 0%, #0D0D0D 100%, transparent 100%),
    radial-gradient(circle at center, rgba(255, 140, 60, 0.2) 0%, rgba(255, 140, 60, 0.1) 50%, transparent 100%);
  box-shadow: 
    0 0 24px rgba(255, 140, 60, 0.3),
    0 0 48px rgba(255, 140, 60, 0.15),
    inset 0 0 16px rgba(255, 180, 100, 0.12);
}

/* Portal titles */
#mainContent[data-camera-mode="home"] #analyzeMenuBtn h2,
#mainContent[data-camera-mode="home"] #analyzeDishBtn h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: #F5F1ED;
  margin: 100px 0 12px 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 10;
}

/* Portal descriptions */
#mainContent[data-camera-mode="home"] #analyzeMenuBtn p,
#mainContent[data-camera-mode="home"] #analyzeDishBtn p {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.2px;
  color: rgba(245, 241, 237, 0.6);
  max-width: 240px;
  text-align: center;
  margin: 0;
  position: relative;
  z-index: 10;
}

/* Hover state - subtle warmth increase */
#mainContent[data-camera-mode="home"] #analyzeMenuBtn:hover::before,
#mainContent[data-camera-mode="home"] #analyzeDishBtn:hover::before {
  opacity: 0.9;
  filter: blur(28px);
}

#mainContent[data-camera-mode="home"] #analyzeMenuBtn:hover::after,
#mainContent[data-camera-mode="home"] #analyzeDishBtn:hover::after {
  box-shadow: 
    0 0 28px rgba(255, 140, 60, 0.35),
    0 0 56px rgba(255, 140, 60, 0.18),
    inset 0 0 24px rgba(255, 180, 100, 0.15);
}

/* Active/press state */
#mainContent[data-camera-mode="home"] #analyzeMenuBtn:active,
#mainContent[data-camera-mode="home"] #analyzeDishBtn:active {
  transform: scale(0.98);
}

/* Hide other UI elements on home screen */
#mainContent[data-camera-mode="home"] #captureBtn,
#mainContent[data-camera-mode="home"] #switchCameraBtn,
#mainContent[data-camera-mode="home"] #backBtn,
#mainContent[data-camera-mode="home"] #flashBtn {
  display: none !important;
}
/* DEPLOY_MARKER_HOME_ENTRANCE_002 */
/* === HOME ENTRANCE SPACE (VARIANT A — HARD ISOLATION) — FINAL OVERRIDE === */
html:has(#mainContent[data-camera-mode="home"]),
body:has(#mainContent[data-camera-mode="home"]) {
  background: #0D0D0D !important;
}

#mainContent[data-camera-mode="home"] {
  background: #0D0D0D !important;
  color: rgba(235, 232, 226, 0.9);
}

#mainContent[data-camera-mode="home"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 520px at 18% -10%, rgba(170, 110, 70, 0.14), transparent 62%),
    radial-gradient(980px 600px at 85% 18%, rgba(140, 120, 110, 0.08), transparent 68%),
    #0D0D0D;
  pointer-events: none;
}

#mainContent[data-camera-mode="home"]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* Hard-isolate legacy UI styling only inside home-mode */
#mainContent[data-camera-mode="home"] * {
  box-shadow: none !important;
}

#mainContent[data-camera-mode="home"] [class*="ui-"] {
  border-color: transparent !important;
  background: transparent !important;
}

#mainContent[data-camera-mode="home"] #video-container {
  display: none !important;
}

/* Header composition */
#mainContent[data-camera-mode="home"] header,
#mainContent[data-camera-mode="home"] header.text-center {
  text-align: left !important;
  margin-bottom: 16px !important;
}

#mainContent[data-camera-mode="home"] header {
  position: relative;
}

#mainContent[data-camera-mode="home"] header h1[data-i18n="app_title"] {
  color: transparent !important;
  font-family: "Playfair Display", "Cormorant", "Georgia", "Times New Roman", serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  margin: 0 0 18px 0 !important;
}

#mainContent[data-camera-mode="home"] header h1[data-i18n="app_title"]::after {
  content: "GastroMatch.Club";
  display: block;
  font-size: 22px;
  font-weight: 500;
  color: rgba(235, 232, 226, 0.9);
}

#mainContent[data-camera-mode="home"] #subtitle {
  display: none !important;
}

#mainContent[data-camera-mode="home"] #backToHeroBtn {
  position: absolute;
  top: 0;
  right: 0;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.68) !important;
}

#mainContent[data-camera-mode="home"] #backToHeroBtn svg,
#mainContent[data-camera-mode="home"] #backToHeroBtn span {
  display: none !important;
}

#mainContent[data-camera-mode="home"] #backToHeroBtn::after {
  content: "About";
}

#mainContent[data-camera-mode="home"] #backToHeroBtn:hover {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Slogan */
#mainContent[data-camera-mode="home"] #homeSlogan {
  display: block !important;
  margin: 0 0 46px 0 !important;
  font-family: "Playfair Display", "Cormorant", "Georgia", "Times New Roman", serif !important;
  font-size: 34px !important;
  font-weight: 300 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.35 !important;
  color: rgba(240, 236, 228, 0.9) !important;
}

/* Portals */
#mainContent[data-camera-mode="home"] #controlsContainer {
  display: flex !important;
  flex-direction: column !important;
  gap: 38px !important;
}

#mainContent[data-camera-mode="home"] #controlsContainer > button {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 12px !important;
  min-height: 240px !important;
  padding: 38px 26px 42px !important;
  border-radius: 44px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  backdrop-filter: blur(12px) !important;
  overflow: hidden !important;
}

#mainContent[data-camera-mode="home"] #controlsContainer > button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(140% 140% at 82% 50%, rgba(255, 140, 80, 0.22), rgba(255, 140, 80, 0.06) 55%, transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}

#mainContent[data-camera-mode="home"] #controlsContainer > button::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 38px;
  background: rgba(0, 0, 0, 0.12);
  opacity: 0.25;
  pointer-events: none;
}

/* Remove inline SVGs (no UI icons) */
#mainContent[data-camera-mode="home"] #controlsContainer > button svg {
  display: none !important;
}

/* Portal typography */
#mainContent[data-camera-mode="home"] #controlsContainer > button span[data-i18n] {
  font-family: "Playfair Display", "Cormorant", "Georgia", "Times New Roman", serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: rgba(242, 238, 232, 0.92) !important;
}

#mainContent[data-camera-mode="home"] #controlsContainer > button .home-action-desc {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  color: rgba(210, 205, 198, 0.7) !important;
}

/* Circular glowing icons via pseudo-elements */
#mainContent[data-camera-mode="home"] #controlsContainer > button .home-action-desc {
  position: relative;
  padding-top: 156px;
}

#mainContent[data-camera-mode="home"] #controlsContainer > button .home-action-desc::before {
  content: "";
  position: absolute;
  top: -8px;
  right: -4px;
  width: 132px;
  height: 132px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 200, 160, 0.75), rgba(255, 145, 88, 0.6) 55%, rgba(255, 120, 70, 0.35) 72%, rgba(255, 120, 70, 0) 100%);
  box-shadow:
    0 0 26px rgba(255, 145, 88, 0.18),
    inset 0 0 22px rgba(255, 210, 175, 0.25);
  opacity: 0.9;
  pointer-events: none;
}

#mainContent[data-camera-mode="home"] #controlsContainer > button .home-action-desc::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 20px;
  width: 88px;
  height: 88px;
  background-color: rgba(255, 235, 220, 0.88);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  pointer-events: none;
}

#mainContent[data-camera-mode="home"] #analyzeMenuBtn .home-action-desc::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='8' y='28' width='56' height='44' rx='22'/%3E%3Crect x='36' y='12' width='56' height='52' rx='26'/%3E%3Crect x='24' y='44' width='52' height='40' rx='20'/%3E%3C/svg%3E");
}

#mainContent[data-camera-mode="home"] #analyzeDishBtn .home-action-desc::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8c18 0 30 12 30 26 0 10-6 20-16 24 10 4 16 14 16 24 0 14-12 26-30 26S20 96 20 82c0-10 6-20 16-24-10-4-16-14-16-24C20 20 32 8 50 8Z'/%3E%3C/svg%3E");
}

/* Interaction (visual only) */
#mainContent[data-camera-mode="home"] #controlsContainer > button:hover {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

#mainContent[data-camera-mode="home"] #controlsContainer > button:hover .home-action-desc::before {
  opacity: 1;
}

#mainContent[data-camera-mode="home"] #controlsContainer > button:active {
  border-color: rgba(255, 145, 88, 0.18) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

#mainContent[data-camera-mode="home"] #controlsContainer > button:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.35) !important;
  outline-offset: 3px !important;
}

/* === HOME ENTRANCE ROOT === */
#homeEntrance {
  position: relative;
  min-height: 100vh;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 20px 48px;
  background: linear-gradient(180deg, #20160f 0%, #0f0b08 48%, #080706 100%);
  color: rgba(236, 230, 222, 0.92);
  overflow: hidden;
}

#homeEntrance::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(880px 520px at 50% 8%, rgba(230, 180, 110, 0.28), transparent 58%),
    radial-gradient(720px 520px at 50% 56%, rgba(200, 140, 90, 0.22), transparent 60%),
    radial-gradient(720px 520px at 50% 84%, rgba(160, 110, 70, 0.2), transparent 60%),
    radial-gradient(900px 520px at 14% -12%, rgba(210, 155, 90, 0.22), transparent 62%),
    radial-gradient(760px 520px at 86% 16%, rgba(188, 132, 82, 0.18), transparent 64%);
  pointer-events: none;
}

#homeEntrance::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 4px),
    repeating-radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 6px),
    radial-gradient(2px 2px at 12% 18%, rgba(255, 240, 210, 0.08) 0, transparent 60%),
    radial-gradient(2px 2px at 22% 42%, rgba(255, 240, 210, 0.06) 0, transparent 60%),
    radial-gradient(2px 2px at 30% 70%, rgba(255, 240, 210, 0.07) 0, transparent 60%),
    radial-gradient(2px 2px at 48% 28%, rgba(255, 240, 210, 0.06) 0, transparent 60%),
    radial-gradient(2px 2px at 58% 54%, rgba(255, 240, 210, 0.07) 0, transparent 60%),
    radial-gradient(2px 2px at 66% 76%, rgba(255, 240, 210, 0.06) 0, transparent 60%),
    radial-gradient(2px 2px at 78% 22%, rgba(255, 240, 210, 0.08) 0, transparent 60%),
    radial-gradient(2px 2px at 86% 46%, rgba(255, 240, 210, 0.06) 0, transparent 60%),
    radial-gradient(2px 2px at 88% 80%, rgba(255, 240, 210, 0.07) 0, transparent 60%);
  opacity: 0.3;
  mix-blend-mode: screen;
  pointer-events: none;
}

#homeEntrance .home-topbar {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 0 18px;
  z-index: 2;
}

#homeEntrance .home-brand {
  font-family: "Playfair Display", "Cormorant", "Georgia", "Times New Roman", serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(236, 208, 160, 0.9);
}

#homeEntrance .home-topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

#homeEntrance .home-about {
  background: transparent;
  border: none;
  padding: 4px 0;
  font-family: "Playfair Display", "Cormorant", "Georgia", "Times New Roman", serif;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(236, 214, 178, 0.7);
  cursor: default;
}

#homeEntrance .home-back-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#homeEntrance .home-hero-title,
#clubHomeLanding .home-hero-title {
  text-align: center;
  margin: 34px 0 28px;
  font-family: "Playfair Display", "Cormorant", "Georgia", "Times New Roman", serif;
  font-size: clamp(32px, 6vw, 48px);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(250, 236, 210, 0.98);
}

#homeEntrance #controlsContainer,
#clubHomeLanding .home-portals,
#clubHomeLanding #homeModeChoiceSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

#homeEntrance #controlsContainer > button,
#clubHomeLanding button {
  appearance: none;
  border: 1px solid rgba(255, 220, 170, 0.04);
  background: rgba(12, 10, 8, 0.22);
  color: inherit;
  border-radius: 36px;
  width: 100%;
  display: block;
  text-align: center;
  font: inherit;
  max-width: 520px;
  padding: 28px 22px 30px;
  cursor: pointer;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.35),
    inset 0 0 12px rgba(255, 210, 160, 0.06);
  backdrop-filter: blur(8px);
  transition: transform 160ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

#homeEntrance #controlsContainer > button:active,
#clubHomeLanding button:active {
  transform: scale(0.985);
}

#homeEntrance #controlsContainer > button:focus-visible,
#clubHomeLanding button:focus-visible {
  outline: 1px solid rgba(255, 230, 190, 0.45);
  outline-offset: 4px;
}

#homeEntrance #controlsContainer > button:hover,
#clubHomeLanding button:hover {
  border-color: rgba(255, 220, 170, 0.1);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.45),
    inset 0 0 18px rgba(255, 215, 170, 0.1);
}

#homeEntrance .portal-content,
#clubHomeLanding .portal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

#homeEntrance .portal-content::after,
#clubHomeLanding .portal-content::after {
  content: "";
  position: absolute;
  top: 118px;
  width: 180px;
  height: 36px;
  background: radial-gradient(ellipse at center, rgba(255, 200, 130, 0.32), transparent 70%);
  filter: blur(10px);
  opacity: 0.75;
  pointer-events: none;
}

#homeEntrance .portal-orb,
#clubHomeLanding .portal-orb {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%, rgba(255, 242, 210, 0.95), rgba(255, 210, 150, 0.55) 42%, rgba(150, 90, 50, 0.5) 70%, rgba(18, 12, 9, 0.95) 100%);
  box-shadow:
    0 0 38px rgba(255, 210, 150, 0.45),
    0 0 120px rgba(255, 170, 110, 0.3),
    inset 0 0 22px rgba(255, 245, 220, 0.35);
}

#homeEntrance .portal-orb::before,
#clubHomeLanding .portal-orb::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 170, 0.55), transparent 65%);
  filter: blur(10px);
  opacity: 0.95;
}

#homeEntrance .portal-orb::after,
#clubHomeLanding .portal-orb::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 230, 190, 0.55);
  box-shadow:
    inset 0 0 12px rgba(255, 230, 190, 0.55),
    0 0 10px rgba(255, 210, 160, 0.4);
}

#homeEntrance .portal-orb .home-portal-icon,
#clubHomeLanding .portal-orb .home-portal-icon {
  width: 68px;
  height: 68px;
  color: #f6d38a;
  filter: drop-shadow(0 2px 6px rgba(160, 110, 60, 0.45));
}

#homeEntrance .portal-orb .home-portal-icon circle,
#homeEntrance .portal-orb .home-portal-icon rect,
#homeEntrance .portal-orb .home-portal-icon path,
#homeEntrance .portal-orb .home-portal-icon polygon,
#clubHomeLanding .portal-orb .home-portal-icon circle,
#clubHomeLanding .portal-orb .home-portal-icon rect,
#clubHomeLanding .portal-orb .home-portal-icon path,
#clubHomeLanding .portal-orb .home-portal-icon polygon {
  fill: currentColor;
  stroke: currentColor;
}

#homeEntrance .portal-orb .home-portal-icon polyline,
#clubHomeLanding .portal-orb .home-portal-icon polyline {
  fill: none;
  stroke: currentColor;
}

#homeEntrance .portal-text,
#clubHomeLanding .portal-text {
  text-align: center;
}

#homeEntrance .portal-title,
#clubHomeLanding .portal-title {
  font-family: "Playfair Display", "Cormorant", "Georgia", "Times New Roman", serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: rgba(246, 210, 150, 0.95);
}

#homeEntrance .portal-subtitle,
#clubHomeLanding .portal-subtitle {
  margin-top: 6px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(206, 196, 186, 0.75);
}

@media (min-width: 640px) {
  #homeEntrance .portal-orb,
  #clubHomeLanding .portal-orb {
    width: 156px;
    height: 156px;
  }

  #homeEntrance .portal-orb .home-portal-icon,
  #clubHomeLanding .portal-orb .home-portal-icon {
    width: 78px;
    height: 78px;
  }

  #homeEntrance .portal-content::after,
  #clubHomeLanding .portal-content::after {
    top: 138px;
    width: 220px;
  }
}

@media (max-width: 420px) {
  #homeEntrance .home-hero-title,
  #clubHomeLanding .home-hero-title {
    letter-spacing: 0.12em;
  }

  #homeEntrance #controlsContainer > button,
  #clubHomeLanding button {
    padding: 24px 18px 26px;
  }
}

/* === CAMERA HOME MODE: RESTORE NORMAL UI (NO ENTRANCE STYLING) === */
#mainContent[data-camera-mode="home"] {
  background: revert !important;
  color: revert !important;
}

#mainContent[data-camera-mode="home"]::before,
#mainContent[data-camera-mode="home"]::after {
  content: none !important;
}

#mainContent[data-camera-mode="home"] #video-container {
  display: none !important;
}

#mainContent[data-camera-mode="home"] #controlsContainer {
  display: revert !important;
  gap: revert !important;
}

#mainContent[data-camera-mode="home"] #controlsContainer > button {
  position: revert !important;
  display: revert !important;
  flex-direction: revert !important;
  align-items: revert !important;
  text-align: revert !important;
  gap: revert !important;
  min-height: revert !important;
  padding: revert !important;
  border-radius: revert !important;
  border: revert !important;
  background: revert !important;
  box-shadow: revert !important;
  backdrop-filter: none !important;
}

#mainContent[data-camera-mode="home"] #controlsContainer > button::before,
#mainContent[data-camera-mode="home"] #controlsContainer > button::after {
  content: none !important;
}

#mainContent[data-camera-mode="home"] .home-portal-icon {
  display: none !important;
}

#mainContent[data-camera-mode="home"] #video-container {
  display: none !important;
}

#mainContent .home-portal-icon {
  display: none !important;
}

#homeEntrance .home-portal-icon {
  display: block !important;
}

#mainContent[data-camera-mode="home"] #video-container {
  display: none !important;
}

#mainContent::before,
#mainContent::after {
  content: none !important;
}

#mainContent #controlsContainer {
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
}

/* === PWA INSTALL MODAL OVERLAY === */
#pwaInstallModal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  pointer-events: auto;
}

#pwaInstallModal.hidden {
  display: none;
  pointer-events: none;
}

/* === BOOT GATE === */
html[data-app-state="booting"] body {
  visibility: hidden;
  background: #0D0D0D;
}

html[data-app-state="ready"] body {
  visibility: visible;
}

/* === HOME ENTRANCE SPACE — LIGHT WINDOW OVERRIDE === */
#mainContent[data-camera-mode="home"] {
  background: #0D0D0D !important;
  color: rgba(235, 232, 226, 0.9) !important;
}

#mainContent[data-camera-mode="home"]::before {
  background:
    radial-gradient(920px 560px at 18% -8%, rgba(170, 110, 70, 0.12), transparent 68%),
    radial-gradient(980px 600px at 85% 18%, rgba(140, 120, 110, 0.07), transparent 70%),
    #0D0D0D;
}

#mainContent[data-camera-mode="home"]::after {
  opacity: 0.06;
}

#mainContent[data-camera-mode="home"] #video-container {
  display: none !important;
}

#mainContent[data-camera-mode="home"] header,
#mainContent[data-camera-mode="home"] header.text-center {
  text-align: left !important;
}

#mainContent[data-camera-mode="home"] header h1[data-i18n="app_title"] {
  color: transparent !important;
  font-family: "Playfair Display", "Cormorant", "Georgia", "Times New Roman", serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
}

#mainContent[data-camera-mode="home"] header h1[data-i18n="app_title"]::after {
  content: "GastroMatch.Club";
  color: rgba(235, 232, 226, 0.9);
}

#mainContent[data-camera-mode="home"] #backToHeroBtn {
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
}

#mainContent[data-camera-mode="home"] #backToHeroBtn:hover {
  color: rgba(255, 255, 255, 0.8) !important;
}

#mainContent[data-camera-mode="home"] #homeSlogan {
  display: block !important;
  font-family: "Playfair Display", "Cormorant", "Georgia", "Times New Roman", serif !important;
  font-size: 34px !important;
  font-weight: 300 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.35 !important;
  color: rgba(240, 236, 228, 0.9) !important;
}

#mainContent[data-camera-mode="home"] #controlsContainer {
  display: flex !important;
  flex-direction: column !important;
  gap: 30px !important;
}

#mainContent[data-camera-mode="home"] #controlsContainer > button {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 14px !important;
  min-height: 220px !important;
  padding: 32px 24px 36px !important;
  border-radius: 36px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#mainContent[data-camera-mode="home"] #controlsContainer > button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(140% 140% at 80% 55%, rgba(255, 140, 80, 0.18), rgba(255, 140, 80, 0.05) 60%, transparent 75%);
  opacity: 0.55;
  pointer-events: none;
}

#mainContent[data-camera-mode="home"] #controlsContainer > button::after {
  content: none !important;
}

#mainContent[data-camera-mode="home"] #controlsContainer > button svg {
  display: none !important;
}

#mainContent[data-camera-mode="home"] #controlsContainer > button .home-portal-icon {
  display: block !important;
  width: 96px !important;
  height: 96px !important;
  pointer-events: none !important;
  margin-bottom: 14px !important;
}

@media (min-width: 560px) {
  #mainContent[data-camera-mode="home"] #controlsContainer > button .home-portal-icon {
    width: 112px !important;
    height: 112px !important;
  }
}

#mainContent[data-camera-mode="home"] #controlsContainer > button span[data-i18n] {
  font-family: "Playfair Display", "Cormorant", "Georgia", "Times New Roman", serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: rgba(242, 238, 232, 0.92) !important;
}

#mainContent[data-camera-mode="home"] #controlsContainer > button .home-action-desc {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  color: rgba(210, 205, 198, 0.7) !important;
  padding-top: 0 !important;
}

#mainContent[data-camera-mode="home"] #controlsContainer > button .home-action-desc::before,
#mainContent[data-camera-mode="home"] #controlsContainer > button .home-action-desc::after {
  content: none !important;
}

#mainContent[data-camera-mode="home"] #controlsContainer > button:hover,
#mainContent[data-camera-mode="home"] #controlsContainer > button:focus-visible {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

#mainContent[data-camera-mode="home"] #controlsContainer > button:hover .home-portal-icon,
#mainContent[data-camera-mode="home"] #controlsContainer > button:focus-visible .home-portal-icon,
#mainContent[data-camera-mode="home"] #controlsContainer > button:active .home-portal-icon {
  filter: brightness(1.08);
}

/* HOME_ENTRANCE_PORTAL_SCOPE_v2 */
#mainContent .home-portal-icon { display: none !important; }
#homeEntrance .home-portal-icon { display: block !important; }
#mainContent[data-camera-mode="home"] #video-container { display: none !important; }
#mainContent::before, #mainContent::after { content: none !important; }
#mainContent #controlsContainer { position: static !important; transform: none !important; top: auto !important; left: auto !important; z-index: auto !important; }

/* === CAMERA FLOW CHOOSER === */
/* === CAMERA FLOW CHOOSER (CARD LAYOUT) === */
#mainContent #cameraFlowChooser.camera-flow-chooser {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

#mainContent #cameraFlowChooser.camera-flow-chooser.hidden {
  display: none;
}

#mainContent.camera-chooser-mode #video-container {
  display: none !important;
}

#mainContent.camera-chooser-mode #cameraPlaceholder {
  display: none !important;
}

#mainContent.camera-chooser-mode #cameraFlowChooser {
  display: block !important;
}

#mainContent.camera-chooser-mode #analyzeMenuBtn,
#mainContent.camera-chooser-mode #analyzeDishBtn {
  display: none !important;
}

#mainContent.camera-chooser-mode #analyzeMenuBtn::before,
#mainContent.camera-chooser-mode #analyzeMenuBtn::after,
#mainContent.camera-chooser-mode #analyzeDishBtn::before,
#mainContent.camera-chooser-mode #analyzeDishBtn::after {
  content: none !important;
  display: none !important;
}

#mainContent.camera-chooser-mode #menuPagesContainer,
#mainContent.camera-chooser-mode #menuPagesCount,
#mainContent.camera-chooser-mode #addMenuPageBtn,
#mainContent.camera-chooser-mode #removeLastPageBtn,
#mainContent.camera-chooser-mode #menuAnalyzeSelectedBtn,
#mainContent.camera-chooser-mode #menuCancelBtn {
  display: none !important;
}

#cameraFlowChooser .camera-chooser-header {
  margin: 14px 0 18px;
}

#cameraFlowChooser .camera-chooser-title {
  font-size: 18px;
  font-weight: 700;
}

#cameraFlowChooser .camera-chooser-subtitle {
  margin-top: 4px;
  font-size: 14px;
  opacity: 0.75;
}

#cameraFlowChooser .camera-mode-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border-radius: 20px;
  border: none;
  background: rgba(255, 255, 255, 0.03);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 8px 24px rgba(255, 140, 0, 0.18);
  text-align: left;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

#cameraFlowChooser .camera-mode-card + .camera-mode-card {
  margin-top: 20px;
}

#cameraFlowChooser .camera-mode-card:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 12px 32px rgba(255, 140, 0, 0.28);
}

#cameraFlowChooser .camera-mode-card:active {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 12px 32px rgba(255, 140, 0, 0.28);
}

#cameraFlowChooser .camera-mode-card-icon {
  width: 30px;
  height: 30px;
  opacity: 0.9;
  flex: 0 0 auto;
  color: var(--accent-orange);
}

#cameraFlowChooser .camera-mode-card-icon svg {
  width: 100%;
  height: 100%;
}

#cameraFlowChooser .camera-mode-card-text {
  flex: 1 1 auto;
  min-width: 0;
}

#cameraFlowChooser .camera-mode-card-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#cameraFlowChooser .camera-mode-card-subtitle {
  margin-top: 4px;
  font-size: 14px;
  opacity: 0.85;
}

#cameraFlowChooser .camera-mode-card-meta {
  margin-top: 10px;
  font-size: 12.5px;
  opacity: 0.6;
}

#cameraFlowChooser .camera-mode-card-chevron {
  opacity: 0.65;
  font-size: 22px;
  line-height: 1;
  flex: 0 0 auto;
  transform: translateY(-1px);
  color: var(--accent-orange);
}

#cameraFlowChooser .camera-mode-card * {
  pointer-events: none;
}

#cameraFlowChooser .camera-mode-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 24px 0 8px;
  color: #fff;
}

#mainContent.camera-chooser-mode[data-camera-mode="home"] #cameraFlowChooser .camera-mode-card,
#mainContent.camera-chooser-mode[data-camera-mode="home"] #cameraFlowChooser .camera-mode-card:hover,
#mainContent.camera-chooser-mode[data-camera-mode="home"] #cameraFlowChooser .camera-mode-card:focus-visible,
#mainContent.camera-chooser-mode[data-camera-mode="home"] #cameraFlowChooser .camera-mode-card:active {
  box-shadow: revert !important;
}

#mainContent.camera-chooser-mode[data-camera-mode="home"] #cameraFlowChooser .camera-mode-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 55%, rgba(0,0,0,0.10) 100%) !important;
  border: none !important;
  border-radius: 22px !important;
  padding: 22px 18px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 10px 26px rgba(0,0,0,0.45),
    0 14px 34px rgba(255,140,0,0.28) !important;
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease !important;
}

#mainContent.camera-chooser-mode[data-camera-mode="home"] #cameraFlowChooser .camera-mode-card:hover,
#mainContent.camera-chooser-mode[data-camera-mode="home"] #cameraFlowChooser .camera-mode-card:focus-visible {
  transform: translateY(-1px) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 0 0 3px rgba(255,140,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 14px 34px rgba(0,0,0,0.50),
    0 18px 46px rgba(255,140,0,0.38) !important;
}

#mainContent.camera-chooser-mode[data-camera-mode="home"] #cameraFlowChooser .camera-mode-card:active {
  transform: translateY(0px) scale(0.99) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05),
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 2px 10px rgba(0,0,0,0.45),
    0 8px 18px rgba(0,0,0,0.45),
    0 10px 24px rgba(255,140,0,0.22) !important;
}

#mainContent.camera-chooser-mode[data-camera-mode="home"] #cameraFlowChooser .camera-mode-card-icon,
#mainContent.camera-chooser-mode[data-camera-mode="home"] #cameraFlowChooser .camera-mode-card-chevron {
  color: rgba(255,140,0,0.95) !important;
}

#cameraFlowChooser .camera-flow-icon {
  display: none !important;
}

#mainContent .camera-flow-title {
  font-family: "Playfair Display", "Cormorant", "Georgia", "Times New Roman", serif;
  font-size: 18px;
  font-weight: 500;
}

#mainContent .camera-flow-subtitle {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  font-size: 13px;
  opacity: 0.78;
  margin-top: 6px;
}

/* === HOME ENTRANCE NEAR-MOCK OVERRIDES === */
#homeEntrance {
  position: relative;
  overflow: hidden;
}

#homeEntrance::before {
  content: "";
  position: absolute;
  inset: -40px;
  pointer-events: none;
  background:
    radial-gradient(1200px 900px at 50% 18%, rgba(255, 170, 80, 0.14), rgba(0, 0, 0, 0) 60%),
    radial-gradient(900px 700px at 50% 58%, rgba(255, 150, 60, 0.10), rgba(0, 0, 0, 0) 62%),
    radial-gradient(800px 600px at 50% 92%, rgba(255, 140, 50, 0.08), rgba(0, 0, 0, 0) 65%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.72) 55%, rgba(0, 0, 0, 0.85) 100%);
  opacity: 1;
  z-index: 0;
}

#homeEntrance::after {
  content: "";
  position: absolute;
  inset: -40px;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 28%, rgba(255, 220, 160, 0.12) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(circle at 68% 34%, rgba(255, 220, 160, 0.10) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(circle at 40% 46%, rgba(255, 220, 160, 0.08) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(circle at 78% 58%, rgba(255, 220, 160, 0.10) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(circle at 30% 72%, rgba(255, 220, 160, 0.08) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(circle at 60% 82%, rgba(255, 220, 160, 0.10) 0 1px, rgba(0, 0, 0, 0) 2px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.015) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.010) 0 1px, rgba(0, 0, 0, 0) 1px 4px),
    radial-gradient(1200px 900px at 50% 45%, rgba(0, 0, 0, 0) 0 55%, rgba(0, 0, 0, 0.55) 100%);
  mix-blend-mode: screen;
  opacity: 0.85;
  z-index: 0;
}

#homeEntrance > * {
  position: relative;
  z-index: 1;
}

#homeEntrance #controlsContainer > button,
#clubHomeLanding button {
  position: relative;
  background: rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.025) !important;
  backdrop-filter: blur(2px);
}

#homeEntrance #controlsContainer > button::before,
#clubHomeLanding button::before {
  opacity: 0.18 !important;
}

#homeEntrance #controlsContainer > button::after,
#clubHomeLanding button::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 76%;
  height: 20px;
  transform: translateX(-50%);
  bottom: 28%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 190, 95, 0.62) 0%, rgba(255, 170, 70, 0.28) 42%, rgba(255, 170, 70, 0.00) 72%);
  filter: blur(7px);
  opacity: 0.85;
}

#homeEntrance .portal-orb,
#clubHomeLanding .portal-orb {
  background: radial-gradient(circle at 50% 45%, rgba(255, 245, 220, 1.00) 0%, rgba(255, 220, 160, 0.95) 22%, rgba(255, 185, 95, 0.85) 48%, rgba(255, 140, 45, 0.25) 78%, rgba(0, 0, 0, 0.00) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 235, 200, 0.42),
    0 0 28px rgba(255, 175, 70, 0.32),
    0 0 58px rgba(255, 150, 55, 0.22) !important;
}

#homeEntrance .portal-orb::before,
#clubHomeLanding .portal-orb::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 235, 200, 0.55);
  opacity: 0.9;
  pointer-events: none;
}

#homeEntrance .portal-orb svg,
#clubHomeLanding .portal-orb svg {
  opacity: 0.95;
  filter: drop-shadow(0 0 10px rgba(255, 200, 120, 0.35));
}

#homeEntrance #controlsContainer > button:active,
#clubHomeLanding button:active {
  transform: scale(0.995);
}

#homeEntrance #controlsContainer > button:active .portal-orb,
#clubHomeLanding button:active .portal-orb {
  box-shadow:
    0 0 0 1px rgba(255, 235, 200, 0.50),
    0 0 36px rgba(255, 175, 70, 0.38),
    0 0 78px rgba(255, 150, 55, 0.26) !important;
}

/* === HOME ENTRANCE BACKGROUND ARTIFACT FIX === */
#homeEntrance::after {
  background-image:
    radial-gradient(circle at 22% 28%, rgba(255, 220, 160, 0.10) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(circle at 68% 34%, rgba(255, 220, 160, 0.08) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(circle at 40% 46%, rgba(255, 220, 160, 0.07) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(circle at 78% 58%, rgba(255, 220, 160, 0.08) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(circle at 30% 72%, rgba(255, 220, 160, 0.07) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(circle at 60% 82%, rgba(255, 220, 160, 0.08) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(1200px 900px at 50% 45%, rgba(0, 0, 0, 0) 0 58%, rgba(0, 0, 0, 0.55) 100%);
  mix-blend-mode: normal;
  opacity: 0.45;
  filter: none;
}

#homeEntrance::before {
  opacity: 0.95;
}

#homeEntrance #controlsContainer > button::after,
#clubHomeLanding button::after {
  width: 62%;
  height: 14px;
  bottom: 30%;
  opacity: 0.65;
  filter: blur(8px);
  background: radial-gradient(ellipse at center, rgba(255, 190, 95, 0.55) 0%, rgba(255, 170, 70, 0.22) 40%, rgba(255, 170, 70, 0.00) 72%);
}

#homeEntrance #controlsContainer > button,
#clubHomeLanding button {
  background: rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
}

/* === HOME ENTRANCE DEEPER DUST + THIN HORIZON === */
#homeEntrance::before {
  background:
    radial-gradient(1200px 900px at 50% 16%, rgba(255, 180, 90, 0.16), rgba(0, 0, 0, 0) 62%),
    radial-gradient(900px 700px at 35% 42%, rgba(255, 160, 70, 0.10), rgba(0, 0, 0, 0) 64%),
    radial-gradient(900px 700px at 65% 55%, rgba(255, 150, 60, 0.09), rgba(0, 0, 0, 0) 66%),
    radial-gradient(900px 700px at 50% 78%, rgba(255, 140, 55, 0.08), rgba(0, 0, 0, 0) 68%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.78) 58%, rgba(0, 0, 0, 0.88) 100%);
  opacity: 1;
}

#homeEntrance::after {
  mix-blend-mode: normal;
  opacity: 0.35;
  background-image:
    radial-gradient(circle at 18% 24%, rgba(255, 225, 170, 0.10) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(circle at 72% 31%, rgba(255, 225, 170, 0.08) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(circle at 44% 48%, rgba(255, 225, 170, 0.07) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(circle at 80% 62%, rgba(255, 225, 170, 0.08) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(circle at 28% 74%, rgba(255, 225, 170, 0.07) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(circle at 56% 86%, rgba(255, 225, 170, 0.08) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(1400px 1000px at 50% 50%, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0) 55%),
    radial-gradient(1200px 900px at 50% 45%, rgba(0, 0, 0, 0) 0 60%, rgba(0, 0, 0, 0.55) 100%);
  filter: none;
}

#homeEntrance #controlsContainer > button,
#clubHomeLanding button {
  background: rgba(0, 0, 0, 0.03) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.015) !important;
}

#homeEntrance #controlsContainer > button::before,
#clubHomeLanding button::before {
  opacity: 0.10 !important;
}

#homeEntrance #controlsContainer > button::after,
#clubHomeLanding button::after {
  width: 70%;
  height: 2px;
  bottom: 30%;
  opacity: 0.95;
  filter: blur(0px);
  background: linear-gradient(90deg, rgba(255, 180, 90, 0.00) 0%, rgba(255, 200, 120, 0.95) 22%, rgba(255, 235, 180, 1.00) 50%, rgba(255, 200, 120, 0.95) 78%, rgba(255, 180, 90, 0.00) 100%);
  box-shadow: 0 0 18px rgba(255, 175, 75, 0.45), 0 0 42px rgba(255, 150, 55, 0.22);
}

#homeEntrance .portal-orb,
#clubHomeLanding .portal-orb {
  box-shadow:
    0 0 0 1px rgba(255, 235, 200, 0.48),
    0 0 22px rgba(255, 190, 95, 0.30),
    0 0 60px rgba(255, 150, 55, 0.24) !important;
}

#homeEntrance .portal-orb svg,
#clubHomeLanding .portal-orb svg {
  transform: scale(0.92);
}

/* === HOME ENTRANCE DARK SCENE RESTORE === */
#homeEntrance {
  background-color: #0b0b0b !important;
}

#homeEntrance::before {
  background:
    radial-gradient(1100px 700px at 50% 18%, rgba(255, 170, 80, 0.10), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.88) 45%, rgba(0, 0, 0, 0.94) 100%);
  opacity: 1 !important;
  filter: none !important;
}

#homeEntrance::after {
  background-image:
    radial-gradient(circle at 22% 28%, rgba(255, 220, 160, 0.10) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(circle at 68% 34%, rgba(255, 220, 160, 0.08) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(circle at 40% 46%, rgba(255, 220, 160, 0.07) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(circle at 78% 58%, rgba(255, 220, 160, 0.08) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(circle at 30% 72%, rgba(255, 220, 160, 0.07) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(circle at 60% 82%, rgba(255, 220, 160, 0.08) 0 1px, rgba(0, 0, 0, 0) 2px),
    radial-gradient(1200px 900px at 50% 55%, rgba(255, 255, 255, 0.015), rgba(0, 0, 0, 0) 55%),
    radial-gradient(1200px 900px at 50% 45%, rgba(0, 0, 0, 0) 0 62%, rgba(0, 0, 0, 0.70) 100%);
  mix-blend-mode: normal !important;
  opacity: 0.22 !important;
  filter: none !important;
}

#homeEntrance #controlsContainer > button,
#clubHomeLanding button {
  background: rgba(0, 0, 0, 0.02) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.02),
    0 20px 60px rgba(0, 0, 0, 0.55) !important;
}

#homeEntrance #controlsContainer > button::before,
#clubHomeLanding button::before {
  opacity: 0.06 !important;
}

#homeEntrance .portal-orb::before,
#clubHomeLanding .portal-orb::before {
  content: "";
  position: absolute;
  inset: -34%;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 205, 125, 0.35) 0%, rgba(255, 170, 80, 0.16) 38%, rgba(0, 0, 0, 0) 72%);
  filter: blur(18px);
  opacity: 1;
  pointer-events: none;
  z-index: -1;
}

#homeEntrance .portal-orb::after,
#clubHomeLanding .portal-orb::after {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 235, 190, 0.40) 0%, rgba(255, 190, 100, 0.12) 52%, rgba(0, 0, 0, 0) 78%);
  filter: blur(10px);
  opacity: 1;
  pointer-events: none;
  z-index: -1;
}

#homeEntrance #controlsContainer > button::after,
#clubHomeLanding button::after {
  width: 58% !important;
  height: 2px !important;
  bottom: 28% !important;
  opacity: 0.70 !important;
  filter: blur(0px) !important;
  background: linear-gradient(90deg, rgba(255, 180, 90, 0.00) 0%, rgba(255, 205, 130, 0.65) 22%, rgba(255, 235, 185, 0.85) 50%, rgba(255, 205, 130, 0.65) 78%, rgba(255, 180, 90, 0.00) 100%) !important;
  box-shadow: 0 0 14px rgba(255, 175, 75, 0.32), 0 0 34px rgba(255, 150, 55, 0.16) !important;
}

#homeEntrance * {
  mix-blend-mode: normal;
}

/* === HOME ENTRANCE PORTAL SCENE OVERRIDES === */
#homeEntrance #controlsContainer > button,
#clubHomeLanding button {
  background: rgba(0, 0, 0, 0.10);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
  border-radius: 38px;
  padding: 22px 18px 24px;
}

#homeEntrance #controlsContainer > button::before,
#clubHomeLanding button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(2px 2px at 18% 28%, rgba(255, 240, 210, 0.16) 0, transparent 60%),
    radial-gradient(2px 2px at 32% 42%, rgba(255, 240, 210, 0.12) 0, transparent 60%),
    radial-gradient(2px 2px at 48% 22%, rgba(255, 240, 210, 0.14) 0, transparent 60%),
    radial-gradient(2px 2px at 64% 36%, rgba(255, 240, 210, 0.12) 0, transparent 60%),
    radial-gradient(2px 2px at 78% 26%, rgba(255, 240, 210, 0.16) 0, transparent 60%),
    radial-gradient(2px 2px at 72% 60%, rgba(255, 240, 210, 0.12) 0, transparent 60%);
  opacity: 0.16;
  mix-blend-mode: screen;
  pointer-events: none;
}

#homeEntrance #controlsContainer > button::after,
#clubHomeLanding button::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 34%;
  width: 70%;
  height: 18px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 170, 70, 0.55) 0%, rgba(255, 170, 70, 0.18) 45%, rgba(255, 170, 70, 0.00) 70%);
  filter: blur(6px);
  opacity: 0.75;
  pointer-events: none;
}

#homeEntrance .portal-orb,
#clubHomeLanding .portal-orb {
  background: radial-gradient(circle at 50% 35%, rgba(255, 248, 220, 1), rgba(255, 216, 160, 0.6) 42%, rgba(160, 95, 50, 0.55) 70%, rgba(12, 10, 8, 0.96) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 220, 160, 0.45),
    0 0 40px rgba(255, 160, 60, 0.35),
    0 0 120px rgba(255, 170, 110, 0.32),
    inset 0 0 22px rgba(255, 245, 220, 0.42);
}

#homeEntrance .portal-orb::before,
#clubHomeLanding .portal-orb::before {
  opacity: 1;
  filter: blur(12px);
}

#homeEntrance .portal-orb::after,
#clubHomeLanding .portal-orb::after {
  border: 1px solid rgba(255, 230, 190, 0.65);
  box-shadow:
    inset 0 0 14px rgba(255, 230, 190, 0.6),
    0 0 14px rgba(255, 210, 160, 0.45);
}

#homeEntrance .portal-orb .home-portal-icon,
#clubHomeLanding .portal-orb .home-portal-icon {
  width: 60px;
  height: 60px;
  color: rgba(255, 222, 170, 1);
}

#homeEntrance .portal-text,
#clubHomeLanding .portal-text {
  margin-top: -4px;
}

#homeEntrance .portal-subtitle,
#clubHomeLanding .portal-subtitle {
  opacity: 0.66;
  line-height: 1.35;
}

#homeEntrance #controlsContainer > button:hover .portal-orb,
#homeEntrance #controlsContainer > button:focus-visible .portal-orb,
#clubHomeLanding button:hover .portal-orb,
#clubHomeLanding button:focus-visible .portal-orb {
  box-shadow:
    0 0 0 1px rgba(255, 230, 190, 0.6),
    0 0 46px rgba(255, 170, 80, 0.45),
    0 0 140px rgba(255, 180, 120, 0.38),
    inset 0 0 26px rgba(255, 245, 220, 0.5);
}

#homeEntrance #controlsContainer > button:hover::after,
#homeEntrance #controlsContainer > button:focus-visible::after,
#clubHomeLanding button:hover::after,
#clubHomeLanding button:focus-visible::after {
  opacity: 0.9;
}

#homeEntrance #controlsContainer > button:active,
#clubHomeLanding button:active {
  transform: scale(0.995);
}

#homeEntrance #controlsContainer > button:active .portal-orb,
#clubHomeLanding button:active .portal-orb {
  box-shadow:
    0 0 0 1px rgba(255, 230, 190, 0.65),
    0 0 50px rgba(255, 170, 80, 0.48),
    0 0 150px rgba(255, 180, 120, 0.42),
    inset 0 0 28px rgba(255, 245, 220, 0.55);
}

#homeEntrance #controlsContainer > button:active::after,
#clubHomeLanding button:active::after {
  opacity: 0.95;
}

/* === HOME ENTRANCE STRIPE LAYERING + SOFTENING === */
#homeEntrance #controlsContainer > button,
#clubHomeLanding button {
  position: relative;
  overflow: hidden;
}

#homeEntrance #controlsContainer > button > *,
#clubHomeLanding button > * {
  position: relative;
  z-index: 2;
}

#homeEntrance #controlsContainer > button::before,
#homeEntrance #controlsContainer > button::after,
#clubHomeLanding button::before,
#clubHomeLanding button::after {
  z-index: 1;
  pointer-events: none;
}

#homeEntrance #controlsContainer > button::after,
#clubHomeLanding button::after {
  bottom: 18px !important;
  height: 20px !important;
  opacity: 0.5 !important;
  filter: blur(14px) !important;
  transform: translateZ(0);
  background: radial-gradient(ellipse at center,
    rgba(255, 190, 95, 0.42) 0%,
    rgba(255, 170, 70, 0.18) 40%,
    rgba(255, 170, 70, 0.00) 68%) !important;
}

/* === CAMERA LAYOUT FIT (MENU/DISH) === */
#mainContent[data-camera-mode="menu"] #video-container,
#mainContent[data-camera-mode="dish"] #video-container {
  margin-bottom: 0 !important;
  max-height: min(56dvh, calc(100dvh - 280px));
  overflow: hidden;
}

#mainContent[data-camera-mode="menu"] #videoElement,
#mainContent[data-camera-mode="menu"] #canvasElement,
#mainContent[data-camera-mode="dish"] #videoElement,
#mainContent[data-camera-mode="dish"] #canvasElement {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#mainContent[data-camera-mode="menu"] #cameraLegacyQuickActions,
#mainContent[data-camera-mode="dish"] #cameraLegacyQuickActions,
#mainContent[data-camera-mode="menu"] #menuPagesContainer,
#mainContent[data-camera-mode="dish"] #menuPagesContainer {
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  position: sticky;
  bottom: 0;
  background: transparent;
}

/* Camera scanning sweep: active only during analysis */
#mainContent.is-scanning[data-camera-mode="menu"] #video-container,
#mainContent.is-scanning[data-camera-mode="dish"] #video-container {
  position: relative;
  overflow: hidden;
}

#mainContent.is-scanning[data-camera-mode="menu"] #video-container::after,
#mainContent.is-scanning[data-camera-mode="dish"] #video-container::after {
  content: "";
  position: absolute;
  left: -20%;
  width: 140%;
  top: -60%;
  height: 22%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 140, 0, 0) 0%,
    rgba(255, 140, 0, 0.10) 35%,
    rgba(255, 170, 40, 0.30) 50%,
    rgba(255, 140, 0, 0.10) 65%,
    rgba(255, 140, 0, 0) 100%
  );
  filter: blur(8px);
  opacity: 0.85;
  transform: translateY(-25%);
  animation: cameraScanSweep 1.25s ease-in-out infinite alternate;
}

@keyframes cameraScanSweep {
  0% { transform: translateY(-25%); }
  100% { transform: translateY(165%); }
}

/* SCAN SWEEP — FINAL FIX: animate via TOP, no transform */
#mainContent.is-scanning[data-camera-mode="menu"] #video-container::after,
#mainContent.is-scanning[data-camera-mode="dish"] #video-container::after {
  transform: none !important;
  top: -160px !important;
  animation: cameraScanSweepTop 1.25s ease-in-out infinite alternate !important;
}

@keyframes cameraScanSweepTop {
  0% {
    top: -160px;
  }
  100% {
    top: calc(100% + 40px);
  }
}

/* SCAN SWEEP — HARD FINAL OVERRIDE (must be last in file) */
#mainContent.is-scanning[data-camera-mode="menu"] #video-container,
#mainContent.is-scanning[data-camera-mode="dish"] #video-container {
  position: relative !important;
  overflow: hidden !important;
}

#mainContent.is-scanning[data-camera-mode="menu"] #video-container::after,
#mainContent.is-scanning[data-camera-mode="dish"] #video-container::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;

  left: -20% !important;
  width: 140% !important;
  height: 160px !important;
  top: -200px !important;

  background: linear-gradient(
    180deg,
    rgba(255,140,0,0) 0%,
    rgba(255,140,0,0.15) 35%,
    rgba(255,170,40,0.65) 50%,
    rgba(255,140,0,0.15) 65%,
    rgba(255,140,0,0) 100%
  ) !important;

  filter: blur(12px) !important;
  opacity: 1 !important;
  z-index: 9999 !important;

  transform: none !important;
  will-change: top !important;

  animation-name: gmScanSweepTopV3 !important;
  animation-duration: 1.1s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
}

#mainContent.is-scanning[data-camera-mode="menu"] #videoElement,
#mainContent.is-scanning[data-camera-mode="dish"] #videoElement,
#mainContent.is-scanning[data-camera-mode="menu"] #canvasElement,
#mainContent.is-scanning[data-camera-mode="dish"] #canvasElement {
  position: relative !important;
  z-index: 1 !important;
}

@keyframes gmScanSweepTopV3 {
  0%   { top: -200px; }
  100% { top: calc(100% + 80px); }
}

/* SCAN SWEEP OVERLAY (REAL ELEMENT) */
#video-container {
  position: relative;
}

#scanSweepOverlay.scan-sweep-overlay {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 160px;
  top: -200px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  filter: blur(12px);
  background: linear-gradient(
    180deg,
    rgba(255,140,0,0) 0%,
    rgba(255,140,0,0.15) 35%,
    rgba(255,170,40,0.65) 50%,
    rgba(255,140,0,0.15) 65%,
    rgba(255,140,0,0) 100%
  );
}

#mainContent.is-scanning[data-camera-mode="menu"] #scanSweepOverlay,
#mainContent.is-scanning[data-camera-mode="dish"] #scanSweepOverlay {
  opacity: 1;
  animation: gmScanSweepTopV4 1.1s linear infinite;
}

@keyframes gmScanSweepTopV4 {
  0% { top: -200px; }
  100% { top: calc(100% + 80px); }
}

/* CAPTURE PAGE SWEEP + ANALYSIS ORBIT (FINAL OVERRIDES) */
#scanSweepOverlay.scan-sweep-overlay {
  z-index: 9000;
}

#mainContent.is-capturing-page[data-camera-mode="menu"] #scanSweepOverlay {
  opacity: 1;
  animation: gmScanSweepTopV4 1.1s linear infinite;
}

#atomOrbitOverlay.atom-orbit-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 9999;
}

#mainContent.is-analyzing[data-camera-mode="menu"] #atomOrbitOverlay,
#mainContent.is-analyzing[data-camera-mode="dish"] #atomOrbitOverlay {
  display: flex;
}

#atomOrbitOverlay .atom-nucleus {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 180, 80, 0.9);
  box-shadow: 0 0 12px rgba(255, 170, 60, 0.55);
}

#atomOrbitOverlay .atom-orbit {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(255, 170, 40, 0.25);
  border-radius: 50%;
}

#atomOrbitOverlay .atom-orbit--a {
  transform: rotate(25deg);
}

#atomOrbitOverlay .atom-orbit--b {
  transform: rotate(-25deg);
}

#atomOrbitOverlay .atom-electron {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(255, 190, 90, 0.95);
  box-shadow: 0 0 10px rgba(255, 170, 70, 0.6);
}

#atomOrbitOverlay .atom-orbit--a {
  animation: gmAtomOrbitA 1.6s linear infinite;
}

#atomOrbitOverlay .atom-orbit--b {
  animation: gmAtomOrbitB 1.9s linear infinite;
}

#atomOrbitOverlay .atom-orbit--a .atom-electron,
#atomOrbitOverlay .atom-orbit--b .atom-electron {
  transform: translateX(50px);
}

@keyframes gmAtomOrbitA {
  0% { transform: rotate(25deg); }
  100% { transform: rotate(385deg); }
}

@keyframes gmAtomOrbitB {
  0% { transform: rotate(-25deg); }
  100% { transform: rotate(335deg); }
}

/* ATOM ORBIT UPGRADE: INTERSECTING ELLIPSES */
#atomOrbitOverlay .atom-orbit {
  width: 150px;
  height: 96px;
  border-color: rgba(255, 170, 40, 0.28);
}

#atomOrbitOverlay .atom-orbit--a {
  transform: rotate(60deg);
  animation: gmAtomOrbitA 1.6s linear infinite;
}

#atomOrbitOverlay .atom-orbit--b {
  transform: rotate(-60deg);
  animation: gmAtomOrbitB 1.9s linear infinite;
}

#atomOrbitOverlay .atom-orbit--a .atom-electron,
#atomOrbitOverlay .atom-orbit--b .atom-electron {
  transform: translateX(64px);
}

@keyframes gmAtomOrbitA {
  0% { transform: rotate(60deg); }
  100% { transform: rotate(420deg); }
}

@keyframes gmAtomOrbitB {
  0% { transform: rotate(-60deg); }
  100% { transform: rotate(300deg); }
}

/* CAPTURE SWEEP: SINGLE PASS + SEQUENCING OVERRIDES */
#mainContent.is-capturing-page[data-camera-mode="menu"] #scanSweepOverlay,
#mainContent.is-capturing-page[data-camera-mode="dish"] #scanSweepOverlay {
  animation-name: gmScanSweepTopV5 !important;
  animation-duration: 0.8s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: forwards !important;
}

#mainContent.is-analyzing #scanSweepOverlay {
  opacity: 0 !important;
  animation: none !important;
}

#mainContent.is-capturing-page #atomOrbitOverlay {
  display: none !important;
}

@keyframes gmScanSweepTopV5 {
  0% { top: -200px; }
  100% { top: calc(100% + 80px); }
}

/* CAPTURE SWEEP VISIBILITY FIX (MENU + DISH) */
#mainContent.is-capturing-page[data-camera-mode="menu"] #scanSweepOverlay,
#mainContent.is-capturing-page[data-camera-mode="dish"] #scanSweepOverlay {
  opacity: 1 !important;
  animation: gmScanSweepTopV5 0.8s linear 1 forwards !important;
  z-index: 9000 !important;
}

#mainContent.is-analyzing #scanSweepOverlay {
  opacity: 0 !important;
  animation: none !important;
}

#mainContent.is-capturing-page #atomOrbitOverlay {
  display: none !important;
}