/* ==========================================================================

   Stark Farm Manager — STARK × LH Onyx Theme (⚡)

   Official Primary Theme inspired by Lean Hustle (https://leanhustle.net/)

   Optimized for ultra-smooth 60/120 FPS performance and 100% mobile readiness.

   ========================================================================== */



@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800;900&display=swap');



:root[data-theme="stark_lh"],

[data-theme="stark_lh"],

body.theme-stark-lh,

:root {

  /* Lean Hustle Core Palette Tokens */

  --lh-bg: #070310;

  --lh-bg-2: #120622;

  --lh-ink: #f4f0fa;

  --lh-dim: #9a8fb4;

  --lh-faint: #6c6385;

  --lh-accent: #c97bff;     /* neon lavender */

  --lh-accent-2: #ff7be0;   /* cyber magenta */

  --lh-chill: #7fd9ff;      /* cool ice cyan */

  --lh-hair: rgba(232, 222, 255, 0.12);

  --lh-hair-2: rgba(232, 222, 255, 0.20);

  --lh-panel: rgba(18, 8, 32, 0.42);



  /* SFM Variable Overrides */

  --bg-base: #070310 !important;

  --bg-gradient-1: #070310 !important;

  --bg-gradient-2: #120622 !important;



  --glass-bg: rgba(18, 8, 32, 0.62) !important;

  --glass-border: rgba(232, 222, 255, 0.14) !important;

  --glass-border-hover: rgba(201, 123, 255, 0.45) !important;



  --accent-blue: #c97bff !important;

  --accent-blue-hover: #ff7be0 !important;

  --accent-purple: #c97bff !important;

  --accent-purple-hover: #ff7be0 !important;

  --accent-green: #10b981 !important;

  --accent-green-hover: #34d399 !important;



  --text-primary: #f4f0fa !important;

  --text-secondary: #9a8fb4 !important;

  --text-muted: #6c6385 !important;



  --shadow-glow: 0 0 20px rgba(201, 123, 255, 0.35) !important;

  --shadow-glow-purple: 0 0 28px rgba(122, 31, 196, 0.45) !important;

  --shadow-glow-green: 0 0 18px rgba(16, 185, 129, 0.35) !important;



  --font-disp: 'Unbounded', system-ui, sans-serif;

  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --font-body: 'Archivo', system-ui, sans-serif;

}



/* Hardware-accelerated Keyframe Animations */

@keyframes sway {

  0%, 100% { transform: rotate(-2deg) translateY(0); }

  50% { transform: rotate(2deg) translateY(-4px); }

}



@keyframes chrome {

  to { background-position: 280% 0; }

}



@keyframes pulseGlow {

  0%, 100% { filter: drop-shadow(0 0 8px rgba(201, 123, 255, 0.5)); }

  50% { filter: drop-shadow(0 0 18px rgba(255, 123, 224, 0.75)); }

}



/* Atmospheric Background Aura */

[data-theme="stark_lh"] body {

  background-color: #070310 !important;

  color: var(--text-primary) !important;

  font-family: var(--font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;

  position: relative;

  overflow-x: hidden !important;

  max-width: 100vw !important;

  width: 100% !important;

}



[data-theme="stark_lh"] body::before {

  content: '';

  position: fixed;

  inset: 0;

  z-index: -3;

  pointer-events: none;

  transform: translateZ(0);

  background:

    radial-gradient(900px 650px at 12% -8%, rgba(122, 31, 196, 0.38), transparent 60%),

    radial-gradient(820px 720px at 96% 6%, rgba(255, 123, 224, 0.20), transparent 55%),

    radial-gradient(650px 500px at 50% 98%, rgba(127, 217, 255, 0.10), transparent 50%),

    linear-gradient(180deg, #070310 0%, #120622 100%) !important;

}



/* Brand Title & Logo */

[data-theme="stark_lh"] .brand-title {

  font-family: var(--font-disp), sans-serif !important;

  font-weight: 800 !important;

  letter-spacing: -0.01em !important;

  background: linear-gradient(115deg, #ffffff 0%, #d9b8ff 20%, #9a3ff0 42%, #ff8fe6 64%, #7fd9ff 82%, #c97bff 100%) !important;

  background-size: 280% 100% !important;

  -webkit-background-clip: text !important;

  background-clip: text !important;

  -webkit-text-fill-color: transparent !important;

  animation: chrome 14s linear infinite !important;

  filter: drop-shadow(0 2px 10px rgba(120, 25, 200, 0.35));

}



[data-theme="stark_lh"] .brand-title::after {

  content: ' × LH';

  font-size: 0.65em;

  font-weight: 700;

  letter-spacing: 0.06em;

  background: linear-gradient(135deg, #c97bff, #ff7be0);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  margin-left: 5px;

  vertical-align: middle;

}



[data-theme="stark_lh"] .brand-logo img,

[data-theme="stark_lh"] #mainBrandLogoImg {

  filter: drop-shadow(0 0 14px rgba(201, 123, 255, 0.65)) !important;

  animation: sway 8s ease-in-out infinite !important;

  transform: translateZ(0);

}



/* Cards & Authentic Lean Hustle Liquid Glass Panels ("Жидкое Стекло") */

[data-theme="stark_lh"] .card,

[data-theme="stark_lh"] .crash-card,

[data-theme="stark_lh"] .p2r-info-card,

[data-theme="stark_lh"] .contest-card,

[data-theme="stark_lh"] .stat-card,

[data-theme="stark_lh"] .cleanup-card {

  position: relative !important;

  background: linear-gradient(155deg, rgba(255, 255, 255, 0.085), rgba(180, 90, 255, 0.05) 42%, rgba(18, 8, 32, 0.22)) !important;

  backdrop-filter: blur(18px) saturate(1.4) !important;

  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;

  border: 1px solid rgba(255, 255, 255, 0.14) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 22px 44px -26px rgba(0, 0, 0, 0.75) !important;

  border-radius: 16px !important;

  transform-style: preserve-3d;

  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease !important;

  max-width: 100% !important;

  box-sizing: border-box !important;

}



/* Desktop Hover Sheen and Elevation (Disabled on Touch) */

@media (hover: hover) {

  [data-theme="stark_lh"] .card:hover,

  [data-theme="stark_lh"] .crash-card:hover,

  [data-theme="stark_lh"] .p2r-info-card:hover,

  [data-theme="stark_lh"] .contest-card:hover,

  [data-theme="stark_lh"] .stat-card:hover,

  [data-theme="stark_lh"] .cleanup-card:hover {

    border-color: rgba(201, 123, 255, 0.45) !important;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 24px 52px -18px rgba(80, 20, 160, 0.6) !important;

  }



  /* Prevent vertical jitter when hovering over cards that contain tables */

  [data-theme="stark_lh"] .card:has(.table-container):hover,

  [data-theme="stark_lh"] .card:has(.table-wrap):hover,

  [data-theme="stark_lh"] .card:has(.table-responsive):hover,

  [data-theme="stark_lh"] .card:has(table):hover {

    transform: none !important;

  }



  /* Dynamic Radial Spotlight (Flashlight Sheen Following Pointer) */

  [data-theme="stark_lh"] .card::before,

  [data-theme="stark_lh"] .crash-card::before,

  [data-theme="stark_lh"] .p2r-info-card::before,

  [data-theme="stark_lh"] .contest-card::before,

  [data-theme="stark_lh"] .stat-card::before,

  [data-theme="stark_lh"] .cleanup-card::before {

    content: '' !important;

    position: absolute !important;

    inset: 0 !important;

    border-radius: inherit !important;

    pointer-events: none !important;

    opacity: 0 !important;

    transition: opacity 0.3s ease !important;

    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.14), rgba(201, 123, 255, 0.08) 35%, transparent 60%) !important;

    z-index: 1 !important;

  }



  [data-theme="stark_lh"] .card:hover::before,

  [data-theme="stark_lh"] .crash-card:hover::before,

  [data-theme="stark_lh"] .p2r-info-card:hover::before,

  [data-theme="stark_lh"] .contest-card:hover::before,

  [data-theme="stark_lh"] .stat-card:hover::before,

  [data-theme="stark_lh"] .cleanup-card:hover::before,

  [data-theme="stark_lh"] .card.tilting::before {

    opacity: 1 !important;

  }

}



/* Lean Hustle Signature Crescent Specular Glare Reflection ("Жидкое Стекло") */

[data-theme="stark_lh"] .card::after,

[data-theme="stark_lh"] .crash-card::after,

[data-theme="stark_lh"] .p2r-info-card::after,

[data-theme="stark_lh"] .contest-card::after,

[data-theme="stark_lh"] .stat-card::after,

[data-theme="stark_lh"] .cleanup-card::after {

  content: '' !important;

  position: absolute !important;

  left: 7% !important;

  right: 7% !important;

  top: 0 !important;

  height: 40% !important;

  pointer-events: none !important;

  opacity: 0.55 !important;

  border-radius: 0 0 50% 50% / 0 0 100% 100% !important;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent) !important;

  transition: opacity 0.3s ease !important;

  z-index: 2 !important;

}



/* Active 3D Tilting Card State from LeanHustle Engine */

[data-theme="stark_lh"] .card.tilting,

.card.tilting {

  transition: box-shadow 0.25s ease, border-color 0.25s ease !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 30px 64px -24px rgba(80, 20, 160, 0.75) !important;

  border-color: rgba(201, 123, 255, 0.42) !important;

  will-change: transform !important;

}



/* Tactile Card Press Feedback (Non-table cards only) */

[data-theme="stark_lh"] .stat-card:active,

[data-theme="stark_lh"] .p2r-info-card:active,

[data-theme="stark_lh"] .contest-card:active,

[data-theme="stark_lh"] .cleanup-card:active,

[data-theme="stark_lh"] .card:not(:has(table)):not(:has(.table-container)):not(:has(.table-wrap)):not(:has(.table-responsive)):active {

  transform: scale(0.985) translateY(1px) !important;

  transition: transform 0.08s cubic-bezier(0.2, 0.8, 0.2, 1) !important;

}



/* Modals & Full Mobile Scrollability */

[data-theme="stark_lh"] .modal-overlay {

  position: fixed !important;

  inset: 0 !important;

  background: rgba(5, 2, 14, 0.88) !important;

  backdrop-filter: blur(12px) !important;

  -webkit-backdrop-filter: blur(12px) !important;

  align-items: flex-start !important;

  justify-content: center !important;

  overflow-y: auto !important;

  -webkit-overflow-scrolling: touch !important;

  z-index: 10000 !important;

  padding: 20px 14px calc(36px + env(safe-area-inset-bottom)) 14px !important;

  box-sizing: border-box !important;

}



[data-theme="stark_lh"] .modal-overlay[style*="display: none"],

[data-theme="stark_lh"] .modal-overlay[style*="display:none"],

[data-theme="stark_lh"] .modal-overlay.hidden {

  display: none !important;

}



[data-theme="stark_lh"] .modal-card {

  position: relative !important;

  background: linear-gradient(155deg, rgba(24, 12, 42, 0.98), rgba(14, 6, 26, 0.99)) !important;

  border: 1px solid rgba(232, 222, 255, 0.20) !important;

  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.85) !important;

  border-radius: 16px !important;

  overflow-y: auto !important;

  -webkit-overflow-scrolling: touch !important;

  box-sizing: border-box !important;

  max-height: calc(100dvh - 36px) !important;

  width: 100% !important;

  max-width: min(580px, calc(100vw - 24px)) !important;

  margin: auto 0 !important;

  padding: 22px 18px !important;

}



[data-theme="stark_lh"] .modal-card::before,

[data-theme="stark_lh"] .modal-card::after {

  display: none !important;

}



/* Sidebar & Top Bar */

[data-theme="stark_lh"] .top-bar {

  background: rgba(10, 4, 22, 0.88) !important;

  backdrop-filter: blur(16px) saturate(1.4) !important;

  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;

  border-bottom: 1px solid rgba(232, 222, 255, 0.12) !important;

}



[data-theme="stark_lh"] .sidebar {

  background: linear-gradient(180deg, rgba(12, 5, 26, 0.96) 0%, rgba(7, 3, 16, 0.98) 100%) !important;

  backdrop-filter: blur(18px) saturate(1.4) !important;

  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;

  border-right: 1px solid rgba(232, 222, 255, 0.12) !important;

}



[data-theme="stark_lh"] .nav-item {

  border-radius: 10px !important;

  transition: background 0.18s ease, color 0.18s ease !important;

  color: #9a8fb4 !important;

  font-family: var(--font-body), sans-serif !important;

}



[data-theme="stark_lh"] .nav-item:hover:not(.active) {

  background: rgba(201, 123, 255, 0.08) !important;

  color: #f4f0fa !important;

  border-color: rgba(201, 123, 255, 0.2) !important;

}



[data-theme="stark_lh"] .nav-item.active {

  background: linear-gradient(90deg, rgba(201, 123, 255, 0.24) 0%, rgba(201, 123, 255, 0.06) 100%) !important;

  border-left: 3px solid #c97bff !important;

  color: #ffffff !important;

  font-weight: 600 !important;

  box-shadow: 0 0 16px rgba(201, 123, 255, 0.22) !important;

}



/* Primary CTA Button */

[data-theme="stark_lh"] .btn-primary {

  background: linear-gradient(135deg, #c97bff 0%, #ff7be0 100%) !important;

  color: #070310 !important;

  font-weight: 700 !important;

  letter-spacing: 0.02em !important;

  border: none !important;

  box-shadow: 0 4px 16px rgba(201, 123, 255, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;

  border-radius: 10px !important;

  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.15s ease, background 0.15s ease !important;

  touch-action: manipulation;

  user-select: none !important;

}



@media (hover: hover) {

  [data-theme="stark_lh"] .btn-primary:hover {

    background: linear-gradient(135deg, #d38dff 0%, #ff8fe6 100%) !important;

    transform: translateY(-1px) !important;

    box-shadow: 0 6px 22px rgba(201, 123, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;

  }

}



/* Outline & Secondary Buttons */

[data-theme="stark_lh"] .btn-outline,

[data-theme="stark_lh"] .btn-secondary {

  background: linear-gradient(155deg, rgba(201, 123, 255, 0.18), rgba(124, 40, 200, 0.10)) !important;

  border: 1px solid rgba(201, 123, 255, 0.42) !important;

  color: #f4f0fa !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 20px -8px rgba(120, 40, 220, 0.4) !important;

  border-radius: 10px !important;

  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;

  touch-action: manipulation;

  user-select: none !important;

}



@media (hover: hover) {

  [data-theme="stark_lh"] .btn-outline:hover,

  [data-theme="stark_lh"] .btn-secondary:hover {

    border-color: rgba(201, 123, 255, 0.7) !important;

    background: linear-gradient(155deg, rgba(201, 123, 255, 0.28), rgba(124, 40, 200, 0.18)) !important;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 18px rgba(201, 123, 255, 0.4) !important;

    transform: translateY(-1px) !important;

  }

}



/* Tactile Button Press Mechanics (:active) */

[data-theme="stark_lh"] .btn:active,

[data-theme="stark_lh"] .btn-primary:active,

[data-theme="stark_lh"] .btn-secondary:active,

[data-theme="stark_lh"] .btn-outline:active,

[data-theme="stark_lh"] .btn-danger:active,

[data-theme="stark_lh"] .btn-success:active,

.btn:active,

.btn-primary:active,

.btn-secondary:active,

.btn-outline:active,

.btn-danger:active,

.btn-success:active {

  transform: scale(0.96) translateY(1px) !important;

  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45) !important;

  transition: transform 0.08s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.08s ease !important;

}



/* Navigation Item Press */

.sidebar .nav-item:active,

.nav-menu .nav-item:active,

.nav-item:active {

  transform: scale(0.97) !important;

  transition: transform 0.08s ease !important;

}



/* Badges & Monospace Status Pills */

[data-theme="stark_lh"] .pill {

  font-family: var(--font-mono), monospace !important;

  font-size: 11.5px !important;

  letter-spacing: 0.03em !important;

  border: 1px solid rgba(232, 222, 255, 0.16) !important;

  background: rgba(18, 8, 34, 0.6) !important;

  color: #9a8fb4 !important;

  border-radius: 20px !important;

}



[data-theme="stark_lh"] .pill-active,

[data-theme="stark_lh"] .pill.active {

  border-color: #c97bff !important;

  background: rgba(201, 123, 255, 0.18) !important;

  color: #f4f0fa !important;

  box-shadow: 0 0 12px rgba(201, 123, 255, 0.28) !important;

}



/* ========================================================================== */

/* STRICT TABLE IMMUNITY — ZERO DEFORMATION, ZERO DRIFT, CELL BUTTON STABILITY */

/* ========================================================================== */

[data-theme="stark_lh"] .table-wrap,

[data-theme="stark_lh"] .table-container,

[data-theme="stark_lh"] .table-responsive,

.table-wrap,

.table-container,

.table-responsive {

  width: 100% !important;

  max-width: 100% !important;

  overflow-x: auto !important;

  -webkit-overflow-scrolling: touch !important;

  box-sizing: border-box !important;

  display: block !important;

  transform: none !important;

  will-change: auto !important;

}



/* Tables, headers, rows and cells must NEVER tilt or animate */

[data-theme="stark_lh"] table,

[data-theme="stark_lh"] thead,

[data-theme="stark_lh"] tbody,

[data-theme="stark_lh"] tr,

[data-theme="stark_lh"] th,

[data-theme="stark_lh"] td,

table,

thead,

tbody,

tr,

th,

td {

  transform: none !important;

  will-change: auto !important;

  perspective: none !important;

}



/* Container cards holding tables are strictly immune from 3D tilting */

[data-theme="stark_lh"] .card:has(table),

[data-theme="stark_lh"] .card:has(.table-container),

[data-theme="stark_lh"] .card:has(.table-wrap),

[data-theme="stark_lh"] .card:has(.table-responsive) {

  transform: none !important;

  will-change: auto !important;

}



[data-theme="stark_lh"] table thead th {

  background: rgba(20, 8, 38, 0.85) !important;

  color: #c97bff !important;

  font-family: var(--font-mono), monospace !important;

  font-size: 11.5px !important;

  text-transform: uppercase !important;

  letter-spacing: 0.06em !important;

  border-bottom: 1px solid rgba(232, 222, 255, 0.16) !important;

  padding: 10px 12px !important;

}



[data-theme="stark_lh"] table tbody tr {

  border-bottom: 1px solid rgba(232, 222, 255, 0.07) !important;

  transition: background 0.12s ease !important;

}



[data-theme="stark_lh"] table tbody tr:hover {

  background: rgba(201, 123, 255, 0.06) !important;

}



[data-theme="stark_lh"] table td {

  font-size: 12.5px !important;

  color: #f4f0fa !important;

  padding: 10px 12px !important;

}



/* Strict Table Action Buttons: scale self-contained, zero row reflow */

[data-theme="stark_lh"] td .btn,

td .btn {

  transform-origin: center center !important;

  margin: 0 !important;

  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.12s ease !important;

}



@media (hover: hover) {

  [data-theme="stark_lh"] td .btn:hover,

  td .btn:hover {

    transform: translateY(-1px) !important;

  }

}



[data-theme="stark_lh"] td .btn:active,

td .btn:active {

  transform: scale(0.94) !important;

  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45) !important;

  transition: transform 0.06s ease !important;

}



/* Forms, Inputs & Textareas */

[data-theme="stark_lh"] input[type="text"],

[data-theme="stark_lh"] input[type="number"],

[data-theme="stark_lh"] input[type="password"],

[data-theme="stark_lh"] select,

[data-theme="stark_lh"] textarea,

[data-theme="stark_lh"] .form-input {

  background: rgba(18, 8, 34, 0.70) !important;

  border: 1px solid rgba(232, 222, 255, 0.15) !important;

  color: #f4f0fa !important;

  border-radius: 8px !important;

  transition: border-color 0.18s, box-shadow 0.18s !important;

}



[data-theme="stark_lh"] input[type="text"]:focus,

[data-theme="stark_lh"] input[type="number"]:focus,

[data-theme="stark_lh"] input[type="password"]:focus,

[data-theme="stark_lh"] select:focus,

[data-theme="stark_lh"] textarea:focus,

[data-theme="stark_lh"] .form-input:focus {

  border-color: #c97bff !important;

  box-shadow: 0 0 0 2px rgba(201, 123, 255, 0.22), 0 0 14px rgba(201, 123, 255, 0.2) !important;

  outline: none !important;

}



/* Switches & Toggles */

[data-theme="stark_lh"] .switch input:checked + .slider {

  background: linear-gradient(135deg, #c97bff, #ff7be0) !important;

  box-shadow: 0 0 10px rgba(201, 123, 255, 0.45) !important;

}



/* Static 18-20px Icons (Fluent 3D, Telegram Static, SVG) - Strict Dimension Locking */

[data-theme="stark_lh"] .lh-static-ic,

[data-theme="stark_lh"] .fluent-ic,

[data-theme="stark_lh"] .tg-px-ic,

[data-theme="stark_lh"] .sfm-inline-ic,

.lh-static-ic,

.fluent-ic,

.tg-px-ic,

.sfm-inline-ic {

  display: inline-block !important;

  width: 18px !important;

  height: 18px !important;

  max-width: 18px !important;

  max-height: 18px !important;

  aspect-ratio: 1 / 1 !important;

  vertical-align: -3px !important;

  object-fit: contain !important;

  margin-right: 6px !important;

  image-rendering: -webkit-optimize-contrast !important;

  image-rendering: auto !important;

  user-select: none !important;

  flex-shrink: 0 !important;

  contain: paint layout size !important;

}



/* Buttons Icon Sizing */

.btn .tg-px-ic,

.btn .ov-action-ic,

.btn .fluent-ic,

.btn .lh-static-ic,

.btn .sfm-inline-ic {

  width: 16px !important;

  height: 16px !important;

  max-width: 16px !important;

  max-height: 16px !important;

  margin-right: 4px !important;

  vertical-align: -2px !important;

  flex-shrink: 0 !important;

}



.btn-sm .tg-px-ic,

.btn-sm .ov-action-ic,

.btn-sm .fluent-ic,

.btn-sm .lh-static-ic,

.btn-sm .sfm-inline-ic {

  width: 13px !important;

  height: 13px !important;

  max-width: 13px !important;

  max-height: 13px !important;

  margin-right: 3px !important;

  vertical-align: -1px !important;

}



/* Inline SVG vector icon */

.sfm-inline-ic {

  stroke-width: 2;

  vertical-align: -2px !important;

  fill: currentColor;

}



/* Native Apple / iOS Style System Emojis */

[data-theme="stark_lh"] .apple-emoji {

  display: inline-block;

  font-family: -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

  font-style: normal;

  font-weight: 400;

  line-height: 1;

  vertical-align: -0.15em;

  margin: 0 2px;

  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));

  transform: translateZ(0);

  user-select: none;

}



/* Pulsing Status Beacons */

[data-theme="stark_lh"] .lh-beacon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 14px;

  height: 14px;

  position: relative;

  vertical-align: middle;

  margin-right: 6px;

}



[data-theme="stark_lh"] .lh-beacon.online::before {

  content: '';

  position: absolute;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #10b981;

  box-shadow: 0 0 8px #10b981, 0 0 12px rgba(16, 185, 129, 0.5);

}



[data-theme="stark_lh"] .lh-beacon.offline::before {

  content: '';

  position: absolute;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #ef4444;

  box-shadow: 0 0 8px #ef4444;

}



/* Unified Script Logs & Terminal Card */

.log-drawer,

#logDrawer,

.drawer-header {

  display: none !important;

}



.script-log-card {

  background: rgba(18, 22, 34, 0.82) !important;

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.08) !important;

  border-radius: 14px !important;

  padding: 16px 18px !important;

  margin-top: 24px !important;

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;

  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;

  box-sizing: border-box !important;

  max-width: 100% !important;

}



.script-log-card.highlight-pulse {

  border-color: rgba(59, 130, 246, 0.9) !important;

  box-shadow: 0 0 24px rgba(59, 130, 246, 0.4) !important;

}



.script-log-terminal {

  background: rgba(7, 10, 18, 0.92) !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  border-radius: 10px !important;

  padding: 12px 14px !important;

  height: 220px !important;

  max-height: 260px !important;

  overflow-y: auto !important;

  font-family: 'JetBrains Mono', 'Fira Code', 'Roboto Mono', Consolas, monospace !important;

  font-size: 11.5px !important;

  line-height: 1.6 !important;

  color: #cbd5e1 !important;

  -webkit-overflow-scrolling: touch !important;

}



.btn-quick-log {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  padding: 5px 12px !important;

  font-size: 12px !important;

  font-weight: 500 !important;

  border-radius: 8px !important;

  background: rgba(30, 41, 59, 0.75) !important;

  border: 1px solid rgba(255, 255, 255, 0.12) !important;

  color: #e2e8f0 !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

  touch-action: manipulation;

}



/* ==========================================================================

   Comprehensive Mobile Adaptations for STARK × LH Theme (<= 768px)

   ========================================================================== */

@media (max-width: 768px) {

  html, body {

    overflow-x: hidden !important;

    max-width: 100vw !important;

    width: 100% !important;

    position: relative;

  }



  [data-theme="stark_lh"] .app-container {

    overflow-x: hidden !important;

    width: 100% !important;

    max-width: 100vw !important;

    position: relative;

  }



  [data-theme="stark_lh"] .main-content {

    overflow-x: hidden !important;

    width: 100% !important;

    max-width: 100vw !important;

  }



  [data-theme="stark_lh"] .sidebar {

    background: rgba(10, 5, 20, 0.98) !important;

    width: min(300px, 86vw) !important;

    backdrop-filter: blur(20px) !important;

    -webkit-backdrop-filter: blur(20px) !important;

    box-shadow: 8px 0 36px rgba(0, 0, 0, 0.85) !important;

  }



  [data-theme="stark_lh"] .workspace {

    padding: 10px 8px calc(80px + env(safe-area-inset-bottom)) 8px !important;

    overflow-y: auto !important;

    overflow-x: hidden !important;

    -webkit-overflow-scrolling: touch !important;

    width: 100% !important;

    max-width: 100vw !important;

    box-sizing: border-box !important;

  }



  [data-theme="stark_lh"] .workspace > * {

    min-width: 0 !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

  }



  [data-theme="stark_lh"] .card,

  [data-theme="stark_lh"] .crash-card,

  [data-theme="stark_lh"] .p2r-info-card,

  [data-theme="stark_lh"] .contest-card,

  [data-theme="stark_lh"] .stat-card,

  [data-theme="stark_lh"] .cleanup-card {

    padding: 12px 10px !important;

    border-radius: 12px !important;

    backdrop-filter: blur(6px) !important;

    -webkit-backdrop-filter: blur(6px) !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

  }



  /* Disable specular reflections on mobile to save GPU & prevent touch delays */

  [data-theme="stark_lh"] .card::before,

  [data-theme="stark_lh"] .card::after,

  [data-theme="stark_lh"] .crash-card::before,

  [data-theme="stark_lh"] .crash-card::after,

  [data-theme="stark_lh"] .p2r-info-card::before,

  [data-theme="stark_lh"] .p2r-info-card::after {

    display: none !important;

  }



  /* Modals on mobile: full scrollability guaranteed */

  [data-theme="stark_lh"] .modal-overlay {

    padding: 12px 10px calc(30px + env(safe-area-inset-bottom)) 10px !important;

    align-items: flex-start !important;

    justify-content: center !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

  }



  [data-theme="stark_lh"] .modal-card {

    width: 100% !important;

    max-width: calc(100vw - 20px) !important;

    max-height: calc(100dvh - 30px) !important;

    padding: 16px 12px !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    border-radius: 14px !important;

    margin: auto 0 !important;

  }



  /* Tables on mobile */

  [data-theme="stark_lh"] .table-wrap,

  [data-theme="stark_lh"] .table-container,

  [data-theme="stark_lh"] .table-responsive {

    width: 100% !important;

    max-width: 100% !important;

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch !important;

    display: block !important;

    box-sizing: border-box !important;

  }



  [data-theme="stark_lh"] table {

    font-size: 11.5px !important;

    min-width: 520px;

  }



  [data-theme="stark_lh"] table th,

  [data-theme="stark_lh"] table td {

    padding: 7px 8px !important;

    white-space: nowrap;

  }



  /* Top Bar Header */

  [data-theme="stark_lh"] .top-bar {

    padding: 6px 10px !important;

    min-height: 48px !important;

    gap: 6px !important;

  }



  [data-theme="stark_lh"] .view-title {

    font-size: 14.5px !important;

  }



  [data-theme="stark_lh"] #themeToggleBtn {

    padding: 3px 8px !important;

    font-size: 11px !important;

    margin-left: 4px !important;

  }



  [data-theme="stark_lh"] .status-pills {

    gap: 4px !important;

    margin-top: 2px !important;

    width: 100% !important;

  }



  [data-theme="stark_lh"] .pill {

    padding: 2px 7px !important;

    font-size: 10px !important;

  }



  /* Touch targets & buttons */

  [data-theme="stark_lh"] .btn {

    min-height: 38px !important;

    padding: 7px 12px !important;

    font-size: 12.5px !important;

    touch-action: manipulation;

  }



  [data-theme="stark_lh"] .btn-sm {

    min-height: 30px !important;

    padding: 5px 9px !important;

    font-size: 11px !important;

  }



  /* iOS input auto-zoom prevention */

  [data-theme="stark_lh"] input[type="text"],

  [data-theme="stark_lh"] input[type="number"],

  [data-theme="stark_lh"] input[type="password"],

  [data-theme="stark_lh"] select,

  [data-theme="stark_lh"] textarea,

  [data-theme="stark_lh"] .form-input {

    font-size: 16px !important;

    min-height: 38px !important;

  }



  /* Script log terminals on mobile */

  .script-log-card {

    padding: 12px 10px !important;

    margin-top: 16px !important;

  }



  .script-log-terminal {

    height: 180px !important;

    font-size: 10.5px !important;

    padding: 10px !important;

  }

}



/* ─── Compact Mobile (<= 480px) ─── */

@media (max-width: 480px) {

  [data-theme="stark_lh"] .top-bar {

    padding: 4px 8px !important;

    min-height: 44px !important;

  }



  [data-theme="stark_lh"] .view-title {

    font-size: 13.5px !important;

  }



  [data-theme="stark_lh"] .card,

  [data-theme="stark_lh"] .crash-card,

  [data-theme="stark_lh"] .modal-card {

    padding: 10px 8px !important;

  }

}





/* SFM Table Pagination Controls */

.lite-table-nav {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 16px;

    background: rgba(15, 23, 42, 0.7);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 8px;

    margin: 10px 0;

    font-size: 13px;

    color: var(--text-muted);

}

@media (max-width: 768px) {

    .lite-table-nav {

        flex-direction: column;

        gap: 8px;

        align-items: center;

        text-align: center;

        padding: 8px 12px;

    }

}





/* ========================================================================== */

/* Auth Modal Key Icon & Vector Glyphs Fix                                    */

/* ========================================================================== */

.lh-glyph,

.lh-glyph-key,

[data-theme="stark_lh"] .lh-glyph,

[data-theme="stark_lh"] .lh-glyph-key {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 22px !important;

  height: 22px !important;

  max-width: 22px !important;

  max-height: 22px !important;

  vertical-align: -3px !important;

  margin-right: 6px !important;

  flex-shrink: 0 !important;

  line-height: 1 !important;

}



.lh-glyph svg,

.lh-glyph-key svg,

[data-theme="stark_lh"] .lh-glyph svg,

[data-theme="stark_lh"] .lh-glyph-key svg,

#authModal h2 svg,

.modal-card h2 svg {

  width: 22px !important;

  height: 22px !important;

  max-width: 22px !important;

  max-height: 22px !important;

  display: inline-block !important;

  vertical-align: middle !important;

}



#authModal img,

#authModal .fluent-ic,

#authModal .lh-static-ic,

#authModal .tg-anim-ic,

#authModal .tg-px-ic {

  width: 20px !important;

  height: 20px !important;

  max-width: 20px !important;

  max-height: 20px !important;

}



/* Telegram Premium Static Icons (.tg-px-ic) */

[data-theme="stark_lh"] .tg-px-ic,

.tg-px-ic {

  display: inline-block;

  width: 20px;

  height: 20px;

  max-width: 20px;

  max-height: 20px;

  vertical-align: -4px;

  object-fit: contain;

  margin-right: 6px;

  image-rendering: -webkit-optimize-contrast;

  image-rendering: auto;

  user-select: none;

  flex-shrink: 0;

}



.btn .tg-px-ic,

.btn .ov-action-ic,

.btn .fluent-ic,

.btn .lh-static-ic {

  width: 18px !important;

  height: 18px !important;

  max-width: 18px !important;

  max-height: 18px !important;

  margin-right: 2px !important;

  vertical-align: middle !important;

  flex-shrink: 0 !important;

}



/* Match dark text (#070310) on bright pastel .btn-primary in stark_lh theme */

[data-theme="stark_lh"] .btn-primary .ov-action-ic {

  filter: brightness(0.08);

}



/* Unified Balance Filter Controls inside .table-selection-bar */

.sfm-bal-filter-wrap {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  flex-wrap: wrap;

  background: rgba(15, 23, 42, 0.55);

  border: 1px solid rgba(201, 123, 255, 0.22);

  border-radius: 10px;

  padding: 4px 8px;

}



.sfm-bal-filter-label {

  font-size: 11.5px;

  font-weight: 600;

  color: #cbd5e1;

  white-space: nowrap;

}



.sfm-bal-preset-btn {

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.1);

  color: #cbd5e1;

  font-size: 11px;

  font-weight: 600;

  padding: 3px 8px;

  border-radius: 6px;

  cursor: pointer;

  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;

}



.sfm-bal-preset-btn:hover {

  background: rgba(201, 123, 255, 0.14);

  border-color: rgba(201, 123, 255, 0.4);

  color: #fff;

}



.sfm-bal-preset-btn.active {

  background: linear-gradient(135deg, rgba(201, 123, 255, 0.32), rgba(139, 92, 246, 0.28));

  border-color: #c97bff;

  color: #fff;

  box-shadow: 0 0 10px rgba(201, 123, 255, 0.25);

}



.sfm-bal-range-input {

  width: 68px;

  height: 24px;

  padding: 2px 6px;

  font-size: 11.5px;

  color: #f8fafc;

  background: rgba(0, 0, 0, 0.35);

  border: 1px solid rgba(255, 255, 255, 0.14);

  border-radius: 6px;

  outline: none;

  text-align: center;

}



.sfm-bal-range-input:focus {

  border-color: #c97bff;

  box-shadow: 0 0 0 2px rgba(201, 123, 255, 0.2);

}





/* ========================================================================== */

/* Sidebar Navigation & Table Customization Enhancements                       */

/* ========================================================================== */

.sidebar .nav-item img,

.nav-menu .nav-item img,

.nav-item .lh-static-ic,

.nav-item .tg-anim-ic,

.nav-item .tg-px-ic,

.nav-item .fluent-ic {

  width: 20px !important;

  height: 20px !important;

  max-width: 20px !important;

  max-height: 20px !important;

  vertical-align: -3px !important;

  margin-right: 8px !important;

  flex-shrink: 0 !important;

  object-fit: contain !important;

  display: inline-block !important;

}



/* Fancy Icons Toggle Off: hide all static images and display native Unicode emojis */

html[data-fancy-icons="0"] .lh-static-ic,

html[data-fancy-icons="0"] .tg-anim-ic,

html[data-fancy-icons="0"] .fluent-ic,

html[data-fancy-icons="0"] .tg-px-ic {

  display: none !important;

}



/* lh-emoji-plain rule removed: text emojis disabled */



.lh-emoji-plain {

  display: none !important;

}



/* Sortable Table Headers */

.sortable-th {

  cursor: pointer !important;

  user-select: none !important;

  transition: color 0.15s ease, background-color 0.15s ease;

}



.sortable-th:hover {

  color: #38bdf8 !important;

  background: rgba(255, 255, 255, 0.04) !important;

}



.sortable-th .sort-arrow {

  display: inline-block;

  margin-left: 4px;

  font-size: 11px;

  color: #38bdf8;

}



/* Filter Pills Container */

.table-filter-pills {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  flex-wrap: wrap;

}



.table-filter-pill {

  padding: 4px 10px;

  border-radius: 14px;

  font-size: 11.5px;

  font-weight: 600;

  cursor: pointer;

  border: 1px solid rgba(255, 255, 255, 0.1);

  background: rgba(30, 41, 59, 0.6);

  color: var(--text-secondary);

  transition: all 0.15s ease;

  user-select: none;

}



.table-filter-pill:hover {

  background: rgba(255, 255, 255, 0.08);

  color: #fff;

}



.table-filter-pill.active {

  background: rgba(34, 197, 94, 0.2);

  border-color: rgba(34, 197, 94, 0.5);

  color: #4ade80;

}



/* Selection Action Bar */

.table-selection-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding: 8px 14px;

  background: rgba(15, 23, 42, 0.65);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 8px;

  margin-bottom: 10px;

  font-size: 12.5px;

}



/* Styled Table Checkbox */

.sfm-checkbox {

  appearance: none;

  -webkit-appearance: none;

  width: 17px;

  height: 17px;

  border: 1.5px solid rgba(255, 255, 255, 0.35);

  border-radius: 4px;

  background: rgba(0, 0, 0, 0.3);

  cursor: pointer;

  vertical-align: middle;

  position: relative;

  outline: none;

  transition: all 0.15s ease;

  margin: 0;

}



.sfm-checkbox:hover {

  border-color: #4ade80;

}



.sfm-checkbox:checked {

  background: #22c55e;

  border-color: #22c55e;

}



.sfm-checkbox:checked::after {

  content: '';

  position: absolute;

  top: 2px;

  left: 5px;

  width: 4px;

  height: 8px;

  border: solid #ffffff;

  border-width: 0 2px 2px 0;

  transform: rotate(45deg);

}



/* ========================================================================== */

/* DISABLED 3D CARD TILT (USER SETTINGS TOGGLE: data-card-tilt="0")           */

/* ========================================================================== */

html[data-card-tilt="0"] .card,

html[data-card-tilt="0"] .crash-card,

html[data-card-tilt="0"] .p2r-info-card,

html[data-card-tilt="0"] .stat-card,

html[data-card-tilt="0"] .contest-card,

html[data-card-tilt="0"] .cleanup-card {

  transform: none !important;

  will-change: auto !important;

}



html[data-card-tilt="0"] .card:hover,

html[data-card-tilt="0"] .crash-card:hover,

html[data-card-tilt="0"] .p2r-info-card:hover,

html[data-card-tilt="0"] .stat-card:hover,

html[data-card-tilt="0"] .contest-card:hover,

html[data-card-tilt="0"] .cleanup-card:hover {

  transform: none !important;

}



html[data-card-tilt="0"] .card::before,

html[data-card-tilt="0"] .crash-card::before,

html[data-card-tilt="0"] .p2r-info-card::before,

html[data-card-tilt="0"] .stat-card::before,

html[data-card-tilt="0"] .contest-card::before,

html[data-card-tilt="0"] .cleanup-card::before {

  opacity: 0 !important;

}



/* ========================================================================== */
/* Telegram iOS Native Vector SVG Icons (.tg-svg-ic)                          */
/* ========================================================================== */
[data-theme="stark_lh"] .tg-svg-ic,
.tg-svg-ic {
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  aspect-ratio: 1 / 1 !important;
  vertical-align: -3px !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
  flex-shrink: 0 !important;
}

.btn .tg-svg-ic,
.btn .ov-action-ic,
.action-btn .tg-svg-ic {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  margin-right: 5px !important;
  vertical-align: -2px !important;
  flex-shrink: 0 !important;
}

.btn-sm .tg-svg-ic {
  width: 13.5px !important;
  height: 13.5px !important;
  max-width: 13.5px !important;
  max-height: 13.5px !important;
  margin-right: 4px !important;
  vertical-align: -2px !important;
}

.nav-item .tg-svg-ic {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  vertical-align: -4px !important;
  margin-right: 8px !important;
}

.subnav-tab .tg-svg-ic {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  vertical-align: -2.5px !important;
  margin-right: 6px !important;
}

.card-title .tg-svg-ic,
.section-title .tg-svg-ic,
h3 .tg-svg-ic,
h4 .tg-svg-ic,
h5 .tg-svg-ic {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  vertical-align: -3px !important;
  margin-right: 6px !important;
}

.badge .tg-svg-ic,
.pill .tg-svg-ic,
.table-filter-pill .tg-svg-ic,
.cleanup-tab-pill .tg-svg-ic {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  vertical-align: -2px !important;
  margin-right: 4px !important;
}

.btn-close-modal .tg-svg-ic,
.mobile-sidebar-close .tg-svg-ic {
  width: 13px !important;
  height: 13px !important;
  vertical-align: -1px !important;
  margin: 0 !important;
}

/* fancy-icons=0 rule removed: SVGs always rendered */



/* ==========================================================================
   SFM Modern Promo Banner — Authentic Liquid Glass & Lean Hustle Onyx
   ========================================================================== */
.sfm-promo-dock {
  display: block;
  width: 100%;
  padding: 0 32px;
  margin: 0 0 16px 0;
  box-sizing: border-box;
  flex-shrink: 0;
  z-index: 10;
  transition: opacity 0.3s ease;
}

.sfm-promo-card {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.085), rgba(180, 90, 255, 0.05) 42%, rgba(18, 8, 32, 0.32));
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(232, 222, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 18px 36px -18px rgba(0, 0, 0, 0.75);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}

.sfm-promo-card::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  top: 0;
  height: 38%;
  pointer-events: none;
  opacity: 0.42;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
  transition: opacity 0.3s ease;
  z-index: 4;
}

@media (hover: hover) {
  .sfm-promo-card:hover {
    transform: translateY(-2px);
    border-color: rgba(201, 123, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 24px 48px -16px rgba(122, 31, 196, 0.5);
  }
  .sfm-promo-card:hover .sfm-promo-media img {
    transform: scale(1.008);
  }
  .sfm-promo-card:hover .sfm-promo-cta {
    background: rgba(201, 123, 255, 0.24);
    border-color: rgba(201, 123, 255, 0.6);
    color: #fff;
    box-shadow: 0 0 14px rgba(201, 123, 255, 0.4);
  }
  .sfm-promo-card:hover .sfm-promo-arrow {
    transform: translateX(3px);
  }
}

.sfm-promo-card:active {
  transform: scale(0.995) translateY(0);
  transition: transform 0.08s ease;
}

.sfm-promo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(14, 6, 26, 0.85);
  border-bottom: 1px solid rgba(232, 222, 255, 0.08);
  position: relative;
  z-index: 5;
  gap: 10px;
}

.sfm-promo-main-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  gap: 10px;
}

.sfm-promo-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.sfm-promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(201, 123, 255, 0.22), rgba(255, 123, 224, 0.15));
  border: 1px solid rgba(201, 123, 255, 0.45);
  color: #f4f0fa;
  font-family: var(--font-disp, 'Unbounded', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.sfm-promo-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lh-accent, #c97bff);
  box-shadow: 0 0 6px var(--lh-accent, #c97bff);
}

.sfm-promo-dot {
  color: rgba(232, 222, 255, 0.35);
  font-size: 12px;
  flex-shrink: 0;
}

.sfm-promo-summary {
  font-family: var(--font-body, 'Archivo', sans-serif);
  font-size: 12.5px;
  font-weight: 600;
  color: #f4f0fa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

.sfm-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 8px;
  background: rgba(201, 123, 255, 0.12);
  border: 1px solid rgba(201, 123, 255, 0.28);
  color: var(--lh-accent, #c97bff);
  font-family: var(--font-disp, 'Unbounded', sans-serif);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sfm-promo-arrow {
  display: inline-block;
  font-size: 12px;
  transition: transform 0.2s ease;
}

.sfm-promo-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(232, 222, 255, 0.12);
  color: var(--lh-dim, #9a8fb4);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: all 0.2s ease;
}

.sfm-promo-toggle:hover {
  background: rgba(201, 123, 255, 0.18);
  border-color: rgba(201, 123, 255, 0.4);
  color: #fff;
}

.sfm-promo-toggle-icon {
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sfm-promo-media {
  position: relative;
  overflow: hidden;
  background: #000;
  line-height: 0;
  max-height: 480px;
  transition: max-height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
}

.sfm-promo-img-anchor {
  display: block;
  text-decoration: none;
  cursor: pointer;
  line-height: 0;
}

.sfm-promo-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  object-position: center;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sfm-promo-dock.collapsed .sfm-promo-media {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.sfm-promo-dock.collapsed .sfm-promo-bar {
  border-bottom: none;
}

.sfm-promo-dock:not(.collapsed) .sfm-promo-toggle-icon {
  transform: rotate(180deg);
}

@media (max-width: 1024px) {
  .sfm-promo-dock {
    padding: 0 20px;
    margin-bottom: 12px;
  }
  .sfm-promo-card {
    max-width: 680px;
  }
}

@media (max-width: 680px) {
  .sfm-promo-dock {
    padding: 0 10px;
    margin-bottom: 10px;
  }
  .sfm-promo-card {
    border-radius: 12px;
    max-width: 100%;
  }
  .sfm-promo-bar {
    padding: 7px 10px;
    gap: 6px;
  }
  .sfm-promo-main-link {
    gap: 6px;
  }
  .sfm-promo-info {
    gap: 6px;
  }
  .sfm-promo-badge {
    font-size: 8.5px;
    padding: 2.5px 7px;
  }
  .sfm-promo-summary {
    font-size: 11.5px;
  }
  .sfm-promo-cta {
    font-size: 10px;
    padding: 3px 8px;
  }
  .sfm-promo-toggle {
    width: 26px;
    height: 26px;
  }
  .sfm-promo-media img {
    max-height: 240px;
  }
}

/* Permanent Vector SVG Icons Rule */
.tg-svg-ic {
  display: inline-block !important;
  vertical-align: -2.5px !important;
  object-fit: contain !important;
  image-rendering: auto !important;
}

/* Permanent Vector SVG Icons Rule */
.tg-svg-ic {
  display: inline-block !important;
  vertical-align: -2.5px !important;
  object-fit: contain !important;
  image-rendering: auto !important;
}