:root {
   --primary: #4338ca;
   --accent: #d97706;
   --green: #059669;
   --blue-primary: #1e1b4b;
   --bg: #f8fafc;
   --surface: #ffffff;
   --text-main: #020617;
   --text-sub: #475569;
   --border: #cbd5e1;
   --radius: 16px;
   --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1)
 }
 
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Plus Jakarta Sans', sans-serif
 }
 
 body {
   background: var(--bg);
   color: var(--text-main);
   padding-bottom: 0 !important;
   padding-top: 72px;
   -webkit-tap-highlight-color: transparent;
   overflow-x: hidden
 }
 
 body.is-app footer {
   display: none !important
 }

html.is-app .adsense-slot {
  display: none !important;
}
 
 button {
   cursor: pointer;
   border: none;
   background: 0 0
 }
 
 input,
 select,
 textarea {
   font-family: inherit
 }
 
 .hidden {
   display: none !important
 }
 
 a {
   text-decoration: none;
   color: inherit
 }
 
 .container {
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 16px;
   position: relative
 }
 
 .legal-page-body {
   background: var(--bg);
   color: var(--text-main);
   padding-top: 0;
   line-height: 1.7;
 }
 
 .legal-page {
   max-width: 980px;
   margin: 0 auto;
   padding: 32px 18px 72px;
 }
 
 .legal-topbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 12px;
   margin-bottom: 22px;
 }
 
 .legal-back-link,
 .legal-nav a,
 .legal-footer-links a,
 .legal-page-nav a {
   color: var(--primary);
   text-decoration: none;
   font-weight: 700;
 }
 
 .legal-back-link:hover,
 .legal-nav a:hover,
 .legal-footer-links a:hover,
 .legal-page-nav a:hover {
   text-decoration: underline;
 }
 
 .legal-nav,
 .legal-page-nav,
 .legal-footer-links {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   align-items: center;
 }
 
 .legal-card {
   background: var(--surface);
   border-radius: 18px;
   padding: 32px 28px;
   box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
   border: 1px solid var(--border);
 }
 
 .legal-title {
   font-size: clamp(2rem, 3vw, 2.6rem);
   margin: 0 0 14px;
   line-height: 1.2;
 }
 
 .legal-page h2 {
   font-size: 1.15rem;
   margin-top: 28px;
   margin-bottom: 10px;
 }
 
 .legal-page p,
 .legal-page li,
 .legal-page .legal-lead {
   color: var(--text-sub);
   font-size: 1rem;
 }
 
 .legal-page ul {
   margin: 12px 0 18px 20px;
   padding: 0;
 }
 
 .legal-page strong {
   color: var(--text-main);
 }
 
 .legal-footer-links {
   margin-top: 28px;
   padding-top: 18px;
   border-top: 1px solid var(--border);
 }
 
 .legal-header {
   position: sticky;
   top: 0;
   left: 0;
   right: 0;
   z-index: 50;
 }
 
 .legal-inner-nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   flex-wrap: wrap;
   min-height: 64px;
 }
 
 .legal-logo {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-weight: 800;
 }
 
 .legal-content-shell {
   max-width: 960px;
   padding-top: 24px;
 }
 
 .legal-intro {
   margin-bottom: 20px;
 }
 
 .legal-eyebrow {
   margin: 0 0 8px;
   color: var(--primary);
   font-weight: 700;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   font-size: 12px;
 }
 
 .legal-lead {
   margin: 0;
   color: var(--text-sub);
 }
 
 .legal-page-body .header {
   max-width: 1400px;
   margin: 0 auto;
 }
 
 .header .nav-bar.legal-inner-nav {
   justify-content: space-between;
 }
 
 @media (max-width: 640px) {
   .legal-page {
     padding-left: 14px;
     padding-right: 14px;
   }
 
   .legal-card {
     padding: 24px 18px;
   }
 }
 
 .header {
   background: rgba(255, 255, 255, .9);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 50;
   border-bottom: 1px solid rgba(255, 255, 255, .5);
   padding: 12px 0;
   box-shadow: 0 4px 30px rgba(0, 0, 0, .03);
   max-width: 1400px;
   margin: 0 auto
 }
 
 .nav-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 100%
 }
 
 .nav-right-group {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-left: auto
 }
 
 .nav-actions {
   display: flex;
   gap: 12px;
   align-items: center;
   flex-shrink: 0;
   transition: opacity .2s
 }
 
 .logo {
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   perspective: 1000px
 }
 
 .logo-text {
   font-size: 16px;
   font-weight: 800;
   background: linear-gradient(135deg, #4f46e5, #9333ea);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   letter-spacing: -.3px;
   transition: transform .3s cubic-bezier(.175, .885, .32, 1.275);
   display: inline-block;
   position: relative;
   line-height: 1
 }
 
 .logo:hover {
   transform: scale(1.05)
 }
 
 .logo-text::after {
   content: '';
   position: absolute;
   bottom: -1px;
   left: 0;
   width: 0;
   height: 1.5px;
   background: linear-gradient(90deg, #4f46e5, #9333ea);
   transition: width .3s ease;
   border-radius: 2px
 }
 
 .logo:hover .logo-text::after {
   width: 100%
 }
 
 .logo span {
   color: var(--accent)
 }
 
 .nav-icon {
   width: 22px;
   height: 22px;
   stroke: currentColor;
   stroke-width: 2;
   fill: none;
   stroke-linecap: round;
   stroke-linejoin: round;
   display: block
 }
 
 .header.search-mode .logo,
 .header.search-mode .nav-right-group {
   opacity: 0;
   pointer-events: none
 }
 
 .search-container {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: auto;
   background: #fff;
   z-index: 100;
   flex-direction: column;
   align-items: stretch;
   padding: 0;
   animation: slideDown .2s cubic-bezier(.16, 1, .3, 1);
   box-shadow: 0 15px 40px -10px rgba(0, 0, 0, .15);
   border-radius: 0 0 24px 24px;
   overflow: hidden
 }
 
 .search-container.active {
   display: flex !important
 }
 
 .search-header-row {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 16px 24px !important;
   background: #fff;
   z-index: 2;
   position: relative;
   height: auto !important;
   min-height: 72px
 }
 
 .search-back-btn {
   width: 40px;
   height: 40px;
   font-size: 20px;
   color: var(--text-main);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   cursor: pointer;
   transition: all .3s cubic-bezier(.25, .8, .25, 1);
   background: #f8fafc
 }
 
 .search-back-btn:hover {
   background: #e2e8f0;
   transform: scale(1.08)
 }
 
 .search-back-btn:active {
   transform: scale(.95)
 }
 
 .search-input-wrapper {
   flex: 1;
   display: flex;
   align-items: center;
   background: #f1f5f9;
   border-radius: 24px !important;
   padding: 0 20px !important;
   height: 48px !important;
   border: 1px solid transparent;
   transition: all .2s
 }
 
 .search-input-wrapper:focus-within {
   border-color: var(--primary);
   background: #fff;
   box-shadow: 0 0 0 3px rgba(79, 70, 229, .1)
 }
 
 .search-input {
   flex: 1;
   padding: 10px 0;
   border: none;
   background: 0 0;
   font-size: 16px;
   font-weight: 500;
   outline: 0;
   color: var(--text-main)
 }
 
 .search-input::placeholder {
   color: #94a3b8;
   font-weight: 400
 }
 
 .search-actions-right {
   display: flex;
   align-items: center;
   gap: 4px
 }
 
 .search-action-icon {
   font-size: 18px;
   color: var(--text-sub);
   padding: 8px;
   cursor: pointer;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: .2s
 }
 
 .search-action-icon:hover {
   color: var(--primary);
   background: rgba(79, 70, 229, .1)
 }
 
 .filter-panel {
   width: 100%;
   background: #fff;
   max-height: 0;
   overflow: hidden;
   opacity: 0;
   transition: all .3s cubic-bezier(.4, 0, .2, 1);
   border-top: 1px solid transparent
 }
 
 .filter-panel.open {
   max-height: 75vh;
   opacity: 1;
   border-top-color: #f1f5f9;
   overflow-y: auto;
   padding-bottom: 20px
 }
 
 .fp-section {
   padding: 20px 24px
 }
 
 .fp-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .country-currency-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   min-width: 24px;
   height: 24px;
   font-size: 14px;
   line-height: 1;
   flex: 0 0 24px;
   overflow: hidden;
   border-radius: 4px;
   cursor: default;
   margin-bottom: 12px
 }
 
 .fp-title {
   font-size: 11px;
   font-weight: 800;
   color: var(--text-sub);
   text-transform: uppercase;
   letter-spacing: 1px
 }
 
 .fp-grid {
   display: flex;
   flex-wrap: nowrap;
   gap: 8px;
   overflow-x: auto;
   padding-bottom: 4px;
   -ms-overflow-style: none;
   cursor: grab
 }
 
 .fp-grid:active {
   cursor: grabbing
 }
 
 .fp-grid::-webkit-scrollbar {
   display: none
 }
 
 .fp-chip {
   padding: 8px 16px;
   border-radius: 12px;
   background: #f8fafc;
   border: 1px solid var(--border);
   font-size: 13px;
   font-weight: 600;
   color: var(--text-sub);
   cursor: pointer;
   transition: all .2s;
   display: flex;
   align-items: center;
   gap: 6px;
   flex-shrink: 0
 }
 
 .fp-chip:hover {
   transform: translateY(-2px);
   border-color: var(--primary);
   color: var(--primary)
 }
 
 .fp-chip.active {
   background: var(--text-main);
   color: #fff;
   border-color: var(--text-main);
   box-shadow: 0 4px 10px rgba(15, 23, 42, .2)
 }
 
 .sort-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px
 }
 
 .sort-btn {
   text-align: center;
   padding: 10px;
   border-radius: 10px;
   border: 1px solid var(--border);
   background: rgba(255, 255, 255, .548);
   font-size: 12px;
   font-weight: 600;
   color: var(--text-sub);
   cursor: pointer
 }
 
 .sort-btn.active {
   background: #cad0e6;
   color: var(--primary);
   border-color: var(--primary)
 }
 
 .adsense-banner-shell {
   width: min(100%, 728px);
   max-width: 728px;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 4px 0;
   margin: 6px auto;
   box-sizing: border-box;
   border: 1px solid #e2e8f0;
   border-radius: 12px;
   background: linear-gradient(135deg, #f8fafc 0, #eef2ff 100%);
   min-height: 90px;
   overflow: hidden;
   position: relative;
   font-family: Arial, sans-serif
 }
 
 .adsense-slot-inner {
   width: 100%;
   max-width: 728px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: relative
 }
 
 .adsense-banner-shell .adsense-label {
   position: absolute;
   top: 6px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 2
 }
 
 .adsense-banner-shell .adsbygoogle,
 .adsense-banner-shell .adsbygoogle iframe,
 .adsense-banner-shell .adsbygoogle>div {
   display: block !important;
   width: 100% !important;
   max-width: 728px !important;
   margin: 0 auto !important;
   overflow: hidden !important;
   height: auto !important;
   min-height: 90px !important
 }
 
 .adsense-banner-shell .adsense-label {
   font-size: 9px;
   font-weight: 800;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: #64748b;
   text-align: center;
   margin-bottom: 3px
 }
 
 .adsense-feed-slot {
   grid-column: 1/-1;
   width: min(100%, 728px);
   max-width: 728px;
   margin: 8px auto
 }
 
 .adsense-store-slot,
 .adsense-view-slot {
   width: min(100%, 728px);
   max-width: 728px
 }
 
 .store-items-header {
   display: flex !important;
   justify-content: space-between !important;
   align-items: center !important;
   gap: 10px !important;
   flex-wrap: wrap !important;
   margin-bottom: 8px !important
 }
 
 .store-loc {
   font-size: 8px !important;
   color: var(--text-sub) !important;
   display: inline-flex !important;
   align-items: center !important;
   gap: 4px !important;
   margin: 0 !important;
   line-height: 1.2 !important;
   white-space: nowrap !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   font-weight: 600 !important
 }
 
 .card-loc {
   font-size: 8px !important;
   line-height: 1.2 !important;
   white-space: nowrap !important
 }
 
 @media (max-width:640px) {
   .adsense-banner-shell {
     width: min(100%, 320px);
     max-width: 320px;
     min-height: 90px;
     padding: 3px 0;
     border-radius: 10px;
     margin: 6px auto;
     display: flex !important;
     justify-content: center !important;
     align-items: center !important
   }
 
   .adsense-slot-inner {
     width: 100%;
     max-width: 320px;
     margin: 0 auto;
     align-items: center;
     justify-content: center;
     position: relative
   }
 
   .adsense-banner-shell .adsbygoogle,
   .adsense-banner-shell .adsbygoogle iframe,
   .adsense-banner-shell .adsbygoogle>div {
     width: 100% !important;
     max-width: 320px !important;
     height: auto !important;
     min-height: 90px !important;
     max-height: none !important
   }
 
   .adsense-banner-shell .adsense-label {
     display: block !important;
     position: absolute;
     top: 6px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 2
   }
 
   .adsense-store-slot,
   .adsense-view-slot {
     margin: 6px auto 2px
   }
 }
 
 .modal.map-modal {
  position: fixed !important;
  top: 100%;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background: var(--bg) !important;
  z-index: 9999;
  transition: top .4s cubic-bezier(.175, .885, .32, 1.275);
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  opacity: 1 !important;
  visibility: visible;
}

.modal.map-modal.active {
  top: 0;
}
 
 .compact-map-header {
   height: 65px;
   background: var(--surface);
   display: flex;
   align-items: center;
   padding: 0 10px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, .1);
   z-index: 10000;
   width: 100%;
   gap: 6px;
   transition: all .3s ease
 }
 
 .map-back-btn {
   font-size: 18px;
   background: #f1f5f9;
   border: none;
   padding: 8px 10px;
   border-radius: 12px;
   font-weight: 700;
   color: var(--text-main);
   cursor: pointer;
   flex-shrink: 0
 }
 
 .map-header-actions {
   display: flex;
   gap: 6px;
   transition: all .4s cubic-bezier(.175, .885, .32, 1.275);
   overflow: hidden
 }
 
 #map-category-drawer {
   width: 100%;
   background: rgba(255, 255, 255, .98);
   border-top: 1px solid rgba(148, 163, 184, .24);
   padding: 10px 12px 16px;
   display: flex;
   flex-wrap: nowrap;
   gap: 8px;
   overflow-x: auto;
   align-items: center;
   box-shadow: inset 0 1px 0 rgba(148, 163, 184, .08);
   transition: transform .3s ease, opacity .3s ease;
   overscroll-behavior-x: contain;
 }
 
 #map-category-drawer.hidden {
   display: none !important;
 }
 
 .map-cat-item {
   opacity: 1;
 }
 
 .map-cat-item .drop {
   opacity: 1 !important;
   transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease;
 }
 
 .map-cat-item .drop:hover {
   transform: scale(1.05);
   box-shadow: 0 6px 16px rgba(59, 130, 246, .18);
 }
 
 #map-category-btn.active .drop {
   background: #eef2ff !important;
   border-color: #6366f1 !important;
 }
 
 .map-search-wrapper {
   flex: 1;
   display: flex;
   align-items: center;
   background: #f8fafc;
   min-width: 100px;
   border-radius: 20px;
   border: 1px solid var(--border);
   padding: 0 10px;
   transition: all .4s cubic-bezier(.175, .885, .32, 1.275)
 }
 
 .compact-map-header:has(#map-search-input:focus) .map-header-actions {
   opacity: 0;
   width: 0;
   padding: 0;
   margin: 0;
   transform: scale(.5);
   pointer-events: none
 }
 
 .compact-map-header:has(#map-search-input:focus) .map-search-wrapper {
   flex: 1 1 100%;
   border-color: var(--primary);
   background: #fff;
   box-shadow: 0 0 0 4px rgba(67, 56, 202, .15)
 }
 
 #map-search-input {
   width: 100%;
   padding: 10px 0;
   border: none;
   background: 0 0;
   font-size: 13px;
   font-weight: 600;
   outline: 0
 }
 
 #map-mic-btn {
   font-size: 16px;
   background: 0 0;
   border: none;
   padding: 6px;
   cursor: pointer;
   transition: all .3s ease;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center
 }
 
 .map-action-btn {
   color: #fff;
   border: none;
   padding: 10px;
   border-radius: 14px;
   font-size: 14px;
   font-weight: 800;
   cursor: pointer;
   white-space: nowrap;
   transition: all .3s cubic-bezier(.25, .8, .25, 1);
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center
 }
 
 .btn-radar {
   background: linear-gradient(135deg, #10b981, #059669);
   box-shadow: 0 4px 10px rgba(16, 185, 129, .3)
 }
 
 .map-action-btn:active {
   transform: scale(.9)
 }
 
 .floating-gps-btn {
   position: absolute;
   bottom: 80px;
   right: 20px;
   z-index: 9998;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: #fff;
   border: 3px solid var(--primary);
   color: var(--primary);
   box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: .2s
 }
 
 .floating-gps-btn:active {
   transform: scale(.85);
   background: #f1f5f9
 }
 
 .floating-share-btn {
   position: absolute;
   bottom: 140px;
   right: 20px;
   z-index: 9998;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: #fff;
   border: 3px solid #8b5cf6;
   color: #8b5cf6;
   box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: .2s
 }
 
 .floating-share-btn:active {
   transform: scale(.85);
   background: #f8fafc
 }
 
 .map-canvas-container {
   width: 100%;
   height: calc(100vh - 65px);
   background: #e5e7eb;
   position: relative;
   z-index: 1;
   transition: all 1s cubic-bezier(.25, 1, .5, 1);
   transform-origin: center center
 }

 .global-map-loading-overlay {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(245, 247, 250, 0.92);
   z-index: 9999;
 }
 
 .cinematic-active {
   border: 4px solid #ec4899;
   box-shadow: inset 0 0 100px rgba(236, 72, 153, .2);
   pointer-events: auto
 }
 
 .recording-active {
   animation: micPulse .6s infinite alternate !important;
   background: rgba(239, 68, 68, .1) !important;
   transform: scale(1.15);
   color: #ef4444 !important
 }
 
 .hub-pin {
   background: #fff;
   width: 64px;
   height: 64px;
   border-radius: 50%;
   border: 4px solid #f59e0b;
   box-shadow: 0 0 25px rgba(245, 158, 11, .8);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   z-index: 999
 }
 
 .hub-pin img {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   object-fit: cover
 }
 
 .hub-pulse {
   position: absolute;
   width: 160px;
   height: 160px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(245, 158, 11, .4) 0, rgba(245, 158, 11, 0) 70%);
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   animation: sonarPulse 2s infinite ease-out;
   z-index: -1;
   pointer-events: none
 }
 
 .laser-line {
   stroke-dasharray: 10 15;
   animation: laserFlow 1s linear infinite;
   filter: drop-shadow(0px 0px 4px rgba(67, 56, 202, .8))
 }
 
 .transparent-icon-bg {
   background: 0 0;
   border: none
 }
 
 .pin-marker-wrapper {
   position: relative;
   width: 44px;
   height: 75px;
   pointer-events: none
 }
 
 .live-category-icon {
   position: absolute;
   top: -16px;
   left: 50%;
   font-size: 20px;
   z-index: 10;
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5))
 }
 
 .anim-vehicle {
   animation: driveAnim .6s infinite alternate
 }
 
 .anim-property {
   animation: floatAnim 1.5s infinite alternate ease-in-out
 }
 
 .anim-electronics {
   animation: pulseAnim 1s infinite alternate
 }
 
 .pin-marker {
   position: absolute;
   top: 10px;
   left: 6px;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   border: 3px solid #fff;
   box-shadow: 0 6px 12px rgba(0, 0, 0, .18);
   z-index: 2;
   pointer-events: auto;
   cursor: pointer;
   overflow: hidden;
   background: #fff
 }
 
 .pin-marker img {
   width: 150%;
   height: 150%;
   object-fit: cover;
   transform: rotate(0) translate(0, 0)
 }
 
 .pin-marker-shadow {
   position: absolute;
   top: 38px;
   left: 4px;
   width: 36px;
   height: 12px;
   background: radial-gradient(ellipse at center, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, 0) 70%);
   border-radius: 50%;
   z-index: 1;
   pointer-events: none
 }
 
 .pin-distance-tag {
   position: absolute;
   top: 50px;
   left: 50%;
   transform: translateX(-50%);
   background: rgba(15, 23, 42, .9);
   color: #10b981;
   font-size: 10px;
   font-weight: 900;
   padding: 3px 6px;
   border-radius: 10px;
   white-space: nowrap;
   border: 1px solid rgba(16, 185, 129, .4);
   box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
   z-index: 5;
   display: flex;
   align-items: center;
   gap: 2px;
   pointer-events: none
 }
 
 .pin-distance-tag span {
   color: #fff;
   font-size: 8px
 }
 
 .image-cluster-wrapper {
   position: relative;
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: #fff;
   border: 4px solid var(--primary);
   box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: visible;
   transition: transform .2s
 }
 
 .image-cluster-wrapper:hover {
   transform: scale(1.1);
   z-index: 1000 !important
 }
 
 .image-cluster-wrapper img {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   object-fit: cover
 }
 
 .cluster-count-badge {
   position: absolute;
   top: -6px;
   right: -6px;
   background: linear-gradient(135deg, #ef4444, #dc2626);
   color: #fff;
   font-size: 12px;
   font-weight: 900;
   padding: 2px 6px;
   border-radius: 20px;
   border: 2px solid #fff;
   box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
   min-width: 20px;
   text-align: center
 }
 
 .nearby-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: min(30vh, 240px);
  background: rgba(255, 255, 255, .98);
  border-radius: 14px 14px 0 0;
  z-index: 10003;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .1);
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.175, .885, .32, 1.275);
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(15, 23, 42, .08);
  overflow: hidden;
}

 .nearby-panel .close-panel-btn {
   top: 10px;
   right: 10px;
   position: absolute;
   z-index: 10004;
 }
 
 .nearby-panel.active {
   transform: translateY(0)
 }
 
 .nearby-panel-header {
   position: relative;
   padding: 8px 12px 6px;
   border-bottom: 1px solid rgba(0, 0, 0, .08);
   display: flex;
   flex-direction: column;
   gap: 2px;
 }
 
 .nearby-panel-header .inline-style-247 {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 8px;
   padding-right: 42px;
   min-height: 34px;
 }
 
 .nearby-radius-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2px;
  padding: 8px 16px; /* Fixes slider placement */
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}
 
 .radius-summary {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 6px;
   margin-bottom: 0;
 }
 
 .radius-summary span {
   font-size: 12px;
   color: var(--text-main);
   font-weight: 700;
 }
 
 .close-panel-btn {
  position: absolute !important;
  top: 10px;
  right: 10px;
  background: rgba(15, 23, 42, .16);
  color: var(--text-main);
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  z-index: 30;
}

 .nearby-panel {
   z-index: 10005;
 }
 
 .nearby-items-list {
  padding: 12px 16px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1; /* Forces the list to fill remaining space */
  min-height: 0; /* Allows scrolling inside flexbox */
}
 
 .nearby-list-item {
   display: flex;
   gap: 12px;
   padding: 12px;
   background: #fff;
   border-radius: 16px;
   align-items: center;
   box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
   cursor: pointer;
   border: 1px solid transparent;
   transition: .2s
 }
 
 .nearby-list-item:hover {
   border-color: var(--primary);
   transform: translateY(-2px)
 }
 
 .nearby-list-item img {
   width: 50px;
   height: 50px;
   border-radius: 12px;
   object-fit: cover
 }
 
 .distance-badge {
   background: #e0e7ff;
   color: var(--primary);
   font-size: 11px;
   font-weight: 900;
   padding: 6px 10px;
   border-radius: 12px;
   white-space: nowrap
 }
 
 .custom-map-popup .leaflet-popup-content-wrapper {
   border-radius: 16px;
   padding: 0;
   overflow: hidden;
   box-shadow: 0 15px 30px rgba(0, 0, 0, .25);
   border: 1px solid rgba(255, 255, 255, .5)
 }
 
 .custom-map-popup .leaflet-popup-content {
   margin: 0;
   width: 220px !important
 }
 
 .custom-map-popup .leaflet-popup-tip-container {
   display: none
 }
 
 .popup-img {
   width: 100%;
   height: 110px;
   object-fit: cover
 }
 
 .popup-info {
   padding: 12px;
   background: #fff
 }
 
 .popup-info h4 {
   margin: 0 0 6px 0;
   font-size: 14px;
   font-weight: 900;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--text-main)
 }
 
 .popup-info .cat-badge {
   display: inline-block;
   padding: 2px 8px;
   border-radius: 6px;
   font-size: 9px;
   font-weight: 900;
   color: #fff;
   margin-bottom: 6px;
   text-transform: uppercase;
   letter-spacing: .5px
 }
 
 .popup-btn {
   width: 100%;
   padding: 8px;
   background: linear-gradient(135deg, var(--primary), #6366f1);
   color: #fff;
   border: none;
   border-radius: 8px;
   cursor: pointer;
   font-weight: 800;
   font-size: 12px;
   margin-top: 8px
 }
 
 .leaflet-control-layers {
   border-radius: 12px !important;
   border: none !important;
   box-shadow: 0 4px 15px rgba(0, 0, 0, .2) !important;
   padding: 6px !important
 }
 
 #map-filter-panel {
   transition: all .3s cubic-bezier(.4, 0, .2, 1);
   transform-origin: top center;
   border-top: 1px solid transparent
 }
 
 #map-filter-panel.open {
   border-top-color: #e2e8f0
 }
 
 #map-preview-radius {
   background: linear-gradient(135deg, var(--primary), #6366f1);
   color: #fff;
   font-size: 11px;
   font-weight: 900;
   padding: 4px 10px;
   border-radius: 12px;
   box-shadow: 0 4px 10px rgba(67, 56, 202, .3);
   white-space: nowrap
 }
 
 .map-cat-chip {
   background: #f1f5f9;
   color: #475569;
   border: 1px solid #cbd5e1;
   padding: 6px 14px;
   border-radius: 20px;
   font-size: 11px;
   font-weight: 800;
   white-space: nowrap;
   cursor: pointer;
   transition: all .2s cubic-bezier(.4, 0, .2, 1)
 }
 
 .map-cat-chip:hover {
   background: #e2e8f0
 }
 
 .map-cat-chip.active {
   background: var(--primary);
   color: #fff;
   border-color: var(--primary);
   box-shadow: 0 4px 10px rgba(67, 56, 202, .3)
 }
 
 .map-smart-filters {
   position: absolute;
   top: 160px;
   left: 15px;
   z-index: 1000;
   display: flex;
   flex-direction: column;
   gap: 12px;
   width: 10px;
   height: auto;
   max-height: 60vh;
   padding: 10px 0;
   overflow: hidden;
   -ms-overflow-style: none;
   transition: all .5s cubic-bezier(.175, .885, .32, 1.275);
   opacity: 0;
   pointer-events: none;
   border-radius: 40px;
   background: rgba(255, 255, 255, .2);
   border: 1px solid rgba(255, 255, 255, .1)
 }
 
 .map-smart-filters.visible {
   width: 65px;
   opacity: 1;
   pointer-events: auto;
   background: rgba(255, 255, 255, .3);
   border-color: rgba(255, 255, 255, .4);
   box-shadow: 0 10px 40px rgba(0, 0, 0, .1)
 }
 
 .map-filter-chip {
   width: 44px;
   height: 44px;
   min-height: 44px;
   background: rgba(255, 255, 255, .5);
   border: 1px solid rgba(255, 255, 255, .6);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   cursor: pointer;
   transition: .3s;
   margin: 0 auto;
   opacity: 0;
   transform: scale(.5);
   animation: chipPop .4s cubic-bezier(.175, .885, .32, 1.275) forwards
 }
 
 .map-filter-chip.active {
   background: linear-gradient(135deg, var(--primary), #6366f1);
   color: #fff;
   border-color: transparent;
   transform: scale(1.1);
   box-shadow: 0 0 15px rgba(67, 56, 202, .4)
 }
 
 .map-filter-toggle-btn {
   position: absolute;
   top: 105px;
   left: 15px;
   z-index: 1100;
   background: rgba(255, 255, 255, .9);
   color: var(--text-main);
   width: 44px;
   height: 44px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   font-weight: 700;
   cursor: pointer;
   transition: .3s;
   border: 1px solid var(--border);
   box-shadow: 0 4px 15px rgba(0, 0, 0, .2)
 }
 
 .map-filter-toggle-btn.active {
   background: var(--primary);
   color: #fff;
   transform: rotate(45deg);
   border-color: transparent
 }
 
 .pos-bill-address-row {
   margin-top: 10px
 }
 
 .pos-bill-address-field {
   flex: 1 1 100%;
   max-width: 100%
 }
 
 .header-icon-base {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all .3s cubic-bezier(.25, .8, .25, 1);
   flex-shrink: 0;
   position: relative;
   color: var(--text-main);
   background: #f1f5f9;
   border: 1px solid transparent
 }
 
 .header-icon-base:hover {
   transform: translateY(-2px);
   background: #e0e7ff;
   color: var(--primary);
   box-shadow: 0 4px 12px rgba(79, 70, 229, .15)
 }
 
 .header-icon-base:active {
   transform: scale(.95)
 }
 
 .search-trigger-btn {
   background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
   color: #fff !important;
   border: 1px solid transparent;
   padding: 0;
   animation: searchPulse 3s infinite ease-in-out
 }
 
 .search-trigger-btn:hover {
   transform: translateY(-2px) scale(1.08);
   box-shadow: 0 6px 14px rgba(14, 165, 233, .5) !important;
   animation: none
 }
 
 .search-trigger-btn .nav-icon {
   width: 22px;
   height: 22px;
   transition: transform .4s cubic-bezier(.175, .885, .32, 1.275)
 }
 
 .search-trigger-btn:hover .nav-icon {
   transform: scale(1.15) rotate(-10deg)
 }
 
 .icon-btn {
   background: #f1f5f9;
   position: relative;
   color: var(--text-main)
 }
 
 .icon-btn:hover {
   background: #fee2e2;
   color: #ef4444
 }
 
 .login-btn-small {
   height: 42px;
   font-size: 14px;
   font-weight: 700;
   color: var(--primary);
   background: #e0e7ff;
   padding: 0 20px;
   border-radius: 24px;
   transition: all .3s cubic-bezier(.25, .8, .25, 1);
   display: flex;
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
   border: 1px solid transparent
 }
 
 .login-btn-small:hover {
   background: #c7d2fe;
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(79, 70, 229, .15)
 }
 
 .login-btn-small:active {
   transform: scale(.98)
 }
 
 .sell-btn {
   height: 42px;
   background: linear-gradient(135deg, var(--primary), #6366f1);
   color: #fff;
   font-weight: 700;
   padding: 0 20px;
   border-radius: 24px;
   display: flex;
   align-items: center;
   gap: 6px;
   box-shadow: 0 4px 12px rgba(79, 70, 229, .25);
   border: 1px solid rgba(255, 255, 255, .2);
   transition: all .3s cubic-bezier(.25, .8, .25, 1);
   flex-shrink: 0
 }
 
 .sell-btn:hover {
   background: linear-gradient(135deg, #4338ca, #4f46e5);
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(79, 70, 229, .45)
 }
 
 .sell-btn:active {
   transform: scale(.98)
 }
 
 .sell-btn .nav-icon {
   stroke: white;
   width: 18px;
   height: 18px;
   stroke-width: 3
 }
 
 .profile-btn {
   height: 42px;
   display: flex;
   align-items: center;
   gap: 10px;
   cursor: pointer;
   padding: 4px 16px 4px 4px;
   border-radius: 30px;
   border: 1px solid var(--border);
   background: #fff;
   transition: all .3s cubic-bezier(.25, .8, .25, 1);
   position: relative
 }
 
 .profile-btn:hover {
   border-color: var(--primary);
   background: #f8fafc;
   transform: translateY(-1px);
   box-shadow: 0 4px 10px rgba(0, 0, 0, .05)
 }
 
 .profile-avatar {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   object-fit: cover;
   background: #ddd
 }
 
 .profile-name {
   font-size: 13px;
   font-weight: 700;
   color: var(--text-main);
   max-width: 100px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
 }
 
 .badge {
   position: absolute;
   top: -4px;
   right: -4px;
   background: #ef4444;
   color: #fff;
   font-size: 10px;
   min-width: 18px;
   height: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 4px;
   border-radius: 12px;
   border: 2px solid #fff;
   font-weight: 800;
   box-shadow: 0 2px 4px rgba(239, 68, 68, .3);
   z-index: 10
 }
 
 .post-ad-btn {
   display: flex;
   align-items: center;
   gap: 6px;
   background: #5fce55a8 !important;
   color: #ea580c !important;
   border: 1px solid #fed7aa !important;
   border-radius: 20px;
   padding: 6px 14px;
   font-weight: 700;
   cursor: pointer;
   transition: all .2s;
   box-shadow: none !important
 }
 
 .post-ad-btn:hover {
   background: #fed7aa !important
 }
 
 .post-ad-btn:focus-visible {
   outline: 2px solid #ea580c;
   outline-offset: 2px
 }
 
 .grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 2px;
   padding: 6px 0
 }
 
 .card {
   background: var(--surface);
   border-radius: var(--radius);
   overflow: hidden;
   border: 0 solid var(--border);
   cursor: pointer;
   position: relative;
   display: flex;
   flex-direction: column;
   transform: translateZ(0);
   will-change: transform, filter;
   animation: floatY 4s infinite alternate ease-in-out
 }
 
 .card:nth-child(2n) {
   animation: subtleSway 4.5s infinite alternate ease-in-out
 }
 
 .card:nth-child(3n) {
   animation: glowPulse 3.5s infinite alternate ease-in-out
 }
 
 .card:nth-child(5n) {
   animation: floatY 5s infinite alternate ease-in-out
 }
 
 .card:active,
 .card:hover {
   animation-play-state: paused !important;
   transform: translateY(-4px) scale(1.02) translateZ(0) !important;
   box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .15);
   border-color: var(--primary);
   transition: all .3s cubic-bezier(.25, .8, .25, 1);
   z-index: 10
 }
 
 .card-img-box {
   height: 220px;
   position: relative;
   background: #f8fafcab;
   width: 100%;
   overflow: hidden
 }
 
 .card-img {
   width: 100%;
   height: 100%;
   object-fit: fill !important;
   transform: scale(1.01) translateZ(0);
   will-change: transform;
   animation: subtleZoom 3.5s infinite alternate ease-in-out;
   transition: transform .4s cubic-bezier(.25, .8, .25, 1)
 }
 
 .card-img-box.multi-image-slideshow {
   background: #f8fafcab
 }
 
 .card-img-box .slide-layer {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover !important;
   opacity: 0;
   z-index: 1;
   pointer-events: none;
   transition: opacity .9s ease-in-out, transform 4s cubic-bezier(.25, .8, .25, 1)
 }
 
 .card-img-box .slide-layer.active {
   opacity: 1;
   z-index: 2;
   transform: scale(1.03)
 }
 
 .card-img-box .slide-layer.fade-out {
   opacity: 0;
   z-index: 3;
   transform: scale(1.06)
 }
 
 .card-img-box[data-transition=slide-left] .slide-layer {
   transform: translateX(12%) scale(1.01);
   transition: opacity .8s ease-in-out, transform .9s cubic-bezier(.25, .8, .25, 1)
 }
 
 .card-img-box[data-transition=slide-left] .slide-layer.active {
   transform: translateX(0) scale(1.01)
 }
 
 .card-img-box[data-transition=slide-left] .slide-layer.fade-out {
   transform: translateX(-12%) scale(1.01)
 }
 
 .card-img-box[data-transition=slide-right] .slide-layer {
   transform: translateX(-12%) scale(1.01);
   transition: opacity .8s ease-in-out, transform .9s cubic-bezier(.25, .8, .25, 1)
 }
 
 .card-img-box[data-transition=slide-right] .slide-layer.active {
   transform: translateX(0) scale(1.01)
 }
 
 .card-img-box[data-transition=slide-right] .slide-layer.fade-out {
   transform: translateX(12%) scale(1.01)
 }
 
 .card-img-box[data-transition=zoom-in] .slide-layer {
   transform: scale(1.15);
   transition: opacity 1s ease-in-out, transform 5s linear
 }
 
 .card-img-box[data-transition=zoom-in] .slide-layer.active {
   transform: scale(1)
 }
 
 .card-img-box[data-transition=zoom-in] .slide-layer.fade-out {
   transform: scale(1.1)
 }
 
 .card-img-box[data-transition=zoom-out] .slide-layer {
   transform: scale(1);
   transition: opacity 1s ease-in-out, transform 5s linear
 }
 
 .card-img-box[data-transition=zoom-out] .slide-layer.active {
   transform: scale(1.15)
 }
 
 .card-img-box[data-transition=zoom-out] .slide-layer.fade-out {
   transform: scale(1.2)
 }
 
 .card-img-box[data-transition=flip-horizontal] {
   perspective: 1000px
 }
 
 .card-img-box[data-transition=flip-horizontal] .slide-layer {
   transform: rotateY(180deg);
   transition: opacity .9s ease-in-out, transform 1s cubic-bezier(.25, .8, .25, 1)
 }
 
 .card-img-box[data-transition=flip-horizontal] .slide-layer.active {
   transform: rotateY(0);
   z-index: 2
 }
 
 .card-img-box[data-transition=flip-horizontal] .slide-layer.fade-out {
   transform: rotateY(-180deg);
   z-index: 1
 }
 
 .card-img-box[data-transition=flip-vertical] {
   perspective: 1000px
 }
 
 .card-img-box[data-transition=flip-vertical] .slide-layer {
   transform: rotateX(180deg);
   transition: opacity .9s ease-in-out, transform 1s cubic-bezier(.25, .8, .25, 1)
 }
 
 .card-img-box[data-transition=flip-vertical] .slide-layer.active {
   transform: rotateX(0);
   z-index: 2
 }
 
 .card-img-box[data-transition=flip-vertical] .slide-layer.fade-out {
   transform: rotateX(-180deg);
   z-index: 1
 }
 
 .card-img-box[data-transition=spin-2d] .slide-layer {
   transform: rotate(-90deg) scale(.8);
   transition: opacity .9s ease-in-out, transform 1s cubic-bezier(.25, .8, .25, 1)
 }
 
 .card-img-box[data-transition=spin-2d] .slide-layer.active {
   transform: rotate(0) scale(1)
 }
 
 .card-img-box[data-transition=spin-2d] .slide-layer.fade-out {
   transform: rotate(90deg) scale(1.2)
 }
 
 .slide-rope-container {
   position: relative;
   width: 100%;
   height: 20px;
   margin: 0;
   padding: 0;
   z-index: 10;
   pointer-events: none;
   display: flex;
   align-items: center;
   overflow: visible;
   opacity: 1
 }
 
 .slide-rope-progress {
   stroke: var(--primary);
   stroke-width: 4;
   fill: none;
   stroke-linecap: round;
   filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3))
 }
 
 .card .slide-rope-container {
   display: flex !important
 }
 
 @keyframes ropeProgress {
   0% {
     stroke-dashoffset: 315;
     opacity: 1
   }
 
   90% {
     opacity: 1
   }
 
   100% {
     stroke-dashoffset: 0;
     opacity: 0
   }
 }
 
 .card .title {
   margin-bottom: 0 !important
 }
 
 .card .meta {
   margin-top: 0 !important;
   border-top: none !important;
   padding-top: 2px !important
 }
 
 .card:nth-child(2n) .card-img {
   animation-duration: 4.5s
 }
 
 .card:nth-child(3n) .card-img {
   animation-duration: 5.5s
 }
 
 .card:active .card-img,
 .card:hover .card-img {
   animation-play-state: paused !important;
   transform: scale(1.08) translateZ(0) !important
 }
 
 .card-info {
   padding: 16px;
   position: relative;
   box-shadow: 0 20px 4px rgba(0, 0, 0, .082) inset
 }
 
 .price-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 6px
 }
 
 .card-price-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
   margin-bottom: 4px
 }
 
 .card-price-left {
   display: flex;
   align-items: center;
   gap: 8px;
   flex: 1;
   min-width: 0;
 }
 
 .card-price-right {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   min-width: 48px;
 }
 
 .card-price-block {
   display: flex;
   flex-direction: column;
   gap: 2px;
   flex: 1;
   min-width: 0
 }
 
 .card-price {
   font-size: 11px;
   font-weight: 800;
   color: var(--primary);
   display: block;
   line-height: 1.1
 }
 
 .card-price-meta {
   display: flex;
   align-items: center;
   gap: 4px;
   flex-wrap: wrap
 }
 
 .card-price-mrp {
   font-size: 9px;
   color: #64748b;
   font-weight: 600;
   text-decoration: line-through
 }
 
 .card-discount {
   font-size: 9px;
   color: #059669;
   font-weight: 800
 }
 
 .unit {
   font-size: 10px;
   color: var(--text-sub);
   font-weight: 600;
   margin-left: 2px
 }
 
 .card-title {
   font-size: 8px !important;
   font-weight: 800 !important;
   margin: 4px 0 6px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--text-main);
   line-height: 1.2
 }
 
 .card-meta-row {
   display: flex;
   align-items: center;
   gap: 3px;
   margin: 0 0 6px;
   flex-wrap: nowrap
 }
 
 .card-condition-pill,
 .card-rating-pill,
 .card-view-pill {
   font-size: 7px;
   font-weight: 700;
   padding: 1px 3px;
   border-radius: 999px;
   line-height: 1.1;
   min-width: 0;
   text-align: center;
   white-space: nowrap
 }
 
 .card-rating-pill {
   margin-left: auto;
 }
 
 .card-condition-pill {
   color: #334155;
   background: #f8fafc;
   flex: 0 0 auto
 }
 
 .card-rating-pill {
   font-size: 9px;
   color: #92400e;
   background: #fef3c7;
   flex: 0 0 auto
 }
 
 .card-view-pill {
   font-size: 9px;
   color: #166534;
   background: #ecfdf5;
   flex: 0 0 auto
 }
 
 .meta {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   margin-top: 4px;
   font-size: 12px;
   color: var(--text-sub);
   border-top: 1px solid #f1f5f9;
   padding-top: 6px;
   padding-right: 34px
 }
 
 .card-loc {
   font-size: 6px;
   font-weight: 600;
   color: #64748b;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   flex: 1;
   min-width: 0;
   line-height: 1.3
 }
 
 .card-badges {
   position: absolute;
   top: 9px;
   left: 12px;
   display: flex;
   gap: 6px;
   z-index: 2
 }
 
 .status-badge {
   padding: 5px 10px;
   border-radius: 8px;
   font-size: 8px;
   font-weight: 800;
   text-transform: uppercase;
   background: rgba(0, 0, 0, .75);
   color: #fff;
   letter-spacing: .5px
 }
 
 .cat-badge {
   padding: 5px 10px;
   border-radius: 8px;
   font-size: 8px;
   font-weight: 800;
   text-transform: uppercase;
   background: rgba(255, 255, 255, .9);
   color: var(--text-main)
 }
 
 .badge-rent {
   background: var(--accent);
   color: #000
 }
 
 .rating-badge {
   display: flex;
   align-items: center;
   gap: 4px;
   background: #fffbeb;
   color: #b45309;
   padding: 3px 8px;
   border-radius: 6px;
   font-weight: 700;
   font-size: 11px
 }
 
 .deal-timer-badge {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: linear-gradient(to right, #ef44442a, #f97316);
   color: #fff;
   font-size: 12px;
   font-weight: 800;
   padding: 8px 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   z-index: 2;
   letter-spacing: .5px
 }
 
 .deal-timer-badge.expired {
   background: #64748b
 }
 
 .like-btn {
   position: absolute;
   bottom: 6px;
   right: 6px;
   background: rgba(255, 255, 255, .733);
   width: 34px;
   height: 34px;
   border-radius: 50%;
   font-size: 18px;
   color: #595c5f;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
   transition: all .2s;
   z-index: 10
 }
 
 .like-btn:hover {
   transform: scale(1.1);
   box-shadow: 0 6px 8px rgba(0, 0, 0, .2)
 }
 
 .like-btn.active {
   color: #ef4444;
   fill: #ef4444
 }
 
 
 .card.expired {
   border-color: #cbd5e16b;
   opacity: .8
 }
 
 .card.expired .card-img {
   filter: grayscale(100%);
   opacity: .9
 }
 
.card.deal-ended .card-img-box::after {
  content: 'DEAL ENDS';
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, .336);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-weight: 900;
   font-size: 12px;
   letter-spacing: 2px;
   z-index: 5
 }
 
.card.deal-ended:hover {
   transform: none;
   box-shadow: none;
   border-color: #cbd5e1
 }
 
 .expired-warning {
   background: #f1f5f9;
   color: #64748b;
   padding: 12px;
   border-radius: 8px;
   font-weight: 700;
   text-align: center;
   margin-bottom: 20px;
   border: 1px solid #cbd5e1
 }
 
 .route-rope {
   position: absolute;
   bottom: 12px;
   left: 50%;
   transform: translateX(-50%);
   width: 80%;
   height: 12px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   z-index: 3;
   pointer-events: none
 }
 
 .route-line {
   position: absolute;
   left: 4px;
   right: 4px;
   top: 50%;
   height: 2px;
   background: rgba(255, 255, 255, .8);
   border-radius: 2px;
   z-index: 1;
   box-shadow: 0 1px 2px rgba(0, 0, 0, .3)
 }
 
 .route-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #fff;
   border: 2px solid var(--primary);
   z-index: 2;
   position: relative;
   cursor: help;
   pointer-events: auto;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .2)
 }
 
 .route-dot.end {
   border-color: var(--accent)
 }
 
 .route-dot::after {
   content: attr(data-loc);
   position: absolute;
   bottom: 18px;
   left: 50%;
   transform: translateX(-50%) scale(.8);
   background: rgba(15, 23, 42, .9);
   color: #fff;
   padding: 4px 8px;
   border-radius: 6px;
   font-size: 10px;
   font-weight: 600;
   white-space: nowrap;
   opacity: 0;
   transition: .2s cubic-bezier(.175, .885, .32, 1.275);
   pointer-events: none;
   box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
   transform-origin: bottom center
 }
 
 .route-dot:hover::after {
   opacity: 1;
   transform: translateX(-50%) scale(1)
 }
 
 .full-width-col {
   grid-column: 1/-1;
   width: 100%;
   margin: 4px 0;
   overflow: hidden
 }
 
 .h-slider-header {
   margin-bottom: 4px;
   padding: 0 4px
 }
 
 .h-slider-header h3 {
   font-size: 12px;
   font-weight: 800;
   display: flex;
   align-items: center;
   gap: 6px;
   color: var(--text-main)
 }
 
 .h-slider-header p {
   font-size: 12px;
   color: var(--text-sub)
 }
 
 .h-slider {
   display: flex;
   align-items: stretch;
   gap: 12px;
   overflow-x: auto;
   padding: 4px 4px 10px 4px;
   scroll-snap-type: x mandatory;
   -ms-overflow-style: none;
   cursor: grab;
   scroll-behavior: smooth
 }
 
 .h-slider:active {
   cursor: grabbing
 }
 
 .h-slider::-webkit-scrollbar {
   display: none
 }
 
 .h-card-wrapper {
   animation: subtleZoom 3.5s infinite alternate ease-in-out;
   will-change: transform;
   min-width: 180px;
   max-width: 180px;
   flex-shrink: 0;
   height: auto;
   display: flex;
   scroll-snap-align: center;
   transition: transform .4s cubic-bezier(.25, .8, .25, 1);
   transform: translateZ(0)
 }
 
 .h-card-wrapper:active,
 .h-card-wrapper:hover {
   transform: scale(1.04) translateY(-4px)
 }
 
 .h-card-wrapper .card {
   height: 100%;
   width: 100%;
   display: flex;
   flex-direction: column;
   pointer-events: none
 }
 
 .h-card-wrapper .card * {
   pointer-events: none
 }
 
 .h-card-wrapper .card-img-box {
   height: 110px
 }
 
 .h-card-wrapper .card-info {
   padding: 8px;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between
 }
 
 .h-card-wrapper .price {
   font-size: 12px
 }
 
 .h-card-wrapper .title {
   font-size: 9px;
   margin: 4px 0;
   line-height: 1.3
 }
 
 .h-card-wrapper .meta {
   font-size: 9px;
   margin-top: 4px;
   padding-top: 4px;
   padding-right: 30px
 }
 
 .h-card-wrapper .like-btn {
   width: 24px;
   height: 24px;
   font-size: 12px;
   bottom: 4px;
   right: 4px;
   pointer-events: auto
 }
 
 .end-msg {
   grid-column: 1/-1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 60px 20px;
   color: #94a3b8;
   font-size: 16px;
   font-weight: 800;
   background: 0 0;
   border: none;
   margin: 0 auto;
   min-height: 40vh;
   animation: popIn .5s cubic-bezier(.175, .885, .32, 1.275) forwards
 }
 
 .end-msg::before {
   content: '';
   display: block;
   width: 80px;
   height: 80px;
   margin-bottom: 16px;
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23cbd5e1" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><path d="M9 9l6 6M15 9l-6 6"></path></svg>');
   background-size: contain;
   background-repeat: no-repeat;
   opacity: .8
 }
 
 .card:nth-child(6n+1) {
   background-color: #f8f4f7 !important
 }
 
 .card:nth-child(6n+2) {
   background-color: #e0f2fe !important
 }
 
 .card:nth-child(6n+3) {
   background-color: #d1fae5 !important
 }
 
 .card:nth-child(6n+4) {
   background-color: #fef3c7 !important
 }
 
 .card:nth-child(6n+5) {
   background-color: #ffedd5 !important
 }
 
 .card:nth-child(6n+6) {
   background-color: #ede9fe !important
 }
 
 .card .card-body,
 .card .card-content,
 .card .card-details,
 .card .card-footer,
 .card .card-info {
   background: 0 0 !important
 }
 
 .card .card-title,
 .card .price,
 .card h3 {
   color: #020617 !important
 }
 
 .card .card-meta,
 .card .location,
 .card p {
   color: #334155 !important
 }
 
 .modal {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .6);
   z-index: 200;
   display: none;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity .2s;
   pointer-events: auto;
   touch-action: manipulation;
   overscroll-behavior: contain
 }
 
 .modal.active {
   display: flex;
   opacity: 1
 }
 
 #login-modal {
   z-index: 3000
 }
 
 .modal-content {
   background: var(--surface);
   width: 90%;
   max-width: 480px;
   height: auto;
   max-height: 85vh;
   border-radius: 20px;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
   overscroll-behavior: contain
 }

body.modal-open {
   overflow: hidden;
   overscroll-behavior: none
 }

button,
a,
input,
select,
textarea,
[role="button"] {
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
   -webkit-user-select: none;
   user-select: none;
 }
 
 .modal.full-screen-modal .modal-content.fs-content {
   width: 100%;
   height: 100%;
   max-width: 100%;
   max-height: 100%;
   border-radius: 0
 }
 
 .modal-header {
   padding: 16px 20px;
   border-bottom: 1px solid var(--border);
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-weight: 700;
   background: rgba(255, 255, 255, .9);
   font-size: 16px;
   z-index: 10
 }
 
 .modal-body {
   padding: 20px;
   overflow-y: auto;
   flex: 1
 }
 
 .fs-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
   gap: 10px;
   background: rgba(255, 255, 255, .9);
   box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
   z-index: 10
 }
 
 .chat-header-link {
   display: flex;
   align-items: center;
   gap: 10px;
   flex: 1;
   min-width: 0;
   color: inherit;
   text-decoration: none
 }
 
 .chat-header-link.is-disabled {
   pointer-events: none;
   cursor: default
 }
 
 .chat-header-meta {
   display: flex;
   flex-direction: column;
   min-width: 0;
   flex: 1
 }
 
 #chat-head {
   display: block;
   font-weight: 800;
   font-size: 15px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
 }
 
 #chat-subhead {
   display: block;
   font-size: 12px;
   color: var(--text-sub);
   margin-top: 2px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
 }
 
 #chat-header-img {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   object-fit: cover;
   flex-shrink: 0;
   border: 1px solid var(--border);
   background: #f8fafc
 }
 
 .icon-btn-back {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #f1f5f9;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text-main);
   font-size: 20px;
   transition: .2s
 }
 
 .icon-btn-back:hover {
   background: #e2e8f0
 }
 
 .fs-actions {
   display: flex;
   gap: 10px;
   align-items: center
 }
 
 .action-btn {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 8px 16px;
   border-radius: 25px;
   font-size: 14px;
   font-weight: 700;
   text-decoration: none;
   border: none;
   cursor: pointer;
   transition: .2s;
   display: none
 }
 
 .call-btn {
   background: #dcfce7;
   color: #166534
 }
 
 .call-btn:hover {
   background: #bbf7d0
 }
 
 .chat-btn {
   background: #e0e7ff;
   color: #4338ca
 }
 
 .chat-btn:hover {
   background: #c7d2fe
 }
 
 .share-btn {
   background: #f3e8ff;
   color: #7e22ce;
   display: flex !important
 }
 
 .share-btn:hover {
   background: #e9d5ff
 }
 
 .delete-btn {
   background: #fee2e2;
   color: #ef4444
 }
 
 .renew-btn {
   background: #10b981;
   color: #fff;
   margin-top: 10px;
   width: 100%;
   justify-content: center;
   display: flex
 }
 
 .renew-btn:hover {
   background: #059669
 }
 
 .v-details-wrapper {
   max-width: 800px;
   margin: 0 auto;
   padding-bottom: 40px
 }
 
 .v-title-row {
   margin-top: 16px;
   margin-bottom: 8px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   flex-wrap: wrap
 }
 
 .v-price-group {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
   max-width: calc(100% - 96px)
 }
 
 .discount-label {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 3px 7px;
   background: #eff6ff;
   color: #2563eb;
   border-radius: 999px;
   font-size: 10px;
   font-weight: 700
 }
 
 #v-title-buy {
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
   padding: 3px 8px;
   min-width: auto;
   min-height: 26px;
   height: 26px;
   background: rgba(59, 130, 246, .14);
   color: #2563eb;
   border-radius: 999px;
   border: 1px solid rgba(59, 130, 246, .28);
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .06em;
   text-transform: uppercase;
   white-space: nowrap;
   box-shadow: 0 3px 10px rgba(59, 130, 246, .08)
 }
 
 #v-title-buy:hover {
   transform: translateY(-1px)
 }
 
 #v-title {
   font-size: 10px !important;
   font-weight: 700 !important;
   color: var(--text-main);
   line-height: 1.2;
   margin: 8px 0 0;
   text-transform: capitalize
 }
 
 .v-price-lg {
   font-size: 16px !important;
   font-weight: 900 !important;
   color: var(--primary);
   letter-spacing: -.4px
 }
 
 .v-price-lg del {
   font-size: 12px;
   color: #64748b;
   font-weight: 600;
   margin-left: 8px
 }
 
 .v-meta-tags {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 16px;
   color: var(--text-sub);
   font-size: 12px;
   align-items: center
 }
 
 .v-meta-tags span {
   display: flex;
   align-items: center;
   gap: 4px
 }
 
 .deal-box {
   margin-bottom: 16px;
   background: #fff1f2;
   border: 1px solid #fda4af;
   border-radius: 12px;
   padding: 12px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   animation: pulse-soft 2s infinite
 }
 
 .deal-label {
   color: #be123c;
   font-weight: 800;
   text-transform: uppercase;
   font-size: 11px;
   display: flex;
   align-items: center;
   gap: 6px
 }
 
 .deal-timer {
   display: flex;
   gap: 6px;
   font-family: monospace;
   font-weight: 800;
   color: #e11d48;
   font-size: 15px;
   align-items: center
 }
 
 .dt-block {
   display: flex;
   flex-direction: column;
   align-items: center;
   line-height: 1
 }
 
 .dt-block span {
   background: #e11d48;
   color: #fff;
   padding: 2px 4px;
   border-radius: 4px;
   min-width: 24px;
   text-align: center
 }
 
 .dt-block small {
   font-size: 8px;
   opacity: .8;
   margin-top: 2px;
   color: #9f1239;
   font-weight: 700
 }
 
 .deal-sep {
   color: #e11d48;
   font-size: 15px;
   position: relative;
   top: -6px
 }
 
 .v-stats-card {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   margin: 16px 0 0 0;
   padding: 2px;
   background: 0 0;
   border: none
 }
 
 .stat-box {
   background: rgba(255, 255, 255, .5);
   border: 1px solid rgba(255, 255, 255, .4);
   border-radius: 18px;
   padding: 12px 6px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 4px;
   transition: all .3s cubic-bezier(.2, .8, .2, 1);
   box-shadow: inset 0 0 12px rgba(255, 255, 255, .6), 0 4px 15px rgba(0, 0, 0, .03);
   cursor: pointer;
   position: relative;
   overflow: hidden
 }
 
 .stat-box:active {
   transform: scale(.94);
   background: rgba(255, 255, 255, .8);
   box-shadow: inset 0 4px 12px rgba(0, 0, 0, .05)
 }
 
 .stat-label {
   font-size: 9px;
   font-weight: 800;
   text-transform: uppercase;
   color: var(--text-sub);
   letter-spacing: .8px;
   opacity: .7;
   margin-bottom: 2px
 }
 
 .stat-val {
   font-size: 13px;
   font-weight: 800;
   color: var(--text-main);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1px;
   text-align: center
 }
 
 .pulse-status-dot {
   width: 7px;
   height: 7px;
   background: #10b981;
   border-radius: 50%;
   position: relative;
   margin-bottom: 2px
 }
 
 .pulse-status-dot::after {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: 50%;
   background: inherit;
   animation: plaxPulse 2s infinite
 }
 
 .v-trust-panel {
   display: flex;
   gap: 10px;
   margin: 10px 0 16px 0
 }
 
 .v-trust-btn {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   height: 42px;
   border-radius: 14px;
   font-size: 14px;
   font-weight: 800;
   cursor: pointer;
   transition: all .25s cubic-bezier(.34, 1.56, .64, 1);
   border: 1px solid rgba(255, 255, 255, .4);
   background: rgba(255, 255, 255, .5);
   box-shadow: inset 0 0 12px rgba(255, 255, 255, .6), 0 4px 15px rgba(0, 0, 0, .03)
 }
 
 .v-trust-like {
   color: #059669
 }
 
 .v-trust-like:hover {
   background: rgba(16, 185, 129, .1);
   border-color: #10b981;
   transform: translateY(-2px);
   box-shadow: 0 6px 15px rgba(16, 185, 129, .2)
 }
 
 .v-trust-like:active {
   transform: scale(.95)
 }
 
 .v-trust-dislike {
   color: #dc2626
 }
 
 .v-trust-dislike:hover {
   background: rgba(239, 68, 68, .1);
   border-color: #ef4444;
   transform: translateY(-2px);
   box-shadow: 0 6px 15px rgba(239, 68, 68, .2)
 }
 
 .v-trust-dislike:active {
   transform: scale(.95)
 }
 
 .trust-badge {
   background: rgba(0, 0, 0, .06);
   padding: 2px 8px;
   border-radius: 20px;
   font-size: 12px;
   margin-left: 4px;
   border: 1px solid rgba(255, 255, 255, .4)
 }
 
 .v-trust-like .trust-badge {
   background: rgba(16, 185, 129, .15);
   color: #047857
 }
 
 .v-trust-dislike .trust-badge {
   background: rgba(239, 68, 68, .15);
   color: #b91c1c
 }
 
 .content-block {
   margin-bottom: 20px
 }
 
 .content-block h3 {
   font-size: 15px;
   font-weight: 800;
   margin-bottom: 8px;
   color: var(--text-main)
 }
 
 .content-block p {
   line-height: 1.6;
   color: #334155;
   font-size: 13px
 }
 
 .v-slider-container {
   background: #050505;
   position: relative;
   width: 100%;
   height: 50vh;
   margin-bottom: 12px;
   overflow: hidden
 }
 
 .v-slider {
   display: flex;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   height: 100%;
   background: 0 0;
   -ms-overflow-style: none;
   scroll-behavior: smooth
 }
 
 .v-slider::-webkit-scrollbar {
   display: none
 }
 
 .slide-item {
   flex: 0 0 100%;
   width: 100%;
   height: 100%;
   scroll-snap-align: center;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #05050525;
   overflow: hidden;
   transition: transform .6s cubic-bezier(.25, 1, .5, 1), opacity .6s ease;
   transform-origin: center center
 }
 
 .slide-item:not(.is-active) {
   transform: scale(.85);
   opacity: .4
 }
 
 .slide-item.is-active {
   transform: scale(1);
   opacity: 1
 }
 
 .slide-item img {
   width: 100%;
   height: 100%;
   object-fit: fill !important;
   position: relative;
   z-index: 2;
   cursor: zoom-in;
   opacity: 0;
   transition: opacity .5s ease-in-out, transform .5s ease-out
 }
 
 .slide-item img.loaded {
   opacity: 1
 }
 
 .slide-item.is-active img.loaded {
   animation: subtleZoomSlider 8s infinite alternate ease-in-out
 }
 
 .dots-container {
   display: flex;
   justify-content: center;
   gap: 8px;
   padding: 16px;
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 10;
   background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent);
   pointer-events: none
 }
 
 .dot {
   width: 8px;
   height: 8px;
   background: rgba(255, 255, 255, .4);
   border-radius: 50%;
   transition: all .4s cubic-bezier(.25, .8, .25, 1);
   cursor: pointer;
   pointer-events: auto
 }
 
 .dot.active {
   background: #fff;
   width: 24px;
   border-radius: 12px
 }
 
 .skeleton-loader {
   background: linear-gradient(90deg, #111827 25%, #1e293b 50%, #111827 75%);
   background-size: 200% 100%;
   animation: img-shimmer 1.5s infinite linear
 }
 
 .specs-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 16px;
   width: 100%
 }
 
 .spec-item {
   flex: 1 1 max-content;
   padding: 10px 14px;
   border-radius: 12px;
   border: none;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   text-align: left;
   gap: 6px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, .02);
   transition: transform .2s
 }
 
 .spec-item:hover {
   transform: translateY(-2px)
 }
 
 .spec-label {
   font-size: 10px;
   font-weight: 800;
   text-transform: uppercase;
   opacity: .8;
   letter-spacing: .5px;
   margin-bottom: 0;
   white-space: nowrap
 }
 
 .spec-label::after {
   content: '-';
   margin-left: 2px
 }
 
 .spec-val {
   font-size: 11px;
   font-weight: 800;
   color: inherit;
   line-height: 1.2;
   word-break: break-word
 }
 
 .spec-item:nth-child(6n+1) {
   background: #eff6ff;
   color: #1e3a8a
 }
 
 .spec-item:nth-child(6n+2) {
   background: #fdf2f8;
   color: #831843
 }
 
 .spec-item:nth-child(6n+3) {
   background: #f0fdf4;
   color: #14532d
 }
 
 .spec-item:nth-child(6n+4) {
   background: #fffbeb;
   color: #78350f
 }
 
 .spec-item:nth-child(6n+5) {
   background: #f5f3ff;
   color: #4c1d95
 }
 
 .spec-item:nth-child(6n+6) {
   background: #fff1f2;
   color: #881337
 }
 
 .stars {
   font-size: 20px !important;
   color: #d1d5db;
   cursor: pointer;
   display: inline-flex;
   gap: 4px
 }
 
 .stars .star.active,
 .stars .star:hover {
   color: #f59e0b;
   transform: scale(1.15);
   transition: .2s
 }
 
 .premium-rate-card {
   transition: all .4s cubic-bezier(.34, 1.56, .64, 1);
   border: 1px solid transparent;
   background: linear-gradient(to right, #fff, #fffdf8)
 }
 
 .premium-rate-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(245, 158, 11, .12);
   border-color: #fde68a
 }
 
 .glowing-star-box {
   animation: starBreathe 2s ease-in-out infinite alternate;
   background: linear-gradient(135deg, #fffbeb, #fef3c7) !important
 }
 
 .shimmer-text {
   background: linear-gradient(90deg, #b45309 0, #fbbf24 50%, #b45309 100%);
   background-size: 200% auto;
   color: transparent;
   -webkit-background-clip: text;
   background-clip: text;
   animation: textShimmer 3s linear infinite
 }
 
 .animated-report-btn {
   transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
   position: relative;
   overflow: hidden
 }
 
 .animated-report-btn:hover {
   transform: scale(1.05);
   background: #fecaca !important;
   color: #dc2626 !important;
   box-shadow: 0 4px 12px rgba(239, 68, 68, .25) !important
 }
 
 .animated-report-btn:active {
   transform: scale(.95)
 }
 
 .sug-slider {
   display: flex;
   gap: 12px;
   overflow-x: auto;
   padding-bottom: 8px
 }
 
 .sug-card {
   min-width: 160px;
   max-width: 160px;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: 10px;
   overflow: hidden;
   cursor: pointer;
   transition: .2s
 }
 
 .sug-card:hover {
   transform: translateY(-3px);
   border-color: var(--primary)
 }
 
 .sug-img {
   width: 100%;
   height: 100px;
   object-fit: cover;
   background: #eee
 }
 
 .sug-info {
   padding: 8px
 }
 
 .sug-price {
   font-weight: 800;
   color: var(--primary);
   font-size: 12px
 }
 
 .sug-title {
   font-size: 11px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--text-main);
   margin-top: 2px
 }
 
 .zoom-modal {
   position: fixed;
   inset: 0;
   background: #000;
   z-index: 100000;
   display: none;
   align-items: center;
   justify-content: center;
   touch-action: none;
   overflow: hidden
 }
 
 .zoom-modal.active {
   display: flex
 }
 
 .zoom-overlay {
   position: absolute;
   inset: 0;
   z-index: 1
 }
 
 .zoom-img {
   position: relative;
   z-index: 2;
   width: 100vw !important;
   height: 100vh !important;
   max-width: none !important;
   max-height: none !important;
   object-fit: fill !important;
   transition: transform .1s linear, object-fit .3s ease;
   cursor: grab;
   transform-origin: center center;
   will-change: transform
 }
 
 .zoom-img:active {
   cursor: grabbing
 }
 
 .zoom-img.cover-mode {
   object-fit: fill !important
 }
 
 .zoom-img.resetting {
   transition: transform .3s cubic-bezier(.25, .8, .25, 1)
 }
 
 .zoom-controls {
   position: absolute;
   bottom: 40px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 20px;
   z-index: 10002;
   background: rgba(20, 20, 20, .7);
   padding: 8px 24px;
   border-radius: 30px;
   border: 1px solid rgba(255, 255, 255, .1);
   box-shadow: 0 10px 30px rgba(0, 0, 0, .5)
 }
 
 .zoom-btn {
   background: rgba(255, 255, 255, .1);
   border: none;
   color: #fff;
   font-size: 16px;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: .2s
 }
 
 .zoom-btn:hover {
   background: rgba(255, 255, 255, .25);
   transform: scale(1.1)
 }
 
 .zoom-btn:active {
   transform: scale(.9)
 }
 
 .zoom-close {
   position: absolute;
   top: 20px;
   right: 20px;
   width: 44px;
   height: 44px;
   background: rgba(20, 20, 20, .7);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 50%;
   color: #fff;
   font-size: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 10001;
   transition: .2s
 }
 
 .zoom-close:hover {
   background: #ef4444;
   border-color: #ef4444;
   transform: rotate(90deg)
 }
 
 #chat-history {
   flex: 1;
   overflow-y: auto;
   padding: 12px max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
   display: flex;
   flex-direction: column;
   gap: 10px;
   background: #f8fafc
 }
 
 .msg {
   padding: 10px 12px 20px;
   border-radius: 14px;
   max-width: min(82%, 340px);
   font-size: 14px;
   line-height: 1.3;
   position: relative;
   margin-bottom: 2px;
   overflow-wrap: anywhere;
   word-break: break-word
 }
 
 .msg.out {
   margin-left: auto
 }
 
 .msg.in {
   margin-right: auto
 }
 
 .msg.out {
   align-self: flex-end;
   background: var(--primary);
   color: #fff;
   border-bottom-right-radius: 2px
 }
 
 .msg.in {
   align-self: flex-start;
   background: #fff;
   border: 1px solid var(--border);
   border-bottom-left-radius: 2px;
   color: var(--text-main)
 }
 
 .sys-msg {
   text-align: center;
   font-size: 12px;
   color: var(--text-sub);
   margin: 10px 0;
   background: #e2e8f0;
   padding: 4px 12px;
   border-radius: 20px;
   align-self: center
 }
 
 .msg-ticks {
   font-size: 11px;
   margin-left: 4px;
   display: inline-block;
   letter-spacing: -3px;
   transition: color .3s
 }
 
 .msg.out .msg-ticks {
   color: rgba(255, 255, 255, .6)
 }
 
 .msg.out .msg-ticks.read {
   color: #38bdf8;
   text-shadow: 0 0 2px rgba(0, 0, 0, .2)
 }
 
 .msg-name {
   font-size: 10px;
   font-weight: 800;
   color: #64748b;
   margin-bottom: 2px;
   display: block
 }
 
 .msg-time {
   font-size: 9px;
   opacity: .7;
   margin-top: 2px;
   display: block;
   text-align: right
 }
 
 .msg.out .msg-name {
   display: none
 }
 
 .msg.out .msg-time {
   color: rgba(255, 255, 255, .8)
 }
 
 .msg-img {
   max-width: 200px;
   border-radius: 12px;
   margin-top: 5px;
   display: block;
   cursor: pointer
 }
 
 .msg-img.uploading {
   opacity: .5;
   filter: grayscale(100%)
 }
 
 .msg-audio {
   width: 220px;
   margin-top: 5px;
   display: block
 }
 
 .msg-tts {
   position: absolute;
   right: -25px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 16px;
   cursor: pointer;
   opacity: .5;
   color: #475569
 }
 
 .msg.out .msg-tts {
   display: none
 }
 
 .audio-wave-container {
   flex: 1;
   display: none;
   align-items: center;
   background: linear-gradient(145deg, #fff, #f8fafc);
   border: 1px solid #e2e8f0;
   border-radius: 24px;
   padding: 0 16px;
   height: 42px;
   box-shadow: 0 4px 15px rgba(239, 68, 68, .08), inset 0 2px 4px rgba(255, 255, 255, .8);
   animation: slideInMicAdvanced .5s cubic-bezier(.34, 1.56, .64, 1);
   position: relative;
   overflow: hidden
 }
 
 .rec-dot {
   width: 10px;
   height: 10px;
   background-color: #ef4444;
   border-radius: 50%;
   position: relative;
   box-shadow: 0 0 8px rgba(239, 68, 68, .6);
   flex-shrink: 0
 }
 
 .rec-dot::after {
   content: '';
   position: absolute;
   inset: -4px;
   border-radius: 50%;
   border: 2px solid #ef4444;
   animation: rippleAdvanced 1.5s cubic-bezier(.24, 0, .38, 1) infinite
 }
 
 .rec-timer {
   font-family: 'Courier New', Courier, monospace;
   font-size: 14px;
   font-weight: 800;
   color: #ef4444;
   margin-left: 16px;
   margin-right: auto;
   font-variant-numeric: tabular-nums;
   letter-spacing: .5px;
   text-shadow: 0 0 10px rgba(239, 68, 68, .2)
 }
 
 .wave-bars {
   display: flex;
   align-items: center;
   gap: 3px;
   margin-right: 14px;
   height: 24px
 }
 
 .wave-bar {
   width: 4px;
   height: 100%;
   background: linear-gradient(180deg, #ef4444, #f87171);
   border-radius: 4px;
   transform-origin: center;
   will-change: transform;
   animation: waveAnimAdvanced 1s cubic-bezier(.4, 0, .2, 1) infinite
 }
 
 .wave-bar:first-child {
   animation-delay: 0s;
   animation-duration: .9s
 }
 
 .wave-bar:nth-child(2) {
   animation-delay: -.2s;
   animation-duration: 1.1s
 }
 
 .wave-bar:nth-child(3) {
   animation-delay: -.4s;
   animation-duration: .8s
 }
 
 .wave-bar:nth-child(4) {
   animation-delay: -.6s;
   animation-duration: 1.2s
 }
 
 .wave-bar:nth-child(5) {
   animation-delay: -.8s;
   animation-duration: 1s
 }
 
 .wave-bar:nth-child(6) {
   animation-delay: -1s;
   animation-duration: .9s
 }
 
 .wave-bar:nth-child(7) {
   animation-delay: -1.2s;
   animation-duration: 1.1s
 }
 
 .cancel-rec-btn {
   background: #fef2f2;
   color: #ef4444;
   border: 1px solid #fecaca;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   font-weight: 900;
   cursor: pointer;
   transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
   flex-shrink: 0;
   box-shadow: 0 2px 4px rgba(239, 68, 68, .05)
 }
 
 .cancel-rec-btn:hover {
   background: #ef4444;
   color: #fff;
   border-color: #ef4444;
   transform: scale(1.15) rotate(90deg);
   box-shadow: 0 4px 8px rgba(239, 68, 68, .3)
 }
 
 .cancel-rec-btn:active {
   transform: scale(.95) rotate(90deg)
 }
 
 .msg-reactions-badge {
   position: absolute;
   bottom: -10px;
   display: flex;
   gap: 4px;
   z-index: 5
 }
 
 .msg.in .msg-reactions-badge {
   left: 10px
 }
 
 .msg.out .msg-reactions-badge {
   right: 10px
 }
 
 .react-pill {
   background: #fff;
   border: 1px solid #e2e8f0;
   padding: 2px 8px;
   border-radius: 12px;
   font-size: 11px;
   font-weight: 800;
   color: #475569;
   box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
   display: flex;
   align-items: center;
   gap: 4px;
   line-height: 1.2;
   cursor: pointer;
   transition: transform .2s cubic-bezier(.175, .885, .32, 1.275)
 }
 
 .react-pill:hover {
   transform: scale(1.15);
   border-color: #cbd5e1
 }
 
 .msg.out .react-pill {
   background: #e0e7ff;
   border-color: #c7d2fe;
   color: #4338ca
 }
 
 .msg-actions {
   display: none;
   position: absolute;
   top: calc(100% + 6px);
   right: 8px;
   background: #fff;
   border: 1px solid #e2e8f0;
   padding: 4px 8px;
   border-radius: 20px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
   z-index: 100;
   align-items: center;
   gap: 8px;
   animation: popUp .2s cubic-bezier(.175, .885, .32, 1.275)
 }
 
 .msg.active-actions .msg-actions {
   display: flex
 }
 
 .msg.in .msg-actions {
   right: auto;
   left: 8px
 }
 
 .action-btn-sm {
   width: 28px;
   height: 28px;
   border-radius: 999px;
   justify-content: center;
   font-size: 14px;
   cursor: pointer;
   padding: 0;
   transition: transform .2s, background .2s;
   display: flex;
   align-items: center;
   gap: 0;
   color: #334155;
   background: #f8fafc;
   border: 1px solid #e2e8f0
 }
 
 .action-btn-sm:hover {
   transform: scale(1.2);
   color: var(--primary)
 }
 
 .action-btn-sm.delete {
   color: #ef4444;
   background: #fef2f2;
   border-color: #fecaca
 }
 
 .chat-footer {
   padding: 12px max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
   background: #fff;
   border-top: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   gap: 6px
 }
 
 .chat-status-bar {
   font-size: 10px;
   color: var(--primary);
   text-align: center;
   height: 14px;
   opacity: 0;
   transition: opacity .3s
 }
 
 .chat-status-bar.visible {
   opacity: 1
 }
 
 .chat-controls {
   display: flex;
   align-items: center;
   gap: 8px;
   width: 100%;
   min-width: 0;
   transition: all .3s ease
 }
 
 .chat-inp {
   min-width: 0
 }
 
 .chat-controls .chat-btn-icon {
   transition: all .3s cubic-bezier(.25, .8, .25, 1);
   transform-origin: center
 }
 
 .chat-controls.typing-active #mic-btn,
 .chat-controls.typing-active button[onclick*=chat-file-input] {
   width: 0;
   height: 0;
   padding: 0;
   margin: 0;
   border: none;
   opacity: 0;
   transform: scale(0);
   pointer-events: none
 }
 
 .chat-inp {
   flex: 1;
   border: 1px solid var(--border);
   padding: 10px 16px;
   border-radius: 24px;
   outline: 0;
   font-size: 14px
 }
 
 .chat-btn-icon {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--border);
   color: var(--text-sub);
   background: #f8fafc;
   font-size: 18px;
   transition: .2s;
   cursor: pointer
 }
 
 .chat-btn-icon:hover {
   background: #e2e8f0;
   color: var(--primary);
   border-color: var(--primary)
 }
 
 .chat-send {
   background: var(--primary);
   color: #fff;
   border: none
 }
 
 .chat-btn-icon.recording {
   background: #fee2e2;
   color: #ef4444;
   border-color: #ef4444;
   animation: pulse 1s infinite
 }
 
 .typing-indicator {
   font-size: 11px;
   color: #94a3b8;
   font-style: italic;
   margin-left: 12px;
   min-height: 28px;
   display: flex;
   align-items: flex-end;
   transition: opacity .2s
 }
 
 .typing-bubble {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   background: #e2e8f0;
   padding: 6px 12px;
   border-radius: 18px;
   border-bottom-left-radius: 4px;
   width: fit-content;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
   margin-top: -4px
 }
 
 .typing-name {
   font-size: 11px;
   font-weight: 700;
   color: #475569;
   margin-right: 6px;
   font-style: normal
 }
 
 .typing-dot {
   width: 5px;
   height: 5px;
   background: #64748b;
   border-radius: 50%;
   animation: typeBounce 1.4s infinite ease-in-out both
 }
 
 .typing-dot:nth-child(2) {
   animation-delay: -.32s
 }
 
 .typing-dot:nth-child(3) {
   animation-delay: -.16s
 }
 
 .typing-dot:nth-child(4) {
   animation-delay: 0s
 }
 
 .smart-replies {
   display: flex;
   gap: 8px;
   overflow-x: auto;
   padding-bottom: 4px;
   margin-bottom: 4px;
   -ms-overflow-style: none
 }
 
 .smart-chip {
   padding: 4px 10px;
   background: #f1f5f9;
   border-radius: 20px;
   font-size: 11px;
   font-weight: 600;
   color: var(--text-sub);
   cursor: pointer;
   white-space: nowrap;
   transition: .2s;
   border: 1px solid var(--border)
 }
 
 .smart-chip:hover {
   background: #e2e8f0;
   border-color: #cbd5e1
 }
 
 .inbox-row,
 .wish-item-row,
 .wish-row {
   display: flex !important;
   gap: 16px !important;
   padding: 16px !important;
   border-bottom: 1px solid var(--border) !important;
   align-items: center !important;
   cursor: pointer !important;
   transition: background .2s ease !important;
   background: #fff !important
 }
 
 .inbox-row:hover,
 .wish-item-row:hover,
 .wish-row:hover {
   background: #f8fafc !important
 }
 
 .inbox-row.unread {
   background: #f0f9ff !important
 }
 
 .chat-thumb,
 .wish-thumb {
   background: #eee;
   flex-shrink: 0
 }
 
 .wish-thumb {
   width: 70px;
   height: 70px;
   border-radius: 10px;
   object-fit: cover
 }
 
 .chat-thumb {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   object-fit: cover
 }
 
 .wish-details {
   flex: 1;
   min-width: 0
 }
 
 .wish-price {
   font-weight: 800;
   color: var(--primary);
   font-size: 15px
 }
 
 .wish-title {
   font-size: 13px;
   font-weight: 600;
   color: var(--text-main);
   margin-bottom: 4px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
 }
 
 .wish-loc {
   font-size: 11px;
   color: var(--text-sub)
 }
 
 .wish-remove-btn {
   padding: 8px;
   border-radius: 50%;
   color: #ef4444;
   background: #fee2e2;
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: .2s
 }
 
 .wish-remove-btn:hover {
   background: #fecaca;
   transform: scale(1.1)
 }
 
 .inbox-avatar-wrapper {
   position: relative !important;
   width: 56px !important;
   height: 56px !important;
   flex-shrink: 0 !important
 }
 
 .inbox-user-avatar {
   width: 100% !important;
   height: 100% !important;
   border-radius: 50% !important;
   background: linear-gradient(135deg, var(--primary, #4338ca), #8b5cf6) !important;
   color: #fff !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   font-size: 24px !important;
   font-weight: 800 !important;
   box-shadow: 0 2px 6px rgba(0, 0, 0, .1) !important
 }
 
 .inbox-product-badge {
   position: absolute !important;
   bottom: -4px !important;
   right: -4px !important;
   width: 30px !important;
   height: 30px !important;
   border-radius: 50% !important;
   border: 3px solid #fff !important;
   object-fit: cover !important;
   background: #e2e8f0 !important;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .15) !important;
   z-index: 2 !important
 }
 
 .unread-dot {
   width: 10px !important;
   height: 10px !important;
   background: #ef4444 !important;
   border-radius: 50% !important;
   box-shadow: 0 0 0 4px rgba(239, 68, 68, .1) !important
 }
 
 .inbox-info h4 {
   font-size: 14px;
   font-weight: 700;
   margin-bottom: 2px
 }
 
 .inbox-row.unread h4 {
   font-weight: 800
 }
 
 .inbox-meta {
   font-size: 11px;
   color: var(--text-sub);
   margin-bottom: 2px
 }
 
 .inbox-msg {
   font-size: 12px;
   color: #64748b;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
 }
 
 .inbox-header-actions {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 16px;
   background: #f8fafc;
   border-bottom: 1px solid var(--border)
 }
 
 .btn-clear-all {
   font-size: 12px;
   font-weight: 700;
   color: #ef4444;
   cursor: pointer;
   background: #fee2e2;
   padding: 6px 12px;
   border-radius: 20px;
   transition: .2s
 }
 
 .btn-clear-all:hover {
   background: #fecaca
 }
 
 .delete-chat-btn {
   background: #fee2e2 !important;
   color: #ef4444 !important;
   border: none !important;
   width: 34px !important;
   height: 34px !important;
   border-radius: 50% !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   cursor: pointer !important;
   transition: all .2s ease !important
 }
 
 .delete-chat-btn:hover {
   background: #ef4444 !important;
   color: #fff !important;
   transform: scale(1.1) !important
 }
 
 .btn-restore {
   font-size: 12px;
   font-weight: 700;
   color: var(--primary);
   cursor: pointer;
   background: #e0e7ff;
   padding: 6px 12px;
   border-radius: 20px;
   border: 1px solid var(--primary);
   transition: .2s
 }
 
 .btn-restore:hover {
   background: #c7d2fe
 }
 
 .btn-restore:active {
   transform: scale(.95)
 }
 
 .view-chats-btn {
   background: #fef3c7;
   color: #b45309;
   position: relative;
   padding-right: 16px
 }
 
 .view-chats-btn:hover {
   background: #fde68a
 }
 
 .view-chats-badge {
   background: #ef4444;
   color: #fff;
   border-radius: 12px;
   padding: 2px 8px;
   font-size: 11px;
   margin-left: 6px
 }
 
 .loc-request-box {
   background: #fff;
   border: 1px solid var(--border);
   padding: 12px;
   border-radius: 12px;
   margin-top: 4px;
   text-align: center;
   min-width: 220px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, .05)
 }
 
 .loc-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
   margin-top: 8px;
   padding: 10px;
   border-radius: 8px;
   font-size: 12px;
   font-weight: 700;
   cursor: pointer;
   border: none;
   transition: transform .2s, filter .2s
 }
 
 .loc-btn:active {
   transform: scale(.96)
 }
 
 .loc-btn:hover {
   filter: brightness(.9)
 }
 
 .loc-btn-current {
   background: #3b82f6;
   color: #fff
 }
 
 .loc-btn-ad {
   background: #10b981;
   color: #fff
 }
 
 .loc-btn-no {
   background: #fee2e2;
   color: #ef4444
 }
 
 #profile-modal {
   z-index: 3500 !important
 }
 
 #store-modal .icon-btn-back {
   position: absolute !important;
   left: 16px !important;
   margin: 0 !important;
   z-index: 20 !important
 }
 
 #store-modal .store-title-wrapper {
   margin: 0 auto !important;
   text-align: center !important;
   z-index: 10 !important
 }
 
 #store-header-profile-wrap {
   position: absolute !important;
   right: 16px !important;
   margin: 0 !important;
   z-index: 20 !important
 }
 
 #store-modal .fs-header {
   position: sticky !important;
   top: 0 !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   height: 56px !important;
   min-height: 56px !important;
   background: var(--surface, #fff) !important;
   border-bottom: 1px solid var(--border, #cbd5e1) !important;
   z-index: 1000 !important;
   padding: 0 14px !important;
   box-shadow: 0 2px 10px rgba(0, 0, 0, .05) !important
 }
 
 #store-modal .icon-btn-back {
   position: absolute !important;
   left: 16px !important;
   background: #f8fafc !important;
   border: 1px solid var(--border, #cbd5e1) !important;
   color: var(--text-main, #020617) !important;
   width: 36px !important;
   height: 36px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   border-radius: 50% !important;
   margin: 0 !important;
   cursor: pointer !important;
   transition: all .2s ease !important
 }
 
 #store-modal .icon-btn-back:hover {
   transform: translateX(-3px) scale(1.05) !important
 }
 
 #store-modal .store-title-wrapper {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   gap: 6px !important;
   max-width: min(60vw, 220px) !important
 }
 
 #store-modal .store-name {
   font-size: 16px !important;
   font-weight: 800 !important;
   color: var(--text-main, #020617) !important;
   margin: 0 !important;
   white-space: nowrap !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important
 }
 
 #store-modal .edit-name-btn {
   width: 26px !important;
   height: 26px !important;
   font-size: 12px !important;
   background: #f1f5f9 !important;
   border: 1px solid var(--border, #cbd5e1) !important;
   border-radius: 50% !important;
   cursor: pointer !important;
   align-items: center !important;
   justify-content: center !important;
   color: var(--text-main) !important;
   flex-shrink: 0 !important;
   transition: all .2s ease !important
 }
 
 #store-modal .edit-name-btn:hover {
   background: #e0e7ff !important;
   border-color: #c7d2fe !important;
   transform: scale(1.1) !important
 }
 
 #store-edit-cover-btn,
 .store-cover-edit-btn {
   position: absolute !important;
   bottom: 12px !important;
   right: 12px !important;
   background: rgba(255, 255, 255, .95) !important;
   padding: 6px 14px !important;
   border-radius: 20px !important;
   font-size: 12px !important;
   font-weight: 800 !important;
   color: var(--text-main, #020617) !important;
   border: 1px solid rgba(0, 0, 0, .1) !important;
   cursor: pointer !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, .2) !important;
   z-index: 50 !important;
   transition: all .3s ease !important;
   align-items: center !important;
   gap: 6px !important;
   animation: popIn .6s .2s both
 }
 
 #store-edit-cover-btn:hover {
   background: #fff !important;
   transform: translateY(-2px) scale(1.05) !important
 }
 
 #store-modal-cover {
   width: calc(100% - 24px) !important;
   height: 170px !important;
   margin: 12px auto 10px !important;
   border-radius: 16px !important;
   background-color: var(--blue-primary, #1e1b4b) !important;
   background-size: cover !important;
   background-position: center !important;
   background-repeat: no-repeat !important;
   position: relative !important;
   box-shadow: 0 4px 15px rgba(0, 0, 0, .08) !important;
   animation: fadeUpIn .5s ease-out
 }
 
 .store-avatar-wrap {
   position: absolute !important;
   bottom: -35px !important;
   left: 20px !important;
   width: 70px !important;
   height: 70px !important;
   border-radius: 50% !important;
   padding: 4px !important;
   background: var(--bg, #f8fafc) !important;
   z-index: 60 !important;
   box-shadow: 0 4px 15px rgba(0, 0, 0, .1) !important;
   animation: popIn .6s .1s both
 }
 
 #store-modal-avatar {
   width: 100% !important;
   height: 100% !important;
   border-radius: 50% !important;
   background: #e2e8f0 !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   font-size: 28px !important;
   font-weight: 800 !important;
   color: var(--primary, #4338ca) !important;
   overflow: hidden !important;
   position: relative !important;
   border: 1px solid var(--border, #cbd5e1) !important
 }
 
 #store-modal-avatar img,
 .auth-img,
 .seller-avatar-sm img,
 .store-slide-avatar img {
   display: block !important;
   width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   z-index: 15 !important
 }
 
 #store-modal .store-header-info {
   padding: 0 12px 4px 104px !important;
   margin-top: -26px !important;
   background: 0 0 !important;
   position: relative !important;
   z-index: 70 !important;
   margin-left: 0 !important;
   max-width: 100% !important
 }
 
 .store-meta-container {
   display: flex !important;
   align-items: center !important;
   justify-content: flex-start !important;
   flex-wrap: nowrap !important;
   gap: 10px !important;
   margin-top: 0 !important;
   position: relative !important;
   top: -6px !important;
   overflow-x: auto !important;
   width: 100% !important;
   min-width: 0 !important;
   padding-left: 0 !important;
   z-index: 70 !important
 }
 
 .store-stats-item {
   font-size: 13px !important;
   font-weight: 800 !important;
   color: var(--text-sub, #475569) !important;
   background: #fff !important;
   padding: 6px 14px !important;
   border-radius: 12px !important;
   display: flex !important;
   align-items: center !important;
   gap: 6px !important;
   border: 1px solid var(--border, #cbd5e1) !important
 }
 
 #store-dynamic-actions .btn-store-chat,
 .btn-store-secondary {
   position: relative !important;
   overflow: visible !important;
   margin: 0 !important;
   padding: 0 10px !important;
   font-size: 11px !important;
   font-weight: 800 !important;
   border-radius: 999px !important;
   height: 34px !important;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   gap: 4px !important;
   box-shadow: 0 2px 6px rgba(0, 0, 0, .08) !important;
   cursor: pointer !important;
   border: none !important;
   transition: all .3s cubic-bezier(.34, 1.56, .64, 1) !important
 }
 
 .btn-store-chat {
   background: linear-gradient(135deg, var(--primary, #4338ca), #6366f1) !important;
   color: #fff !important
 }
 
 .btn-store-secondary {
   background: #fff !important;
   color: var(--text-main, #020617) !important;
   border: 1px solid var(--border, #cbd5e1) !important
 }
 
 .btn-store-chat:hover {
   transform: translateY(-3px) scale(1.03) !important;
   box-shadow: 0 4px 10px rgba(67, 56, 202, .2) !important
 }
 
 .btn-store-secondary:hover {
   transform: translateY(-3px) scale(1.03) !important;
   box-shadow: 0 4px 10px rgba(0, 0, 0, .1) !important
 }
 
 .btn-store-chat:active,
 .btn-store-secondary:active {
   transform: scale(.96) !important
 }
 
 .btn-store-icon {
   position: relative !important;
   width: 36px !important;
   height: 36px !important;
   border-radius: 50% !important;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   font-size: 16px !important;
   cursor: pointer !important;
   transition: all .3s cubic-bezier(.34, 1.56, .64, 1) !important;
   box-shadow: 0 2px 6px rgba(0, 0, 0, .08) !important;
   flex-shrink: 0 !important;
   text-decoration: none !important;
   margin: 0 !important;
   padding: 0 !important;
   background-color: #f8fafc;
   color: #0f172a;
   border: 1px solid #e2e8f0
 }
 
 .btn-store-icon:hover {
   transform: translateY(-4px) scale(1.15) !important;
   box-shadow: 0 8px 16px rgba(0, 0, 0, .15) !important;
   filter: brightness(.95)
 }
 
 .btn-store-icon:active {
   transform: scale(.9) !important
 }
 
 #store-dynamic-actions .badge,
 #store-dynamic-actions .chat-badge,
 .chat-store-badge {
   position: absolute !important;
   top: -6px !important;
   right: -6px !important;
   background: #ef4444 !important;
   color: #fff !important;
   border-radius: 12px !important;
   padding: 3px 6px !important;
   font-size: 10px !important;
   font-weight: 900 !important;
   line-height: 1 !important;
   border: 2px solid var(--bg, #f8fafc) !important;
   z-index: 50 !important;
   pointer-events: none !important
 }
 
 #store-modal-loc {
   font-size: 8px !important;
   font-weight: 700 !important;
   color: var(--text-sub, #475569) !important;
   margin: 0 !important;
   display: inline-flex !important;
   align-items: center !important;
   gap: 4px !important;
   padding: 0 !important;
   background: 0 0 !important;
   border: none !important;
   width: auto !important;
   box-sizing: border-box !important
 }
 
 #store-modal .store-cover {
   transition: transform .35s ease, filter .35s ease, box-shadow .35s ease;
   will-change: transform, filter
 }
 
 #store-modal .store-cover.scrolled {
   transform: translateY(-10px) scale(.98);
   filter: saturate(1.05) brightness(1.03);
   box-shadow: 0 18px 40px rgba(0, 0, 0, .12)
 }
 
 #store-modal .store-avatar-wrap {
   transition: transform .35s ease, left .35s ease, bottom .35s ease, box-shadow .35s ease, width .35s ease, height .35s ease;
   position: absolute !important;
   bottom: -35px !important;
   left: 20px !important;
   width: 70px !important;
   height: 70px !important;
   border-radius: 50% !important;
   padding: 4px !important;
   background: var(--bg, #f8fafc) !important;
   z-index: 60 !important;
   box-shadow: 0 4px 15px rgba(0, 0, 0, .1) !important;
   animation: popIn .6s .1s both
 }
 
 #store-modal .store-avatar-wrap.sticky {
   position: fixed !important;
   top: 74px !important;
   left: 16px !important;
   bottom: auto !important;
   transform: translateY(0) scale(.92);
   width: 58px !important;
   height: 58px !important;
   box-shadow: 0 16px 30px rgba(0, 0, 0, .16) !important
 }
 
 #store-modal #store-dynamic-actions,
 #store-modal .store-meta-container {
   z-index: 95;
   position: relative
 }
 
 #store-modal .store-avatar-wrap.sticky {
   position: static !important;
   top: auto !important;
   left: auto !important;
   transform: none !important;
   width: auto !important;
   height: auto !important;
   box-shadow: none !important;
   z-index: auto !important
 }
 
 @media (min-width:641px) {
   #store-modal .store-header-info {
     transition: padding-left .18s ease;
     padding-left: 120px
   }
 
   #store-modal .store-cover.scrolled {
     padding-top: 92px
   }
 
   #store-modal .store-avatar-wrap.sticky {
     top: 84px !important
   }
 
   #store-modal #store-dynamic-actions,
   #store-modal .store-meta-container {
     z-index: 9999 !important;
     position: relative !important;
     pointer-events: auto !important
   }
 
   #store-modal .store-avatar-wrap.sticky {
     z-index: 10 !important
   }
 }
 
 #store-modal .store-header-info {
   padding: 0 12px 4px 104px !important;
   margin-top: -26px !important;
   background: 0 0 !important;
   position: relative !important;
   z-index: 70 !important;
   margin-left: 0 !important;
   max-width: 100% !important
 }
 
 @media (min-width:641px) {
   #store-modal .store-header-info {
     padding-left: 110px !important;
     margin-top: -26px !important
   }
 
   #store-modal .store-meta-container {
     top: -6px !important
   }
 
   #store-modal .store-avatar-wrap {
     bottom: -35px !important;
     left: 20px !important
   }
 
   #store-modal #store-dynamic-actions {
     margin-top: 0 !important;
     padding-top: 0 !important
   }
 }
 
 #store-modal .store-items-header {
   display: flex !important;
   justify-content: space-between !important;
   align-items: center !important;
   gap: 10px !important;
   flex-wrap: wrap !important;
   margin-bottom: 8px !important
 }
 
 #store-modal .store-items-header h3 {
   margin: 0 !important;
   flex: 1 1 auto !important;
   min-width: 0 !important
 }
 
 #store-modal .store-items-header .store-loc {
   flex-shrink: 1 !important;
   min-width: 0 !important
 }
 
 #store-modal .store-loc::before {
   content: '📍'
 }
 
 #store-modal .store-loc {
   font-size: 8px !important;
   line-height: 1.2 !important
 }
 
 #store-modal .store-modal-placeholder {
   height: 0 !important
 }
 
 #store-modal .store-modal-body {
   position: relative !important
 }
 
 #store-modal .store-cover.scrolled+.store-header-info {
   opacity: .98 !important
 }
 
 #store-modal .store-avatar-wrap.sticky+.store-header-info {
   padding-top: 16px !important
 }
 
 #store-grid {
   margin-top: 8px !important;
   padding: 0 2px 20px !important
 }
 
 #suggested-stores-section,
 .suggested-stores-wrapper {
   margin-top: 30px !important;
   padding-top: 24px !important;
   border-top: 2px dashed var(--border, #cbd5e1) !important;
   width: 100% !important
 }
 
 .suggested-stores-title {
   font-size: 18px !important;
   font-weight: 800 !important;
   margin-bottom: 16px !important;
   color: var(--text-main, #020617) !important
 }
 
 #store-slider-container,
 .store-slider {
   display: flex !important;
   gap: 16px !important;
   overflow-x: auto !important;
   padding-bottom: 16px !important;
   scroll-snap-type: x mandatory !important;
   -ms-overflow-style: none !important;
   width: 100% !important
 }
 
 .store-slider::-webkit-scrollbar {
   display: none !important
 }
 
 .store-slide-card {
   min-width: 140px !important;
   max-width: 140px !important;
   background: var(--surface, #fff) !important;
   border: 1px solid var(--border, #cbd5e1) !important;
   border-radius: 16px !important;
   text-align: center !important;
   scroll-snap-align: start !important;
   cursor: pointer !important;
   transition: all .3s ease !important;
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   overflow: hidden !important;
   padding: 0 !important
 }
 
 .store-slide-card:hover {
   border-color: var(--primary, #4338ca) !important;
   transform: translateY(-4px) !important;
   box-shadow: 0 10px 25px rgba(0, 0, 0, .08) !important
 }
 
 .store-slide-card:hover .store-slide-avatar img {
   transform: scale(1.1) !important
 }
 
 .store-slide-cover {
   width: 100% !important;
   height: 55px !important;
   background-size: cover !important;
   background-position: center !important;
   background-repeat: no-repeat !important;
   flex-shrink: 0 !important;
   border-bottom: 1px solid rgba(0, 0, 0, .05) !important
 }
 
 .store-slide-avatar {
   width: 56px !important;
   height: 56px !important;
   border-radius: 50% !important;
   background: #e2e8f0 !important;
   margin: -28px auto 8px auto !important;
   overflow: hidden !important;
   position: relative !important;
   border: 2px solid #fff !important;
   box-shadow: 0 2px 6px rgba(0, 0, 0, .1) !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   flex-shrink: 0 !important;
   z-index: 10 !important;
   font-size: 24px !important;
   font-weight: 800 !important;
   color: var(--primary) !important
 }
 
 .store-slide-info {
   padding: 0 8px 16px 8px !important;
   width: 100% !important;
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important
 }
 
 .store-slide-name {
   font-size: 14px !important;
   font-weight: 800 !important;
   color: var(--text-main, #020617) !important;
   white-space: nowrap !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   margin-bottom: 6px !important;
   width: 100% !important
 }
 
 .store-slide-rating {
   font-size: 11px !important;
   color: var(--text-sub, #475569) !important;
   font-weight: 800 !important;
   background: #f8fafc !important;
   padding: 4px 8px !important;
   border-radius: 8px !important;
   display: inline-block !important
 }
 
 #v-seller-card,
 .seller-profile-card {
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
   padding: 10px 12px !important;
   background: #fff !important;
   border: 1px solid var(--border, #cbd5e1) !important;
   border-radius: 14px !important;
   margin-bottom: 16px !important;
   cursor: pointer !important;
   transition: all .3s ease !important;
   box-shadow: 0 2px 8px rgba(0, 0, 0, .02) !important
 }
 
 .seller-profile-card.slim {
   padding: 10px 12px !important;
   border-radius: 14px !important
 }
 
 .seller-profile-card:hover {
   border-color: var(--primary, #4338ca) !important;
   box-shadow: 0 8px 20px rgba(67, 56, 202, .1) !important;
   transform: translateY(-2px) !important
 }
 
 .seller-info-left {
   display: flex !important;
   align-items: center !important;
   gap: 14px !important;
   min-width: 0 !important;
   flex: 1 !important
 }
 
 .seller-avatar-sm {
   width: 42px !important;
   height: 42px !important;
   border-radius: 50% !important;
   background: #e0e7ff !important;
   overflow: hidden !important;
   position: relative !important;
   flex-shrink: 0 !important;
   border: 2px solid #fff !important;
   box-shadow: 0 2px 6px rgba(0, 0, 0, .1) !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   font-weight: 800 !important;
   color: var(--primary, #4338ca) !important;
   font-size: 16px !important
 }
 
 .seller-profile-card.slim .seller-avatar-sm {
   width: 40px !important;
   height: 40px !important
 }
 
 .seller-name-txt {
   font-size: 14px !important;
   font-weight: 800 !important;
   color: var(--text-main, #020617) !important;
   margin-bottom: 2px !important;
   white-space: nowrap !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important
 }
 
 .seller-profile-card.slim .seller-name-txt {
   font-size: 13px !important;
   margin-bottom: 2px !important
 }
 
 .seller-ads-count {
   font-size: 10px !important;
   font-weight: 700 !important;
   color: var(--text-sub, #475569) !important
 }
 
 .view-store-btn {
   font-size: 11px !important;
   font-weight: 800 !important;
   color: var(--primary, #4338ca) !important;
   background: #f1f5f9 !important;
   padding: 6px 12px !important;
   border-radius: 16px !important;
   transition: all .3s ease !important;
   white-space: nowrap !important;
   border: 1px solid transparent !important;
   flex-shrink: 0 !important;
   margin-left: 10px !important
 }
 
 .seller-profile-card:hover .view-store-btn {
   background: var(--primary, #4338ca) !important;
   color: #fff !important;
   box-shadow: 0 4px 12px rgba(67, 56, 202, .2) !important
 }
 
 #store-dynamic-actions {
   scroll-behavior: smooth;
   padding-bottom: 8px !important
 }
 
 #store-dynamic-actions button {
   transition: all .25s cubic-bezier(.4, 0, .2, 1) !important;
   will-change: transform, box-shadow
 }
 
 #store-dynamic-actions button:hover {
   transform: translateY(-2px) !important;
   box-shadow: 0 4px 10px rgba(0, 0, 0, .08) !important;
   filter: brightness(1.05)
 }
 
 #store-dynamic-actions button:active {
   transform: translateY(1px) scale(.92) !important;
   box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
   filter: brightness(.95)
 }
 
 #store-dynamic-actions>button,
 #store-dynamic-actions>span {
   opacity: 0;
   animation: slideInRightFluid .4s cubic-bezier(.175, .885, .32, 1.275) forwards
 }
 
 #store-dynamic-actions>:first-child {
   animation-delay: 50ms
 }
 
 #store-dynamic-actions>:nth-child(2) {
   animation-delay: .1s
 }
 
 #store-dynamic-actions>:nth-child(3) {
   animation-delay: .15s
 }
 
 #store-dynamic-actions>:nth-child(4) {
   animation-delay: .2s
 }
 
 #store-dynamic-actions>:nth-child(5) {
   animation-delay: .25s
 }
 
 #store-dynamic-actions>:nth-child(6) {
   animation-delay: .3s
 }
 
 #store-dynamic-actions>:nth-child(7) {
   animation-delay: .35s
 }
 
 #store-dynamic-actions>:nth-child(8) {
   animation-delay: .4s
 }
 
 @keyframes slideInMicAdvanced {
   from {
     opacity: 0;
     transform: translateY(10px) scale(.98)
   }
 
   to {
     opacity: 1;
     transform: translateY(0) scale(1)
   }
 }
 
 @keyframes rippleAdvanced {
   0% {
     transform: scale(.7);
     opacity: .6
   }
 
   100% {
     transform: scale(1.8);
     opacity: 0
   }
 }
 
 @keyframes waveAnimAdvanced {
   0% {
     transform: scaleY(.35);
     opacity: .45
   }
 
   50% {
     transform: scaleY(1);
     opacity: 1
   }
 
   100% {
     transform: scaleY(.35);
     opacity: .45
   }
 }
 
 @keyframes slideInRightFluid {
   from {
     opacity: 0;
     transform: translateX(15px)
   }
 
   to {
     opacity: 1;
     transform: translateX(0)
   }
 }
 
 .form-group {
   margin-bottom: 12px
 }
 
 .label {
   display: block;
   margin-bottom: 4px;
   font-weight: 700;
   font-size: 11px;
   text-transform: uppercase;
   color: var(--text-sub);
   letter-spacing: .5px
 }
 
 .input {
   width: 100%;
   padding: 12px 14px !important;
   border: 2px solid #e2e8f0 !important;
   border-radius: 12px !important;
   background: #f8fafc;
   font-size: 14px;
   font-weight: 600;
   color: var(--text-main);
   transition: all .3s ease;
   box-sizing: border-box
 }
 
 .input:focus {
   background: #fff;
   border-color: var(--primary) !important;
   box-shadow: 0 4px 15px rgba(67, 56, 202, .1) !important
 }

 .price-field-shell,
 .discount-field-shell {
   position: relative;
 }

 .price-field-shell {
   isolation: isolate;
 }

 .price-field-shell > .input {
   padding-right: 98px !important;
 }

 .discount-row-hidden {
   display: none;
 }

 .vehicle-age-row-hidden {
   display: none;
 }

 .vehicle-age-helper {
   min-height: 14px;
   margin: 4px 0 0 4px;
   color: #4338ca;
   font-size: 11px;
   font-weight: 800;
   line-height: 14px;
 }

 .price-field-shell > .discount-field-shell {
   position: absolute;
   top: 7px;
   right: 7px;
   width: 82px;
   z-index: 2;
 }

 .discount-field-shell .input {
   width: 100%;
   min-height: 28px;
   padding: 5px 6px !important;
   border: 1px solid #bbf7d0 !important;
   border-radius: 999px !important;
   background: #f0fdf4;
   color: #15803d;
   font-size: 11px;
   font-weight: 900;
   text-align: center;
   box-shadow: 0 3px 10px rgba(22, 163, 74, .08);
 }

 .discount-field-shell .input::placeholder {
   color: #16a34a;
   opacity: .75;
 }

 .discount-field-shell .input:focus {
   border-color: #22c55e !important;
   box-shadow: 0 4px 12px rgba(22, 163, 74, .14) !important;
 }

 .discount-field-shell::before {
   content: 'DISCOUNT';
   position: absolute;
   top: -8px;
   right: 5px;
   z-index: 1;
   padding: 2px 6px;
   border: 1px solid #bbf7d0;
   border-radius: 999px;
   background: #dcfce7;
   color: #15803d;
   font-size: 8px;
   font-weight: 900;
   letter-spacing: .4px;
   pointer-events: none;
 }

 .discount-field-shell .input[value=''] {
   color: transparent;
 }

 @media (max-width: 640px) {
   .price-field-shell > .input {
     padding-right: 88px !important;
   }

   .price-field-shell > .discount-field-shell {
     top: 6px;
     right: 6px;
     width: 74px;
   }

   .discount-field-shell::before {
     top: -7px;
     right: 2px;
     padding: 1px 4px;
     font-size: 7px;
   }

   .discount-field-shell .input {
     min-height: 26px;
     padding: 4px 4px !important;
     font-size: 10px;
   }
 }

 @media (max-width: 380px) {
   .price-field-shell > .input {
     padding-right: 78px !important;
   }

   .price-field-shell > .discount-field-shell {
     width: 66px;
   }

   .discount-field-shell .input {
     font-size: 9px;
   }
 }
 
 .dynamic-grid-2 {
   display: flex;
   flex-direction: row;
   gap: 10px;
   margin-bottom: 12px;
   width: 100%
 }
 
 .dynamic-grid-2 .form-group {
   flex: 1;
   min-width: 0;
   margin-bottom: 0
 }
 
 input[type=datetime-local] {
   position: relative;
   padding: 14px 14px 14px 40px !important;
   background: #f0f4ff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%234338ca" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>') no-repeat 12px center !important;
   border: 2px solid #c7d2fe !important;
   color: var(--primary) !important;
   font-weight: 800 !important;
   cursor: pointer;
   text-align: left
 }
 
 input[type=datetime-local]::-webkit-calendar-picker-indicator {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   cursor: pointer
 }
 
 .premium-date-input {
   width: 100%;
   box-sizing: border-box;
   margin-top: 10px;
   padding: 16px !important;
   background: linear-gradient(145deg, #fff, #f8fafc) !important;
   border: 2px solid var(--primary) !important;
   border-radius: 14px !important;
   font-size: 15px;
   font-weight: 900;
   color: var(--primary);
   text-align: center;
   text-transform: uppercase;
   letter-spacing: 1px;
   outline: 0;
   cursor: pointer;
   position: relative;
   box-shadow: 0 6px 15px rgba(67, 56, 202, .12);
   transition: all .3s cubic-bezier(.4, 0, .2, 1)
 }
 
 .premium-date-input:active,
 .premium-date-input:focus {
   transform: scale(.98);
   box-shadow: 0 2px 6px rgba(67, 56, 202, .2);
   background: #eef2ff !important
 }
 
 .premium-date-input::-webkit-calendar-picker-indicator {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   cursor: pointer
 }
 
 .premium-date-input::-webkit-datetime-edit {
   display: flex;
   justify-content: center;
   align-items: center
 }
 
 .premium-date-input::-webkit-datetime-edit-fields-wrapper {
   display: flex;
   justify-content: center;
   width: 100%
 }
 
 .switch-label {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px;
   background: #fff1f2;
   border: 1px solid #fda4af;
   border-radius: 10px;
   cursor: pointer;
   margin-bottom: 10px
 }
 
 .switch-label span {
   font-weight: 700;
   color: #be123c;
   font-size: 13px;
   display: flex;
   align-items: center;
   gap: 6px
 }
 
 .switch-input {
   width: 18px;
   height: 18px;
   accent-color: #e11d48
 }
 
 .upload-zone {
   border: 2px dashed #cbd5e1;
   border-radius: 12px;
   padding: 20px;
   text-align: center;
   cursor: pointer;
   background: #f8fafc;
   margin-bottom: 12px;
   transition: .2s
 }
 
 .upload-zone:hover {
   border-color: var(--primary);
   background: #eef2ff
 }
 
 .upload-zone p {
   color: var(--text-sub);
   font-size: 12px;
   margin-top: 6px
 }
 
 .upload-zone span {
   font-size: 20px
 }
 
 .preview-grid {
   display: flex;
   gap: 12px;
   overflow-x: auto;
   padding-bottom: 10px
 }
 
 .thumb {
   width: 85px;
   height: 85px;
   border-radius: 12px;
   background-size: cover;
   background-position: center;
   flex-shrink: 0;
   position: relative;
   border: 1px solid var(--border);
   overflow: hidden
 }
 
 .thumb-overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, .6);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 6px;
   opacity: 0;
   transition: .2s;
   padding: 4px
 }
 
 .thumb:hover .thumb-overlay {
   opacity: 1
 }
 
 .thumb-action {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: #fff;
   color: #000;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   transition: .2s;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .2)
 }
 
 .thumb-action:hover {
   transform: scale(1.15)
 }
 
 .thumb-action.rm {
   background: #ef4444;
   color: #fff
 }
 
 .thumb-rm {
   position: absolute;
   top: -6px;
   right: -6px;
   background: #ef4444;
   color: #fff;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   font-size: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .2)
 }
 
 .btn-primary {
   background: var(--primary);
   color: #fff;
   padding: 12px;
   border-radius: 10px;
   font-weight: 700;
   border: none;
   width: 100%;
   transition: .2s;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   text-decoration: none;
   font-size: 14px;
   cursor: pointer
 }
 
 .btn-primary:active {
   transform: scale(.98)
 }
 
 .btn-primary:hover {
   background: #4338ca
 }
 
 .btn-primary:disabled {
   background: #94a3b8;
   cursor: not-allowed
 }
 
 .btn-google {
   background: #fff;
   color: #333;
   border: 1px solid #ccc;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   font-weight: 600;
   width: 100%;
   padding: 12px;
   border-radius: 12px;
   margin-top: 12px;
   cursor: pointer;
   transition: .2s
 }
 
 .btn-google:hover {
   background: #f8f8f8;
   border-color: #bbb
 }
 
 #image-edit-modal {
   z-index: 3100 !important;
   background: #000 !important;
   padding: 0 !important
 }
 
 #image-edit-modal .modal-content.pro-editor {
   z-index: 3101 !important;
   position: fixed !important;
   inset: 0;
   width: 100vw !important;
   height: 100dvh !important;
   max-height: 100dvh !important;
   background: #000;
   display: flex;
   flex-direction: column;
   border-radius: 0 !important;
   border: none;
   overflow: hidden;
   margin: 0 !important
 }
 
 #image-edit-modal .pro-header {
   background: rgba(15, 23, 42, .85);
   color: #fff;
   padding: env(safe-area-inset-top, 10px) 16px 10px 16px !important;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
   z-index: 150;
   flex-shrink: 0
 }
 
 .pro-title {
   font-weight: 800;
   font-size: 16px;
   background: linear-gradient(135deg, #38bdf8, #c084fc);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent
 }
 
 .pro-icon-btn {
   background: rgba(255, 255, 255, .1) !important;
   width: 34px;
   height: 34px;
   border-radius: 50%;
   color: #fff;
   border: none;
   font-size: 14px;
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center
 }
 
 .header-save-btn {
   background: #38bdf8 !important;
   color: #0f172a !important;
   border: none;
   padding: 6px 14px;
   border-radius: 20px;
   font-weight: 800;
   font-size: 13px;
   box-shadow: 0 4px 12px rgba(56, 189, 248, .4);
   cursor: pointer
 }
 
 #image-edit-modal .pro-body {
   flex: 1;
   display: flex;
   flex-direction: column;
   background: #000;
   overflow: hidden
 }
 
 .pro-canvas-wrap {
   flex-grow: 1;
   position: relative;
   padding: 0 !important;
   margin: 0 !important;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #000 !important;
   touch-action: none;
   overflow: hidden
 }
 
 .blurred-bg {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   filter: blur(25px) brightness(.3);
   z-index: 0
 }
 
 #canvas-internal-container {
   position: relative;
   max-width: 100%;
   max-height: 100%;
   margin: auto
 }
 
 #edit-canvas {
   display: block;
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   position: relative;
   z-index: 1;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .5)
 }
 
 .crop-handle {
   width: 24px;
   height: 24px;
   background: #38bdf8;
   border-radius: 50%;
   position: absolute;
   border: 3px solid #fff;
   box-shadow: 0 2px 8px rgba(0, 0, 0, .5)
 }
 
 .crop-handle.top-left {
   top: -12px;
   left: -12px
 }
 
 .crop-handle.top-right {
   top: -12px;
   right: -12px
 }
 
 .crop-handle.bottom-left {
   bottom: -12px;
   left: -12px
 }
 
 .crop-handle.bottom-right {
   bottom: -12px;
   right: -12px
 }
 
 .smart-bottom-sheet {
   background: rgba(15, 23, 42, .95);
   border-top: 1px solid #1e293b;
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   z-index: 100;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   height: auto;
   max-height: 60vh;
   transition: max-height .3s cubic-bezier(.3, 1, .3, 1);
   box-shadow: 0 -10px 40px rgba(0, 0, 0, .8);
   overflow: hidden
 }
 
 .smart-bottom-sheet.collapsed {
   max-height: 55px
 }
 
 .sheet-drag-area {
   width: 100%;
   height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   padding-top: 10px;
   flex-shrink: 0
 }
 
 .drag-pill {
   width: 40px;
   height: 4px;
   background: #475569;
   border-radius: 10px
 }
 
 .sheet-scroll-content {
   overflow-y: auto;
   overflow-x: hidden;
   -ms-overflow-style: none;
   flex-grow: 1
 }
 
 .pro-toolbar {
   display: flex;
   gap: 8px;
   padding: 5px 12px 10px 12px;
   overflow-x: auto;
   -ms-overflow-style: none;
   border-bottom: 1px solid #1e293b
 }
 
 .edit-tool-btn {
   flex-shrink: 0;
   background: #1e293b !important;
   color: #fff !important;
   border: 1px solid #334155 !important;
   border-radius: 10px !important;
   cursor: pointer;
   width: 40px !important;
   height: 40px !important;
   padding: 0 !important;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px !important
 }
 
 .edit-tool-btn.active {
   background: #38bdf8 !important;
   border-color: #38bdf8 !important
 }
 
 .edit-tool-btn.magic-btn {
   background: linear-gradient(135deg, #8b5cf6, #d946ef) !important;
   border: none !important
 }
 
 .pro-controls-wrapper {
   padding: 12px;
   display: flex;
   flex-direction: column;
   gap: 12px
 }
 
 .tool-mode-bar {
   display: flex;
   gap: 4px;
   background: #020617;
   padding: 4px;
   border-radius: 12px
 }
 
 .mode-btn {
   flex: 1;
   background: 0 0;
   border: none;
   padding: 8px 0;
   font-size: 18px;
   border-radius: 10px;
   transition: .2s;
   display: flex;
   align-items: center;
   justify-content: center
 }
 
 .mode-btn.active {
   background: #1e293b;
   box-shadow: 0 4px 10px rgba(0, 0, 0, .3)
 }
 
 .tool-section {
   display: none;
   flex-direction: column;
   gap: 10px;
   animation: slideUp .2s ease-out
 }
 
 .tool-section.active {
   display: flex
 }
 
 .horizontal-scroll {
   flex-direction: row !important;
   overflow-x: auto;
   padding-bottom: 5px;
   gap: 8px
 }
 
 .pro-control-row {
   display: flex;
   gap: 8px;
   align-items: center;
   width: 100%
 }
 
 .input.dark-input {
   background: #020617 !important;
   border: 1px solid #1e293b !important;
   color: #fff !important;
   padding: 10px 14px !important;
   border-radius: 10px;
   font-size: 14px;
   width: 100%;
   outline: 0
 }
 
 .color-picker-pro {
   height: 38px !important;
   width: 38px !important;
   flex-shrink: 0;
   padding: 0 !important;
   border: none;
   background: 0 0;
   border-radius: 10px;
   overflow: hidden;
   cursor: pointer
 }
 
 .color-picker-pro::-webkit-color-swatch-wrapper {
   padding: 0
 }
 
 .color-picker-pro::-webkit-color-swatch {
   border: none;
   border-radius: 10px
 }
 
 .pro-slider {
   flex: 1;
   height: 6px !important;
   border-radius: 10px;
   background: #1e293b;
   outline: 0
 }
 
 .pro-slider::-webkit-slider-thumb {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: #38bdf8;
   cursor: pointer;
   border: 3px solid #fff;
   box-shadow: 0 2px 6px rgba(0, 0, 0, .5)
 }
 
 .slider-group {
   display: flex;
   align-items: center;
   gap: 10px
 }
 
 .slider-group label {
   width: 30px;
   font-size: 18px;
   text-align: center
 }
 
 .text-bg-toggle {
   background: #1e293b;
   color: #94a3b8;
   border: 1px solid #334155;
   padding: 0 10px;
   height: 38px;
   border-radius: 10px;
   font-weight: 800;
   font-size: 12px;
   white-space: nowrap
 }
 
 .text-bg-toggle.active {
   background: #10b981;
   color: #fff;
   border-color: #059669
 }
 
 .brush-preview-box {
   width: 38px;
   height: 38px;
   flex-shrink: 0;
   background: #020617;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center
 }
 
 .apply-bake-btn {
   background: #1e293b;
   color: #fff;
   border: none;
   padding: 10px;
   border-radius: 10px;
   font-weight: 700;
   width: 100%;
   margin-top: 4px;
   font-size: 13px;
   cursor: pointer;
   transition: .2s
 }
 
 .apply-bake-btn:active {
   background: #38bdf8;
   color: #000
 }
 
 .crop-action-bar {
   display: flex;
   gap: 8px;
   padding: 12px;
   border-bottom: 1px solid #1e293b
 }
 
 .crop-action-bar .btn-primary {
   flex: 1;
   padding: 12px;
   border-radius: 10px;
   border: none;
   font-weight: 800;
   color: #fff;
   font-size: 14px;
   cursor: pointer
 }
 
 .cancel-btn {
   background: #334155 !important
 }
 
 .apply-btn {
   background: #10b981 !important
 }
 
 .map-container {
   height: 200px;
   background: #e2e8f0;
   border-radius: var(--radius);
   overflow: hidden;
   border: 1px solid var(--border);
   box-shadow: var(--shadow);
   z-index: 1
 }
 
 .leaflet-container .leaflet-control-attribution {
   background: rgba(255, 255, 255, .1);
   padding: 0 5px;
   font-size: 10px;
   color: #64748b
 }
 
 .leaflet-container a {
   color: inherit !important;
   pointer-events: none;
   text-decoration: none
 }
 
 .leaflet-control-layers {
   background: rgba(255, 255, 255, .2) !important;
   border: none !important;
   box-shadow: none !important;
   padding: 5px;
   border-radius: 8px
 }
 
 .leaflet-control-layers-expanded {
   background: rgba(0, 0, 0, .3) !important;
   color: #fff !important
 }
 
 .leaflet-control-layers-list label {
   color: #fff;
   font-weight: 500;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, .5)
 }
 
 .v-rope-overlay {
   position: relative;
   width: 100%;
   height: 60px;
   margin: 10px 0 15px 0;
   z-index: 5;
   display: flex;
   justify-content: center;
   background: 0 0;
   pointer-events: none
 }
 
 .v-rope-svg {
   width: 100%;
   height: 100%;
   overflow: visible
 }
 
 .rope-body {
   fill: none;
   stroke: #dcbfa6;
   stroke-width: 4;
   stroke-linecap: round;
   stroke-linejoin: round;
   filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .2))
 }
 
 .rope-texture {
   fill: none;
   stroke: #8d6e63;
   stroke-width: 1.5;
   stroke-linecap: round;
   stroke-dasharray: 4, 4;
   opacity: .8;
   animation: rope-crawl 20s linear infinite
 }
 
 .rope-point {
   position: absolute;
   width: 30px;
   height: 30px;
   background: #fff;
   border: 2px solid var(--primary);
   border-radius: 50%;
   box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
   transition: transform .2s;
   z-index: 10;
   pointer-events: auto;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   line-height: 1;
   top: 15px
 }
 
 .rope-point.start {
   left: 15px;
   border-color: #10b981
 }
 
 .rope-point.end {
   right: 15px;
   border-color: #ef4444
 }
 
 .rope-point:hover {
   transform: scale(1.2);
   cursor: help
 }
 
 .rope-point::after {
   content: attr(data-label);
   position: absolute;
   bottom: 36px;
   background: rgba(15, 23, 42, .95);
   color: #fff;
   padding: 6px 10px;
   border-radius: 8px;
   font-size: 10px;
   font-weight: 700;
   white-space: pre;
   text-align: center;
   line-height: 1.4;
   opacity: 0;
   pointer-events: none;
   transition: all .2s;
   box-shadow: 0 4px 8px rgba(0, 0, 0, .25);
   min-width: 80px
 }
 
 .rope-point::before {
   content: '';
   position: absolute;
   bottom: 28px;
   border: 5px solid transparent;
   border-top-color: rgba(15, 23, 42, .95);
   opacity: 0;
   transition: all .2s
 }
 
 .rope-point:hover::after,
 .rope-point:hover::before {
   opacity: 1;
   transform: translateY(-3px)
 }
 
 .rope-point.start::after {
   left: -10px;
   transform-origin: left bottom;
   text-align: left
 }
 
 .rope-point.start::before {
   left: 10px
 }
 
 .rope-point.end::after {
   right: -10px;
   left: auto;
   transform-origin: right bottom;
   text-align: right
 }
 
 .rope-point.end::before {
   right: 10px;
   left: auto
 }
 
 .custom-pin {
   position: relative;
   text-align: center;
   transform-origin: bottom center
 }
 
 @media (max-width: 640px) {
  .nearby-panel {
    max-height: 48vh; /* Increased so cards are visible on small mobiles */
  }

  .nearby-panel-header {
    padding: 8px 10px 6px;
  }
  
  .nearby-radius-section {
    padding: 8px 12px; /* Mobile padding for slider */
  }
 
   .nearby-panel-header .inline-style-247 {
     gap: 6px;
     padding-right: 36px;
   }
 
   .close-panel-btn {
     top: 6px;
     right: 6px;
     width: 30px;
     height: 30px;
   }
 
   .radius-summary {
     gap: 4px;
   }
 
   .v-rope-overlay.slider-mode {
     height: 16px;
     margin: 2px 0 4px 0;
   }
 
   .rope-point {
     width: 12px;
     height: 12px;
     top: 50%;
   }
 
   #global-map-canvas {
     height: calc(100vh - 72px);
   }
 }

 .global-map-loading-overlay .spinner-ring {
   width: 44px;
   height: 44px;
   border-width: 4px;
   border-style: solid;
   border-color: rgba(59, 130, 246, 0.2);
   border-top-color: var(--primary);
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }

 @keyframes spin {
   to { transform: rotate(360deg); }
 }
 
 .pin-head {
   width: 36px;
   height: 36px;
   background: linear-gradient(135deg, var(--primary), #4f46e5);
   border: 2px solid #fff;
   border-radius: 50% 50% 0 50%;
   transform: rotate(45deg);
   box-shadow: 0 8px 20px rgba(79, 70, 229, .4);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
   animation: pin-drop .6s cubic-bezier(.175, .885, .32, 1.275)
 }
 
 .pin-icon {
   transform: rotate(-45deg);
   font-size: 16px;
   color: #fff
 }
 
 .pin-pulse {
   position: absolute;
   bottom: -8px;
   left: 50%;
   transform: translateX(-50%);
   width: 16px;
   height: 8px;
   background: rgba(0, 0, 0, .5);
   border-radius: 50%;
   filter: blur(3px);
   z-index: -1;
   animation: pin-pulse-shadow 2s infinite
 }
 
 .leaflet-popup-content-wrapper {
   background: rgba(255, 255, 255, .95) !important;
   border-radius: 14px !important;
   box-shadow: 0 8px 25px rgba(0, 0, 0, .25) !important;
   padding: 0 !important;
   border: 1px solid rgba(255, 255, 255, .6);
   overflow: hidden;
   pointer-events: auto !important
 }
 
 .leaflet-popup-tip {
   background: rgba(255, 255, 255, .95) !important
 }
 
 .leaflet-popup-content {
   margin: 0 !important;
   width: 200px !important;
   min-width: 200px !important;
   pointer-events: auto !important
 }
 
 .leaflet-container a.leaflet-popup-close-button {
   display: none !important
 }
 
 .mp-container {
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 10px;
   gap: 10px;
   cursor: default
 }
 
 .mp-info {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   justify-content: center
 }
 
 .mp-title {
   font-size: 9px;
   font-weight: 800;
   text-transform: uppercase;
   color: var(--primary);
   margin-bottom: 2px;
   letter-spacing: .5px
 }
 
 .mp-addr {
   font-size: 11px;
   font-weight: 700;
   color: #1e293b;
   line-height: 1.3;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden
 }
 
 .mp-dir-btn {
   width: 38px;
   height: 38px;
   background: #2563eb;
   color: #fff !important;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   box-shadow: 0 4px 10px rgba(37, 99, 235, .4);
   text-decoration: none !important;
   flex-shrink: 0;
   transition: transform .2s;
   pointer-events: auto !important;
   cursor: pointer !important;
   z-index: 1000
 }
 
 .mp-dir-btn:active {
   transform: scale(.9)
 }
 
 .mp-dir-btn:hover {
   background: #1d4ed8;
   transform: scale(1.05)
 }
 
 #full-map-modal.modal.active {
   background: #fff !important;
   display: flex !important
 }
 
 #full-map-modal .modal-content {
   animation: none !important;
   transform: none !important;
   margin: 0 !important;
   width: 100vw !important;
   height: 100vh !important;
   max-width: 100% !important;
   max-height: 100% !important;
   border-radius: 0 !important
 }
 
 .picker-header-text {
   display: flex;
   flex-direction: column;
   flex: 1;
   min-width: 0;
   padding: 0 10px
 }
 
 .picker-title {
   font-size: 16px;
   font-weight: 700;
   color: var(--text-main)
 }
 
 .picker-subtitle {
   font-size: 11px;
   color: var(--text-sub);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 500
 }
 
 .picker-footer {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 16px 20px 30px;
   background: #fff;
   z-index: 1000;
   display: flex;
   gap: 12px;
   flex-direction: column;
   border-top-left-radius: 24px;
   border-top-right-radius: 24px;
   box-shadow: 0 -4px 20px rgba(0, 0, 0, .1)
 }
 
 .picker-btn-gps {
   background: #f0fdf4;
   color: #166534;
   border: 1px solid #bbf7d0;
   padding: 12px;
   border-radius: 12px;
   font-weight: 700;
   font-size: 13px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   transition: .2s
 }
 
 .picker-btn-gps:active {
   background: #dcfce7
 }
 
 .center-marker {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 40px;
   height: 40px;
   transform: translate(-50%, -100%);
   z-index: 999;
   pointer-events: none;
   filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3))
 }
 
 .center-marker::after {
   content: '';
   position: absolute;
   bottom: -4px;
   left: 50%;
   transform: translateX(-50%);
   width: 8px;
   height: 4px;
   background: rgba(0, 0, 0, .3);
   border-radius: 50%;
   filter: blur(2px)
 }
 
 .filter-panel.open {
   padding-bottom: 4px;
   overflow: visible !important;
   z-index: 2000
 }
 
 .fp-section {
   padding: 4px 16px !important;
   position: relative
 }
 
 .v-rope-overlay.slider-mode {
   position: relative;
   width: 100%;
   height: 18px;
   margin: 2px 0 6px 0;
   pointer-events: auto !important;
   touch-action: none;
   z-index: 10;
   overflow: visible;
 }
 
 .v-rope-overlay.slider-mode .rope-body {
   stroke: #cbd5e1;
   stroke-width: 4;
   fill: none;
   stroke-linecap: round;
   stroke-dasharray: 4, 8;
   animation: rope-flow 10s linear infinite
 }
 
 .rope-active-body {
   stroke: var(--primary);
   stroke-width: 4;
   fill: none;
   stroke-linecap: round;
   stroke-dasharray: 4, 8;
   animation: rope-flow 3s linear infinite
 }
 
 .v-rope-overlay.slider-mode .rope-point {
   position: absolute;
   width: 14px;
   height: 14px;
   z-index: 150;
   cursor: grab;
   transform: translate(-50%, -50%);
   top: 50%
 }
 
 .knot-inner {
   width: 100%;
   height: 100%;
   background: #fff;
   border: 3px solid var(--primary);
   border-radius: 50%;
   box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
   animation: knot-pulse 2s infinite
 }
 
 .rope-floating-preview {
   position: absolute;
   bottom: 48px;
   transform: translateX(-50%);
   background: #fff;
   padding: 3px;
   border-radius: 10px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 55px;
   z-index: 1000 !important;
   border: 2px solid var(--primary);
   pointer-events: none;
   animation: preview-bounce .3s ease-out
 }
 
 .rope-floating-preview img {
   width: 48px;
   height: 38px;
   border-radius: 6px;
   object-fit: cover
 }
 
 .rope-floating-preview span {
   font-size: 8px;
   font-weight: 900;
   color: var(--text-main);
   margin-top: 1px;
   background: #f8fafc;
   width: 100%;
   text-align: center;
   border-radius: 0 0 6px 6px
 }
 
 .sort-water-group {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1px 0 0;
   gap: 4px;
   margin-top: -2px
 }
 
 .water-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1px;
   cursor: pointer;
   flex: 1;
   transition: .3s
 }
 
 .water-item .drop {
   background: #f1f5f9 !important;
   color: #94a3b8 !important;
   border: 1px solid #cbd5e1 !important;
   width: 38px;
   height: 38px;
   border-radius: 5% 50% 50% 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   transition: all .4s cubic-bezier(.175, .885, .32, 1.275) !important;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, .02) !important;
   transform: rotate(45deg) scale(1) translateY(0) !important;
   opacity: 0
 }
 
 .water-item .drop>* {
   transform: rotate(-45deg)
 }
 
 .water-item span {
   font-size: 9px;
   font-weight: 800;
   text-transform: uppercase;
   margin-top: 1px;
   color: #94a3b8 !important;
   transition: color .3s ease !important
 }
 
 .water-item.active .drop {
   transform: rotate(45deg) scale(1.15) translateY(-2px) !important;
   border-color: transparent !important
 }
 
 .water-item.active span {
   font-weight: 900 !important
 }
 
 .water-item.active:first-child .drop {
   background: linear-gradient(135deg, #1e293b, #0f172a) !important;
   color: #fff !important;
   box-shadow: 0 6px 12px rgba(15, 23, 42, .3) !important
 }
 
 .water-item.active:first-child span {
   color: #0f172a !important
 }
 
 .water-item.active:nth-child(2) .drop {
   background: linear-gradient(135deg, #ec4899, #be185d) !important;
   color: #fff !important;
   box-shadow: 0 6px 12px rgba(236, 72, 153, .3) !important
 }
 
 .water-item.active:nth-child(2) span {
   color: #be185d !important
 }
 
 .water-item.active:nth-child(3) .drop {
   background: linear-gradient(135deg, #f59e0b, #d97706) !important;
   color: #fff !important;
   box-shadow: 0 6px 12px rgba(245, 158, 11, .3) !important
 }
 
 .water-item.active:nth-child(3) span {
   color: #d97706 !important
 }
 
 .water-item.active:nth-child(4) .drop {
   background: linear-gradient(135deg, #10b981, #059669) !important;
   color: #fff !important;
   box-shadow: 0 6px 12px rgba(16, 185, 129, .3) !important
 }
 
 .water-item.active:nth-child(4) span {
   color: #059669 !important
 }
 
 .water-item.active:nth-child(5) .drop {
   background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
   color: #fff !important;
   box-shadow: 0 6px 12px rgba(14, 165, 233, .3) !important
 }
 
 .water-item.active:nth-child(5) span {
   color: #0284c7 !important
 }
 
 .price-val-pill {
   background: #e0e7ff;
   color: var(--primary);
   padding: 2px 8px;
   border-radius: 20px;
   font-size: 10px;
   font-weight: 800
 }
 
 .map-style {
   background: #fffbeb !important;
   border-color: #fde68a !important;
   color: #b45309 !important
 }
 
 .filter-panel.open .water-item .drop {
   animation: dropDown .5s cubic-bezier(.175, .885, .32, 1.275) forwards
 }
 
 .filter-panel.open .water-item:first-child .drop {
   animation-delay: 50ms
 }
 
 .filter-panel.open .water-item:nth-child(2) .drop {
   animation-delay: .12s
 }
 
 .filter-panel.open .water-item:nth-child(3) .drop {
   animation-delay: .19s
 }
 
 .filter-panel.open .water-item:nth-child(4) .drop {
   animation-delay: .26s
 }
 
 .filter-panel.open .water-item:nth-child(5) .drop {
   animation-delay: .33s
 }
 
 .fab-wrapper {
   position: fixed;
   right: 16px;
   bottom: 24px;
   z-index: 60;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 10px;
   pointer-events: auto;
   touch-action: none;
   background: 0 0
 }
 
 .fab-wrapper.dragging {
   cursor: grabbing;
   transition: none !important
 }
 
 .fab-wrapper.dragging .fab-btn-main {
   transition: none !important;
   animation: none
 }
 
 .fab-wrapper:focus-visible {
   outline: 2px solid var(--primary, #4338ca);
   outline-offset: 3px
 }
 
 .fab-btn-main {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: linear-gradient(135deg, #4f46e5 0, #f43f5e 100%);
   color: #fff;
   border: none;
   box-shadow: 0 12px 30px rgba(79, 70, 229, .4), 0 4px 10px rgba(0, 0, 0, .2);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: grab;
   pointer-events: auto;
   position: relative;
   transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
   animation: float-bob 4s ease-in-out infinite
 }
 
 .fab-btn-main {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #4f46e5, #7c3aed);
   color: #fff
 }
 
 .fab-btn-main::before {
   content: '';
   position: absolute;
   inset: -4px;
   border-radius: 50%;
   border: 2px solid #f43f5e;
   opacity: 0;
   z-index: -1;
   animation: pulse-ring 2s cubic-bezier(.215, .61, .355, 1) infinite
 }
 
 .fab-icon-svg {
   width: 28px;
   height: 28px;
   stroke: white;
   stroke-width: 2.5;
   transition: transform .4s ease
 }
 
 .fab-btn-main:hover {
   transform: scale(1.1) translateY(-4px);
   box-shadow: 0 15px 35px rgba(244, 63, 94, .5);
   background: linear-gradient(135deg, #4338ca 0, #e11d48 100%);
   animation-play-state: paused
 }
 
 .fab-btn-main:hover .fab-icon-svg {
   transform: rotate(90deg) scale(1.1)
 }
 
 .fab-btn-main:active {
   transform: scale(.95);
   cursor: grabbing;
   box-shadow: 0 5px 15px rgba(0, 0, 0, .2)
 }
 
 .fab-label {
   position: absolute;
   right: 75px;
   top: 50%;
   transform: translateY(-50%) translateX(15px);
   background: #fff;
   padding: 8px 16px;
   border-radius: 12px;
   font-size: 14px;
   font-weight: 800;
   color: var(--primary, #4338ca);
   box-shadow: 0 4px 15px rgba(0, 0, 0, .15);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
   white-space: nowrap
 }
 
 .fab-label::after {
   content: '';
   position: absolute;
   right: -6px;
   top: 50%;
   margin-top: -6px;
   border-width: 6px;
   border-style: solid;
   border-color: transparent transparent transparent #fff
 }
 
 .fab-wrapper.show-label .fab-label {
   opacity: 1;
   visibility: visible;
   transform: translateY(-50%) translateX(0)
 }
 
 .toast {
   position: fixed;
   bottom: 30px;
   left: 50%;
   transform: translateX(-50%) translateY(100px);
   background: #1e293b;
   color: #fff;
   padding: 12px 24px;
   border-radius: 50px;
   font-size: 13px;
   font-weight: 600;
   box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
   z-index: 9999999 !important;
   display: flex;
   align-items: center;
   gap: 10px;
   opacity: 0;
   transition: all .5s cubic-bezier(.19, 1, .22, 1);
   max-width: 90%;
   white-space: nowrap;
   pointer-events: none
 }
 
 .toast.show {
   transform: translateX(-50%) translateY(0);
   opacity: 1;
   pointer-events: auto
 }
 
 .toast.success {
   background: #059669;
   color: #fff
 }
 
 .toast.error {
   background: #dc2626;
   color: #fff
 }
 
 .toast.neutral {
   background: #334155;
   color: #fff
 }
 
 .toast-icon {
   font-size: 16px
 }
 
 body.is-app .app-promo-banner {
   display: none !important
 }
 
 .app-promo-banner {
   position: fixed;
   bottom: 90px;
   left: 50%;
   transform: translateX(-50%) translateY(120%);
   width: 92%;
   max-width: 400px;
   background: rgba(255, 255, 255, .95);
   border-radius: 50px;
   padding: 10px 15px;
   display: flex;
   align-items: center;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
   z-index: 9999;
   transition: transform .6s cubic-bezier(.22, 1, .36, 1);
   animation: slideUpPromo .8s 2s forwards;
   touch-action: pan-y;
   cursor: grab;
   border: 1px solid rgba(0, 0, 0, .05);
   overflow: visible !important
 }
 
 .app-promo-banner:active {
   cursor: grabbing
 }
 
 .promo-close {
   position: absolute;
   top: -12px;
   right: 0;
   background: #ff4757;
   border: 2px solid #fff;
   color: #fff;
   border-radius: 50%;
   width: 36px;
   height: 36px;
   cursor: pointer;
   font-size: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 6px rgba(0, 0, 0, .2);
   z-index: 10000
 }
 
 .promo-content {
   display: flex;
   align-items: center;
   width: 100%;
   gap: 10px
 }
 
 .promo-icon {
   width: 45px;
   height: 45px;
   border-radius: 12px
 }
 
 .promo-text {
   flex: 1
 }
 
 .promo-title {
   font-weight: 700;
   font-size: 14px;
   color: #333
 }
 
 .promo-stats {
   font-size: 11px;
   color: #666
 }
 
 .promo-install-btn {
   background: #2f3542;
   color: #fff !important;
   padding: 0 18px;
   border-radius: 20px;
   font-size: 11px;
   font-weight: 700;
   text-decoration: none;
   animation: pulseBtn 2s infinite;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 34px;
   min-width: 80px
 }
 
 #notify-banner {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   background: #1e293b;
   color: #fff;
   padding: 12px 16px;
   display: none;
   justify-content: space-between;
   align-items: center;
   z-index: 4000;
   box-shadow: 0 -4px 10px rgba(0, 0, 0, .1)
 }
 
 #notify-banner p {
   font-size: 13px;
   font-weight: 600;
   margin: 0
 }
 
 #notify-banner button {
   background: var(--primary);
   color: #fff;
   border: none;
   padding: 6px 12px;
   border-radius: 20px;
   font-size: 12px;
   font-weight: 700;
   cursor: pointer;
   margin-left: 10px
 }
 
 #notify-banner button.close-ban {
   background: 0 0;
   color: #94a3b8;
   margin-left: 4px;
   font-size: 16px;
   padding: 4px
 }
 
 .report-options-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 8px;
   margin-top: 10px
 }
 
 .report-option {
   padding: 12px;
   background: #f8fafc;
   border: 1px solid #e2e8f0;
   border-radius: 8px;
   text-align: left;
   font-size: 13px;
   font-weight: 600;
   color: #334155;
   transition: .2s;
   display: flex;
   justify-content: space-between;
   align-items: center
 }
 
 .report-option:hover {
   background: #fee2e2;
   border-color: #fecaca;
   color: #b91c1c
 }
 
 .help-section {
   padding: 0 16px 16px
 }
 
 .help-title {
   font-size: 12px;
   font-weight: 700;
   color: #64748b;
   margin-bottom: 8px;
   text-transform: uppercase
 }
 
 .help-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 8px
 }
 
 .help-chip {
   padding: 8px 12px;
   background: #f0f9ff;
   color: #0369a1;
   border: 1px solid #bae6fd;
   border-radius: 20px;
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   transition: .2s
 }
 
 .help-chip:hover {
   background: #e0f2fe;
   transform: translateY(-1px)
 }
 
 .legal-content {
   font-size: 14px;
   line-height: 1.6;
   color: #334155
 }
 
 .legal-content h3 {
   font-size: 16px;
   color: var(--text-main);
   margin: 20px 0 10px;
   font-weight: 700
 }
 
 .legal-content p {
   margin-bottom: 12px
 }
 
 .legal-content ul {
   padding-left: 20px;
   margin-bottom: 12px
 }
 
 .legal-links {
   display: flex;
   gap: 16px;
   justify-content: center;
   margin-top: 20px;
   border-top: 1px solid #f1f5f9;
   padding-top: 16px
 }
 
 .legal-link {
   font-size: 12px;
   color: var(--text-sub);
   text-decoration: underline;
   cursor: pointer
 }
 
 .legal-link:hover {
   color: var(--primary)
 }
 
 .toggle-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
   padding-bottom: 8px;
   border-bottom: 1px dashed var(--border);
   margin-bottom: 12px
 }
 
 .toggle-header h3 {
   margin-bottom: 0 !important
 }
 
 .toggle-icon {
   font-size: 12px;
   color: var(--text-sub);
   transition: transform .3s ease;
   transform: rotate(180deg)
 }
 
 .toggle-header.closed .toggle-icon {
   transform: rotate(0)
 }
 
 .toggle-header.closed {
   border-bottom: none;
   margin-bottom: 0
 }
 
 .collapsible-content {
   transition: all .3s ease;
   overflow: hidden;
   max-height: 1000px;
   opacity: 1
 }
 
 .collapsible-content.hidden {
   max-height: 0;
   opacity: 0;
   margin: 0;
   padding: 0
 }
 
 .ban-alert-box {
   background: #fef2f2;
   border: 1px solid #fecaca;
   border-radius: 12px;
   padding: 16px;
   margin: 16px;
   text-align: center
 }
 
 .ban-title {
   color: #b91c1c;
   font-weight: 800;
   font-size: 16px;
   margin-bottom: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px
 }
 
 .ban-desc {
   color: #7f1d1d;
   font-size: 13px;
   margin-bottom: 12px;
   line-height: 1.4
 }
 
 .appeal-input {
   width: 100%;
   padding: 10px;
   border: 1px solid #e2e8f0;
   border-radius: 8px;
   margin-bottom: 8px;
   font-size: 13px
 }
 
 .appeal-success {
   color: #059669;
   font-weight: 700;
   font-size: 13px;
   background: #d1fae5;
   padding: 10px;
   border-radius: 8px
 }
 
 .ban-footer {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   background: #450a0a;
   border-top: 1px solid #991b1b;
   color: #fff;
   z-index: 9000;
   padding: 12px 16px;
   padding-bottom: max(12px, env(safe-area-inset-bottom));
   box-shadow: 0 -4px 20px rgba(0, 0, 0, .3);
   animation: slideUp .3s ease-out
 }
 
 .ban-content {
   max-width: 600px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 10px
 }
 
 .ban-text {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 13px
 }
 
 .ban-text strong {
   color: #fecaca;
   text-transform: uppercase;
   letter-spacing: .5px
 }
 
 .ban-actions {
   display: flex;
   gap: 8px
 }
 
 .ban-input {
   flex: 1;
   padding: 8px 12px;
   border-radius: 6px;
   border: none;
   font-size: 13px;
   background: rgba(255, 255, 255, .1);
   color: #fff;
   outline: 0;
   transition: .2s
 }
 
 .ban-input:focus {
   background: rgba(255, 255, 255, .2)
 }
 
 .ban-input::placeholder {
   color: rgba(255, 255, 255, .5)
 }
 
 .ban-btn {
   background: #dc2626;
   color: #fff;
   font-weight: 700;
   font-size: 12px;
   padding: 0 16px;
   border-radius: 6px;
   cursor: pointer;
   white-space: nowrap
 }
 
 .ban-btn:hover {
   background: #b91c1c
 }
 
 .ban-pending {
   background: #f59e0b;
   color: #451a03;
   font-weight: 700;
   font-size: 12px;
   text-align: center;
   padding: 8px;
   border-radius: 6px;
   width: 100%
 }
 
 .banned-ui-disabled {
   opacity: .5 !important;
   cursor: not-allowed !important;
   pointer-events: none !important;
   filter: grayscale(100%)
 }
 
 .banned-warning-box {
   background: #fef2f2;
   color: #b91c1c;
   border-color: #fca5a5;
   margin-bottom: 15px
 }
 
 .banned-action-container {
   margin-top: 10px
 }
 
 .profile-action-btn {
   flex: 1;
   height: 36px;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 700;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .02);
   transition: background .2s ease
 }
 
 .hover-signout {
   background: #f1f5f9;
   color: #475569
 }
 
 .hover-signout:hover {
   background: #e2e8f0
 }
 
 .hover-settings {
   background: #fee2e2;
   color: #ef4444
 }
 
 .hover-settings:hover {
   background: #fca5a5
 }
 
 @keyframes shimmer {
   0% {
     background-position: -200% 0
   }
 
   100% {
     background-position: 200% 0
   }
 }
 
 @keyframes slideDown {
   from {
     transform: translateY(-5px) scale(.98);
     opacity: 0
   }
 
   to {
     transform: translateY(0);
     scale: 1;
     opacity: 1
   }
 }
 
 @keyframes slideUp {
   from {
     transform: translateY(50px);
     opacity: 0
   }
 
   to {
     transform: translateY(0);
     opacity: 1
   }
 }
 
 @keyframes fadeUp {
   from {
     transform: translate(-50%, 20px);
     opacity: 0
   }
 
   to {
     transform: translate(-50%, 0);
     opacity: 1
   }
 }
 
 @keyframes fadeUpIn {
   from {
     opacity: 0;
     transform: translateY(20px)
   }
 
   to {
     opacity: 1;
     transform: translateY(0)
   }
 }
 
 @keyframes popIn {
   0% {
     opacity: 0;
     transform: scale(.9) translateY(10px)
   }
 
   70% {
     transform: scale(1.05)
   }
 
   100% {
     opacity: 1;
     transform: scale(1) translateY(0)
   }
 }
 
 @keyframes float-bob {
 
   0%,
   100% {
     transform: translateY(0)
   }
 
   50% {
     transform: translateY(-6px)
   }
 }
 
 @keyframes pulse-ring {
   0% {
     transform: scale(.8);
     opacity: .6
   }
 
   100% {
     transform: scale(1.6);
     opacity: 0
   }
 }
 
 @keyframes pulseBtn {
   0% {
     transform: scale(1)
   }
 
   50% {
     transform: scale(1.05)
   }
 
   100% {
     transform: scale(1)
   }
 }
 
 @keyframes rope-crawl {
   from {
     stroke-dashoffset: 0
   }
 
   to {
     stroke-dashoffset: -100
   }
 }
 
 @keyframes pin-drop {
   0% {
     transform: translateY(-50px) rotate(45deg);
     opacity: 0
   }
 
   100% {
     transform: translateY(0) rotate(45deg);
     opacity: 1
   }
 }
 
 @keyframes pin-pulse-shadow {
 
   0%,
   100% {
     transform: translateX(-50%) scale(1);
     opacity: .5
   }
 
   50% {
     transform: translateX(-50%) scale(1.5);
     opacity: .2
   }
 }
 
 @keyframes waveAnim {
   0% {
     transform: scaleY(.3);
     opacity: .7
   }
 
   100% {
     transform: scaleY(1);
     opacity: 1
   }
 }
 
 @keyframes slideInMic {
   from {
     opacity: 0;
     transform: translateX(20px)
   }
 
   to {
     opacity: 1;
     transform: translateX(0)
   }
 }
 
 @keyframes typeBounce {
 
   0%,
   100%,
   80% {
     transform: scale(.4);
     opacity: .5
   }
 
   40% {
     transform: scale(1);
     opacity: 1
   }
 }
 
 @keyframes bounceIn {
   0% {
     opacity: 0;
     transform: scale(.8) translateY(20px)
   }
 
   100% {
     opacity: 1;
     transform: scale(1) translateY(0)
   }
 }
 
 @keyframes slideUpPromo {
   to {
     transform: translateX(-50%) translateY(0)
   }
 }
 
 @keyframes tabFadeIn {
   0% {
     opacity: 0;
     transform: translateY(10px) scale(.98)
   }
 
   100% {
     opacity: 1;
     transform: translateY(0) scale(1)
   }
 }
 
 @keyframes pos-shimmer {
   0% {
     background-position: 200% 0
   }
 
   100% {
     background-position: -200% 0
   }
 }
 
 @keyframes pos-spin {
   0% {
     transform: rotate(0)
   }
 
   100% {
     transform: rotate(360deg)
   }
 }
 
 @keyframes successPop {
   0% {
     transform: scale(.5);
     opacity: 0
   }
 
   70% {
     transform: scale(1.1);
     opacity: 1
   }
 
   100% {
     transform: scale(1);
     opacity: 1
   }
 }
 
 @keyframes fadeInDown {
   from {
     opacity: 0;
     transform: translateY(-10px)
   }
 
   to {
     opacity: 1;
     transform: translateY(0)
   }
 }
 
 @keyframes dropDown {
   0% {
     transform: translateY(-25px) rotate(45deg);
     opacity: 0
   }
 
   100% {
     transform: translateY(0) rotate(45deg);
     opacity: 1
   }
 }
 
 @keyframes rope-flow {
   from {
     stroke-dashoffset: 0
   }
 
   to {
     stroke-dashoffset: 48
   }
 }
 
 @keyframes knot-pulse {
 
   0%,
   100% {
     transform: scale(1)
   }
 
   50% {
     transform: scale(1.1)
   }
 }
 
 @keyframes preview-bounce {
   0% {
     transform: translateX(-50%) scale(.5);
     opacity: 0
   }
 
   100% {
     transform: translateX(-50%) scale(1);
     opacity: 1
   }
 }
 
 .spinner-ring {
   width: 20px;
   height: 20px;
   border: 3px solid #e2e8f0;
   border-top: 3px solid var(--primary);
   border-radius: 50%;
   animation: spin-ring 1s linear infinite;
   display: inline-block
 }
 
 @keyframes spin-ring {
   0% {
     transform: rotate(0)
   }
 
   100% {
     transform: rotate(360deg)
   }
 }
 
 .loading-sentinel {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   padding: 6px 0 10px;
   margin: 0 auto 8px;
   grid-column: 1/-1;
   color: var(--text-sub);
   font-size: 11px;
   font-weight: 700
 }
 
 .loading-sentinel span {
   margin-top: 2px;
   color: var(--text-sub);
   font-size: 9px;
   line-height: 1.2
 }
 
 .rope-loader {
   position: relative;
   width: 130px;
   height: 20px;
   display: inline-flex;
   align-items: center;
   justify-content: center
 }
 
 .rope-loader-svg {
   width: 100%;
   height: 100%
 }
 
 .rope-loader .rope-body {
   stroke: #dcbfa6;
   stroke-width: 2.4;
   fill: none;
   stroke-linecap: round;
   stroke-linejoin: round;
   filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .16));
   opacity: .75
 }
 
 .rope-loader .rope-active-body {
   stroke: var(--primary);
   stroke-width: 2.4;
   fill: none;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-dasharray: 7 9;
   animation: rope-flow 3s linear infinite
 }
 
 .sk-card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding-bottom: 12px
 }
 
 .sk-img {
   width: 100%;
   height: 180px;
   background: #e2e8f0;
   animation: sk-pulse 1.5s infinite alternate
 }
 
 .sk-info {
   padding: 0 12px;
   display: flex;
   flex-direction: column;
   gap: 8px
 }
 
 .sk-line {
   height: 14px;
   background: #e2e8f0;
   border-radius: 6px;
   animation: sk-pulse 1.5s infinite alternate
 }
 
 .sk-line.price {
   width: 40%;
   height: 20px;
   margin-top: 4px
 }
 
 .sk-line.title {
   width: 85%
 }
 
 .sk-line.meta {
   width: 60%
 }
 
 @keyframes sk-pulse {
   0% {
     opacity: .5
   }
 
   100% {
     opacity: 1
   }
 }
 
 .sk-img,
 .sk-line {
   background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
   background-size: 200% 100%;
   animation: shimmer 1.5s infinite linear
 }
 
 .sk-img {
   width: 100%;
   height: 160px
 }
 
 .sk-info {
   padding: 12px
 }
 
 .sk-line {
   height: 14px;
   border-radius: 4px;
   margin-bottom: 8px
 }
 
 .sk-line.price {
   width: 50%;
   height: 18px;
   margin-bottom: 12px
 }
 
 .sk-line.title {
   width: 90%
 }
 
 .sk-line.meta {
   width: 60%;
   margin-bottom: 0
 }
 
 .pos-tab-anim {
   animation: tabFadeIn .3s cubic-bezier(.175, .885, .32, 1.275) forwards
 }
 
 .pos-tab-btn {
   transition: all .2s cubic-bezier(.4, 0, .2, 1);
   cursor: pointer;
   display: flex;
   gap: 4px;
   align-items: center;
   padding: 4px 8px;
   border-radius: 6px;
   -webkit-tap-highlight-color: transparent
 }
 
 .pos-tab-btn:active {
   transform: scale(.92)
 }
 
 .pos-skeleton-bg {
   background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
   background-size: 200% 100%;
   animation: pos-shimmer 1.5s infinite linear
 }
 
 .pos-card-billed {
   background: #f0fdf4 !important;
   border-color: #22c55e !important
 }
 
 .pos-custom-card {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   padding: 12px;
   border-radius: 12px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
   transition: 0.2s ease;
 }
 
 .pos-custom-card-img {
   width: 56px;
   height: 56px;
   flex-shrink: 0;
   border-radius: 8px;
   overflow: hidden;
   background: #fde68a;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .pos-custom-card-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
 .pos-custom-card-body {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 7px;
 }
 
 .pos-custom-card-top-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
 }
 
 .pos-custom-card-title {
   font-size: 12px;
   font-weight: 900;
   color: #92400e;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .pos-custom-card-second-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   flex-wrap: nowrap;
 }
 
 .pos-custom-card-meta {
   display: flex;
   flex-wrap: nowrap;
   gap: 6px;
   align-items: center;
   min-width: 0;
   overflow: hidden;
 }
 
 .pos-custom-card-actions {
   display: flex;
   gap: 6px;
   align-items: center;
   flex-shrink: 0;
   margin-left: auto;
   flex-wrap: wrap;
   justify-content: flex-end;
 }
 
 .pos-custom-card-ref-row {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 4px 6px;
   border-radius: 999px;
   background: transparent;
   border: none;
   flex: 1;
   min-width: 0;
 }
 
 .pos-custom-card-ref-row input {
   flex: 1;
   min-width: 0;
   padding: 6px 7px;
   border-radius: 999px;
   font-size: 10px;
   border: 1px solid #fcd34d;
   background: white;
   outline: none;
   font-weight: 700;
   box-sizing: border-box;
 }
 
 .pos-custom-card-input-row {
   width: 100%;
 }
 
 .pos-custom-card label,
 .pos-custom-card-actions label {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   cursor: pointer;
 }
 
 .pos-custom-card input[type="checkbox"] {
   transform: scale(1.12);
   accent-color: #d97706;
   cursor: pointer;
   -webkit-appearance: auto;
   appearance: auto;
   width: 18px;
   height: 18px;
   min-width: 18px;
   min-height: 18px;
   background: #fff;
   border: 2px solid #d97706;
   border-radius: 4px;
   box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.14);
   display: inline-block;
   flex-shrink: 0;
   margin: 0;
 }
 
 @media (max-width: 640px) {
   .pos-custom-card {
     padding: 10px;
     gap: 8px;
     align-items: center;
   }
 
   .pos-custom-card-img {
     width: 48px;
     height: 48px;
   }
 
   .pos-custom-card-top-row {
     flex-direction: row;
     align-items: center;
     gap: 6px;
     flex-wrap: wrap;
   }
 
   .pos-custom-card-title {
     font-size: 11px;
     line-height: 1.2;
     white-space: normal;
   }
 
   .pos-custom-card-second-row {
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     gap: 6px;
     flex-wrap: wrap;
   }
 
   .pos-custom-card-meta {
     flex-wrap: wrap;
     gap: 4px;
     align-items: center;
   }
 
   .pos-custom-card-actions {
     width: 100%;
     justify-content: flex-end;
     margin-left: 0;
     flex-wrap: wrap;
   }
 
   .pos-custom-card-ref-row {
     padding: 3px 5px;
     border-radius: 999px;
     width: 100%;
   }
 
   .pos-custom-card-ref-row input {
     padding: 5px 7px;
     font-size: 9px;
   }
 }
 
 .pos-product-grid {
   display: flex;
   flex-direction: column;
   gap: 7px;
   overflow-y: auto;
   flex: 1;
   padding: 2px 0 24px;
   scroll-padding-bottom: 24px;
   margin-bottom: 4px;
 }

 @media (max-width: 640px) {
   .pos-product-grid {
     padding-bottom: 32px;
     gap: 10px;
   }
 }
 
 .ledger-bill-card {
  background: linear-gradient(135deg, #fff 0, #f8fbff 100%);
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .04);
  position: relative;
  overflow: visible;
  min-height: fit-content; /* Updated */
  flex-shrink: 0;          /* Added */
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card.sold-card .card-img-box::after {
  content: 'SOLD';
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 2px;
  z-index: 5;
}
 .ledger-bill-title-actions {
   display: flex;
   gap: 8px;
   align-items: center;
   justify-content: flex-end;
   flex-wrap: wrap;
 }
 .ledger-bill-toggle-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 6px 10px;
   border-radius: 10px;
   border: 1px solid rgba(148, 163, 184, .35);
   background: #f8fafc;
   color: var(--text-main);
   font-size: 9px;
   font-weight: 800;
   cursor: pointer;
   transition: background .2s ease, transform .2s ease;
 }
 .ledger-bill-toggle-btn:hover {
   background: #eff6ff;
 }
 .ledger-bill-summary-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   margin-top: 6px;
 }
 .ledger-bill-date-text {
   font-size: 9px;
   color: var(--text-sub);
   font-weight: 700;
 }
 .ledger-bill-details {
   max-height: 0;
   overflow: hidden;
   opacity: 0;
   transition: max-height .3s ease, opacity .2s ease;
 }
 .ledger-bill-card--expanded .ledger-bill-details {
   max-height: 1200px;
   opacity: 1;
 }
 .ledger-bill-payment-meta-top-outer {
   display: flex;
   justify-content: center;
   gap: 16px;
   flex-wrap: wrap;
   padding: 8px 12px;
   margin-bottom: -16px;
   position: relative;
   z-index: 2;
   background: white;
   border-radius: 8px 8px 0 0;
   border-bottom: 2px solid #e2e8f0;
 }
 .ledger-bill-actions-bottom-wrapper {
   position: relative;
   margin-top: -20px;
   z-index: 3;
   display: flex;
   justify-content: center;
 }
 .ledger-bill-actions-bottom {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   padding: 10px 12px;
   background: white;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   border: 1px solid #e2e8f0;
   align-items: center;
   justify-content: center;
 }
 .ledger-bill-actions {
   display: flex;
   gap: 4px;
   margin-top: 0;
   padding-top: 0;
   padding-bottom: 0;
   border-top: none;
   align-items: center;
   flex-wrap: wrap;
   width: 100%;
 }
 .ledger-bill-actions-bottom button,
 .ledger-bill-actions-bottom a {
   padding: 6px 10px;
   font-size: 11px;
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.2s ease;
 }
 .ledger-bill-card .ledger-bill-payment-meta,
 .ledger-bill-card .ledger-bill-actions,
 .ledger-bill-card .ledger-bill-delete-request {
   width: 100%;
 }
 
 .ledger-bill-card::before {
   content: "";
   position: absolute;
   inset: 0 auto 0 0;
   width: 2.5px;
   background: linear-gradient(180deg, var(--primary), #60a5fa);
   border-radius: 10px 0 0 10px
 }
 
 .ledger-bill-shell {
   display: flex;
   gap: 5px;
   align-items: flex-start
 }
 
 .ledger-bill-preview {
   width: 54px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center
 }
 
 .ledger-bill-main-img {
   width: 50px;
   height: 50px;
   border-radius: 7px;
   object-fit: cover;
   border: 1px solid #e2e8f0;
   background: #f8fafc;
   box-shadow: 0 2px 8px rgba(15, 23, 42, .06)
 }
 
 .ledger-bill-preview-badge {
   font-size: 6.5px;
   font-weight: 800;
   color: var(--primary);
   background: #eff6ff;
   border: 1px solid #bfdbfe;
   border-radius: 999px;
   padding: 2px 4px;
   text-align: center;
   flex-shrink: 0
 }
 
 .ledger-bill-content {
   display: flex;
   flex-direction: column;
   flex: 1;
   min-width: 0;
   gap: 2px
 }
 
 .ledger-bill-head {
   display: flex;
   align-items: flex-start;
   gap: 5px;
   margin-bottom: 0
 }
 
 .ledger-bill-main-info {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 2px
 }
 
 .ledger-bill-title-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 5px;
   flex-wrap: wrap
 }
 
 .ledger-bill-title {
   font-size: 12px;
   font-weight: 800;
   color: var(--text-main);
   line-height: 1.3;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
 }
 
 .ledger-bill-sub-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 5px;
   flex-wrap: wrap
 }
 
 .ledger-bill-sub {
   font-size: 8px;
   color: var(--text-sub);
   font-weight: 700
 }
 
 .ledger-bill-inline-badge {
   display: inline-flex;
   align-items: center
 }
 
 .ledger-bill-total-pill {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 4px 8px;
   border-radius: 999px;
   font-size: 10px;
   font-weight: 900;
   color: var(--primary);
   background: #eff6ff;
   border: 1px solid #bfdbfe;
   flex-shrink: 0;
 }
 
 .ledger-bill-badge {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 2px 5px;
   border-radius: 999px;
   font-size: 6.5px;
   font-weight: 800
 }
 
 .ledger-bill-compact-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 6px;
   margin: 0;
   padding: 0;
   width: 100%;
 }
 
 .ledger-bill-meta {
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 6px;
   padding: 2px 0;
   margin: 0;
   border: none;
   background: 0 0;
   border-radius: 0;
   color: var(--text-sub);
   font-size: 10px;
   line-height: 1.5;
   font-weight: 700;
   flex: 1 1 auto;
   min-width: 0;
   justify-content: flex-start;
 }
 
 .ledger-bill-meta-item {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 0;
   margin: 0;
   font-size: 10px;
 }
 
 .ledger-bill-meta-inline {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0
 }
 
 .ledger-bill-meta-inline-right {
   margin-left: auto;
   align-self: center;
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
   gap: 8px;
   flex: 0 0 auto;
 }
 
 .ledger-bill-map-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
   border: none;
   background: rgba(59, 130, 246, 0.1);
   color: var(--primary);
   border-radius: 999px;
   cursor: pointer;
   padding: 0;
   font-size: 12px;
 }
 
 .ledger-bill-qr-row {
   display: flex;
   align-items: center;
   gap: 6px;
   flex-wrap: nowrap;
   min-width: 0;
   color: var(--text-sub);
   font-size: 10px;
   font-weight: 700;
   padding: 0;
   background: 0 0;
   border: none;
   border-radius: 0;
   cursor: pointer;
 }
 
 .ledger-bill-qr-row:hover {
   opacity: .9
 }
 
 .ledger-bill-inline-text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--text-sub);
   font-size: 10px;
 }
 
 .ledger-bill-inline-pill {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 1px 3px;
   border-radius: 999px;
   color: var(--text-main);
   background: 0 0;
   font-weight: 800;
   white-space: nowrap
 }
 
 .ledger-bill-inline-action {
   color: var(--primary);
   font-weight: 800;
   white-space: nowrap;
   margin-left: 1px
 }
 
 .ledger-bill-compact-badge {
   display: inline-flex;
   align-items: center;
   padding: 1px 3px;
   border-radius: 999px;
   font-size: 5.8px;
   font-weight: 800;
   line-height: 1.2;
   white-space: nowrap
 }
 
 .ledger-bill-compact-badge.due {
   background: 0 0;
   color: #ef4444
 }
 
 .ledger-bill-compact-badge.upi {
   background: 0 0;
   color: #16a34a
 }
 
 .ledger-bill-compact-badge.partial {
   background: 0 0;
   color: #b45309
 }
 
 .ledger-bill-compact-badge.paid {
   background: 0 0;
   color: #16a34a
 }
 
 .ledger-bill-lower-row {
   display: flex;
   align-items: center;
   gap: 4px;
   min-width: 0;
   margin: 0;
   padding: 0
 }
 
 .ledger-bill-items {
   background: 0 0;
   border: none;
   padding: 0;
   margin-top: 0;
   flex: 1;
   min-width: 0
 }
 
 .ledger-bill-item-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 9px;
   margin-bottom: 2px;
   gap: 6px;
   padding: 0;
 }
 
 .ledger-bill-item-row:last-child {
   margin-bottom: 0
 }
 
 .ledger-bill-item-left {
   display: flex;
   align-items: center;
   gap: 3px;
   overflow: hidden;
   flex: 1 1 auto;
   min-width: 0
 }
 
 .ledger-bill-item-img {
   width: 15px;
   height: 15px;
   border-radius: 4px;
   object-fit: cover;
   border: 1px solid #e2e8f0;
   background: #f8fafc;
   flex-shrink: 0;
   cursor: pointer
 }
 
 .ledger-bill-item-text {
   overflow: hidden;
   min-width: 0;
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center
 }
 
 .ledger-bill-item-title {
   color: var(--text-main);
   font-weight: 700;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 8px;
 }
 
 .ledger-bill-item-meta {
   color: var(--text-sub);
   font-size: 8px;
   margin-top: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .ledger-bill-item-price {
   font-weight: 800;
   color: var(--text-main);
   margin-left: 3px;
   flex-shrink: 0;
   font-size: 8px;
 }

@media (max-width: 640px) {
  .pos-product-grid {
    padding-bottom: 28px;
  }

  .ledger-bill-card {
    padding: 10px;
  }

  .ledger-bill-title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .ledger-bill-title-actions {
    width: 100%;
    justify-content: flex-start;
  }
}
 
 .ledger-bill-payment-meta {
   margin-top: 8px;
   padding: 6px 7px;
   border-radius: 10px;
   background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
   border: 1px solid #e2e8f0;
   display: flex;
   align-items: center
 }
 
 .ledger-bill-payment-row {
   display: flex;
   align-items: center;
   gap: 4px;
   flex-wrap: nowrap;
   overflow-x: auto;
   white-space: nowrap;
   width: 100%
 }
 
 .ledger-bill-payment-chip {
   display: inline-flex;
   align-items: center;
   gap: 3px;
   padding: 3px 6px;
   border-radius: 999px;
   background: transparent;
   border: none;
   flex-shrink: 0
 }
 
 .ledger-bill-payment-label {
   font-size: 7px;
   font-weight: 800;
   color: #64748b;
   text-transform: uppercase;
   letter-spacing: .02em;
   white-space: nowrap
 }
 
 .ledger-bill-payment-value {
   font-size: 8px;
   font-weight: 900;
   color: #0f172a;
   white-space: nowrap
 }
 
 .ledger-bill-payment-value-due {
   color: #dc2626
 }
 
 .ledger-bill-payment-value-paid {
   color: #16a34a
 }
 
 .ledger-bill-divider {
   height: 1px;
   border-top: 1px dashed rgba(148, 163, 184, .55);
   margin: 1px 0
 }
 
 .ledger-bill-payment-footer {
   display: flex;
   justify-content: space-between;
   gap: 6px;
   flex-wrap: nowrap;
   font-size: 8px;
   font-weight: 800;
   color: #64748b;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap
 }
 
 .ledger-bill-actions {
   display: flex;
   gap: 4px;
   margin-top: auto;
   padding-top: 6px;
   padding-bottom: 2px;
   border-top: 1px dashed rgba(148, 163, 184, .4);
   align-items: center;
   flex-wrap: wrap;
   width: 100%
 }
 
 .ledger-bill-actions button {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   border-radius: 7px;
   font-size: 9px;
   font-weight: 800;
   cursor: pointer;
   padding: 6px 8px;
   line-height: 1.2;
   transition: all .2s ease
 }
 
 @media (max-width:480px) {
   .ledger-bill-card {
     padding: 8px;
     border-radius: 10px
   }
 
   .ledger-bill-shell {
     flex-direction: row;
     align-items: flex-start;
     gap: 8px;
     flex-wrap: wrap;
   }
 
   .ledger-bill-preview {
     width: 54px;
     justify-content: center;
     margin-bottom: 0;
     flex-shrink: 0;
   }
 
   .ledger-bill-main-img {
     width: 48px;
     height: 48px;
     border-radius: 7px
   }
 
   .ledger-bill-content {
     gap: 4px
   }
 
   .ledger-bill-head {
     flex-direction: row;
     align-items: flex-start;
     gap: 6px;
     flex-wrap: wrap;
   }
 
   .ledger-bill-sub-row,
   .ledger-bill-title-row {
     flex-wrap: wrap;
     gap: 4px
   }
 
   .ledger-bill-title {
     font-size: 10px;
     white-space: normal;
     line-height: 1.3
   }
 
   .ledger-bill-compact-row {
     flex-direction: column;
     align-items: flex-start;
     gap: 4px
   }
 
   .ledger-bill-meta {
     width: auto;
     min-width: 0;
   }
 
   .ledger-bill-meta-inline-right {
     margin-left: auto;
     margin-top: 0;
     align-self: center;
   }
 
   .ledger-bill-qr-row {
     width: 100%;
     justify-content: flex-end;
     flex-wrap: wrap
   }
 
   .ledger-bill-item-row {
     font-size: 7px;
     gap: 3px
   }
 
   .ledger-bill-item-title {
     font-size: 6px
   }
 
   .ledger-bill-item-meta {
     font-size: 5px
   }
 
   .ledger-bill-item-price {
     font-size: 6px
   }
 
   .ledger-bill-actions {
     gap: 4px;
     margin-top: 8px;
     padding-top: 6px;
     padding-bottom: 2px;
     width: 100%;
   }
   .ledger-bill-toggle-btn {
     width: auto;
     padding: 6px 10px;
     font-size: 8px;
   }
   .ledger-bill-title-actions {
     display: flex;
     gap: 6px;
     align-items: center;
     justify-content: flex-end;
     flex-wrap: wrap;
   }
   .ledger-bill-summary-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
     margin-top: 6px;
     width: 100%;
   }
   .ledger-bill-date-text {
     font-size: 8px;
     color: var(--text-sub);
     font-weight: 700;
   }
 
   .ledger-bill-actions button {
     padding: 6px 8px;
     font-size: 8px;
     min-width: 48px;
     flex: 1 1 auto;
   }
 
   .ledger-bill-card {
    margin-bottom: 12px;
    padding-bottom: 12px;
    overflow: visible;
    min-height: fit-content; /* Updated */
    flex-shrink: 0;          /* Added */
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
 
   .ledger-bill-shell {
     flex-direction: row;
     align-items: flex-start;
     gap: 10px;
     flex-wrap: wrap;
     width: 100%;
   }
 
   .ledger-bill-content {
     width: 100%;
   }
 
   .ledger-bill-title-actions {
     justify-content: space-between;
     width: 100%;
   }
 
   .ledger-bill-summary-row {
     width: 100%;
   }
 
   .ledger-bill-actions,
   .ledger-bill-payment-meta,
   .ledger-bill-delete-request {
     width: 100%;
   }
 
   .ledger-bill-card {
    width: 100%;
    margin-bottom: 12px;
    padding: 10px;
    overflow: visible;
    min-height: fit-content; /* Updated */
    flex-shrink: 0;          /* Added */
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
  }
 
   .ledger-bill-shell {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     gap: 10px;
     flex-wrap: wrap;
     width: 100%;
   }
 
   .ledger-bill-preview {
     width: 52px;
     min-width: 52px;
     flex-shrink: 0;
   }
 
   .ledger-bill-main-img {
     width: 48px;
     height: 48px;
   }
 
   .ledger-bill-content {
     flex: 1 1 auto;
     min-width: 0;
     width: calc(100% - 62px);
   }
 
   .ledger-bill-title-row,
   .ledger-bill-summary-row,
   .ledger-bill-actions {
     width: 100%;
   }
 
   .ledger-bill-title-actions {
     justify-content: space-between;
     width: 100%;
   }
 
   .ledger-bill-summary-row {
     gap: 6px;
   }
 
   .ledger-bill-title {
     font-size: 11px;
   }
 
   .ledger-bill-toggle-btn {
     padding: 6px 10px;
     font-size: 8px;
   }
 
   .ledger-bill-actions {
     gap: 6px;
   }
 }
 
 .compact-scroll-row {
   -ms-overflow-style: none
 }
 
 .compact-scroll-row::-webkit-scrollbar {
   display: none
 }
 
 #toast-container {
   position: fixed;
   top: 10px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 9999999 !important;
   display: flex;
   flex-direction: column;
   gap: 8px;
   pointer-events: none;
   width: 90%;
   max-width: 320px
 }
 
 .toast-msg {
   background: #1e293b;
   color: #fff;
   padding: 8px 12px;
   border-radius: 6px;
   font-size: 11px;
   font-weight: 600;
   box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
   animation: toastSlideDown .3s ease-out forwards;
   text-align: center
 }
 
 @keyframes toastSlideDown {
   from {
     opacity: 0;
     transform: translateY(-20px)
   }
 
   to {
     opacity: 1;
     transform: translateY(0)
   }
 }
 
 .offline-overlay {
   position: fixed;
   inset: 0;
   background: rgba(15, 23, 42, .95);
   z-index: 99999;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity .4s ease
 }
 
 .offline-overlay.active {
   opacity: 1;
   pointer-events: auto
 }
 
 .offline-content {
   text-align: center;
   color: #fff;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
   transform: translateY(30px);
   transition: transform .5s cubic-bezier(.175, .885, .32, 1.275)
 }
 
 .offline-content h2 {
   font-size: 16px;
   font-weight: 900;
   margin: 0;
   letter-spacing: .5px;
   text-shadow: 0 4px 10px rgba(0, 0, 0, .5)
 }
 
 .offline-content p {
   color: #cbd5e1;
   font-size: 10px;
   margin: 0;
   font-weight: 500
 }
 
 .offline-overlay.active .offline-content {
   transform: translateY(0)
 }
 
 .offline-svg {
   width: 80px;
   height: 80px;
   color: #ef4444;
   animation: float-pulse 2.5s ease-in-out infinite
 }
 
 .offline-loader {
   width: 150px;
   height: 4px;
   background: rgba(255, 255, 255, .1);
   border-radius: 4px;
   overflow: hidden;
   position: relative;
   margin-top: 10px
 }
 
 .offline-loader::after {
   content: '';
   position: absolute;
   left: -40px;
   top: 0;
   height: 100%;
   width: 40px;
   background: linear-gradient(90deg, transparent, #3b82f6, transparent);
   animation: loading-scan 1.5s infinite linear
 }
 
 #retry-network-btn {
   margin-top: 15px;
   padding: 10px 20px;
   background: #ef4444;
   color: #fff;
   border: none;
   border-radius: 8px;
   font-weight: 700;
   font-size: 14px;
   cursor: pointer;
   transition: transform .2s
 }
 
 #retry-network-btn:active {
   transform: scale(.95)
 }
 
 @keyframes loading-scan {
   0% {
     left: -40px
   }
 
   100% {
     left: 100%
   }
 }
 
 @keyframes float-pulse {
 
   0%,
   100% {
     transform: translateY(0) scale(1);
     opacity: 1;
     filter: drop-shadow(0 0 15px rgba(239, 68, 68, .4))
   }
 
   50% {
     transform: translateY(-10px) scale(1.05);
     opacity: .7;
     filter: drop-shadow(0 0 5px rgba(239, 68, 68, .1))
   }
 }
 
 .inline-style-1 {
   border-left: 1px solid #e2e8f0;
   padding-left: 8px;
   border-radius: 0;
   color: var(--primary)
 }
 
 .inline-style-2 {
   display: flex;
   align-items: center;
   gap: 8px
 }
 
 .inline-style-3 {
   display: flex;
   align-items: center;
   justify-content: center;
   background: #dcfce7 !important;
   color: #16a34a !important;
   border: 1px solid #bbf7d0 !important;
   border-radius: 50%;
   width: 38px;
   height: 38px;
   cursor: pointer;
   transition: all .2s;
   box-shadow: none !important
 }
 
 .inline-style-4 {
   display: flex;
   align-items: center;
   justify-content: center;
   background: #ffe4e6 !important;
   color: #e11d48 !important;
   border: 1px solid #fecdd3 !important;
   border-radius: 50%;
   width: 38px;
   height: 38px;
   cursor: pointer;
   position: relative;
   transition: all .2s;
   box-shadow: none !important
 }
 
 .inline-style-5 {
   position: absolute;
   top: -4px;
   right: -4px;
   background: #e11d48 !important;
   color: #fff !important;
   border: 2px solid #fff !important;
   border-radius: 50%;
   font-size: 10px;
   width: 18px;
   height: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700
 }
 
 .inline-style-6 {
   display: flex;
   align-items: center;
   gap: 8px
 }
 
 .inline-style-7 {
   display: flex;
   align-items: center;
   justify-content: center;
   background: #e0f2fe !important;
   color: #0284c7 !important;
   border: 1px solid #bae6fd !important;
   border-radius: 50%;
   width: 38px;
   height: 38px;
   cursor: pointer;
   transition: all .2s;
   box-shadow: none !important
 }
 
 .inline-style-8 {
   width: 20px;
   height: 20px;
   stroke-width: 2.2
 }
 
 .inline-style-9 {
   display: flex;
   align-items: center
 }
 
 .inline-style-10 {
   display: flex;
   align-items: center
 }
 
 .inline-style-11 {
   display: flex;
   align-items: center;
   gap: 6px;
   background: #e0e7ff !important;
   color: #4f46e5 !important;
   border: 1px solid #c7d2fe !important;
   border-radius: 20px;
   padding: 6px 14px;
   font-weight: 700;
   cursor: pointer;
   transition: all .2s;
   box-shadow: none !important
 }
 
 .inline-style-12 {
   width: 20px;
   height: 20px;
   stroke-width: 2.2
 }
 
 .inline-style-13 {
   width: 90%;
   height: auto;
   border-radius: 24px;
   padding-bottom: 30px
 }
 
 .inline-style-14 {
   background: #f3f4f6;
   border: none;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 16px;
   color: #4b5563
 }
 
 .inline-style-15 {
   text-align: center
 }
 
 .inline-style-16 {
   margin-bottom: 8px
 }
 
 .inline-style-17 {
   color: var(--text-sub);
   margin-bottom: 24px;
   font-size: 14px
 }
 
 .inline-style-18 {
   padding: 0
 }
 
 .inline-style-19 {
   padding: 20px;
   text-align: center;
   border-bottom: 1px solid var(--border)
 }
 
 .inline-style-20 {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background: #eee;
   object-fit: cover;
   margin-bottom: 10px
 }
 
 .inline-style-21 {
   font-size: 18px
 }
 
 .inline-style-22 {
   color: var(--text-sub);
   font-size: 14px
 }
 
 .inline-style-23 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   padding: 16px 16px 0
 }
 
 .inline-style-24 {
   background: #f0f9ff;
   color: #0284c7;
   justify-content: center;
   display: flex
 }
 
 .inline-style-25 {
   position: static;
   margin-left: 6px;
   border: none;
   padding: 2px 6px;
   font-size: 10px
 }
 
 .inline-style-26 {
   background: #f0fdf4;
   color: #16a34a;
   justify-content: center;
   display: flex
 }
 
 .inline-style-27 {
   position: static;
   margin-left: 6px;
   border: none;
   padding: 2px 6px;
   font-size: 10px
 }
 
 .inline-style-28 {
   padding: 16px
 }
 
 .inline-style-29 {
   margin-bottom: 12px;
   font-size: 14px;
   color: var(--text-sub);
   text-transform: uppercase
 }
 
 .inline-style-30 {
   display: flex;
   flex-direction: column;
   gap: 10px;
   max-height: 300px;
   overflow-y: auto
 }
 
 .inline-style-31 {
   border-top: 1px solid var(--border);
   margin-top: 0;
   padding-bottom: 10px
 }
 
 .inline-style-32 {
   padding: 16px;
   border-top: 1px solid var(--border);
   display: flex;
   gap: 10px
 }
 
 .inline-style-33 {
   flex: 1;
   background: #f1f5f9;
   color: #475569;
   height: 36px;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 700;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .02)
 }
 
 .inline-style-34 {
   flex: 1;
   background: #fee2e2;
   color: #ef4444;
   height: 36px;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 700;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .02)
 }
 
 .inline-style-35 {
   justify-content: flex-start;
   gap: 12px
 }
 
 .inline-style-36 {
   font-weight: 700;
   font-size: 18px;
   color: var(--text-main)
 }
 
 .inline-style-37 {
   margin-bottom: 20px
 }
 
 .inline-style-38 {
   display: none
 }
 
 .inline-style-39 {
   margin-top: 20px
 }
 
 .inline-style-40 {
   background: #fff1f2;
   border-color: #fda4af;
   color: #e11d48;
   font-weight: 700
 }
 
 .inline-style-41 {
   height: 20px
 }
 
 .inline-style-42 {
   position: relative;
   max-width: 100%;
   max-height: 100%;
   display: flex;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .5)
 }
 
 .inline-style-43 {
   display: none;
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, .7);
   z-index: 5;
   cursor: crosshair
 }
 
 .inline-style-44 {
   display: none;
   position: absolute;
   border: 2px dashed #38bdf8;
   box-shadow: 0 0 0 9999px rgba(0, 0, 0, .6);
   z-index: 10;
   pointer-events: none
 }
 
 .inline-style-45 {
   width: 15px;
   height: 15px;
   background: #fff;
   border-radius: 50%;
   transition: .1s
 }
 
 .inline-style-46 {
   z-index: 9999;
   background: #fff
 }
 
 .inline-style-47 {
   width: 100%;
   height: 100%;
   border-radius: 0;
   padding: 0;
   box-shadow: none
 }
 
 .inline-style-48 {
   position: absolute;
   top: 0;
   width: 100%;
   height: 55px;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: space-between;
   z-index: 1001;
   padding: 0 10px;
   border-bottom: 1px solid #eee
 }
 
 .inline-style-49 {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   color: var(--primary)
 }
 
 .inline-style-50 {
   flex: 1;
   text-align: center;
   font-size: 12px;
   font-weight: 500;
   color: #666;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 0 10px
 }
 
 .inline-style-51 {
   width: 40px;
   height: 40px;
   background: #f8fafc;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px
 }
 
 .inline-style-52 {
   width: 100%;
   height: 100%
 }
 
 .inline-style-53 {
   background: #e0f2fe;
   color: #0369a1;
   display: none
 }
 
 .inline-style-54 {
   display: none
 }
 
 .inline-style-55 {
   display: none
 }
 
 .inline-style-56 {
   display: none
 }
 
 .inline-style-57 {
   display: none
 }
 
 .inline-style-58 {
   padding: 0
 }
 
 .inline-style-59 {
   padding: 0 16px
 }
 
 .inline-style-60 {
   display: none;
   background: #ecfdf5;
   border: 1px solid #a7f3d0;
   padding: 16px;
   border-radius: 12px;
   text-align: center
 }
 
 .inline-style-61 {
   color: #065f46;
   margin-bottom: 6px
 }
 
 .inline-style-62 {
   color: #047857;
   font-size: 13px;
   margin-bottom: 12px
 }
 
 .inline-style-63 {
   display: flex;
   gap: 10px;
   justify-content: center
 }
 
 .inline-style-64 {
   flex: 1;
   margin: 0
 }
 
 .inline-style-65 {
   flex: 1;
   margin: 0
 }
 
 .inline-style-66 {
   font-size: 11px;
   font-weight: 800;
   color: #059669
 }
 
 .inline-style-67 {
   font-size: 9px;
   color: #64748b;
   font-weight: 700;
   opacity: .7
 }
 
 .inline-style-68 {
   width: 100%;
   text-align: center;
   margin: 16px 0;
   overflow: hidden;
   background: #f8fafc;
   border-radius: 12px;
   border: 1px solid #e2e8f0;
   display: block
 }
 
 .inline-style-69 {
   font-size: 9px;
   color: #cbd5e1;
   letter-spacing: 1px;
   font-weight: 700;
   padding: 4px 0
 }
 
 .inline-style-70 {
   display: inline-block;
   width: 100%;
   height: 90px
 }
 
 .inline-style-71 {
   display: flex;
   align-items: center;
   gap: 10px
 }
 
 .inline-style-72 {
   margin-bottom: 0
 }
 
 .inline-style-73 {
   font-size: 11px;
   font-weight: 800;
   padding: 3px 8px;
   border-radius: 12px;
   background: #f1f5f9;
   color: #64748b;
   letter-spacing: .5px
 }
 
 .inline-style-74 {
   margin-top: 12px;
   padding: 8px 12px;
   min-height: unset;
   align-items: center;
   border-radius: 14px
 }
 
 .inline-style-75 {
   gap: 12px;
   align-items: center
 }
 
 .inline-style-76 {
   width: 34px;
   height: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   flex-shrink: 0;
   border-radius: 10px
 }
 
 .inline-style-77 {
   display: flex;
   flex-direction: column;
   justify-content: center
 }
 
 .inline-style-78 {
   font-size: 8px;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: .8px;
   line-height: 1
 }
 
 .inline-style-79 {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 4px;
   font-size: 26px;
   margin-top: 4px;
   line-height: 1;
   height: 26px;
   cursor: pointer;
   transition: transform .2s
 }
 
 .inline-style-80 {
   display: none;
   color: #d97706;
   margin-top: 2px;
   font-size: 10px;
   font-weight: 700;
   animation: slideInMicAdvanced .3s ease-out
 }
 
 .inline-style-81 {
   background: #fff1f2;
   color: #f43f5e;
   border: 1px solid #ffe4e6;
   box-shadow: none;
   padding: 6px 14px;
   height: auto;
   font-size: 11px;
   flex-shrink: 0;
   border-radius: 10px;
   cursor: pointer
 }
 
 .inline-style-82 {
   background: var(--bg)
 }
 
 .inline-style-83 {
   display: none
 }
 
 .inline-style-84 {
   margin-left: auto
 }
 
 .inline-style-85 {
   padding: 0;
   overflow-x: hidden
 }
 
 .inline-style-86 {
   display: none
 }
 
 .inline-style-87 {
   padding: 0 16px 30px
 }
 
 .inline-style-88 {
   font-size: 16px;
   font-weight: 800;
   margin-bottom: 16px;
   color: var(--text-main)
 }
 
 .inline-style-89 {
   width: 100%;
   text-align: center;
   margin: 16px 0;
   background: #f8fafc;
   border-radius: 12px;
   border: 1px solid #e2e8f0;
   overflow: hidden;
   min-height: 110px
 }
 
 .inline-style-90 {
   font-size: 9px;
   color: #cbd5e1;
   letter-spacing: 1px;
   font-weight: 700;
   padding: 4px 0
 }
 
 .inline-style-91 {
   display: block;
   width: 100%;
   height: 90px
 }
 
 .inline-style-92 {
   display: none
 }
 
 .inline-style-93 {
   text-align: center
 }
 
 .inline-style-94 {
   margin-bottom: 15px;
   color: var(--text-main)
 }
 
 .inline-style-95 {
   background: #fffbeb;
   border: 1px solid #fde68a;
   padding: 16px;
   border-radius: 12px;
   margin-bottom: 16px;
   text-align: left
 }
 
 .inline-style-96 {
   color: #d97706;
   margin-bottom: 8px
 }
 
 .inline-style-97 {
   font-size: 13px;
   color: #92400e;
   margin-bottom: 12px
 }
 
 .inline-style-98 {
   background: #f59e0b;
   width: 100%;
   border: none
 }
 
 .inline-style-99 {
   background: #fef2f2;
   border: 1px solid #fecaca;
   padding: 16px;
   border-radius: 12px;
   text-align: left
 }
 
 .inline-style-100 {
   color: #dc2626;
   margin-bottom: 8px
 }
 
 .inline-style-101 {
   font-size: 13px;
   color: #991b1b;
   margin-bottom: 12px
 }
 
 .inline-style-102 {
   background: #ef4444;
   width: 100%;
   border: none
 }
 
 .inline-style-103 {
   color: #64748b;
   font-size: 13px;
   margin-bottom: 12px
 }
 
 .inline-style-104 {
   text-align: center;
   padding: 20px 0
 }
 
 .inline-style-105 {
   font-size: 40px;
   margin-bottom: 10px
 }
 
 .inline-style-106 {
   color: #0f172a;
   margin-bottom: 8px
 }
 
 .inline-style-107 {
   color: #059669;
   font-weight: 600;
   font-size: 14px
 }
 
 .inline-style-108 {
   justify-content: flex-start;
   gap: 16px;
   padding: 12px
 }
 
 .inline-style-109 {
   display: flex;
   flex-direction: column;
   min-width: 0
 }
 
 .inline-style-110 {
   font-size: 16px;
   font-weight: 700;
   color: var(--text-main)
 }
 
 .inline-style-111 {
   font-size: 12px;
   color: var(--text-sub);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 200px
 }
 
 .inline-style-112 {
   width: 40px;
   height: 40px;
   border-radius: 8px;
   object-fit: cover;
   margin-left: auto;
   display: none
 }
 
 .inline-style-113 {
   background: #e0f2fe;
   color: #0369a1;
   border-color: #bae6fd
 }
 
 .inline-style-114 {
   display: none
 }
 
 .inline-style-115 {
   font-size: 11px;
   color: var(--text-sub);
   font-weight: 600
 }
 
 .inline-style-116 {
   display: flex;
   gap: 8px
 }
 
 .inline-style-117 {
   padding: 0
 }
 
 .inline-style-118 {
   display: flex;
   justify-content: space-between;
   align-items: center
 }
 
 .inline-style-119 {
   display: flex;
   gap: 10px;
   align-items: center
 }
 
 .inline-style-120 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   background: var(--primary);
   color: #fff;
   padding: 6px 12px;
   font-size: 12px;
   border-radius: 20px
 }
 
 .inline-style-121 {
   position: static;
   background: #ef4444;
   color: #fff;
   border-radius: 12px;
   padding: 2px 6px;
   font-size: 10px;
   font-weight: 700;
   line-height: 1
 }
 
 .inline-style-122 {
   font-size: 20px
 }
 
 .inline-style-123 {
   padding: 0
 }
 
 .inline-style-124 {
   justify-content: flex-start;
   gap: 16px;
   padding: 12px
 }
 
 .inline-style-125 {
   padding: 0;
   display: flex;
   flex-direction: column;
   position: relative
 }
 
 .inline-style-126 {
   flex: 1;
   width: 100%;
   z-index: 1
 }
 
 .inline-style-127 {
   z-index: 99999;
   background: rgba(15, 23, 42, .7)
 }
 
 .inline-style-128 {
   position: relative;
   max-height: 95vh;
   height: 100%;
   width: 100%;
   max-width: 480px;
   display: flex;
   flex-direction: column;
   background: #f8fafc;
   border-radius: 20px 20px 0 0;
   overflow: hidden;
   box-shadow: 0 -10px 40px rgba(0, 0, 0, .3);
   margin-top: auto;
   margin-left: auto;
   margin-right: auto
 }
 
 .inline-style-129 {
   display: none;
   background: #fff;
   z-index: 999999
 }
 
 .inline-style-130 {
   background: linear-gradient(135deg, #4f46e5 0, #312e81 100%);
   color: #fff;
   box-shadow: 0 4px 20px rgba(79, 70, 229, .3);
   z-index: 10;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px 20px;
   flex-shrink: 0;
   border-bottom: 1px solid rgba(255, 255, 255, .1)
 }
 
 .inline-style-131 {
   display: flex;
   flex-direction: column
 }
 
 .inline-style-132 {
   font-weight: 900;
   font-size: 18px;
   line-height: 1.1;
   letter-spacing: -.5px
 }
 
 .inline-style-133 {
   font-size: 11px;
   color: #c7d2fe;
   font-weight: 600;
   letter-spacing: .5px;
   text-transform: uppercase
 }
 
 .inline-style-134 {
   display: none;
   flex: 1;
   position: relative;
   margin: 0 12px
 }
 
 .inline-style-135 {
   width: 100%;
   padding: 10px 34px 10px 14px;
   border-radius: 20px;
   border: 2px solid #818cf8;
   font-size: 13px;
   background: rgba(255, 255, 255, .95);
   color: #0f172a;
   font-weight: 700;
   outline: 0;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, .05);
   transition: .3s;
   box-sizing: border-box
 }
 
 .inline-style-136 {
   display: none;
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   background: #fee2e2;
   border: none;
   color: #ef4444;
   border-radius: 50%;
   width: 20px;
   height: 20px;
   font-size: 10px;
   font-weight: 700;
   cursor: pointer;
   align-items: center;
   justify-content: center
 }
 
 .inline-style-137 {
   display: flex;
   gap: 12px;
   align-items: center
 }
 
 .inline-style-138 {
   background: 0 0;
   border: none;
   cursor: pointer;
   font-size: 18px;
   color: #fff;
   opacity: .9
 }
 
 .inline-style-139 {
   font-size: 11px;
   color: #fca5a5;
   font-weight: 900;
   background: rgba(239, 68, 68, .2);
   padding: 6px 12px;
   border-radius: 8px;
   border: 1px solid rgba(248, 113, 113, .3);
   cursor: pointer;
   transition: .2s
 }
 
 .inline-style-140 {
   font-size: 22px;
   color: #fff;
   font-weight: 700;
   border: none;
   background: 0 0;
   cursor: pointer;
   line-height: 1
 }
 
 .inline-style-141 {
   padding: 0;
   display: flex;
   flex-direction: column;
   flex: 1;
   overflow: hidden;
   background: #f1f5f9
 }
 
 .inline-style-142 {
   display: flex;
   justify-content: space-between;
   font-size: 12px;
   padding: 10px 12px;
   background: #fff;
   border-bottom: 1px solid var(--border);
   font-weight: 800;
   overflow-x: auto;
   gap: 8px;
   white-space: nowrap;
   -ms-overflow-style: none;
   flex-shrink: 0;
   box-shadow: 0 4px 10px rgba(0, 0, 0, .02)
 }
 
 .inline-style-143 {
   padding: 12px;
   display: flex;
   flex-direction: column;
   flex: 1;
   overflow: hidden
 }
 
 .inline-style-144 {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
   flex-shrink: 0
 }
 
 .inline-style-145 {
   display: flex;
   align-items: center;
   gap: 8px;
   cursor: pointer;
   background: #fff;
   padding: 8px 14px;
   border-radius: 10px;
   border: 1px solid var(--border);
   box-shadow: 0 2px 5px rgba(0, 0, 0, .03)
 }
 
 .inline-style-146 {
   transform: scale(1.2);
   accent-color: var(--primary);
   margin: 0
 }
 
 .inline-style-147 {
   font-size: 13px;
   font-weight: 900;
   color: var(--text-main)
 }
 
 .inline-style-148 {
   background: var(--primary);
   color: #fff;
   border: none;
   border-radius: 10px;
   padding: 8px 16px;
   font-size: 13px;
   font-weight: 900;
   cursor: pointer;
   box-shadow: 0 4px 10px rgba(79, 70, 229, .2);
   transition: .2s
 }
 
 .inline-style-149 {
   display: none;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
   background: #fff;
   padding: 10px 14px;
   border-radius: 10px;
   border: 1px solid var(--border);
   flex-shrink: 0;
   box-shadow: 0 2px 5px rgba(0, 0, 0, .03)
 }
 
 .inline-style-150 {
   font-size: 13px;
   font-weight: 900;
   color: var(--text-main)
 }
 
 .inline-style-151 {
   background: #10b981;
   color: #fff;
   border: none;
   border-radius: 8px;
   padding: 8px 14px;
   font-size: 12px;
   font-weight: 900;
   cursor: pointer;
   box-shadow: 0 4px 10px rgba(16, 185, 129, .2)
 }
 
 .inline-style-152 {
   background: #fff;
   padding: 16px 20px;
   padding-bottom: calc(16px + env(safe-area-inset-bottom));
   border-top: 1px solid var(--border);
   box-shadow: 0 -10px 30px rgba(0, 0, 0, .06);
   flex-shrink: 0;
   position: relative
 }
 
 .inline-style-153 {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
   border-bottom: 1px dashed var(--border);
   padding-bottom: 10px
 }
 
 .inline-style-154 {
   font-size: 12px;
   font-weight: 800;
   color: var(--text-sub)
 }
 
 .inline-style-155 {
   color: var(--text-main);
   font-size: 14px
 }
 
 .inline-style-156 {
   font-size: 12px;
   font-weight: 800;
   color: var(--text-sub)
 }
 
 .inline-style-157 {
   color: var(--green);
   font-size: 14px;
   background: #dcfce7;
   padding: 2px 8px;
   border-radius: 6px
 }
 
 .inline-style-158 {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px
 }
 
 .inline-style-159 {
   display: flex;
   align-items: center;
   gap: 12px;
   flex: 1;
   overflow: hidden
 }
 
 .inline-style-160 {
   display: flex;
   flex-direction: column;
   line-height: 1
 }
 
 .inline-style-161 {
   font-size: 10px;
   font-weight: 900;
   color: var(--text-sub);
   letter-spacing: .5px;
   text-transform: uppercase
 }
 
 .inline-style-162 {
   font-size: 16px;
   font-weight: 900;
   color: var(--text-main);
   margin-top: 4px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
 }
 
 .inline-style-163 {
   display: flex;
   gap: 10px;
   flex-shrink: 0
 }
 
 .inline-style-164 {
   background: #eff6ff;
   color: #4f46e5;
   border: 2px solid #c7d2fe;
   border-radius: 12px;
   width: 28px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: .2s
 }
 
 .inline-style-165 {
   background: linear-gradient(135deg, var(--primary), #3730a3);
   color: #fff;
   border: none;
   border-radius: 12px;
   padding: 0 20px;
   height: 38px;
   font-weight: 900;
   font-size: 12px;
   letter-spacing: .5px;
   cursor: pointer;
   box-shadow: 0 6px 15px rgba(79, 70, 229, .35);
   transition: .2s
 }
 
 .inline-style-166 {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(15, 23, 42, .85);
   z-index: 100;
   justify-content: center;
   align-items: center
 }
 
 .inline-style-167 {
   background: var(--surface);
   position: relative;
   overflow: hidden;
   padding: 24px;
   border-radius: 20px;
   width: 90%;
   max-width: 340px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, .5)
 }
 
 .inline-style-168 {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, .98);
   z-index: 10;
   flex-direction: column;
   justify-content: center;
   align-items: center
 }
 
 .inline-style-169 {
   width: 45px;
   height: 45px;
   border: 4px solid #e2e8f0;
   border-top: 4px solid var(--primary);
   border-radius: 50%;
   animation: pos-spin .8s linear infinite
 }
 
 .inline-style-170 {
   display: none;
   font-size: 55px;
   animation: successPop .4s cubic-bezier(.175, .885, .32, 1.275)
 }
 
 .inline-style-171 {
   margin-top: 16px;
   font-weight: 900;
   font-size: 14px;
   color: var(--primary);
   letter-spacing: 1px;
   text-transform: uppercase
 }
 
 .inline-style-172 {
   margin: 0 0 16px 0;
   font-size: 20px;
   color: var(--text-main);
   border-bottom: 2px solid var(--border);
   padding-bottom: 10px;
   font-weight: 900;
   display: flex;
   align-items: center;
   gap: 8px
 }
 
 .inline-style-173 {
   display: flex;
   gap: 12px;
   margin-bottom: 16px
 }
 
 .inline-style-174 {
   flex: 1
 }
 
 .inline-style-175 {
   font-size: 10px;
   font-weight: 900;
   color: var(--text-sub);
   display: block;
   margin-bottom: 6px
 }
 
 .inline-style-176 {
   width: 100%;
   box-sizing: border-box;
   padding: 12px;
   border-radius: 10px;
   font-size: 14px;
   border: 2px solid var(--border);
   outline: 0;
   font-weight: 700;
   transition: .3s;
   background: var(--bg)
 }
 
 .inline-style-177 {
   flex: 1
 }
 
 .inline-style-178 {
   font-size: 10px;
   font-weight: 900;
   color: var(--text-sub);
   display: block;
   margin-bottom: 6px
 }
 
 .inline-style-179 {
   width: 100%;
   box-sizing: border-box;
   padding: 12px;
   border-radius: 10px;
   font-size: 14px;
   border: 2px solid var(--border);
   outline: 0;
   font-weight: 700;
   background: var(--bg)
 }
 
 .inline-style-180 {
   font-size: 10px;
   font-weight: 900;
   color: var(--text-sub);
   display: block;
   margin-bottom: 6px
 }
 
 .inline-style-181 {
   width: 100%;
   box-sizing: border-box;
   padding: 12px;
   margin-bottom: 16px;
   border-radius: 10px;
   font-size: 14px;
   border: 2px solid var(--primary);
   font-weight: 900;
   outline: 0;
   background: #e0e7ff;
   color: var(--primary);
   cursor: pointer;
   transition: .3s
 }
 
 .inline-style-182 {
   display: none;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 16px;
   border: 2px solid #22c55e;
   padding: 14px;
   border-radius: 10px;
   background: #f0fdf4;
   box-shadow: inset 0 2px 5px rgba(0, 0, 0, .02);
   animation: fadeInDown .3s ease
 }
 
 .inline-style-183 {
   display: none;
   align-items: center;
   justify-content: center;
   padding: 12px;
   background: #fff;
   border-radius: 8px;
   border: 1px dashed #bbf7d0;
   margin-bottom: 10px
 }
 
 .inline-style-184 {
   font-size: 11px;
   font-weight: 900;
   color: #15803d
 }
 
 .inline-style-185 {
   display: flex;
   gap: 8px
 }
 
 .inline-style-186 {
   flex: 1;
   box-sizing: border-box;
   padding: 12px;
   border-radius: 8px;
   font-size: 14px;
   border: 2px solid #bbf7d0;
   font-weight: 700;
   color: #15803d;
   outline: 0;
   background: #fff;
   transition: .3s
 }
 
 .inline-style-187 {
   background: #e2e8f0;
   color: #475569;
   border: none;
   padding: 0 16px;
   border-radius: 8px;
   font-weight: 900;
   font-size: 12px;
   cursor: pointer;
   transition: .2s
 }
 
 .inline-style-188 {
   font-size: 11px;
   color: #ef4444;
   font-weight: 700;
   display: none;
   margin-top: 4px
 }
 
 .inline-style-189 {
   display: none;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 16px;
   border: 2px dashed #f59e0b;
   padding: 14px;
   border-radius: 10px;
   background: #fffbeb;
   box-shadow: inset 0 2px 5px rgba(0, 0, 0, .02);
   animation: fadeInDown .3s ease
 }
 
 .inline-style-190 {
   font-size: 11px;
   font-weight: 900;
   color: #b45309
 }
 
 .inline-style-191 {
   width: 100%;
   box-sizing: border-box;
   padding: 12px;
   border-radius: 8px;
   font-size: 18px;
   border: 2px solid #fcd34d;
   font-weight: 900;
   color: #b45309;
   outline: 0;
   background: #fff
 }
 
 .inline-style-192 {
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #ef4444;
   font-weight: 900;
   margin-top: 6px;
   padding-top: 10px;
   border-top: 1px solid #fde68a
 }
 
 .inline-style-193 {
   font-size: 13px
 }
 
 .inline-style-194 {
   font-size: 20px;
   background: #fee2e2;
   padding: 4px 10px;
   border-radius: 6px
 }
 
 .inline-style-195 {
   display: flex;
   justify-content: flex-end;
   gap: 12px;
   margin-top: 20px
 }
 
 .inline-style-196 {
   background: #e2e8f0;
   color: var(--text-sub);
   border: none;
   padding: 12px 18px;
   border-radius: 10px;
   font-weight: 900;
   font-size: 13px;
   cursor: pointer
 }
 
 .inline-style-197 {
   background: var(--primary);
   color: #fff;
   border: none;
   padding: 12px 24px;
   border-radius: 10px;
   font-weight: 900;
   font-size: 14px;
   cursor: pointer;
   box-shadow: 0 4px 15px rgba(79, 70, 229, .4)
 }
 
 .inline-style-198 {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(15, 23, 42, .9);
   z-index: 150;
   justify-content: center;
   align-items: center
 }
 
 .inline-style-199 {
   background: var(--surface);
   position: relative;
   overflow: hidden;
   padding: 24px;
   border-radius: 20px;
   width: 92%;
   max-width: 360px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
   max-height: 85vh;
   display: flex;
   flex-direction: column
 }
 
 .inline-style-200 {
   text-align: center;
   margin-bottom: 20px
 }
 
 .inline-style-201 {
   font-size: 40px;
   margin-bottom: 8px;
   animation: float-pulse 2s infinite
 }
 
 .inline-style-202 {
   margin: 0 0 6px 0;
   font-size: 20px;
   color: #ef4444;
   font-weight: 900;
   letter-spacing: -.5px
 }
 
 .inline-style-203 {
   font-size: 13px;
   color: var(--text-sub);
   font-weight: 700
 }
 
 .inline-style-204 {
   flex: 1;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding-right: 5px
 }
 
 .inline-style-205 {
   margin-top: 20px;
   border-top: 1px solid var(--border);
   padding-top: 20px;
   text-align: center
 }
 
 .inline-style-206 {
   background: #f1f5f9;
   color: var(--text-main);
   border: 1px solid var(--border);
   padding: 14px 24px;
   border-radius: 12px;
   font-weight: 900;
   font-size: 14px;
   cursor: pointer;
   width: 100%
 }
 
 .inline-style-207 {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(15, 23, 42, .85);
   z-index: 110;
   justify-content: center;
   align-items: center
 }
 
 .inline-style-208 {
   background: var(--surface);
   padding: 24px;
   border-radius: 20px;
   width: 85%;
   max-width: 320px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, .5)
 }
 
 .inline-style-209 {
   margin: 0 0 20px 0;
   font-size: 18px;
   color: var(--text-main);
   border-bottom: 2px solid var(--border);
   padding-bottom: 10px;
   font-weight: 900
 }
 
 .inline-style-210 {
   width: 100%;
   box-sizing: border-box;
   padding: 12px;
   margin-bottom: 12px;
   border-radius: 10px;
   font-size: 14px;
   border: 2px solid var(--border);
   font-weight: 700;
   outline: 0;
   background: var(--bg)
 }
 
 .inline-style-211 {
   width: 100%;
   box-sizing: border-box;
   padding: 12px;
   margin-bottom: 16px;
   border-radius: 10px;
   font-size: 14px;
   border: 2px solid var(--border);
   font-weight: 700;
   outline: 0;
   background: var(--bg)
 }
 
 .inline-style-212 {
   width: 100%;
   box-sizing: border-box;
   padding: 10px;
   margin-bottom: 24px;
   font-size: 12px;
   border: 2px dashed var(--primary);
   background: #e0e7ff;
   border-radius: 10px;
   font-weight: 700;
   cursor: pointer;
   color: var(--primary)
 }
 
 .inline-style-213 {
   display: flex;
   justify-content: flex-end;
   gap: 12px
 }
 
 .inline-style-214 {
   background: #e2e8f0;
   border: none;
   padding: 12px 18px;
   border-radius: 10px;
   font-size: 13px;
   font-weight: 900;
   color: var(--text-sub)
 }
 
 .inline-style-215 {
   background: var(--primary);
   color: #fff;
   border: none;
   padding: 12px 20px;
   border-radius: 10px;
   font-size: 13px;
   font-weight: 900;
   box-shadow: 0 4px 15px rgba(79, 70, 229, .4)
 }
 
 .inline-style-216 {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, .95);
   z-index: 120;
   justify-content: center;
   align-items: center;
   flex-direction: column
 }
 
 .inline-style-217 {
   position: absolute;
   top: 24px;
   right: 24px;
   background: #fff;
   border: none;
   border-radius: 50%;
   width: 40px;
   height: 40px;
   font-weight: 900;
   font-size: 20px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, .5);
   cursor: pointer
 }
 
 .inline-style-218 {
   max-width: 95%;
   max-height: 85%;
   border-radius: 16px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
   object-fit: contain
 }
 
 .inline-style-219 {
   position: relative;
   padding: 10px
 }
 
 .inline-style-220 {
   display: flex;
   width: 100%;
   align-items: center;
   gap: 8px
 }
 
 .inline-style-221 {
   flex: 1;
   display: flex;
   align-items: center;
   background: #f8fafc;
   border-radius: 20px;
   border: 1px solid var(--border);
   padding: 0 12px;
   height: 42px
 }
 
 .inline-style-222 {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  outline: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.inline-style-223 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.inline-style-224 {
  font-size: 16px;
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.inline-style-225 {
  border-left: 1px solid #e2e8f0;
  padding-left: 8px;
  margin-left: 4px;
  font-size: 16px;
  border-radius: 0;
  color: var(--primary);
  cursor: pointer;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}
 
 .inline-style-226 {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   background: #fff;
   z-index: 10001;
   box-shadow: 0 15px 40px -10px rgba(0, 0, 0, .15);
   border-radius: 0 0 24px 24px
 }
 
 .inline-style-227 {
   cursor: pointer;
   padding: 6px;
   border-radius: 12px;
   width: 110px;
   margin-top: 20px;
   border-color: var(--primary);
   z-index: 99999;
   pointer-events: auto;
   background: #fff;
   box-shadow: 0 8px 25px rgba(0, 0, 0, .2)
 }
 
 .inline-style-228 {
   display: none;
   width: 100%;
   height: 45px;
   border-radius: 8px;
   object-fit: cover;
   margin-bottom: 4px
 }
 
 .inline-style-229 {
   font-size: 10px;
   font-weight: 900;
   color: var(--primary);
   display: block;
   text-align: center;
   line-height: 1.3
 }
 
 .inline-style-230 {
   padding-top: 0;
   padding-bottom: 16px
 }
 
 .inline-style-231 {
   margin-bottom: 16px
 }
 
 .inline-style-232 {
   margin-bottom: 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
   width: 100%
 }
 
 .inline-style-233 {
   background: 0 0;
   border: none;
   font-size: 18px;
   color: var(--primary);
   cursor: pointer;
   font-weight: 900;
   padding: 0 5px;
   pointer-events: none
 }
 
 .inline-style-234 {
   justify-content: space-between;
   padding: 0 5px
 }
 
 .inline-style-235 {
   background: linear-gradient(135deg, #1e293b, #0f172a);
   color: #fff;
   border: none;
   font-size: 16px
 }
 
 .inline-style-236 {
   font-size: 10px
 }
 
 .inline-style-237 {
   background: linear-gradient(135deg, #ec4899, #be185d);
   color: #fff;
   border: none;
   font-size: 16px
 }
 
 .inline-style-238 {
   font-size: 10px
 }
 
 .inline-style-239 {
   font-size: 16px
 }
 
 .inline-style-240 {
   font-size: 10px
 }
 
 .inline-style-241 {
   background: #e0f2fe;
   color: #0284c7;
   border: 1px solid #bae6fd;
   font-size: 16px
 }
 
 .inline-style-242 {
   font-size: 10px
 }
 
 .inline-style-243 {
   background: linear-gradient(135deg, #f59e0b, #d97706)
 }
 
 .inline-style-244 {
   font-size: 10px
 }
 
 .inline-style-245 {
   margin-top: 16px;
   padding-top: 12px;
   border-top: 1px dashed #e2e8f0;
   animation: fadeInDown .3s ease
 }
 
 .inline-style-246 {
   display: flex;
   gap: 8px;
   overflow-x: auto;
   padding-bottom: 5px;
   -ms-overflow-style: none
 }
 
 .inline-style-247 {
   display: flex;
   flex-direction: column
 }
 
 .inline-style-248 {
   margin: 0;
   font-size: 16px;
   font-weight: 900;
   color: var(--text-main)
 }
 
 .inline-style-249 {
   font-size: 12px;
   color: var(--primary);
   font-weight: 700
 }
 
 .inline-style-250 {
   flex: 1
 }
 
 .inline-style-251 {
   font-size: 10px;
   opacity: .7;
   display: block;
   margin-top: 2px
 }
 
 .inline-style-252 {
   display: flex;
   align-items: center
 }
 
 .inline-style-253 {
   display: none
 }
 
 .inline-style-254 {
   color: #0f172a;
   margin-top: 5px
 }
 
 .inline-style-255 {
   color: #0f172a;
   margin-top: 5px
 }
 
 .inline-style-256 {
   color: #0f172a;
   margin-top: 5px
 }
 
 .inline-style-257 {
   padding: 0
 }
 
 .inline-style-258 {
   margin-bottom: 15px;
   color: #64748b
 }
 
 .inline-style-259 {
   height: 20px;
   width: 100%
 }
 
 .inline-style-260 {
   background: #f8fafc;
   border-top: 1px solid #e2e8f0;
   padding: 12px 10px;
   text-align: center;
   width: 100%
 }
 
 .inline-style-261 {
   max-width: 500px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 8px
 }
 
 .inline-style-262 {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 6px 10px;
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase
 }
 
 .inline-style-263 {
   color: #64748b;
   text-decoration: none
 }
 
 .inline-style-264 {
   color: #64748b;
   text-decoration: none
 }
 
 .inline-style-265 {
   color: #64748b;
   text-decoration: none
 }
 
 .inline-style-266 {
   color: #64748b;
   text-decoration: none
 }
 
 .inline-style-267 {
   color: #64748b;
   text-decoration: none
 }
 
 .inline-style-268 {
   color: #64748b;
   text-decoration: none
 }
 
 .inline-style-269 {
   font-size: 9px;
   color: #94a3b8;
   line-height: 1.4
 }
 
 .inline-style-270 {
   color: #475569
 }
 
 .inline-style-271 {
   margin-top: 4px
 }
 
 .inline-style-272 {
   color: #043f91;
   font-weight: 800;
   text-decoration: none
 }
 
 .inline-style-273 {
   color: #043f91;
   font-weight: 800;
   text-decoration: none
 }
 
 .inline-style-274 {
   margin-top: 1px;
   font-size: 7px;
   color: #1e1b4b;
   text-align: justify
 }
 
 .inline-style-275 {
   margin-top: 4px;
   font-size: 9px;
   color: #cbd5e1
 }
 
 .inline-style-276 {
   border-left: 1px solid #e2e8f0;
   padding-left: 8px;
   border-radius: 0;
   color: var(--primary)
 }
 
 .inline-style-277 {
   display: flex;
   align-items: center;
   gap: 8px
 }
 
 .inline-style-278 {
   display: flex;
   align-items: center;
   justify-content: center;
   background: #dcfce7 !important;
   color: #16a34a !important;
   border: 1px solid #bbf7d0 !important;
   border-radius: 50%;
   width: 38px;
   height: 38px;
   cursor: pointer;
   transition: all .2s;
   box-shadow: none !important
 }
 
 .inline-style-279 {
   display: flex;
   align-items: center;
   justify-content: center;
   background: #ffe4e6 !important;
   color: #e11d48 !important;
   border: 1px solid #fecdd3 !important;
   border-radius: 50%;
   width: 38px;
   height: 38px;
   cursor: pointer;
   position: relative;
   transition: all .2s;
   box-shadow: none !important
 }
 
 .inline-style-280 {
   position: absolute;
   top: -4px;
   right: -4px;
   background: #e11d48 !important;
   color: #fff !important;
   border: 2px solid #fff !important;
   border-radius: 50%;
   font-size: 10px;
   width: 18px;
   height: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700
 }
 
 .inline-style-281 {
   display: flex;
   align-items: center;
   gap: 8px
 }
 
 .inline-style-282 {
   display: flex;
   align-items: center;
   justify-content: center;
   background: #e0f2fe !important;
   color: #0284c7 !important;
   border: 1px solid #bae6fd !important;
   border-radius: 50%;
   width: 38px;
   height: 38px;
   cursor: pointer;
   transition: all .2s;
   box-shadow: none !important
 }
 
 .inline-style-283 {
   width: 20px;
   height: 20px;
   stroke-width: 2.2
 }
 
 .inline-style-284 {
   display: flex;
   align-items: center
 }
 
 .inline-style-285 {
   display: flex;
   align-items: center
 }
 
 .inline-style-286 {
   display: flex;
   align-items: center;
   gap: 6px;
   background: #e0e7ff !important;
   color: #4f46e5 !important;
   border: 1px solid #c7d2fe !important;
   border-radius: 20px;
   padding: 6px 14px;
   font-weight: 700;
   cursor: pointer;
   transition: all .2s;
   box-shadow: none !important
 }
 
 .inline-style-287 {
   width: 20px;
   height: 20px;
   stroke-width: 2.2
 }
 
 .inline-style-288 {
   width: 90%;
   height: auto;
   border-radius: 24px;
   padding-bottom: 30px
 }
 
 .inline-style-289 {
   background: #f3f4f6;
   border: none;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 16px;
   color: #4b5563
 }
 
 .inline-style-290 {
   text-align: center
 }
 
 .inline-style-291 {
   margin-bottom: 8px
 }
 
 .inline-style-292 {
   color: var(--text-sub);
   margin-bottom: 24px;
   font-size: 14px
 }
 
 .inline-style-293 {
   padding: 0
 }
 
 .inline-style-294 {
   padding: 20px;
   text-align: center;
   border-bottom: 1px solid var(--border)
 }
 
 .inline-style-295 {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background: #eee;
   object-fit: cover;
   margin-bottom: 10px
 }
 
 .inline-style-296 {
   font-size: 18px
 }
 
 .inline-style-297 {
   color: var(--text-sub);
   font-size: 14px
 }
 
 .inline-style-298 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   padding: 16px 16px 0
 }
 
 .inline-style-299 {
   background: #f0f9ff;
   color: #0284c7;
   justify-content: center;
   display: flex
 }
 
 .inline-style-300 {
   position: static;
   margin-left: 6px;
   border: none;
   padding: 2px 6px;
   font-size: 10px
 }
 
 .inline-style-301 {
   background: #f0fdf4;
   color: #16a34a;
   justify-content: center;
   display: flex
 }
 
 .inline-style-302 {
   position: static;
   margin-left: 6px;
   border: none;
   padding: 2px 6px;
   font-size: 10px
 }
 
 .inline-style-303 {
   padding: 16px
 }
 
 .inline-style-304 {
   margin-bottom: 12px;
   font-size: 14px;
   color: var(--text-sub);
   text-transform: uppercase
 }
 
 .inline-style-305 {
   display: flex;
   flex-direction: column;
   gap: 10px;
   max-height: 300px;
   overflow-y: auto
 }
 
 .inline-style-306 {
   border-top: 1px solid var(--border);
   margin-top: 0;
   padding-bottom: 10px
 }
 
 .inline-style-307 {
   padding: 16px;
   border-top: 1px solid var(--border);
   display: flex;
   gap: 10px
 }
 
 .inline-style-308 {
   flex: 1;
   background: #f1f5f9;
   color: #475569;
   height: 36px;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 700;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .02)
 }
 
 .inline-style-309 {
   flex: 1;
   background: #fee2e2;
   color: #ef4444;
   height: 36px;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 700;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .02)
 }
 
 .inline-style-310 {
   justify-content: flex-start;
   gap: 12px
 }
 
 .inline-style-311 {
   font-weight: 700;
   font-size: 18px;
   color: var(--text-main)
 }
 
 .inline-style-312 {
   margin-bottom: 20px
 }
 
 .inline-style-313 {
   margin-top: 20px
 }
 
 .inline-style-314 {
   background: #fff1f2;
   border-color: #fda4af;
   color: #e11d48;
   font-weight: 700
 }
 
 .inline-style-315 {
   height: 20px
 }
 
 .inline-style-316 {
   display: none;
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, .4);
   z-index: 5;
   cursor: crosshair
 }
 
 .inline-style-317 {
   display: none;
   position: absolute;
   border: 2px solid #fff;
   box-shadow: 0 0 0 9999px rgba(0, 0, 0, .6);
   z-index: 10;
   pointer-events: none
 }
 
 .inline-style-318 {
   display: flex;
   gap: 10px;
   margin-bottom: 20px
 }
 
 .inline-style-319 {
   background: #ef4444;
   flex: 1
 }
 
 .inline-style-320 {
   background: #10b981;
   flex: 1
 }
 
 .inline-style-321 {
   flex: 2
 }
 
 .inline-style-322 {
   margin-top: 15px
 }
 
 .inline-style-323 {
   z-index: 9999;
   background: #fff
 }
 
 .inline-style-324 {
   width: 100%;
   height: 100%;
   border-radius: 0;
   padding: 0;
   box-shadow: none
 }
 
 .inline-style-325 {
   position: absolute;
   top: 0;
   width: 100%;
   height: 55px;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: space-between;
   z-index: 1001;
   padding: 0 10px;
   border-bottom: 1px solid #eee
 }
 
 .inline-style-326 {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   color: var(--primary)
 }
 
 .inline-style-327 {
   flex: 1;
   text-align: center;
   font-size: 12px;
   font-weight: 500;
   color: #666;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 0 10px
 }
 
 .inline-style-328 {
   width: 40px;
   height: 40px;
   background: #f8fafc;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px
 }
 
 .inline-style-329 {
   width: 100%;
   height: 100%
 }
 
 .inline-style-330 {
   background: #e0f2fe;
   color: #0369a1;
   display: none
 }
 
 .inline-style-331 {
   display: none
 }
 
 .inline-style-332 {
   display: none
 }
 
 .inline-style-333 {
   display: none
 }
 
 .inline-style-334 {
   display: none
 }
 
 .inline-style-335 {
   padding: 0
 }
 
 .inline-style-336 {
   padding: 0 16px
 }
 
 .inline-style-337 {
   display: none;
   background: #ecfdf5;
   border: 1px solid #a7f3d0;
   padding: 16px;
   border-radius: 12px;
   text-align: center
 }
 
 .inline-style-338 {
   color: #065f46;
   margin-bottom: 6px
 }
 
 .inline-style-339 {
   color: #047857;
   font-size: 13px;
   margin-bottom: 12px
 }
 
 .inline-style-340 {
   display: flex;
   gap: 10px;
   justify-content: center
 }
 
 .inline-style-341 {
   flex: 1;
   margin: 0
 }
 
 .inline-style-342 {
   flex: 1;
   margin: 0
 }
 
 .inline-style-343 {
   font-size: 11px;
   font-weight: 800;
   color: #059669
 }
 
 .inline-style-344 {
   font-size: 9px;
   color: #64748b;
   font-weight: 700;
   opacity: .7
 }
 
 .inline-style-345 {
   width: 100%;
   text-align: center;
   margin: 16px 0;
   overflow: hidden;
   background: #f8fafc;
   border-radius: 12px;
   border: 1px solid #e2e8f0;
   display: block
 }
 
 .inline-style-346 {
   font-size: 9px;
   color: #cbd5e1;
   letter-spacing: 1px;
   font-weight: 700;
   padding: 4px 0
 }
 
 .inline-style-347 {
   display: inline-block;
   width: 100%;
   height: 90px
 }
 
 .inline-style-348 {
   display: flex;
   align-items: center;
   gap: 10px
 }
 
 .inline-style-349 {
   margin-bottom: 0
 }
 
 .inline-style-350 {
   font-size: 11px;
   font-weight: 800;
   padding: 3px 8px;
   border-radius: 12px;
   background: #f1f5f9;
   color: #64748b;
   letter-spacing: .5px
 }
 
 .inline-style-351 {
   margin-top: 12px;
   padding: 8px 12px;
   min-height: unset;
   align-items: center;
   border-radius: 14px
 }
 
 .inline-style-352 {
   gap: 12px;
   align-items: center
 }
 
 .inline-style-353 {
   width: 34px;
   height: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   flex-shrink: 0;
   border-radius: 10px
 }
 
 .inline-style-354 {
   display: flex;
   flex-direction: column;
   justify-content: center
 }
 
 .inline-style-355 {
   font-size: 8px;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: .8px;
   line-height: 1
 }
 
 .inline-style-356 {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 4px;
   font-size: 26px;
   margin-top: 4px;
   line-height: 1;
   height: 26px;
   cursor: pointer;
   transition: transform .2s
 }
 
 .inline-style-357 {
   display: none;
   color: #d97706;
   margin-top: 2px;
   font-size: 10px;
   font-weight: 700;
   animation: slideInMicAdvanced .3s ease-out
 }
 
 .inline-style-358 {
   background: #fff1f2;
   color: #f43f5e;
   border: 1px solid #ffe4e6;
   box-shadow: none;
   padding: 6px 14px;
   height: auto;
   font-size: 11px;
   flex-shrink: 0;
   border-radius: 10px;
   cursor: pointer
 }
 
 .inline-style-359 {
   background: var(--bg)
 }
 
 .inline-style-360 {
   display: none
 }
 
 .inline-style-361 {
   margin-left: auto
 }
 
 .inline-style-362 {
   padding: 0;
   overflow-x: hidden
 }
 
 .inline-style-363 {
   display: none
 }
 
 .inline-style-364 {
   padding: 0 16px 30px
 }
 
 .inline-style-365 {
   font-size: 16px;
   font-weight: 800;
   margin-bottom: 16px;
   color: var(--text-main)
 }
 
 .inline-style-366 {
   width: 100%;
   text-align: center;
   margin: 16px 0;
   background: #f8fafc;
   border-radius: 12px;
   border: 1px solid #e2e8f0;
   overflow: hidden;
   min-height: 110px
 }
 
 .inline-style-367 {
   font-size: 9px;
   color: #cbd5e1;
   letter-spacing: 1px;
   font-weight: 700;
   padding: 4px 0
 }
 
 .inline-style-368 {
   display: block;
   width: 100%;
   height: 90px
 }
 
 .inline-style-369 {
   display: none
 }
 
 .inline-style-370 {
   text-align: center
 }
 
 .inline-style-371 {
   margin-bottom: 15px;
   color: var(--text-main)
 }
 
 .inline-style-372 {
   background: #fffbeb;
   border: 1px solid #fde68a;
   padding: 16px;
   border-radius: 12px;
   margin-bottom: 16px;
   text-align: left
 }
 
 .inline-style-373 {
   color: #d97706;
   margin-bottom: 8px
 }
 
 .inline-style-374 {
   font-size: 13px;
   color: #92400e;
   margin-bottom: 12px
 }
 
 .inline-style-375 {
   background: #f59e0b;
   width: 100%;
   border: none
 }
 
 .inline-style-376 {
   background: #fef2f2;
   border: 1px solid #fecaca;
   padding: 16px;
   border-radius: 12px;
   text-align: left
 }
 
 .inline-style-377 {
   color: #dc2626;
   margin-bottom: 8px
 }
 
 .inline-style-378 {
   font-size: 13px;
   color: #991b1b;
   margin-bottom: 12px
 }
 
 .inline-style-379 {
   background: #ef4444;
   width: 100%;
   border: none
 }
 
 .inline-style-380 {
   color: #64748b;
   font-size: 13px;
   margin-bottom: 12px
 }
 
 .inline-style-381 {
   text-align: center;
   padding: 20px 0
 }
 
 .inline-style-382 {
   font-size: 40px;
   margin-bottom: 10px
 }
 
 .inline-style-383 {
   color: #0f172a;
   margin-bottom: 8px
 }
 
 .inline-style-384 {
   color: #059669;
   font-weight: 600;
   font-size: 14px
 }
 
 .inline-style-385 {
   justify-content: flex-start;
   gap: 16px;
   padding: 12px
 }
 
 .inline-style-386 {
   display: flex;
   flex-direction: column;
   min-width: 0
 }
 
 .inline-style-387 {
   font-size: 16px;
   font-weight: 700;
   color: var(--text-main)
 }
 
 .inline-style-388 {
   font-size: 12px;
   color: var(--text-sub);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 200px
 }
 
 .inline-style-389 {
   width: 40px;
   height: 40px;
   border-radius: 8px;
   object-fit: cover;
   margin-left: auto;
   display: none
 }
 
 .inline-style-390 {
   background: #e0f2fe;
   color: #0369a1;
   border-color: #bae6fd
 }
 
 .inline-style-391 {
   display: none
 }
 
 .inline-style-392 {
   font-size: 11px;
   color: var(--text-sub);
   font-weight: 600
 }
 
 .inline-style-393 {
   display: flex;
   gap: 8px
 }
 
 .inline-style-394 {
   padding: 0
 }
 
 .inline-style-395 {
   display: flex;
   justify-content: space-between;
   align-items: center
 }
 
 .inline-style-396 {
   display: flex;
   gap: 10px;
   align-items: center
 }
 
 .inline-style-397 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   background: var(--primary);
   color: #fff;
   padding: 6px 12px;
   font-size: 12px;
   border-radius: 20px
 }
 
 .inline-style-398 {
   position: static;
   background: #ef4444;
   color: #fff;
   border-radius: 12px;
   padding: 2px 6px;
   font-size: 10px;
   font-weight: 700;
   line-height: 1
 }
 
 .inline-style-399 {
   font-size: 20px
 }
 
 .inline-style-400 {
   padding: 0
 }
 
 .inline-style-401 {
   justify-content: flex-start;
   gap: 16px;
   padding: 12px
 }
 
 .inline-style-402 {
   padding: 0;
   display: flex;
   flex-direction: column;
   position: relative
 }
 
 .inline-style-403 {
   flex: 1;
   width: 100%;
   z-index: 1
 }
 
 .inline-style-404 {
   z-index: 99999;
   background: rgba(15, 23, 42, .7)
 }
 
 .inline-style-405 {
   position: relative;
   max-height: 95vh;
   height: 100%;
   width: 100%;
   max-width: 480px;
   display: flex;
   flex-direction: column;
   background: #f8fafc;
   border-radius: 20px 20px 0 0;
   overflow: hidden;
   box-shadow: 0 -10px 40px rgba(0, 0, 0, .3);
   margin-top: auto;
   margin-left: auto;
   margin-right: auto
 }
 
 .inline-style-406 {
   display: none;
   background: #fff;
   z-index: 999999
 }
 
 .inline-style-407 {
   background: linear-gradient(135deg, #4f46e5 0, #312e81 100%);
   color: #fff;
   box-shadow: 0 4px 20px rgba(79, 70, 229, .3);
   z-index: 10;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px 20px;
   flex-shrink: 0;
   border-bottom: 1px solid rgba(255, 255, 255, .1)
 }
 
 .inline-style-408 {
   display: flex;
   flex-direction: column
 }
 
 .inline-style-409 {
   font-weight: 900;
   font-size: 18px;
   line-height: 1.1;
   letter-spacing: -.5px
 }
 
 .inline-style-410 {
   font-size: 11px;
   color: #c7d2fe;
   font-weight: 600;
   letter-spacing: .5px;
   text-transform: uppercase
 }
 
 .inline-style-411 {
   display: none;
   flex: 1;
   position: relative;
   margin: 0 12px
 }
 
 .inline-style-412 {
   width: 100%;
   padding: 10px 34px 10px 14px;
   border-radius: 20px;
   border: 2px solid #818cf8;
   font-size: 13px;
   background: rgba(255, 255, 255, .95);
   color: #0f172a;
   font-weight: 700;
   outline: 0;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, .05);
   transition: .3s;
   box-sizing: border-box
 }
 
 .inline-style-413 {
   display: none;
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   background: #fee2e2;
   border: none;
   color: #ef4444;
   border-radius: 50%;
   width: 20px;
   height: 20px;
   font-size: 10px;
   font-weight: 700;
   cursor: pointer;
   align-items: center;
   justify-content: center
 }
 
 .inline-style-414 {
   display: flex;
   gap: 12px;
   align-items: center
 }
 
 .inline-style-415 {
   background: 0 0;
   border: none;
   cursor: pointer;
   font-size: 18px;
   color: #fff;
   opacity: .9
 }
 
 .inline-style-416 {
   font-size: 11px;
   color: #fca5a5;
   font-weight: 900;
   background: rgba(239, 68, 68, .2);
   padding: 6px 12px;
   border-radius: 8px;
   border: 1px solid rgba(248, 113, 113, .3);
   cursor: pointer;
   transition: .2s
 }
 
 .inline-style-417 {
   font-size: 22px;
   color: #fff;
   font-weight: 700;
   border: none;
   background: 0 0;
   cursor: pointer;
   line-height: 1
 }
 
 .inline-style-418 {
   padding: 0;
   display: flex;
   flex-direction: column;
   flex: 1;
   overflow: hidden;
   background: #f1f5f9
 }
 
 .inline-style-419 {
   display: flex;
   justify-content: space-between;
   font-size: 12px;
   padding: 10px 12px;
   background: #fff;
   border-bottom: 1px solid var(--border);
   font-weight: 800;
   overflow-x: auto;
   gap: 8px;
   white-space: nowrap;
   -ms-overflow-style: none;
   flex-shrink: 0;
   box-shadow: 0 4px 10px rgba(0, 0, 0, .02)
 }
 
 .inline-style-420 {
   padding: 12px;
   display: flex;
   flex-direction: column;
   flex: 1;
   overflow: hidden
 }
 
 .inline-style-421 {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
   flex-shrink: 0
 }
 
 .inline-style-422 {
   display: flex;
   align-items: center;
   gap: 8px;
   cursor: pointer;
   background: #fff;
   padding: 8px 14px;
   border-radius: 10px;
   border: 1px solid var(--border);
   box-shadow: 0 2px 5px rgba(0, 0, 0, .03)
 }
 
 .inline-style-423 {
   transform: scale(1.2);
   accent-color: var(--primary);
   margin: 0
 }
 
 .inline-style-424 {
   font-size: 13px;
   font-weight: 900;
   color: var(--text-main)
 }
 
 .inline-style-425 {
   background: var(--primary);
   color: #fff;
   border: none;
   border-radius: 10px;
   padding: 8px 16px;
   font-size: 13px;
   font-weight: 900;
   cursor: pointer;
   box-shadow: 0 4px 10px rgba(79, 70, 229, .2);
   transition: .2s
 }
 
 .inline-style-426 {
   display: none;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
   background: #fff;
   padding: 10px 14px;
   border-radius: 10px;
   border: 1px solid var(--border);
   flex-shrink: 0;
   box-shadow: 0 2px 5px rgba(0, 0, 0, .03)
 }
 
 .inline-style-427 {
   font-size: 13px;
   font-weight: 900;
   color: var(--text-main)
 }
 
 .inline-style-428 {
   background: #10b981;
   color: #fff;
   border: none;
   border-radius: 8px;
   padding: 8px 14px;
   font-size: 12px;
   font-weight: 900;
   cursor: pointer;
   box-shadow: 0 4px 10px rgba(16, 185, 129, .2)
 }
 
 .inline-style-429 {
   background: #fff;
   padding: 16px 20px;
   padding-bottom: calc(16px + env(safe-area-inset-bottom));
   border-top: 1px solid var(--border);
   box-shadow: 0 -10px 30px rgba(0, 0, 0, .06);
   flex-shrink: 0;
   position: relative
 }
 
 .inline-style-430 {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
   border-bottom: 1px dashed var(--border);
   padding-bottom: 10px
 }
 
 .inline-style-431 {
   font-size: 12px;
   font-weight: 800;
   color: var(--text-sub)
 }
 
 .inline-style-432 {
   color: var(--text-main);
   font-size: 14px
 }
 
 .inline-style-433 {
   font-size: 12px;
   font-weight: 800;
   color: var(--text-sub)
 }
 
 .inline-style-434 {
   color: var(--green);
   font-size: 14px;
   background: #dcfce7;
   padding: 2px 8px;
   border-radius: 6px
 }
 
 .inline-style-435 {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px
 }
 
 .inline-style-436 {
   display: flex;
   align-items: center;
   gap: 12px;
   flex: 1;
   overflow: hidden
 }
 
 .inline-style-437 {
   display: flex;
   flex-direction: column;
   line-height: 1
 }
 
 .inline-style-438 {
   font-size: 10px;
   font-weight: 900;
   color: var(--text-sub);
   letter-spacing: .5px;
   text-transform: uppercase
 }
 
 .inline-style-439 {
   font-size: 16px;
   font-weight: 900;
   color: var(--text-main);
   margin-top: 4px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
 }
 
 .inline-style-440 {
   display: flex;
   gap: 10px;
   flex-shrink: 0
 }
 
 .inline-style-441 {
   background: #eff6ff;
   color: #4f46e5;
   border: 2px solid #c7d2fe;
   border-radius: 12px;
   width: 28px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: .2s
 }
 
 .inline-style-442 {
   background: linear-gradient(135deg, var(--primary), #3730a3);
   color: #fff;
   border: none;
   border-radius: 12px;
   padding: 0 20px;
   height: 38px;
   font-weight: 900;
   font-size: 12px;
   letter-spacing: .5px;
   cursor: pointer;
   box-shadow: 0 6px 15px rgba(79, 70, 229, .35);
   transition: .2s
 }
 
 .inline-style-443 {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(15, 23, 42, .85);
   z-index: 100;
   justify-content: center;
   align-items: center
 }
 
 .inline-style-444 {
   background: var(--surface);
   position: relative;
   overflow: hidden;
   padding: 24px;
   border-radius: 20px;
   width: 90%;
   max-width: 340px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, .5)
 }
 
 .inline-style-445 {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, .98);
   z-index: 10;
   flex-direction: column;
   justify-content: center;
   align-items: center
 }
 
 .inline-style-446 {
   width: 45px;
   height: 45px;
   border: 4px solid #e2e8f0;
   border-top: 4px solid var(--primary);
   border-radius: 50%;
   animation: pos-spin .8s linear infinite
 }
 
 .inline-style-447 {
   display: none;
   font-size: 55px;
   animation: successPop .4s cubic-bezier(.175, .885, .32, 1.275)
 }
 
 .inline-style-448 {
   margin-top: 16px;
   font-weight: 900;
   font-size: 14px;
   color: var(--primary);
   letter-spacing: 1px;
   text-transform: uppercase
 }
 
 .inline-style-449 {
   margin: 0 0 16px 0;
   font-size: 20px;
   color: var(--text-main);
   border-bottom: 2px solid var(--border);
   padding-bottom: 10px;
   font-weight: 900;
   display: flex;
   align-items: center;
   gap: 8px
 }
 
 .inline-style-450 {
   display: flex;
   gap: 12px;
   margin-bottom: 16px
 }
 
 .inline-style-451 {
   flex: 1
 }
 
 .inline-style-452 {
   font-size: 10px;
   font-weight: 900;
   color: var(--text-sub);
   display: block;
   margin-bottom: 6px
 }
 
 .inline-style-453 {
   width: 100%;
   box-sizing: border-box;
   padding: 12px;
   border-radius: 10px;
   font-size: 14px;
   border: 2px solid var(--border);
   outline: 0;
   font-weight: 700;
   transition: .3s;
   background: var(--bg)
 }
 
 .inline-style-454 {
   flex: 1
 }
 
 .inline-style-455 {
   font-size: 10px;
   font-weight: 900;
   color: var(--text-sub);
   display: block;
   margin-bottom: 6px
 }
 
 .inline-style-456 {
   width: 100%;
   box-sizing: border-box;
   padding: 12px;
   border-radius: 10px;
   font-size: 14px;
   border: 2px solid var(--border);
   outline: 0;
   font-weight: 700;
   background: var(--bg)
 }
 
 .inline-style-457 {
   font-size: 10px;
   font-weight: 900;
   color: var(--text-sub);
   display: block;
   margin-bottom: 6px
 }
 
 .inline-style-458 {
   width: 100%;
   box-sizing: border-box;
   padding: 12px;
   margin-bottom: 16px;
   border-radius: 10px;
   font-size: 14px;
   border: 2px solid var(--primary);
   font-weight: 900;
   outline: 0;
   background: #e0e7ff;
   color: var(--primary);
   cursor: pointer;
   transition: .3s
 }
 
 .inline-style-459 {
   display: none;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 16px;
   border: 2px solid #22c55e;
   padding: 14px;
   border-radius: 10px;
   background: #f0fdf4;
   box-shadow: inset 0 2px 5px rgba(0, 0, 0, .02);
   animation: fadeInDown .3s ease
 }
 
 .inline-style-460 {
   font-size: 11px;
   font-weight: 900;
   color: #15803d
 }
 
 .inline-style-461 {
   display: flex;
   gap: 8px
 }
 
 .inline-style-462 {
   flex: 1;
   box-sizing: border-box;
   padding: 12px;
   border-radius: 8px;
   font-size: 14px;
   border: 2px solid #bbf7d0;
   font-weight: 700;
   color: #15803d;
   outline: 0;
   background: #fff;
   transition: .3s
 }
 
 .inline-style-463 {
   background: #e2e8f0;
   color: #475569;
   border: none;
   padding: 0 16px;
   border-radius: 8px;
   font-weight: 900;
   font-size: 12px;
   cursor: pointer;
   transition: .2s
 }
 
 .inline-style-464 {
   font-size: 11px;
   color: #ef4444;
   font-weight: 700;
   display: none;
   margin-top: 4px
 }
 
 .inline-style-465 {
   display: none;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 16px;
   border: 2px dashed #f59e0b;
   padding: 14px;
   border-radius: 10px;
   background: #fffbeb;
   box-shadow: inset 0 2px 5px rgba(0, 0, 0, .02);
   animation: fadeInDown .3s ease
 }
 
 .inline-style-466 {
   font-size: 11px;
   font-weight: 900;
   color: #b45309
 }
 
 .inline-style-467 {
   width: 100%;
   box-sizing: border-box;
   padding: 12px;
   border-radius: 8px;
   font-size: 18px;
   border: 2px solid #fcd34d;
   font-weight: 900;
   color: #b45309;
   outline: 0;
   background: #fff
 }
 
 .inline-style-468 {
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #ef4444;
   font-weight: 900;
   margin-top: 6px;
   padding-top: 10px;
   border-top: 1px solid #fde68a
 }
 
 .inline-style-469 {
   font-size: 13px
 }
 
 .inline-style-470 {
   font-size: 20px;
   background: #fee2e2;
   padding: 4px 10px;
   border-radius: 6px
 }
 
 .inline-style-471 {
   display: flex;
   justify-content: flex-end;
   gap: 12px;
   margin-top: 20px
 }
 
 .inline-style-472 {
   background: #e2e8f0;
   color: var(--text-sub);
   border: none;
   padding: 12px 18px;
   border-radius: 10px;
   font-weight: 900;
   font-size: 13px;
   cursor: pointer
 }
 
 .inline-style-473 {
   background: var(--primary);
   color: #fff;
   border: none;
   padding: 12px 24px;
   border-radius: 10px;
   font-weight: 900;
   font-size: 14px;
   cursor: pointer;
   box-shadow: 0 4px 15px rgba(79, 70, 229, .4)
 }
 
 .inline-style-474 {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(15, 23, 42, .9);
   z-index: 150;
   justify-content: center;
   align-items: center
 }
 
 .inline-style-475 {
   background: var(--surface);
   position: relative;
   overflow: hidden;
   padding: 24px;
   border-radius: 20px;
   width: 92%;
   max-width: 360px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
   max-height: 85vh;
   display: flex;
   flex-direction: column
 }
 
 .inline-style-476 {
   text-align: center;
   margin-bottom: 20px
 }
 
 .inline-style-477 {
   font-size: 40px;
   margin-bottom: 8px;
   animation: float-pulse 2s infinite
 }
 
 .inline-style-478 {
   margin: 0 0 6px 0;
   font-size: 20px;
   color: #ef4444;
   font-weight: 900;
   letter-spacing: -.5px
 }
 
 .inline-style-479 {
   font-size: 13px;
   color: var(--text-sub);
   font-weight: 700
 }
 
 .inline-style-480 {
   flex: 1;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding-right: 5px
 }
 
 .inline-style-481 {
   margin-top: 20px;
   border-top: 1px solid var(--border);
   padding-top: 20px;
   text-align: center
 }
 
 .inline-style-482 {
   background: #f1f5f9;
   color: var(--text-main);
   border: 1px solid var(--border);
   padding: 14px 24px;
   border-radius: 12px;
   font-weight: 900;
   font-size: 14px;
   cursor: pointer;
   width: 100%
 }
 
 .inline-style-483 {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(15, 23, 42, .85);
   z-index: 110;
   justify-content: center;
   align-items: center
 }
 
 .inline-style-484 {
   background: var(--surface);
   padding: 24px;
   border-radius: 20px;
   width: 85%;
   max-width: 320px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, .5)
 }
 
 .inline-style-485 {
   margin: 0 0 20px 0;
   font-size: 18px;
   color: var(--text-main);
   border-bottom: 2px solid var(--border);
   padding-bottom: 10px;
   font-weight: 900
 }
 
 .inline-style-486 {
   width: 100%;
   box-sizing: border-box;
   padding: 12px;
   margin-bottom: 12px;
   border-radius: 10px;
   font-size: 14px;
   border: 2px solid var(--border);
   font-weight: 700;
   outline: 0;
   background: var(--bg)
 }
 
 .inline-style-487 {
   width: 100%;
   box-sizing: border-box;
   padding: 12px;
   margin-bottom: 16px;
   border-radius: 10px;
   font-size: 14px;
   border: 2px solid var(--border);
   font-weight: 700;
   outline: 0;
   background: var(--bg)
 }
 
 .inline-style-488 {
   width: 100%;
   box-sizing: border-box;
   padding: 10px;
   margin-bottom: 24px;
   font-size: 12px;
   border: 2px dashed var(--primary);
   background: #e0e7ff;
   border-radius: 10px;
   font-weight: 700;
   cursor: pointer;
   color: var(--primary)
 }
 
 .inline-style-489 {
   display: flex;
   justify-content: flex-end;
   gap: 12px
 }
 
 .inline-style-490 {
   background: #e2e8f0;
   border: none;
   padding: 12px 18px;
   border-radius: 10px;
   font-size: 13px;
   font-weight: 900;
   color: var(--text-sub)
 }
 
 .inline-style-491 {
   background: var(--primary);
   color: #fff;
   border: none;
   padding: 12px 20px;
   border-radius: 10px;
   font-size: 13px;
   font-weight: 900;
   box-shadow: 0 4px 15px rgba(79, 70, 229, .4)
 }
 
 .inline-style-492 {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, .95);
   z-index: 120;
   justify-content: center;
   align-items: center;
   flex-direction: column
 }
 
 .inline-style-493 {
   position: absolute;
   top: 24px;
   right: 24px;
   background: #fff;
   border: none;
   border-radius: 50%;
   width: 40px;
   height: 40px;
   font-weight: 900;
   font-size: 20px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, .5);
   cursor: pointer
 }
 
 .inline-style-494 {
   max-width: 95%;
   max-height: 85%;
   border-radius: 16px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
   object-fit: contain
 }
 
 .inline-style-495 {
   background: linear-gradient(135deg, #1e293b, #0f172a)
 }
 
 .inline-style-496 {
   background: linear-gradient(135deg, #ec4899, #be185d)
 }
 
 .inline-style-497 {
   display: flex;
   flex-direction: column
 }
 
 .inline-style-498 {
   margin: 0;
   font-size: 16px;
   font-weight: 900;
   color: var(--text-main)
 }
 
 .inline-style-499 {
   font-size: 12px;
   color: var(--primary);
   font-weight: 700
 }
 
 .inline-style-500 {
   flex: 1
 }
 
 .inline-style-501 {
   font-size: 10px;
   opacity: .7;
   display: block;
   margin-top: 2px
 }
 
 .inline-style-502 {
   display: flex;
   align-items: center
 }
 
 .inline-style-503 {
   display: none
 }
 
 .inline-style-504 {
   padding: 0
 }
 
 .inline-style-505 {
   margin-bottom: 15px;
   color: #64748b
 }
 
 .inline-style-506 {
   height: 20px;
   width: 100%
 }
 
 .inline-style-507 {
   background: #f8fafc;
   border-top: 1px solid #e2e8f0;
   padding: 12px 10px;
   text-align: center;
   width: 100%
 }
 
 .inline-style-508 {
   max-width: 500px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 8px
 }
 
 .inline-style-509 {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 6px 10px;
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase
 }
 
 .inline-style-510 {
   color: #64748b;
   text-decoration: none
 }
 
 .inline-style-511 {
   color: #64748b;
   text-decoration: none
 }
 
 .inline-style-512 {
   color: #64748b;
   text-decoration: none
 }
 
 .inline-style-513 {
   color: #64748b;
   text-decoration: none
 }
 
 .inline-style-514 {
   color: #64748b;
   text-decoration: none
 }
 
 .inline-style-515 {
   color: #64748b;
   text-decoration: none
 }
 
 .inline-style-516 {
   font-size: 10px;
   color: #94a3b8;
   line-height: 1.4
 }
 
 .inline-style-517 {
   color: #475569
 }
 
 .inline-style-518 {
   margin-top: 4px
 }
 
 .inline-style-519 {
   color: #043f91;
   font-weight: 800;
   text-decoration: none
 }
 
 .inline-style-520 {
   margin-top: 1px;
   font-size: 7px;
   color: #cbd5e1;
   text-align: justify
 }
 
 .inline-style-521 {
   margin-top: 4px;
   font-size: 9px;
   color: #cbd5e1
 }
 
 .inline-style-522 {
   margin-top: 15px;
   padding: 10px 20px;
   background: #ef4444;
   color: #fff;
   border: none;
   border-radius: 8px;
   font-weight: 700;
   font-size: 14px;
   cursor: pointer
 }
 
 .inline-style-523 {
   padding: 20px;
   max-width: 800px;
   margin: 0 auto;
   line-height: 1.6;
   color: var(--text-sub)
 }
 
 .inline-style-524 {
   color: #64748b;
   font-size: 13px;
   margin-bottom: 12px
 }
 
 .inline-style-525 {
   text-align: center;
   padding: 20px 0
 }
 
 .inline-style-526 {
   font-size: 40px;
   margin-bottom: 10px
 }
 
 .inline-style-527 {
   color: #0f172a;
   margin-bottom: 8px
 }
 
 .inline-style-528 {
   color: #059669;
   font-weight: 600;
   font-size: 14px
 }
 
 .inline-style-529 {
   justify-content: flex-start;
   gap: 16px;
   padding: 12px
 }
 
 .inline-style-530 {
   display: flex;
   flex-direction: column;
   min-width: 0
 }
 
 .inline-style-531 {
   font-size: 16px;
   font-weight: 700;
   color: var(--text-main)
 }
 
 .inline-style-532 {
   font-size: 12px;
   color: var(--text-sub);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 200px
 }
 
 .inline-style-533 {
   width: 40px;
   height: 40px;
   border-radius: 8px;
   object-fit: cover;
   margin-left: auto;
   display: none
 }
 
 .inline-style-534 {
   font-size: 11px;
   color: var(--text-sub);
   font-weight: 600
 }
 
 .inline-style-535 {
   display: flex;
   gap: 8px
 }
 
 .inline-style-536 {
   padding: 0
 }
 
 .inline-style-537 {
   flex: 1
 }
 
 .inline-style-538 {
   font-size: 10px;
   opacity: .7;
   display: block;
   margin-top: 2px
 }
 
 .inline-style-539 {
   display: flex;
   align-items: center
 }
 
 .inline-style-540 {
   display: none
 }
 
 .inline-style-541 {
   padding: 0
 }
 
 .inline-style-542 {
   margin-bottom: 15px;
   color: #64748b
 }
 
 .inline-style-543 {
   background: #f8fafc;
   border-top: 1px solid #e2e8f0;
   padding: 20px 10px;
   text-align: center;
   width: 100%
 }
 
 .inline-style-544 {
   max-width: 600px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 15px
 }
 
 .inline-style-545 {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 15px
 }
 
 .inline-style-546 {
   color: #64748b;
   font-size: 11px;
   font-weight: 600;
   text-decoration: none
 }
 
 .inline-style-547 {
   color: #64748b;
   font-size: 11px;
   font-weight: 600;
   text-decoration: none
 }
 
 .inline-style-548 {
   color: #64748b;
   font-size: 11px;
   font-weight: 600;
   text-decoration: none
 }
 
 .inline-style-549 {
   color: #64748b;
   font-size: 11px;
   font-weight: 600;
   text-decoration: none
 }
 
 .inline-style-550 {
   color: #64748b;
   font-size: 11px;
   font-weight: 600;
   text-decoration: none
 }
 
 .inline-style-551 {
   color: #64748b;
   font-size: 11px;
   font-weight: 600;
   text-decoration: none
 }
 
 .inline-style-552 {
   margin-top: 8px;
   color: #cbd5e1;
   font-size: 10px
 }
 
 .ad-clip-wrapper {
   max-height: 120px;
   overflow: hidden;
   position: relative;
   display: block
 }
 
 .ad-clip-wrapper iframe {
   width: 100%;
   height: auto;
   max-height: 120px;
   display: block
 }
 
 .show-spinner {
   color: transparent !important
 }
 
 .header-icon-base .auth-loading-spinner,
 .login-btn-small .auth-loading-spinner,
 .profile-btn .auth-loading-spinner {
   position: absolute !important;
   left: 50% !important;
   top: 50% !important;
   transform: translate(-50%, -50%) !important;
   width: 18px !important;
   height: 18px !important;
   z-index: 9999 !important;
   display: inline-block !important
 }
 
 @media(min-width:1200px) {
   .h-card-wrapper {
     min-width: 200px;
     max-width: 200px
   }
 
   .h-card-wrapper .card-img-box {
     height: 120px
   }
 }
 
 @media (min-width:768px) {
   #image-edit-modal {
     padding: 20px !important
   }
 
   #image-edit-modal .modal-content.pro-editor {
     position: relative !important;
     width: 900px !important;
     height: 90vh !important;
     border-radius: 24px !important;
     margin: auto !important;
     border: 1px solid #334155
   }
 }
 
 @media(max-width:640px) {
   .nav-bar {
     gap: 10px
   }
 
   .container {
     padding: 0 4px
   }
 
   .logo {
     font-size: 20px
   }
 
   .nav-actions {
     margin-left: auto
   }
 
   .search-container {
     display: none;
     position: fixed !important;
     top: 0 !important;
     left: 0;
     right: 0;
     margin: 0 auto;
     max-width: 1400px;
     height: auto;
     background: #fff;
     z-index: 2000;
     flex-direction: column;
     align-items: stretch;
     padding: 0;
     animation: slideDown .2s cubic-bezier(.16, 1, .3, 1);
     box-shadow: 0 15px 40px -10px rgba(0, 0, 0, .25);
     border-radius: 0 0 24px 24px;
     overflow: hidden
   }
 
   .search-header-row {
     padding: 12px 16px !important;
     height: auto !important;
     min-height: 60px
   }
 
   .search-input-wrapper {
     height: 44px !important;
     padding: 0 16px !important;
     border-radius: 22px !important
   }
 
   .search-action-icon.recording {
     animation: micPulse .6s infinite alternate !important;
     background: rgba(239, 68, 68, .15) !important;
     color: #ef4444 !important;
     transform: scale(1.1)
   }
 
   .search-action-icon.recording::before {
     content: '';
     position: absolute;
     inset: -2px;
     border-radius: 50%;
     border: 2px solid rgba(239, 68, 68, .8);
     animation: searchSonarRipple 1.5s cubic-bezier(.24, 0, .38, 1) infinite;
     pointer-events: none
   }
 
   .search-action-icon.recording::after {
     content: '';
     position: absolute;
     inset: -2px;
     border-radius: 50%;
     border: 2px solid rgba(239, 68, 68, .5);
     animation: searchSonarRipple 1.5s cubic-bezier(.24, 0, .38, 1) infinite;
     animation-delay: .35s;
     pointer-events: none
   }
 
   .search-input-wrapper:has(.search-action-icon.recording) {
     border-color: #fca5a5 !important;
     background: linear-gradient(145deg, #fff, #fff1f2) !important;
     box-shadow: 0 0 0 4px rgba(239, 68, 68, .1) !important;
     transition: all .4s cubic-bezier(.4, 0, .2, 1)
   }
 
   @keyframes searchMicBreathe {
     0% {
       transform: scale(1.05);
       text-shadow: 0 0 5px rgba(239, 68, 68, .3)
     }
 
     100% {
       transform: scale(1.2);
       text-shadow: 0 0 15px rgba(239, 68, 68, .9);
       box-shadow: 0 0 20px rgba(239, 68, 68, .6), inset 0 0 10px rgba(239, 68, 68, .3) !important
     }
   }
 
   @keyframes searchSonarRipple {
     0% {
       transform: scale(1);
       opacity: 1;
       border-width: 3px
     }
 
     100% {
       transform: scale(2.8);
       opacity: 0;
       border-width: 0
     }
   }
 
   .grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 3px;
     padding: 2px 2px
   }
 
   .card-img-box {
     height: 130px
   }
 
   .card-info {
     padding: 4px
   }
 
   .price {
     font-size: 12px
   }
 
   .title {
     font-size: 10px;
     margin: 4px 0;
     line-height: 1.3
   }
 
   .meta {
     font-size: 10px;
     margin-top: 6px;
     padding-top: 6px;
     padding-right: 30px
   }
 
   .cat-badge,
   .status-badge {
     font-size: 8px;
     padding: 3px 6px
   }
 
   .like-btn {
     width: 25px;
     height: 25px;
     font-size: 14px;
     bottom: 4px;
     right: 4px
   }
 
   .deal-timer-badge {
     font-size: 9px;
     padding: 4px 8px
   }
 
   .rating-badge {
     font-size: 10px;
     padding: 2px 5px
   }
 
   .sk-card {
     height: 210px
   }
 
   .h-card-wrapper {
     min-width: 130px;
     max-width: 130px
   }
 
   .h-card-wrapper .card-img-box {
     height: 90px
   }
 
   .h-card-wrapper .title {
     font-size: 11px
   }
 
   .h-card-wrapper .price {
     font-size: 12px
   }
 
   .h-card-wrapper .card-info {
     padding: 6px
   }
 
   .modal-content {
     width: 100%;
     height: 100%;
     border-radius: 0;
     max-height: 100vh
   }
 
   .modal.full-screen-modal .modal-content.fs-content {
     width: 100%;
     height: 100%;
     border-radius: 0
   }
 
   #login-modal {
     align-items: center !important;
     justify-content: center !important
   }
 
   #login-modal .modal-content {
     width: 90% !important;
     max-width: 380px !important;
     height: auto !important;
     max-height: 85vh !important;
     border-radius: 24px !important;
     margin: auto !important;
     position: relative !important;
     bottom: auto !important
   }
 
   .v-slider-container {
     height: 40vh
   }
 
   .fs-header {
     padding: 12px
   }
 
   .thumb-overlay {
     opacity: 1;
     background: rgba(0, 0, 0, .35)
   }
 
   .thumb-action {
     width: 24px;
     height: 24px;
     font-size: 10px
   }
 
   .pro-canvas-wrap {
     padding: 5px !important;
     display: flex;
     justify-content: center;
     margin-bottom: 12px !important
   }
 
   #edit-canvas {
     max-height: 45vh;
     width: auto !important;
     max-width: 100%;
     margin: 0 auto
   }
 
   #store-modal-cover {
     height: 150px !important;
     margin: 12px auto !important;
     width: calc(100% - 24px) !important
   }
 
   .store-avatar-wrap {
     width: 64px !important;
     height: 64px !important;
     bottom: -32px !important;
     left: 16px !important
   }
 
   .store-header-info {
     padding: 14px 12px 4px 120px !important;
     margin-top: -12px !important;
     margin-left: 0 !important;
     z-index: 70 !important
   }
 
   .store-meta-container {
     padding-left: 8px !important;
     gap: 10px !important;
     z-index: 70 !important
   }
 
   #store-dynamic-actions {
     width: 100% !important;
     justify-content: flex-start !important;
     margin-top: 0 !important
   }
 
   .fab {
     bottom: 85px;
     right: 16px
   }
 }
 
 @media(max-width:480px) {
   body {
     padding-top: 60px
   }
 
   .header {
     padding: 8px 0
   }
 
   .logo {
     font-size: 18px
   }
 
   .nav-right-group {
     gap: 8px
   }
 
   #auth-section .login-btn-small,
   .header-icon-base,
   .profile-avatar,
   .profile-btn,
   .search-trigger-btn,
   .sell-btn {
     width: 40px;
     height: 40px;
     min-width: 40px;
     padding: 0 !important;
     border-radius: 50% !important;
     justify-content: center
   }
 
   .nav-icon {
     width: 18px;
     height: 18px
   }
 
   .sell-btn .nav-icon {
     width: 18px;
     height: 18px
   }
 
   .sell-text {
     display: none
   }
 
   #auth-section .login-btn-small span {
     display: none
   }
 
   #auth-section .login-btn-small svg {
     display: block;
     margin: 0
   }
 
   #auth-section .login-btn-small::after {
     content: none
   }
 
   .profile-btn {
     border: none;
     background: 0 0;
     position: relative
   }
 
   .profile-name {
     display: none
   }
 
   .profile-avatar {
     width: 36px;
     height: 36px;
     border: 1px solid var(--border)
   }
 
   .icon-btn,
   .search-trigger-btn {
     font-size: 16px
   }
 
   .header-icon-base .nav-icon,
   .search-trigger-btn .nav-icon {
     width: 24px !important;
     height: 24px !important;
     stroke-width: 2.8px !important;
     stroke: #0f172a !important
   }
 
   .header-icon-base:active,
   .search-trigger-btn:active {
     transform: scale(.92);
     background: #c7aadf
   }
 
   .search-container {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     width: auto;
     border-radius: 0 0 20px 20px
   }
 
   .search-header-row {
     padding: 8px 12px !important;
     height: 60px !important;
     gap: 8px;
     min-height: unset
   }
 
   .search-back-btn {
     width: 32px;
     height: 32px;
     font-size: 18px
   }
 
   .search-input-wrapper {
     height: 40px !important;
     padding: 0 12px !important;
     border-radius: 20px !important
   }
 
   .search-input {
     font-size: 14px
   }
 
   .card-badges {
     top: 6px;
     left: 6px;
     right: 6px;
     gap: 4px;
     flex-wrap: wrap;
     overflow: hidden
   }
 
   .cat-badge,
   .status-badge {
     font-size: 8px !important;
     padding: 2px 5px !important;
     white-space: nowrap;
     line-height: 1.2
   }
 
   .deal-timer-badge {
     font-size: 8px !important;
     padding: 4px 6px !important;
     white-space: nowrap;
     letter-spacing: 0 !important
   }
 
   .price-row {
     flex-wrap: wrap;
     gap: 3px
   }
 
   .fab-wrapper {
     bottom: 24px;
     right: 20px
   }
 
   .fab-btn-main {
     width: 58px;
     height: 58px
   }
 
   body.is-banned {
     padding-bottom: 120px !important
   }
 
   .ban-footer {
     padding: 10px
   }
 
   .ban-text {
     font-size: 12px;
     margin-bottom: 4px
   }
 
   .action-btn-sm {
     margin: 0 8px
   }
 
   .msg-actions {
     padding: 0 12px;
     width: 100%;
     justify-content: space-around
   }
 
   .dynamic-grid-2 {
     flex-direction: row;
     gap: 6px
   }
 
   .input {
     padding: 10px 8px !important;
     font-size: 13px
   }
 }
 
 @media(max-width:380px) {
   .container {
     padding: 0 6px
   }
 
   .logo {
     font-size: 16px
   }
 
   .nav-right-group {
     gap: 6px
   }
 
   #auth-section .login-btn-small,
   .header-icon-base,
   .profile-avatar,
   .profile-btn,
   .search-trigger-btn,
   .sell-btn {
     width: 38px;
     height: 38px;
     min-width: 40px
   }
 
   .nav-icon {
     width: 20px;
     height: 20px
   }
 
   .search-container {
     left: 0;
     right: 0
   }
 
   .grid {
     gap: 4px
   }
 
   .card-info {
     padding: 4px
   }
 
   .title {
     font-size: 10px;
     line-height: 1.2
   }
 
   .price {
     font-size: 12px
   }
 
   .cat-badge,
   .deal-timer-badge,
   .status-badge {
     font-size: 7px !important;
     padding: 2px 4px !important
   }
 
   .fab-wrapper {
     bottom: 20px;
     right: 16px
   }
 
   .fab-btn-main {
     width: 50px;
     height: 50px
   }
 
   .fab-icon-svg {
     width: 24px;
     height: 24px
   }
 }
 
 @media print {
   body * {
     visibility: hidden !important
   }
 
   #print-receipt-container,
   #print-receipt-container * {
     visibility: visible !important
   }
 
   #print-receipt-container {
     position: fixed !important;
     left: 0 !important;
     top: 0 !important;
     width: 80mm !important;
     margin: 0 !important;
     padding: 0 !important;
     background: #fff !important;
     min-height: 100% !important
   }
 
   #toast-container,
   .fab-wrapper,
   .header,
   .inbox-header-actions,
   .modal,
   .no-print {
     display: none !important
   }
 }
 
 @media (max-width:480px) {
   .app-container {
     font-size: 13px
   }
 
   .app-container header {
     padding: .6rem 1rem;
     flex-wrap: wrap;
     gap: .5rem
   }
 
   .app-container .logo {
     font-size: 1.2rem
   }
 
   .app-container .search-bar {
     order: 3;
     width: 100%;
     max-width: 100%;
     margin-top: 0
   }
 
   .app-container .stat-card {
     flex: 1 1 45%;
     padding: .8rem;
     min-height: 90px
   }
 
   .app-container .card-footer .btn {
     flex: 1;
     font-size: .7rem;
     padding: .3rem
   }
 
   .app-container .notif-dropdown {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
     border-radius: 0;
     max-height: 100vh;
     z-index: 2000
   }
 
   .app-container .notif-header {
     padding: 1.2rem
   }
 
   .app-container .dynamic-grid-2 {
     grid-template-columns: 1fr
   }
 
   .app-container .toast-container {
     bottom: 70px;
     left: 15px;
     right: 15px;
     width: auto
   }
 
   .app-container .toast {
     min-width: auto;
     width: 100%;
     font-size: .8rem
   }
 
   .app-container .modal-content {
     max-height: 90vh;
     border-radius: 1rem 1rem 0 0;
     position: absolute;
     bottom: 0;
     width: 100%
   }
 
   .app-container .modal {
     align-items: flex-end;
     padding: 0
   }
 }