@charset "UTF-8";
:root {
  --btn-size: 8rem;
  --extra-space: 2rem;
  --app-viewport: 400px;
  --app-width: 100%;
  --bg-primary: #f5f5f7;
  --bg-secondary: rgba(255, 255, 255, 0.85);
  --bg-tertiary: rgba(255, 255, 255, 0.6);
  --bg-gradient-start: #ffffff;
  --bg-gradient-end: #f0f0f2;
  --mesh-color-1: rgba(76, 175, 80, 0.03);
  --mesh-color-2: rgba(100, 100, 100, 0.02);
  --mesh-color-3: rgba(150, 150, 150, 0.02);
  --text-primary: #111827;
  --text-secondary: #1f2937;
  --text-tertiary: #4b5563;
  --text-quaternary: #6b7280;
  --border-primary: rgba(180, 185, 200, 0.4);
  --border-secondary: rgba(170, 175, 195, 0.5);
  --border-tertiary: rgba(190, 195, 210, 0.35);
  --border-glass: rgba(180, 185, 200, 0.3);
  --glass-refraction-top: rgba(255, 255, 255, 0.6);
  --glass-refraction-bottom: rgba(255, 255, 255, 0.15);
  --glass-ambient-glow: rgba(76, 175, 80, 0.08);
  --glass-ultra-light: rgba(230, 232, 238, 0.25);
  --glass-light: rgba(225, 228, 235, 0.40);
  --glass-medium: rgba(220, 224, 232, 0.55);
  --glass-heavy: rgba(215, 220, 228, 0.75);
  --nav-glass-medium: rgba(230, 233, 240, 0.9);
  --blur-subtle: blur(8px);
  --blur-medium: blur(16px);
  --blur-heavy: blur(24px);
  --blur-ultra: blur(40px);
  --blur-extreme: blur(60px);
  --backdrop-glass: blur(20px) saturate(180%);
  --backdrop-glass-heavy: blur(40px) saturate(180%);
  --button-bg-start: rgba(235, 238, 245, 0.75);
  --button-bg-mid: rgba(240, 242, 248, 0.9);
  --button-bg-end: rgba(235, 238, 245, 0.8);
  --button-border: rgba(180, 185, 200, 0.5);
  --nav-button-bg: var(--nav-glass-medium);
  --button-shadow-light: rgba(255, 255, 255, 0.8);
  --button-shadow-mid: rgba(174, 174, 192, 0.25);
  --button-shadow-dark: rgba(174, 174, 192, 0.35);
  --button-shadow-darker: rgba(255, 255, 255, 0.9);
  --shadow-glass-sm:
    0 1px 1px rgba(0, 0, 0, 0.02),
    0 2px 4px rgba(0, 0, 0, 0.03),
    0 4px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 var(--glass-refraction-top),
    inset 0 -1px 0 var(--glass-refraction-bottom);
  --shadow-glass-md:
    0 1px 1px rgba(0, 0, 0, 0.02),
    0 2px 4px rgba(0, 0, 0, 0.03),
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 var(--glass-refraction-top),
    inset 0 -1px 0 var(--glass-refraction-bottom);
  --shadow-glass-lg:
    0 1px 1px rgba(0, 0, 0, 0.02),
    0 2px 4px rgba(0, 0, 0, 0.03),
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.05),
    0 16px 32px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 var(--glass-refraction-top),
    inset 0 -1px 0 var(--glass-refraction-bottom);
  --shadow-glass-xl:
    0 2px 2px rgba(0, 0, 0, 0.02),
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.06),
    0 16px 32px rgba(0, 0, 0, 0.08),
    0 24px 48px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 var(--glass-refraction-top),
    inset 0 -1px 0 var(--glass-refraction-bottom);
  --shadow-glass-glow:
    0 0 20px rgba(255, 255, 255, 0.4),
    0 0 40px rgba(255, 255, 255, 0.2);
  --shadow-accent-glow:
    0 4px 15px rgba(76, 175, 80, 0.4),
    0 0 30px rgba(76, 175, 80, 0.2);
  --shadow-accent-glow-intense:
    0 8px 25px rgba(76, 175, 80, 0.5),
    0 0 40px rgba(76, 175, 80, 0.25);
  --shadow-floating:
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 8px 40px rgba(0, 0, 0, 0.04);
  --footer-gradient-start: transparent;
  --footer-gradient-mid: rgba(255, 255, 255, 0.6);
  --footer-gradient-end: rgba(255, 255, 255, 0.8);
  --footer-border: rgba(255, 255, 255, 0.4);
  --input-bg: rgba(255, 255, 255, 0.6);
  --input-focus-shadow:
    0 0 0 3px rgba(76, 175, 80, 0.15),
    0 0 20px rgba(76, 175, 80, 0.1);
  --accent-primary: #4CAF50;
  --accent-primary-rgb: 76, 175, 80;
  --accent-primary-light: rgba(76, 175, 80, 0.15);
  --accent-primary-lighter: #66bb6a;
  --accent-primary-dark: #388e3c;
  --accent-danger: #fb4268;
  --accent-danger-rgb: 251, 66, 104;
  --accent-danger-light: rgba(251, 66, 104, 0.15);
  --accent-grey: #5a5a72;
  --accent-info: #3b82f6;
  --accent-info-rgb: 59, 130, 246;
  --accent-info-light: rgba(59, 130, 246, 0.15);
  --accent-warning: #fbbf24;
  --accent-warning-rgb: 251, 191, 36;
  --accent-purple: #a855f7;
  --accent-purple-rgb: 168, 85, 247;
  --skeleton-base: rgba(200, 210, 220, 0.6);
  --skeleton-highlight: rgba(255, 255, 255, 0.9);
  --lg-bg-color: rgba(255, 255, 255, 0.85);
  --lg-highlight: rgba(255, 255, 255, 0.75);
  --lg-text: #1a1a2e;
  --lg-hover-glow: rgba(255, 255, 255, 0.5);
  --lg-red: #fb4268;
  --lg-grey: #5a5a72;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-smooth: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
  touch-action: manipulation;
  user-select: none;
  box-sizing: border-box;
  position: relative;
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

html,
body {
  height: 100%;
  min-height: 100%;
  width: 100%;
  min-width: 100%;
  display: block;
  padding: 0;
  margin: 0;
  background: none;
}

@media (max-width: 320px), (max-height: 320px) {
  html {
    font-size: 5vw;
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  background: radial-gradient(ellipse at 20% 30%, var(--mesh-color-1, rgba(76, 175, 80, 0.03)) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, var(--mesh-color-2, rgba(100, 100, 100, 0.02)) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, var(--mesh-color-3, rgba(150, 150, 150, 0.02)) 0%, transparent 50%), linear-gradient(135deg, var(--bg-gradient-start, #ffffff) 0%, var(--bg-gradient-end, #f0f0f2) 100%);
  background-attachment: fixed;
  color: var(--text-primary, #1a1a2e);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: background 0.5s ease, color 0.3s ease;
  position: relative;
  overflow: hidden;
}
body::before {
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 40%), radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
  animation: ambient-light 20s ease-in-out infinite;
  animation-play-state: paused;
  pointer-events: none;
  z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
  body::before {
    animation-play-state: running;
  }
}

h1 {
  font-size: 24px;
  margin: 0;
}

.content.is-scrolling .item,
.content.is-scrolling .list-card-button,
.content.is-scrolling .quick-upload-item,
.content.is-scrolling .receipt-item,
.content.is-scrolling .editable-field,
.content.is-scrolling .circle,
.content.is-scrolling .edit-mode-toggle,
.content.is-scrolling .list-action-btn,
.content.is-scrolling .edit-btn,
.content.is-scrolling .toggle-btn,
.content.is-scrolling .delete-btn,
.content.is-scrolling .split-btn,
.content.is-scrolling .category-chip {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: none !important;
}
.content.is-scrolling .item::after,
.content.is-scrolling .receipt-item::after,
.content.is-scrolling .editable-field::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: no-preference) {
  .active-app .pos-logo-icon::after,
  .active-app .pos-settlement-status::after,
  .active-app .pos-status-indicator,
  .active-app .scroll-indicator-arrow {
    animation-play-state: running;
  }
}
.pos-logo-icon::after {
  animation-play-state: paused;
}

.pos-settlement-status::after {
  animation-play-state: paused;
}

.pos-status-indicator {
  animation-play-state: paused;
}

.scroll-indicator-arrow {
  animation-play-state: paused;
}

.content:not(.active-app) {
  content-visibility: auto;
  contain-intrinsic-size: auto 100vh;
}

@media (hover: none) and (pointer: coarse) {
  *,
  *::before,
  *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .item,
  .receipt-item,
  .list-card-button,
  .editable-field,
  .settings-section,
  .qr-code-card,
  .feature-item {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }
  .item::after,
  .receipt-item::after,
  .card-demo::after,
  .qr-code-card::after,
  .payment-method-section::after,
  .wizard-cart-summary::after,
  .settings-section::after,
  .editable-field::after {
    animation: none !important;
    mix-blend-mode: normal !important;
  }
  .slide-icon {
    animation: none !important;
  }
  .pos-header-overlay,
  .footer {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
  }
}
@keyframes ambient-light {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(10%, 10%) rotate(180deg);
  }
}
@keyframes screenFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes screenFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes errorFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes buttonFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes iconScaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes shine {
  0%, 100% {
    transform: translate(-100%, -100%) rotate(45deg);
  }
  50% {
    transform: translate(100%, 100%) rotate(45deg);
  }
}
@keyframes badge-shine {
  0%, 100% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
}
@keyframes pulse-green {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 10px rgba(76, 255, 120, 0.8), 0 0 20px rgba(76, 255, 120, 0.4);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.9);
    box-shadow: 0 0 15px rgba(76, 255, 120, 0.9), 0 0 30px rgba(76, 255, 120, 0.5);
  }
}
@keyframes pulse {
  0%, 100% {
    border-color: #4CAF50;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  }
  50% {
    border-color: #81C784;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
  }
}
@keyframes iconPulse {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}
@keyframes menuItem1 {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, -120px);
    opacity: 1;
  }
}
@keyframes menuItem2 {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(104px, -120px);
    opacity: 1;
  }
}
@keyframes menuItem3 {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(208px, -120px);
    opacity: 1;
  }
}
@keyframes menuItem4 {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, -224px);
    opacity: 1;
  }
}
@keyframes menuItem5 {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(104px, -224px);
    opacity: 1;
  }
}
@keyframes menuItem6 {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, -328px);
    opacity: 1;
  }
}
@keyframes menuItem1Right {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, -120px);
    opacity: 1;
  }
}
@keyframes menuItem2Right {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(-104px, -120px);
    opacity: 1;
  }
}
@keyframes menuItem3Right {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(-208px, -120px);
    opacity: 1;
  }
}
@keyframes menuItem4Right {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, -224px);
    opacity: 1;
  }
}
@keyframes menuItem5Right {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(-104px, -224px);
    opacity: 1;
  }
}
@keyframes menuItem6Right {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, -328px);
    opacity: 1;
  }
}
@keyframes contextBtn1 {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(104px, 0px);
    opacity: 0.9;
  }
}
@keyframes contextBtn2 {
  0% {
    transform: translate(104px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(208px, 0px);
    opacity: 0.9;
  }
}
@keyframes contextBtn1Right {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(-104px, 0px);
    opacity: 0.9;
  }
}
@keyframes contextBtn2Right {
  0% {
    transform: translate(-104px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(-208px, 0px);
    opacity: 0.9;
  }
}
@keyframes contextBtn2Expand {
  0% {
    width: 96px;
  }
  100% {
    width: 202px;
  }
}
@keyframes contextBtn2ExpandRight {
  0% {
    width: 96px;
  }
  100% {
    width: 202px;
  }
}
@keyframes paperPlaneSend {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  70% {
    transform: translate(40px, -10px) rotate(15deg);
    opacity: 0.7;
  }
  100% {
    transform: translate(80px, -20px) rotate(25deg);
    opacity: 0;
  }
}
@keyframes paperPlaneReset {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
@keyframes paperPlaneContinuous {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  40% {
    transform: translate(30px, -8px) rotate(12deg);
    opacity: 0.8;
  }
  60% {
    transform: translate(50px, -15px) rotate(20deg);
    opacity: 0;
  }
  61% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
@keyframes fadeInContent {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes pageBarSlideUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes scrollArrowWave {
  0%, 100% {
    transform: translateY(0) scaleY(1);
  }
  35% {
    transform: translateY(-6px) scaleY(1.15);
  }
  55% {
    transform: translateY(-1px) scaleY(0.95);
  }
}
@keyframes scrollArrowDownFade {
  0%, 20% {
    opacity: 0;
    transform: translateY(-4px);
  }
  35%, 55% {
    opacity: 0.9;
    transform: translateY(0);
  }
  70%, 100% {
    opacity: 0;
    transform: translateY(2px);
  }
}
@keyframes scrollIndicatorFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes scrollIndicatorFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.screen-fade-out {
  animation: screenFadeOut 0.1s ease-out forwards;
}

.screen-fade-in {
  animation: screenFadeIn 0.15s ease-in forwards;
}

.content {
  transition: opacity 0.15s ease;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.skeleton-shimmer {
  background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes qrRevealFromCenter {
  0% {
    -webkit-clip-path: circle(0% at 50% 50%);
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    -webkit-clip-path: circle(75% at 50% 50%);
    clip-path: circle(75% at 50% 50%);
    opacity: 1;
  }
}
@keyframes qrModuleFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes qrSimpleFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes qrPulseComplete {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0), inset 0 0 0 0 rgba(76, 175, 80, 0);
  }
  20% {
    box-shadow: 0 0 20px 6px rgba(76, 175, 80, 0.5), inset 0 0 12px 3px rgba(76, 175, 80, 0.15);
  }
  40% {
    box-shadow: 0 0 8px 2px rgba(76, 175, 80, 0.2), inset 0 0 4px 1px rgba(76, 175, 80, 0.05);
  }
  60% {
    box-shadow: 0 0 14px 4px rgba(76, 175, 80, 0.35), inset 0 0 8px 2px rgba(76, 175, 80, 0.1);
  }
  80% {
    box-shadow: 0 0 6px 2px rgba(76, 175, 80, 0.15), inset 0 0 3px 1px rgba(76, 175, 80, 0.04);
  }
  100% {
    box-shadow: 0 0 8px 2px rgba(76, 175, 80, 0.12), inset 0 0 4px 1px rgba(76, 175, 80, 0.03);
  }
}
@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}
@keyframes toastProgress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
@keyframes floatGlass {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.4), 0 0 20px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.2);
  }
  50% {
    box-shadow: 0 0 20px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.6), 0 0 40px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.3);
  }
}
@keyframes neonGlowPulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.5), 0 0 20px rgba(56, 189, 248, 0.3);
  }
  50% {
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.7), 0 0 50px rgba(56, 189, 248, 0.4);
  }
}
@keyframes holographicShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes cardLift {
  from {
    transform: translateY(0) scale(1);
    box-shadow: var(--shadow-glass-md);
  }
  to {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--shadow-glass-xl);
  }
}
@keyframes refractionShimmer {
  0%, 100% {
    opacity: 0.4;
    transform: translateX(-100%);
  }
  50% {
    opacity: 0.8;
    transform: translateX(100%);
  }
}
@keyframes statusBreathe {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.95);
    opacity: 0.85;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.empty-state-button,
.generate-qr-button,
.start-scan-button,
.confirm-payment-button {
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent-primary, #4CAF50) 0%, var(--accent-primary-lighter, #66bb6a) 50%, var(--accent-primary, #4CAF50) 100%);
  background-size: 200% 200%;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-accent-glow, 0 4px 15px rgba(76, 175, 80, 0.4)), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), background-position var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1));
}
.empty-state-button:hover,
.generate-qr-button:hover,
.start-scan-button:hover,
.confirm-payment-button:hover {
  background-position: 100% 100%;
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent-glow-intense, 0 8px 25px rgba(76, 175, 80, 0.5)), 0 0 40px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.empty-state-button:active,
.generate-qr-button:active,
.start-scan-button:active,
.confirm-payment-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.empty-state-button:disabled,
.generate-qr-button:disabled,
.start-scan-button:disabled,
.confirm-payment-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.error-state-button,
.reset-button,
.cancel-payment-button,
.stop-scan-button {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--text-secondary, #606060);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.error-state-button:hover:not(:disabled),
.reset-button:hover:not(:disabled),
.cancel-payment-button:hover:not(:disabled),
.stop-scan-button:hover:not(:disabled) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 252, 255, 0.9) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.error-state-button:active:not(:disabled),
.reset-button:active:not(:disabled),
.cancel-payment-button:active:not(:disabled),
.stop-scan-button:active:not(:disabled) {
  transform: scale(0.98);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .error-state-button,
  :root:not([data-theme]) .reset-button,
  :root:not([data-theme]) .cancel-payment-button,
  :root:not([data-theme]) .stop-scan-button {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  :root:not([data-theme]) .error-state-button:hover:not(:disabled),
  :root:not([data-theme]) .reset-button:hover:not(:disabled),
  :root:not([data-theme]) .cancel-payment-button:hover:not(:disabled),
  :root:not([data-theme]) .stop-scan-button:hover:not(:disabled) {
    background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}
[data-theme=dark] .error-state-button,
[data-theme=dark] .reset-button,
[data-theme=dark] .cancel-payment-button,
[data-theme=dark] .stop-scan-button {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .error-state-button:hover:not(:disabled),
[data-theme=dark] .reset-button:hover:not(:disabled),
[data-theme=dark] .cancel-payment-button:hover:not(:disabled),
[data-theme=dark] .stop-scan-button:hover:not(:disabled) {
  background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  font-size: 32px;
  font-weight: 600;
  color: var(--text-secondary, #2d2d44);
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: var(--shadow-glass-md), 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
}
.circle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  pointer-events: none;
  z-index: 1;
}
.circle:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.05);
  border-color: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.3);
  box-shadow: var(--shadow-glass-lg), 0 0 20px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.15);
}
.circle:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  background: linear-gradient(145deg, rgba(235, 240, 245, 0.9) 0%, rgba(228, 233, 238, 0.8) 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), inset 0 2px 4px rgba(0, 0, 0, 0.04);
}
.circle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .circle {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  :root:not([data-theme]) .circle::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  }
  :root:not([data-theme]) .circle:hover:not(:disabled) {
    border-color: rgba(56, 189, 248, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(56, 189, 248, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  :root:not([data-theme]) .circle:active:not(:disabled) {
    background: linear-gradient(145deg, rgba(40, 40, 50, 0.9) 0%, rgba(30, 30, 40, 0.8) 100%);
  }
}
[data-theme=dark] .circle {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .circle::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}
[data-theme=dark] .circle:hover:not(:disabled) {
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(56, 189, 248, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
[data-theme=dark] .circle:active:not(:disabled) {
  background: linear-gradient(145deg, rgba(40, 40, 50, 0.9) 0%, rgba(30, 30, 40, 0.8) 100%);
}

.add-photo-button {
  width: 100%;
  max-width: 280px;
  height: 64px;
  min-height: 64px;
  padding: 0 20px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border: 1px solid #8f9092;
  border-radius: 12px;
  box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1, 0 -6px 4px #fefefe, inset 0 0 3px 0 #cecfd1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  touch-action: manipulation;
  font-size: 16px;
  font-weight: 600;
  color: #272727;
}
.add-photo-button i {
  font-size: 18px;
  color: #5b5b5b;
}
.add-photo-button:active {
  transform: scale(0.98);
  box-shadow: 0 2px 2px 0px #d6d7d9, inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.add-photo-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.remove-button {
  position: absolute;
  top: 4px;
  right: 4px;
  background-color: #fb4268;
  color: #ffffff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.15s ease;
  touch-action: manipulation;
}
.remove-button:active {
  transform: scale(0.9);
  background-color: #e63958;
}

.back-button {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--text-secondary, #606060);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.back-button:hover:not(:disabled) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 252, 255, 0.9) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.back-button:active:not(:disabled) {
  transform: scale(0.98);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .back-button {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  :root:not([data-theme]) .back-button:hover:not(:disabled) {
    background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}
[data-theme=dark] .back-button {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .back-button:hover:not(:disabled) {
  background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.back-button i {
  font-size: 14px;
}

.wizard-button {
  padding: 14px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  margin: 8px 4px;
}
.wizard-button.primary {
  background: linear-gradient(135deg, var(--accent-primary, #4CAF50) 0%, #43a047 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}
.wizard-button.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
}
.wizard-button.primary:active {
  transform: translateY(0);
}
.wizard-button.secondary {
  background: var(--bg-secondary, #ffffff);
  color: var(--text-secondary, #606060);
  border: 1px solid var(--border-primary, #e4e4e4);
}
.wizard-button.secondary:hover {
  background: var(--bg-tertiary, #f7f7f7);
}
.wizard-button.secondary:active {
  background: var(--bg-secondary, #ffffff);
}

.tip-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tip-buttons .tip-btn {
  flex: 1;
  min-width: 60px;
  padding: 12px 8px;
  background: var(--glass-light, rgba(255, 255, 255, 0.85));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-primary, #e4e4e4);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  cursor: pointer;
  transition: all 0.2s ease;
}
.tip-buttons .tip-btn:hover {
  background: var(--glass-medium, rgba(255, 255, 255, 0.9));
  border-color: var(--accent-primary, #4CAF50);
}
.tip-buttons .tip-btn.active {
  background: var(--accent-primary, #4CAF50);
  border-color: var(--accent-primary, #4CAF50);
  color: #ffffff;
}
.tip-buttons .tip-btn:active {
  transform: scale(0.98);
}

.split-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}
.split-controls .split-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  font-size: 32px;
  font-weight: 600;
  color: var(--text-secondary, #2d2d44);
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: var(--shadow-glass-md), 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
}
.split-controls .split-btn::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  pointer-events: none;
  z-index: 1;
}
.split-controls .split-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.05);
  border-color: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.3);
  box-shadow: var(--shadow-glass-lg), 0 0 20px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.15);
}
.split-controls .split-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  background: linear-gradient(145deg, rgba(235, 240, 245, 0.9) 0%, rgba(228, 233, 238, 0.8) 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), inset 0 2px 4px rgba(0, 0, 0, 0.04);
}
.split-controls .split-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .split-controls .split-btn {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  :root:not([data-theme]) .split-controls .split-btn::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  }
  :root:not([data-theme]) .split-controls .split-btn:hover:not(:disabled) {
    border-color: rgba(56, 189, 248, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(56, 189, 248, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  :root:not([data-theme]) .split-controls .split-btn:active:not(:disabled) {
    background: linear-gradient(145deg, rgba(40, 40, 50, 0.9) 0%, rgba(30, 30, 40, 0.8) 100%);
  }
}
[data-theme=dark] .split-controls .split-btn {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .split-controls .split-btn::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}
[data-theme=dark] .split-controls .split-btn:hover:not(:disabled) {
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(56, 189, 248, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
[data-theme=dark] .split-controls .split-btn:active:not(:disabled) {
  background: linear-gradient(145deg, rgba(40, 40, 50, 0.9) 0%, rgba(30, 30, 40, 0.8) 100%);
}
.split-controls .split-btn {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
}
.split-controls .split-count {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary, #272727);
  min-width: 40px;
  text-align: center;
}
.split-controls .split-people-label {
  font-size: 16px;
  color: var(--text-tertiary, #888);
}

.action-btn-small {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.75) 0%, rgba(248, 250, 252, 0.65) 100%);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-secondary, #2d2d44);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: var(--shadow-glass-md), 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  flex-shrink: 0;
}
.action-btn-small i {
  font-size: 16px;
}
.action-btn-small:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.08);
  border-color: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.25);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.action-btn-small:active:not(:disabled) {
  transform: translateY(0) scale(0.96);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 3px rgba(0, 0, 0, 0.04);
}
.action-btn-small:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.action-btn-small.accent-success {
  background: linear-gradient(145deg, rgba(74, 222, 128, 0.2) 0%, rgba(74, 222, 128, 0.1) 100%);
  border-color: rgba(74, 222, 128, 0.3);
  color: var(--accent-success, #22c55e);
}
.action-btn-small.accent-success:hover:not(:disabled) {
  background: linear-gradient(145deg, rgba(74, 222, 128, 0.3) 0%, rgba(74, 222, 128, 0.15) 100%);
  box-shadow: 0 3px 10px rgba(74, 222, 128, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.action-btn-small.accent-danger {
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.08) 100%);
  border-color: rgba(239, 68, 68, 0.25);
  color: var(--accent-error, #ef4444);
}
.action-btn-small.accent-danger:hover:not(:disabled) {
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.25) 0%, rgba(239, 68, 68, 0.12) 100%);
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .action-btn-small {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.75) 0%, rgba(40, 40, 50, 0.65) 100%);
    border-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  :root:not([data-theme]) .action-btn-small:hover:not(:disabled) {
    border-color: rgba(56, 189, 248, 0.25);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25), 0 0 12px rgba(56, 189, 248, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}
[data-theme=dark] .action-btn-small {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.75) 0%, rgba(40, 40, 50, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .action-btn-small:hover:not(:disabled) {
  border-color: rgba(56, 189, 248, 0.25);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25), 0 0 12px rgba(56, 189, 248, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.form-group {
  padding: 12px 16px;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-primary);
  flex-shrink: 0;
}
.form-group .form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.form-group .form-label .required-indicator {
  color: var(--accent-danger);
  margin-left: 2px;
}
.form-group .form-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  color: var(--text-primary, #272727);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.02);
  transition: border-color 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.form-group .form-input:focus {
  outline: none;
  border-color: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.5);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 252, 255, 0.9) 100%);
  box-shadow: var(--input-focus-shadow), 0 4px 12px rgba(0, 0, 0, 0.08);
}
.form-group .form-input:hover:not(:focus):not(:disabled) {
  border-color: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.form-group .form-input::placeholder {
  color: var(--text-quaternary, #888888);
}
.form-group .form-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .form-group .form-input {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  :root:not([data-theme]) .form-group .form-input:focus {
    background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
    border-color: rgba(var(--accent-primary-rgb, 102, 187, 106), 0.4);
  }
  :root:not([data-theme]) .form-group .form-input:hover:not(:focus):not(:disabled) {
    border-color: rgba(255, 255, 255, 0.15);
  }
  :root:not([data-theme]) .form-group .form-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
  }
}
[data-theme=dark] .form-group .form-input {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .form-group .form-input:focus {
  background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
  border-color: rgba(var(--accent-primary-rgb, 102, 187, 106), 0.4);
}
[data-theme=dark] .form-group .form-input:hover:not(:focus):not(:disabled) {
  border-color: rgba(255, 255, 255, 0.15);
}
[data-theme=dark] .form-group .form-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.form-group input, .form-group select {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  color: var(--text-primary, #272727);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.02);
  transition: border-color 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.form-group input:focus, .form-group select:focus {
  outline: none;
  border-color: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.5);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 252, 255, 0.9) 100%);
  box-shadow: var(--input-focus-shadow), 0 4px 12px rgba(0, 0, 0, 0.08);
}
.form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled) {
  border-color: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.form-group input::placeholder, .form-group select::placeholder {
  color: var(--text-quaternary, #888888);
}
.form-group input:disabled, .form-group select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .form-group input, :root:not([data-theme]) .form-group select {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  :root:not([data-theme]) .form-group input:focus, :root:not([data-theme]) .form-group select:focus {
    background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
    border-color: rgba(var(--accent-primary-rgb, 102, 187, 106), 0.4);
  }
  :root:not([data-theme]) .form-group input:hover:not(:focus):not(:disabled), :root:not([data-theme]) .form-group select:hover:not(:focus):not(:disabled) {
    border-color: rgba(255, 255, 255, 0.15);
  }
  :root:not([data-theme]) .form-group input::placeholder, :root:not([data-theme]) .form-group select::placeholder {
    color: rgba(255, 255, 255, 0.4);
  }
}
[data-theme=dark] .form-group input, [data-theme=dark] .form-group select {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .form-group input:focus, [data-theme=dark] .form-group select:focus {
  background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
  border-color: rgba(var(--accent-primary-rgb, 102, 187, 106), 0.4);
}
[data-theme=dark] .form-group input:hover:not(:focus):not(:disabled), [data-theme=dark] .form-group select:hover:not(:focus):not(:disabled) {
  border-color: rgba(255, 255, 255, 0.15);
}
[data-theme=dark] .form-group input::placeholder, [data-theme=dark] .form-group select::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.form-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.editable-field {
  width: 100%;
  padding: 16px;
  background: var(--bg-tertiary, #f7f7f7);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.editable-field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #272727);
  margin: 0;
}
.editable-field .org-input,
.editable-field .user-input,
.editable-field .user-profile-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  color: var(--text-primary, #272727);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.02);
  transition: border-color 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.editable-field .org-input:focus,
.editable-field .user-input:focus,
.editable-field .user-profile-input:focus {
  outline: none;
  border-color: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.5);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 252, 255, 0.9) 100%);
  box-shadow: var(--input-focus-shadow), 0 4px 12px rgba(0, 0, 0, 0.08);
}
.editable-field .org-input:hover:not(:focus):not(:disabled),
.editable-field .user-input:hover:not(:focus):not(:disabled),
.editable-field .user-profile-input:hover:not(:focus):not(:disabled) {
  border-color: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.editable-field .org-input::placeholder,
.editable-field .user-input::placeholder,
.editable-field .user-profile-input::placeholder {
  color: var(--text-quaternary, #888888);
}
.editable-field .org-input:disabled,
.editable-field .user-input:disabled,
.editable-field .user-profile-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .editable-field .org-input,
  :root:not([data-theme]) .editable-field .user-input,
  :root:not([data-theme]) .editable-field .user-profile-input {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  :root:not([data-theme]) .editable-field .org-input:focus,
  :root:not([data-theme]) .editable-field .user-input:focus,
  :root:not([data-theme]) .editable-field .user-profile-input:focus {
    background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
    border-color: rgba(var(--accent-primary-rgb, 102, 187, 106), 0.4);
  }
  :root:not([data-theme]) .editable-field .org-input:hover:not(:focus):not(:disabled),
  :root:not([data-theme]) .editable-field .user-input:hover:not(:focus):not(:disabled),
  :root:not([data-theme]) .editable-field .user-profile-input:hover:not(:focus):not(:disabled) {
    border-color: rgba(255, 255, 255, 0.15);
  }
  :root:not([data-theme]) .editable-field .org-input::placeholder,
  :root:not([data-theme]) .editable-field .user-input::placeholder,
  :root:not([data-theme]) .editable-field .user-profile-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
  }
}
[data-theme=dark] .editable-field .org-input,
[data-theme=dark] .editable-field .user-input,
[data-theme=dark] .editable-field .user-profile-input {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .editable-field .org-input:focus,
[data-theme=dark] .editable-field .user-input:focus,
[data-theme=dark] .editable-field .user-profile-input:focus {
  background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
  border-color: rgba(var(--accent-primary-rgb, 102, 187, 106), 0.4);
}
[data-theme=dark] .editable-field .org-input:hover:not(:focus):not(:disabled),
[data-theme=dark] .editable-field .user-input:hover:not(:focus):not(:disabled),
[data-theme=dark] .editable-field .user-profile-input:hover:not(:focus):not(:disabled) {
  border-color: rgba(255, 255, 255, 0.15);
}
[data-theme=dark] .editable-field .org-input::placeholder,
[data-theme=dark] .editable-field .user-input::placeholder,
[data-theme=dark] .editable-field .user-profile-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.save-btn {
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent-primary, #4CAF50) 0%, var(--accent-primary-lighter, #66bb6a) 50%, var(--accent-primary, #4CAF50) 100%);
  background-size: 200% 200%;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-accent-glow, 0 4px 15px rgba(76, 175, 80, 0.4)), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), background-position var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1));
}
.save-btn:hover {
  background-position: 100% 100%;
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent-glow-intense, 0 8px 25px rgba(76, 175, 80, 0.5)), 0 0 40px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.save-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.save-btn {
  width: 100%;
  max-width: 320px;
  margin: 24px auto;
  padding: 16px 32px;
  font-size: 17px;
  border-radius: 16px;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  min-height: 72px;
  background: linear-gradient(135deg, var(--glass-light), var(--glass-ultra-light));
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  border-radius: 12px;
  border: none;
  position: relative;
  box-shadow: var(--shadow-glass-sm);
  transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), background var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1));
}
.item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-refraction-top, rgba(255, 255, 255, 0.5)), transparent);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}
.item:hover {
  transform: translateY(-2px) translateX(4px);
  background: linear-gradient(135deg, var(--glass-medium), var(--glass-light));
  box-shadow: var(--shadow-glass-md);
}
.item:hover::before {
  background: linear-gradient(90deg, transparent, var(--glass-refraction-top, rgba(255, 255, 255, 0.7)), transparent);
}
.item.has-quantity {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.12) 0%, rgba(76, 175, 80, 0.06) 100%);
  border-left: 3px solid var(--accent-primary, #4CAF50);
  box-shadow: inset 4px 0 20px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.1), var(--shadow-glass-sm);
}

.is-scrolling .item {
  pointer-events: none !important;
}

.item .item-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.item .item-text .title {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary, #272727);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item .item-text .description {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary, #606060);
  margin: 0;
}
.item .item-text .subtitle {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-tertiary, #888888);
  margin: 0;
}
.item .item-text .price {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-secondary, #606060);
  margin: 0;
}
.item .controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.item .quantity {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  width: 64px;
  height: 64px;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary, #272727);
}

.list-header-actions {
  display: none !important;
  background: transparent;
  border: none;
  box-shadow: none;
  min-height: auto;
}
.list-header-actions .list-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 100%);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.list-header-actions .list-action-btn i {
  font-size: 14px;
  color: var(--text-secondary, #606060);
  transition: color 0.2s ease;
}
.list-header-actions .list-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.list-header-actions .list-action-btn:active {
  transform: translateY(0) scale(0.97);
}
.list-header-actions .list-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.list-header-actions .edit-list-btn:hover i {
  color: var(--accent-info, #38bdf8);
}
.list-header-actions .delete-list-btn:hover {
  background: linear-gradient(145deg, rgba(251, 66, 104, 0.15) 0%, rgba(251, 66, 104, 0.08) 100%);
}
.list-header-actions .delete-list-btn:hover i {
  color: var(--accent-danger, #fb4268);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .list-header-actions .list-action-btn {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  :root:not([data-theme]) .list-header-actions .list-action-btn i {
    color: rgba(255, 255, 255, 0.7);
  }
  :root:not([data-theme]) .list-header-actions .list-action-btn:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  :root:not([data-theme]) .list-header-actions .edit-list-btn:hover i {
    color: var(--accent-info, #22d3ee);
  }
  :root:not([data-theme]) .list-header-actions .delete-list-btn:hover {
    background: linear-gradient(145deg, rgba(251, 66, 104, 0.2) 0%, rgba(251, 66, 104, 0.1) 100%);
  }
  :root:not([data-theme]) .list-header-actions .delete-list-btn:hover i {
    color: #ff6b8a;
  }
}
[data-theme=dark] .list-header-actions .list-action-btn {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .list-header-actions .list-action-btn i {
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .list-header-actions .list-action-btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
[data-theme=dark] .list-header-actions .edit-list-btn:hover i {
  color: var(--accent-info, #22d3ee);
}
[data-theme=dark] .list-header-actions .delete-list-btn:hover {
  background: linear-gradient(145deg, rgba(251, 66, 104, 0.2) 0%, rgba(251, 66, 104, 0.1) 100%);
}
[data-theme=dark] .list-header-actions .delete-list-btn:hover i {
  color: #ff6b8a;
}

.list-card-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  min-height: 72px;
  background: linear-gradient(135deg, var(--glass-light), var(--glass-ultra-light));
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  border-radius: 12px;
  border: none;
  position: relative;
  box-shadow: var(--shadow-glass-sm);
  transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), background var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1));
}
.list-card-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-refraction-top, rgba(255, 255, 255, 0.5)), transparent);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}
.list-card-button:hover {
  transform: translateY(-2px) translateX(4px);
  background: linear-gradient(135deg, var(--glass-medium), var(--glass-light));
  box-shadow: var(--shadow-glass-md);
}
.list-card-button:hover::before {
  background: linear-gradient(90deg, transparent, var(--glass-refraction-top, rgba(255, 255, 255, 0.7)), transparent);
}
.list-card-button {
  padding: 14px 18px;
  min-height: 72px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.list-card-button .item-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.list-card-button .item-text .list-icon {
  font-size: 18px;
  color: var(--accent-primary, #38bdf8);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.list-card-button .item-text .title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #272727);
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-card-button .item-text .list-arrow {
  font-size: 14px;
  color: var(--text-quaternary, #aaa);
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}
.list-card-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.list-card-button:hover .item-text .list-arrow {
  color: var(--accent-primary, #38bdf8);
  transform: translateX(2px);
}
.list-card-button:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), inset 0 1px 3px rgba(0, 0, 0, 0.03);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .list-card-button .item-text .list-icon {
    color: var(--accent-info, #22d3ee);
  }
  :root:not([data-theme]) .list-card-button .item-text .title {
    color: #ffffff;
  }
  :root:not([data-theme]) .list-card-button .item-text .list-arrow {
    color: rgba(255, 255, 255, 0.4);
  }
  :root:not([data-theme]) .list-card-button:hover .item-text .list-arrow {
    color: var(--accent-info, #22d3ee);
  }
}
[data-theme=dark] .list-card-button .item-text .list-icon {
  color: var(--accent-info, #22d3ee);
}
[data-theme=dark] .list-card-button .item-text .title {
  color: #ffffff;
}
[data-theme=dark] .list-card-button .item-text .list-arrow {
  color: rgba(255, 255, 255, 0.4);
}
[data-theme=dark] .list-card-button:hover .item-text .list-arrow {
  color: var(--accent-info, #22d3ee);
}
.list-card-button.expanded {
  min-height: auto !important;
  cursor: default;
  display: block !important;
}
.list-card-button.expanded .item-text {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.list-card-button.expanded .item-text .list-arrow {
  display: none !important;
}
.list-card-button.expanded .item-text .list-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  color: var(--accent-info, #22d3ee);
}
.list-card-button.expanded .item-text .title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
}
.list-card-button.expanded .list-edit-controls {
  display: flex !important;
}
.list-card-button.expanded:hover {
  transform: none;
}
.list-card-button .list-edit-controls {
  display: none;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.archived-lists-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  min-height: 72px;
  background: linear-gradient(135deg, var(--glass-light), var(--glass-ultra-light));
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  border-radius: 12px;
  border: none;
  position: relative;
  box-shadow: var(--shadow-glass-sm);
  transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), background var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1));
}
.archived-lists-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-refraction-top, rgba(255, 255, 255, 0.5)), transparent);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}
.archived-lists-btn:hover {
  transform: translateY(-2px) translateX(4px);
  background: linear-gradient(135deg, var(--glass-medium), var(--glass-light));
  box-shadow: var(--shadow-glass-md);
}
.archived-lists-btn:hover::before {
  background: linear-gradient(90deg, transparent, var(--glass-refraction-top, rgba(255, 255, 255, 0.7)), transparent);
}
.archived-lists-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 32px);
  margin: 16px auto;
  padding: 14px 18px;
  min-height: 56px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.1) 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.archived-lists-btn.hidden {
  display: none;
}
.archived-lists-btn i:first-child {
  font-size: 18px;
  color: #f59e0b;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.archived-lists-btn span {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #f59e0b;
}
.archived-lists-btn i:last-child {
  font-size: 14px;
  color: rgba(245, 158, 11, 0.6);
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}
.archived-lists-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.5);
}
.archived-lists-btn:hover i:last-child {
  color: #f59e0b;
  transform: translateX(2px);
}
.archived-lists-btn:active {
  transform: translateY(0) scale(0.99);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .archived-lists-btn {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(217, 119, 6, 0.08) 100%);
    border-color: rgba(245, 158, 11, 0.25);
  }
  :root:not([data-theme]) .archived-lists-btn span {
    color: #fbbf24;
  }
  :root:not([data-theme]) .archived-lists-btn i:first-child {
    color: #fbbf24;
  }
}
[data-theme=dark] .archived-lists-btn {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(217, 119, 6, 0.08) 100%);
  border-color: rgba(245, 158, 11, 0.25);
}
[data-theme=dark] .archived-lists-btn span {
  color: #fbbf24;
}
[data-theme=dark] .archived-lists-btn i:first-child {
  color: #fbbf24;
}

.lists-edit-mode-item {
  display: none !important;
}

.list-edit-controls .list-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.list-edit-controls .list-toggle-wrapper .toggle-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #666);
}
.list-edit-controls .list-name-wrapper .list-name-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #272727);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition: all 0.2s ease;
}
.list-edit-controls .list-name-wrapper .list-name-input:focus {
  outline: none;
  border-color: var(--accent-primary, #38bdf8);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}
.list-edit-controls .list-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.list-edit-controls .list-edit-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
}
.list-edit-controls .list-edit-actions button i {
  font-size: 14px;
  color: var(--text-tertiary, #888);
}
.list-edit-controls .list-edit-actions button:hover {
  background: rgb(255, 255, 255);
}
.list-edit-controls .list-edit-actions .list-save-btn:hover {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.1);
}
.list-edit-controls .list-edit-actions .list-save-btn:hover i {
  color: #22c55e;
}
.list-edit-controls .list-edit-actions .list-delete-btn:hover {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.1);
}
.list-edit-controls .list-edit-actions .list-delete-btn:hover i {
  color: #ef4444;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .list-edit-controls {
    border-top-color: rgba(255, 255, 255, 0.1);
  }
  :root:not([data-theme]) .list-edit-controls .list-toggle-wrapper .toggle-label {
    color: rgba(255, 255, 255, 0.7);
  }
  :root:not([data-theme]) .list-edit-controls .list-name-wrapper .list-name-input {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
  }
  :root:not([data-theme]) .list-edit-controls .list-name-wrapper .list-name-input:focus {
    border-color: var(--accent-info, #22d3ee);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
  }
  :root:not([data-theme]) .list-edit-controls .list-edit-actions button {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
  }
  :root:not([data-theme]) .list-edit-controls .list-edit-actions button i {
    color: rgba(255, 255, 255, 0.6);
  }
  :root:not([data-theme]) .list-edit-controls .list-edit-actions button:hover {
    background: rgba(0, 0, 0, 0.4);
  }
}
[data-theme=dark] .list-edit-controls {
  border-top-color: rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .list-edit-controls .list-toggle-wrapper .toggle-label {
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .list-edit-controls .list-name-wrapper .list-name-input {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
[data-theme=dark] .list-edit-controls .list-name-wrapper .list-name-input:focus {
  border-color: var(--accent-info, #22d3ee);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}
[data-theme=dark] .list-edit-controls .list-edit-actions button {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .list-edit-controls .list-edit-actions button i {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .list-edit-controls .list-edit-actions button:hover {
  background: rgba(0, 0, 0, 0.4);
}

.list-active-toggle, .role-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.list-active-toggle .toggle-track, .role-toggle .toggle-track {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  transition: background 0.2s ease;
  position: relative;
}
.list-active-toggle .toggle-track .toggle-thumb, .role-toggle .toggle-track .toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}
.list-active-toggle.active .toggle-track, .active.role-toggle .toggle-track {
  background: var(--accent-primary, #38bdf8);
}
.list-active-toggle.active .toggle-track .toggle-thumb, .active.role-toggle .toggle-track .toggle-thumb {
  transform: translateX(20px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .list-active-toggle .toggle-track, :root:not([data-theme]) .role-toggle .toggle-track {
    background: rgba(255, 255, 255, 0.2);
  }
  :root:not([data-theme]) .list-active-toggle.active .toggle-track, :root:not([data-theme]) .active.role-toggle .toggle-track {
    background: var(--accent-info, #22d3ee);
  }
}
[data-theme=dark] .list-active-toggle .toggle-track, [data-theme=dark] .role-toggle .toggle-track {
  background: rgba(255, 255, 255, 0.2);
}
[data-theme=dark] .list-active-toggle.active .toggle-track, [data-theme=dark] .active.role-toggle .toggle-track {
  background: var(--accent-info, #22d3ee);
}

.quick-upload-item, .quick-add-user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  min-height: 72px;
  background: linear-gradient(135deg, var(--glass-light), var(--glass-ultra-light));
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  border-radius: 12px;
  border: none;
  position: relative;
  box-shadow: var(--shadow-glass-sm);
  transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), background var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1));
}
.quick-upload-item::before, .quick-add-user-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-refraction-top, rgba(255, 255, 255, 0.5)), transparent);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}
.quick-upload-item:hover, .quick-add-user-item:hover {
  transform: translateY(-2px) translateX(4px);
  background: linear-gradient(135deg, var(--glass-medium), var(--glass-light));
  box-shadow: var(--shadow-glass-md);
}
.quick-upload-item:hover::before, .quick-add-user-item:hover::before {
  background: linear-gradient(90deg, transparent, var(--glass-refraction-top, rgba(255, 255, 255, 0.7)), transparent);
}
.quick-upload-item, .quick-add-user-item {
  padding: 14px 18px;
  min-height: 72px;
  gap: 8px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 8px 32px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(56, 189, 248, 0.08);
}
.quick-upload-item .quick-upload-camera-btn, .quick-upload-item .quick-add-user-qr-btn,
.quick-upload-item .quick-add-user-email-btn, .quick-add-user-item .quick-upload-camera-btn, .quick-add-user-item .quick-add-user-qr-btn,
.quick-add-user-item .quick-add-user-email-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-primary, #38bdf8) 0%, var(--accent-info, #22d3ee) 100%);
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.35), 0 8px 24px rgba(56, 189, 248, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.quick-upload-item .quick-upload-camera-btn::before, .quick-upload-item .quick-add-user-qr-btn::before,
.quick-upload-item .quick-add-user-email-btn::before, .quick-add-user-item .quick-upload-camera-btn::before, .quick-add-user-item .quick-add-user-qr-btn::before,
.quick-add-user-item .quick-add-user-email-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.1) 60%, transparent 100%);
  border-radius: 16px 16px 50% 50%;
  pointer-events: none;
}
.quick-upload-item .quick-upload-camera-btn::after, .quick-upload-item .quick-add-user-qr-btn::after,
.quick-upload-item .quick-add-user-email-btn::after, .quick-add-user-item .quick-upload-camera-btn::after, .quick-add-user-item .quick-add-user-qr-btn::after,
.quick-add-user-item .quick-add-user-email-btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.25) 50%, transparent 60%);
  animation: cameraShimmer 3s ease-in-out infinite;
  pointer-events: none;
}
.quick-upload-item .quick-upload-camera-btn i, .quick-upload-item .quick-add-user-qr-btn i,
.quick-upload-item .quick-add-user-email-btn i, .quick-add-user-item .quick-upload-camera-btn i, .quick-add-user-item .quick-add-user-qr-btn i,
.quick-add-user-item .quick-add-user-email-btn i {
  font-size: 28px;
  color: #ffffff;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}
.quick-upload-item .quick-upload-camera-btn:hover, .quick-upload-item .quick-add-user-qr-btn:hover,
.quick-upload-item .quick-add-user-email-btn:hover, .quick-add-user-item .quick-upload-camera-btn:hover, .quick-add-user-item .quick-add-user-qr-btn:hover,
.quick-add-user-item .quick-add-user-email-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.45), 0 12px 32px rgba(56, 189, 248, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.quick-upload-item .quick-upload-camera-btn:hover i, .quick-upload-item .quick-add-user-qr-btn:hover i,
.quick-upload-item .quick-add-user-email-btn:hover i, .quick-add-user-item .quick-upload-camera-btn:hover i, .quick-add-user-item .quick-add-user-qr-btn:hover i,
.quick-add-user-item .quick-add-user-email-btn:hover i {
  transform: scale(1.1);
}
.quick-upload-item .quick-upload-camera-btn:active, .quick-upload-item .quick-add-user-qr-btn:active,
.quick-upload-item .quick-add-user-email-btn:active, .quick-add-user-item .quick-upload-camera-btn:active, .quick-add-user-item .quick-add-user-qr-btn:active,
.quick-add-user-item .quick-add-user-email-btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.quick-upload-item .quick-upload-content, .quick-add-user-item .quick-upload-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 64px;
}
.quick-upload-item .quick-upload-slug-input, .quick-add-user-item .quick-upload-slug-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary, #272727);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.8) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 0 rgba(255, 255, 255, 0.8);
}
.quick-upload-item .quick-upload-slug-input::placeholder, .quick-add-user-item .quick-upload-slug-input::placeholder {
  color: var(--text-quaternary, #aaa);
  font-weight: 400;
}
.quick-upload-item .quick-upload-slug-input:focus, .quick-add-user-item .quick-upload-slug-input:focus {
  border-color: var(--accent-primary, #38bdf8);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(56, 189, 248, 0.15), 0 1px 0 rgba(255, 255, 255, 0.8);
}
.quick-upload-item .quick-upload-slug-input.error, .quick-add-user-item .quick-upload-slug-input.error {
  border-color: var(--accent-danger, #f87171);
  animation: inputShake 0.3s ease;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(248, 113, 113, 0.15);
}
.quick-upload-item .quick-upload-slug-input.hidden, .quick-add-user-item .quick-upload-slug-input.hidden {
  display: none;
}
.quick-upload-item .quick-upload-list-label, .quick-add-user-item .quick-upload-list-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #272727);
  padding: 12px 0;
}
.quick-upload-item .quick-upload-list-label.hidden, .quick-add-user-item .quick-upload-list-label.hidden {
  display: none;
}
.quick-upload-item .quick-upload-status, .quick-add-user-item .quick-upload-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 24px;
}
.quick-upload-item .quick-upload-status .quick-upload-spinner, .quick-add-user-item .quick-upload-status .quick-upload-spinner,
.quick-upload-item .quick-upload-status .quick-upload-success,
.quick-add-user-item .quick-upload-status .quick-upload-success {
  display: none;
  font-size: 18px;
}
.quick-upload-item .quick-upload-status .quick-upload-spinner, .quick-add-user-item .quick-upload-status .quick-upload-spinner {
  color: var(--accent-primary, #38bdf8);
}
.quick-upload-item .quick-upload-status .quick-upload-success, .quick-add-user-item .quick-upload-status .quick-upload-success {
  color: var(--accent-success, #4ade80);
}
.quick-upload-item .quick-upload-status .quick-upload-message, .quick-add-user-item .quick-upload-status .quick-upload-message {
  font-size: 13px;
  color: var(--text-tertiary, #888);
}
.quick-upload-item.uploading .quick-upload-spinner, .uploading.quick-add-user-item .quick-upload-spinner {
  display: block;
}
.quick-upload-item.uploading .quick-upload-camera-btn, .quick-upload-item.uploading .quick-add-user-qr-btn,
.quick-upload-item.uploading .quick-add-user-email-btn, .uploading.quick-add-user-item .quick-upload-camera-btn, .uploading.quick-add-user-item .quick-add-user-qr-btn,
.uploading.quick-add-user-item .quick-add-user-email-btn {
  pointer-events: none;
  opacity: 0.7;
}
.quick-upload-item.uploading .quick-upload-camera-btn::after, .quick-upload-item.uploading .quick-add-user-qr-btn::after,
.quick-upload-item.uploading .quick-add-user-email-btn::after, .uploading.quick-add-user-item .quick-upload-camera-btn::after, .uploading.quick-add-user-item .quick-add-user-qr-btn::after,
.uploading.quick-add-user-item .quick-add-user-email-btn::after {
  animation: cameraShimmer 1s linear infinite;
}
.quick-upload-item.success .quick-upload-success, .success.quick-add-user-item .quick-upload-success {
  display: block;
  animation: successPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.quick-upload-item.success, .success.quick-add-user-item {
  border-color: rgba(74, 222, 128, 0.4);
  box-shadow: 0 4px 16px rgba(74, 222, 128, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 20px rgba(74, 222, 128, 0.1);
}
.quick-upload-item .quick-upload-file-input, .quick-add-user-item .quick-upload-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}
.quick-upload-item .quick-upload-header, .quick-add-user-item .quick-upload-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.quick-upload-item .quick-upload-list-actions, .quick-add-user-item .quick-upload-list-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.quick-upload-item .quick-upload-list-actions.hidden, .quick-add-user-item .quick-upload-list-actions.hidden {
  display: none;
}
.quick-upload-item .quick-upload-list-actions .quick-upload-buttons, .quick-add-user-item .quick-upload-list-actions .quick-upload-buttons {
  display: flex;
  gap: 8px;
}
.quick-upload-item .quick-upload-list-actions .quick-upload-modify-btn, .quick-add-user-item .quick-upload-list-actions .quick-upload-modify-btn,
.quick-upload-item .quick-upload-list-actions .quick-upload-toggle-btn,
.quick-add-user-item .quick-upload-list-actions .quick-upload-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 16px;
  font-size: 24px;
  color: #ffffff;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.quick-upload-item .quick-upload-list-actions .quick-upload-modify-btn::before, .quick-add-user-item .quick-upload-list-actions .quick-upload-modify-btn::before,
.quick-upload-item .quick-upload-list-actions .quick-upload-toggle-btn::before,
.quick-add-user-item .quick-upload-list-actions .quick-upload-toggle-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.1) 60%, transparent 100%);
  border-radius: 16px 16px 50% 50%;
  pointer-events: none;
}
.quick-upload-item .quick-upload-list-actions .quick-upload-modify-btn i, .quick-add-user-item .quick-upload-list-actions .quick-upload-modify-btn i,
.quick-upload-item .quick-upload-list-actions .quick-upload-toggle-btn i,
.quick-add-user-item .quick-upload-list-actions .quick-upload-toggle-btn i {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.quick-upload-item .quick-upload-list-actions .quick-upload-modify-btn:hover, .quick-add-user-item .quick-upload-list-actions .quick-upload-modify-btn:hover,
.quick-upload-item .quick-upload-list-actions .quick-upload-toggle-btn:hover,
.quick-add-user-item .quick-upload-list-actions .quick-upload-toggle-btn:hover {
  transform: translateY(-2px) scale(1.03);
}
.quick-upload-item .quick-upload-list-actions .quick-upload-modify-btn:active, .quick-add-user-item .quick-upload-list-actions .quick-upload-modify-btn:active,
.quick-upload-item .quick-upload-list-actions .quick-upload-toggle-btn:active,
.quick-add-user-item .quick-upload-list-actions .quick-upload-toggle-btn:active {
  transform: translateY(0) scale(0.97);
}
.quick-upload-item .quick-upload-list-actions .quick-upload-modify-btn, .quick-add-user-item .quick-upload-list-actions .quick-upload-modify-btn {
  background: linear-gradient(135deg, var(--accent-info, #22d3ee) 0%, var(--accent-primary, #38bdf8) 100%);
  box-shadow: 0 4px 16px rgba(34, 211, 238, 0.3), 0 8px 24px rgba(34, 211, 238, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.quick-upload-item .quick-upload-list-actions .quick-upload-modify-btn:hover, .quick-add-user-item .quick-upload-list-actions .quick-upload-modify-btn:hover {
  box-shadow: 0 6px 20px rgba(34, 211, 238, 0.4), 0 12px 32px rgba(34, 211, 238, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.quick-upload-item .quick-upload-list-actions .quick-upload-toggle-btn, .quick-add-user-item .quick-upload-list-actions .quick-upload-toggle-btn {
  background: linear-gradient(135deg, var(--accent-success, #34c759) 0%, #2da44e 100%);
  box-shadow: 0 4px 16px rgba(52, 199, 89, 0.3), 0 8px 24px rgba(52, 199, 89, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.quick-upload-item .quick-upload-list-actions .quick-upload-toggle-btn:hover, .quick-add-user-item .quick-upload-list-actions .quick-upload-toggle-btn:hover {
  box-shadow: 0 6px 20px rgba(52, 199, 89, 0.4), 0 12px 32px rgba(52, 199, 89, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.quick-upload-item .quick-upload-list-actions .quick-upload-toggle-btn.inactive, .quick-add-user-item .quick-upload-list-actions .quick-upload-toggle-btn.inactive {
  background: linear-gradient(135deg, rgba(120, 120, 128, 0.5) 0%, rgba(100, 100, 110, 0.4) 100%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.quick-upload-item .quick-upload-list-actions .quick-upload-toggle-btn.inactive i, .quick-add-user-item .quick-upload-list-actions .quick-upload-toggle-btn.inactive i {
  opacity: 0.7;
}
.quick-upload-item .quick-upload-list-actions .quick-upload-content, .quick-add-user-item .quick-upload-list-actions .quick-upload-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 64px;
}
.quick-upload-item .quick-upload-list-actions .quick-upload-list-label, .quick-add-user-item .quick-upload-list-actions .quick-upload-list-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #ffffff);
  line-height: 1.2;
}
.quick-upload-item .quick-upload-list-actions .quick-upload-hint, .quick-add-user-item .quick-upload-list-actions .quick-upload-hint {
  font-size: 12px;
  color: var(--text-quaternary, #8888a0);
  font-style: normal;
  line-height: 1.3;
}
.quick-upload-item .quick-upload-hint, .quick-add-user-item .quick-upload-hint {
  font-size: 12px;
  color: var(--text-quaternary, #8888a0);
  font-style: italic;
  margin-top: 2px;
}
.quick-upload-item .quick-upload-hint.hidden, .quick-add-user-item .quick-upload-hint.hidden {
  display: none;
}
.quick-upload-item .quick-upload-preview, .quick-add-user-item .quick-upload-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.quick-upload-item .quick-upload-preview.hidden, .quick-add-user-item .quick-upload-preview.hidden {
  display: none;
}
.quick-upload-item .quick-upload-preview-label, .quick-add-user-item .quick-upload-preview-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary, #666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.quick-upload-item .quick-upload-preview-label i, .quick-add-user-item .quick-upload-preview-label i {
  color: var(--accent-primary, #4CAF50);
}
.quick-upload-item .quick-upload-thumbnails, .quick-add-user-item .quick-upload-thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.quick-upload-item .quick-upload-thumb, .quick-add-user-item .quick-upload-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: visible;
  background: var(--glass-light, rgba(255, 255, 255, 0.3));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  animation: thumbFadeIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.quick-upload-item .quick-upload-thumb img, .quick-add-user-item .quick-upload-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.quick-upload-item .quick-upload-thumb .quick-upload-thumb-remove, .quick-add-user-item .quick-upload-thumb .quick-upload-thumb-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--accent-danger, #fb4268);
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease;
  z-index: 1;
}
.quick-upload-item .quick-upload-thumb .quick-upload-thumb-remove:hover, .quick-add-user-item .quick-upload-thumb .quick-upload-thumb-remove:hover {
  transform: scale(1.1);
}
.quick-upload-item .quick-upload-thumb .quick-upload-thumb-remove:active, .quick-add-user-item .quick-upload-thumb .quick-upload-thumb-remove:active {
  transform: scale(0.95);
}
.quick-upload-item .quick-upload-actions, .quick-add-user-item .quick-upload-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
.quick-upload-item .quick-upload-submit-btn, .quick-add-user-item .quick-upload-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent-primary, #4CAF50) 0%, #66bb6a 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.quick-upload-item .quick-upload-submit-btn i, .quick-add-user-item .quick-upload-submit-btn i {
  font-size: 16px;
}
.quick-upload-item .quick-upload-submit-btn:hover, .quick-add-user-item .quick-upload-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.quick-upload-item .quick-upload-submit-btn:active, .quick-add-user-item .quick-upload-submit-btn:active {
  transform: translateY(0) scale(0.98);
}
.quick-upload-item .quick-upload-submit-btn:disabled, .quick-add-user-item .quick-upload-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.quick-upload-item .quick-upload-clear-btn, .quick-add-user-item .quick-upload-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  background: var(--glass-light, rgba(255, 255, 255, 0.5));
  color: var(--text-tertiary, #5a5a72);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}
.quick-upload-item .quick-upload-clear-btn:hover, .quick-add-user-item .quick-upload-clear-btn:hover {
  background: rgba(251, 66, 104, 0.15);
  color: var(--accent-danger, #fb4268);
}
.quick-upload-item.has-preview, .has-preview.quick-add-user-item {
  flex-direction: column;
  align-items: stretch;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .quick-upload-item, :root:not([data-theme]) .quick-add-user-item {
    background: linear-gradient(145deg, rgba(45, 45, 60, 0.9) 0%, rgba(35, 35, 50, 0.85) 50%, rgba(28, 28, 42, 0.8) 100%);
    border-color: rgba(56, 189, 248, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 30px rgba(56, 189, 248, 0.05);
  }
  :root:not([data-theme]) .quick-upload-item .quick-upload-camera-btn, :root:not([data-theme]) .quick-upload-item .quick-add-user-qr-btn,
  :root:not([data-theme]) .quick-upload-item .quick-add-user-email-btn, :root:not([data-theme]) .quick-add-user-item .quick-upload-camera-btn, :root:not([data-theme]) .quick-add-user-item .quick-add-user-qr-btn,
  :root:not([data-theme]) .quick-add-user-item .quick-add-user-email-btn {
    background: linear-gradient(135deg, var(--accent-primary, #38bdf8) 0%, var(--accent-info, #06b6d4) 100%);
    box-shadow: 0 4px 20px rgba(56, 189, 248, 0.4), 0 8px 32px rgba(56, 189, 248, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 40px rgba(56, 189, 248, 0.15);
  }
  :root:not([data-theme]) .quick-upload-item .quick-upload-camera-btn:hover, :root:not([data-theme]) .quick-upload-item .quick-add-user-qr-btn:hover,
  :root:not([data-theme]) .quick-upload-item .quick-add-user-email-btn:hover, :root:not([data-theme]) .quick-add-user-item .quick-upload-camera-btn:hover, :root:not([data-theme]) .quick-add-user-item .quick-add-user-qr-btn:hover,
  :root:not([data-theme]) .quick-add-user-item .quick-add-user-email-btn:hover {
    box-shadow: 0 6px 24px rgba(56, 189, 248, 0.5), 0 12px 40px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 50px rgba(56, 189, 248, 0.2);
  }
  :root:not([data-theme]) .quick-upload-item .quick-upload-slug-input, :root:not([data-theme]) .quick-add-user-item .quick-upload-slug-input {
    background: linear-gradient(135deg, rgba(40, 40, 55, 0.9) 0%, rgba(30, 30, 45, 0.8) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  :root:not([data-theme]) .quick-upload-item .quick-upload-slug-input::placeholder, :root:not([data-theme]) .quick-add-user-item .quick-upload-slug-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
  }
  :root:not([data-theme]) .quick-upload-item .quick-upload-slug-input:focus, :root:not([data-theme]) .quick-add-user-item .quick-upload-slug-input:focus {
    background: linear-gradient(135deg, rgba(50, 50, 65, 0.95) 0%, rgba(40, 40, 55, 0.9) 100%);
    border-color: var(--accent-primary, #38bdf8);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(56, 189, 248, 0.2), 0 0 20px rgba(56, 189, 248, 0.1);
  }
  :root:not([data-theme]) .quick-upload-item .quick-upload-list-label, :root:not([data-theme]) .quick-add-user-item .quick-upload-list-label {
    color: #ffffff;
  }
  :root:not([data-theme]) .quick-upload-item .quick-upload-message, :root:not([data-theme]) .quick-add-user-item .quick-upload-message {
    color: rgba(255, 255, 255, 0.5);
  }
  :root:not([data-theme]) .quick-upload-item.success, :root:not([data-theme]) .success.quick-add-user-item {
    border-color: rgba(74, 222, 128, 0.4);
    box-shadow: 0 4px 20px rgba(74, 222, 128, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 30px rgba(74, 222, 128, 0.1);
  }
}
[data-theme=dark] .quick-upload-item, [data-theme=dark] .quick-add-user-item {
  background: linear-gradient(145deg, rgba(45, 45, 60, 0.9) 0%, rgba(35, 35, 50, 0.85) 50%, rgba(28, 28, 42, 0.8) 100%);
  border-color: rgba(56, 189, 248, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 30px rgba(56, 189, 248, 0.05);
}
[data-theme=dark] .quick-upload-item .quick-upload-camera-btn, [data-theme=dark] .quick-upload-item .quick-add-user-qr-btn,
[data-theme=dark] .quick-upload-item .quick-add-user-email-btn, [data-theme=dark] .quick-add-user-item .quick-upload-camera-btn, [data-theme=dark] .quick-add-user-item .quick-add-user-qr-btn,
[data-theme=dark] .quick-add-user-item .quick-add-user-email-btn {
  background: linear-gradient(135deg, var(--accent-primary, #38bdf8) 0%, var(--accent-info, #06b6d4) 100%);
  box-shadow: 0 4px 20px rgba(56, 189, 248, 0.4), 0 8px 32px rgba(56, 189, 248, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 40px rgba(56, 189, 248, 0.15);
}
[data-theme=dark] .quick-upload-item .quick-upload-camera-btn:hover, [data-theme=dark] .quick-upload-item .quick-add-user-qr-btn:hover,
[data-theme=dark] .quick-upload-item .quick-add-user-email-btn:hover, [data-theme=dark] .quick-add-user-item .quick-upload-camera-btn:hover, [data-theme=dark] .quick-add-user-item .quick-add-user-qr-btn:hover,
[data-theme=dark] .quick-add-user-item .quick-add-user-email-btn:hover {
  box-shadow: 0 6px 24px rgba(56, 189, 248, 0.5), 0 12px 40px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 50px rgba(56, 189, 248, 0.2);
}
[data-theme=dark] .quick-upload-item .quick-upload-slug-input, [data-theme=dark] .quick-add-user-item .quick-upload-slug-input {
  background: linear-gradient(135deg, rgba(40, 40, 55, 0.9) 0%, rgba(30, 30, 45, 0.8) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme=dark] .quick-upload-item .quick-upload-slug-input::placeholder, [data-theme=dark] .quick-add-user-item .quick-upload-slug-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
[data-theme=dark] .quick-upload-item .quick-upload-slug-input:focus, [data-theme=dark] .quick-add-user-item .quick-upload-slug-input:focus {
  background: linear-gradient(135deg, rgba(50, 50, 65, 0.95) 0%, rgba(40, 40, 55, 0.9) 100%);
  border-color: var(--accent-primary, #38bdf8);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(56, 189, 248, 0.2), 0 0 20px rgba(56, 189, 248, 0.1);
}
[data-theme=dark] .quick-upload-item .quick-upload-list-label, [data-theme=dark] .quick-add-user-item .quick-upload-list-label {
  color: #ffffff;
}
[data-theme=dark] .quick-upload-item .quick-upload-message, [data-theme=dark] .quick-add-user-item .quick-upload-message {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .quick-upload-item.success, [data-theme=dark] .success.quick-add-user-item {
  border-color: rgba(74, 222, 128, 0.4);
  box-shadow: 0 4px 20px rgba(74, 222, 128, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 30px rgba(74, 222, 128, 0.1);
}

@keyframes cameraShimmer {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) rotate(45deg);
  }
}
@keyframes inputShake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-4px);
  }
  40%, 80% {
    transform: translateX(4px);
  }
}
@keyframes successPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes thumbFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.remove-slide {
  margin-bottom: 0;
  height: 0;
  min-height: 0;
  max-height: 0;
  padding: 0;
  overflow: hidden;
  transition: all 0.2s ease-out;
}
.remove-slide * {
  display: none;
}

.cart-items-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}
.cart-items-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  min-height: 64px;
  background: var(--bg-tertiary, #f7f7f7);
  border-radius: 8px;
  margin-bottom: 8px;
  color: var(--text-primary, #272727);
}
.cart-items-list li span:first-child {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.cart-items-list li span:last-child {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--bg-tertiary, #f7f7f7);
  border: 1px solid var(--border-primary, #e4e4e4);
  border-radius: 8px;
  margin: 20px 0;
}
.cart-total strong {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #272727);
}
.cart-total span {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #272727);
}

.total-display {
  background: linear-gradient(135deg, var(--accent-primary, #4CAF50) 0%, #43a047 100%);
  color: #ffffff;
  padding: 20px;
  border-radius: 12px;
  margin: 20px 0;
  text-align: center;
}
.total-display h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  text-transform: none;
  letter-spacing: normal;
}
.total-display p {
  margin: 8px 0 0 0;
  font-size: 16px;
  opacity: 0.9;
}

.qr-code-container,
#qr-code-container {
  background: white;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
}
.qr-code-container img, .qr-code-container canvas,
#qr-code-container img,
#qr-code-container canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

.qr-code-details {
  width: 100%;
  background: var(--bg-tertiary);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border-primary);
}
.qr-code-details p {
  margin: 8px 0;
  font-size: 16px;
  color: var(--text-secondary);
}
.qr-code-details p strong {
  color: var(--text-primary);
}
.qr-code-details .qr-amount {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-primary);
}
.qr-code-details .qr-amount strong {
  color: var(--text-primary);
}

.preview-item {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.receipt-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.receipt-status.status-completed {
  background: #d4edda;
  color: #155724;
}
.receipt-status.status-pending {
  background: #fff3cd;
  color: #856404;
}
.receipt-status.status-failed {
  background: #f8d7da;
  color: #721c24;
}
.receipt-status.status-initiated {
  background: #d1ecf1;
  color: #0c5460;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  min-height: 400px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: errorFadeIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.1s;
  position: static;
  transform: none;
}
.loading-state .loading-spinner {
  font-size: 4rem;
  color: #4caf50;
  margin-bottom: 32px;
  opacity: 0;
  animation: iconScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.2s;
}
.loading-state .loading-spinner i {
  animation: spin 1s linear infinite;
}
.loading-state .loading-message {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary, #272727);
  margin: 0 0 12px 0;
  opacity: 0;
  animation: fadeInUp 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.3s;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  min-height: 400px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: errorFadeIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.1s;
  position: static;
  transform: none;
}
.empty-state .empty-state-icon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0f0f0 0%, #e4e4e4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  opacity: 0;
  animation: iconScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.2s;
}
.empty-state .empty-state-icon i {
  font-size: 56px;
}
.empty-state .empty-state-icon {
  position: relative;
}
.empty-state .empty-state-icon::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.05) 100%);
  opacity: 0;
  animation: iconPulse 2s ease-in-out infinite;
  animation-delay: 0.5s;
  z-index: -1;
}
.empty-state .empty-state-icon i {
  color: #888;
  transition: color 0.3s ease;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .empty-state .empty-state-icon {
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  :root:not([data-theme]) .empty-state .empty-state-icon::after {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2) 0%, rgba(76, 175, 80, 0.1) 100%);
  }
  :root:not([data-theme]) .empty-state .empty-state-icon i {
    color: #aaa;
  }
}
[data-theme=dark] .empty-state .empty-state-icon {
  background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
[data-theme=dark] .empty-state .empty-state-icon::after {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.2) 0%, rgba(76, 175, 80, 0.1) 100%);
}
[data-theme=dark] .empty-state .empty-state-icon i {
  color: #aaa;
}
.empty-state .empty-state-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary, #272727);
  margin: 0 0 12px 0;
  opacity: 0;
  animation: fadeInUp 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.3s;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .empty-state .empty-state-title {
    color: var(--text-primary, #ffffff);
  }
}
[data-theme=dark] .empty-state .empty-state-title {
  color: var(--text-primary, #ffffff);
}
.empty-state .empty-state-message {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-tertiary, #606060);
  margin: 0;
  opacity: 0;
  animation: fadeInUp 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.4s;
  margin-bottom: 16px;
  max-width: 320px;
  line-height: 1.6;
  color: var(--text-secondary, #606060);
}
.empty-state .empty-state-message:last-of-type {
  margin-bottom: 32px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .empty-state .empty-state-message {
    color: var(--text-tertiary, #aaaaaa);
  }
}
[data-theme=dark] .empty-state .empty-state-message {
  color: var(--text-tertiary, #aaaaaa);
}
.empty-state .empty-state-message-secondary {
  font-size: 14px;
  font-style: italic;
  color: var(--text-tertiary, #888888);
  margin-top: 8px;
  opacity: 0;
  animation: fadeInUp 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.45s;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .empty-state .empty-state-message-secondary {
    color: var(--text-quaternary, #777777);
  }
}
[data-theme=dark] .empty-state .empty-state-message-secondary {
  color: var(--text-quaternary, #777777);
}
.empty-state .empty-state-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 280px;
  margin-top: 8px;
}
.empty-state .empty-state-button {
  opacity: 0;
  animation: buttonFadeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.5s;
  width: 100%;
  max-width: 280px;
}
.empty-state .empty-state-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(76, 175, 80, 0.35);
}
.empty-state .empty-state-button:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}
.empty-state .empty-state-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.4), 0 6px 16px rgba(76, 175, 80, 0.3);
}
.empty-state .empty-state-button:focus:not(:focus-visible) {
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.3);
}
.empty-state .empty-state-button-secondary {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--text-secondary, #606060);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.empty-state .empty-state-button-secondary:hover:not(:disabled) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 252, 255, 0.9) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.empty-state .empty-state-button-secondary:active:not(:disabled) {
  transform: scale(0.98);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .empty-state .empty-state-button-secondary {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  :root:not([data-theme]) .empty-state .empty-state-button-secondary:hover:not(:disabled) {
    background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}
[data-theme=dark] .empty-state .empty-state-button-secondary {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .empty-state .empty-state-button-secondary:hover:not(:disabled) {
  background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.empty-state .empty-state-button-secondary {
  opacity: 0;
  animation: buttonFadeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.6s;
  width: 100%;
  max-width: 280px;
  justify-content: center;
  background-color: transparent;
  border-color: var(--border-primary, #e4e4e4);
  color: var(--text-secondary, #606060);
}
.empty-state .empty-state-button-secondary:hover {
  background-color: var(--bg-tertiary, #f7f7f7);
  border-color: var(--accent-primary, #4CAF50);
  color: var(--accent-primary, #4CAF50);
}
.empty-state .empty-state-button-secondary:active {
  background-color: var(--bg-secondary, #ffffff);
  transform: translateY(1px);
}
.empty-state .empty-state-button-secondary:focus {
  outline: none;
  border-color: var(--accent-primary, #4CAF50);
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .empty-state .empty-state-button-secondary {
    background-color: transparent;
    border-color: var(--border-primary, #3a3a3a);
    color: var(--text-secondary, #aaaaaa);
  }
  :root:not([data-theme]) .empty-state .empty-state-button-secondary:hover {
    background-color: rgba(76, 175, 80, 0.1);
    border-color: var(--accent-primary, #4CAF50);
    color: var(--accent-primary, #4CAF50);
  }
  :root:not([data-theme]) .empty-state .empty-state-button-secondary:active {
    background-color: rgba(76, 175, 80, 0.05);
  }
}
[data-theme=dark] .empty-state .empty-state-button-secondary {
  background-color: transparent;
  border-color: var(--border-primary, #3a3a3a);
  color: var(--text-secondary, #aaaaaa);
}
[data-theme=dark] .empty-state .empty-state-button-secondary:hover {
  background-color: rgba(76, 175, 80, 0.1);
  border-color: var(--accent-primary, #4CAF50);
  color: var(--accent-primary, #4CAF50);
}
[data-theme=dark] .empty-state .empty-state-button-secondary:active {
  background-color: rgba(76, 175, 80, 0.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .empty-state {
    background-color: var(--bg-primary, #1a1a1a);
  }
}
[data-theme=dark] .empty-state {
  background-color: var(--bg-primary, #1a1a1a);
}

.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  min-height: 400px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: errorFadeIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.1s;
  position: static;
  transform: none;
}
.error-state .error-state-icon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe5e5 0%, #ffcccc 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(251, 66, 104, 0.15);
  opacity: 0;
  animation: iconScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.2s;
}
.error-state .error-state-icon i {
  font-size: 56px;
}
.error-state .error-state-icon i {
  color: #fb4268;
}
.error-state .error-state-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary, #272727);
  margin: 0 0 12px 0;
  opacity: 0;
  animation: fadeInUp 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.3s;
}
.error-state .error-state-message {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-tertiary, #606060);
  margin: 0;
  opacity: 0;
  animation: fadeInUp 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.4s;
  margin-bottom: 32px;
}
.error-state .error-state-button {
  opacity: 0;
  animation: buttonFadeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.5s;
}

.skeleton-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 0;
}
.skeleton-container.padded {
  padding: 20px;
}

.skeleton-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  min-height: 72px;
  background: var(--bg-tertiary, #f7f7f7);
  border-radius: 8px;
}
.skeleton-item .skeleton-icon {
  background-color: var(--skeleton-base);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skeleton-item .skeleton-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.skeleton-item .skeleton-action {
  background-color: var(--skeleton-base);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  flex-shrink: 0;
}

.skeleton-line {
  background-color: var(--skeleton-base);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  display: block;
  width: 100%;
  height: 16px;
}
.skeleton-line.short {
  width: 30%;
  min-width: 60px;
}
.skeleton-line.medium {
  width: 60%;
  min-width: 100px;
}
.skeleton-line.long {
  width: 90%;
  min-width: 140px;
}
.skeleton-line.full {
  width: 100%;
}
.skeleton-line.thin {
  height: 12px;
}
.skeleton-line.thick {
  height: 20px;
}

.skeleton-circle {
  background-color: var(--skeleton-base);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skeleton-circle.small {
  width: 24px;
  height: 24px;
}
.skeleton-circle.medium {
  width: 40px;
  height: 40px;
}
.skeleton-circle.large {
  width: 64px;
  height: 64px;
}
.skeleton-circle.xlarge {
  width: 120px;
  height: 120px;
}

.skeleton-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.skeleton-form .skeleton-form-group {
  padding: 12px 16px;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-primary);
}
.skeleton-form .skeleton-form-group .skeleton-label {
  background-color: var(--skeleton-base);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  display: block;
  width: 25%;
  height: 12px;
  margin-bottom: 10px;
}
.skeleton-form .skeleton-form-group .skeleton-input {
  background-color: var(--skeleton-base);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  display: block;
  width: 100%;
  height: 44px;
  border-radius: 8px;
}

.skeleton-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.skeleton-detail .skeleton-detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-primary);
}
.skeleton-detail .skeleton-detail-header .skeleton-avatar {
  background-color: var(--skeleton-base);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skeleton-detail .skeleton-detail-header .skeleton-header-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.skeleton-detail .skeleton-detail-section {
  padding: 16px 20px;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-primary);
}
.skeleton-detail .skeleton-detail-section .skeleton-section-title {
  background-color: var(--skeleton-base);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  display: block;
  width: 30%;
  height: 14px;
  margin-bottom: 12px;
}
.skeleton-detail .skeleton-detail-section .skeleton-section-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-card {
  background-color: var(--skeleton-base);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  display: block;
  width: 100%;
  height: 120px;
  border-radius: 12px;
}
.skeleton-card.small {
  height: 80px;
}
.skeleton-card.large {
  height: 200px;
}

.skeleton-button {
  background-color: var(--skeleton-base);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  display: block;
  width: auto;
  height: 48px;
  border-radius: 12px;
  min-width: 120px;
}
.skeleton-button.full {
  width: 100%;
}
.skeleton-button.small {
  height: 36px;
  min-width: 80px;
}

.skeleton-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-primary);
}

.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.skeleton-receipt-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-primary);
  background: var(--bg-secondary);
}
.skeleton-receipt-item .skeleton-receipt-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.skeleton-receipt-item .skeleton-receipt-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.skeleton-receipt-item .skeleton-receipt-details {
  display: flex;
  align-items: center;
  gap: 8px;
}
.skeleton-receipt-item .skeleton-receipt-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.skeleton-badge {
  background-color: var(--skeleton-base);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  display: block;
  width: 60px;
  height: 20px;
  border-radius: 10px;
}

.skeleton-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--skeleton-base, #e0e0e0);
  border-bottom: 2px solid var(--skeleton-base, #e0e0e0);
  transform: rotate(-45deg);
}

.skeleton-editable-field {
  padding: 16px 20px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-primary);
}
.skeleton-editable-field .skeleton-label {
  margin-bottom: 12px;
}

.skeleton-profile-form {
  gap: 0;
}

.skeleton-form-actions {
  padding: 24px 20px;
  display: flex;
  justify-content: center;
}

.skeleton-receipt-detail {
  gap: 0;
}

.skeleton-receipt-details-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-primary);
}

.skeleton-back-button {
  background-color: var(--skeleton-base);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  display: block;
  width: 72px;
  height: 36px;
  border-radius: 8px;
}

.skeleton-status-banner {
  background-color: var(--skeleton-base);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  display: block;
  width: 100%;
  height: 48px;
  border-radius: 0;
  margin: 0;
}

.skeleton-amount-large {
  background-color: var(--skeleton-base);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  display: block;
  width: 140px;
  height: 48px;
  border-radius: 8px;
  margin: 24px auto;
}

.skeleton-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-primary);
  border-bottom: 1px solid var(--border-primary);
}

.skeleton-meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-primary);
}
.skeleton-meta-item:last-child {
  border-bottom: none;
}

.skeleton-totals {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 20px;
  padding: 0 20px;
}

.skeleton-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-primary);
}
.skeleton-total-row.skeleton-total-final {
  border-bottom: none;
  padding-top: 16px;
}

.slide-to-confirm {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 64px;
  margin: 0 auto;
  border-radius: 32px;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.slide-to-confirm:focus-visible {
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.4);
}
.slide-to-confirm__track {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--glass-light, rgba(255, 255, 255, 0.45)) 0%, var(--glass-medium, rgba(255, 255, 255, 0.65)) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-secondary, rgba(255, 255, 255, 0.6));
  box-shadow: var(--shadow-glass-md, 0 4px 16px rgba(0, 0, 0, 0.08)), inset 0 2px 4px rgba(0, 0, 0, 0.02);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .slide-to-confirm__track {
    background: linear-gradient(135deg, var(--glass-light, rgba(255, 255, 255, 0.06)) 0%, var(--glass-medium, rgba(255, 255, 255, 0.1)) 100%);
    border-color: var(--border-secondary, rgba(255, 255, 255, 0.12));
    box-shadow: var(--shadow-glass-md), inset 0 2px 4px rgba(0, 0, 0, 0.1);
  }
}
[data-theme=dark] .slide-to-confirm__track {
  background: linear-gradient(135deg, var(--glass-light, rgba(255, 255, 255, 0.06)) 0%, var(--glass-medium, rgba(255, 255, 255, 0.1)) 100%);
  border-color: var(--border-secondary, rgba(255, 255, 255, 0.12));
  box-shadow: var(--shadow-glass-md), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.slide-to-confirm__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.25) 0%, rgba(76, 175, 80, 0.4) 100%);
  transition: background-color 0.3s ease;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .slide-to-confirm__fill {
    background: linear-gradient(135deg, rgba(102, 187, 106, 0.2) 0%, rgba(102, 187, 106, 0.35) 100%);
  }
}
[data-theme=dark] .slide-to-confirm__fill {
  background: linear-gradient(135deg, rgba(102, 187, 106, 0.2) 0%, rgba(102, 187, 106, 0.35) 100%);
}
.slide-to-confirm__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary, #2d2d44);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.15s ease;
  letter-spacing: 0.3px;
  z-index: 1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .slide-to-confirm__label {
    color: var(--text-secondary, #d0d0d8);
  }
}
[data-theme=dark] .slide-to-confirm__label {
  color: var(--text-secondary, #d0d0d8);
}
.slide-to-confirm__thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary, #4CAF50) 0%, #43a047 100%);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.35), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  z-index: 2;
  transition: box-shadow 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.slide-to-confirm__thumb svg {
  color: #ffffff;
  transition: transform 0.2s ease;
}
.slide-to-confirm__thumb:hover {
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.45), 0 2px 4px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.slide-to-confirm__thumb:active {
  cursor: grabbing;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .slide-to-confirm__thumb {
    background: linear-gradient(135deg, var(--accent-primary, #66bb6a) 0%, #4caf50 100%);
    box-shadow: 0 4px 12px rgba(102, 187, 106, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
}
[data-theme=dark] .slide-to-confirm__thumb {
  background: linear-gradient(135deg, var(--accent-primary, #66bb6a) 0%, #4caf50 100%);
  box-shadow: 0 4px 12px rgba(102, 187, 106, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.slide-to-confirm__success {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--accent-primary, #4CAF50) 0%, #43a047 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  z-index: 3;
}
.slide-to-confirm__success svg {
  color: #ffffff;
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .slide-to-confirm__success {
    background: linear-gradient(135deg, var(--accent-primary, #66bb6a) 0%, #4caf50 100%);
  }
}
[data-theme=dark] .slide-to-confirm__success {
  background: linear-gradient(135deg, var(--accent-primary, #66bb6a) 0%, #4caf50 100%);
}
.slide-to-confirm--dragging .slide-to-confirm__thumb {
  cursor: grabbing;
  box-shadow: 0 8px 20px rgba(76, 175, 80, 0.5), 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}
.slide-to-confirm--dragging .slide-to-confirm__thumb svg {
  transform: translateX(2px);
}
.slide-to-confirm--dragging .slide-to-confirm__track {
  border-color: var(--accent-primary, #4CAF50);
}
.slide-to-confirm--threshold-reached .slide-to-confirm__fill {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.4) 0%, rgba(76, 175, 80, 0.6) 100%);
}
.slide-to-confirm--threshold-reached .slide-to-confirm__thumb {
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.6), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.slide-to-confirm--threshold-reached .slide-to-confirm__track {
  border-color: var(--accent-primary, #4CAF50);
  box-shadow: var(--shadow-glass-md), 0 0 20px rgba(76, 175, 80, 0.2);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .slide-to-confirm--threshold-reached .slide-to-confirm__fill {
    background: linear-gradient(135deg, rgba(102, 187, 106, 0.35) 0%, rgba(102, 187, 106, 0.55) 100%);
  }
}
[data-theme=dark] .slide-to-confirm--threshold-reached .slide-to-confirm__fill {
  background: linear-gradient(135deg, rgba(102, 187, 106, 0.35) 0%, rgba(102, 187, 106, 0.55) 100%);
}
.slide-to-confirm--confirmed .slide-to-confirm__success {
  opacity: 1;
  transform: scale(1);
}
.slide-to-confirm--confirmed .slide-to-confirm__success svg {
  transform: scale(1.2);
  animation: confirmCheckmark 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.slide-to-confirm--confirmed .slide-to-confirm__track,
.slide-to-confirm--confirmed .slide-to-confirm__fill,
.slide-to-confirm--confirmed .slide-to-confirm__thumb,
.slide-to-confirm--confirmed .slide-to-confirm__label {
  opacity: 0;
}
.slide-to-confirm--resetting .slide-to-confirm__thumb {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.slide-to-confirm--resetting .slide-to-confirm__fill {
  transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.slide-to-confirm--resetting .slide-to-confirm__label {
  transition: opacity 0.3s ease 0.15s;
}
.slide-to-confirm--disabled {
  opacity: 0.5;
  pointer-events: none;
}
.slide-to-confirm--disabled .slide-to-confirm__thumb {
  cursor: not-allowed;
  background: linear-gradient(135deg, var(--text-tertiary, #5a5a72) 0%, var(--text-quaternary, #8888a0) 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.slide-to-confirm--danger .slide-to-confirm__thumb {
  background: linear-gradient(135deg, var(--accent-danger, #fb4268) 0%, #e63958 100%);
  box-shadow: 0 4px 12px rgba(251, 66, 104, 0.35), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.slide-to-confirm--danger .slide-to-confirm__thumb:hover {
  box-shadow: 0 6px 16px rgba(251, 66, 104, 0.45), 0 2px 4px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .slide-to-confirm--danger .slide-to-confirm__thumb {
    background: linear-gradient(135deg, var(--accent-danger, #ff5a7d) 0%, #fb4268 100%);
    box-shadow: 0 4px 12px rgba(255, 90, 125, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
}
[data-theme=dark] .slide-to-confirm--danger .slide-to-confirm__thumb {
  background: linear-gradient(135deg, var(--accent-danger, #ff5a7d) 0%, #fb4268 100%);
  box-shadow: 0 4px 12px rgba(255, 90, 125, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.slide-to-confirm--danger .slide-to-confirm__fill {
  background: linear-gradient(135deg, rgba(251, 66, 104, 0.2) 0%, rgba(251, 66, 104, 0.35) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .slide-to-confirm--danger .slide-to-confirm__fill {
    background: linear-gradient(135deg, rgba(255, 90, 125, 0.15) 0%, rgba(255, 90, 125, 0.3) 100%);
  }
}
[data-theme=dark] .slide-to-confirm--danger .slide-to-confirm__fill {
  background: linear-gradient(135deg, rgba(255, 90, 125, 0.15) 0%, rgba(255, 90, 125, 0.3) 100%);
}
.slide-to-confirm--danger .slide-to-confirm__success {
  background: linear-gradient(135deg, var(--accent-danger, #fb4268) 0%, #e63958 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .slide-to-confirm--danger .slide-to-confirm__success {
    background: linear-gradient(135deg, var(--accent-danger, #ff5a7d) 0%, #fb4268 100%);
  }
}
[data-theme=dark] .slide-to-confirm--danger .slide-to-confirm__success {
  background: linear-gradient(135deg, var(--accent-danger, #ff5a7d) 0%, #fb4268 100%);
}
.slide-to-confirm--danger.slide-to-confirm--dragging .slide-to-confirm__thumb {
  box-shadow: 0 8px 20px rgba(251, 66, 104, 0.5), 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.slide-to-confirm--danger.slide-to-confirm--dragging .slide-to-confirm__track {
  border-color: var(--accent-danger, #fb4268);
}
.slide-to-confirm--danger.slide-to-confirm--threshold-reached .slide-to-confirm__fill {
  background: linear-gradient(135deg, rgba(251, 66, 104, 0.35) 0%, rgba(251, 66, 104, 0.55) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .slide-to-confirm--danger.slide-to-confirm--threshold-reached .slide-to-confirm__fill {
    background: linear-gradient(135deg, rgba(255, 90, 125, 0.3) 0%, rgba(255, 90, 125, 0.5) 100%);
  }
}
[data-theme=dark] .slide-to-confirm--danger.slide-to-confirm--threshold-reached .slide-to-confirm__fill {
  background: linear-gradient(135deg, rgba(255, 90, 125, 0.3) 0%, rgba(255, 90, 125, 0.5) 100%);
}
.slide-to-confirm--danger.slide-to-confirm--threshold-reached .slide-to-confirm__thumb {
  box-shadow: 0 6px 20px rgba(251, 66, 104, 0.6), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.slide-to-confirm--danger.slide-to-confirm--threshold-reached .slide-to-confirm__track {
  border-color: var(--accent-danger, #fb4268);
  box-shadow: var(--shadow-glass-md), 0 0 20px rgba(251, 66, 104, 0.2);
}
.slide-to-confirm--danger:focus-visible {
  box-shadow: 0 0 0 3px rgba(251, 66, 104, 0.4);
}
@media (max-width: 480px) {
  .slide-to-confirm {
    max-width: 100%;
    height: 56px;
  }
  .slide-to-confirm__thumb {
    width: 48px;
    height: 48px;
  }
  .slide-to-confirm__thumb svg {
    width: 20px;
    height: 20px;
  }
  .slide-to-confirm__label {
    font-size: 14px;
  }
  .slide-to-confirm__success svg {
    width: 20px;
    height: 20px;
  }
}
@media (hover: none) and (pointer: coarse) {
  .slide-to-confirm {
    height: 64px;
  }
  .slide-to-confirm__thumb {
    width: 56px;
    height: 56px;
  }
}

@keyframes confirmCheckmark {
  0% {
    transform: scale(0) rotate(-45deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.3) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
.landing-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7rem 20px 10em;
  background: radial-gradient(ellipse at 20% 30%, rgba(76, 175, 80, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(59, 130, 246, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, rgba(168, 85, 247, 0.06) 0%, transparent 50%), linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.95) 100%);
  z-index: 1001;
  overflow-y: auto;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .landing-page {
    background: radial-gradient(ellipse at 20% 30%, rgba(76, 175, 80, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(59, 130, 246, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, rgba(168, 85, 247, 0.08) 0%, transparent 50%), linear-gradient(180deg, rgba(26, 26, 30, 0.98) 0%, rgb(20, 20, 24) 100%);
  }
}
[data-theme=dark] .landing-page {
  background: radial-gradient(ellipse at 20% 30%, rgba(76, 175, 80, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(59, 130, 246, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, rgba(168, 85, 247, 0.08) 0%, transparent 50%), linear-gradient(180deg, rgba(26, 26, 30, 0.98) 0%, rgb(20, 20, 24) 100%);
}

.landing-content {
  text-align: center;
  max-width: 400px;
  width: 100%;
}

.landing-logo {
  width: 100px;
  height: 100px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.8) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(76, 175, 80, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  opacity: 0;
  animation: landingLogoIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.1s;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .landing-logo {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.9) 0%, rgba(40, 40, 50, 0.8) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(76, 175, 80, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}
[data-theme=dark] .landing-logo {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.9) 0%, rgba(40, 40, 50, 0.8) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(76, 175, 80, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.landing-logo-icon {
  width: 50px;
  height: 50px;
  color: var(--accent-primary, #4CAF50);
}

.landing-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary, #272727);
  margin: 0 0 8px;
  opacity: 0;
  animation: fadeInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.2s;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .landing-title {
    color: #ffffff;
  }
}
[data-theme=dark] .landing-title {
  color: #ffffff;
}

.landing-subtitle {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary, #333333);
  margin: 0 0 40px;
  opacity: 0;
  animation: fadeInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.3s;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .landing-subtitle {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
}
[data-theme=dark] .landing-subtitle {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.landing-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.landing-feature {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  opacity: 0;
  animation: landingFeatureIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.landing-feature:nth-child(1) {
  animation-delay: 0.4s;
}
.landing-feature:nth-child(2) {
  animation-delay: 0.5s;
}
.landing-feature:nth-child(3) {
  animation-delay: 0.6s;
}
.landing-feature i {
  font-size: 20px;
  color: var(--accent-primary, #4CAF50);
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(76, 175, 80, 0.3));
}
.landing-feature span {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1a1a2e);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.landing-feature p {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .landing-feature {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  :root:not([data-theme]) .landing-feature i {
    filter: drop-shadow(0 2px 6px rgba(102, 187, 106, 0.4));
  }
  :root:not([data-theme]) .landing-feature span {
    color: #ffffff;
  }
}
[data-theme=dark] .landing-feature {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .landing-feature i {
  filter: drop-shadow(0 2px 6px rgba(102, 187, 106, 0.4));
}
[data-theme=dark] .landing-feature span {
  color: #ffffff;
}

.landing-cta {
  margin-top: 0;
  opacity: 0;
  animation: fadeInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.7s;
}

.landing-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #1a1a2e);
  margin: 0;
  padding: 14px 20px 14px 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.85) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 8px 32px rgba(76, 175, 80, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: all 0.4s ease;
}
.landing-hint .step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: linear-gradient(135deg, #4CAF50 0%, #66bb6a 100%);
  border-radius: 50%;
  color: white;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: stepPulse 2s ease-in-out infinite;
}
.landing-hint p {
  margin: 0;
  font-weight: 500;
  color: var(--text-secondary, #2d2d44);
  letter-spacing: 0.2px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .landing-hint {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 100%);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 8px 32px rgba(102, 187, 106, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  :root:not([data-theme]) .landing-hint .step-indicator {
    background: linear-gradient(135deg, #66bb6a 0%, #81c784 100%);
    box-shadow: 0 2px 8px rgba(102, 187, 106, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  :root:not([data-theme]) .landing-hint p {
    color: rgba(255, 255, 255, 0.9);
  }
}
[data-theme=dark] .landing-hint {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 100%);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 8px 32px rgba(102, 187, 106, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .landing-hint .step-indicator {
  background: linear-gradient(135deg, #66bb6a 0%, #81c784 100%);
  box-shadow: 0 2px 8px rgba(102, 187, 106, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
[data-theme=dark] .landing-hint p {
  color: rgba(255, 255, 255, 0.9);
}
.landing-hint.cloud-away {
  animation: hintFadeToCloud 0.8s ease-out forwards;
}

@keyframes stepPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}
.landing-nav-arrow {
  position: fixed;
  width: 96px;
  height: 96px;
  bottom: 12px;
  left: 10px;
  pointer-events: none;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 481px) {
  .landing-nav-arrow {
    left: calc(50vw - 205px);
    bottom: calc(max(0px, (100vh - 932px) / 2) + 12px);
  }
}
.landing-nav-arrow .pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border: 3px solid var(--accent-primary, #4CAF50);
  border-radius: 50%;
  animation: pulseRingExpand 1.8s ease-out infinite;
  opacity: 0;
}
.landing-nav-arrow .pulse-ring-delayed {
  animation-delay: 0.6s;
}
.landing-nav-arrow .arrow-icon {
  position: absolute;
  top: 50%;
  left: calc(50% + 40px);
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: arrowPulseSync 1.8s ease-in-out infinite;
  z-index: 2;
}
.landing-nav-arrow .arrow-icon svg {
  width: 36px;
  height: 36px;
  color: var(--accent-primary, #4CAF50);
  filter: drop-shadow(0 2px 6px rgba(76, 175, 80, 0.5));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .landing-nav-arrow .pulse-ring {
    border-color: var(--accent-primary, #66bb6a);
  }
  :root:not([data-theme]) .landing-nav-arrow .arrow-icon svg {
    color: var(--accent-primary, #66bb6a);
    filter: drop-shadow(0 2px 8px rgba(102, 187, 106, 0.6));
  }
}
[data-theme=dark] .landing-nav-arrow .pulse-ring {
  border-color: var(--accent-primary, #66bb6a);
}
[data-theme=dark] .landing-nav-arrow .arrow-icon svg {
  color: var(--accent-primary, #66bb6a);
  filter: drop-shadow(0 2px 8px rgba(102, 187, 106, 0.6));
}
.landing-nav-arrow.cloud-away {
  animation: arrowCloudAway 0.6s ease-out forwards;
}
.landing-nav-arrow.cloud-away .pulse-ring {
  animation: pulseRingFadeOut 0.4s ease-out forwards;
}
.landing-nav-arrow.cloud-away .arrow-icon {
  animation: arrowIconFadeOut 0.5s ease-out forwards;
}

body.layout-right .landing-nav-arrow {
  left: auto;
  right: 10px;
}
@media only screen and (min-width: 481px) {
  body.layout-right .landing-nav-arrow {
    left: auto;
    right: calc(50vw - 205px);
  }
}
body.layout-right .landing-nav-arrow .arrow-icon {
  left: calc(50% - 40px);
}
body.layout-right .landing-nav-arrow .arrow-icon svg {
  transform: scaleX(-1);
}

@keyframes pulseRingExpand {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.2);
    opacity: 0;
  }
}
@keyframes arrowPulseSync {
  0% {
    transform: translate(-50%, -50%) translateX(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) translateX(-12px) scale(1.1);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) translateX(0) scale(1);
    opacity: 1;
  }
}
@keyframes arrowCloudAway {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
    filter: blur(4px);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
    filter: blur(12px);
  }
}
@keyframes pulseRingFadeOut {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.5);
  }
}
@keyframes arrowIconFadeOut {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-20px) scale(0.5);
    filter: blur(8px);
  }
}
@keyframes landingLogoIn {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes landingFeatureIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes bounceDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}
@keyframes drawArrowFat {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes arrowheadPop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(10deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.2) rotate(-5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.3);
  }
}
@keyframes hintFadeToCloud {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  70% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  85% {
    opacity: 0.7;
    transform: scale(1.05);
    filter: blur(2px);
  }
  95% {
    opacity: 0.3;
    transform: scale(1.15) translateY(-10px);
    filter: blur(8px);
  }
  100% {
    opacity: 0;
    transform: scale(1.3) translateY(-20px);
    filter: blur(15px);
    pointer-events: none;
  }
}
@keyframes arrowFadeToCloud {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  70% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  85% {
    opacity: 0.6;
    transform: scale(1.1);
    filter: blur(3px);
  }
  95% {
    opacity: 0.2;
    transform: scale(1.2) translateY(-15px);
    filter: blur(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1.4) translateY(-25px);
    filter: blur(20px);
    pointer-events: none;
  }
}
.landing-fade-out {
  animation: landingFadeOut 0.3s ease-out forwards;
}

@keyframes landingFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    pointer-events: none;
  }
}
.landing-animate-in .landing-logo,
.landing-animate-in .landing-title,
.landing-animate-in .landing-subtitle,
.landing-animate-in .landing-feature,
.landing-animate-in .landing-cta {
  animation-play-state: running;
}

.payment-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 20px;
}
.payment-modal-overlay.visible {
  opacity: 1;
}

.payment-modal-container {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 360px;
  padding: 32px 24px;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.visible .payment-modal-container {
  transform: scale(1);
}
@media (prefers-color-scheme: dark) {
  .payment-modal-container {
    background: linear-gradient(135deg, rgba(30, 35, 45, 0.95) 0%, rgba(20, 25, 35, 0.95) 100%);
    border-color: rgba(255, 255, 255, 0.1);
  }
}

.payment-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.payment-modal-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.payment-modal-icon.success .payment-success-icon {
  font-size: 64px;
  color: #22c55e;
  animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.payment-modal-icon.error .payment-error-icon {
  font-size: 64px;
  color: #ef4444;
  animation: errorShake 0.5s ease;
}

.payment-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(76, 175, 80, 0.2);
  border-top-color: #4caf50;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.payment-modal-status {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 20px;
  min-height: 24px;
}
@media (prefers-color-scheme: dark) {
  .payment-modal-status {
    color: #f1f5f9;
  }
}

.payment-modal-progress {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
@media (prefers-color-scheme: dark) {
  .payment-modal-progress {
    background: rgba(255, 255, 255, 0.1);
  }
}

.payment-modal-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4caf50 0%, #66bb6a 100%);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.payment-modal-progress-text {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 24px;
}
@media (prefers-color-scheme: dark) {
  .payment-modal-progress-text {
    color: #94a3b8;
  }
}

.payment-modal-refresh {
  background: transparent;
  border: 1px solid rgba(76, 175, 80, 0.5);
  color: #4caf50;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 12px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.payment-modal-refresh:hover:not(:disabled) {
  background: rgba(76, 175, 80, 0.1);
  border-color: #4caf50;
}
.payment-modal-refresh:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.payment-modal-refresh i {
  font-size: 14px;
}

.payment-modal-cancel {
  background: transparent;
  border: none;
  color: #64748b;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.payment-modal-cancel:hover {
  color: #ef4444;
}

@keyframes errorShake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-8px);
  }
  40%, 80% {
    transform: translateX(8px);
  }
}
.image-carousel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.image-carousel--empty {
  display: none;
}
.image-carousel__preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  max-width: 400px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
}
.image-carousel__main-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.2s ease;
}
.image-carousel__main-image--loading {
  opacity: 0.5;
}
.image-carousel__loader, .image-carousel__error {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary, #888);
  font-size: 24px;
  pointer-events: none;
}
.image-carousel__error {
  display: none;
  color: var(--accent-danger, #fb4268);
}
.image-carousel__strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.image-carousel__strip::-webkit-scrollbar {
  display: none;
}
.image-carousel__thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
  cursor: pointer;
  scroll-snap-align: start;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.image-carousel__thumb:focus {
  outline: none;
  border-color: var(--accent-primary, #4CAF50);
}
.image-carousel__thumb:hover {
  transform: scale(1.05);
}
.image-carousel__thumb--active {
  border-color: var(--accent-primary, #4CAF50);
}
.image-carousel__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-carousel--single .image-carousel__preview {
  max-width: 200px;
}
.image-carousel--compact .image-carousel__preview {
  max-width: 80px;
  aspect-ratio: 1/1;
}
.image-carousel--compact .image-carousel__strip {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .image-carousel__preview {
    background: rgba(255, 255, 255, 0.05);
  }
  :root:not([data-theme]) .image-carousel__thumb {
    background: rgba(255, 255, 255, 0.05);
  }
}
[data-theme=dark] .image-carousel__preview {
  background: rgba(255, 255, 255, 0.05);
}
[data-theme=dark] .image-carousel__thumb {
  background: rgba(255, 255, 255, 0.05);
}

.list-thumbnail-header {
  display: flex;
  justify-content: center;
  padding: 12px !important;
  min-height: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.list-thumbnail-header .list-thumbnail-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.list-thumbnail-header .list-thumbnail-image {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid var(--accent-primary, #4CAF50);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.list-thumbnail-header .list-thumbnail-label {
  font-size: 12px;
  color: var(--text-tertiary, #888);
  display: flex;
  align-items: center;
  gap: 4px;
}
.list-thumbnail-header .list-thumbnail-label i {
  font-size: 10px;
}

.icon-white {
  color: white !important;
}

.icon-success {
  color: #4caf50 !important;
}

.icon-error {
  color: #f44336 !important;
}

.org-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.org-picker-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  min-height: 72px;
  background: linear-gradient(135deg, var(--glass-light), var(--glass-ultra-light));
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  border-radius: 12px;
  border: none;
  position: relative;
  box-shadow: var(--shadow-glass-sm);
  transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), background var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1));
}
.org-picker-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-refraction-top, rgba(255, 255, 255, 0.5)), transparent);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}
.org-picker-item:hover {
  transform: translateY(-2px) translateX(4px);
  background: linear-gradient(135deg, var(--glass-medium), var(--glass-light));
  box-shadow: var(--shadow-glass-md);
}
.org-picker-item:hover::before {
  background: linear-gradient(90deg, transparent, var(--glass-refraction-top, rgba(255, 255, 255, 0.7)), transparent);
}
.org-picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.org-picker-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glass-md);
}
.org-picker-item:active {
  transform: translateY(0);
}
.org-picker-item--pending {
  opacity: 0.7;
  cursor: not-allowed;
}
.org-picker-item--pending:hover {
  transform: none;
}

.org-picker-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-primary, #38bdf8) 0%, var(--accent-info, #22d3ee) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25);
}
.org-picker-icon i {
  font-size: 20px;
  color: #ffffff;
}

.org-picker-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.org-picker-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #272727);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .org-picker-name {
    color: #ffffff;
  }
}
[data-theme=dark] .org-picker-name {
  color: #ffffff;
}

.org-picker-roles {
  font-size: 12px;
  color: var(--text-tertiary, #888);
  text-transform: capitalize;
}

.org-picker-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.org-picker-badge.pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.org-picker-arrow {
  font-size: 14px;
  color: var(--text-quaternary, #aaa);
  transition: transform 0.2s ease;
}
.org-picker-item:hover .org-picker-arrow {
  transform: translateX(2px);
  color: var(--accent-primary, #38bdf8);
}

.pending-org-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  min-height: 72px;
  background: linear-gradient(135deg, var(--glass-light), var(--glass-ultra-light));
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  border-radius: 12px;
  border: none;
  position: relative;
  box-shadow: var(--shadow-glass-sm);
  transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), background var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1));
}
.pending-org-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-refraction-top, rgba(255, 255, 255, 0.5)), transparent);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}
.pending-org-banner:hover {
  transform: translateY(-2px) translateX(4px);
  background: linear-gradient(135deg, var(--glass-medium), var(--glass-light));
  box-shadow: var(--shadow-glass-md);
}
.pending-org-banner:hover::before {
  background: linear-gradient(90deg, transparent, var(--glass-refraction-top, rgba(255, 255, 255, 0.7)), transparent);
}
.pending-org-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  margin-top: 16px;
  background: linear-gradient(135deg, rgba(52, 199, 89, 0.15) 0%, rgba(52, 199, 89, 0.08) 100%);
  border: 1px solid rgba(52, 199, 89, 0.3);
}
.pending-org-banner.hidden {
  display: none;
}

.pending-org-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-success, #34c759) 0%, #2da44e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(52, 199, 89, 0.25);
}
.pending-org-icon i {
  font-size: 20px;
  color: #ffffff;
}

.pending-org-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pending-org-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #272727);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .pending-org-title {
    color: #ffffff;
  }
}
[data-theme=dark] .pending-org-title {
  color: #ffffff;
}

.pending-org-hint {
  font-size: 12px;
  color: var(--text-tertiary, #888);
}

.pending-org-btn {
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent-primary, #4CAF50) 0%, var(--accent-primary-lighter, #66bb6a) 50%, var(--accent-primary, #4CAF50) 100%);
  background-size: 200% 200%;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-accent-glow, 0 4px 15px rgba(76, 175, 80, 0.4)), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), background-position var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1));
}
.pending-org-btn:hover {
  background-position: 100% 100%;
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent-glow-intense, 0 8px 25px rgba(76, 175, 80, 0.5)), 0 0 40px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.pending-org-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.pending-org-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.pending-org-btn {
  padding: 10px 16px;
  font-size: 14px;
  gap: 6px;
}
.pending-org-btn i {
  font-size: 12px;
}

.create-org-form-container {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.create-org-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tier-purchased-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(52, 199, 89, 0.15) 0%, rgba(52, 199, 89, 0.08) 100%);
  border: 1px solid rgba(52, 199, 89, 0.3);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-success, #34c759);
}
.tier-purchased-badge i {
  font-size: 16px;
}

.form-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--border-primary, #e4e4e4);
}
.form-section:last-of-type {
  border-bottom: none;
}
.form-section label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .form-section {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }
}
[data-theme=dark] .form-section {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.input-with-button {
  display: flex;
  gap: 8px;
}
.input-with-button .form-input {
  flex: 1;
}

.lookup-btn {
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent-primary, #4CAF50) 0%, var(--accent-primary-lighter, #66bb6a) 50%, var(--accent-primary, #4CAF50) 100%);
  background-size: 200% 200%;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-accent-glow, 0 4px 15px rgba(76, 175, 80, 0.4)), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), background-position var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1));
}
.lookup-btn:hover {
  background-position: 100% 100%;
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent-glow-intense, 0 8px 25px rgba(76, 175, 80, 0.5)), 0 0 40px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.lookup-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.lookup-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.lookup-btn {
  padding: 12px 20px;
  font-size: 14px;
  white-space: nowrap;
}
.lookup-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-hint {
  font-size: 12px;
  color: var(--text-tertiary, #888);
  margin-top: 8px;
  font-style: italic;
}

.form-error {
  font-size: 12px;
  color: var(--accent-danger, #fb4268);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.form-error::before {
  content: "\f071";
  font-family: FontAwesome;
  font-style: normal;
}
.form-error.hidden {
  display: none;
}

.abn-details.hidden {
  display: none;
}

.gst-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gst-status-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}
.gst-status-badge.gst-registered {
  background: rgba(52, 199, 89, 0.15);
  color: var(--accent-success, #34c759);
}
.gst-status-badge.gst-not-registered {
  background: rgba(120, 120, 128, 0.15);
  color: var(--text-tertiary, #888);
}

.payto-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  margin-top: 12px;
  background: var(--bg-tertiary, #f7f7f7);
  border-radius: 8px;
  font-size: 13px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .payto-preview {
    background: rgba(255, 255, 255, 0.05);
  }
}
[data-theme=dark] .payto-preview {
  background: rgba(255, 255, 255, 0.05);
}

.payto-preview-label {
  color: var(--text-tertiary, #888);
}

.payto-preview-value {
  font-weight: 600;
  color: var(--text-primary, #272727);
  flex: 1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .payto-preview-value {
    color: #ffffff;
  }
}
[data-theme=dark] .payto-preview-value {
  color: #ffffff;
}

.payto-char-count {
  font-size: 11px;
  color: var(--text-quaternary, #aaa);
}
.payto-char-count.warning {
  color: var(--accent-warning, #f59e0b);
}

.create-org-submit {
  width: 100%;
  margin-top: 24px;
}

.user-edit-info {
  padding: 16px;
  background: var(--bg-tertiary, #f7f7f7);
  border-radius: 12px;
  margin-bottom: 16px;
}
.user-edit-info p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary, #606060);
}
.user-edit-info p + p {
  margin-top: 8px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .user-edit-info {
    background: rgba(255, 255, 255, 0.05);
  }
}
[data-theme=dark] .user-edit-info {
  background: rgba(255, 255, 255, 0.05);
}

.user-edit-section {
  margin-bottom: 20px;
}
.user-edit-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #272727);
  margin: 0 0 8px 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .user-edit-section-title {
    color: #ffffff;
  }
}
[data-theme=dark] .user-edit-section-title {
  color: #ffffff;
}
.user-edit-section-hint {
  font-size: 12px;
  color: var(--text-tertiary, #888);
  margin: 0 0 12px 0;
}

.user-roles-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-role-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-tertiary, #f7f7f7);
  border-radius: 10px;
  transition: background 0.2s ease;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .user-role-item {
    background: rgba(255, 255, 255, 0.05);
  }
}
[data-theme=dark] .user-role-item {
  background: rgba(255, 255, 255, 0.05);
}

.role-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.role-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #272727);
  text-transform: capitalize;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .role-name {
    color: #ffffff;
  }
}
[data-theme=dark] .role-name {
  color: #ffffff;
}

.role-description {
  font-size: 12px;
  color: var(--text-tertiary, #888);
}

.role-toggle.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.invite-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-tertiary, #f7f7f7);
  border-radius: 12px;
  margin-bottom: 20px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .invite-tabs {
    background: rgba(255, 255, 255, 0.05);
  }
}
[data-theme=dark] .invite-tabs {
  background: rgba(255, 255, 255, 0.05);
}

.invite-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary, #888);
  cursor: pointer;
  transition: all 0.2s ease;
}
.invite-tab i {
  font-size: 14px;
}
.invite-tab:hover {
  color: var(--text-primary, #272727);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .invite-tab:hover {
    color: #ffffff;
  }
}
[data-theme=dark] .invite-tab:hover {
  color: #ffffff;
}
.invite-tab.active {
  background: var(--bg-secondary, #ffffff);
  color: var(--accent-primary, #38bdf8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .invite-tab.active {
    background: rgba(255, 255, 255, 0.1);
  }
}
[data-theme=dark] .invite-tab.active {
  background: rgba(255, 255, 255, 0.1);
}

.invite-tab-content.hidden {
  display: none;
}

.invite-qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.invite-qr-hint {
  font-size: 13px;
  color: var(--text-tertiary, #888);
  text-align: center;
  margin-top: 16px;
}

.invite-send-btn {
  width: 100%;
  margin-top: 16px;
}

.invite-role-section {
  padding: 16px;
  margin-top: 16px;
  background: var(--bg-tertiary, #f7f7f7);
  border-radius: 12px;
}
.invite-role-section h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #272727);
  margin: 0 0 8px 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .invite-role-section h4 {
    color: #ffffff;
  }
}
[data-theme=dark] .invite-role-section h4 {
  color: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .invite-role-section {
    background: rgba(255, 255, 255, 0.05);
  }
}
[data-theme=dark] .invite-role-section {
  background: rgba(255, 255, 255, 0.05);
}

.invite-role-hint {
  font-size: 12px;
  color: var(--text-tertiary, #888);
  margin: 0;
}

.quick-add-user-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.quick-add-user-buttons {
  display: flex;
  gap: 8px;
}

.quick-add-user-qr-btn,
.quick-add-user-email-btn {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 14px;
}
.quick-add-user-qr-btn i,
.quick-add-user-email-btn i {
  font-size: 22px;
}

.quick-add-user-qr-btn {
  background: linear-gradient(135deg, var(--accent-info, #22d3ee) 0%, var(--accent-primary, #38bdf8) 100%);
  box-shadow: 0 4px 16px rgba(34, 211, 238, 0.3);
}

.quick-add-user-email-btn {
  background: linear-gradient(135deg, var(--accent-success, #34c759) 0%, #2da44e 100%);
  box-shadow: 0 4px 16px rgba(52, 199, 89, 0.3);
}

.quick-add-user-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quick-add-user-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #272727);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .quick-add-user-label {
    color: #ffffff;
  }
}
[data-theme=dark] .quick-add-user-label {
  color: #ffffff;
}

.quick-add-user-hint {
  font-size: 12px;
  color: var(--text-quaternary, #8888a0);
}

.payment-recovery {
  margin: 16px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid;
  animation: slideDown 0.3s ease-out;
}
.payment-recovery.recovery-info {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.1) 0%, rgba(56, 189, 248, 0.05) 100%);
  border-color: var(--accent-info, #22d3ee);
}
.payment-recovery.recovery-info .recovery-header i {
  color: var(--accent-info, #22d3ee);
}
.payment-recovery.recovery-warning {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
  border-color: var(--accent-warning, #f59e0b);
}
.payment-recovery.recovery-warning .recovery-header i {
  color: var(--accent-warning, #f59e0b);
}
.payment-recovery.recovery-error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%);
  border-color: var(--accent-danger, #ef4444);
}
.payment-recovery.recovery-error .recovery-header i {
  color: var(--accent-danger, #ef4444);
}
.payment-recovery .recovery-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.payment-recovery .recovery-header i {
  font-size: 20px;
}
.payment-recovery .recovery-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #272727);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .payment-recovery .recovery-title {
    color: #ffffff;
  }
}
[data-theme=dark] .payment-recovery .recovery-title {
  color: #ffffff;
}
.payment-recovery .recovery-message {
  font-size: 14px;
  color: var(--text-secondary, #666);
  margin-bottom: 12px;
  line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .payment-recovery .recovery-message {
    color: var(--text-tertiary, #aaa);
  }
}
[data-theme=dark] .payment-recovery .recovery-message {
  color: var(--text-tertiary, #aaa);
}
.payment-recovery .recovery-steps {
  margin: 0 0 16px 0;
  padding-left: 20px;
}
.payment-recovery .recovery-steps li {
  font-size: 13px;
  color: var(--text-tertiary, #888);
  margin-bottom: 6px;
  line-height: 1.4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .payment-recovery .recovery-steps li {
    color: var(--text-quaternary, #999);
  }
}
[data-theme=dark] .payment-recovery .recovery-steps li {
  color: var(--text-quaternary, #999);
}
.payment-recovery .recovery-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.payment-recovery .recovery-actions .btn {
  flex: 1;
  min-width: 100px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.payment-recovery .recovery-actions .btn.btn-primary {
  background: var(--accent-primary, #38bdf8);
  color: white;
  border: none;
}
.payment-recovery .recovery-actions .btn.btn-primary:hover {
  background: var(--accent-primary-hover, #0ea5e9);
}
.payment-recovery .recovery-actions .btn.btn-secondary {
  background: transparent;
  color: var(--text-primary, #272727);
  border: 1px solid var(--border-color, #e0e0e0);
}
.payment-recovery .recovery-actions .btn.btn-secondary:hover {
  background: var(--bg-tertiary, #f5f5f5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .payment-recovery .recovery-actions .btn.btn-secondary {
    color: #ffffff;
    border-color: var(--border-color-dark, #444);
  }
  :root:not([data-theme]) .payment-recovery .recovery-actions .btn.btn-secondary:hover {
    background: var(--bg-secondary-dark, #2a2a2a);
  }
}
[data-theme=dark] .payment-recovery .recovery-actions .btn.btn-secondary {
  color: #ffffff;
  border-color: var(--border-color-dark, #444);
}
[data-theme=dark] .payment-recovery .recovery-actions .btn.btn-secondary:hover {
  background: var(--bg-secondary-dark, #2a2a2a);
}
.payment-recovery .recovery-actions .btn.btn-link {
  background: transparent;
  border: none;
  color: var(--text-tertiary, #888);
  flex: 0;
  min-width: auto;
}
.payment-recovery .recovery-actions .btn.btn-link:hover {
  color: var(--text-primary, #272727);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .payment-recovery .recovery-actions .btn.btn-link:hover {
    color: #ffffff;
  }
}
[data-theme=dark] .payment-recovery .recovery-actions .btn.btn-link:hover {
  color: #ffffff;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fee-breakdown {
  background: var(--bg-secondary, #f8f8f8);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .fee-breakdown {
    background: var(--bg-secondary-dark, #1e1e1e);
  }
}
[data-theme=dark] .fee-breakdown {
  background: var(--bg-secondary-dark, #1e1e1e);
}
.fee-breakdown .fee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
}
.fee-breakdown .fee-row:not(:last-child) {
  border-bottom: 1px solid var(--border-color, #eee);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .fee-breakdown .fee-row:not(:last-child) {
    border-color: var(--border-color-dark, #333);
  }
}
[data-theme=dark] .fee-breakdown .fee-row:not(:last-child) {
  border-color: var(--border-color-dark, #333);
}
.fee-breakdown .fee-row .fee-label {
  color: var(--text-secondary, #666);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .fee-breakdown .fee-row .fee-label {
    color: var(--text-tertiary, #aaa);
  }
}
[data-theme=dark] .fee-breakdown .fee-row .fee-label {
  color: var(--text-tertiary, #aaa);
}
.fee-breakdown .fee-row .fee-value {
  font-weight: 500;
  color: var(--text-primary, #272727);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .fee-breakdown .fee-row .fee-value {
    color: #ffffff;
  }
}
[data-theme=dark] .fee-breakdown .fee-row .fee-value {
  color: #ffffff;
}
.fee-breakdown .fee-row.fee-total {
  padding-top: 12px;
  margin-top: 4px;
  font-weight: 600;
}
.fee-breakdown .fee-row.fee-total .fee-label {
  color: var(--text-primary, #272727);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .fee-breakdown .fee-row.fee-total .fee-label {
    color: #ffffff;
  }
}
[data-theme=dark] .fee-breakdown .fee-row.fee-total .fee-label {
  color: #ffffff;
}
.fee-breakdown .fee-row.fee-total .fee-value {
  font-size: 16px;
  color: var(--accent-success, #34c759);
}
.fee-breakdown .fee-tier-badge {
  display: inline-block;
  padding: 4px 8px;
  background: linear-gradient(135deg, var(--accent-primary, #38bdf8) 0%, var(--accent-info, #22d3ee) 100%);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media only screen and (min-width: 481px) {
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
    min-height: 100vh;
    isolation: isolate;
  }
}

.app-container {
  position: relative;
  width: 100%;
  min-width: 320px;
  max-width: 100%;
  height: 100dvh;
  height: 100vh;
  margin: 0 auto;
  z-index: 1;
}
@media only screen and (min-width: 481px) {
  .app-container {
    max-width: 430px;
    max-height: 932px;
    height: min(100dvh, 932px);
    border-radius: 24px;
    box-shadow: 0 0 0 1px var(--border-primary, rgba(0, 0, 0, 0.1)), 0 8px 32px rgba(0, 0, 0, 0.12), 0 16px 48px rgba(0, 0, 0, 0.08), 0 32px 64px rgba(0, 0, 0, 0.06);
    overflow: hidden;
  }
}
@media only screen and (max-width: 480px) {
  .app-container {
    max-width: 100%;
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
}
.app-container h1 {
  font-size: 24px;
  margin: 0;
}
.app-container .content {
  position: absolute;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  padding: 7rem 12px calc(7.5rem + 8px) 12px;
  z-index: 1;
  opacity: 0;
  border: none;
  transition: opacity 0.2s ease;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.app-container .content::-webkit-scrollbar {
  display: none;
}
.app-container .content {
  height: 100dvh;
  box-sizing: border-box;
  contain: layout style;
}
.app-container .content:has(.page-action-bar), .app-container .content:has(.cart-summary-bar) {
  padding-bottom: 7.5rem;
}
@media only screen and (min-width: 481px) {
  .app-container .content {
    height: 100%;
  }
}
.app-container .content {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 252, 0.97) 100%);
}
.app-container .content .top-content-container {
  position: relative;
  top: 0;
  width: 100%;
  height: 60%;
  min-height: 200px;
  max-height: 60%;
  flex: 0 0 60%;
  flex-shrink: 0;
  margin-bottom: 24px;
  border: none;
  border-radius: 20px;
  padding: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.app-container .active-app {
  opacity: 1;
  display: flex;
}

.pos-header-overlay {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: 100%;
  min-width: 320px;
  max-width: 100%;
}
@media only screen and (min-width: 481px) {
  .pos-header-overlay {
    max-width: 430px;
    top: max(0px, (100dvh - 932px) / 2);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }
}
.pos-header-overlay {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.95) 100%);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.5) 80%, transparent 100%) 1;
  box-shadow: inset 0 1px 0 var(--glass-refraction-top, rgba(255, 255, 255, 0.5)), inset 0 -1px 0 var(--glass-refraction-bottom, rgba(255, 255, 255, 0.1)), 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02);
}
.pos-header-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  pointer-events: none;
  z-index: 1;
}
.pos-header-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 40%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .pos-header-overlay {
    background: linear-gradient(180deg, rgba(30, 30, 40, 0.96) 0%, rgba(25, 25, 35, 0.95) 100%);
    border-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.15) 80%, transparent 100%) 1;
    box-shadow: 0 0 60px var(--glass-ambient-glow, rgba(100, 100, 140, 0.1)), inset 0 1px 0 var(--glass-refraction-top, rgba(255, 255, 255, 0.1)), 0 4px 20px rgba(0, 0, 0, 0.3);
  }
  :root:not([data-theme]) .pos-header-overlay::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  }
  :root:not([data-theme]) .pos-header-overlay::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 100%);
  }
}
[data-theme=dark] .pos-header-overlay {
  background: linear-gradient(180deg, rgba(30, 30, 40, 0.96) 0%, rgba(25, 25, 35, 0.95) 100%);
  border-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.15) 80%, transparent 100%) 1;
  box-shadow: 0 0 60px var(--glass-ambient-glow, rgba(100, 100, 140, 0.1)), inset 0 1px 0 var(--glass-refraction-top, rgba(255, 255, 255, 0.1)), 0 4px 20px rgba(0, 0, 0, 0.3);
}
[data-theme=dark] .pos-header-overlay::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}
[data-theme=dark] .pos-header-overlay::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 100%);
}

.pos-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 10px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.pos-header-left {
  display: flex;
  align-items: center;
}

.pos-logo-container {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  position: relative;
}

.pos-logo-icon {
  width: 2.6rem;
  height: 2.6rem;
  padding: 0.35rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  color: var(--text-primary);
}
.pos-logo-icon::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
  animation: shine 3s ease-in-out infinite;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .pos-logo-icon {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: #ffffff;
  }
  :root:not([data-theme]) .pos-logo-icon::after {
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
  }
}
[data-theme=dark] .pos-logo-icon {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
[data-theme=dark] .pos-logo-icon::after {
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
}

.pos-branding {
  display: flex;
  flex-direction: column;
  gap: 0.088rem;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: -0.35px;
  color: var(--text-primary);
  text-align: left;
  text-wrap-mode: nowrap;
}

.pos-powered-by {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .pos-powered-by {
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}
[data-theme=dark] .pos-powered-by {
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.pos-brand-name {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.35px;
  color: var(--text-primary);
  border-bottom: 1px solid #a1a1a1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.2);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .pos-brand-name {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.3);
  }
}
[data-theme=dark] .pos-brand-name {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.3);
}

.pos-header-right {
  display: flex;
  align-items: center;
}

.pos-settlement-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  background: rgba(76, 175, 80, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(76, 175, 80, 0.4);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}
.pos-settlement-status::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
  animation: badge-shine 4s ease-in-out infinite;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .pos-settlement-status {
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.3);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
}
[data-theme=dark] .pos-settlement-status {
  background: rgba(76, 175, 80, 0.15);
  border: 1px solid rgba(76, 175, 80, 0.3);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.pos-status-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
}

.pos-status-indicator {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgb(76, 255, 120);
  box-shadow: 0 0 10px rgba(76, 255, 120, 0.8), 0 0 20px rgba(76, 255, 120, 0.4);
  animation: pulse-green 2s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

.footer {
  position: fixed;
  display: flex;
  width: 100%;
  min-width: 320px;
  max-width: 100%;
  height: 7.5rem;
  align-items: center;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
}
@media only screen and (min-width: 481px) {
  .footer {
    max-width: 430px;
    bottom: max(0px, (100dvh - 932px) / 2);
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
  }
}
.footer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.25) 100%);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid transparent;
  border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 100%) 1;
  box-shadow: inset 0 1px 0 var(--glass-refraction-top, rgba(255, 255, 255, 0.6)), inset 0 -1px 0 var(--glass-refraction-bottom, rgba(255, 255, 255, 0.15)), 0 4px 20px rgba(0, 0, 0, 0.08), 0 8px 40px rgba(0, 0, 0, 0.04);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.95) 100%);
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08), 0 -8px 40px rgba(0, 0, 0, 0.04), inset 0 1px 0 var(--glass-refraction-top, rgba(255, 255, 255, 0.5));
}
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  pointer-events: none;
  z-index: 1;
}
.footer::after {
  content: "";
  position: absolute;
  top: -30px;
  left: 30%;
  width: 180px;
  height: 80px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
  filter: blur(25px);
  pointer-events: none;
  z-index: -1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .footer {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid transparent;
    border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%) 1;
    box-shadow: 0 0 60px var(--glass-ambient-glow, rgba(100, 100, 140, 0.1)), inset 0 1px 0 var(--glass-refraction-top, rgba(255, 255, 255, 0.12)), inset 0 -1px 0 var(--glass-refraction-bottom, rgba(0, 0, 0, 0.2)), 0 4px 20px rgba(0, 0, 0, 0.3);
    background: linear-gradient(180deg, rgba(30, 30, 40, 0.96) 0%, rgba(25, 25, 35, 0.95) 100%);
    box-shadow: 0 0 60px var(--glass-ambient-glow, rgba(100, 100, 140, 0.1)), 0 -4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 var(--glass-refraction-top, rgba(255, 255, 255, 0.1));
  }
  :root:not([data-theme]) .footer::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  }
  :root:not([data-theme]) .footer::after {
    background: radial-gradient(ellipse at center, rgba(100, 100, 140, 0.1) 0%, transparent 70%);
  }
}
[data-theme=dark] .footer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid transparent;
  border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%) 1;
  box-shadow: 0 0 60px var(--glass-ambient-glow, rgba(100, 100, 140, 0.1)), inset 0 1px 0 var(--glass-refraction-top, rgba(255, 255, 255, 0.12)), inset 0 -1px 0 var(--glass-refraction-bottom, rgba(0, 0, 0, 0.2)), 0 4px 20px rgba(0, 0, 0, 0.3);
  background: linear-gradient(180deg, rgba(30, 30, 40, 0.96) 0%, rgba(25, 25, 35, 0.95) 100%);
  box-shadow: 0 0 60px var(--glass-ambient-glow, rgba(100, 100, 140, 0.1)), 0 -4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 var(--glass-refraction-top, rgba(255, 255, 255, 0.1));
}
[data-theme=dark] .footer::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}
[data-theme=dark] .footer::after {
  background: radial-gradient(ellipse at center, rgba(100, 100, 140, 0.1) 0%, transparent 70%);
}
.footer .total-price-container,
.footer .total-quantity-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  font-size: 14px;
}
.footer .total-quantity-container {
  left: 142px;
  align-items: flex-end;
}
.footer .total-price-container {
  left: auto;
  right: 108px;
  align-items: flex-start;
}
.footer .total-quantity-label,
.footer .total-quantity-value {
  display: block;
  text-align: right;
  line-height: 1.5em;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-tertiary);
}
.footer .total-price-label,
.footer .total-price-value {
  display: block;
  min-width: 5em;
  text-align: left;
  line-height: 1.5em;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-tertiary);
}
.footer .total-quantity-value,
.footer .total-price-value {
  font-size: 24px;
}
.footer .menu-item,
.footer .nav-button,
.footer .context-action-button {
  -webkit-appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  outline: none;
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
  touch-action: manipulation;
}
.footer .menu-item::-moz-focus-inner,
.footer .nav-button::-moz-focus-inner,
.footer .context-action-button::-moz-focus-inner {
  border: 0;
}
.footer .menu-item:disabled,
.footer .nav-button:disabled,
.footer .context-action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.footer .menu-item,
.footer .nav-button,
.footer .context-action-button {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-glass-md), 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), background var(--transition-normal, 0.2s ease), border-color var(--transition-normal, 0.2s ease), color var(--transition-normal, 0.2s ease), box-shadow 0.15s ease-out;
}
.footer .menu-item::before,
.footer .nav-button::before,
.footer .context-action-button::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  pointer-events: none;
}
.footer .menu-item:hover:not([disabled]),
.footer .nav-button:hover:not([disabled]),
.footer .context-action-button:hover:not([disabled]) {
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-glass-lg), 0 0 20px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.15);
}
.footer .menu-item:hover:not([disabled])::before,
.footer .nav-button:hover:not([disabled])::before,
.footer .context-action-button:hover:not([disabled])::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .footer .menu-item,
  :root:not([data-theme]) .footer .nav-button,
  :root:not([data-theme]) .footer .context-action-button {
    background: linear-gradient(135deg, rgba(60, 60, 70, 0.9) 0%, rgba(45, 45, 55, 0.8) 100%);
    color: white;
    box-shadow: var(--shadow-glass-md), 0 0 40px rgba(100, 100, 140, 0.1);
  }
  :root:not([data-theme]) .footer .menu-item::before,
  :root:not([data-theme]) .footer .nav-button::before,
  :root:not([data-theme]) .footer .context-action-button::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  }
}
[data-theme=dark] .footer .menu-item,
[data-theme=dark] .footer .nav-button,
[data-theme=dark] .footer .context-action-button {
  background: linear-gradient(135deg, rgba(60, 60, 70, 0.9) 0%, rgba(45, 45, 55, 0.8) 100%);
  color: white;
  box-shadow: var(--shadow-glass-md), 0 0 40px rgba(100, 100, 140, 0.1);
}
[data-theme=dark] .footer .menu-item::before,
[data-theme=dark] .footer .nav-button::before,
[data-theme=dark] .footer .context-action-button::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}
.footer .menu-item:active:not([disabled]),
.footer .nav-button:active:not([disabled]),
.footer .context-action-button:active:not([disabled]) {
  transform: scale(0.95);
  box-shadow: var(--shadow-glass-sm);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .footer .menu-item:active:not([disabled]),
  :root:not([data-theme]) .footer .nav-button:active:not([disabled]),
  :root:not([data-theme]) .footer .context-action-button:active:not([disabled]) {
    background: linear-gradient(135deg, rgba(70, 70, 80, 0.9) 0%, rgba(55, 55, 65, 0.8) 100%);
  }
}
[data-theme=dark] .footer .menu-item:active:not([disabled]),
[data-theme=dark] .footer .nav-button:active:not([disabled]),
[data-theme=dark] .footer .context-action-button:active:not([disabled]) {
  background: linear-gradient(135deg, rgba(70, 70, 80, 0.9) 0%, rgba(55, 55, 65, 0.8) 100%);
}
.footer .menu-item i,
.footer .nav-button i,
.footer .context-action-button i {
  background-color: transparent;
  background: none;
  display: block;
  width: 100%;
  height: auto;
  font-size: 24px;
  line-height: 1;
  color: inherit;
  position: relative;
  z-index: 2;
}
.footer .menu-item,
.footer .nav-button,
.footer .context-action-button {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 64px;
  height: 64px;
  top: 28px;
  right: 4px;
  color: var(--text-secondary);
}
.footer .menu-item::before,
.footer .nav-button::before,
.footer .context-action-button::before {
  color: inherit;
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer .menu-item i,
.footer .nav-button i,
.footer .context-action-button i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.footer .menu-item i:nth-child(2),
.footer .nav-button i:nth-child(2),
.footer .context-action-button i:nth-child(2) {
  font-size: 28px;
}
.footer .menu-item.icon,
.footer .nav-button.icon,
.footer .context-action-button.icon {
  width: 50px;
}
.footer .menu-item.icon svg,
.footer .nav-button.icon svg,
.footer .context-action-button.icon svg {
  margin-top: 3px;
  width: 30px;
  height: 30px;
  fill: currentColor;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .footer .menu-item,
  :root:not([data-theme]) .footer .nav-button,
  :root:not([data-theme]) .footer .context-action-button {
    color: #ffffff;
  }
  :root:not([data-theme]) .footer .menu-item::before,
  :root:not([data-theme]) .footer .nav-button::before,
  :root:not([data-theme]) .footer .context-action-button::before {
    color: #ffffff;
  }
}
[data-theme=dark] .footer .menu-item,
[data-theme=dark] .footer .nav-button,
[data-theme=dark] .footer .context-action-button {
  color: #ffffff;
}
[data-theme=dark] .footer .menu-item::before,
[data-theme=dark] .footer .nav-button::before,
[data-theme=dark] .footer .context-action-button::before {
  color: #ffffff;
}
.footer .nav-button {
  position: absolute;
  width: 96px;
  height: 96px;
  left: 10px;
  top: 12px;
  z-index: 10001;
  color: var(--text-secondary);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .footer .nav-button {
    color: #ffffff;
  }
}
[data-theme=dark] .footer .nav-button {
  color: #ffffff;
}
.footer .nav-button i {
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.footer .nav-button.menu-active i {
  transform: rotate(90deg);
}
@media screen and (max-width: 1000px) {
  .footer .context-action-button {
    margin-right: 16px;
    top: 28px;
    right: 0;
    position: fixed;
  }
}
.footer .context-action-button.hidden {
  display: none !important;
}
.footer .context-action-button.highlighted {
  background-image: linear-gradient(to top, #4caf50 0%, #66bb6a 100%);
  border-color: #4caf50;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
  opacity: 1;
}
.footer .context-action-button.highlighted i {
  color: #fff;
}
.footer .context-action-button.highlighted:active:not([disabled]) {
  background-image: linear-gradient(to top, #43a047 0%, #5cb860 100%);
  box-shadow: 0 2px 6px rgba(76, 175, 80, 0.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .footer .context-action-button.highlighted {
    background-image: linear-gradient(to top, #388e3c 0%, #4caf50 100%);
    border-color: #388e3c;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.5);
  }
}
[data-theme=dark] .footer .context-action-button.highlighted {
  background-image: linear-gradient(to top, #388e3c 0%, #4caf50 100%);
  border-color: #388e3c;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.5);
}
.footer .items-wrapper {
  padding: 0;
  margin: 0;
  top: 12px;
  left: 10px;
  position: absolute;
  display: flex;
  align-items: center;
  z-index: 10000;
  transition: left 0.15s ease, right 0.15s ease;
}
.footer .items-wrapper.slide-out-left {
  animation: slideOutLeft 0.2s ease forwards;
}
.footer .items-wrapper.slide-in-right {
  animation: slideInRight 0.2s ease forwards;
}
.footer .items-wrapper.slide-out-right {
  animation: slideOutRight 0.2s ease forwards;
}
.footer .items-wrapper.slide-in-left {
  animation: slideInLeft 0.2s ease forwards;
}
.footer .items-wrapper .menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0px;
  top: 0px;
  text-decoration: none;
  width: 96px;
  height: 96px;
  border-radius: 12px;
  text-align: center;
}
.footer .items-wrapper .menu-item i {
  font-size: 24px;
  line-height: 24px;
  height: 24px;
  margin-bottom: 6px;
}
.footer .items-wrapper .menu-item .btn-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  color: currentColor;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}
.footer .items-wrapper .menu-item {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.97) 50%, rgba(241, 245, 249, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  overflow: hidden;
  color: var(--text-secondary, #2d2d44);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.footer .items-wrapper .menu-item::before {
  color: inherit;
  transition: transform 0.2s ease;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .footer .items-wrapper .menu-item {
    background: linear-gradient(145deg, rgba(45, 45, 55, 0.95) 0%, rgba(35, 35, 45, 0.9) 50%, rgba(28, 28, 38, 0.85) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }
}
[data-theme=dark] .footer .items-wrapper .menu-item {
  background: linear-gradient(145deg, rgba(45, 45, 55, 0.95) 0%, rgba(35, 35, 45, 0.9) 50%, rgba(28, 28, 38, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.footer .items-wrapper .menu-item::-moz-focus-inner {
  border: 0;
}
.footer .items-wrapper .menu-item:hover:not([disabled]) {
  transform: translateY(-2px) scale(1.02);
}
.footer .items-wrapper .menu-item:active:not([disabled]) {
  transform: translateY(0) scale(0.98);
}
.footer .items-wrapper .menu-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.footer .items-wrapper .menu-item.icon {
  width: 50px;
}
.footer .items-wrapper .menu-item.icon svg {
  margin-top: 3px;
  width: 30px;
  height: 30px;
  fill: currentColor;
}
.footer .items-wrapper .menu-item:nth-child(1),
.footer .items-wrapper .menu-item:nth-child(2),
.footer .items-wrapper .menu-item:nth-child(3),
.footer .items-wrapper .menu-item:nth-child(4),
.footer .items-wrapper .menu-item:nth-child(5),
.footer .items-wrapper .menu-item:nth-child(6) {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0px, 0px);
  opacity: 0;
  transition: none;
}
.footer .items-wrapper.active .menu-item {
  visibility: visible;
  pointer-events: auto;
  will-change: transform, opacity;
}
.footer .items-wrapper.active .menu-item:nth-child(1) {
  animation: menuItem1 180ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0ms;
}
.footer .items-wrapper.active .menu-item:nth-child(2) {
  animation: menuItem2 180ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 30ms;
}
.footer .items-wrapper.active .menu-item:nth-child(3) {
  animation: menuItem3 180ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 60ms;
}
.footer .items-wrapper.active .menu-item:nth-child(4) {
  animation: menuItem4 180ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 30ms;
}
.footer .items-wrapper.active .menu-item:nth-child(5) {
  animation: menuItem5 180ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 60ms;
}
.footer .items-wrapper.active .menu-item:nth-child(6) {
  animation: menuItem6 180ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 60ms;
}
.footer .items-wrapper:after {
  display: block;
  content: " ";
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  position: absolute;
}
.footer .items-wrapper[data-layout=right].active .menu-item:nth-child(1) {
  animation: menuItem1Right 180ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0ms;
}
.footer .items-wrapper[data-layout=right].active .menu-item:nth-child(2) {
  animation: menuItem2Right 180ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 30ms;
}
.footer .items-wrapper[data-layout=right].active .menu-item:nth-child(3) {
  animation: menuItem3Right 180ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 60ms;
}
.footer .items-wrapper[data-layout=right].active .menu-item:nth-child(4) {
  animation: menuItem4Right 180ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 30ms;
}
.footer .items-wrapper[data-layout=right].active .menu-item:nth-child(5) {
  animation: menuItem5Right 180ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 60ms;
}
.footer .items-wrapper[data-layout=right].active .menu-item:nth-child(6) {
  animation: menuItem6Right 180ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 60ms;
}
.footer .items-wrapper .menu-item {
  position: relative;
}
.footer .items-wrapper .menu-item .nav-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
  z-index: 10;
  animation: badgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.footer .items-wrapper .menu-item .nav-badge.nav-badge-dot {
  min-width: 10px;
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  top: -2px;
  right: -2px;
}
@keyframes badgePop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.global-action-bar {
  position: absolute;
  left: 10px;
  top: 12px;
  display: flex;
  align-items: flex-start;
  z-index: 9999;
  pointer-events: none;
}
.global-action-bar.hidden {
  display: none;
}
.global-action-bar .global-bar-left {
  display: flex;
  pointer-events: auto;
  position: relative;
}
.global-action-bar .global-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.97) 50%, rgba(241, 245, 249, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  color: var(--text-secondary, #2d2d44);
  opacity: 0;
  transform: translate(0, 0);
  visibility: hidden;
  pointer-events: none;
}
.global-action-bar .global-btn i {
  font-size: 24px;
  margin-bottom: 6px;
}
.global-action-bar .global-btn .btn-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  color: currentColor;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .global-action-bar .global-btn {
    background: linear-gradient(145deg, rgba(45, 45, 55, 0.95) 0%, rgba(35, 35, 45, 0.9) 50%, rgba(28, 28, 38, 0.85) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }
}
[data-theme=dark] .global-action-bar .global-btn {
  background: linear-gradient(145deg, rgba(45, 45, 55, 0.95) 0%, rgba(35, 35, 45, 0.9) 50%, rgba(28, 28, 38, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.global-action-bar .global-btn.primary {
  background: linear-gradient(145deg, rgba(76, 175, 80, 0.95) 0%, rgba(67, 160, 71, 0.9) 50%, rgba(56, 142, 60, 0.85) 100%);
  border-color: rgba(76, 175, 80, 0.6);
  color: white;
  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.global-action-bar .global-btn.primary:disabled {
  background: linear-gradient(145deg, rgba(200, 200, 210, 0.7) 0%, rgba(185, 185, 195, 0.6) 100%);
  border-color: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.35);
  box-shadow: none;
}
.global-action-bar .global-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.global-action-bar.active .global-btn {
  visibility: visible;
  pointer-events: auto;
  will-change: transform, opacity;
}
.global-action-bar.active .global-bar-left .global-btn:nth-child(1) {
  animation: contextBtn1 180ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0ms;
}
.global-action-bar.active .global-bar-left .global-btn:nth-child(2) {
  animation: contextBtn2 180ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 60ms;
}

body.layout-right .global-action-bar {
  left: auto;
  right: 10px;
}
body.layout-right .global-action-bar.active .global-bar-left .global-btn:nth-child(1) {
  animation: contextBtn1Right 180ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0ms;
}
body.layout-right .global-action-bar.active .global-bar-left .global-btn:nth-child(2) {
  animation: contextBtn2Right 180ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 60ms;
}

.payment-summary-container.active-app ~ .footer .global-action-bar.active .global-bar-left .global-btn:nth-child(2) {
  animation: contextBtn2 180ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards, contextBtn2Expand 250ms ease-out 240ms forwards;
}
.payment-summary-container.active-app ~ .footer .global-action-bar.active .global-bar-left .global-btn:nth-child(2) i, .payment-summary-container.active-app ~ .footer .global-action-bar.active .global-bar-left .global-btn:nth-child(2) .btn-label {
  opacity: 0;
  animation: fadeInContent 300ms ease-out 500ms forwards;
}
.payment-summary-container.active-app ~ .footer .global-action-bar.active .global-bar-left .global-btn:nth-child(2).sending i {
  animation: paperPlaneContinuous 2s ease-in-out infinite;
}

body.layout-right .payment-summary-container.active-app ~ .footer .global-action-bar.active .global-bar-left .global-btn:nth-child(2) {
  animation: contextBtn2Right 180ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards, contextBtn2ExpandRight 250ms ease-out 240ms forwards;
}
body.layout-right .payment-summary-container.active-app ~ .footer .global-action-bar.active .global-bar-left .global-btn:nth-child(2) i, body.layout-right .payment-summary-container.active-app ~ .footer .global-action-bar.active .global-bar-left .global-btn:nth-child(2) .btn-label {
  opacity: 0;
  animation: fadeInContent 300ms ease-out 500ms forwards;
}
body.layout-right .payment-summary-container.active-app ~ .footer .global-action-bar.active .global-bar-left .global-btn:nth-child(2).sending i {
  animation: paperPlaneContinuous 2s ease-in-out infinite;
}

.page-action-bar {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 94px;
  min-height: 94px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-radius: 12px;
  background: rgba(20, 25, 40, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.15);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(56, 189, 248, 0.1);
  z-index: 100;
  opacity: 0;
}
.page-action-bar.active {
  animation: screenFadeSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
}
.page-action-bar.hidden {
  display: none;
}
.page-action-bar .page-bar-qty,
.page-action-bar .page-bar-total {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
}
.page-action-bar .page-bar-qty .bar-value,
.page-action-bar .page-bar-total .bar-value {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5);
  letter-spacing: -0.02em;
}
.page-action-bar .page-bar-qty .bar-label,
.page-action-bar .page-bar-total .bar-label {
  font-size: 16px;
  font-weight: 600;
  color: rgba(56, 189, 248, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=fintech]):not([data-theme=dark]) .page-action-bar {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 50%, rgba(241, 245, 249, 0.95) 100%);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }
  :root:not([data-theme=fintech]):not([data-theme=dark]) .page-action-bar .bar-value {
    color: var(--text-primary, #1a1a2e);
  }
  :root:not([data-theme=fintech]):not([data-theme=dark]) .page-action-bar .bar-label {
    color: var(--text-tertiary, #6b7280);
  }
}
[data-theme=light] .page-action-bar {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 50%, rgba(241, 245, 249, 0.95) 100%);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme=light] .page-action-bar .page-bar-qty .bar-value,
[data-theme=light] .page-action-bar .page-bar-total .bar-value {
  color: var(--text-primary, #1a1a2e);
  text-shadow: none;
}
[data-theme=light] .page-action-bar .page-bar-qty .bar-label,
[data-theme=light] .page-action-bar .page-bar-total .bar-label {
  color: var(--text-tertiary, #6b7280);
}

:root[data-theme=fintech] .global-action-bar .global-btn.primary,
:root[data-theme=dark] .global-action-bar .global-btn.primary {
  background: linear-gradient(145deg, rgba(var(--accent-primary-rgb, 76, 175, 80), 0.9) 0%, rgba(var(--accent-primary-rgb, 76, 175, 80), 0.7) 100%);
  border-color: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.15);
}
:root[data-theme=fintech] .global-action-bar .global-btn.secondary,
:root[data-theme=dark] .global-action-bar .global-btn.secondary {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.8) 0%, rgba(40, 40, 50, 0.7) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary, #d0d0d8);
}

body.layout-right .footer .nav-button {
  left: auto;
  right: 10px;
}
body.layout-right .footer .items-wrapper {
  left: auto;
  right: 106px;
}
body.layout-right .footer .context-action-button {
  right: auto;
  left: 4px;
}
body.layout-right .footer .total-quantity-container {
  left: auto;
  right: 142px;
  align-items: flex-start;
}
body.layout-right .footer .total-price-container {
  right: auto;
  left: 108px;
  align-items: flex-end;
}
body.layout-right .footer .total-quantity-label,
body.layout-right .footer .total-quantity-value {
  text-align: left;
}
body.layout-right .footer .total-price-label,
body.layout-right .footer .total-price-value {
  text-align: right;
}
@media screen and (max-width: 1000px) {
  body.layout-right .footer .context-action-button {
    right: auto;
    left: 0;
    margin-right: 0;
    margin-left: 16px;
  }
}

.footer .nav-button {
  transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), right 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s ease;
}
.footer .nav-button:active {
  transform: scale(0.95);
}
.footer .items-wrapper {
  transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), right 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.footer .context-action-button {
  transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), right 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), margin 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease, transform 0.2s ease;
}
.footer .total-quantity-container,
.footer .total-price-container {
  transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), right 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), align-items 0.4s ease;
}
.footer .total-price-label,
.footer .total-price-value,
.footer .total-quantity-label,
.footer .total-quantity-value {
  transition: text-align 0.4s ease;
}

.header {
  display: none;
}

.scroll-indicator {
  position: absolute;
  right: 4px;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.scroll-indicator.scroll-indicator-upper {
  top: calc(5.5rem + (100% - 5.5rem - 7.5rem) * 0.33);
}
.scroll-indicator.scroll-indicator-lower {
  top: calc(5.5rem + (100% - 5.5rem - 7.5rem) * 0.66);
}
.scroll-indicator.visible {
  opacity: 1;
  animation: scrollIndicatorFadeIn 0.4s ease forwards;
}
.scroll-indicator.hiding {
  animation: scrollIndicatorFadeOut 0.3s ease forwards;
}
.scroll-indicator .scroll-indicator-arrows {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 0;
}
.scroll-indicator .scroll-indicator-arrows i {
  font-size: 16px;
  line-height: 1;
  color: #3b82f6;
  animation: scrollArrowWave 2s ease-in-out infinite;
}
.scroll-indicator .scroll-indicator-arrows i.arrow-0 {
  opacity: 0.3;
  animation-delay: 0s;
}
.scroll-indicator .scroll-indicator-arrows i.arrow-1 {
  opacity: 0.45;
  animation-delay: 0.12s;
}
.scroll-indicator .scroll-indicator-arrows i.arrow-2 {
  opacity: 0.6;
  animation-delay: 0.24s;
}
.scroll-indicator .scroll-indicator-arrows i.arrow-3 {
  opacity: 0.8;
  animation-delay: 0.36s;
}
.scroll-indicator .scroll-indicator-arrows i.arrow-4 {
  opacity: 1;
  animation-delay: 0.48s;
}
[data-theme=dark] .scroll-indicator .scroll-indicator-arrows i, [data-theme=fintech] .scroll-indicator .scroll-indicator-arrows i {
  color: var(--accent-info, #22d3ee);
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.5));
}

body.layout-right .scroll-indicator {
  right: auto;
  left: 4px;
}

body.hide-button-labels .btn-label {
  display: none !important;
}

body.disable-hover-effects .item:hover {
  transform: none !important;
  box-shadow: var(--shadow-glass-sm) !important;
}
body.disable-hover-effects .item:hover::before {
  background: linear-gradient(90deg, transparent, var(--glass-refraction-top, rgba(255, 255, 255, 0.5)), transparent) !important;
}

@keyframes screenFadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes itemSlideIn {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes itemSlideInRight {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes subtleScaleIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.lists-container {
  padding: 20em 12px 8rem 12px;
  position: relative;
  width: 100%;
  min-height: 100vh;
}
@media only screen and (min-width: 481px) {
  .lists-container {
    min-height: 100%;
  }
}
.lists-container {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-primary, #ededed);
  border: none;
}
.lists-container > .top-content-container {
  padding: 20px !important;
  flex-shrink: 0 !important;
  overflow: hidden;
}
.lists-container > .top-content-container .instruction-slides {
  padding: 20px !important;
  height: 100%;
  overflow: hidden;
}
.lists-container > .top-content-container .instruction-slides .instruction-slide {
  gap: 8px !important;
}
.lists-container.active-app {
  display: flex;
}
.lists-container > h1 {
  display: none;
}
.lists-container .empty-state {
  width: 100%;
  max-width: 100%;
  padding: 48px 24px;
}
.lists-container .top-content-container > h1 {
  opacity: 0;
  animation: screenFadeSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.05s;
}
.lists-container .items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  width: 100%;
}
.lists-container .items-list .item,
.lists-container .items-list .quick-upload-item {
  opacity: 0;
  animation: itemSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.lists-container .items-list .item:nth-child(1),
.lists-container .items-list .quick-upload-item:nth-child(1) {
  animation-delay: 0.14s;
}
.lists-container .items-list .item:nth-child(2),
.lists-container .items-list .quick-upload-item:nth-child(2) {
  animation-delay: 0.18s;
}
.lists-container .items-list .item:nth-child(3),
.lists-container .items-list .quick-upload-item:nth-child(3) {
  animation-delay: 0.22s;
}
.lists-container .items-list .item:nth-child(4),
.lists-container .items-list .quick-upload-item:nth-child(4) {
  animation-delay: 0.26s;
}
.lists-container .items-list .item:nth-child(5),
.lists-container .items-list .quick-upload-item:nth-child(5) {
  animation-delay: 0.3s;
}
.lists-container .items-list .item:nth-child(6),
.lists-container .items-list .quick-upload-item:nth-child(6) {
  animation-delay: 0.34s;
}
.lists-container .items-list .item:nth-child(7),
.lists-container .items-list .quick-upload-item:nth-child(7) {
  animation-delay: 0.38s;
}
.lists-container .items-list .item:nth-child(8),
.lists-container .items-list .quick-upload-item:nth-child(8) {
  animation-delay: 0.42s;
}
.lists-container .items-list .item:nth-child(9),
.lists-container .items-list .quick-upload-item:nth-child(9) {
  animation-delay: 0.46s;
}
.lists-container .items-list .item:nth-child(10),
.lists-container .items-list .quick-upload-item:nth-child(10) {
  animation-delay: 0.5s;
}
.lists-container .items-list .item:nth-child(11),
.lists-container .items-list .quick-upload-item:nth-child(11) {
  animation-delay: 0.54s;
}
.lists-container .items-list .item:nth-child(12),
.lists-container .items-list .quick-upload-item:nth-child(12) {
  animation-delay: 0.58s;
}
.lists-container .items-list .item:nth-child(n+13),
.lists-container .items-list .quick-upload-item:nth-child(n+13) {
  animation-delay: 0.58s;
}
.lists-container .items-list .item .item-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  height: 100%;
}
.lists-container .items-list .item .item-text .title {
  flex: 1;
  margin: 0;
  padding: 0 0 0 4px;
  cursor: pointer;
}
.lists-container .items-list .item .item-text .button-wrapper,
.lists-container .items-list .item .item-text .main-button,
.lists-container .items-list .item .item-text .sub-button,
.lists-container .items-list .item .item-text .remove-list,
.lists-container .items-list .item .item-text .edit-list {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  font-size: 32px;
  font-weight: 600;
  color: var(--text-secondary, #2d2d44);
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: var(--shadow-glass-md), 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
}
.lists-container .items-list .item .item-text .button-wrapper::after,
.lists-container .items-list .item .item-text .main-button::after,
.lists-container .items-list .item .item-text .sub-button::after,
.lists-container .items-list .item .item-text .remove-list::after,
.lists-container .items-list .item .item-text .edit-list::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  pointer-events: none;
  z-index: 1;
}
.lists-container .items-list .item .item-text .button-wrapper:hover:not(:disabled),
.lists-container .items-list .item .item-text .main-button:hover:not(:disabled),
.lists-container .items-list .item .item-text .sub-button:hover:not(:disabled),
.lists-container .items-list .item .item-text .remove-list:hover:not(:disabled),
.lists-container .items-list .item .item-text .edit-list:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.05);
  border-color: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.3);
  box-shadow: var(--shadow-glass-lg), 0 0 20px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.15);
}
.lists-container .items-list .item .item-text .button-wrapper:active:not(:disabled),
.lists-container .items-list .item .item-text .main-button:active:not(:disabled),
.lists-container .items-list .item .item-text .sub-button:active:not(:disabled),
.lists-container .items-list .item .item-text .remove-list:active:not(:disabled),
.lists-container .items-list .item .item-text .edit-list:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  background: linear-gradient(145deg, rgba(235, 240, 245, 0.9) 0%, rgba(228, 233, 238, 0.8) 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), inset 0 2px 4px rgba(0, 0, 0, 0.04);
}
.lists-container .items-list .item .item-text .button-wrapper:disabled,
.lists-container .items-list .item .item-text .main-button:disabled,
.lists-container .items-list .item .item-text .sub-button:disabled,
.lists-container .items-list .item .item-text .remove-list:disabled,
.lists-container .items-list .item .item-text .edit-list:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .lists-container .items-list .item .item-text .button-wrapper,
  :root:not([data-theme]) .lists-container .items-list .item .item-text .main-button,
  :root:not([data-theme]) .lists-container .items-list .item .item-text .sub-button,
  :root:not([data-theme]) .lists-container .items-list .item .item-text .remove-list,
  :root:not([data-theme]) .lists-container .items-list .item .item-text .edit-list {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  :root:not([data-theme]) .lists-container .items-list .item .item-text .button-wrapper::after,
  :root:not([data-theme]) .lists-container .items-list .item .item-text .main-button::after,
  :root:not([data-theme]) .lists-container .items-list .item .item-text .sub-button::after,
  :root:not([data-theme]) .lists-container .items-list .item .item-text .remove-list::after,
  :root:not([data-theme]) .lists-container .items-list .item .item-text .edit-list::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  }
  :root:not([data-theme]) .lists-container .items-list .item .item-text .button-wrapper:hover:not(:disabled),
  :root:not([data-theme]) .lists-container .items-list .item .item-text .main-button:hover:not(:disabled),
  :root:not([data-theme]) .lists-container .items-list .item .item-text .sub-button:hover:not(:disabled),
  :root:not([data-theme]) .lists-container .items-list .item .item-text .remove-list:hover:not(:disabled),
  :root:not([data-theme]) .lists-container .items-list .item .item-text .edit-list:hover:not(:disabled) {
    border-color: rgba(56, 189, 248, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(56, 189, 248, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  :root:not([data-theme]) .lists-container .items-list .item .item-text .button-wrapper:active:not(:disabled),
  :root:not([data-theme]) .lists-container .items-list .item .item-text .main-button:active:not(:disabled),
  :root:not([data-theme]) .lists-container .items-list .item .item-text .sub-button:active:not(:disabled),
  :root:not([data-theme]) .lists-container .items-list .item .item-text .remove-list:active:not(:disabled),
  :root:not([data-theme]) .lists-container .items-list .item .item-text .edit-list:active:not(:disabled) {
    background: linear-gradient(145deg, rgba(40, 40, 50, 0.9) 0%, rgba(30, 30, 40, 0.8) 100%);
  }
}
[data-theme=dark] .lists-container .items-list .item .item-text .button-wrapper,
[data-theme=dark] .lists-container .items-list .item .item-text .main-button,
[data-theme=dark] .lists-container .items-list .item .item-text .sub-button,
[data-theme=dark] .lists-container .items-list .item .item-text .remove-list,
[data-theme=dark] .lists-container .items-list .item .item-text .edit-list {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .lists-container .items-list .item .item-text .button-wrapper::after,
[data-theme=dark] .lists-container .items-list .item .item-text .main-button::after,
[data-theme=dark] .lists-container .items-list .item .item-text .sub-button::after,
[data-theme=dark] .lists-container .items-list .item .item-text .remove-list::after,
[data-theme=dark] .lists-container .items-list .item .item-text .edit-list::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}
[data-theme=dark] .lists-container .items-list .item .item-text .button-wrapper:hover:not(:disabled),
[data-theme=dark] .lists-container .items-list .item .item-text .main-button:hover:not(:disabled),
[data-theme=dark] .lists-container .items-list .item .item-text .sub-button:hover:not(:disabled),
[data-theme=dark] .lists-container .items-list .item .item-text .remove-list:hover:not(:disabled),
[data-theme=dark] .lists-container .items-list .item .item-text .edit-list:hover:not(:disabled) {
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(56, 189, 248, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
[data-theme=dark] .lists-container .items-list .item .item-text .button-wrapper:active:not(:disabled),
[data-theme=dark] .lists-container .items-list .item .item-text .main-button:active:not(:disabled),
[data-theme=dark] .lists-container .items-list .item .item-text .sub-button:active:not(:disabled),
[data-theme=dark] .lists-container .items-list .item .item-text .remove-list:active:not(:disabled),
[data-theme=dark] .lists-container .items-list .item .item-text .edit-list:active:not(:disabled) {
  background: linear-gradient(145deg, rgba(40, 40, 50, 0.9) 0%, rgba(30, 30, 40, 0.8) 100%);
}
.lists-container .items-list .item .item-text .button-wrapper,
.lists-container .items-list .item .item-text .main-button,
.lists-container .items-list .item .item-text .sub-button,
.lists-container .items-list .item .item-text .remove-list,
.lists-container .items-list .item .item-text .edit-list {
  font-size: 24px;
}
.lists-container .items-list .item .item-text .proceed-to-list {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  font-size: 32px;
  font-weight: 600;
  color: var(--text-secondary, #2d2d44);
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: var(--shadow-glass-md), 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
}
.lists-container .items-list .item .item-text .proceed-to-list::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  pointer-events: none;
  z-index: 1;
}
.lists-container .items-list .item .item-text .proceed-to-list:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.05);
  border-color: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.3);
  box-shadow: var(--shadow-glass-lg), 0 0 20px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.15);
}
.lists-container .items-list .item .item-text .proceed-to-list:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  background: linear-gradient(145deg, rgba(235, 240, 245, 0.9) 0%, rgba(228, 233, 238, 0.8) 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), inset 0 2px 4px rgba(0, 0, 0, 0.04);
}
.lists-container .items-list .item .item-text .proceed-to-list:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .lists-container .items-list .item .item-text .proceed-to-list {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  :root:not([data-theme]) .lists-container .items-list .item .item-text .proceed-to-list::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  }
  :root:not([data-theme]) .lists-container .items-list .item .item-text .proceed-to-list:hover:not(:disabled) {
    border-color: rgba(56, 189, 248, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(56, 189, 248, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  :root:not([data-theme]) .lists-container .items-list .item .item-text .proceed-to-list:active:not(:disabled) {
    background: linear-gradient(145deg, rgba(40, 40, 50, 0.9) 0%, rgba(30, 30, 40, 0.8) 100%);
  }
}
[data-theme=dark] .lists-container .items-list .item .item-text .proceed-to-list {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .lists-container .items-list .item .item-text .proceed-to-list::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}
[data-theme=dark] .lists-container .items-list .item .item-text .proceed-to-list:hover:not(:disabled) {
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(56, 189, 248, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
[data-theme=dark] .lists-container .items-list .item .item-text .proceed-to-list:active:not(:disabled) {
  background: linear-gradient(145deg, rgba(40, 40, 50, 0.9) 0%, rgba(30, 30, 40, 0.8) 100%);
}
.lists-container .items-list .item .item-text .proceed-to-list {
  font-size: 24px;
}
.lists-container .items-list .item .item-text .button-wrapper {
  position: relative;
}
.lists-container .items-list .item .item-text .main-button {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.lists-container .items-list .item .item-text .sub-button {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  opacity: 0;
  transform: translateX(0);
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
.lists-container .items-list .item .item-text .button-wrapper.expanded {
  z-index: 10;
}
.lists-container .items-list .item .item-text .button-wrapper.expanded .main-button {
  opacity: 0;
  pointer-events: none;
}
.lists-container .items-list .item .item-text .button-wrapper.expanded .sub-button:first-of-type {
  transform: translateX(0%) !important;
  opacity: 1;
  pointer-events: auto;
}
.lists-container .items-list .item .item-text .button-wrapper.expanded .sub-button:last-of-type {
  transform: translateX(110%) !important;
  opacity: 1;
  pointer-events: auto;
  z-index: 100;
}
.lists-container .items-list .item .item-text .button-wrapper.expanded .sub-button:last-of-type:hover {
  transform: translateX(110%) translateY(-2px) scale(1.05) !important;
}

.list-items-container {
  padding: 20em 12px 8rem 12px;
  position: relative;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
  border: none;
  flex-direction: column;
}
.list-items-container > h1 {
  display: none;
}
.list-items-container .category-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  padding: 8px 0 12px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: inherit;
}
.list-items-container .category-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #555);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.list-items-container .category-chip:hover {
  background: rgba(0, 0, 0, 0.04);
}
.list-items-container .category-chip.active {
  background: var(--accent-primary, #4CAF50);
  border-color: var(--accent-primary, #4CAF50);
  color: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .list-items-container .category-chip {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary, #ccc);
  }
  :root:not([data-theme]) .list-items-container .category-chip:hover {
    background: rgba(255, 255, 255, 0.12);
  }
  :root:not([data-theme]) .list-items-container .category-chip.active {
    background: var(--accent-primary, #4CAF50);
    border-color: var(--accent-primary, #4CAF50);
    color: #fff;
  }
}
[data-theme=dark] .list-items-container .category-chip {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary, #ccc);
}
[data-theme=dark] .list-items-container .category-chip:hover {
  background: rgba(255, 255, 255, 0.12);
}
[data-theme=dark] .list-items-container .category-chip.active {
  background: var(--accent-primary, #4CAF50);
  border-color: var(--accent-primary, #4CAF50);
  color: #fff;
}
.list-items-container .category-header-item {
  list-style: none;
  padding: 12px 4px 4px;
  border: none;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.list-items-container .category-header-item .category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary, #888);
}
.list-items-container .category-header-item .category-header i {
  font-size: 12px;
  opacity: 0.6;
}
.list-items-container .category-select-item {
  cursor: pointer;
}
.list-items-container .category-select-item .controls {
  display: flex;
  align-items: center;
  padding-right: 4px;
}
.list-items-container .category-select-item .controls i {
  font-size: 16px;
  color: var(--text-tertiary, #888);
}
.list-items-container .category-back-item {
  cursor: pointer;
  border-left: 3px solid var(--accent-primary, #4CAF50) !important;
}
.list-items-container .category-back-item .item-text {
  display: flex;
  align-items: center;
  gap: 10px;
}
.list-items-container .category-back-item .item-text i {
  font-size: 14px;
  color: var(--accent-primary, #4CAF50);
}
.list-items-container .category-back-item .item-text .title {
  font-weight: 700;
  color: var(--accent-primary, #4CAF50);
}
.list-items-container > .top-content-container {
  padding: 24px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
.list-items-container > .top-content-container .instruction-slides {
  padding: 8px 24px !important;
  height: 100%;
  overflow-y: auto;
}
.list-items-container > .top-content-container .instruction-slides::-webkit-scrollbar {
  width: 0;
  display: none;
}
.list-items-container .empty-state {
  width: 100%;
  max-width: 100%;
  padding: 48px 24px;
}
.list-items-container .top-content-container > h1 {
  opacity: 0;
  animation: screenFadeSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.05s;
}
.list-items-container .items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  width: 100%;
}
.list-items-container .items-list .item,
.list-items-container .items-list .quick-upload-item {
  opacity: 0;
  animation: itemSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.list-items-container .items-list .item:nth-child(1),
.list-items-container .items-list .quick-upload-item:nth-child(1) {
  animation-delay: 0.14s;
}
.list-items-container .items-list .item:nth-child(2),
.list-items-container .items-list .quick-upload-item:nth-child(2) {
  animation-delay: 0.18s;
}
.list-items-container .items-list .item:nth-child(3),
.list-items-container .items-list .quick-upload-item:nth-child(3) {
  animation-delay: 0.22s;
}
.list-items-container .items-list .item:nth-child(4),
.list-items-container .items-list .quick-upload-item:nth-child(4) {
  animation-delay: 0.26s;
}
.list-items-container .items-list .item:nth-child(5),
.list-items-container .items-list .quick-upload-item:nth-child(5) {
  animation-delay: 0.3s;
}
.list-items-container .items-list .item:nth-child(6),
.list-items-container .items-list .quick-upload-item:nth-child(6) {
  animation-delay: 0.34s;
}
.list-items-container .items-list .item:nth-child(7),
.list-items-container .items-list .quick-upload-item:nth-child(7) {
  animation-delay: 0.38s;
}
.list-items-container .items-list .item:nth-child(8),
.list-items-container .items-list .quick-upload-item:nth-child(8) {
  animation-delay: 0.42s;
}
.list-items-container .items-list .item:nth-child(9),
.list-items-container .items-list .quick-upload-item:nth-child(9) {
  animation-delay: 0.46s;
}
.list-items-container .items-list .item:nth-child(10),
.list-items-container .items-list .quick-upload-item:nth-child(10) {
  animation-delay: 0.5s;
}
.list-items-container .items-list .item:nth-child(11),
.list-items-container .items-list .quick-upload-item:nth-child(11) {
  animation-delay: 0.54s;
}
.list-items-container .items-list .item:nth-child(12),
.list-items-container .items-list .quick-upload-item:nth-child(12) {
  animation-delay: 0.58s;
}
.list-items-container .items-list .item:nth-child(n+13),
.list-items-container .items-list .quick-upload-item:nth-child(n+13) {
  animation-delay: 0.58s;
}
.list-items-container.edit-mode .edit-mode-toggle {
  background: linear-gradient(145deg, rgba(var(--accent-primary-rgb, 76, 175, 80), 0.15) 0%, rgba(var(--accent-primary-rgb, 76, 175, 80), 0.08) 100%);
  border-color: var(--accent-primary, #4CAF50);
  color: var(--accent-primary, #4CAF50);
}
.list-items-container.edit-mode .edit-mode-toggle.active {
  background: var(--accent-primary, #4CAF50);
  color: #ffffff;
}
.list-items-container.edit-mode .manual-entry-item {
  display: block !important;
}
.list-items-container.edit-mode .item.editable .edit-controls {
  display: flex;
}

.edit-mode-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 12px 0;
  min-height: 56px;
}
.edit-mode-item .edit-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 56px;
  padding: 14px 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.85) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  cursor: pointer;
  transition: all 0.2s ease;
}
.edit-mode-item .edit-mode-toggle i {
  font-size: 18px;
}
.edit-mode-item .edit-mode-toggle:hover {
  background: linear-gradient(145deg, rgb(255, 255, 255) 0%, rgba(248, 250, 252, 0.95) 100%);
  border-color: var(--accent-primary, #4CAF50);
  color: var(--accent-primary, #4CAF50);
}
.edit-mode-item .edit-mode-toggle.active {
  background: var(--accent-primary, #4CAF50);
  color: #ffffff;
  border-color: var(--accent-primary, #4CAF50);
}
.edit-mode-item .edit-mode-toggle.active:hover {
  background: var(--accent-primary-lighter, #66bb6a);
}

.manual-entry-item.hidden {
  display: none !important;
}
.manual-entry-item .manual-entry-form {
  width: 100%;
  padding: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px dashed var(--accent-primary, #4CAF50);
  border-radius: 16px;
}
.manual-entry-item .manual-entry-form .manual-entry-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
  color: var(--accent-primary, #4CAF50);
}
.manual-entry-item .manual-entry-form .manual-entry-header i {
  font-size: 20px;
}
.manual-entry-item .manual-entry-form .form-group {
  margin-bottom: 12px;
  padding: 0;
  background: transparent;
  border: none;
}
.manual-entry-item .manual-entry-form .form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.manual-entry-item .manual-entry-form .form-group input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  color: var(--text-primary, #272727);
  background: linear-gradient(135deg, rgba(240, 240, 245, 0.95) 0%, rgba(235, 235, 240, 0.9) 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  transition: all 0.2s ease;
}
.manual-entry-item .manual-entry-form .form-group input:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--accent-primary, #4CAF50);
  box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.1);
}
.manual-entry-item .manual-entry-form .form-group input.error {
  border-color: var(--accent-danger, #fb4268);
  animation: shake 0.3s ease;
}
.manual-entry-item .manual-entry-form .manual-entry-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.manual-entry-item .manual-entry-form .manual-entry-actions button {
  flex: 1;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.manual-entry-item .manual-entry-form .manual-entry-actions button.manual-entry-cancel {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--text-secondary, #606060);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.manual-entry-item .manual-entry-form .manual-entry-actions button.manual-entry-cancel:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 252, 255, 0.9) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.manual-entry-item .manual-entry-form .manual-entry-actions button.manual-entry-submit {
  background: var(--accent-primary, #4CAF50);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.3);
}
.manual-entry-item .manual-entry-form .manual-entry-actions button.manual-entry-submit:hover:not(:disabled) {
  background: var(--accent-primary-lighter, #66bb6a);
  transform: translateY(-1px);
}
.manual-entry-item .manual-entry-form .manual-entry-actions button.manual-entry-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.edit-controls {
  display: none;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  gap: 8px;
  z-index: 10;
}
.edit-controls .edit-delete-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 66, 104, 0.1);
  border: 1px solid rgba(251, 66, 104, 0.3);
  border-radius: 8px;
  color: var(--accent-danger, #fb4268);
  cursor: pointer;
  transition: all 0.2s ease;
}
.edit-controls .edit-delete-btn:hover:not(:disabled) {
  background: var(--accent-danger, #fb4268);
  border-color: var(--accent-danger, #fb4268);
  color: #ffffff;
}
.edit-controls .edit-delete-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.edit-controls .edit-delete-btn i {
  font-size: 14px;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
}
.item .controls {
  position: relative;
}
.item .controls .controls-normal {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 1;
  transform: translateX(0) scale(1);
  transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.item .controls .controls-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) translateX(-10px) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.item .controls .controls-edit .edit-btn,
.item .controls .controls-edit .toggle-btn,
.item .controls .controls-edit .delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 20px;
  color: var(--text-secondary, #2d2d44);
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
}
.item .controls .controls-edit .edit-btn::before,
.item .controls .controls-edit .toggle-btn::before,
.item .controls .controls-edit .delete-btn::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  pointer-events: none;
  z-index: 1;
}
.item .controls .controls-edit .edit-btn::after,
.item .controls .controls-edit .toggle-btn::after,
.item .controls .controls-edit .delete-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 8px;
  right: 8px;
  height: 3px;
  border-radius: 0 0 6px 6px;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.item .controls .controls-edit .edit-btn i,
.item .controls .controls-edit .toggle-btn i,
.item .controls .controls-edit .delete-btn i {
  transition: transform 0.2s ease, color 0.2s ease;
  position: relative;
  z-index: 2;
}
.item .controls .controls-edit .edit-btn:hover:not(:disabled),
.item .controls .controls-edit .toggle-btn:hover:not(:disabled),
.item .controls .controls-edit .delete-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.item .controls .controls-edit .edit-btn:hover:not(:disabled) i,
.item .controls .controls-edit .toggle-btn:hover:not(:disabled) i,
.item .controls .controls-edit .delete-btn:hover:not(:disabled) i {
  transform: scale(1.1);
}
.item .controls .controls-edit .edit-btn:hover:not(:disabled)::after,
.item .controls .controls-edit .toggle-btn:hover:not(:disabled)::after,
.item .controls .controls-edit .delete-btn:hover:not(:disabled)::after {
  height: 4px;
  left: 4px;
  right: 4px;
}
.item .controls .controls-edit .edit-btn:active:not(:disabled),
.item .controls .controls-edit .toggle-btn:active:not(:disabled),
.item .controls .controls-edit .delete-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  background: linear-gradient(145deg, rgba(235, 240, 245, 0.9) 0%, rgba(228, 233, 238, 0.8) 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), inset 0 2px 4px rgba(0, 0, 0, 0.04);
}
.item .controls .controls-edit .edit-btn:disabled,
.item .controls .controls-edit .toggle-btn:disabled,
.item .controls .controls-edit .delete-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.item .controls .controls-edit .edit-btn::after {
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.8), var(--accent-info, #38bdf8), rgba(56, 189, 248, 0.8), transparent);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}
.item .controls .controls-edit .edit-btn:hover:not(:disabled) {
  border-color: rgba(56, 189, 248, 0.4);
  color: var(--accent-info, #38bdf8);
}
.item .controls .controls-edit .edit-btn:hover:not(:disabled)::after {
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
}
.item .controls .controls-edit .toggle-btn::after {
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.6), rgba(100, 116, 139, 0.8), rgba(148, 163, 184, 0.6), transparent);
  box-shadow: 0 0 6px rgba(100, 116, 139, 0.3);
}
.item .controls .controls-edit .toggle-btn i {
  font-size: 24px;
}
.item .controls .controls-edit .toggle-btn:hover:not(:disabled) {
  border-color: rgba(100, 116, 139, 0.4);
}
.item .controls .controls-edit .toggle-btn.active::after {
  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.7), var(--accent-success, #4ade80), rgba(74, 222, 128, 0.7), transparent);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}
.item .controls .controls-edit .toggle-btn.active:hover:not(:disabled) {
  border-color: rgba(74, 222, 128, 0.4);
  color: var(--accent-success, #22c55e);
}
.item .controls .controls-edit .toggle-btn.active:hover:not(:disabled)::after {
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.7);
}
.item .controls .controls-edit .delete-btn::after {
  background: linear-gradient(90deg, transparent, rgba(251, 66, 104, 0.7), var(--accent-danger, #fb4268), rgba(251, 66, 104, 0.7), transparent);
  box-shadow: 0 0 8px rgba(251, 66, 104, 0.4);
}
.item .controls .controls-edit .delete-btn:hover:not(:disabled) {
  border-color: rgba(251, 66, 104, 0.4);
  color: var(--accent-danger, #fb4268);
}
.item .controls .controls-edit .delete-btn:hover:not(:disabled)::after {
  box-shadow: 0 0 12px rgba(251, 66, 104, 0.6);
}

.list-items-container.edit-mode .items-list .item:not(.quick-upload-item):not(.edit-mode-item):not(.list-header-actions) .controls {
  display: none !important;
}

.list-items-container .items-list .quick-upload-item {
  animation: none !important;
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  pointer-events: none;
  max-height: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  overflow: hidden;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out, max-height 0.3s ease-out, min-height 0.3s ease-out, padding 0.3s ease-out, margin 0.3s ease-out;
}

.list-items-container.edit-mode .items-list .quick-upload-item,
.list-items-container.empty-list .items-list .quick-upload-item {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  flex-direction: column;
  align-items: stretch;
  max-height: 200px;
  min-height: 72px;
  padding-top: 14px;
  padding-bottom: 14px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
  transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), min-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), padding 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), margin 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.list-items-container.edit-mode .items-list .quick-upload-item.has-preview,
.list-items-container.empty-list .items-list .quick-upload-item.has-preview {
  max-height: none;
  z-index: 10;
  overflow: visible;
}

.lists-container .items-list .quick-upload-item {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto;
  max-height: 100px;
  min-height: 72px;
  padding-top: 14px;
  padding-bottom: 14px;
  margin-bottom: 8px;
  animation: none !important;
  position: relative;
  z-index: 1;
}
.lists-container .items-list .quick-upload-item.has-preview {
  max-height: none;
  z-index: 10;
  overflow: visible;
}

.item.item-inactive {
  opacity: 0.6;
}
.item.item-inactive .item-text {
  text-decoration: line-through;
  color: var(--text-muted, #a0a0a0);
}
.item.item-inactive .controls-edit .toggle-btn i {
  color: var(--text-muted, #a0a0a0);
}

[data-theme=dark] .item .controls .controls-edit .edit-btn,
[data-theme=dark] .item .controls .controls-edit .toggle-btn,
[data-theme=dark] .item .controls .controls-edit .delete-btn {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .item .controls .controls-edit .edit-btn::before,
[data-theme=dark] .item .controls .controls-edit .toggle-btn::before,
[data-theme=dark] .item .controls .controls-edit .delete-btn::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}
[data-theme=dark] .item .controls .controls-edit .edit-btn:hover:not(:disabled),
[data-theme=dark] .item .controls .controls-edit .toggle-btn:hover:not(:disabled),
[data-theme=dark] .item .controls .controls-edit .delete-btn:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(56, 189, 248, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
[data-theme=dark] .item .controls .controls-edit .edit-btn:active:not(:disabled),
[data-theme=dark] .item .controls .controls-edit .toggle-btn:active:not(:disabled),
[data-theme=dark] .item .controls .controls-edit .delete-btn:active:not(:disabled) {
  background: linear-gradient(145deg, rgba(40, 40, 50, 0.9) 0%, rgba(30, 30, 40, 0.8) 100%);
}
[data-theme=dark] .item .controls .controls-edit .edit-btn:hover:not(:disabled) {
  border-color: rgba(56, 189, 248, 0.4);
}
[data-theme=dark] .item .controls .controls-edit .toggle-btn:hover:not(:disabled) {
  border-color: rgba(100, 116, 139, 0.4);
}
[data-theme=dark] .item .controls .controls-edit .toggle-btn.active:hover:not(:disabled) {
  border-color: rgba(74, 222, 128, 0.4);
}
[data-theme=dark] .item .controls .controls-edit .delete-btn:hover:not(:disabled) {
  border-color: rgba(251, 66, 104, 0.4);
}

.quick-upload-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.quick-upload-buttons .quick-upload-camera-btn,
.quick-upload-buttons .quick-upload-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.quick-upload-buttons .quick-upload-camera-btn i,
.quick-upload-buttons .quick-upload-edit-btn i {
  font-size: 24px;
}
.quick-upload-buttons .quick-upload-camera-btn {
  background: linear-gradient(135deg, var(--accent-primary, #38bdf8) 0%, var(--accent-info, #06b6d4) 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.3), 0 8px 24px rgba(56, 189, 248, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.quick-upload-buttons .quick-upload-camera-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.4), 0 12px 32px rgba(56, 189, 248, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.quick-upload-buttons .quick-upload-camera-btn:active {
  transform: translateY(0) scale(0.98);
}
.quick-upload-buttons .quick-upload-edit-btn {
  background: linear-gradient(135deg, var(--accent-primary, #4CAF50) 0%, var(--accent-success, #66bb6a) 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.3), 0 8px 24px rgba(76, 175, 80, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.quick-upload-buttons .quick-upload-edit-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4), 0 12px 32px rgba(76, 175, 80, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.quick-upload-buttons .quick-upload-edit-btn:active {
  transform: translateY(0) scale(0.98);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px 20px 40px 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@starting-style {
  .modal-overlay.visible {
    opacity: 0;
    visibility: hidden;
  }
}
.modal-overlay.hidden {
  display: none;
}
.modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}
.modal-overlay.visible .modal-container {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  max-height: 70vh;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 24px 24px 20px 20px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15), 0 -4px 20px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(100px) scale(0.98);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.modal-header h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary, #272727);
}
.modal-header h2 i {
  color: var(--accent-primary, #4CAF50);
}
.modal-header .modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 10px;
  color: var(--text-secondary, #606060);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.modal-header .modal-close-btn:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 252, 255, 0.9) 100%);
  color: var(--text-primary, #272727);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.modal-header .modal-close-btn i {
  font-size: 16px;
}

.modal-body-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.modal-body-wrap::before, .modal-body-wrap::after {
  content: "\f077  \f077";
  font-family: "FontAwesome";
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 6px;
  color: rgba(120, 120, 130, 0.5);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.modal-body-wrap::before {
  top: 0;
  padding: 4px 0 6px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 40%, transparent);
}
.modal-body-wrap::after {
  bottom: 0;
  padding: 6px 0 4px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 40%, transparent);
  content: "\f078  \f078";
}
.modal-body-wrap.can-scroll-up::before {
  opacity: 1;
}
.modal-body-wrap.can-scroll-down::after {
  opacity: 1;
}

[data-theme=dark] .modal-body-wrap::before {
  background: linear-gradient(to bottom, rgba(35, 35, 45, 0.95) 40%, transparent);
  color: rgba(255, 255, 255, 0.25);
}
[data-theme=dark] .modal-body-wrap::after {
  background: linear-gradient(to top, rgba(35, 35, 45, 0.95) 40%, transparent);
  color: rgba(255, 255, 255, 0.25);
}

.modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.modal-body::-webkit-scrollbar {
  display: none;
}
.modal-body .form-group {
  margin-bottom: 16px;
  padding: 0;
  background: transparent;
  border: none;
}
.modal-body .form-group:last-child {
  margin-bottom: 0;
}
.modal-body .form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.modal-body .form-group input {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  color: var(--text-primary, #272727);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-body .form-group input::placeholder {
  color: var(--text-muted, #a0a0a0);
}
.modal-body .form-group input:focus {
  outline: none;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  border-color: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.4);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02), 0 0 0 3px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.12), 0 4px 12px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.08);
}
.modal-body .form-group input:hover:not(:focus) {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px rgba(0, 0, 0, 0.06);
}
.modal-body .form-group input.error {
  border-color: var(--accent-danger, #fb4268);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(251, 66, 104, 0.12);
  animation: shake 0.3s ease;
}

.modal-footer {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  padding: 16px 24px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.modal-footer button {
  flex: 1;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-footer .modal-cancel-btn {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--text-secondary, #606060);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.modal-footer .modal-cancel-btn:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 252, 255, 0.9) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.modal-footer .modal-submit-btn {
  background: var(--accent-primary, #4CAF50);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.3);
}
.modal-footer .modal-submit-btn:hover:not(:disabled) {
  background: var(--accent-primary-lighter, #66bb6a);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}
.modal-footer .modal-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

[data-theme=dark] .modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}
[data-theme=dark] .modal-container {
  background: linear-gradient(145deg, rgba(40, 40, 50, 0.98) 0%, rgba(30, 30, 40, 0.95) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.4), 0 -4px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .modal-header {
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .modal-header h2 {
  color: #ffffff;
}
[data-theme=dark] .modal-header .modal-close-btn {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .modal-header .modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
[data-theme=dark] .modal-body .form-group label {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .modal-body .form-group input {
  background: linear-gradient(135deg, rgba(50, 50, 60, 0.8) 0%, rgba(40, 40, 50, 0.7) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
[data-theme=dark] .modal-body .form-group input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
[data-theme=dark] .modal-body .form-group input:focus {
  background: rgba(60, 60, 70, 0.9);
  border-color: var(--accent-primary, #66bb6a);
  box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.15);
}
[data-theme=dark] .modal-footer {
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .modal-footer .modal-cancel-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .modal-footer .modal-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.modify-list-modal .toggle-group .toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}
.modify-list-modal .toggle-group .toggle-label-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #272727);
}
.modify-list-modal .toggle-switch {
  position: relative;
  width: 52px;
  height: 32px;
  flex-shrink: 0;
}
.modify-list-modal .toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.modify-list-modal .toggle-switch .toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(120, 120, 128, 0.32);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modify-list-modal .toggle-switch .toggle-slider::before {
  content: "";
  position: absolute;
  height: 28px;
  width: 28px;
  left: 2px;
  bottom: 2px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modify-list-modal .toggle-switch input:checked + .toggle-slider {
  background: var(--accent-success, #34c759);
}
.modify-list-modal .toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}
.modify-list-modal .toggle-switch input:focus + .toggle-slider {
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.2);
}
.modify-list-modal .form-hint {
  font-size: 12px;
  color: var(--text-quaternary, #888);
  margin-top: 8px;
  line-height: 1.4;
}
.modify-list-modal .danger-zone {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(251, 66, 104, 0.2);
}
.modify-list-modal .danger-zone label {
  color: var(--accent-danger, #fb4268) !important;
}
.modify-list-modal .danger-zone .delete-list-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(145deg, #fb4268 0%, #e63956 100%);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 12px rgba(251, 66, 104, 0.3);
}
.modify-list-modal .danger-zone .delete-list-btn i {
  font-size: 14px;
}
.modify-list-modal .danger-zone .delete-list-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(251, 66, 104, 0.4);
  background: linear-gradient(145deg, #ff5070 0%, #fb4268 100%);
}
.modify-list-modal .danger-zone .delete-list-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.modify-list-modal .danger-zone .form-hint {
  color: var(--text-quaternary, #888);
}

[data-theme=dark] .modify-list-modal .toggle-group .toggle-label-text {
  color: #ffffff;
}
[data-theme=dark] .modify-list-modal .toggle-switch .toggle-slider {
  background: rgba(120, 120, 128, 0.48);
}
[data-theme=dark] .modify-list-modal .danger-zone {
  border-color: rgba(251, 66, 104, 0.3);
}

.item .item-edit-trigger {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: default;
  width: 100%;
  display: flex;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px !important;
  position: relative;
}
.item .item-edit-trigger .item-edit-icon {
  display: none;
  font-size: 24px;
  color: var(--accent-info, #38bdf8);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  order: -1;
}
.item .item-edit-trigger .item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.item .item-edit-trigger .item-details .title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #272727);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item .item-edit-trigger .item-details .description {
  font-size: 13px;
  color: var(--text-tertiary, #666);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item .item-edit-trigger .price {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-success, #34c759);
  flex-basis: 100%;
  order: 3;
  padding-left: 0;
  margin-top: 2px;
}
.item .item-edit-trigger .item-edit-arrow {
  display: none;
  font-size: 14px;
  color: var(--text-quaternary, #aaa);
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}

[data-theme=dark] .item-edit-trigger .item-details .title {
  color: #ffffff;
}
[data-theme=dark] .item-edit-trigger .item-details .description {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .item-edit-trigger .price {
  color: var(--accent-success, #4ade80);
}

.list-items-container.edit-mode .items-list .item:not(.quick-upload-item):not(.edit-mode-item) .item-edit-trigger {
  cursor: pointer;
  padding-right: 4px;
}
.list-items-container.edit-mode .items-list .item:not(.quick-upload-item):not(.edit-mode-item) .item-edit-trigger .item-edit-icon {
  display: block;
}
.list-items-container.edit-mode .items-list .item:not(.quick-upload-item):not(.edit-mode-item) .item-edit-trigger .item-edit-arrow {
  display: block;
}
.list-items-container.edit-mode .items-list .item:not(.quick-upload-item):not(.edit-mode-item) .item-edit-trigger .price {
  padding-left: 40px;
}
.list-items-container.edit-mode .items-list .item:not(.quick-upload-item):not(.edit-mode-item) .item-edit-trigger:hover .item-edit-icon {
  color: var(--accent-primary, #22d3ee);
}
.list-items-container.edit-mode .items-list .item:not(.quick-upload-item):not(.edit-mode-item) .item-edit-trigger:hover .item-edit-arrow {
  color: var(--accent-primary, #38bdf8);
  transform: translateX(2px);
}

.bottom-sheet-modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.bottom-sheet-modal .modal-container {
  width: 100%;
  margin: 0;
  border-radius: 20px 20px 0 0;
  animation: slideUpModal 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bottom-sheet-modal .modal-body {
  padding: 16px 20px;
}
.bottom-sheet-modal .modal-footer {
  padding: 12px 20px 20px;
}
.bottom-sheet-modal .modal-footer.item-edit-actions {
  padding-top: 20px;
}

@keyframes slideUpModal {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.item-edit-actions {
  flex-direction: column;
  gap: 12px;
}
.item-edit-actions .modal-footer-row {
  display: flex;
  gap: 12px;
  width: 100%;
}
.item-edit-actions .modal-footer-row:first-child {
  justify-content: flex-start;
}
.item-edit-actions .modal-footer-row:last-child {
  margin-top: 8px;
}
.item-edit-actions .modal-footer-row:last-child button {
  flex: 1;
}
.item-edit-actions .item-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  border-radius: 12px;
  font-size: 24px;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent-success, #34c759) 0%, #2da44e 100%) !important;
  box-shadow: 0 4px 16px rgba(52, 199, 89, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0 !important;
}
.item-edit-actions .item-toggle-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(52, 199, 89, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, #3dd369 0%, #34c759 100%) !important;
}
.item-edit-actions .item-toggle-btn:active {
  transform: translateY(0) scale(0.98);
}
.item-edit-actions .item-toggle-btn.inactive {
  background: linear-gradient(135deg, rgba(120, 120, 128, 0.5) 0%, rgba(100, 100, 110, 0.4) 100%) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.item-edit-actions .item-toggle-btn.inactive i::before {
  content: "\f204";
}
.item-edit-actions .item-archive-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  border-radius: 12px;
  font-size: 20px;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0 !important;
}
.item-edit-actions .item-archive-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
}
.item-edit-actions .item-archive-btn:active {
  transform: translateY(0) scale(0.98);
}
.item-edit-actions .item-unarchive-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  border-radius: 12px;
  font-size: 20px;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent-info, #38bdf8) 0%, #0ea5e9 100%) !important;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0 !important;
}
.item-edit-actions .item-unarchive-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 100%) !important;
}
.item-edit-actions .item-unarchive-btn:active {
  transform: translateY(0) scale(0.98);
}

[data-theme=dark] .item-edit-actions .item-toggle-btn.inactive {
  background: linear-gradient(135deg, rgba(80, 80, 90, 0.6) 0%, rgba(60, 60, 70, 0.5) 100%);
}

[data-theme=dark] .edit-mode-item .edit-mode-toggle {
  background: linear-gradient(145deg, rgba(40, 40, 50, 0.8) 0%, rgba(30, 30, 40, 0.7) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary, #b0b0b0);
}
[data-theme=dark] .edit-mode-item .edit-mode-toggle:hover {
  border-color: var(--accent-primary, #66bb6a);
  color: var(--accent-primary, #66bb6a);
}
[data-theme=dark] .manual-entry-item .manual-entry-form {
  background: linear-gradient(145deg, rgba(40, 40, 50, 0.9) 0%, rgba(30, 30, 40, 0.85) 100%);
  border-color: var(--accent-primary, #66bb6a);
}
[data-theme=dark] .manual-entry-item .manual-entry-form .form-group input {
  background: linear-gradient(135deg, rgba(50, 50, 60, 0.8) 0%, rgba(40, 40, 50, 0.7) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
[data-theme=dark] .manual-entry-item .manual-entry-form .form-group input:focus {
  background: rgba(60, 60, 70, 0.9);
  border-color: var(--accent-primary, #66bb6a);
}
[data-theme=dark] .manual-entry-item .manual-entry-form .manual-entry-actions .manual-entry-cancel {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-secondary, #b0b0b0);
}
[data-theme=dark] .edit-controls .edit-delete-btn {
  background: rgba(255, 90, 125, 0.15);
  border-color: rgba(255, 90, 125, 0.4);
  color: var(--accent-danger, #ff5a7d);
}

.form-group-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 20px 0 16px;
}

[data-theme=dark] .form-group-divider {
  background: rgba(255, 255, 255, 0.08);
}

.btn-manage-variants {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.8) 100%);
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary, #272727);
  transition: all 0.2s ease;
}
.btn-manage-variants i:first-child {
  color: var(--accent-primary, #4CAF50);
  font-size: 16px;
}
.btn-manage-variants span:first-of-type {
  flex: 1;
  text-align: left;
}
.btn-manage-variants .variant-count-badge {
  background: var(--accent-primary, #4CAF50);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 0 6px;
}
.btn-manage-variants .variant-count-badge.hidden {
  display: none;
}
.btn-manage-variants i:last-child {
  color: var(--text-secondary, #606060);
  font-size: 12px;
}
.btn-manage-variants:hover {
  border-color: var(--accent-primary, #4CAF50);
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
}

[data-theme=dark] .btn-manage-variants {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.8) 0%, rgba(40, 40, 50, 0.7) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}

.variant-group-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  background: rgba(248, 250, 252, 0.6);
}

[data-theme=dark] .variant-group-card {
  background: rgba(40, 40, 50, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

.variant-group-header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.variant-group-header .variant-group-name {
  flex: 1;
  font-weight: 600;
}
.variant-group-header .variant-group-remove {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255, 59, 48, 0.1);
  color: var(--accent-danger, #ff5a7d);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.variant-group-header .variant-group-remove:hover {
  background: rgba(255, 59, 48, 0.2);
}

.variant-group-settings {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.variant-group-settings .variant-selection-label {
  flex: 1;
}
.variant-group-settings .variant-selection-label select {
  width: 100%;
  font-size: 13px;
}
.variant-group-settings .variant-required-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary, #606060);
  white-space: nowrap;
}

.variant-option-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.variant-option-row .variant-option-label {
  flex: 2;
  font-size: 14px;
}
.variant-option-row .variant-option-price {
  flex: 1;
  font-size: 14px;
  max-width: 90px;
}
.variant-option-row .variant-option-remove {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--text-secondary, #999);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}
.variant-option-row .variant-option-remove:hover {
  background: rgba(255, 59, 48, 0.1);
  color: var(--accent-danger, #ff5a7d);
}

.btn-add-variant-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px dashed rgba(0, 0, 0, 0.15);
  background: none;
  color: var(--accent-primary, #4CAF50);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}
.btn-add-variant-option:hover {
  border-color: var(--accent-primary, #4CAF50);
  background: rgba(76, 175, 80, 0.05);
}

.btn-add-variant-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  border: 2px dashed rgba(0, 0, 0, 0.12);
  background: none;
  color: var(--accent-primary, #4CAF50);
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}
.btn-add-variant-group:hover {
  border-color: var(--accent-primary, #4CAF50);
  background: rgba(76, 175, 80, 0.05);
}

[data-theme=dark] .btn-add-variant-option,
[data-theme=dark] .btn-add-variant-group {
  border-color: rgba(255, 255, 255, 0.15);
}

.variant-selector-group {
  margin-bottom: 20px;
}

.variant-selector-group-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #272727);
  margin-bottom: 10px;
}

.variant-selector-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.variant-option-btn {
  padding: 10px 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--text-primary, #272727);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.variant-option-btn .variant-price-mod {
  font-size: 12px;
  color: var(--text-secondary, #606060);
  margin-left: 4px;
}
.variant-option-btn:hover {
  border-color: var(--accent-primary, #4CAF50);
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
}
.variant-option-btn.selected {
  border-color: var(--accent-primary, #4CAF50);
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.12) 0%, rgba(76, 175, 80, 0.06) 100%);
  color: var(--accent-primary, #4CAF50);
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(76, 175, 80, 0.2);
}

[data-theme=dark] .variant-option-btn {
  background: rgba(50, 50, 60, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}
[data-theme=dark] .variant-option-btn.selected {
  background: rgba(76, 175, 80, 0.2);
  border-color: var(--accent-primary, #66bb6a);
  color: var(--accent-primary, #66bb6a);
}

.variant-price-display {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  padding: 16px;
  color: var(--text-primary, #272727);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 16px;
}

.variant-hint {
  display: inline-block;
  font-size: 11px;
  color: var(--accent-primary, #4CAF50);
  background: rgba(76, 175, 80, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 4px;
  font-weight: 500;
}

.item.has-variants .plus::after {
  content: "\f078";
  font-family: "FontAwesome";
  font-size: 8px;
  position: absolute;
  bottom: 2px;
  right: 4px;
}

.item.has-variants .plus {
  position: relative;
}

.cart-variant-label {
  font-size: 12px;
  color: var(--text-secondary, #606060);
  font-weight: 400;
}

.lists,
.items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}
.lists .item .item-text,
.items-list .item .item-text {
  display: flex;
  flex-direction: column;
  justify-content: left;
  flex: 1;
  min-width: 0;
  gap: 4px;
}
.lists .item .controls,
.items-list .item .controls {
  margin-right: 8px;
}

.image-upload-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 7.5rem;
  overflow-y: auto;
  background-color: #ffffff;
}

.image-upload-header {
  padding: 16px;
  text-align: center;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-primary);
  flex-shrink: 0;
}
.image-upload-header h1 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 8px 0;
}
.image-upload-header .instructions {
  font-size: 14px;
  color: var(--text-tertiary);
  line-height: 1.4;
  margin: 0;
}

.upload-status {
  padding: 12px 16px;
  background-color: #ffffff;
  border-bottom: 2px solid #e4e4e4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.upload-status .upload-count {
  font-size: 14px;
  font-weight: 600;
  color: #606060;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  padding: 12px;
  background-color: #ffffff;
  flex: 1;
  align-content: start;
}
@media screen and (min-width: 400px) {
  .preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
    padding: 16px;
  }
}

.context-action-camera {
  background-color: #ffffff;
}
.context-action-camera i {
  color: #5b5b5b;
}

.context-action-upload {
  background-color: #4CAF50;
}
.context-action-upload i {
  color: #ffffff;
}

.context-action-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.org-details-container {
  padding: 7rem 0 8rem 0;
  background-color: var(--bg-primary, #ededed);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 481px) {
  .org-details-container {
    min-height: 100%;
  }
}
.org-details-container .top-content-container {
  padding: 0 20px;
  margin-bottom: 20px;
}
.org-details-container .top-content-container > h1 {
  opacity: 0;
  animation: screenFadeSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.05s;
}
.org-details-container .org-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 0;
}
.org-details-container .org-action-buttons > * {
  opacity: 0;
  animation: screenFadeSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.org-details-container .org-action-buttons > *:nth-child(1) {
  animation-delay: 0.15s;
}
.org-details-container .org-action-buttons > *:nth-child(2) {
  animation-delay: 0.2s;
}
.org-details-container .org-action-buttons > *:nth-child(3) {
  animation-delay: 0.25s;
}
.org-details-container .org-action-buttons > *:nth-child(4) {
  animation-delay: 0.3s;
}
.org-details-container .org-action-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 14px 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.85) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  cursor: pointer;
  transition: all 0.2s ease;
}
.org-details-container .org-action-btn i {
  font-size: 18px;
}
.org-details-container .org-action-btn:hover, .org-details-container .org-action-btn:active {
  background: linear-gradient(145deg, rgb(255, 255, 255) 0%, rgba(248, 250, 252, 0.95) 100%);
  border-color: var(--accent-primary, #4CAF50);
  color: var(--accent-primary, #4CAF50);
}

.org-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px 20px 7.5rem 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.org-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}
.org-modal-overlay.visible .org-modal-container {
  transform: translateY(0);
  opacity: 1;
}

.org-modal-container {
  width: 100%;
  max-width: 500px;
  max-height: 75vh;
  overflow-y: auto;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15), 0 -4px 20px rgba(0, 0, 0, 0.08), 0 8px 40px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.org-modal-header {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.org-modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #1a1a2e);
}

.org-modal-close {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 16px 24px 20px;
  padding: 10px 18px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  color: var(--text-secondary, #606060);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  align-self: flex-start;
}
.org-modal-close i {
  font-size: 14px;
}
.org-modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text-primary, #1a1a2e);
  border-color: rgba(0, 0, 0, 0.15);
}

.org-modal-subtitle {
  margin: 0;
  padding: 12px 24px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-primary, #4CAF50);
}

.org-modal-description {
  margin: 0;
  padding: 8px 24px 0;
  font-size: 13px;
  color: var(--text-secondary, #606060);
}

.org-modal-form {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.org-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.org-modal-field label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary, #606060);
}

.org-modal-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary, #1a1a2e);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.org-modal-input::placeholder {
  color: var(--text-secondary, #999);
  font-weight: 400;
}
.org-modal-input:focus {
  border-color: var(--accent-primary, #4CAF50);
  box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.12);
}
.org-modal-input.readonly {
  background: rgba(0, 0, 0, 0.02);
  color: var(--text-secondary, #606060);
  cursor: default;
  font-size: 14px;
}
.org-modal-input.readonly:focus {
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: none;
}

.abn-lookup-result {
  padding: 0;
  min-height: 0;
  font-size: 13px;
  border-radius: 10px;
  transition: all 0.2s ease;
}
.abn-lookup-result:empty {
  display: none;
}
.abn-lookup-result.loading {
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.03);
  color: var(--text-secondary, #888);
  border: 1px dashed rgba(0, 0, 0, 0.1);
}
.abn-lookup-result.success {
  padding: 10px 14px;
  background: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.06);
  border: 1px solid rgba(var(--accent-primary-rgb, 76, 175, 80), 0.2);
}
.abn-lookup-result.warning {
  padding: 10px 14px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
}
.abn-lookup-result.error {
  padding: 10px 14px;
  background: rgba(248, 113, 113, 0.06);
  border: 1px solid rgba(248, 113, 113, 0.2);
  color: #d32f2f;
}

.abn-lookup-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1a1a2e);
  margin-bottom: 2px;
}

.abn-lookup-details {
  font-size: 12px;
  color: var(--text-secondary, #666);
  line-height: 1.4;
}

.abn-lookup-asic-link {
  display: inline-block;
  margin-top: 0.4em;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #1565c0;
  background: rgba(21, 101, 192, 0.08);
  border: 1px solid rgba(21, 101, 192, 0.2);
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s;
}
.abn-lookup-asic-link:hover {
  background: rgba(21, 101, 192, 0.15);
}

.org-modal-save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--accent-primary, #4CAF50);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.org-modal-save:hover:not(:disabled) {
  filter: brightness(1.08);
}
.org-modal-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.org-modal-cards {
  padding: 16px 24px 24px;
}

.org-switch-list {
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.org-switch-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.85) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}
.org-switch-item > .fa-building {
  font-size: 20px;
  color: var(--text-secondary, #606060);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.org-switch-item:hover:not(.active) {
  border-color: var(--accent-primary, #4CAF50);
}
.org-switch-item:hover:not(.active) > .fa-building {
  color: var(--accent-primary, #4CAF50);
}
.org-switch-item.active {
  border-color: var(--accent-primary, #4CAF50);
  background: linear-gradient(145deg, rgba(var(--accent-primary-rgb, 76, 175, 80), 0.08) 0%, rgba(var(--accent-primary-rgb, 76, 175, 80), 0.04) 100%);
  cursor: default;
}
.org-switch-item.active > .fa-building {
  color: var(--accent-primary, #4CAF50);
}

.org-switch-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.org-switch-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #1a1a2e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-switch-role {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #888);
  text-transform: capitalize;
}

.org-switch-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--accent-primary, #4CAF50);
  background: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.12);
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

.org-switch-arrow {
  font-size: 14px;
  color: var(--text-secondary, #ccc);
  flex-shrink: 0;
}

.users-container {
  padding: 7rem 12px 8rem;
  background-color: var(--bg-primary, #ededed);
  overflow-x: hidden;
  max-width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.users-container.content {
  align-items: stretch;
}
.users-container {
  contain: layout style;
}
@media only screen and (min-width: 481px) {
  .users-container {
    min-height: 100%;
  }
}
.users-container .top-content-container {
  width: 100%;
  padding: 0;
  margin-bottom: 16px;
}
.users-container .top-content-container > h1 {
  opacity: 0;
  animation: screenFadeSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.05s;
}
.users-container .back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  padding: 10px 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.65) 0%, rgba(248, 250, 252, 0.55) 100%);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary, #606060);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0;
  animation: screenFadeSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.1s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.users-container .back-button:hover {
  transform: translateY(-1px);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 250, 252, 0.7) 100%);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.users-container .back-button:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), inset 0 1px 2px rgba(0, 0, 0, 0.03);
}
.users-container .back-button i {
  font-size: 14px;
}
.users-container .fallback-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px 0;
  padding: 12px 16px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 8px;
  font-size: 14px;
  color: var(--accent-info, #22d3ee);
  opacity: 0;
  animation: screenFadeSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.1s;
}
.users-container .fallback-notice i {
  font-size: 16px;
  flex-shrink: 0;
}
.users-container .users-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 0 16px 0;
  opacity: 0;
  animation: screenFadeSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.1s;
}
.users-container .users-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary, #272727);
}
.users-container .users-list {
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
  contain: content;
}
.users-container .user-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  min-height: 72px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.7) 0%, rgba(248, 250, 252, 0.6) 100%);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  touch-action: manipulation;
  opacity: 0;
  animation: itemSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  min-width: 0;
  max-width: 100%;
  contain: layout style;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  position: relative;
}
.users-container .user-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  border-radius: 14px 14px 0 0;
  pointer-events: none;
}
.users-container .user-item:nth-child(1) {
  animation-delay: 0.19s;
}
.users-container .user-item:nth-child(2) {
  animation-delay: 0.23s;
}
.users-container .user-item:nth-child(3) {
  animation-delay: 0.27s;
}
.users-container .user-item:nth-child(4) {
  animation-delay: 0.31s;
}
.users-container .user-item:nth-child(5) {
  animation-delay: 0.35s;
}
.users-container .user-item:nth-child(6) {
  animation-delay: 0.39s;
}
.users-container .user-item:nth-child(7) {
  animation-delay: 0.43s;
}
.users-container .user-item:nth-child(8) {
  animation-delay: 0.47s;
}
.users-container .user-item:nth-child(9) {
  animation-delay: 0.51s;
}
.users-container .user-item:nth-child(10) {
  animation-delay: 0.55s;
}
.users-container .user-item:nth-child(11) {
  animation-delay: 0.59s;
}
.users-container .user-item:nth-child(12) {
  animation-delay: 0.63s;
}
.users-container .user-item:nth-child(n+13) {
  animation-delay: 0.63s;
}
.users-container .user-item:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-color: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.3);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 100%);
}
.users-container .user-item:hover::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
}
.users-container .user-item:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), inset 0 1px 3px rgba(0, 0, 0, 0.03);
}
.users-container .user-item.user-item--current {
  border-color: rgba(56, 189, 248, 0.4);
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.12) 0%, rgba(56, 189, 248, 0.06) 100%);
  box-shadow: 0 2px 12px rgba(56, 189, 248, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.users-container .user-item.user-item--current:hover {
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.2), 0 8px 24px rgba(56, 189, 248, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
:root[data-theme=dark] .users-container .user-item, :root[data-theme=fintech] .users-container .user-item {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-theme=dark] .users-container .user-item::before, :root[data-theme=fintech] .users-container .user-item::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}
:root[data-theme=dark] .users-container .user-item:hover, :root[data-theme=fintech] .users-container .user-item:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 0 20px rgba(56, 189, 248, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
:root[data-theme=dark] .users-container .user-item.user-item--current, :root[data-theme=fintech] .users-container .user-item.user-item--current {
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.18) 0%, rgba(56, 189, 248, 0.08) 100%);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 2px 12px rgba(56, 189, 248, 0.2), 0 0 30px rgba(56, 189, 248, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.users-container .user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary, #38bdf8) 0%, var(--accent-info, #22d3ee) 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
}
.users-container .user-avatar.user-avatar--current {
  background: linear-gradient(135deg, var(--accent-success, #4ade80) 0%, var(--accent-primary, #38bdf8) 100%);
  box-shadow: 0 0 0 2px var(--accent-success, #4ade80);
}
.users-container .user-avatar.user-avatar--large {
  width: 80px;
  height: 80px;
  font-size: 28px;
}
.users-container .user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.users-container .user-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.users-container .user-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #272727);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.users-container .user-email {
  font-size: 14px;
  color: var(--text-tertiary, #888);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.users-container .user-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.users-container .user-badge.user-badge--current {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.15) 0%, rgba(74, 222, 128, 0.08) 100%);
  color: var(--accent-success, #4ade80);
  border: 1px solid rgba(74, 222, 128, 0.3);
}
.users-container .user-badge.user-badge--role {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.08) 100%);
  color: var(--accent-premium, #a855f7);
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.users-container .user-item--inactive {
  opacity: 0.6;
}
.users-container .user-item--inactive .user-name {
  text-decoration: line-through;
  text-decoration-color: var(--text-quaternary, #aaa);
}
.users-container .user-avatar--inactive {
  background: linear-gradient(135deg, var(--text-quaternary, #aaa) 0%, var(--text-tertiary, #888) 100%) !important;
  box-shadow: none !important;
}
.users-container .user-badge--inactive {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.15) 0%, rgba(248, 113, 113, 0.08) 100%);
  color: var(--accent-danger, #f87171);
  border: 1px solid rgba(248, 113, 113, 0.3);
}
.users-container .user-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.users-container .user-status-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.users-container .user-status-toggle .toggle-track {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: var(--text-quaternary, #aaa);
  transition: background 0.2s ease;
}
.users-container .user-status-toggle .toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}
.users-container .user-status-toggle.active .toggle-track {
  background: var(--accent-success, #4ade80);
}
.users-container .user-status-toggle.active .toggle-thumb {
  transform: translateX(20px);
}
.users-container .user-status-toggle:hover .toggle-track {
  opacity: 0.9;
}
.users-container .user-status-toggle:focus-visible {
  outline: 2px solid var(--accent-primary, #38bdf8);
  outline-offset: 2px;
  border-radius: 12px;
}
.users-container .user-arrow {
  color: var(--text-quaternary, #aaa);
  font-size: 14px;
  transition: color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
  padding: 8px;
  margin: -8px;
}
.users-container .user-item:hover .user-arrow {
  color: var(--accent-primary, #4CAF50);
  transform: translateX(2px);
}
.users-container .user-roles-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(168, 85, 247, 0.06) 100%);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 8px;
  color: var(--accent-premium, #a855f7);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.users-container .user-roles-btn i {
  font-size: 13px;
}
.users-container .user-roles-btn:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0.12) 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.2);
}
.users-container .user-roles-btn:active {
  transform: translateY(0);
}
.users-container .invite-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--accent-primary, #38bdf8) 0%, var(--accent-info, #22d3ee) 100%);
  border: none;
  border-radius: 8px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.users-container .invite-user-btn i {
  font-size: 14px;
}
.users-container .invite-user-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}
.users-container .invite-user-btn:active {
  transform: translateY(0);
}
.users-container .invite-panel {
  margin: 0 0 16px 0;
  padding: 20px;
  background: var(--glass-medium, rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-secondary, rgba(255, 255, 255, 0.12));
  border-radius: 16px;
  overflow: hidden;
  max-height: 600px;
  opacity: 1;
  transform: translateY(0);
  transition: max-height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), padding 0.3s ease, margin 0.3s ease;
}
.users-container .invite-panel.hidden {
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  border-color: transparent;
  pointer-events: none;
}
.users-container .invite-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.users-container .invite-panel-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #272727);
}
.users-container .invite-panel-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-light, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  color: var(--text-tertiary, #888);
  cursor: pointer;
  transition: all 0.2s ease;
}
.users-container .invite-panel-close:hover {
  background: var(--glass-medium, rgba(255, 255, 255, 0.08));
  color: var(--text-primary, #272727);
}
.users-container .invite-flip-section {
  perspective: 800px;
}
.users-container .invite-flip-card {
  position: relative;
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
}
.users-container .invite-flip-card.flipped {
  transform: rotateY(180deg);
}
.users-container .invite-flip-front,
.users-container .invite-flip-back {
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 16px;
}
.users-container .invite-flip-front {
  position: relative;
}
.users-container .invite-flip-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 24px 72px 24px;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.95));
  border-radius: 16px;
  border: 1px solid var(--border-primary, rgba(0, 0, 0, 0.08));
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}
.users-container .invite-flip-btn {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 64px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  color: var(--text-primary, #1a1a2e);
  cursor: pointer;
  z-index: 2;
  transition: all 0.2s ease;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: var(--shadow-glass-md), 0 4px 20px rgba(0, 0, 0, 0.1);
}
.users-container .invite-flip-btn i {
  font-size: 22px;
  line-height: 1;
}
.users-container .invite-flip-btn span {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}
.users-container .invite-flip-btn:active {
  transform: scale(0.95);
}
.users-container .invite-qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 24px 52px 24px;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.95));
  border-radius: 16px;
  border: 1px solid var(--border-primary, rgba(0, 0, 0, 0.08));
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.users-container .invite-qr-wrapper {
  background: #ffffff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.users-container .invite-qr-wrapper canvas, .users-container .invite-qr-wrapper img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
.users-container .invite-qr-info {
  text-align: center;
}
.users-container .invite-qr-info p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--text-secondary, #606060);
}
.users-container .invite-qr-info .invite-expiry {
  font-size: 12px;
  color: var(--text-quaternary, #aaa);
}
.users-container .invite-loading {
  padding: 40px 0;
  text-align: center;
  color: var(--text-tertiary, #888);
  font-size: 14px;
}
.users-container .invite-error {
  padding: 16px;
  text-align: center;
  color: var(--accent-danger, #f87171);
  font-size: 14px;
}
.users-container .invite-success {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  color: var(--accent-success, #4ade80);
  font-size: 14px;
}
.users-container .invite-success i {
  font-size: 16px;
}
.users-container .invite-email-form-card {
  width: 100%;
  text-align: left;
}
.users-container .invite-email-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.users-container .invite-email-input {
  min-width: 0;
  flex: 1;
  padding: 12px 16px;
  background: var(--glass-light, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  color: var(--text-primary, #272727);
  font-size: 14px;
}
.users-container .invite-email-input::placeholder {
  color: var(--text-quaternary, #aaa);
}
.users-container .invite-email-input:focus {
  outline: none;
  border-color: var(--accent-primary, #38bdf8);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
}
.users-container .invite-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  background: linear-gradient(135deg, var(--accent-primary, #38bdf8) 0%, var(--accent-info, #22d3ee) 100%);
  border: none;
  border-radius: 10px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.users-container .invite-send-btn i {
  font-size: 14px;
}
.users-container .invite-send-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}
.users-container .invite-send-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.users-container .invite-email-status {
  min-height: 20px;
}
.users-container .invite-email-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: -4px;
}
.users-container .invite-panel-footer {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-primary, rgba(255, 255, 255, 0.08));
}
.users-container .invite-cancel-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--glass-light, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  color: var(--text-secondary, #606060);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.users-container .invite-cancel-btn:hover {
  background: var(--glass-medium, rgba(255, 255, 255, 0.1));
}
.users-container .invite-done-btn,
.users-container .invite-send-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--accent-primary, #38bdf8) 0%, var(--accent-info, #22d3ee) 100%);
  border: none;
  border-radius: 12px;
  color: #0f172a;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.users-container .invite-done-btn:hover:not(:disabled),
.users-container .invite-send-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}
.users-container .invite-done-btn:disabled,
.users-container .invite-send-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.users-container .user-form-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 20px 24px 20px;
  opacity: 0;
  animation: screenFadeSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.1s;
}
.users-container .user-form-name {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary, #272727);
  text-align: center;
}
.users-container .user-details-form {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.users-container .user-details-form > * {
  opacity: 0;
  animation: screenFadeSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.users-container .user-details-form > *:nth-child(1) {
  animation-delay: 0.15s;
}
.users-container .user-details-form > *:nth-child(2) {
  animation-delay: 0.2s;
}
.users-container .user-details-form > *:nth-child(3) {
  animation-delay: 0.25s;
}
.users-container .user-details-form > *:nth-child(4) {
  animation-delay: 0.3s;
}
.users-container .user-details-form > *:nth-child(5) {
  animation-delay: 0.35s;
}
.users-container .user-details-form > *:nth-child(6) {
  animation-delay: 0.4s;
}
.users-container .user-details-form > *:nth-child(7) {
  animation-delay: 0.45s;
}
.users-container .user-details-form > *:nth-child(8) {
  animation-delay: 0.5s;
}
.users-container .user-details-form > *:nth-child(9) {
  animation-delay: 0.55s;
}
.users-container .user-details-form > *:nth-child(10) {
  animation-delay: 0.6s;
}
.users-container .admin-profile-section,
.users-container .admin-team-section {
  opacity: 0;
  animation: screenFadeSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.users-container .admin-profile-section {
  animation-delay: 0.05s;
  padding-bottom: 8px;
}
.users-container .admin-profile-section .user-form-header {
  padding-bottom: 16px;
}
.users-container .admin-profile-section .user-details-form {
  max-width: none;
  padding-bottom: 8px;
}
.users-container .admin-team-section {
  animation-delay: 0.2s;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--border-primary, rgba(0, 0, 0, 0.06));
  position: relative;
}
.users-container .admin-team-section::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-primary, rgba(56, 189, 248, 0.3)), transparent);
}
:root[data-theme=dark] .users-container .admin-team-section, :root[data-theme=fintech] .users-container .admin-team-section {
  border-top-color: rgba(255, 255, 255, 0.06);
}
:root[data-theme=dark] .users-container .admin-team-section::before, :root[data-theme=fintech] .users-container .admin-team-section::before {
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.2), transparent);
}
.users-container .admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px 16px 20px;
}
.users-container .admin-section-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #272727);
  letter-spacing: -0.01em;
  text-align: right;
}

.admin-team-section--standalone {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.admin-team-section--standalone::before {
  display: none;
}

.user-item--button {
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}
.user-item--button:active {
  transform: scale(0.98);
}

.user-edit-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px 20px 7.5rem 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.user-edit-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}
.user-edit-modal-overlay.visible .user-edit-modal-container {
  transform: translateY(0);
  opacity: 1;
}

.user-edit-modal-container {
  width: 100%;
  max-width: 500px;
  max-height: 75vh;
  overflow-y: auto;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15), 0 -4px 20px rgba(0, 0, 0, 0.08), 0 8px 40px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-edit-modal-header {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.user-edit-modal-header .user-edit-modal-user {
  display: flex;
  align-items: center;
  gap: 14px;
}
.user-edit-modal-header .user-edit-modal-user .user-avatar {
  flex-shrink: 0;
}
.user-edit-modal-header .user-edit-modal-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.user-edit-modal-header .user-edit-modal-name h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #272727);
}
.user-edit-modal-header .user-edit-modal-email {
  font-size: 13px;
  color: var(--text-secondary, #606060);
}

.user-edit-modal-body {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.user-edit-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user-edit-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary, #606060);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.user-edit-toggle-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.6) 0%, rgba(248, 250, 252, 0.4) 100%);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.user-edit-toggle-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-edit-toggle-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #272727);
}

.user-edit-toggle-desc {
  font-size: 12px;
  color: var(--text-secondary, #606060);
  line-height: 1.3;
}

.user-edit-toggle {
  flex-shrink: 0;
  width: 52px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  background: transparent;
  display: flex;
  align-items: center;
}
.user-edit-toggle .toggle-track {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: rgba(120, 120, 128, 0.3);
  position: relative;
  transition: background 0.25s ease;
}
.user-edit-toggle .toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.user-edit-toggle.active .toggle-track {
  background: var(--accent-success, #34c759);
}
.user-edit-toggle.active .toggle-thumb {
  transform: translateX(20px);
}
.user-edit-toggle.inactive .toggle-track {
  background: rgba(120, 120, 128, 0.3);
}
.user-edit-toggle.inactive .toggle-thumb {
  transform: translateX(0);
}
.user-edit-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.user-edit-roles-loading {
  padding: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary, #606060);
}

.user-edit-modal-footer {
  display: flex;
  gap: 12px;
  padding: 16px 24px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  position: sticky;
  bottom: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  z-index: 1;
}
.user-edit-modal-footer button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  min-height: 48px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.user-edit-modal-cancel {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--text-secondary, #606060);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.user-edit-modal-cancel:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 252, 255, 0.9) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.user-edit-modal-save {
  background: var(--accent-primary, #4CAF50);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.3);
}
.user-edit-modal-save:hover:not(:disabled) {
  background: var(--accent-primary-lighter, #66bb6a);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}
.user-edit-modal-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

:root[data-theme=dark] .user-edit-modal-overlay,
:root[data-theme=fintech] .user-edit-modal-overlay {
  background: rgba(10, 14, 26, 0.85);
}
:root[data-theme=dark] .user-edit-modal-container,
:root[data-theme=fintech] .user-edit-modal-container {
  background: linear-gradient(145deg, rgba(30, 35, 50, 0.98) 0%, rgba(20, 25, 40, 0.95) 100%);
  border: 1px solid rgba(56, 189, 248, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 40px rgba(56, 189, 248, 0.1);
}
:root[data-theme=dark] .user-edit-modal-header,
:root[data-theme=fintech] .user-edit-modal-header {
  border-color: rgba(255, 255, 255, 0.1);
}
:root[data-theme=dark] .user-edit-modal-header .user-edit-modal-name h2,
:root[data-theme=fintech] .user-edit-modal-header .user-edit-modal-name h2 {
  color: #ffffff;
}
:root[data-theme=dark] .user-edit-modal-header .user-edit-modal-email,
:root[data-theme=fintech] .user-edit-modal-header .user-edit-modal-email {
  color: rgba(255, 255, 255, 0.5);
}
:root[data-theme=dark] .user-edit-section-label,
:root[data-theme=fintech] .user-edit-section-label {
  color: rgba(255, 255, 255, 0.5);
}
:root[data-theme=dark] .user-edit-toggle-row,
:root[data-theme=fintech] .user-edit-toggle-row {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}
:root[data-theme=dark] .user-edit-toggle-title,
:root[data-theme=fintech] .user-edit-toggle-title {
  color: #ffffff;
}
:root[data-theme=dark] .user-edit-toggle-desc,
:root[data-theme=fintech] .user-edit-toggle-desc {
  color: rgba(255, 255, 255, 0.5);
}
:root[data-theme=dark] .user-edit-roles-loading,
:root[data-theme=fintech] .user-edit-roles-loading {
  color: rgba(255, 255, 255, 0.5);
}
:root[data-theme=dark] .user-edit-modal-footer,
:root[data-theme=fintech] .user-edit-modal-footer {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(145deg, rgba(30, 35, 50, 0.98) 0%, rgba(20, 25, 40, 0.95) 100%);
}
:root[data-theme=dark] .user-edit-modal-cancel,
:root[data-theme=fintech] .user-edit-modal-cancel {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}
:root[data-theme=dark] .user-edit-modal-cancel:hover,
:root[data-theme=fintech] .user-edit-modal-cancel:hover {
  background: rgba(255, 255, 255, 0.12);
}
:root[data-theme=dark] .user-edit-modal-save,
:root[data-theme=fintech] .user-edit-modal-save {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-light) 100%);
  color: #0f172a;
}

.user-profile-container {
  padding: 20em 0 10em 0;
  background-color: var(--bg-primary, #ededed);
}
.user-profile-container .top-content-container > h1 {
  opacity: 0;
  animation: screenFadeSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.05s;
}
.user-profile-container .user-profile-form {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.user-profile-container .user-profile-form > * {
  opacity: 0;
  animation: screenFadeSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.user-profile-container .user-profile-form > *:nth-child(1) {
  animation-delay: 0.15s;
}
.user-profile-container .user-profile-form > *:nth-child(2) {
  animation-delay: 0.2s;
}
.user-profile-container .user-profile-form > *:nth-child(3) {
  animation-delay: 0.25s;
}
.user-profile-container .user-profile-form > *:nth-child(4) {
  animation-delay: 0.3s;
}
.user-profile-container .user-profile-form > *:nth-child(5) {
  animation-delay: 0.35s;
}
.user-profile-container .user-profile-form > *:nth-child(6) {
  animation-delay: 0.4s;
}
.user-profile-container .user-profile-form > *:nth-child(7) {
  animation-delay: 0.45s;
}
.user-profile-container .user-profile-form > *:nth-child(8) {
  animation-delay: 0.5s;
}
.user-profile-container .user-profile-form > *:nth-child(9) {
  animation-delay: 0.55s;
}
.user-profile-container .user-profile-form > *:nth-child(10) {
  animation-delay: 0.6s;
}

.receipts-container {
  padding: 20em 12px 8rem 12px;
  position: relative;
  width: 100%;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-primary, #ededed);
  border: none;
}
@media only screen and (min-width: 481px) {
  .receipts-container {
    min-height: 100%;
  }
}
.receipts-container.active-app {
  display: flex;
}
.receipts-container .empty-state {
  width: 100%;
  max-width: 100%;
  padding: 48px 24px;
}
.receipts-container .receipts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 8px;
  margin-bottom: 8px;
  width: 100%;
}
.receipts-container .receipts-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary, #272727);
}
.receipts-container .receipts-header .receipts-count {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-tertiary, #888);
  padding: 6px 12px;
  background: var(--bg-tertiary, #f7f7f7);
  border-radius: 16px;
}
.receipts-container .receipts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.receipts-container .receipts-list .receipt-item {
  opacity: 0;
  animation: itemSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.receipts-container .receipts-list .receipt-item:nth-child(1) {
  animation-delay: 0.14s;
}
.receipts-container .receipts-list .receipt-item:nth-child(2) {
  animation-delay: 0.18s;
}
.receipts-container .receipts-list .receipt-item:nth-child(3) {
  animation-delay: 0.22s;
}
.receipts-container .receipts-list .receipt-item:nth-child(4) {
  animation-delay: 0.26s;
}
.receipts-container .receipts-list .receipt-item:nth-child(5) {
  animation-delay: 0.3s;
}
.receipts-container .receipts-list .receipt-item:nth-child(6) {
  animation-delay: 0.34s;
}
.receipts-container .receipts-list .receipt-item:nth-child(7) {
  animation-delay: 0.38s;
}
.receipts-container .receipts-list .receipt-item:nth-child(8) {
  animation-delay: 0.42s;
}
.receipts-container .receipts-list .receipt-item:nth-child(9) {
  animation-delay: 0.46s;
}
.receipts-container .receipts-list .receipt-item:nth-child(10) {
  animation-delay: 0.5s;
}
.receipts-container .receipts-list .receipt-item:nth-child(11) {
  animation-delay: 0.54s;
}
.receipts-container .receipts-list .receipt-item:nth-child(12) {
  animation-delay: 0.58s;
}
.receipts-container .receipts-list .receipt-item:nth-child(n+13) {
  animation-delay: 0.58s;
}
.receipts-container .receipt-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  min-height: 72px;
  background: linear-gradient(135deg, var(--glass-light), var(--glass-ultra-light));
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  border-radius: 12px;
  border: none;
  position: relative;
  box-shadow: var(--shadow-glass-sm);
  transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), background var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1));
}
.receipts-container .receipt-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-refraction-top, rgba(255, 255, 255, 0.5)), transparent);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}
.receipts-container .receipt-item:hover {
  transform: translateY(-2px) translateX(4px);
  background: linear-gradient(135deg, var(--glass-medium), var(--glass-light));
  box-shadow: var(--shadow-glass-md);
}
.receipts-container .receipt-item:hover::before {
  background: linear-gradient(90deg, transparent, var(--glass-refraction-top, rgba(255, 255, 255, 0.7)), transparent);
}
.receipts-container .receipt-item {
  padding: 14px 18px;
}
.receipts-container .receipt-item .receipt-info {
  flex: 1;
  min-width: 0;
}
.receipts-container .receipt-item .receipt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.receipts-container .receipt-item .receipt-header .receipt-amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary, #272727);
}
.receipts-container .receipt-item .receipt-header .receipt-status {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.receipts-container .receipt-item .receipt-header .receipt-status.status-success {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.08) 100%);
  color: #2e7d32;
  border: 1px solid rgba(76, 175, 80, 0.3);
}
.receipts-container .receipt-item .receipt-header .receipt-status.status-pending {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.08) 100%);
  color: #f57c00;
  border: 1px solid rgba(255, 193, 7, 0.3);
}
.receipts-container .receipt-item .receipt-header .receipt-status.status-error {
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.15) 0%, rgba(244, 67, 54, 0.08) 100%);
  color: #c62828;
  border: 1px solid rgba(244, 67, 54, 0.3);
}
.receipts-container .receipt-item .receipt-header .receipt-status.status-refunded {
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.15) 0%, rgba(156, 39, 176, 0.08) 100%);
  color: #7b1fa2;
  border: 1px solid rgba(156, 39, 176, 0.3);
}
.receipts-container .receipt-item .receipt-merchant {
  margin-bottom: 6px;
}
.receipts-container .receipt-item .receipt-merchant .merchant-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
}
.receipts-container .receipt-item .receipt-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.receipts-container .receipt-item .receipt-details .receipt-date {
  font-size: 13px;
  color: var(--text-tertiary, #888);
}
.receipts-container .receipt-item .receipt-details .receipt-customer {
  font-size: 13px;
  color: var(--text-secondary, #606060);
  font-weight: 500;
}
.receipts-container .receipt-item .receipt-details .receipt-customer::before {
  content: "•";
  margin-right: 8px;
  color: var(--border-secondary, #ccc);
}
.receipts-container .receipt-item .receipt-product {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-quaternary, #aaa);
}
.receipts-container .receipt-item .receipt-refund-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.15) 0%, rgba(156, 39, 176, 0.08) 100%);
  color: var(--accent-premium, #a855f7);
  border: 1px solid rgba(156, 39, 176, 0.3);
}
.receipts-container .receipt-item .receipt-refund-label i {
  font-size: 10px;
}
.receipts-container .receipt-item .receipt-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  color: var(--text-quaternary, #aaa);
  transition: color 0.2s ease, transform 0.2s ease;
  border-radius: 12px;
  margin: -8px;
  padding: 8px;
}
.receipts-container .receipt-item .receipt-action i {
  font-size: 16px;
  transition: transform 0.2s ease;
}
.receipts-container .receipt-item:hover .receipt-action {
  color: var(--accent-primary, #4CAF50);
}
.receipts-container .receipt-item:hover .receipt-action i {
  transform: translateX(2px);
}
.receipts-container .receipt-item:active .receipt-action {
  transform: scale(0.95);
}
.receipts-container .receipt-item .receipt-reason {
  margin-top: 4px;
  font-size: 12px;
  font-style: italic;
  color: var(--text-tertiary, #888);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.receipts-container .receipt-item .receipt-refund-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.receipts-container .receipt-item .refund-action-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, opacity 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.receipts-container .receipt-item .refund-action-btn:hover {
  transform: translateY(-1px) scale(1.05);
}
.receipts-container .receipt-item .refund-action-btn:active {
  transform: translateY(0) scale(0.95);
}
.receipts-container .receipt-item .refund-action-approve {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.25) 0%, rgba(76, 175, 80, 0.12) 100%);
  color: var(--accent-success, #4ade80);
  border: 1px solid rgba(76, 175, 80, 0.4);
}
.receipts-container .receipt-item .refund-action-approve:hover {
  box-shadow: 0 2px 12px rgba(76, 175, 80, 0.4);
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.35) 0%, rgba(76, 175, 80, 0.2) 100%);
}
.receipts-container .receipt-item .refund-action-reject {
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.25) 0%, rgba(244, 67, 54, 0.12) 100%);
  color: var(--accent-danger, #f87171);
  border: 1px solid rgba(244, 67, 54, 0.4);
}
.receipts-container .receipt-item .refund-action-reject:hover {
  box-shadow: 0 2px 12px rgba(244, 67, 54, 0.4);
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.35) 0%, rgba(244, 67, 54, 0.2) 100%);
}
.receipts-container .receipt-item .refund-request-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent-primary, #4CAF50);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}
.receipts-container .receipt-item .refund-request-checkbox:hover, .receipts-container .receipt-item .refund-request-checkbox:checked {
  opacity: 1;
}
.receipts-container .receipt-item.receipt-item--selected {
  border: 1px solid rgba(var(--accent-primary-rgb, 76, 175, 80), 0.4);
  box-shadow: 0 0 0 1px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.15), var(--shadow-glass-sm);
}

.refund-batch-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.refund-batch-controls .refund-select-all-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-primary, #4CAF50);
  cursor: pointer;
}

.receipt-details-view .receipt-details-header {
  padding: 16px 20px;
  background-color: var(--bg-secondary, #ffffff);
  border-bottom: 1px solid var(--border-primary, #e4e4e4);
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 4em;
  z-index: 10;
}
.receipt-details-view .receipt-details-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary, #272727);
}
.receipt-details-view .receipt-details-header .back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-tertiary, #f7f7f7);
  border: 1px solid var(--border-primary, #e4e4e4);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary, #606060);
  cursor: pointer;
  transition: all 0.2s ease;
}
.receipt-details-view .receipt-details-header .back-button:hover {
  background: var(--bg-secondary, #ffffff);
  border-color: var(--border-secondary, #ccc);
}
.receipt-details-view .receipt-details-header .back-button:active {
  transform: scale(0.98);
}
.receipt-details-view .receipt-details-header .back-button i {
  font-size: 14px;
}
.receipt-details-view .receipt-details-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary, #272727);
}
.receipt-details-view .receipt-status-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
}
.receipt-details-view .receipt-status-banner i {
  font-size: 18px;
}
.receipt-details-view .receipt-status-banner.status-success {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.08) 100%);
  color: #2e7d32;
  border-bottom: 2px solid rgba(76, 175, 80, 0.3);
}
.receipt-details-view .receipt-status-banner.status-pending {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.08) 100%);
  color: #f57c00;
  border-bottom: 2px solid rgba(255, 193, 7, 0.3);
}
.receipt-details-view .receipt-status-banner.status-error {
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.15) 0%, rgba(244, 67, 54, 0.08) 100%);
  color: #c62828;
  border-bottom: 2px solid rgba(244, 67, 54, 0.3);
}
.receipt-details-view .receipt-status-banner.status-refunded {
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.15) 0%, rgba(156, 39, 176, 0.08) 100%);
  color: #7b1fa2;
  border-bottom: 2px solid rgba(156, 39, 176, 0.3);
}
.receipt-details-view .receipt-amount-large {
  text-align: center;
  padding: 32px 20px;
  font-size: 48px;
  font-weight: 700;
  color: var(--text-primary, #272727);
  background: var(--bg-secondary, #ffffff);
  border-bottom: 1px solid var(--border-primary, #e4e4e4);
}
.receipt-details-view .receipt-meta {
  padding: 20px;
  background-color: var(--bg-secondary, #ffffff);
  border-bottom: 1px solid var(--border-primary, #e4e4e4);
}
.receipt-details-view .receipt-meta h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.receipt-details-view .receipt-meta {
  display: grid;
  gap: 0;
}
.receipt-details-view .receipt-meta .receipt-meta-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-primary, #f0f0f0);
}
.receipt-details-view .receipt-meta .receipt-meta-item:last-child {
  border-bottom: none;
}
.receipt-details-view .receipt-meta .receipt-meta-item .label {
  font-size: 14px;
  color: var(--text-tertiary, #888);
}
.receipt-details-view .receipt-meta .receipt-meta-item .value {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary, #272727);
  text-align: right;
}
.receipt-details-view .receipt-meta .receipt-meta-item .value.receipt-uuid {
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 13px;
  color: var(--text-secondary, #606060);
}
.receipt-details-view .receipt-items-section {
  padding: 20px;
  background-color: var(--bg-secondary, #ffffff);
  border-bottom: 1px solid var(--border-primary, #e4e4e4);
}
.receipt-details-view .receipt-items-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.receipt-details-view .receipt-items-section h3 {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.receipt-details-view .receipt-items-section .receipt-items-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.receipt-details-view .receipt-items-section .receipt-items-list .receipt-item-row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-primary, #f0f0f0);
}
.receipt-details-view .receipt-items-section .receipt-items-list .receipt-item-row:last-child {
  border-bottom: none;
}
.receipt-details-view .receipt-items-section .receipt-items-list .receipt-item-row .item-name {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary, #272727);
}
.receipt-details-view .receipt-items-section .receipt-items-list .receipt-item-row .item-qty {
  padding: 0 16px;
  font-size: 14px;
  color: var(--text-tertiary, #888);
}
.receipt-details-view .receipt-items-section .receipt-items-list .receipt-item-row .item-price {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
}
.receipt-details-view .receipt-totals {
  padding: 20px;
  background-color: var(--bg-secondary, #ffffff);
  border-bottom: 1px solid var(--border-primary, #e4e4e4);
}
.receipt-details-view .receipt-totals h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.receipt-details-view .receipt-totals .total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 15px;
  color: var(--text-secondary, #606060);
}
.receipt-details-view .receipt-totals .total-row.discount span:last-child {
  color: var(--accent-danger, #fb4268);
}
.receipt-details-view .receipt-totals .total-row.tip span:last-child {
  color: var(--accent-primary, #4CAF50);
}
.receipt-details-view .receipt-totals .total-row.final {
  margin-top: 12px;
  padding-top: 16px;
  border-top: 2px solid var(--border-primary, #e4e4e4);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary, #272727);
}
.receipt-details-view .receipt-split-info {
  padding: 20px;
  background-color: var(--bg-secondary, #ffffff);
  border-bottom: 1px solid var(--border-primary, #e4e4e4);
}
.receipt-details-view .receipt-split-info h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.receipt-details-view .receipt-split-info {
  text-align: center;
}
.receipt-details-view .receipt-split-info h3 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.receipt-details-view .receipt-split-info p {
  margin: 0;
  font-size: 14px;
  color: var(--text-tertiary, #888);
}
.receipt-details-view .receipt-split-info .per-person {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--accent-primary, #4CAF50);
}
.receipt-details-view .receipt-actions-section {
  padding: 20px;
  background-color: var(--bg-secondary, #ffffff);
  border-bottom: 1px solid var(--border-primary, #e4e4e4);
}
.receipt-details-view .receipt-actions-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.receipt-details-view .receipt-actions-section h3 {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.receipt-details-view .receipt-actions-section .receipt-cancel-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px 0;
  padding: 12px 16px;
  background: rgba(251, 66, 104, 0.08);
  border-radius: 8px;
  font-size: 14px;
  color: var(--accent-danger, #fb4268);
}
.receipt-details-view .receipt-actions-section .receipt-cancel-warning i {
  font-size: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .receipt-details-view .receipt-actions-section .receipt-cancel-warning {
    background: rgba(255, 90, 125, 0.12);
  }
}
[data-theme=dark] .receipt-details-view .receipt-actions-section .receipt-cancel-warning {
  background: rgba(255, 90, 125, 0.12);
}
.receipt-details-view .receipt-actions-section .receipt-cancel-container {
  margin-bottom: 16px;
}
.receipt-details-view .receipt-actions-section .receipt-cancel-container.hidden {
  display: none;
}
.receipt-details-view .receipt-actions-section .receipt-cancel-feedback.hidden {
  display: none;
}
.receipt-details-view .receipt-actions-section .receipt-cancel-feedback .cancel-success,
.receipt-details-view .receipt-actions-section .receipt-cancel-feedback .cancel-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
}
.receipt-details-view .receipt-actions-section .receipt-cancel-feedback .cancel-success {
  background: rgba(76, 175, 80, 0.1);
  color: var(--accent-primary, #4CAF50);
}
.receipt-details-view .receipt-actions-section .receipt-cancel-feedback .cancel-success i {
  font-size: 20px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .receipt-details-view .receipt-actions-section .receipt-cancel-feedback .cancel-success {
    background: rgba(102, 187, 106, 0.15);
  }
}
[data-theme=dark] .receipt-details-view .receipt-actions-section .receipt-cancel-feedback .cancel-success {
  background: rgba(102, 187, 106, 0.15);
}
.receipt-details-view .receipt-actions-section .receipt-cancel-feedback .cancel-error {
  background: rgba(251, 66, 104, 0.1);
  color: var(--accent-danger, #fb4268);
}
.receipt-details-view .receipt-actions-section .receipt-cancel-feedback .cancel-error i {
  font-size: 20px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .receipt-details-view .receipt-actions-section .receipt-cancel-feedback .cancel-error {
    background: rgba(255, 90, 125, 0.15);
  }
}
[data-theme=dark] .receipt-details-view .receipt-actions-section .receipt-cancel-feedback .cancel-error {
  background: rgba(255, 90, 125, 0.15);
}
.receipt-details-view .receipt-retry-section {
  padding: 20px;
  background-color: var(--bg-secondary, #ffffff);
  border-bottom: 1px solid var(--border-primary, #e4e4e4);
}
.receipt-details-view .receipt-retry-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.receipt-details-view .receipt-retry-section {
  border-top: 1px solid var(--border-primary, #e4e4e4);
}
.receipt-details-view .receipt-retry-section .receipt-failure-reason {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px 0;
  padding: 12px 16px;
  background: rgba(251, 66, 104, 0.08);
  border-radius: 10px;
  font-size: 13px;
  color: var(--accent-danger, #fb4268);
  line-height: 1.5;
}
.receipt-details-view .receipt-retry-section .receipt-failure-reason i {
  flex-shrink: 0;
  margin-top: 2px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .receipt-details-view .receipt-retry-section .receipt-failure-reason {
    background: rgba(255, 90, 125, 0.12);
  }
}
[data-theme=dark] .receipt-details-view .receipt-retry-section .receipt-failure-reason {
  background: rgba(255, 90, 125, 0.12);
}
.receipt-details-view .receipt-retry-section .receipt-retry-info {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: var(--text-secondary, #606060);
  line-height: 1.5;
}
.receipt-details-view .receipt-retry-section .receipt-retry-btn {
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  background: var(--accent-primary, #4CAF50);
  color: white;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.receipt-details-view .receipt-retry-section .receipt-retry-btn:hover:not(:disabled) {
  background: var(--accent-primary-dark, #43a047);
  transform: translateY(-1px);
}
.receipt-details-view .receipt-retry-section .receipt-retry-btn:active:not(:disabled) {
  transform: translateY(0);
}
.receipt-details-view .receipt-retry-section .receipt-retry-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.receipt-details-view .receipt-retry-section .receipt-retry-btn i {
  font-size: 14px;
}
.receipt-details-view .receipt-retry-section .receipt-retry-feedback {
  margin-top: 16px;
}
.receipt-details-view .receipt-retry-section .receipt-retry-feedback.hidden {
  display: none;
}
.receipt-details-view .receipt-retry-section .receipt-retry-feedback .loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: rgba(76, 175, 80, 0.08);
  border-radius: 10px;
  font-size: 14px;
  color: var(--accent-primary, #4CAF50);
}
.receipt-details-view .receipt-retry-section .receipt-retry-feedback .loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.receipt-details-view .receipt-retry-section .receipt-retry-feedback .success {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background: rgba(76, 175, 80, 0.1);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-primary, #4CAF50);
}
.receipt-details-view .receipt-retry-section .receipt-retry-feedback .error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background: rgba(251, 66, 104, 0.1);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-danger, #fb4268);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .receipt-details-view .receipt-retry-section {
    border-color: rgba(255, 255, 255, 0.1);
  }
}
[data-theme=dark] .receipt-details-view .receipt-retry-section {
  border-color: rgba(255, 255, 255, 0.1);
}
.receipt-details-view .receipt-refund-section {
  padding: 20px;
  background-color: var(--bg-secondary, #ffffff);
  border-bottom: 1px solid var(--border-primary, #e4e4e4);
}
.receipt-details-view .receipt-refund-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.receipt-details-view .receipt-refund-section {
  border-top: 1px solid var(--border-primary, #e4e4e4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.receipt-details-view .receipt-refund-section .receipt-refund-info {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: var(--text-secondary, #606060);
  line-height: 1.4;
}
.receipt-details-view .receipt-refund-section .receipt-refund-btn {
  width: auto;
  min-width: 180px;
  max-width: 70%;
  padding: 14px 20px;
  border: 1px solid var(--accent-primary, #4CAF50);
  border-radius: 12px;
  background: transparent;
  color: var(--accent-primary, #4CAF50);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
}
.receipt-details-view .receipt-refund-section .receipt-refund-btn:hover:not(:disabled) {
  background: rgba(76, 175, 80, 0.08);
  transform: translateY(-1px);
}
.receipt-details-view .receipt-refund-section .receipt-refund-btn:active:not(:disabled) {
  transform: translateY(0);
  background: rgba(76, 175, 80, 0.12);
}
.receipt-details-view .receipt-refund-section .receipt-refund-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.receipt-details-view .receipt-refund-section .receipt-refund-btn i {
  font-size: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .receipt-details-view .receipt-refund-section {
    border-color: rgba(255, 255, 255, 0.1);
  }
}
[data-theme=dark] .receipt-details-view .receipt-refund-section {
  border-color: rgba(255, 255, 255, 0.1);
}

.refund-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.refund-modal-overlay.hidden {
  display: none;
}
.refund-modal-overlay.visible {
  opacity: 1;
}
.refund-modal-overlay .refund-modal-container {
  width: 100%;
  max-width: 420px;
  background: var(--bg-primary, #ffffff);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transform: translateY(20px) scale(0.95);
  transition: transform 0.3s ease;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .refund-modal-overlay .refund-modal-container {
    background: var(--bg-secondary, #1a1a1a);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  }
}
[data-theme=dark] .refund-modal-overlay .refund-modal-container {
  background: var(--bg-secondary, #1a1a1a);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.refund-modal-overlay.visible .refund-modal-container {
  transform: translateY(0) scale(1);
}
.refund-modal-overlay .refund-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-primary, #e4e4e4);
}
.refund-modal-overlay .refund-modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  display: flex;
  align-items: center;
  gap: 10px;
}
.refund-modal-overlay .refund-modal-header h2 i {
  color: var(--accent-primary, #4CAF50);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .refund-modal-overlay .refund-modal-header h2 {
    color: var(--text-primary, #f5f5f5);
  }
}
[data-theme=dark] .refund-modal-overlay .refund-modal-header h2 {
  color: var(--text-primary, #f5f5f5);
}
.refund-modal-overlay .refund-modal-header .refund-modal-close-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: var(--bg-tertiary, #f5f5f5);
  color: var(--text-secondary, #606060);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.refund-modal-overlay .refund-modal-header .refund-modal-close-btn:hover {
  background: var(--bg-quaternary, #e0e0e0);
  color: var(--text-primary, #1a1a1a);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .refund-modal-overlay .refund-modal-header .refund-modal-close-btn {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary, #a0a0a0);
  }
  :root:not([data-theme]) .refund-modal-overlay .refund-modal-header .refund-modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary, #f5f5f5);
  }
}
[data-theme=dark] .refund-modal-overlay .refund-modal-header .refund-modal-close-btn {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary, #a0a0a0);
}
[data-theme=dark] .refund-modal-overlay .refund-modal-header .refund-modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-primary, #f5f5f5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .refund-modal-overlay .refund-modal-header {
    border-color: rgba(255, 255, 255, 0.1);
  }
}
[data-theme=dark] .refund-modal-overlay .refund-modal-header {
  border-color: rgba(255, 255, 255, 0.1);
}
.refund-modal-overlay .refund-modal-body {
  padding: 24px;
}
.refund-modal-overlay .refund-modal-body .refund-form-group {
  margin-bottom: 20px;
}
.refund-modal-overlay .refund-modal-body .refund-form-group:last-of-type {
  margin-bottom: 0;
}
.refund-modal-overlay .refund-modal-body .refund-form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .refund-modal-overlay .refund-modal-body .refund-form-group label {
    color: var(--text-primary, #f5f5f5);
  }
}
[data-theme=dark] .refund-modal-overlay .refund-modal-body .refund-form-group label {
  color: var(--text-primary, #f5f5f5);
}
.refund-modal-overlay .refund-modal-body .refund-form-group .refund-amount-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-primary, #e4e4e4);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.refund-modal-overlay .refund-modal-body .refund-form-group .refund-amount-wrapper:focus-within {
  border-color: var(--accent-primary, #4CAF50);
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
}
.refund-modal-overlay .refund-modal-body .refund-form-group .refund-amount-wrapper .currency-prefix {
  padding: 12px 14px;
  background: var(--bg-tertiary, #f5f5f5);
  color: var(--text-secondary, #606060);
  font-size: 15px;
  font-weight: 600;
  border-right: 1px solid var(--border-primary, #e4e4e4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .refund-modal-overlay .refund-modal-body .refund-form-group .refund-amount-wrapper .currency-prefix {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
  }
}
[data-theme=dark] .refund-modal-overlay .refund-modal-body .refund-form-group .refund-amount-wrapper .currency-prefix {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
.refund-modal-overlay .refund-modal-body .refund-form-group .refund-amount-wrapper .refund-amount-input {
  flex: 1;
  padding: 12px 14px;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary, #1a1a1a);
  outline: none;
}
.refund-modal-overlay .refund-modal-body .refund-form-group .refund-amount-wrapper .refund-amount-input::placeholder {
  color: var(--text-tertiary, #a0a0a0);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .refund-modal-overlay .refund-modal-body .refund-form-group .refund-amount-wrapper .refund-amount-input {
    color: var(--text-primary, #f5f5f5);
  }
}
[data-theme=dark] .refund-modal-overlay .refund-modal-body .refund-form-group .refund-amount-wrapper .refund-amount-input {
  color: var(--text-primary, #f5f5f5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .refund-modal-overlay .refund-modal-body .refund-form-group .refund-amount-wrapper {
    border-color: rgba(255, 255, 255, 0.15);
  }
}
[data-theme=dark] .refund-modal-overlay .refund-modal-body .refund-form-group .refund-amount-wrapper {
  border-color: rgba(255, 255, 255, 0.15);
}
.refund-modal-overlay .refund-modal-body .refund-form-group .refund-hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-secondary, #606060);
}
.refund-modal-overlay .refund-modal-body .refund-form-group .refund-reason-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-primary, #e4e4e4);
  border-radius: 10px;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary, #1a1a1a);
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.2s ease;
}
.refund-modal-overlay .refund-modal-body .refund-form-group .refund-reason-input:focus {
  outline: none;
  border-color: var(--accent-primary, #4CAF50);
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
}
.refund-modal-overlay .refund-modal-body .refund-form-group .refund-reason-input::placeholder {
  color: var(--text-tertiary, #a0a0a0);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .refund-modal-overlay .refund-modal-body .refund-form-group .refund-reason-input {
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-primary, #f5f5f5);
  }
  :root:not([data-theme]) .refund-modal-overlay .refund-modal-body .refund-form-group .refund-reason-input:focus {
    border-color: var(--accent-primary, #4CAF50);
  }
}
[data-theme=dark] .refund-modal-overlay .refund-modal-body .refund-form-group .refund-reason-input {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-primary, #f5f5f5);
}
[data-theme=dark] .refund-modal-overlay .refund-modal-body .refund-form-group .refund-reason-input:focus {
  border-color: var(--accent-primary, #4CAF50);
}
.refund-modal-overlay .refund-modal-body .refund-feedback {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  text-align: center;
}
.refund-modal-overlay .refund-modal-body .refund-feedback.hidden {
  display: none;
}
.refund-modal-overlay .refund-modal-body .refund-feedback.loading {
  background: rgba(76, 175, 80, 0.1);
  color: var(--accent-primary, #4CAF50);
}
.refund-modal-overlay .refund-modal-body .refund-feedback.success {
  background: rgba(76, 175, 80, 0.12);
  color: var(--accent-primary, #4CAF50);
  font-weight: 500;
}
.refund-modal-overlay .refund-modal-body .refund-feedback.error {
  background: rgba(251, 66, 104, 0.12);
  color: var(--accent-danger, #fb4268);
  font-weight: 500;
}
.refund-modal-overlay .refund-modal-footer {
  display: flex;
  flex-direction: row-reverse;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid var(--border-primary, #e4e4e4);
}
.refund-modal-overlay .refund-modal-footer .btn {
  flex: 1;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.refund-modal-overlay .refund-modal-footer .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.refund-modal-overlay .refund-modal-footer .refund-cancel-btn {
  background: var(--bg-tertiary, #f5f5f5);
  color: var(--text-primary, #1a1a1a);
  border: none;
}
.refund-modal-overlay .refund-modal-footer .refund-cancel-btn:hover:not(:disabled) {
  background: var(--bg-quaternary, #e0e0e0);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .refund-modal-overlay .refund-modal-footer .refund-cancel-btn {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #f5f5f5);
  }
  :root:not([data-theme]) .refund-modal-overlay .refund-modal-footer .refund-cancel-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
  }
}
[data-theme=dark] .refund-modal-overlay .refund-modal-footer .refund-cancel-btn {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary, #f5f5f5);
}
[data-theme=dark] .refund-modal-overlay .refund-modal-footer .refund-cancel-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
}
.refund-modal-overlay .refund-modal-footer .refund-submit-btn {
  background: var(--accent-primary, #4CAF50);
  color: white;
  border: none;
}
.refund-modal-overlay .refund-modal-footer .refund-submit-btn:hover:not(:disabled) {
  background: var(--accent-primary-dark, #43a047);
  transform: translateY(-1px);
}
.refund-modal-overlay .refund-modal-footer .refund-submit-btn:active:not(:disabled) {
  transform: translateY(0);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .refund-modal-overlay .refund-modal-footer {
    border-color: rgba(255, 255, 255, 0.1);
  }
}
[data-theme=dark] .refund-modal-overlay .refund-modal-footer {
  border-color: rgba(255, 255, 255, 0.1);
}

@keyframes wizardSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes wizardFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes wizardScaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.payment-wizard-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
  padding: 20px;
}
.payment-wizard-overlay.hidden {
  display: none;
}

.payment-wizard-content {
  background: var(--bg-secondary, #ffffff);
  border-radius: 20px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  animation: wizardSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: var(--bg-secondary, #ffffff);
  border-bottom: 1px solid var(--border-primary, #e4e4e4);
  position: sticky;
  top: 0;
  z-index: 10;
}
.wizard-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary, #272727);
}

.wizard-close {
  background: var(--bg-tertiary, #f7f7f7);
  border: 1px solid var(--border-primary, #e4e4e4);
  font-size: 16px;
  cursor: pointer;
  color: var(--text-secondary, #606060);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: all 0.2s ease;
  touch-action: manipulation;
}
.wizard-close:hover {
  background: var(--bg-secondary, #ffffff);
  border-color: var(--border-secondary, #ccc);
}
.wizard-close:active {
  transform: scale(0.95);
}

.wizard-body {
  padding: 24px;
}

.payment-screen {
  display: none;
}
.payment-screen.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  padding-bottom: 0;
}
.payment-screen.active::-webkit-scrollbar {
  width: 6px;
}
.payment-screen.active::-webkit-scrollbar-track {
  background: transparent;
}
.payment-screen.active::-webkit-scrollbar-thumb {
  background: var(--border-secondary, #ccc);
  border-radius: 3px;
}
.payment-screen.active > h2 {
  opacity: 0;
  animation: wizardFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.05s;
}
.payment-screen.active > h3 {
  opacity: 0;
  flex-shrink: 0;
  animation: wizardFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.1s;
}
.payment-screen.active > .payment-method-section,
.payment-screen.active > .wizard-cart-summary,
.payment-screen.active > .form-group,
.payment-screen.active > .payment-or {
  opacity: 0;
  animation: wizardFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.payment-screen.active > .payment-method-section:nth-child(1),
.payment-screen.active > .wizard-cart-summary:nth-child(1),
.payment-screen.active > .form-group:nth-child(1),
.payment-screen.active > .payment-or:nth-child(1) {
  animation-delay: 0.08s;
}
.payment-screen.active > .payment-method-section:nth-child(2),
.payment-screen.active > .wizard-cart-summary:nth-child(2),
.payment-screen.active > .form-group:nth-child(2),
.payment-screen.active > .payment-or:nth-child(2) {
  animation-delay: 0.12s;
}
.payment-screen.active > .payment-method-section:nth-child(3),
.payment-screen.active > .wizard-cart-summary:nth-child(3),
.payment-screen.active > .form-group:nth-child(3),
.payment-screen.active > .payment-or:nth-child(3) {
  animation-delay: 0.16s;
}
.payment-screen.active > .payment-method-section:nth-child(4),
.payment-screen.active > .wizard-cart-summary:nth-child(4),
.payment-screen.active > .form-group:nth-child(4),
.payment-screen.active > .payment-or:nth-child(4) {
  animation-delay: 0.2s;
}
.payment-screen.active > .payment-method-section:nth-child(5),
.payment-screen.active > .wizard-cart-summary:nth-child(5),
.payment-screen.active > .form-group:nth-child(5),
.payment-screen.active > .payment-or:nth-child(5) {
  animation-delay: 0.24s;
}
.payment-screen.active > .payment-method-section:nth-child(6),
.payment-screen.active > .wizard-cart-summary:nth-child(6),
.payment-screen.active > .form-group:nth-child(6),
.payment-screen.active > .payment-or:nth-child(6) {
  animation-delay: 0.28s;
}
.payment-screen.active > .wizard-actions {
  opacity: 0;
  animation: wizardFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.3s;
  margin-top: auto;
  flex-shrink: 0;
}
.payment-screen h2 {
  margin: 0 0 20px 0;
  color: var(--text-primary, #272727);
  font-size: 22px;
  font-weight: 600;
}
.payment-screen h3 {
  margin: 24px 0 12px 0;
  color: var(--text-secondary, #606060);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.payment-method-section {
  background: var(--bg-tertiary, #f7f7f7);
  padding: 20px;
  border-radius: 12px;
  margin: 16px 0;
  border: 1px solid var(--border-primary, #e4e4e4);
}
.payment-method-section h3 {
  margin-top: 0;
  margin-bottom: 16px;
}
.payment-method-section .form-group {
  padding: 0;
  background: transparent;
  border-bottom: none;
  margin-bottom: 12px;
}
.payment-method-section .form-group:last-child {
  margin-bottom: 0;
}

.payment-or {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 20px 0;
}
.payment-or::before, .payment-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-primary, #e4e4e4);
}
.payment-or span {
  font-weight: 600;
  color: var(--text-tertiary, #888888);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wizard-cart-summary {
  background: var(--bg-tertiary, #f7f7f7);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}
.wizard-cart-summary .cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-primary, #f0f0f0);
}
.wizard-cart-summary .cart-item:last-child {
  border-bottom: none;
}
.wizard-cart-summary .cart-item .cart-item-name {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary, #272727);
}
.wizard-cart-summary .cart-item .cart-item-qty {
  padding: 0 12px;
  font-size: 13px;
  color: var(--text-tertiary, #888);
}
.wizard-cart-summary .cart-item .cart-item-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
}
.wizard-cart-summary .cart-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 2px solid var(--border-primary, #e4e4e4);
  font-weight: 600;
  color: var(--text-primary, #272727);
}

.wizard-actions {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
  background: var(--bg-secondary, #ffffff);
  border-top: 1px solid var(--border-primary, #e4e4e4);
  position: sticky;
  bottom: -1.5rem;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.wizard-actions .wizard-btn {
  flex: 1;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.wizard-actions .wizard-btn.primary {
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent-primary, #4CAF50) 0%, var(--accent-primary-lighter, #66bb6a) 50%, var(--accent-primary, #4CAF50) 100%);
  background-size: 200% 200%;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-accent-glow, 0 4px 15px rgba(76, 175, 80, 0.4)), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), background-position var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1));
}
.wizard-actions .wizard-btn.primary:hover {
  background-position: 100% 100%;
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent-glow-intense, 0 8px 25px rgba(76, 175, 80, 0.5)), 0 0 40px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.wizard-actions .wizard-btn.primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.wizard-actions .wizard-btn.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.wizard-actions .wizard-btn.secondary {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 250, 252, 0.7) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--text-secondary, #606060);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.wizard-actions .wizard-btn.secondary i {
  opacity: 0.7;
}
.wizard-actions .wizard-btn.secondary:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.wizard-actions .wizard-btn.secondary:active {
  transform: scale(0.98);
}
.wizard-actions .wizard-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .wizard-actions {
    background: linear-gradient(180deg, rgba(30, 30, 40, 0.95) 0%, rgba(25, 25, 35, 0.98) 100%);
    border-top-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  :root:not([data-theme]) .wizard-actions .wizard-btn.secondary {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.8) 0%, rgba(40, 40, 50, 0.7) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
  }
  :root:not([data-theme]) .wizard-actions .wizard-btn.secondary:hover {
    background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
  }
}
[data-theme=dark] .wizard-actions {
  background: linear-gradient(180deg, rgba(30, 30, 40, 0.95) 0%, rgba(25, 25, 35, 0.98) 100%);
  border-top-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme=dark] .wizard-actions .wizard-btn.secondary {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.8) 0%, rgba(40, 40, 50, 0.7) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
[data-theme=dark] .wizard-actions .wizard-btn.secondary:hover {
  background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
}

.wizard-status {
  text-align: center;
  padding: 40px 20px;
}
.wizard-status .status-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px auto;
  opacity: 0;
  animation: wizardScaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.1s;
}
.wizard-status .status-icon i {
  font-size: 48px;
}
.wizard-status .status-icon.loading {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.08) 100%);
}
.wizard-status .status-icon.loading i {
  color: var(--accent-primary, #4CAF50);
  animation: spin 1s linear infinite;
}
.wizard-status .status-icon.success {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.2) 0%, rgba(76, 175, 80, 0.1) 100%);
}
.wizard-status .status-icon.success i {
  color: #2e7d32;
}
.wizard-status .status-icon.error {
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.2) 0%, rgba(244, 67, 54, 0.1) 100%);
}
.wizard-status .status-icon.error i {
  color: #c62828;
}
.wizard-status .status-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary, #272727);
  margin: 0 0 8px 0;
  opacity: 0;
  animation: wizardFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.2s;
}
.wizard-status .status-message {
  font-size: 15px;
  color: var(--text-tertiary, #888);
  margin: 0;
  opacity: 0;
  animation: wizardFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.25s;
}

.wizard-qr-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
}
.wizard-qr-display .qr-container {
  background: #ffffff;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-primary, #e4e4e4);
  opacity: 0;
  animation: wizardScaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.1s;
}
.wizard-qr-display .qr-container canvas, .wizard-qr-display .qr-container img {
  display: block;
  width: 200px;
  height: 200px;
}
.wizard-qr-display .qr-amount {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary, #272727);
  opacity: 0;
  animation: wizardFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.2s;
}
.wizard-qr-display .qr-instructions {
  font-size: 14px;
  color: var(--text-tertiary, #888);
  text-align: center;
  max-width: 280px;
  line-height: 1.5;
  opacity: 0;
  animation: wizardFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.25s;
}

.payment-split-container {
  padding: 7rem 0 8rem 0;
  background-color: var(--bg-primary, #ffffff);
  min-height: 100vh;
}
@media only screen and (min-width: 481px) {
  .payment-split-container {
    min-height: 100%;
  }
}
.payment-split-container {
  padding-top: 7rem;
}
.payment-split-container.content {
  padding-bottom: 7.5rem;
}
.payment-split-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}
@media only screen and (min-width: 481px) {
  .payment-split-container {
    min-height: 100%;
  }
}
.payment-split-container .top-content-container > h3 {
  opacity: 0;
  animation: screenFadeSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.05s;
}
.payment-split-container .payment-split-view {
  width: 100%;
  max-width: 100%;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.payment-split-container .split-header {
  padding: 16px 20px;
  background-color: var(--bg-secondary, #ffffff);
  border-bottom: 1px solid var(--border-primary, #e4e4e4);
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 4em;
  z-index: 10;
}
.payment-split-container .split-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary, #272727);
}
.payment-split-container .split-header {
  justify-content: center;
  position: sticky;
  top: 6em;
}
.payment-split-container .form-group.hidden {
  display: none;
}
.payment-split-container .form-group.showing {
  animation: slideDown 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.payment-split-container .form-group.hiding {
  animation: slideUp 0.3s ease-out forwards;
}
@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  to {
    opacity: 1;
    max-height: 100px;
    transform: translateY(0);
    margin-bottom: 16px;
  }
}
@keyframes slideUp {
  from {
    opacity: 1;
    max-height: 100px;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}
.payment-split-container .cart-summary-section,
.payment-split-container .discount-section,
.payment-split-container .tip-section,
.payment-split-container .split-section,
.payment-split-container .total-section {
  opacity: 0;
  animation: screenFadeSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.payment-split-container .cart-summary-section {
  animation-delay: 0.1s;
}
.payment-split-container .discount-section {
  animation-delay: 0.15s;
}
.payment-split-container .tip-section {
  animation-delay: 0.2s;
}
.payment-split-container .split-section {
  animation-delay: 0.25s;
}
.payment-split-container .total-section {
  animation-delay: 0.3s;
}
.payment-split-container .cart-summary-section,
.payment-split-container .discount-section,
.payment-split-container .tip-section,
.payment-split-container .split-section,
.payment-split-container .total-section {
  margin: 0 0 16px 0;
  padding: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.5));
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.payment-split-container .cart-summary-section h3,
.payment-split-container .discount-section h3,
.payment-split-container .tip-section h3,
.payment-split-container .split-section h3,
.payment-split-container .total-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.payment-split-container .order-summary-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px 0;
  font-size: 14px;
}
.payment-split-container .order-summary-table thead th {
  padding: 0 0 10px 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary, #888);
  border-bottom: 1px solid var(--border-primary, #e4e4e4);
}
.payment-split-container .order-summary-table tbody td {
  padding: 10px 0;
  color: var(--text-primary, #272727);
  border-bottom: 1px solid var(--border-primary, #f0f0f0);
}
.payment-split-container .order-summary-table tbody tr:last-child td {
  border-bottom: none;
}
.payment-split-container .order-summary-table .col-item {
  text-align: left;
}
.payment-split-container .order-summary-table .col-qty {
  text-align: center;
  width: 44px;
}
.payment-split-container .order-summary-table .col-price {
  text-align: right;
  width: 80px;
}
.payment-split-container .order-summary-table .col-subtotal {
  text-align: right;
  width: 80px;
  font-weight: 600;
}
.payment-split-container .order-summary-table th + th, .payment-split-container .order-summary-table td + td {
  padding-left: 12px;
}
.payment-split-container .order-summary-table tfoot td {
  padding: 8px 0;
  font-size: 14px;
  color: var(--text-secondary, #606060);
}
.payment-split-container .order-summary-table tfoot td:last-child {
  text-align: right;
  font-weight: 600;
}
.payment-split-container .order-summary-table tfoot td + td {
  padding-left: 12px;
}
.payment-split-container .order-summary-table tfoot tr.hidden {
  display: none;
}
.payment-split-container .order-summary-table tfoot .subtotal-row td {
  padding-top: 14px;
  border-top: 1px solid var(--border-primary, #e4e4e4);
  color: var(--text-primary, #272727);
}
.payment-split-container .order-summary-table tfoot .fee-row td {
  font-size: 13px;
  color: var(--text-tertiary, #888);
}
.payment-split-container .order-summary-table tfoot .total-final td {
  padding-top: 12px;
  border-top: 2px solid var(--border-primary, #e4e4e4);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary, #272727);
}
.payment-split-container .order-summary-table tfoot .per-person-row td {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-primary, #4CAF50);
}
.payment-split-container .order-summary-table tfoot .discount-row td:last-child {
  color: var(--accent-danger, #fb4268);
}
.payment-split-container .order-summary-table tfoot .tip-row td:last-child {
  color: var(--accent-primary, #4CAF50);
}
.payment-split-container .section-label {
  margin: 0;
  margin-left: auto;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary, #272727);
  text-align: right;
  align-self: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.payment-split-container .discount-grid,
.payment-split-container .tip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  flex: 0 0 auto;
  width: 55%;
}
.payment-split-container .discount-btn,
.payment-split-container .tip-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  width: 100%;
  height: auto;
  padding: 8px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.85) 50%, rgba(241, 245, 249, 0.75) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #1a1a2e);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.payment-split-container .discount-btn:hover:not(:disabled):not(.active),
.payment-split-container .tip-btn:hover:not(:disabled):not(.active) {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-color: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.4);
}
.payment-split-container .discount-btn:active:not(:disabled),
.payment-split-container .tip-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}
.payment-split-container .discount-btn.active,
.payment-split-container .tip-btn.active {
  background: linear-gradient(135deg, var(--accent-primary, #4CAF50) 0%, var(--accent-primary-lighter, #66bb6a) 100%);
  color: #ffffff;
  border-color: var(--accent-primary, #4CAF50);
  box-shadow: 0 4px 16px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.payment-split-container .discount-btn.discount-btn-custom, .payment-split-container .discount-btn.tip-btn-custom,
.payment-split-container .tip-btn.discount-btn-custom,
.payment-split-container .tip-btn.tip-btn-custom {
  grid-column: span 2;
  aspect-ratio: auto;
  height: 48px;
  border-radius: 24px;
  font-size: 16px;
}
.payment-split-container .discount-section .discount-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
}
.payment-split-container .discount-section .custom-discount-group {
  margin-top: 12px;
}
.payment-split-container .discount-section .custom-discount-group .custom-discount-row {
  display: flex;
  gap: 8px;
}
.payment-split-container .discount-section .custom-discount-group .custom-discount-row .discount-type-select {
  width: 70px;
  flex-shrink: 0;
}
.payment-split-container .tip-section .tip-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
}
.payment-split-container .tip-section .custom-tip-group {
  margin-top: 12px;
}
.payment-split-container .advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.6) 0%, rgba(248, 250, 252, 0.5) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  cursor: pointer;
  transition: all 0.25s ease;
}
.payment-split-container .advanced-toggle .advanced-toggle-icon {
  font-size: 12px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.payment-split-container .advanced-toggle.open .advanced-toggle-icon {
  transform: rotate(180deg);
}
.payment-split-container .advanced-toggle:hover {
  color: var(--text-primary, #272727);
  border-color: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.3);
}
.payment-split-container .advanced-sections {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.payment-split-container .advanced-sections .advanced-sections-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.payment-split-container .advanced-sections.open {
  grid-template-rows: 1fr;
}
.payment-split-container .total-section .total-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 16px;
  color: var(--text-secondary, #606060);
}
.payment-split-container .total-section .total-row.hidden {
  display: none;
}
.payment-split-container .total-section .total-row.total-final {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--border-primary, #e4e4e4);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary, #272727);
}
.payment-split-container .total-section .total-row.per-person-row {
  font-size: 18px;
  font-weight: 600;
  color: var(--accent-primary, #4CAF50);
}
.payment-split-container .total-section .total-row.discount-row span:last-child {
  color: var(--accent-danger, #fb4268);
}
.payment-split-container .total-section .total-row.tip-row span:last-child {
  color: var(--accent-primary, #4CAF50);
}
.payment-split-container .contextual-action-panel {
  position: sticky;
  bottom: -4.5rem;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  padding: 16px 20px;
  background-color: var(--bg-secondary, #ffffff);
  border: 1px solid var(--border-primary, #e4e4e4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
  opacity: 0;
  animation: screenFadeSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.35s;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .payment-split-container .contextual-action-panel {
    background-color: var(--bg-secondary, #1e1e1e);
    border-color: var(--border-primary, #3a3a3a);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
  }
}
[data-theme=dark] .payment-split-container .contextual-action-panel {
  background-color: var(--bg-secondary, #1e1e1e);
  border-color: var(--border-primary, #3a3a3a);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
}
.payment-split-container .contextual-action-panel .back-button {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--text-secondary, #606060);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.payment-split-container .contextual-action-panel .back-button:hover:not(:disabled) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 252, 255, 0.9) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.payment-split-container .contextual-action-panel .back-button:active:not(:disabled) {
  transform: scale(0.98);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .payment-split-container .contextual-action-panel .back-button {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  :root:not([data-theme]) .payment-split-container .contextual-action-panel .back-button:hover:not(:disabled) {
    background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}
[data-theme=dark] .payment-split-container .contextual-action-panel .back-button {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .payment-split-container .contextual-action-panel .back-button:hover:not(:disabled) {
  background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.payment-split-container .contextual-action-panel .back-button {
  flex-shrink: 0;
  padding: 12px 16px;
  border-radius: 10px;
}
.payment-split-container .contextual-action-panel .primary-action-btn {
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent-primary, #4CAF50) 0%, var(--accent-primary-lighter, #66bb6a) 50%, var(--accent-primary, #4CAF50) 100%);
  background-size: 200% 200%;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-accent-glow, 0 4px 15px rgba(76, 175, 80, 0.4)), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), background-position var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1));
}
.payment-split-container .contextual-action-panel .primary-action-btn:hover {
  background-position: 100% 100%;
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent-glow-intense, 0 8px 25px rgba(76, 175, 80, 0.5)), 0 0 40px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.payment-split-container .contextual-action-panel .primary-action-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.payment-split-container .contextual-action-panel .primary-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.payment-split-container .contextual-action-panel .primary-action-btn {
  flex: 1;
}

.split-mode-buttons {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.split-mode-buttons.hidden {
  display: none;
}
.split-mode-buttons .split-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  min-height: 56px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  width: auto;
  min-width: auto;
}
.split-mode-buttons .split-mode-btn i {
  font-size: 18px;
}
:root .split-mode-buttons .split-mode-btn.active {
  border-color: var(--accent-primary, #4CAF50) !important;
  color: var(--accent-primary, #4CAF50) !important;
  opacity: 1 !important;
  cursor: default;
}
:root .split-mode-buttons .split-mode-btn.active i {
  color: var(--accent-primary, #4CAF50) !important;
}

.itemised-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.itemised-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}
.itemised-modal-overlay.visible .itemised-modal-inner {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.itemised-modal-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  height: 75vh;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15), 0 -4px 20px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.itemised-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.itemised-modal-body .itemised-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  list-style: none;
}
.itemised-modal-body .itemised-items-list .item:not(.has-quantity) {
  opacity: 0.5;
}
.itemised-modal-body .itemised-items-list .item:not(.has-quantity) .quantity {
  color: var(--text-tertiary, #5a5a72);
}

.itemised-modal-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 6px 4px;
  margin-top: 8px;
  border-top: 2px solid var(--border-primary, #e4e4e4);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #1a1a2e);
}
.itemised-modal-total .itemised-total-value {
  color: var(--accent-primary, #4CAF50);
}

.itemised-remaining-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 6px 0;
  font-size: 14px;
  color: var(--text-tertiary, #5a5a72);
}
.itemised-remaining-row.hidden {
  display: none;
}
.itemised-remaining-row .remaining-value {
  font-weight: 600;
  color: var(--accent-info, #3b82f6);
}

.itemised-footer-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-primary, #e4e4e4);
}
.itemised-footer-bar .itemised-cancel-btn {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  font-size: 24px;
}
.itemised-footer-bar .itemised-generate-btn {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  font-size: 24px;
  background: linear-gradient(135deg, var(--accent-primary, #4CAF50) 0%, var(--accent-primary-lighter, #66bb6a) 50%, var(--accent-primary, #4CAF50) 100%);
  background-size: 200% 200%;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: var(--shadow-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.itemised-footer-bar .itemised-generate-btn:hover:not(:disabled) {
  background-position: 100% 100%;
  box-shadow: var(--shadow-accent-glow-intense), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

[data-theme=dark] .itemised-modal-overlay,
[data-theme=fintech] .itemised-modal-overlay {
  background: rgba(10, 14, 26, 0.85);
}
[data-theme=dark] .itemised-modal-inner,
[data-theme=fintech] .itemised-modal-inner {
  background: linear-gradient(145deg, rgba(30, 35, 50, 0.98) 0%, rgba(20, 25, 40, 0.95) 100%);
  border: 1px solid rgba(56, 189, 248, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 40px rgba(56, 189, 248, 0.1);
}

.payment-summary-container {
  padding: 7rem 0 8rem 0;
  background-color: var(--bg-primary, #ffffff);
  min-height: 100vh;
}
@media only screen and (min-width: 481px) {
  .payment-summary-container {
    min-height: 100%;
  }
}
.payment-summary-container {
  padding: 7rem 12px 7.5rem 12px !important;
}
.payment-summary-container.content {
  padding-bottom: 7.5rem;
}
.payment-summary-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-y: auto;
}
@media only screen and (min-width: 481px) {
  .payment-summary-container {
    min-height: 100%;
  }
}
.payment-summary-container .top-content-container > h1 {
  opacity: 0;
  animation: screenFadeSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.05s;
}
.payment-summary-container .payment-summary-view {
  width: 100%;
  max-width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.payment-summary-container .summary-header {
  padding: 16px 20px;
  background-color: var(--bg-secondary, #ffffff);
  border-bottom: 1px solid var(--border-primary, #e4e4e4);
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 4em;
  z-index: 10;
}
.payment-summary-container .summary-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary, #272727);
}
.payment-summary-container .summary-header {
  position: sticky;
  top: 6em;
  opacity: 0;
  animation: screenFadeSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.1s;
}
.payment-summary-container .qr-code-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
}
.payment-summary-container .qr-code-card {
  background: var(--bg-secondary, #ffffff);
  border: 1px solid var(--border-primary, #e4e4e4);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  opacity: 0;
  animation: subtleScaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.payment-summary-container .qr-code-card:nth-child(1) {
  animation-delay: 0.23s;
}
.payment-summary-container .qr-code-card:nth-child(2) {
  animation-delay: 0.31s;
}
.payment-summary-container .qr-code-card:nth-child(3) {
  animation-delay: 0.39s;
}
.payment-summary-container .qr-code-card:nth-child(4) {
  animation-delay: 0.47s;
}
.payment-summary-container .qr-code-card:nth-child(5) {
  animation-delay: 0.55s;
}
.payment-summary-container .qr-code-card:nth-child(6) {
  animation-delay: 0.63s;
}
.payment-summary-container .qr-code-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.payment-summary-container .qr-code-card.paid {
  border-color: var(--accent-primary, #4CAF50);
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.05) 0%, rgba(76, 175, 80, 0.02) 100%);
}
.payment-summary-container .qr-code-card .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.payment-summary-container .qr-code-card .card-header .person-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.payment-summary-container .qr-code-card .card-header .status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.payment-summary-container .qr-code-card .card-header .status-badge.pending {
  background: #fff3cd;
  color: #856404;
}
.payment-summary-container .qr-code-card .card-header .status-badge.paid {
  background: #d4edda;
  color: #155724;
}
.payment-summary-container .qr-code-card .qr-container {
  background: #ffffff;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  display: inline-block;
  box-shadow: inset 0 0 0 1px var(--border-primary, #e4e4e4);
}
.payment-summary-container .qr-code-card .qr-container canvas, .payment-summary-container .qr-code-card .qr-container img {
  display: block;
  max-width: 200px;
  height: auto;
}
.payment-summary-container .qr-code-card .amount-display {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary, #272727);
  margin-bottom: 8px;
}
.payment-summary-container .qr-code-card .payid-display {
  font-size: 14px;
  color: var(--text-tertiary, #888);
  word-break: break-all;
}
.payment-summary-container .summary-totals {
  padding: 20px;
  background: var(--bg-secondary, #ffffff);
  border-top: 1px solid var(--border-primary, #e4e4e4);
}
.payment-summary-container .summary-totals .summary-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 16px;
}
.payment-summary-container .summary-totals .summary-row:last-child {
  font-size: 18px;
  font-weight: 700;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 2px solid var(--border-primary, #e4e4e4);
}
.payment-summary-container .summary-totals .summary-row .label {
  color: var(--text-secondary, #606060);
}
.payment-summary-container .summary-totals .summary-row .value {
  font-weight: 600;
  color: var(--text-primary, #272727);
}
.payment-summary-container .summary-totals .summary-row .value.paid {
  color: var(--accent-primary, #4CAF50);
}
.payment-summary-container .summary-totals .summary-row .value.pending {
  color: var(--accent-warning, #ffc107);
}
.payment-summary-container .summary-actions {
  display: flex;
  gap: 12px;
  padding: 20px;
}
.payment-summary-container .summary-actions button {
  flex: 1;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.payment-summary-container .summary-actions button.primary-btn {
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent-primary, #4CAF50) 0%, var(--accent-primary-lighter, #66bb6a) 50%, var(--accent-primary, #4CAF50) 100%);
  background-size: 200% 200%;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-accent-glow, 0 4px 15px rgba(76, 175, 80, 0.4)), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), background-position var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1));
}
.payment-summary-container .summary-actions button.primary-btn:hover {
  background-position: 100% 100%;
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent-glow-intense, 0 8px 25px rgba(76, 175, 80, 0.5)), 0 0 40px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.payment-summary-container .summary-actions button.primary-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.payment-summary-container .summary-actions button.primary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.payment-summary-container .summary-actions button.secondary-btn {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--text-secondary, #606060);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.payment-summary-container .summary-actions button.secondary-btn:hover:not(:disabled) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 252, 255, 0.9) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.payment-summary-container .summary-actions button.secondary-btn:active:not(:disabled) {
  transform: scale(0.98);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .payment-summary-container .summary-actions button.secondary-btn {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  :root:not([data-theme]) .payment-summary-container .summary-actions button.secondary-btn:hover:not(:disabled) {
    background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}
[data-theme=dark] .payment-summary-container .summary-actions button.secondary-btn {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .payment-summary-container .summary-actions button.secondary-btn:hover:not(:disabled) {
  background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.payment-summary-container .summary-actions button:active {
  transform: scale(0.98);
}
.payment-summary-container .qr-section {
  padding: 0;
  text-align: center;
  perspective: 800px;
  opacity: 0;
  animation: screenFadeSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.15s;
}
.payment-summary-container .qr-section .qr-flip-card {
  position: relative;
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
}
.payment-summary-container .qr-section .qr-flip-card.flipped {
  transform: rotateY(180deg);
}
.payment-summary-container .qr-section .qr-flip-front,
.payment-summary-container .qr-section .qr-flip-back {
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 20px;
}
.payment-summary-container .qr-section .qr-flip-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 24px 72px 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 252, 255, 0.9) 100%);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
}
.payment-summary-container .qr-section .qr-flip-back .payid-form-card {
  width: 100%;
  text-align: left;
}
.payment-summary-container .qr-section .qr-flip-back .payid-form-card .form-group {
  margin-bottom: 16px;
}
.payment-summary-container .qr-section .qr-flip-back .payid-form-card .form-group:last-child {
  margin-bottom: 0;
}
.payment-summary-container .qr-section .qr-flip-back .payid-form-card .form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .payment-summary-container .qr-section .qr-flip-back {
    background: linear-gradient(145deg, rgba(40, 45, 60, 0.95) 0%, rgba(35, 40, 55, 0.9) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}
[data-theme=dark] .payment-summary-container .qr-section .qr-flip-back {
  background: linear-gradient(145deg, rgba(40, 45, 60, 0.95) 0%, rgba(35, 40, 55, 0.9) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.payment-summary-container .qr-section .qr-payid-flip-btn {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 64px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  background: rgba(15, 20, 35, 0.85);
  color: rgba(56, 189, 248, 0.9);
  cursor: pointer;
  z-index: 2;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.payment-summary-container .qr-section .qr-payid-flip-btn i {
  font-size: 22px;
  line-height: 1;
}
.payment-summary-container .qr-section .qr-payid-flip-btn span {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}
.payment-summary-container .qr-section .qr-payid-flip-btn:active {
  transform: scale(0.95);
}
[data-theme=light] .payment-summary-container .qr-section .qr-payid-flip-btn {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--text-primary, #1a1a2e);
  box-shadow: var(--shadow-glass-md), 0 4px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}
.payment-summary-container .qr-section .qr-display,
.payment-summary-container .qr-section #payment-qr-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 24px 52px 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 252, 255, 0.9) 100%);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  opacity: 0;
  animation: screenFadeSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.25s;
}
.payment-summary-container .qr-section .qr-display .qr-code-wrapper,
.payment-summary-container .qr-section #payment-qr-display .qr-code-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  animation: qrRevealFromCenter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.35s;
}
.payment-summary-container .qr-section .qr-display .qr-code-wrapper canvas, .payment-summary-container .qr-section .qr-display .qr-code-wrapper img,
.payment-summary-container .qr-section #payment-qr-display .qr-code-wrapper canvas,
.payment-summary-container .qr-section #payment-qr-display .qr-code-wrapper img {
  display: block;
  width: 220px;
  height: 220px;
}
.payment-summary-container .qr-section .qr-display .qr-amount-label,
.payment-summary-container .qr-section #payment-qr-display .qr-amount-label {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary, #272727);
  margin-top: 8px;
}
.payment-summary-container .qr-section .qr-display .qr-fallback,
.payment-summary-container .qr-section #payment-qr-display .qr-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  color: var(--text-tertiary, #888);
}
.payment-summary-container .qr-section .qr-display .qr-fallback i,
.payment-summary-container .qr-section #payment-qr-display .qr-fallback i {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}
.payment-summary-container .qr-section .qr-display .qr-placeholder,
.payment-summary-container .qr-section #payment-qr-display .qr-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  color: var(--text-tertiary, #888);
}
.payment-summary-container .qr-section .qr-display .qr-placeholder i,
.payment-summary-container .qr-section #payment-qr-display .qr-placeholder i {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
  animation: pulse 1.5s ease-in-out infinite;
}
.payment-summary-container .qr-section .qr-display .qr-placeholder p,
.payment-summary-container .qr-section #payment-qr-display .qr-placeholder p {
  margin: 0;
  font-size: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .payment-summary-container .qr-section .qr-display,
  :root:not([data-theme]) .payment-summary-container .qr-section #payment-qr-display {
    background: linear-gradient(145deg, rgba(40, 45, 60, 0.95) 0%, rgba(35, 40, 55, 0.9) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  :root:not([data-theme]) .payment-summary-container .qr-section .qr-display .qr-code-wrapper,
  :root:not([data-theme]) .payment-summary-container .qr-section #payment-qr-display .qr-code-wrapper {
    background: rgba(255, 255, 255, 0.95);
  }
}
[data-theme=dark] .payment-summary-container .qr-section .qr-display,
[data-theme=dark] .payment-summary-container .qr-section #payment-qr-display {
  background: linear-gradient(145deg, rgba(40, 45, 60, 0.95) 0%, rgba(35, 40, 55, 0.9) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .payment-summary-container .qr-section .qr-display .qr-code-wrapper,
[data-theme=dark] .payment-summary-container .qr-section #payment-qr-display .qr-code-wrapper {
  background: rgba(255, 255, 255, 0.95);
}
@keyframes pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}
.payment-summary-container > .page-action-bar {
  margin-top: auto;
  padding-left: 12px;
}
.payment-summary-container > .page-action-bar .summary-bar-nav {
  display: flex;
  gap: 8px;
}
.payment-summary-container > .page-action-bar .summary-bar-nav .bar-nav-btn {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  background: rgba(56, 189, 248, 0.1);
  color: rgba(56, 189, 248, 0.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: all 0.2s ease;
}
.payment-summary-container > .page-action-bar .summary-bar-nav .bar-nav-btn:active:not(:disabled) {
  transform: scale(0.92);
}
.payment-summary-container > .page-action-bar .summary-bar-nav .bar-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.payment-summary-container > .page-action-bar .summary-bar-person {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
}
.payment-summary-container > .page-action-bar .summary-bar-person .bar-value {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5);
  letter-spacing: -0.02em;
}
.payment-summary-container > .page-action-bar .summary-bar-person .bar-label {
  font-size: 16px;
  font-weight: 600;
  color: rgba(56, 189, 248, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
[data-theme=light] .payment-summary-container > .page-action-bar .bar-nav-btn {
  border-color: rgba(0, 0, 0, 0.08);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  color: var(--text-primary, #1a1a2e);
  box-shadow: var(--shadow-glass-md), 0 4px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}
[data-theme=light] .payment-summary-container > .page-action-bar .summary-bar-person .bar-value {
  color: var(--text-primary, #1a1a2e);
  text-shadow: none;
}
[data-theme=light] .payment-summary-container > .page-action-bar .summary-bar-person .bar-label {
  color: var(--text-tertiary, #6b7280);
}
.payment-summary-container .summary-total {
  padding: 16px 20px;
  text-align: center;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.85) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.payment-summary-container .summary-total .total-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-tertiary, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.payment-summary-container .summary-total .total-amount {
  display: block;
  font-size: 44px;
  font-weight: 700;
  color: var(--text-primary, #272727);
  line-height: 1;
}
.payment-summary-container .summary-total .split-info {
  display: block;
  font-size: 18px;
  color: var(--accent-primary, #4CAF50);
  margin-top: 4px;
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .payment-summary-container .summary-total {
    background: linear-gradient(145deg, rgba(40, 45, 60, 0.9) 0%, rgba(35, 40, 55, 0.85) 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}
[data-theme=dark] .payment-summary-container .summary-total {
  background: linear-gradient(145deg, rgba(40, 45, 60, 0.9) 0%, rgba(35, 40, 55, 0.85) 100%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.payment-summary-container .contextual-action-panel {
  position: sticky;
  bottom: -4.5rem;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  padding: 16px 20px;
  background-color: var(--bg-secondary, #ffffff);
  border: 1px solid var(--border-primary, #e4e4e4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
  opacity: 0;
  animation: screenFadeSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.35s;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .payment-summary-container .contextual-action-panel {
    background-color: var(--bg-secondary, #1e1e1e);
    border-color: var(--border-primary, #3a3a3a);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
  }
}
[data-theme=dark] .payment-summary-container .contextual-action-panel {
  background-color: var(--bg-secondary, #1e1e1e);
  border-color: var(--border-primary, #3a3a3a);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
}
.payment-summary-container .contextual-action-panel .back-button {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--text-secondary, #606060);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.payment-summary-container .contextual-action-panel .back-button:hover:not(:disabled) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 252, 255, 0.9) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.payment-summary-container .contextual-action-panel .back-button:active:not(:disabled) {
  transform: scale(0.98);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .payment-summary-container .contextual-action-panel .back-button {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  :root:not([data-theme]) .payment-summary-container .contextual-action-panel .back-button:hover:not(:disabled) {
    background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}
[data-theme=dark] .payment-summary-container .contextual-action-panel .back-button {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .payment-summary-container .contextual-action-panel .back-button:hover:not(:disabled) {
  background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.payment-summary-container .contextual-action-panel .back-button {
  flex-shrink: 0;
  padding: 12px 16px;
  border-radius: 10px;
}
.payment-summary-container .contextual-action-panel .primary-action-btn {
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent-primary, #4CAF50) 0%, var(--accent-primary-lighter, #66bb6a) 50%, var(--accent-primary, #4CAF50) 100%);
  background-size: 200% 200%;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-accent-glow, 0 4px 15px rgba(76, 175, 80, 0.4)), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), background-position var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1));
}
.payment-summary-container .contextual-action-panel .primary-action-btn:hover {
  background-position: 100% 100%;
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent-glow-intense, 0 8px 25px rgba(76, 175, 80, 0.5)), 0 0 40px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.payment-summary-container .contextual-action-panel .primary-action-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.payment-summary-container .contextual-action-panel .primary-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.payment-summary-container .contextual-action-panel .primary-action-btn {
  flex: 1;
}

.content .form-group input,
.content .form-group select,
.content .form-group textarea,
.content .form-group .form-input {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.02);
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.content .form-group input:focus,
.content .form-group select:focus,
.content .form-group textarea:focus,
.content .form-group .form-input:focus {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 252, 255, 0.9) 100%);
  border-color: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.5);
  box-shadow: var(--input-focus-shadow), 0 4px 12px rgba(0, 0, 0, 0.08);
  outline: none;
}
.content .form-group input:hover:not(:focus):not(:disabled),
.content .form-group select:hover:not(:focus):not(:disabled),
.content .form-group textarea:hover:not(:focus):not(:disabled),
.content .form-group .form-input:hover:not(:focus):not(:disabled) {
  border-color: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.content .form-group input::placeholder,
.content .form-group select::placeholder,
.content .form-group textarea::placeholder,
.content .form-group .form-input::placeholder {
  color: var(--text-quaternary, #888888);
}
.content .form-group input:disabled,
.content .form-group select:disabled,
.content .form-group textarea:disabled,
.content .form-group .form-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .content .form-group input,
  :root:not([data-theme]) .content .form-group select,
  :root:not([data-theme]) .content .form-group textarea,
  :root:not([data-theme]) .content .form-group .form-input {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  :root:not([data-theme]) .content .form-group input:focus,
  :root:not([data-theme]) .content .form-group select:focus,
  :root:not([data-theme]) .content .form-group textarea:focus,
  :root:not([data-theme]) .content .form-group .form-input:focus {
    background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
    border-color: rgba(var(--accent-primary-rgb, 102, 187, 106), 0.4);
  }
  :root:not([data-theme]) .content .form-group input:hover:not(:focus):not(:disabled),
  :root:not([data-theme]) .content .form-group select:hover:not(:focus):not(:disabled),
  :root:not([data-theme]) .content .form-group textarea:hover:not(:focus):not(:disabled),
  :root:not([data-theme]) .content .form-group .form-input:hover:not(:focus):not(:disabled) {
    border-color: rgba(255, 255, 255, 0.15);
  }
  :root:not([data-theme]) .content .form-group input::placeholder,
  :root:not([data-theme]) .content .form-group select::placeholder,
  :root:not([data-theme]) .content .form-group textarea::placeholder,
  :root:not([data-theme]) .content .form-group .form-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
  }
}
[data-theme=dark] .content .form-group input,
[data-theme=dark] .content .form-group select,
[data-theme=dark] .content .form-group textarea,
[data-theme=dark] .content .form-group .form-input {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .content .form-group input:focus,
[data-theme=dark] .content .form-group select:focus,
[data-theme=dark] .content .form-group textarea:focus,
[data-theme=dark] .content .form-group .form-input:focus {
  background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
  border-color: rgba(var(--accent-primary-rgb, 102, 187, 106), 0.4);
}
[data-theme=dark] .content .form-group input:hover:not(:focus):not(:disabled),
[data-theme=dark] .content .form-group select:hover:not(:focus):not(:disabled),
[data-theme=dark] .content .form-group textarea:hover:not(:focus):not(:disabled),
[data-theme=dark] .content .form-group .form-input:hover:not(:focus):not(:disabled) {
  border-color: rgba(255, 255, 255, 0.15);
}
[data-theme=dark] .content .form-group input::placeholder,
[data-theme=dark] .content .form-group select::placeholder,
[data-theme=dark] .content .form-group textarea::placeholder,
[data-theme=dark] .content .form-group .form-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.settings-container {
  padding: 7rem 0 8rem 0;
  background-color: var(--bg-primary, #ffffff);
  min-height: 100vh;
}
@media only screen and (min-width: 481px) {
  .settings-container {
    min-height: 100%;
  }
}
.settings-container {
  padding-top: 7rem;
  padding-bottom: 10rem;
}
.settings-container .top-content-container > h1 {
  opacity: 0;
  animation: screenFadeSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.05s;
  text-align: center;
  margin-bottom: 1rem;
}
.settings-container .settings-content {
  width: 100%;
  padding: 0;
}
.settings-container .settings-content > .settings-section {
  opacity: 0;
  animation: screenFadeSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.settings-container .settings-content > .settings-section:nth-child(1) {
  animation-delay: 0.16s;
}
.settings-container .settings-content > .settings-section:nth-child(2) {
  animation-delay: 0.22s;
}
.settings-container .settings-content > .settings-section:nth-child(3) {
  animation-delay: 0.28s;
}
.settings-container .settings-content > .settings-section:nth-child(4) {
  animation-delay: 0.34s;
}
.settings-container .settings-content > .settings-section:nth-child(5) {
  animation-delay: 0.4s;
}
.settings-container .settings-content > .settings-section:nth-child(6) {
  animation-delay: 0.46s;
}
.settings-container .settings-content > .settings-section:nth-child(7) {
  animation-delay: 0.52s;
}
.settings-container .settings-content > .settings-section:nth-child(8) {
  animation-delay: 0.58s;
}
.settings-container .settings-section {
  margin: 0 0 16px 0;
  padding: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.5));
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.settings-container .settings-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.settings-container .settings-section h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #272727);
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: none;
  letter-spacing: normal;
}
.settings-container .settings-section h3 i {
  color: var(--accent-primary, #4CAF50);
  font-size: 18px;
}
.settings-container .settings-section .settings-description {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: var(--text-tertiary, #888);
}
.settings-container .settings-section .settings-hint {
  margin: 12px 0 0 0;
  font-size: 12px;
  color: var(--text-quaternary, #aaa);
  line-height: 1.5;
  font-style: italic;
}
.settings-container .settings-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
}
.settings-container .settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  flex: 0 0 auto;
  width: 55%;
}
.settings-container .settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 1/1;
  width: 100%;
  height: auto;
  padding: 8px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.85) 50%, rgba(241, 245, 249, 0.75) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #1a1a2e);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.settings-container .settings-btn i {
  font-size: 14px;
}
.settings-container .settings-btn:hover:not(:disabled):not(.active) {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.4);
}
.settings-container .settings-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}
.settings-container .settings-btn.active {
  background: linear-gradient(135deg, var(--accent-primary, #4CAF50) 0%, var(--accent-primary-lighter, #66bb6a) 100%);
  color: #ffffff;
  border-color: var(--accent-primary, #4CAF50);
  box-shadow: 0 4px 16px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.settings-container .section-label {
  margin: 0;
  margin-left: auto;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary, #272727);
  text-align: right;
  align-self: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.settings-container .theme-selector-wrapper {
  position: relative;
}
.settings-container .theme-selector-wrapper .theme-select {
  width: 100%;
  padding: 14px 40px 14px 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary, #272727);
  background-color: var(--input-bg, #f1f1f1);
  border: 1px solid var(--border-primary, #e4e4e4);
  border-radius: 12px;
  cursor: pointer;
  appearance: none;
  transition: all 0.2s ease;
}
.settings-container .theme-selector-wrapper .theme-select:focus {
  outline: none;
  border-color: var(--accent-primary, #4CAF50);
  background-color: var(--bg-secondary, #ffffff);
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}
.settings-container .theme-selector-wrapper .theme-select-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary, #888);
  pointer-events: none;
}
.settings-container .color-picker-group {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}
.settings-container .color-picker-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-container .color-picker-label span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #606060);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.settings-container .color-input-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--input-bg, #f1f1f1);
  border: 1px solid var(--border-primary, #e4e4e4);
  border-radius: 8px;
}
.settings-container .color-input-wrapper .color-input {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
}
.settings-container .color-input-wrapper .color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}
.settings-container .color-input-wrapper .color-input::-webkit-color-swatch {
  border: 2px solid var(--border-secondary, #ccc);
  border-radius: 6px;
}
.settings-container .color-input-wrapper .color-value {
  font-family: "Courier New", monospace;
  font-size: 14px;
  color: var(--text-tertiary, #888);
}
.settings-container .gradient-preview {
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--border-primary, #e4e4e4);
  background: linear-gradient(135deg, #b8c6db 0%, #5a7a9c 100%);
}
.settings-container .toggle-group {
  display: flex;
  gap: 12px;
}
.settings-container .layout-toggle {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  background: var(--glass-light, rgba(255, 255, 255, 0.85));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid var(--border-primary, #e4e4e4);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.settings-container .layout-toggle i {
  font-size: 28px;
  color: var(--text-tertiary, #888);
}
.settings-container .layout-toggle span {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #272727);
}
.settings-container .layout-toggle small {
  font-size: 12px;
  color: var(--text-tertiary, #888);
}
.settings-container .layout-toggle:hover {
  border-color: var(--accent-primary, #4CAF50);
}
.settings-container .layout-toggle.active {
  border-color: var(--accent-primary, #4CAF50);
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%);
}
.settings-container .layout-toggle.active i {
  color: var(--accent-primary, #4CAF50);
}
.settings-container .layout-toggle:active {
  transform: scale(0.98);
}
.settings-container .reset-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--glass-light, rgba(255, 255, 255, 0.85));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--accent-danger, #fb4268);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-danger, #fb4268);
  cursor: pointer;
  transition: all 0.2s ease;
}
.settings-container .reset-button:hover {
  background: rgba(251, 66, 104, 0.1);
}
.settings-container .reset-button:active {
  transform: scale(0.98);
}
.settings-container .reset-button i {
  font-size: 16px;
}

.plan-usage-info .plan-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  background: var(--accent-primary, #4CAF50);
  color: #fff;
  margin-bottom: 12px;
}

.usage-bar-container {
  margin-bottom: 8px;
}
.usage-bar-container .usage-bar-label {
  font-size: 13px;
  color: var(--text-secondary, #555);
  margin-bottom: 6px;
}
.usage-bar-container .usage-bar {
  height: 8px;
  background: var(--input-bg, #e8e8e8);
  border-radius: 4px;
  overflow: hidden;
}
.usage-bar-container .usage-bar-fill {
  height: 100%;
  background: var(--accent-primary, #4CAF50);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.credit-balance {
  font-size: 14px;
  color: var(--accent-primary, #4CAF50);
  font-weight: 600;
  margin-top: 8px;
}
.credit-balance i {
  margin-right: 4px;
}

.referral-code-display {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.referral-code-display .referral-code {
  font-size: 18px;
  font-weight: 700;
  font-family: monospace;
  letter-spacing: 2px;
  color: var(--text-primary, #272727);
  padding: 8px 16px;
  background: var(--input-bg, #f1f1f1);
  border-radius: 8px;
  flex: 1;
  text-align: center;
}
.referral-code-display .copy-btn, .referral-code-display .share-btn {
  padding: 8px 12px;
  border: 1px solid var(--border-primary, #e4e4e4);
  border-radius: 8px;
  background: var(--glass-light, rgba(255, 255, 255, 0.85));
  cursor: pointer;
  font-size: 16px;
  color: var(--text-secondary, #555);
  transition: all 0.2s ease;
}
.referral-code-display .copy-btn:hover, .referral-code-display .share-btn:hover {
  background: var(--accent-primary, #4CAF50);
  color: #fff;
}

.referral-redeem {
  display: flex;
  gap: 8px;
}
.referral-redeem input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border-primary, #e4e4e4);
  border-radius: 8px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.referral-redeem .redeem-btn {
  padding: 10px 20px;
  background: var(--accent-primary, #4CAF50);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.referral-redeem .redeem-btn:hover {
  filter: brightness(1.1);
}
.referral-redeem .redeem-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.fee-display-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fee-display-options .radio-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-primary, #e4e4e4);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.fee-display-options .radio-option:has(input:checked) {
  border-color: var(--accent-primary, #4CAF50);
  background: rgba(76, 175, 80, 0.05);
}
.fee-display-options .radio-option input[type=radio] {
  margin-top: 2px;
  accent-color: var(--accent-primary, #4CAF50);
}
.fee-display-options .radio-option .radio-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #272727);
}
.fee-display-options .radio-option small {
  display: block;
  font-size: 12px;
  color: var(--text-tertiary, #888);
  margin-top: 2px;
}

.pricing-control-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #555);
  margin-bottom: 6px;
}
.pricing-control-group select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-primary, #e4e4e4);
  border-radius: 8px;
  font-size: 14px;
  background: var(--input-bg, #f1f1f1);
}

.storefront-details {
  margin-top: 12px;
}
.storefront-details.hidden {
  display: none;
}
.storefront-details .storefront-field {
  margin-bottom: 12px;
}
.storefront-details .storefront-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #555);
  margin-bottom: 4px;
}
.storefront-details .copy-field {
  display: flex;
  gap: 6px;
  align-items: center;
}
.storefront-details .copy-field input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border-primary, #e4e4e4);
  border-radius: 8px;
  font-size: 13px;
  background: var(--input-bg, #f1f1f1);
  color: var(--text-primary, #272727);
}
.storefront-details .copy-field input.embed-code {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 11px;
}
.storefront-details .copy-field .copy-btn {
  padding: 8px 12px;
  border: 1px solid var(--border-primary, #e4e4e4);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary, #555);
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.storefront-details .copy-field .copy-btn:hover {
  background: var(--accent-primary, #4CAF50);
  color: #fff;
}

.was-price {
  text-decoration: line-through;
  color: var(--text-tertiary, #999);
  font-size: 12px;
  margin-right: 6px;
}

.promo-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent-warning, #ff9800);
  color: #fff;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.5px;
}

.margin-note {
  display: block;
  font-size: 11px;
  color: var(--accent-primary, #4CAF50);
  font-weight: 500;
  margin-top: 2px;
}

.fee-display-banner {
  padding: 10px 16px !important;
  background: rgba(76, 175, 80, 0.08) !important;
  border: none !important;
}
.fee-display-banner .fee-banner-text {
  font-size: 12px;
  color: var(--accent-primary, #4CAF50);
  display: flex;
  align-items: center;
  gap: 6px;
}

.time-pricing-banner {
  padding: 10px 16px !important;
  background: rgba(255, 152, 0, 0.08) !important;
  border: none !important;
}
.time-pricing-banner .time-banner-text {
  font-size: 12px;
  color: var(--accent-warning, #ff9800);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

@keyframes scannerSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes scannerFrameReveal {
  0% {
    opacity: 0;
    transform: scale(0.9);
    border-width: 0;
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
    border-width: 3px;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    border-width: 3px;
  }
}
@keyframes scannerFramePulse {
  0%, 100% {
    box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.5), 0 0 10px rgba(76, 175, 80, 0.3);
  }
  50% {
    box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.5), 0 0 20px rgba(76, 175, 80, 0.6);
  }
}
@keyframes viewfinderReveal {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes hintFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes detailsSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.scan-payment-container.content {
  padding: 7rem 12px 10rem 12px;
  flex-direction: column;
  min-height: 100vh;
}
@media only screen and (min-width: 481px) {
  .scan-payment-container.content {
    min-height: 100%;
  }
}
.scan-payment-container.content.active-app {
  display: flex;
}

.scan-payment-container .top-content-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 100%;
  padding-top: 2rem;
}
.scan-payment-container .top-content-container > h1 {
  opacity: 0;
  animation: scannerSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.1s;
  text-align: center;
  width: 100%;
}
.scan-payment-container .instructions {
  font-size: 14px;
  color: var(--text-tertiary);
  text-align: center;
  margin: 0 0 24px 0;
  line-height: 1.4;
  opacity: 0;
  animation: scannerSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.2s;
}
.scan-payment-container .scanner-container {
  position: relative;
  width: 100%;
  max-width: min(400px, 80vw);
  min-height: min(400px, 80vw);
  margin: 20px auto;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 1/1;
  opacity: 0;
  animation: scannerSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.3s;
}
.scan-payment-container .scanner-container .qr-scanner-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.scan-payment-container .scanner-container .scanner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.scan-payment-container .scanner-container .scanner-frame {
  position: absolute;
  inset: 0;
  border: 3px solid var(--accent-primary, #4CAF50);
  border-radius: 13px;
  box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: scannerFrameReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, scannerFramePulse 2s ease-in-out infinite;
  animation-delay: 0.6s, 1.2s;
}
.scan-payment-container .scanner-container .scanner-frame::before, .scan-payment-container .scanner-container .scanner-frame::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  border: 4px solid #FFD700;
  opacity: 0;
  animation: viewfinderReveal 0.4s ease-out forwards;
  animation-delay: 1s;
}
.scan-payment-container .scanner-container .scanner-frame::before {
  top: 15px;
  left: 15px;
  border-right: none;
  border-bottom: none;
  border-radius: 8px 0 0 0;
  box-shadow: 0 0 0 transparent;
}
.scan-payment-container .scanner-container .scanner-frame::after {
  bottom: 15px;
  left: 15px;
  border-right: none;
  border-top: none;
  border-radius: 0 0 0 8px;
}
.scan-payment-container .scanner-container .scanner-frame .scanner-frame-top-right,
.scan-payment-container .scanner-container .scanner-frame .scanner-frame-bottom-right {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 4px solid #FFD700;
  opacity: 0;
  animation: viewfinderReveal 0.4s ease-out forwards;
  animation-delay: 1s;
}
.scan-payment-container .scanner-container .scanner-frame .scanner-frame-top-right {
  top: 15px;
  right: 15px;
  border-left: none;
  border-bottom: none;
  border-radius: 0 8px 0 0;
}
.scan-payment-container .scanner-container .scanner-frame .scanner-frame-bottom-right {
  bottom: 15px;
  right: 15px;
  border-left: none;
  border-top: none;
  border-radius: 0 0 8px 0;
}
.scan-payment-container .scanner-container .scanner-hint {
  margin-top: 140px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 20px;
  color: #fff;
  font-size: 14px;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: hintFadeIn 0.4s ease-out forwards;
  animation-delay: 0.9s;
}
.scan-payment-container .scanner-error-message {
  max-width: 400px;
  margin: 0 auto 16px auto;
  padding: 12px 16px;
  border-radius: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  background: rgba(251, 66, 104, 0.1);
  color: var(--accent-danger, #fb4268);
  border: 1px solid rgba(251, 66, 104, 0.3);
}
.scan-payment-container .scanner-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 20px;
}
.scan-payment-container .scanner-controls button {
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.scan-payment-container .scanner-controls button.start-scan-button {
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent-primary, #4CAF50) 0%, var(--accent-primary-lighter, #66bb6a) 50%, var(--accent-primary, #4CAF50) 100%);
  background-size: 200% 200%;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-accent-glow, 0 4px 15px rgba(76, 175, 80, 0.4)), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), background-position var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1));
}
.scan-payment-container .scanner-controls button.start-scan-button:hover {
  background-position: 100% 100%;
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent-glow-intense, 0 8px 25px rgba(76, 175, 80, 0.5)), 0 0 40px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.scan-payment-container .scanner-controls button.start-scan-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.scan-payment-container .scanner-controls button.start-scan-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.scan-payment-container .scanner-controls button.stop-scan-button {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--text-secondary, #606060);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.scan-payment-container .scanner-controls button.stop-scan-button:hover:not(:disabled) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 252, 255, 0.9) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.scan-payment-container .scanner-controls button.stop-scan-button:active:not(:disabled) {
  transform: scale(0.98);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .scan-payment-container .scanner-controls button.stop-scan-button {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  :root:not([data-theme]) .scan-payment-container .scanner-controls button.stop-scan-button:hover:not(:disabled) {
    background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}
[data-theme=dark] .scan-payment-container .scanner-controls button.stop-scan-button {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .scan-payment-container .scanner-controls button.stop-scan-button:hover:not(:disabled) {
  background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.scan-payment-container .scanner-controls button.stop-scan-button {
  border-color: var(--accent-danger, #fb4268);
  color: var(--accent-danger, #fb4268);
}
.scan-payment-container .scanner-controls button:active {
  transform: scale(0.98);
}
.scan-payment-container .scanned-payment-details {
  margin: 20px;
  padding: 24px;
  background: var(--bg-secondary, #ffffff);
  border: 1px solid var(--border-primary, #e4e4e4);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.scan-payment-container .scanned-payment-details:not(.hidden) {
  animation: detailsSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.scan-payment-container .scanned-payment-details h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #272727);
  opacity: 0;
  animation: hintFadeIn 0.4s ease-out forwards;
  animation-delay: 0.1s;
}
.scan-payment-container .scanned-payment-details .payment-detail-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-primary, #f0f0f0);
  opacity: 0;
  animation: hintFadeIn 0.4s ease-out forwards;
}
.scan-payment-container .scanned-payment-details .payment-detail-item:nth-child(1) {
  animation-delay: 0.15s;
}
.scan-payment-container .scanned-payment-details .payment-detail-item:nth-child(2) {
  animation-delay: 0.2s;
}
.scan-payment-container .scanned-payment-details .payment-detail-item:nth-child(3) {
  animation-delay: 0.25s;
}
.scan-payment-container .scanned-payment-details .payment-detail-item:last-of-type {
  border-bottom: none;
}
.scan-payment-container .scanned-payment-details .payment-detail-item .label {
  font-size: 14px;
  color: var(--text-tertiary, #888);
}
.scan-payment-container .scanned-payment-details .payment-detail-item .value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #272727);
}
.scan-payment-container .scanned-payment-details .payment-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  opacity: 0;
  animation: detailsSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.35s;
}
.scan-payment-container .scanned-payment-details .payment-actions button {
  flex: 1;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.scan-payment-container .scanned-payment-details .payment-actions button.confirm-payment-button {
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent-primary, #4CAF50) 0%, var(--accent-primary-lighter, #66bb6a) 50%, var(--accent-primary, #4CAF50) 100%);
  background-size: 200% 200%;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-accent-glow, 0 4px 15px rgba(76, 175, 80, 0.4)), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)), background-position var(--transition-smooth, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1));
}
.scan-payment-container .scanned-payment-details .payment-actions button.confirm-payment-button:hover {
  background-position: 100% 100%;
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent-glow-intense, 0 8px 25px rgba(76, 175, 80, 0.5)), 0 0 40px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.scan-payment-container .scanned-payment-details .payment-actions button.confirm-payment-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.scan-payment-container .scanned-payment-details .payment-actions button.confirm-payment-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.scan-payment-container .scanned-payment-details .payment-actions button.cancel-payment-button {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--text-secondary, #606060);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.scan-payment-container .scanned-payment-details .payment-actions button.cancel-payment-button:hover:not(:disabled) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 252, 255, 0.9) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.scan-payment-container .scanned-payment-details .payment-actions button.cancel-payment-button:active:not(:disabled) {
  transform: scale(0.98);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .scan-payment-container .scanned-payment-details .payment-actions button.cancel-payment-button {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  :root:not([data-theme]) .scan-payment-container .scanned-payment-details .payment-actions button.cancel-payment-button:hover:not(:disabled) {
    background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}
[data-theme=dark] .scan-payment-container .scanned-payment-details .payment-actions button.cancel-payment-button {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .scan-payment-container .scanned-payment-details .payment-actions button.cancel-payment-button:hover:not(:disabled) {
  background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.scan-payment-container .scanned-payment-details .payment-actions button:active {
  transform: scale(0.98);
}
.scan-payment-container .scanner-status {
  padding: 12px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--text-tertiary, #888);
}
.scan-payment-container .scanner-status.error {
  color: var(--accent-danger, #fb4268);
  background: rgba(251, 66, 104, 0.1);
  border-radius: 8px;
  margin: 0 20px;
}
.scan-payment-container .scanner-status.success {
  color: var(--accent-primary, #4CAF50);
  background: rgba(76, 175, 80, 0.1);
  border-radius: 8px;
  margin: 0 20px;
}

.payment-request-container .instructions {
  font-size: 14px;
  color: var(--text-tertiary);
  text-align: center;
  margin: 0 0 24px 0;
  line-height: 1.4;
}
.payment-request-container .payment-request-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 400px;
  margin: 0 auto;
}
.payment-request-container .payment-qr-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 400px;
  margin: 0 auto;
}

.list-items-container .items-list .item {
  transition: flex-direction 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.list-items-container .items-list .item .controls {
  transition: flex-direction 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.list-items-container .items-list .item .item-text {
  transition: text-align 0.3s ease;
}
.list-items-container .items-list .item .item-text .title,
.list-items-container .items-list .item .item-text .description,
.list-items-container .items-list .item .item-text .price {
  transition: text-align 0.3s ease;
}

.lists-container .items-list .item {
  transition: flex-direction 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.lists-container .items-list .item .item-text {
  transition: flex-direction 0.3s cubic-bezier(0.4, 0, 0.2, 1), text-align 0.3s ease;
}
.lists-container .items-list .item .item-text .title {
  transition: text-align 0.3s ease, padding 0.3s ease;
}
.lists-container .items-list .item .item-text .proceed-to-list,
.lists-container .items-list .item .item-text .button-wrapper {
  transition: order 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.lists-container .items-list .quick-upload-item {
  transition: flex-direction 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.lists-container .items-list .quick-upload-item .quick-upload-content {
  transition: text-align 0.3s ease;
}

.payment-split-container .cart-subtotal,
.payment-split-container .total-section .total-row {
  transition: flex-direction 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.receipts-container .receipts-header {
  transition: flex-direction 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.receipts-container .receipts-list .receipt-item {
  transition: flex-direction 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.receipts-container .receipts-list .receipt-item .receipt-info {
  transition: text-align 0.3s ease;
}
.receipts-container .receipts-list .receipt-item .receipt-header {
  transition: flex-direction 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.receipts-container .receipts-list .receipt-item .receipt-details {
  transition: justify-content 0.3s ease;
}
.receipts-container .receipts-list .receipt-item .receipt-action {
  transition: margin 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease, transform 0.2s ease;
}
.receipts-container .receipts-list .receipt-item .receipt-action i {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.receipt-modal-header {
  transition: flex-direction 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.receipt-modal-header h2 {
  transition: flex-direction 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.receipt-modal-body .receipt-meta .receipt-meta-item {
  transition: flex-direction 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.receipt-modal-body .receipt-meta .receipt-meta-item .value, .receipt-modal-body .receipt-meta .receipt-meta-item .label {
  transition: text-align 0.3s ease;
}
.receipt-modal-body .receipt-items-section .receipt-items-list .receipt-item-row {
  transition: flex-direction 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.receipt-modal-body .receipt-items-section .receipt-items-list .receipt-item-row .item-name {
  transition: text-align 0.3s ease;
}
.receipt-modal-body .receipt-totals .total-row {
  transition: flex-direction 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.layout-right .list-items-container .items-list .item,
body.layout-right .lists-container .items-list .item {
  animation-name: itemSlideInRight;
}
body.layout-right .list-items-container .items-list .quick-upload-item {
  animation-name: itemSlideInRight;
}
body.layout-right .list-items-container .items-list .item {
  flex-direction: row-reverse;
}
body.layout-right .list-items-container .items-list .item .controls {
  flex-direction: row-reverse;
  margin-right: 0;
  margin-left: 8px;
}
body.layout-right .list-items-container .items-list .item .item-text {
  text-align: right;
}
body.layout-right .list-items-container .items-list .item .item-text .title,
body.layout-right .list-items-container .items-list .item .item-text .description,
body.layout-right .list-items-container .items-list .item .item-text .price {
  text-align: right;
}
body.layout-right .lists-container .items-list .item {
  flex-direction: row-reverse;
}
body.layout-right .lists-container .items-list .item .item-text {
  flex-direction: row-reverse;
  text-align: right;
}
body.layout-right .lists-container .items-list .item .item-text .title {
  text-align: right;
  padding: 0 4px 0 0;
}
body.layout-right .lists-container .items-list .item .item-text .proceed-to-list {
  order: 1;
}
body.layout-right .lists-container .items-list .item .item-text .button-wrapper {
  order: -1;
}
body.layout-right .lists-container .items-list .item .item-text .button-wrapper.expanded .sub-button:first-of-type {
  transform: translateX(0%);
}
body.layout-right .lists-container .items-list .item .item-text .button-wrapper.expanded .sub-button:last-of-type {
  transform: translateX(-110%);
}
body.layout-right .lists-container .items-list .quick-upload-item {
  flex-direction: row-reverse;
}
body.layout-right .lists-container .items-list .quick-upload-item .quick-upload-content {
  text-align: right;
}
body.layout-right .payment-split-container .cart-subtotal,
body.layout-right .payment-split-container .total-section .total-row {
  flex-direction: row-reverse;
}
body.layout-right .payment-split-container .split-section .split-controls {
  flex-direction: row-reverse;
}
body.layout-right .payment-split-container .split-section .split-controls .split-label {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}
body.layout-right .receipts-container .receipts-list .receipt-item {
  animation-name: itemSlideInRight;
  flex-direction: row-reverse;
}
body.layout-right .receipts-container .receipts-list .receipt-item .receipt-info {
  text-align: right;
}
body.layout-right .receipts-container .receipts-list .receipt-item .receipt-header {
  flex-direction: row-reverse;
}
body.layout-right .receipts-container .receipts-list .receipt-item .receipt-details {
  justify-content: flex-end;
}
body.layout-right .receipts-container .receipts-list .receipt-item .receipt-action {
  margin-left: 0;
  margin-right: -8px;
}
body.layout-right .receipts-container .receipts-list .receipt-item .receipt-action i {
  transform: scaleX(-1);
}
body.layout-right .receipts-container .receipts-list .receipt-item:hover .receipt-action i {
  transform: scaleX(-1) translateX(2px);
}
body.layout-right .receipts-container .receipts-header {
  flex-direction: row-reverse;
}
body.layout-right .receipt-modal-footer {
  justify-content: flex-end;
}
body.layout-right .receipt-modal-body .receipt-meta .receipt-meta-item {
  flex-direction: row-reverse;
}
body.layout-right .receipt-modal-body .receipt-meta .receipt-meta-item .value {
  text-align: left;
}
body.layout-right .receipt-modal-body .receipt-meta .receipt-meta-item .label {
  text-align: right;
}
body.layout-right .receipt-modal-body .receipt-items-section .receipt-items-list .receipt-item-row {
  flex-direction: row-reverse;
}
body.layout-right .receipt-modal-body .receipt-items-section .receipt-items-list .receipt-item-row .item-name {
  text-align: right;
}
body.layout-right .receipt-modal-body .receipt-totals .total-row {
  flex-direction: row-reverse;
}
body.layout-right .receipt-details-view .receipt-details-header {
  flex-direction: row-reverse;
}
body.layout-right .receipt-details-view .receipt-meta .receipt-meta-item {
  flex-direction: row-reverse;
}
body.layout-right .receipt-details-view .receipt-items-section .receipt-items-list .receipt-item-row {
  flex-direction: row-reverse;
}
body.layout-right .receipt-details-view .receipt-totals .total-row {
  flex-direction: row-reverse;
}

:root[data-theme=fintech] .settings-container .settings-section,
:root[data-theme=fintech] .payment-split-container .cart-summary-section,
:root[data-theme=fintech] .payment-split-container .discount-section,
:root[data-theme=fintech] .payment-split-container .tip-section,
:root[data-theme=fintech] .payment-split-container .total-section,
:root[data-theme=dark] .settings-container .settings-section,
:root[data-theme=dark] .payment-split-container .cart-summary-section,
:root[data-theme=dark] .payment-split-container .discount-section,
:root[data-theme=dark] .payment-split-container .tip-section,
:root[data-theme=dark] .payment-split-container .total-section {
  background: linear-gradient(145deg, rgba(30, 35, 50, 0.85) 0%, rgba(25, 30, 45, 0.75) 50%, rgba(20, 25, 40, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
:root[data-theme=fintech] .settings-container .settings-section h3,
:root[data-theme=fintech] .payment-split-container .cart-summary-section h3,
:root[data-theme=fintech] .payment-split-container .discount-section h3,
:root[data-theme=fintech] .payment-split-container .tip-section h3,
:root[data-theme=fintech] .payment-split-container .total-section h3,
:root[data-theme=dark] .settings-container .settings-section h3,
:root[data-theme=dark] .payment-split-container .cart-summary-section h3,
:root[data-theme=dark] .payment-split-container .discount-section h3,
:root[data-theme=dark] .payment-split-container .tip-section h3,
:root[data-theme=dark] .payment-split-container .total-section h3 {
  color: var(--text-secondary, #d0d0d8);
}

.receipt-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px 20px 7.5rem 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.receipt-modal-overlay.hidden {
  display: none;
}
.receipt-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}
.receipt-modal-overlay.visible .receipt-modal-container {
  transform: translateY(0);
  opacity: 1;
}

.receipt-modal-container {
  width: 100%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15), 0 -4px 20px rgba(0, 0, 0, 0.08), 0 8px 40px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.receipt-modal-container::-webkit-scrollbar {
  width: 6px;
}
.receipt-modal-container::-webkit-scrollbar-track {
  background: transparent;
}
.receipt-modal-container::-webkit-scrollbar-thumb {
  background: var(--border-secondary, #ccc);
  border-radius: 3px;
}

.receipt-modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  z-index: 1;
}
.receipt-modal-header h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary, #272727);
}
.receipt-modal-header h2 i {
  color: var(--accent-primary, #4CAF50);
}

.receipt-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  position: sticky;
  bottom: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  z-index: 1;
}

.receipt-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 100px;
  height: 48px;
  min-height: 48px;
  padding: 0 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  color: var(--text-secondary, #606060);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.receipt-modal-close:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 252, 255, 0.9) 100%);
  color: var(--text-primary, #272727);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.receipt-modal-close:active {
  transform: translateY(0) scale(0.98);
}
.receipt-modal-close i {
  font-size: 16px;
}
.receipt-modal-close span {
  font-weight: 500;
}

.receipt-modal-body {
  padding: 0;
}
.receipt-modal-body .receipt-status-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  font-size: 15px;
  font-weight: 600;
  position: relative;
}
.receipt-modal-body .receipt-status-banner i {
  font-size: 18px;
}
.receipt-modal-body .receipt-status-banner.status-success {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.08) 100%);
  color: #2e7d32;
  border-bottom: 2px solid rgba(76, 175, 80, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(76, 175, 80, 0.1);
}
.receipt-modal-body .receipt-status-banner.status-pending {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.08) 100%);
  color: #f57c00;
  border-bottom: 2px solid rgba(255, 193, 7, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(255, 193, 7, 0.1);
}
.receipt-modal-body .receipt-status-banner.status-error {
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.15) 0%, rgba(244, 67, 54, 0.08) 100%);
  color: #c62828;
  border-bottom: 2px solid rgba(244, 67, 54, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(244, 67, 54, 0.1);
}
.receipt-modal-body .receipt-status-banner.status-refunded {
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.15) 0%, rgba(156, 39, 176, 0.08) 100%);
  color: #7b1fa2;
  border-bottom: 2px solid rgba(156, 39, 176, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(156, 39, 176, 0.1);
}
.receipt-modal-body .receipt-status-banner {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.receipt-modal-body .receipt-status-banner.status-updated {
  animation: statusPulse 0.5s ease-out;
}
@keyframes statusPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
.receipt-modal-body .receipt-refund-comment-card {
  margin: 16px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(156, 39, 176, 0.08) 0%, rgba(156, 39, 176, 0.03) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(156, 39, 176, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.receipt-modal-body .receipt-refund-comment-card .refund-comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.receipt-modal-body .receipt-refund-comment-card .refund-comment-header > i {
  font-size: 14px;
  color: var(--accent-premium, #a855f7);
  font-family: "FontAwesome";
}
.receipt-modal-body .receipt-refund-comment-card .refund-comment-header .refund-comment-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #1a1a2e);
  flex: 1;
}
.receipt-modal-body .receipt-refund-comment-card .refund-comment-header .refund-comment-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.receipt-modal-body .receipt-refund-comment-card .refund-comment-header .refund-comment-badge.badge-pending {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.08) 100%);
  color: #f57c00;
  border: 1px solid rgba(255, 193, 7, 0.3);
}
.receipt-modal-body .receipt-refund-comment-card .refund-comment-header .refund-comment-badge.badge-approved {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.08) 100%);
  color: #2e7d32;
  border: 1px solid rgba(76, 175, 80, 0.3);
}
.receipt-modal-body .receipt-refund-comment-card .refund-comment-header .refund-comment-badge.badge-rejected {
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.15) 0%, rgba(244, 67, 54, 0.08) 100%);
  color: #c62828;
  border: 1px solid rgba(244, 67, 54, 0.3);
}
.receipt-modal-body .receipt-refund-comment-card .refund-comment-header .refund-comment-badge.badge-completed {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(56, 189, 248, 0.08) 100%);
  color: #0284c7;
  border: 1px solid rgba(56, 189, 248, 0.3);
}
.receipt-modal-body .receipt-refund-comment-card .refund-comment-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}
.receipt-modal-body .receipt-refund-comment-card .refund-comment-meta .refund-comment-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.receipt-modal-body .receipt-refund-comment-card .refund-comment-meta .refund-comment-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #1a1a2e);
}
.receipt-modal-body .receipt-refund-comment-card .refund-comment-meta .refund-comment-value.refund-comment-amount {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-premium, #a855f7);
}
.receipt-modal-body .receipt-refund-comment-card .refund-comment-reason {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.6) 0%, rgba(248, 250, 252, 0.4) 100%);
  border: 1px solid rgba(156, 39, 176, 0.1);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.receipt-modal-body .receipt-refund-comment-card .refund-comment-reason > i {
  font-size: 12px;
  color: var(--accent-premium, #a855f7);
  margin-top: 2px;
  font-family: "FontAwesome";
  flex-shrink: 0;
}
.receipt-modal-body .receipt-refund-comment-card .refund-comment-reason .refund-comment-text {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #2d2d44);
  line-height: 1.5;
  font-style: italic;
}
.receipt-modal-body .receipt-refund-comment-card .refund-comment-rejection {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(244, 67, 54, 0.08) 0%, rgba(244, 67, 54, 0.03) 100%);
  border: 1px solid rgba(244, 67, 54, 0.15);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.receipt-modal-body .receipt-refund-comment-card .refund-comment-rejection > i {
  font-size: 12px;
  color: #c62828;
  margin-top: 2px;
  font-family: "FontAwesome";
  flex-shrink: 0;
}
.receipt-modal-body .receipt-refund-comment-card .refund-comment-rejection .refund-rejection-text {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: #c62828;
  line-height: 1.4;
}
.receipt-modal-body .refund-modal-actions {
  padding: 0 16px 16px;
}
.receipt-modal-body .refund-modal-buttons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 55%;
}
.receipt-modal-body .refund-modal-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 1/1;
  width: 100%;
  min-height: 70px;
  padding: 8px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.85) 50%, rgba(241, 245, 249, 0.75) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.receipt-modal-body .refund-modal-action-btn i {
  font-size: 18px;
  font-family: "FontAwesome";
}
.receipt-modal-body .refund-modal-action-btn span {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.receipt-modal-body .refund-modal-action-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02);
}
.receipt-modal-body .refund-modal-action-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}
.receipt-modal-body .refund-modal-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.receipt-modal-body .refund-modal-action-btn--approve i {
  color: #2e7d32;
}
.receipt-modal-body .refund-modal-action-btn--approve span {
  color: #2e7d32;
}
.receipt-modal-body .refund-modal-action-btn--approve:hover:not(:disabled) {
  border-color: rgba(76, 175, 80, 0.4);
  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.receipt-modal-body .refund-modal-action-btn--reject i {
  color: #c62828;
}
.receipt-modal-body .refund-modal-action-btn--reject span {
  color: #c62828;
}
.receipt-modal-body .refund-modal-action-btn--reject:hover:not(:disabled) {
  border-color: rgba(244, 67, 54, 0.4);
  box-shadow: 0 4px 16px rgba(244, 67, 54, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.receipt-modal-body .refund-modal-action-btn--process i {
  color: #0284c7;
}
.receipt-modal-body .refund-modal-action-btn--process span {
  color: #0284c7;
}
.receipt-modal-body .refund-modal-action-btn--process:hover:not(:disabled) {
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.receipt-modal-body .receipt-amount-large {
  text-align: center;
  padding: 32px 24px;
  font-size: 48px;
  font-weight: 700;
  color: var(--text-primary, #272727);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid var(--border-tertiary, rgba(255, 255, 255, 0.3));
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.03), inset 0 1px 0 var(--glass-refraction-top, rgba(255, 255, 255, 0.6)), inset 0 -1px 0 var(--glass-refraction-bottom, rgba(255, 255, 255, 0.15));
}
.receipt-modal-body .receipt-amount-large::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  pointer-events: none;
}
.receipt-modal-body .receipt-meta {
  padding: 16px 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.75) 0%, rgba(248, 250, 252, 0.65) 100%);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border-bottom: 1px solid var(--border-tertiary, rgba(255, 255, 255, 0.3));
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.02);
}
.receipt-modal-body .receipt-meta .receipt-meta-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-tertiary, rgba(0, 0, 0, 0.04));
}
.receipt-modal-body .receipt-meta .receipt-meta-item:last-child {
  border-bottom: none;
}
.receipt-modal-body .receipt-meta .receipt-meta-item .label {
  font-size: 14px;
  color: var(--text-tertiary, #5a5a72);
}
.receipt-modal-body .receipt-meta .receipt-meta-item .value {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary, #1a1a2e);
  text-align: right;
}
.receipt-modal-body .receipt-meta .receipt-meta-item .value.receipt-uuid {
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 13px;
  color: var(--text-secondary, #2d2d44);
}
.receipt-modal-body .receipt-meta .receipt-meta-item .value.merchant-name {
  font-weight: 600;
  color: var(--text-secondary, #2d2d44);
}
.receipt-modal-body .receipt-items-section {
  padding: 20px 24px;
  background: linear-gradient(135deg, var(--glass-light, rgba(255, 255, 255, 0.3)) 0%, var(--glass-ultra-light, rgba(255, 255, 255, 0.15)) 100%);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.02);
}
.receipt-modal-body .receipt-items-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  pointer-events: none;
}
.receipt-modal-body .receipt-items-section h3 {
  margin: 0 0 12px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary, #5a5a72);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.receipt-modal-body .receipt-items-section .receipt-items-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.receipt-modal-body .receipt-items-section .receipt-items-list .receipt-item-row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-tertiary, rgba(0, 0, 0, 0.04));
}
.receipt-modal-body .receipt-items-section .receipt-items-list .receipt-item-row:last-child {
  border-bottom: none;
}
.receipt-modal-body .receipt-items-section .receipt-items-list .receipt-item-row .item-name {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary, #1a1a2e);
}
.receipt-modal-body .receipt-items-section .receipt-items-list .receipt-item-row .item-qty {
  padding: 0 16px;
  font-size: 14px;
  color: var(--text-tertiary, #5a5a72);
}
.receipt-modal-body .receipt-items-section .receipt-items-list .receipt-item-row .item-price {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary, #2d2d44);
}
.receipt-modal-body .receipt-totals {
  padding: 20px 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.75) 0%, rgba(248, 250, 252, 0.65) 100%);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.02);
}
.receipt-modal-body .receipt-totals .total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 15px;
  color: var(--text-secondary, #2d2d44);
}
.receipt-modal-body .receipt-totals .total-row.discount span:last-child {
  color: var(--accent-danger, #fb4268);
}
.receipt-modal-body .receipt-totals .total-row.tip span:last-child {
  color: var(--accent-primary, #4CAF50);
}
.receipt-modal-body .receipt-totals .total-row.final {
  margin-top: 12px;
  padding-top: 16px;
  border-top: 2px solid var(--border-tertiary, rgba(0, 0, 0, 0.06));
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary, #1a1a2e);
}
.receipt-modal-body .receipt-split-info {
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.12) 0%, rgba(76, 175, 80, 0.05) 100%);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border-top: 1px solid var(--border-tertiary, rgba(76, 175, 80, 0.2));
  text-align: center;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(76, 175, 80, 0.05);
}
.receipt-modal-body .receipt-split-info::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(76, 175, 80, 0.3), transparent);
  pointer-events: none;
}
.receipt-modal-body .receipt-split-info h3 {
  margin: 0 0 8px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary, #5a5a72);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.receipt-modal-body .receipt-split-info p {
  margin: 0;
  font-size: 14px;
  color: var(--text-tertiary, #5a5a72);
}
.receipt-modal-body .receipt-split-info .per-person {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--accent-primary, #4CAF50);
}
.receipt-modal-body .receipt-actions-section {
  padding: 20px 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.7) 0%, rgba(248, 250, 252, 0.6) 100%);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border-top: 1px solid var(--border-tertiary, rgba(0, 0, 0, 0.04));
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.receipt-modal-body .receipt-actions-section h3 {
  margin: 0 0 16px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary, #5a5a72);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.receipt-error-notification {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  background: rgba(251, 66, 104, 0.95);
  color: #fff;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  z-index: 10001;
  box-shadow: 0 4px 16px rgba(251, 66, 104, 0.3);
  animation: toastSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.receipt-error-notification.fade-out {
  animation: toastFadeOut 0.3s ease forwards;
}

@keyframes toastSlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
@keyframes toastFadeOut {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
}
[data-theme=dark] .receipt-modal-overlay,
[data-theme=fintech] .receipt-modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}
[data-theme=dark] .receipt-modal-container,
[data-theme=fintech] .receipt-modal-container {
  background: linear-gradient(145deg, rgba(40, 40, 50, 0.98) 0%, rgba(30, 30, 40, 0.95) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 60px rgba(100, 100, 140, 0.1), 0 -8px 40px rgba(0, 0, 0, 0.4), 0 -4px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 var(--glass-refraction-top, rgba(255, 255, 255, 0.12)), inset 0 -1px 0 var(--glass-refraction-bottom, rgba(0, 0, 0, 0.2));
}
[data-theme=dark] .receipt-modal-header,
[data-theme=fintech] .receipt-modal-header {
  background: linear-gradient(145deg, rgba(40, 40, 50, 0.98) 0%, rgba(30, 30, 40, 0.95) 100%);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .receipt-modal-header h2,
[data-theme=fintech] .receipt-modal-header h2 {
  color: var(--text-primary, #f0f0f5);
}
[data-theme=dark] .receipt-modal-header h2 i,
[data-theme=fintech] .receipt-modal-header h2 i {
  color: var(--accent-primary, #66bb6a);
}
[data-theme=dark] .receipt-modal-footer,
[data-theme=fintech] .receipt-modal-footer {
  background: linear-gradient(145deg, rgba(40, 40, 50, 0.98) 0%, rgba(30, 30, 40, 0.95) 100%);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .receipt-modal-close,
[data-theme=fintech] .receipt-modal-close {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-tertiary, #9090a0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .receipt-modal-close:hover,
[data-theme=fintech] .receipt-modal-close:hover {
  background: linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(50, 50, 60, 0.85) 100%);
  color: var(--text-primary, #f0f0f5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
[data-theme=dark] .receipt-modal-body .receipt-status-banner.status-success,
[data-theme=fintech] .receipt-modal-body .receipt-status-banner.status-success {
  background: linear-gradient(135deg, rgba(102, 187, 106, 0.18) 0%, rgba(102, 187, 106, 0.08) 100%);
  color: var(--accent-primary, #66bb6a);
  border-color: rgba(102, 187, 106, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(102, 187, 106, 0.1);
}
[data-theme=dark] .receipt-modal-body .receipt-status-banner.status-pending,
[data-theme=fintech] .receipt-modal-body .receipt-status-banner.status-pending {
  background: linear-gradient(135deg, rgba(252, 211, 77, 0.18) 0%, rgba(252, 211, 77, 0.08) 100%);
  color: var(--accent-warning, #fcd34d);
  border-color: rgba(252, 211, 77, 0.3);
}
[data-theme=dark] .receipt-modal-body .receipt-status-banner.status-error,
[data-theme=fintech] .receipt-modal-body .receipt-status-banner.status-error {
  background: linear-gradient(135deg, rgba(255, 90, 125, 0.18) 0%, rgba(255, 90, 125, 0.08) 100%);
  color: var(--accent-danger, #ff5a7d);
  border-color: rgba(255, 90, 125, 0.3);
}
[data-theme=dark] .receipt-modal-body .receipt-status-banner.status-refunded,
[data-theme=fintech] .receipt-modal-body .receipt-status-banner.status-refunded {
  background: linear-gradient(135deg, rgba(192, 132, 252, 0.18) 0%, rgba(192, 132, 252, 0.08) 100%);
  color: var(--accent-purple, #c084fc);
  border-color: rgba(192, 132, 252, 0.3);
}
[data-theme=dark] .receipt-modal-body .receipt-amount-large,
[data-theme=fintech] .receipt-modal-body .receipt-amount-large {
  background: linear-gradient(145deg, var(--glass-light, rgba(255, 255, 255, 0.08)) 0%, var(--glass-ultra-light, rgba(255, 255, 255, 0.04)) 100%);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary, #f0f0f5);
  box-shadow: 0 0 30px rgba(100, 100, 140, 0.08), inset 0 1px 0 var(--glass-refraction-top, rgba(255, 255, 255, 0.12)), inset 0 -1px 0 var(--glass-refraction-bottom, rgba(0, 0, 0, 0.2));
}
[data-theme=dark] .receipt-modal-body .receipt-amount-large::before,
[data-theme=fintech] .receipt-modal-body .receipt-amount-large::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}
[data-theme=dark] .receipt-modal-body .receipt-meta,
[data-theme=fintech] .receipt-modal-body .receipt-meta {
  background: linear-gradient(145deg, var(--glass-light, rgba(255, 255, 255, 0.08)) 0%, var(--glass-ultra-light, rgba(255, 255, 255, 0.04)) 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
[data-theme=dark] .receipt-modal-body .receipt-meta .receipt-meta-item,
[data-theme=fintech] .receipt-modal-body .receipt-meta .receipt-meta-item {
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .receipt-modal-body .receipt-meta .receipt-meta-item .label,
[data-theme=fintech] .receipt-modal-body .receipt-meta .receipt-meta-item .label {
  color: var(--text-tertiary, #9090a0);
}
[data-theme=dark] .receipt-modal-body .receipt-meta .receipt-meta-item .value,
[data-theme=fintech] .receipt-modal-body .receipt-meta .receipt-meta-item .value {
  color: var(--text-primary, #f0f0f5);
}
[data-theme=dark] .receipt-modal-body .receipt-meta .receipt-meta-item .value.receipt-uuid,
[data-theme=fintech] .receipt-modal-body .receipt-meta .receipt-meta-item .value.receipt-uuid {
  color: var(--text-secondary, #d0d0d8);
}
[data-theme=dark] .receipt-modal-body .receipt-meta .receipt-meta-item .value.merchant-name,
[data-theme=fintech] .receipt-modal-body .receipt-meta .receipt-meta-item .value.merchant-name {
  color: var(--text-secondary, #d0d0d8);
}
[data-theme=dark] .receipt-modal-body .receipt-items-section,
[data-theme=fintech] .receipt-modal-body .receipt-items-section {
  background: linear-gradient(135deg, var(--glass-ultra-light, rgba(255, 255, 255, 0.04)) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
[data-theme=dark] .receipt-modal-body .receipt-items-section::before,
[data-theme=fintech] .receipt-modal-body .receipt-items-section::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}
[data-theme=dark] .receipt-modal-body .receipt-items-section h3,
[data-theme=fintech] .receipt-modal-body .receipt-items-section h3 {
  color: var(--text-tertiary, #9090a0);
}
[data-theme=dark] .receipt-modal-body .receipt-items-section .receipt-items-list .receipt-item-row,
[data-theme=fintech] .receipt-modal-body .receipt-items-section .receipt-items-list .receipt-item-row {
  border-color: rgba(255, 255, 255, 0.04);
}
[data-theme=dark] .receipt-modal-body .receipt-items-section .receipt-items-list .receipt-item-row .item-name,
[data-theme=fintech] .receipt-modal-body .receipt-items-section .receipt-items-list .receipt-item-row .item-name {
  color: var(--text-primary, #f0f0f5);
}
[data-theme=dark] .receipt-modal-body .receipt-items-section .receipt-items-list .receipt-item-row .item-qty,
[data-theme=fintech] .receipt-modal-body .receipt-items-section .receipt-items-list .receipt-item-row .item-qty {
  color: var(--text-tertiary, #9090a0);
}
[data-theme=dark] .receipt-modal-body .receipt-items-section .receipt-items-list .receipt-item-row .item-price,
[data-theme=fintech] .receipt-modal-body .receipt-items-section .receipt-items-list .receipt-item-row .item-price {
  color: var(--text-secondary, #d0d0d8);
}
[data-theme=dark] .receipt-modal-body .receipt-totals,
[data-theme=fintech] .receipt-modal-body .receipt-totals {
  background: linear-gradient(145deg, var(--glass-light, rgba(255, 255, 255, 0.08)) 0%, var(--glass-ultra-light, rgba(255, 255, 255, 0.04)) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
[data-theme=dark] .receipt-modal-body .receipt-totals .total-row,
[data-theme=fintech] .receipt-modal-body .receipt-totals .total-row {
  color: var(--text-secondary, #d0d0d8);
}
[data-theme=dark] .receipt-modal-body .receipt-totals .total-row.final,
[data-theme=fintech] .receipt-modal-body .receipt-totals .total-row.final {
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary, #f0f0f5);
}
[data-theme=dark] .receipt-modal-body .receipt-split-info,
[data-theme=fintech] .receipt-modal-body .receipt-split-info {
  background: linear-gradient(135deg, rgba(102, 187, 106, 0.15) 0%, rgba(102, 187, 106, 0.06) 100%);
  border-color: rgba(102, 187, 106, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(102, 187, 106, 0.05);
}
[data-theme=dark] .receipt-modal-body .receipt-split-info::before,
[data-theme=fintech] .receipt-modal-body .receipt-split-info::before {
  background: linear-gradient(90deg, transparent, rgba(102, 187, 106, 0.2), transparent);
}
[data-theme=dark] .receipt-modal-body .receipt-split-info h3,
[data-theme=dark] .receipt-modal-body .receipt-split-info p,
[data-theme=fintech] .receipt-modal-body .receipt-split-info h3,
[data-theme=fintech] .receipt-modal-body .receipt-split-info p {
  color: var(--text-tertiary, #9090a0);
}
[data-theme=dark] .receipt-modal-body .receipt-split-info .per-person,
[data-theme=fintech] .receipt-modal-body .receipt-split-info .per-person {
  color: var(--accent-primary, #66bb6a);
}
[data-theme=dark] .receipt-modal-body .receipt-actions-section,
[data-theme=fintech] .receipt-modal-body .receipt-actions-section {
  background: linear-gradient(145deg, var(--glass-light, rgba(255, 255, 255, 0.08)) 0%, var(--glass-ultra-light, rgba(255, 255, 255, 0.04)) 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .receipt-modal-body .receipt-actions-section h3,
[data-theme=fintech] .receipt-modal-body .receipt-actions-section h3 {
  color: var(--text-tertiary, #9090a0);
}
[data-theme=dark] .receipt-modal-body .receipt-refund-comment-card,
[data-theme=fintech] .receipt-modal-body .receipt-refund-comment-card {
  background: linear-gradient(145deg, rgba(168, 85, 247, 0.12) 0%, rgba(168, 85, 247, 0.04) 100%);
  border-color: rgba(168, 85, 247, 0.25);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1), 0 0 20px rgba(168, 85, 247, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .receipt-modal-body .receipt-refund-comment-card .refund-comment-header > i,
[data-theme=fintech] .receipt-modal-body .receipt-refund-comment-card .refund-comment-header > i {
  color: var(--accent-premium, #c084fc);
}
[data-theme=dark] .receipt-modal-body .receipt-refund-comment-card .refund-comment-header .refund-comment-title,
[data-theme=fintech] .receipt-modal-body .receipt-refund-comment-card .refund-comment-header .refund-comment-title {
  color: var(--text-primary, #f0f0f5);
}
[data-theme=dark] .receipt-modal-body .receipt-refund-comment-card .refund-comment-header .refund-comment-badge.badge-pending,
[data-theme=fintech] .receipt-modal-body .receipt-refund-comment-card .refund-comment-header .refund-comment-badge.badge-pending {
  background: linear-gradient(135deg, rgba(252, 211, 77, 0.18) 0%, rgba(252, 211, 77, 0.08) 100%);
  color: var(--accent-warning, #fcd34d);
  border-color: rgba(252, 211, 77, 0.3);
}
[data-theme=dark] .receipt-modal-body .receipt-refund-comment-card .refund-comment-header .refund-comment-badge.badge-approved,
[data-theme=fintech] .receipt-modal-body .receipt-refund-comment-card .refund-comment-header .refund-comment-badge.badge-approved {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.18) 0%, rgba(74, 222, 128, 0.08) 100%);
  color: var(--accent-success, #4ade80);
  border-color: rgba(74, 222, 128, 0.3);
}
[data-theme=dark] .receipt-modal-body .receipt-refund-comment-card .refund-comment-header .refund-comment-badge.badge-rejected,
[data-theme=fintech] .receipt-modal-body .receipt-refund-comment-card .refund-comment-header .refund-comment-badge.badge-rejected {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.18) 0%, rgba(248, 113, 113, 0.08) 100%);
  color: var(--accent-danger, #f87171);
  border-color: rgba(248, 113, 113, 0.3);
}
[data-theme=dark] .receipt-modal-body .receipt-refund-comment-card .refund-comment-header .refund-comment-badge.badge-completed,
[data-theme=fintech] .receipt-modal-body .receipt-refund-comment-card .refund-comment-header .refund-comment-badge.badge-completed {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18) 0%, rgba(56, 189, 248, 0.08) 100%);
  color: var(--accent-primary, #38bdf8);
  border-color: rgba(56, 189, 248, 0.3);
}
[data-theme=dark] .receipt-modal-body .receipt-refund-comment-card .refund-comment-meta .refund-comment-label,
[data-theme=fintech] .receipt-modal-body .receipt-refund-comment-card .refund-comment-meta .refund-comment-label {
  color: var(--text-quaternary, #94a3b8);
}
[data-theme=dark] .receipt-modal-body .receipt-refund-comment-card .refund-comment-meta .refund-comment-value,
[data-theme=fintech] .receipt-modal-body .receipt-refund-comment-card .refund-comment-meta .refund-comment-value {
  color: var(--text-primary, #f0f0f5);
}
[data-theme=dark] .receipt-modal-body .receipt-refund-comment-card .refund-comment-meta .refund-comment-value.refund-comment-amount,
[data-theme=fintech] .receipt-modal-body .receipt-refund-comment-card .refund-comment-meta .refund-comment-value.refund-comment-amount {
  color: var(--accent-premium, #c084fc);
}
[data-theme=dark] .receipt-modal-body .receipt-refund-comment-card .refund-comment-reason,
[data-theme=fintech] .receipt-modal-body .receipt-refund-comment-card .refund-comment-reason {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-color: rgba(168, 85, 247, 0.12);
}
[data-theme=dark] .receipt-modal-body .receipt-refund-comment-card .refund-comment-reason > i,
[data-theme=fintech] .receipt-modal-body .receipt-refund-comment-card .refund-comment-reason > i {
  color: var(--accent-premium, #c084fc);
}
[data-theme=dark] .receipt-modal-body .receipt-refund-comment-card .refund-comment-reason .refund-comment-text,
[data-theme=fintech] .receipt-modal-body .receipt-refund-comment-card .refund-comment-reason .refund-comment-text {
  color: var(--text-secondary, #e2e8f0);
}
[data-theme=dark] .receipt-modal-body .receipt-refund-comment-card .refund-comment-rejection,
[data-theme=fintech] .receipt-modal-body .receipt-refund-comment-card .refund-comment-rejection {
  background: linear-gradient(145deg, rgba(248, 113, 113, 0.1) 0%, rgba(248, 113, 113, 0.04) 100%);
  border-color: rgba(248, 113, 113, 0.2);
}
[data-theme=dark] .receipt-modal-body .receipt-refund-comment-card .refund-comment-rejection > i,
[data-theme=fintech] .receipt-modal-body .receipt-refund-comment-card .refund-comment-rejection > i {
  color: var(--accent-danger, #f87171);
}
[data-theme=dark] .receipt-modal-body .receipt-refund-comment-card .refund-comment-rejection .refund-rejection-text,
[data-theme=fintech] .receipt-modal-body .receipt-refund-comment-card .refund-comment-rejection .refund-rejection-text {
  color: var(--accent-danger, #f87171);
}
[data-theme=dark] .receipt-modal-body .refund-modal-action-btn,
[data-theme=fintech] .receipt-modal-body .refund-modal-action-btn {
  background: linear-gradient(145deg, var(--glass-medium, rgba(255, 255, 255, 0.12)) 0%, var(--glass-light, rgba(255, 255, 255, 0.08)) 50%, var(--glass-ultra-light, rgba(255, 255, 255, 0.04)) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .receipt-modal-body .refund-modal-action-btn--approve i,
[data-theme=fintech] .receipt-modal-body .refund-modal-action-btn--approve i {
  color: var(--accent-success, #4ade80);
}
[data-theme=dark] .receipt-modal-body .refund-modal-action-btn--approve span,
[data-theme=fintech] .receipt-modal-body .refund-modal-action-btn--approve span {
  color: var(--accent-success, #4ade80);
}
[data-theme=dark] .receipt-modal-body .refund-modal-action-btn--approve:hover:not(:disabled),
[data-theme=fintech] .receipt-modal-body .refund-modal-action-btn--approve:hover:not(:disabled) {
  border-color: rgba(74, 222, 128, 0.4);
  box-shadow: 0 4px 16px rgba(74, 222, 128, 0.2), 0 0 20px rgba(74, 222, 128, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .receipt-modal-body .refund-modal-action-btn--reject i,
[data-theme=fintech] .receipt-modal-body .refund-modal-action-btn--reject i {
  color: var(--accent-danger, #f87171);
}
[data-theme=dark] .receipt-modal-body .refund-modal-action-btn--reject span,
[data-theme=fintech] .receipt-modal-body .refund-modal-action-btn--reject span {
  color: var(--accent-danger, #f87171);
}
[data-theme=dark] .receipt-modal-body .refund-modal-action-btn--reject:hover:not(:disabled),
[data-theme=fintech] .receipt-modal-body .refund-modal-action-btn--reject:hover:not(:disabled) {
  border-color: rgba(248, 113, 113, 0.4);
  box-shadow: 0 4px 16px rgba(248, 113, 113, 0.2), 0 0 20px rgba(248, 113, 113, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .receipt-modal-body .refund-modal-action-btn--process i,
[data-theme=fintech] .receipt-modal-body .refund-modal-action-btn--process i {
  color: var(--accent-primary, #38bdf8);
}
[data-theme=dark] .receipt-modal-body .refund-modal-action-btn--process span,
[data-theme=fintech] .receipt-modal-body .refund-modal-action-btn--process span {
  color: var(--accent-primary, #38bdf8);
}
[data-theme=dark] .receipt-modal-body .refund-modal-action-btn--process:hover:not(:disabled),
[data-theme=fintech] .receipt-modal-body .refund-modal-action-btn--process:hover:not(:disabled) {
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.2), 0 0 20px rgba(56, 189, 248, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

@keyframes receiptSkeletonShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
@keyframes receiptContentFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.receipt-skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.4) 100%);
  background-size: 200% 100%;
  animation: receiptSkeletonShimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

.receipt-loading {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}

.receipt-loading-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
}
.receipt-loading-amount .skeleton-amount {
  width: 180px;
  height: 48px;
  border-radius: 12px;
}
.receipt-loading-amount .skeleton-status {
  width: 100px;
  height: 28px;
  border-radius: 14px;
}

.receipt-loading-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.receipt-loading-section .skeleton-label {
  width: 80px;
  height: 14px;
}

.receipt-loading-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.receipt-loading-row .skeleton-text {
  height: 18px;
  border-radius: 6px;
}
.receipt-loading-row .skeleton-text.wide {
  width: 140px;
}
.receipt-loading-row .skeleton-text.medium {
  width: 80px;
}
.receipt-loading-row .skeleton-text.narrow {
  width: 60px;
}

.receipt-loading-row:nth-child(1) .receipt-skeleton {
  animation-delay: 0ms;
}

.receipt-loading-row:nth-child(2) .receipt-skeleton {
  animation-delay: 50ms;
}

.receipt-loading-row:nth-child(3) .receipt-skeleton {
  animation-delay: 100ms;
}

.receipt-loading-row:nth-child(4) .receipt-skeleton {
  animation-delay: 150ms;
}

.receipt-loading-row:nth-child(5) .receipt-skeleton {
  animation-delay: 200ms;
}

.receipt-content-loaded {
  opacity: 0;
  animation: receiptContentFadeIn 0.4s ease forwards;
  animation-delay: 0.1s;
}

[data-theme=dark] .receipt-skeleton,
[data-theme=fintech] .receipt-skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.05) 100%);
  background-size: 200% 100%;
}
[data-theme=dark] .receipt-loading-row,
[data-theme=fintech] .receipt-loading-row {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

@keyframes cartBarExpand {
  from {
    transform: scaleY(0);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}
@keyframes cartBarCollapse {
  from {
    transform: scaleY(1);
    opacity: 1;
  }
  to {
    transform: scaleY(0);
    opacity: 0;
  }
}
.cart-summary-bar {
  position: sticky;
  bottom: 0;
  z-index: 100;
  width: 100%;
  margin-top: auto;
  border-radius: 12px 12px 0 0;
  background: rgba(20, 25, 40, 0.97);
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-bottom: none;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(56, 189, 248, 0.1);
}
.cart-summary-bar .cart-bar-collapsed {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cart-summary-bar .cart-bar-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(56, 189, 248, 0.1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cart-summary-bar .cart-bar-toggle-btn .cart-bar-expand-icon {
  font-size: 16px;
  color: rgba(56, 189, 248, 0.6);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cart-summary-bar .cart-bar-toggle-btn .cart-bar-expand-icon.fa-chevron-down {
  transform: rotate(180deg);
}
.cart-summary-bar .cart-bar-summary {
  display: flex;
  align-items: center;
  padding: 0 18px 0 98px;
  gap: 8px;
  flex: 1;
  height: 64px;
}
.cart-summary-bar .cart-bar-subtotal {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 64px;
  text-align: center;
  flex-shrink: 0;
}
.cart-summary-bar .cart-bar-fees {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cart-summary-bar .cart-bar-total {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cart-summary-bar .cart-bar-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(56, 189, 248, 0.7);
}
.cart-summary-bar .cart-bar-value {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}
.cart-summary-bar .cart-bar-total .cart-bar-value {
  font-size: 20px;
  color: var(--accent-primary, #4ade80);
}
.cart-summary-bar .cart-bar-expanded {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 16px 84px;
  border-top: 1px solid rgba(56, 189, 248, 0.1);
  transform-origin: bottom center;
  will-change: transform, opacity;
  scrollbar-width: none;
}
.cart-summary-bar .cart-bar-expanded::-webkit-scrollbar {
  display: none;
}
.cart-summary-bar .cart-bar-expanded.open {
  animation: cartBarExpand 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.cart-summary-bar .cart-bar-expanded.closing {
  animation: cartBarCollapse 0.2s ease forwards;
  pointer-events: none;
}
.cart-summary-bar .cart-bar-expanded.hidden {
  display: none;
}
.cart-summary-bar .cart-bar-expanded .cart-bar-bottom-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  z-index: 2;
}
.cart-summary-bar .cart-bar-expanded .cart-bar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 0;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(56, 189, 248, 0.1);
  font-size: 16px;
  color: rgba(56, 189, 248, 0.6);
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.cart-summary-bar .cart-bar-expanded .cart-bar-collapse-btn:active {
  transform: scale(0.9);
}
.cart-summary-bar .cart-bar-expanded .cart-bar-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-left: 72px;
  padding: 0;
  background: rgba(251, 66, 104, 0.08);
  border: 1px solid rgba(251, 66, 104, 0.2);
  border-radius: 10px;
  font-size: 14px;
  color: var(--accent-danger, #fb4268);
  cursor: pointer;
  transition: all 0.2s ease;
}
.cart-summary-bar .cart-bar-expanded .cart-bar-clear-btn:active {
  transform: scale(0.9);
  background: rgba(251, 66, 104, 0.15);
}
.cart-summary-bar .cart-bar-expanded .cart-bar-clear-btn:hover {
  border-color: rgba(251, 66, 104, 0.35);
}
.cart-summary-bar .cart-bar-expanded .cart-bar-clear-btn span {
  display: none;
}
.cart-summary-bar .cart-bar-expanded .cart-bar-clear-btn i {
  margin: 0;
}
.cart-summary-bar .cart-bar-expanded .order-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 4px;
}
.cart-summary-bar .cart-bar-expanded .order-summary-table thead th {
  padding: 8px 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(56, 189, 248, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cart-summary-bar .cart-bar-expanded .order-summary-table tbody td {
  padding: 12px 0;
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cart-summary-bar .cart-bar-expanded .order-summary-table tbody tr:last-child td {
  border-bottom: none;
}
.cart-summary-bar .cart-bar-expanded .order-summary-table .col-item {
  text-align: left;
  width: 42%;
}
.cart-summary-bar .cart-bar-expanded .order-summary-table .col-qty {
  text-align: center;
  width: 44px;
}
.cart-summary-bar .cart-bar-expanded .order-summary-table .col-price {
  text-align: right;
}
.cart-summary-bar .cart-bar-expanded .order-summary-table .col-subtotal {
  text-align: right;
  font-weight: 600;
}
.cart-summary-bar .cart-bar-expanded .order-summary-table th + th, .cart-summary-bar .cart-bar-expanded .order-summary-table td + td {
  padding-left: 12px;
}
[data-theme=light] .cart-summary-bar {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.97) 0%, rgba(248, 250, 252, 0.97) 50%, rgba(241, 245, 249, 0.97) 100%);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
[data-theme=light] .cart-summary-bar .cart-bar-label {
  color: var(--text-tertiary, #888);
}
[data-theme=light] .cart-summary-bar .cart-bar-value {
  color: var(--text-primary, #1a1a2e);
}
[data-theme=light] .cart-summary-bar .cart-bar-total .cart-bar-value {
  color: var(--accent-primary, #4CAF50);
}
[data-theme=light] .cart-summary-bar .cart-bar-toggle-btn {
  border-right-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .cart-summary-bar .cart-bar-toggle-btn .cart-bar-expand-icon {
  color: var(--text-tertiary, #888);
}
[data-theme=light] .cart-summary-bar .cart-bar-expanded {
  border-color: rgba(0, 0, 0, 0.06);
}
[data-theme=light] .cart-summary-bar .cart-bar-expanded .cart-bar-clear-btn {
  background: rgba(251, 66, 104, 0.06);
  border-color: rgba(251, 66, 104, 0.15);
}
[data-theme=light] .cart-summary-bar .cart-bar-expanded .cart-bar-collapse-btn {
  border-right-color: rgba(0, 0, 0, 0.08);
  color: var(--text-tertiary, #888);
}
[data-theme=light] .cart-summary-bar .cart-bar-expanded .order-summary-table thead th {
  color: var(--text-tertiary, #888);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .cart-summary-bar .cart-bar-expanded .order-summary-table tbody td {
  color: var(--text-primary, #272727);
  border-color: rgba(0, 0, 0, 0.06);
}

.receipts-toggle-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: var(--bg-tertiary, rgba(15, 23, 42, 0.6));
  border: 1px solid var(--border-primary, rgba(56, 189, 248, 0.12));
  border-radius: 12px;
  margin-bottom: 16px;
  margin-right: auto;
  max-width: 200px;
}
.receipts-toggle-bar .toggle-btn {
  flex: 0 1 calc(50% - 8px);
  max-width: calc(50% - 8px);
  aspect-ratio: 1/1;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.85) 50%, rgba(241, 245, 249, 0.75) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #1a1a2e);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.receipts-toggle-bar .toggle-btn i {
  font-family: "FontAwesome";
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.receipts-toggle-bar .toggle-btn[data-mode=sales] i::before {
  content: "\f155";
}
.receipts-toggle-bar .toggle-btn[data-mode=purchases] i::before {
  content: "\f07a";
}
.receipts-toggle-bar .toggle-btn[data-mode=refund-requests] i::before {
  content: "\f0e2";
}
.receipts-toggle-bar .toggle-btn span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
}
.receipts-toggle-bar .toggle-btn.active {
  background: linear-gradient(135deg, var(--accent-primary, #4CAF50) 0%, var(--accent-primary-lighter, #66bb6a) 100%);
  color: #ffffff;
  border-color: var(--accent-primary, #4CAF50);
  box-shadow: 0 4px 16px rgba(var(--accent-primary-rgb, 76, 175, 80), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.receipts-toggle-bar .toggle-btn:hover:not(:disabled):not(.active) {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(var(--accent-primary-rgb, 76, 175, 80), 0.4);
}
.receipts-toggle-bar .toggle-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}
.receipts-toggle-bar .toggle-btn .refund-requests-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 700;
  color: #ffffff;
  background: #ef4444;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.refund-requests-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
  line-height: 1;
}

.refund-requests-container {
  padding: 0;
}

.refund-requests-loading {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary, #666);
}

.refund-requests-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary, #666);
}
.refund-requests-empty i {
  font-size: 40px;
  color: var(--accent-success, #10b981);
  margin-bottom: 12px;
}

.btn-batch-process {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent-primary, #38bdf8), var(--accent-primary-dark, #0284c7));
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, opacity 0.15s ease;
  touch-action: manipulation;
}
.btn-batch-process:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-batch-process:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.3);
}
.btn-batch-process:not(:disabled):active {
  transform: translateY(0) scale(0.97);
}

.plan-selection-modal .modal-container {
  max-width: 1200px;
  margin: auto;
}
.plan-selection-modal .modal-description {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  text-align: center;
}
.plan-selection-modal .plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}
.plan-selection-modal .plan-card {
  background: var(--glass-dark);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
}
.plan-selection-modal .plan-card:hover {
  border-color: var(--primary-color);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.15);
}
.plan-selection-modal .plan-card.recommended {
  border-color: var(--primary-color);
  background: linear-gradient(145deg, var(--glass-dark), rgba(var(--primary-rgb), 0.08));
}
.plan-selection-modal .plan-card.recommended:hover {
  box-shadow: 0 8px 32px rgba(var(--primary-rgb), 0.25);
}
.plan-selection-modal .plan-card.current {
  border-color: var(--success-color);
  background: linear-gradient(145deg, var(--glass-dark), rgba(var(--success-rgb), 0.05));
}
.plan-selection-modal .plan-card .plan-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 0.5rem;
}
.plan-selection-modal .plan-card .plan-header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-primary);
  flex: 1;
}
.plan-selection-modal .plan-card .plan-header .badge {
  padding: 0.35rem 0.75rem;
  border-radius: var(--border-radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.plan-selection-modal .plan-card .plan-header .badge.recommended-badge {
  background: var(--primary-color);
  color: white;
}
.plan-selection-modal .plan-card .plan-header .badge.current-badge {
  background: var(--success-color);
  color: white;
}
.plan-selection-modal .plan-card .plan-price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}
.plan-selection-modal .plan-card .plan-description {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  min-height: 2.7rem;
}
.plan-selection-modal .plan-card .plan-transaction-fee {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
}
.plan-selection-modal .plan-card .plan-transaction-fee i {
  margin-right: 0.25rem;
}
.plan-selection-modal .plan-card .plan-scans {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
}
.plan-selection-modal .plan-card .plan-scans i {
  margin-right: 0.5rem;
  color: var(--text-secondary);
}
.plan-selection-modal .plan-card .plan-referral {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  margin-bottom: 1rem;
  padding: 0.5rem;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
}
.plan-selection-modal .plan-card .plan-referral i {
  margin-right: 0.5rem;
  color: var(--success-color);
}
.plan-selection-modal .plan-card .plan-select-btn {
  width: 100%;
  padding: 1rem;
  border: none;
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--primary-color);
  color: white;
}
.plan-selection-modal .plan-card .plan-select-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary-color), black 10%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}
.plan-selection-modal .plan-card .plan-select-btn:disabled {
  background: var(--border-color);
  color: var(--text-tertiary);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.service-assignment-modal .modal-container {
  max-width: 900px;
  margin: auto;
}
.service-assignment-modal .modal-subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0.5rem 0 1.5rem 0;
  line-height: 1.5;
}
.service-assignment-modal .current-assignments {
  background: var(--glass-dark);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.service-assignment-modal .current-assignments h3 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.75rem;
}
.service-assignment-modal .assignments-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.service-assignment-modal .assignments-table th,
.service-assignment-modal .assignments-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}
.service-assignment-modal .assignments-table th {
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}
.service-assignment-modal .assignments-table td {
  color: var(--text-primary);
}
.service-assignment-modal .assignments-table td.actions {
  text-align: center;
  width: 60px;
}
.service-assignment-modal .assignments-table .plan-slug {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 0.25rem;
}
.service-assignment-modal .assignments-table small {
  display: block;
  color: var(--text-tertiary);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}
.service-assignment-modal .assignments-table .no-data {
  text-align: center;
  color: var(--text-tertiary);
  padding: 2rem !important;
}
.service-assignment-modal .status-badge {
  padding: 0.35rem 0.75rem;
  border-radius: var(--border-radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.service-assignment-modal .status-badge.active {
  background: rgba(40, 167, 69, 0.15);
  color: var(--success-color);
}
.service-assignment-modal .status-badge.pending {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
}
.service-assignment-modal .status-badge.cancelled {
  background: rgba(220, 53, 69, 0.15);
  color: var(--danger-color);
}
.service-assignment-modal .status-badge.expired {
  background: rgba(108, 117, 125, 0.15);
  color: var(--text-tertiary);
}
.service-assignment-modal .status-badge.suspended {
  background: rgba(13, 110, 253, 0.15);
  color: #0d6efd;
}
.service-assignment-modal .btn-icon {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: var(--border-radius);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-assignment-modal .btn-icon:hover {
  background: var(--bg-secondary);
}
.service-assignment-modal .btn-icon.btn-cancel-assignment {
  color: var(--danger-color);
}
.service-assignment-modal .btn-icon.btn-cancel-assignment:hover {
  background: rgba(220, 53, 69, 0.1);
  color: var(--danger-color);
}

.plan-management-section {
  background: var(--glass-dark);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
  margin-top: 1rem;
}

.plan-management-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.plan-management-actions .btn {
  flex: 1;
  min-width: 140px;
  padding: 0.875rem 1.25rem;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.plan-management-actions .btn i {
  font-size: 1rem;
}

.plan-usage-info {
  background: var(--glass-dark);
  border-radius: var(--border-radius-lg);
  padding: 1.25rem;
  margin-top: 0.75rem;
}

.plan-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--primary-color);
  color: white;
  border-radius: var(--border-radius-full);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.usage-bar-container {
  margin-top: 1rem;
}

.usage-bar-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
}

.usage-bar {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}

.usage-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), color-mix(in srgb, var(--primary-color), black 10%));
  border-radius: 4px;
  transition: width 0.5s ease;
}

.credit-balance {
  margin-top: 1rem;
  padding: 0.75rem;
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(40, 167, 69, 0.05));
  border-radius: var(--border-radius);
  color: var(--success-color);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.credit-balance i {
  font-size: 1.1rem;
}

.instruction-slides {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 24px;
  text-align: center;
}

.instruction-slide {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 400px;
  opacity: 0;
  transform: translateY(20px);
  animation: slideEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.instruction-slide.active {
  display: flex;
}

@keyframes slideEnter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.slide-image {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: iconFloat 4s ease-in-out infinite;
}
.slide-image .hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 16px;
}
.slide-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.3) 100%);
  border-radius: 16px;
  pointer-events: none;
}

.slide-icon {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(102, 187, 106, 0.08) 100%);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(76, 175, 80, 0.2);
  box-shadow: 0 8px 32px rgba(76, 175, 80, 0.15), 0 4px 16px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.02);
  animation: iconFloat 3s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.slide-icon::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.15) 50%, transparent 70%);
  animation: shimmer 4s ease-in-out infinite;
  pointer-events: none;
}
.slide-icon i {
  font-size: 44px;
  color: var(--accent-primary, #4CAF50);
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

@keyframes iconFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
.slide-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary, #1a1a2e);
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.slide-description {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-secondary, #5a5a72);
  line-height: 1.6;
  max-width: 320px;
}

.slide-features {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.feature-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(241, 245, 249, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #2d2d44);
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feature-item i {
  font-size: 14px;
  color: var(--accent-primary, #4CAF50);
}
.feature-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.slide-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.08) 0%, rgba(56, 189, 248, 0.04) 100%);
  border: 1px solid rgba(56, 189, 248, 0.15);
  margin-top: 8px;
}
.slide-hint i {
  font-size: 16px;
  color: var(--accent-info, #38bdf8);
}
.slide-hint span {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-info, #38bdf8);
}

.slide-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}

.org-details-container .slide-indicators,
.users-container .slide-indicators,
.user-profile-container .slide-indicators,
.settings-container .slide-indicators,
.lists-container .slide-indicators,
.receipts-container .slide-indicators,
.create-org-container .slide-indicators {
  display: none;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  cursor: pointer;
}
.indicator.active {
  width: 24px;
  border-radius: 4px;
  background: var(--accent-primary, #4CAF50);
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
}
.indicator:hover:not(.active) {
  background: rgba(0, 0, 0, 0.25);
}

[data-theme=dark] .slide-icon,
[data-theme=fintech] .slide-icon {
  background: linear-gradient(135deg, rgba(102, 187, 106, 0.2) 0%, rgba(102, 187, 106, 0.08) 100%);
  border-color: rgba(102, 187, 106, 0.3);
  box-shadow: 0 8px 32px rgba(102, 187, 106, 0.2), 0 0 40px rgba(102, 187, 106, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .slide-icon i,
[data-theme=fintech] .slide-icon i {
  color: var(--accent-primary, #66bb6a);
  text-shadow: 0 0 16px rgba(102, 187, 106, 0.5);
}
[data-theme=dark] .slide-title,
[data-theme=fintech] .slide-title {
  color: #ffffff;
}
[data-theme=dark] .slide-description,
[data-theme=fintech] .slide-description {
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .feature-item,
[data-theme=fintech] .feature-item {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.85) 0%, rgba(40, 40, 50, 0.75) 50%, rgba(35, 35, 45, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .feature-item i,
[data-theme=fintech] .feature-item i {
  color: var(--accent-primary, #66bb6a);
}
[data-theme=dark] .feature-item:hover,
[data-theme=fintech] .feature-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 20px rgba(102, 187, 106, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .slide-hint,
[data-theme=fintech] .slide-hint {
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.12) 0%, rgba(56, 189, 248, 0.06) 100%);
  border-color: rgba(56, 189, 248, 0.2);
}
[data-theme=dark] .slide-hint i, [data-theme=dark] .slide-hint span,
[data-theme=fintech] .slide-hint i,
[data-theme=fintech] .slide-hint span {
  color: #38bdf8;
}
[data-theme=dark] .indicator,
[data-theme=fintech] .indicator {
  background: rgba(255, 255, 255, 0.15);
}
[data-theme=dark] .indicator.active,
[data-theme=fintech] .indicator.active {
  background: var(--accent-primary, #66bb6a);
  box-shadow: 0 0 12px rgba(102, 187, 106, 0.5);
}
[data-theme=dark] .indicator:hover:not(.active),
[data-theme=fintech] .indicator:hover:not(.active) {
  background: rgba(255, 255, 255, 0.25);
}

[data-theme=fintech] .slide-icon {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(168, 85, 247, 0.08) 100%);
  border-color: rgba(56, 189, 248, 0.25);
  box-shadow: 0 8px 32px rgba(56, 189, 248, 0.15), 0 0 60px rgba(168, 85, 247, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
[data-theme=fintech] .slide-icon i {
  color: #38bdf8;
  text-shadow: 0 0 20px rgba(56, 189, 248, 0.6);
}
[data-theme=fintech] .indicator.active {
  background: linear-gradient(135deg, #38bdf8 0%, #a855f7 100%);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.5);
}

.content .top-content-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(248, 250, 252, 0.75) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.02);
  margin-bottom: 24px;
  overflow: hidden;
  position: relative;
}
.content .top-content-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  pointer-events: none;
  z-index: 1;
}
[data-theme=dark] .content .top-content-container, [data-theme=fintech] .content .top-content-container {
  background: linear-gradient(180deg, rgba(40, 45, 60, 0.95) 0%, rgba(35, 40, 55, 0.85) 50%, rgba(30, 35, 50, 0.75) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 60px rgba(100, 100, 140, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .content .top-content-container::before, [data-theme=fintech] .content .top-content-container::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

.list-items-container .instruction-slides {
  padding: 16px !important;
  height: 100% !important;
}
.list-items-container .instruction-slide {
  gap: 12px !important;
  height: 100% !important;
  justify-content: stretch !important;
}
.list-items-container .instruction-slide .slide-icon {
  font-size: 64px !important;
}
.list-items-container .instruction-slide .slide-icon img, .list-items-container .instruction-slide .slide-icon svg {
  max-height: 200px !important;
  width: auto !important;
  object-fit: contain;
}
.list-items-container .instruction-slide .slide-title {
  font-size: 24px !important;
  line-height: 1.3 !important;
  margin-top: auto !important;
}
.list-items-container .slide-image {
  margin: 0 !important;
  flex: 1 !important;
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  max-height: 340px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.list-items-container .slide-image img,
.list-items-container .slide-image .hero-image {
  max-height: 100% !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 16px !important;
}
.list-items-container .slide-description {
  display: none !important;
}

.scan-payment-container .scanner-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  padding-top: 7rem;
  width: 100%;
}
.scan-payment-container .scanner-view .scanner-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary, #1a1a2e);
  margin: 0 0 8px 0;
  text-align: center;
}
.scan-payment-container .scanner-view .scanner-instructions {
  font-size: 15px;
  color: var(--text-secondary, #5a5a72);
  margin: 0 0 24px 0;
  text-align: center;
}
[data-theme=dark] .scan-payment-container .scanner-view .scanner-title, [data-theme=fintech] .scan-payment-container .scanner-view .scanner-title {
  color: #ffffff;
}
[data-theme=dark] .scan-payment-container .scanner-view .scanner-instructions, [data-theme=fintech] .scan-payment-container .scanner-view .scanner-instructions {
  color: rgba(255, 255, 255, 0.7);
}

@media screen and (max-height: 700px) {
  .slide-icon {
    width: 80px;
    height: 80px;
  }
  .slide-icon i {
    font-size: 36px;
  }
  .slide-title {
    font-size: 22px;
  }
  .slide-description {
    font-size: 14px;
  }
  .slide-features {
    gap: 8px;
  }
  .feature-item {
    padding: 8px 12px;
    font-size: 12px;
  }
}
@media screen and (max-height: 600px) {
  .slide-icon {
    width: 64px;
    height: 64px;
  }
  .slide-icon i {
    font-size: 28px;
  }
  .instruction-slide {
    gap: 12px;
  }
}
.slide-infographic {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 12px 0;
  padding: 0 8px;
}

.infographic-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.infographic-step .step-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.8) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.infographic-step .step-icon i {
  font-size: 24px;
  color: var(--accent-primary, #4CAF50);
}
.infographic-step .step-icon.icon-blue {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(56, 189, 248, 0.08) 100%);
  border-color: rgba(56, 189, 248, 0.25);
}
.infographic-step .step-icon.icon-blue i {
  color: #38bdf8;
}
.infographic-step .step-icon.icon-green {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.15) 0%, rgba(74, 222, 128, 0.08) 100%);
  border-color: rgba(74, 222, 128, 0.25);
}
.infographic-step .step-icon.icon-green i {
  color: #4ade80;
}
.infographic-step .step-icon.icon-purple {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.08) 100%);
  border-color: rgba(168, 85, 247, 0.25);
}
.infographic-step .step-icon.icon-purple i {
  color: #a855f7;
}
.infographic-step .step-icon.icon-orange {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.15) 0%, rgba(251, 146, 60, 0.08) 100%);
  border-color: rgba(251, 146, 60, 0.25);
}
.infographic-step .step-icon.icon-orange i {
  color: #fb923c;
}
.infographic-step .step-icon.icon-cyan {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.15) 0%, rgba(34, 211, 238, 0.08) 100%);
  border-color: rgba(34, 211, 238, 0.25);
}
.infographic-step .step-icon.icon-cyan i {
  color: #22d3ee;
}
.infographic-step .step-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.infographic-arrow {
  display: flex;
  align-items: center;
  color: var(--text-quaternary, #ccc);
  font-size: 16px;
  opacity: 0.6;
}
.infographic-arrow::before {
  content: "";
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, currentColor);
  margin-right: -4px;
}

.slide-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 14px;
  background: var(--accent-primary, #4CAF50);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.slide-visual {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.85) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  position: relative;
}
.slide-visual i {
  font-size: 52px;
  color: var(--accent-primary, #4CAF50);
}
.slide-visual::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 36px;
  border: 2px solid rgba(var(--accent-primary-rgb, 76, 175, 80), 0.2);
  animation: pulseRing 2s ease-in-out infinite;
}

@keyframes pulseRing {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.2;
  }
}
.slide-tagline {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary, #606060);
  margin: 0;
  opacity: 0.9;
}

[data-theme=dark] .infographic-step .step-icon,
[data-theme=fintech] .infographic-step .step-icon {
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.9) 0%, rgba(40, 40, 50, 0.8) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .infographic-step .step-icon.icon-blue,
[data-theme=fintech] .infographic-step .step-icon.icon-blue {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2) 0%, rgba(56, 189, 248, 0.1) 100%);
}
[data-theme=dark] .infographic-step .step-icon.icon-green,
[data-theme=fintech] .infographic-step .step-icon.icon-green {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(74, 222, 128, 0.1) 100%);
}
[data-theme=dark] .infographic-step .step-icon.icon-purple,
[data-theme=fintech] .infographic-step .step-icon.icon-purple {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0.1) 100%);
}
[data-theme=dark] .infographic-step .step-icon.icon-orange,
[data-theme=fintech] .infographic-step .step-icon.icon-orange {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.2) 0%, rgba(251, 146, 60, 0.1) 100%);
}
[data-theme=dark] .infographic-step .step-icon.icon-cyan,
[data-theme=fintech] .infographic-step .step-icon.icon-cyan {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.2) 0%, rgba(34, 211, 238, 0.1) 100%);
}
[data-theme=dark] .infographic-step .step-label,
[data-theme=fintech] .infographic-step .step-label {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .infographic-arrow,
[data-theme=fintech] .infographic-arrow {
  color: rgba(255, 255, 255, 0.3);
}
[data-theme=dark] .slide-visual,
[data-theme=fintech] .slide-visual {
  background: linear-gradient(145deg, rgba(50, 55, 70, 0.95) 0%, rgba(40, 45, 60, 0.85) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .slide-visual::after,
[data-theme=fintech] .slide-visual::after {
  border-color: rgba(56, 189, 248, 0.3);
}
[data-theme=dark] .slide-tagline,
[data-theme=fintech] .slide-tagline {
  color: rgba(255, 255, 255, 0.7);
}

.payment-methods-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}
.payment-methods-section .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.payment-methods-section .section-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.payment-methods-section .section-header h3 i {
  opacity: 0.7;
}
.payment-methods-section .add-card-btn {
  padding: 8px 16px;
  font-size: 0.875rem;
}

.cards-list-container {
  min-height: 80px;
}
.cards-list-container .loading-spinner {
  display: flex;
  justify-content: center;
  padding: 24px;
}
.cards-list-container .empty-state {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-secondary);
}
.cards-list-container .empty-state i {
  font-size: 2rem;
  opacity: 0.5;
  margin-bottom: 12px;
}
.cards-list-container .empty-state p {
  margin: 0;
  font-size: 0.9rem;
}

.card-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--glass-light, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}
.card-item:hover {
  background: var(--glass-medium, rgba(255, 255, 255, 0.08));
  border-color: var(--border-active, rgba(255, 255, 255, 0.2));
}
.card-item.default {
  border-color: var(--accent-primary, #00d4aa);
  box-shadow: 0 0 0 1px var(--accent-primary, #00d4aa) inset;
}
.card-item .card-icon {
  width: 48px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.1));
  border-radius: 6px;
}
.card-item .card-icon i {
  font-size: 1.25rem;
  color: var(--text-primary);
}
.card-item .card-icon .fa-cc-visa {
  color: #1a1f71;
}
.card-item .card-icon .fa-cc-mastercard {
  color: #eb001b;
}
.card-item .card-icon .fa-cc-amex {
  color: #006fcf;
}
.card-item .card-details {
  flex: 1;
  min-width: 0;
}
.card-item .card-details .card-number {
  font-family: "SF Mono", Monaco, "Courier New", monospace;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}
.card-item .card-details .card-meta {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.card-item .card-details .card-meta span {
  white-space: nowrap;
}
.card-item .card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-item .card-actions .default-badge {
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent-primary, #00d4aa);
  background: rgba(0, 212, 170, 0.15);
  border-radius: 4px;
}
.card-item .card-actions .btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.card-item .card-actions .btn-icon:hover {
  background: var(--glass-light, rgba(255, 255, 255, 0.1));
  color: var(--text-primary);
}
.card-item .card-actions .btn-icon.delete-btn:hover {
  color: var(--error, #f87171);
  background: rgba(248, 113, 113, 0.1);
}
.card-item .card-actions .btn-icon.set-default-btn:hover {
  color: var(--warning, #fbbf24);
  background: rgba(251, 191, 36, 0.1);
}

.card-modal-container {
  max-width: 420px;
}
.card-modal-container .modal-header h2 i {
  color: var(--accent-primary, #00d4aa);
}

.card-form.hidden {
  display: none;
}
.card-form .form-group {
  margin-bottom: 20px;
}
.card-form .form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.card-form .form-group.half {
  width: calc(50% - 8px);
}
.card-form .form-row {
  display: flex;
  gap: 16px;
}
.card-form .checkbox-group {
  margin-top: 8px;
}
.card-form .checkbox-group .checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.card-form .checkbox-group .checkbox-label input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-primary, #00d4aa);
}
.card-form .checkbox-group .checkbox-label span {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.card-modal-container .modal-submit-btn i {
  margin-right: 6px;
}

.hosted-field-container {
  height: 48px;
  padding: 0 16px;
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 10px;
  transition: all 0.2s ease;
}
.hosted-field-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.hosted-field-container:focus-within, .hosted-field-container.hosted-field-focus {
  border-color: var(--accent-primary, #00d4aa);
  box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.2);
}
.hosted-field-container.hosted-field-valid {
  border-color: var(--success, #4ade80);
}
.hosted-field-container.hosted-field-invalid {
  border-color: var(--error, #f87171);
}

.card-loading {
  text-align: center;
  padding: 32px 16px;
}
.card-loading.hidden {
  display: none;
}
.card-loading .spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  border: 3px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-top-color: var(--accent-primary, #00d4aa);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.card-loading p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.pci-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding: 12px;
  background: var(--glass-light, rgba(255, 255, 255, 0.03));
  border-radius: 8px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.pci-notice i {
  color: var(--success, #4ade80);
  margin-top: 2px;
}

:root[data-theme=fintech] {
  --btn-size: 8rem;
  --extra-space: 2rem;
  --app-viewport: 400px;
  --app-width: 100%;
  --bg-primary: #0a0e1a;
  --bg-secondary: #0f1421;
  --bg-tertiary: #141929;
  --bg-quaternary: #1a1f35;
  --bg-gradient-start: #0a0e1a;
  --bg-gradient-end: #1a1f35;
  --mesh-color-1: rgba(56, 189, 248, 0.12);
  --mesh-color-2: rgba(74, 222, 128, 0.08);
  --mesh-color-3: rgba(168, 85, 247, 0.06);
  --glass-ultra-light: rgba(255, 255, 255, 0.04);
  --glass-light: rgba(255, 255, 255, 0.08);
  --glass-medium: rgba(255, 255, 255, 0.12);
  --glass-heavy: rgba(255, 255, 255, 0.18);
  --glass-ultra: rgba(255, 255, 255, 0.22);
  --glass-blue: rgba(56, 189, 248, 0.12);
  --glass-green: rgba(74, 222, 128, 0.12);
  --glass-purple: rgba(168, 85, 247, 0.10);
  --glass-refraction-top: rgba(255, 255, 255, 0.15);
  --glass-refraction-bottom: rgba(0, 0, 0, 0.2);
  --glass-ambient-glow: rgba(56, 189, 248, 0.12);
  --nav-glass-medium: rgba(20, 25, 41, 0.9);
  --nav-button-bg: var(--nav-glass-medium);
  --blur-subtle: blur(10px);
  --blur-medium: blur(20px);
  --blur-heavy: blur(40px);
  --blur-ultra: blur(60px);
  --blur-extreme: blur(80px);
  --backdrop-glass: blur(20px) saturate(200%);
  --backdrop-glass-heavy: blur(40px) saturate(200%);
  --accent-primary: #38bdf8;
  --accent-primary-rgb: 56, 189, 248;
  --accent-primary-lighter: #7dd3fc;
  --accent-primary-dark: #0284c7;
  --accent-success: #4ade80;
  --accent-success-rgb: 74, 222, 128;
  --accent-danger: #f87171;
  --accent-danger-rgb: 248, 113, 113;
  --accent-warning: #fbbf24;
  --accent-warning-rgb: 251, 191, 36;
  --accent-info: #22d3ee;
  --accent-info-rgb: 34, 211, 238;
  --accent-premium: #a855f7;
  --accent-premium-rgb: 168, 85, 247;
  --accent-primary-light: #7dd3fc;
  --accent-success-light: #86efac;
  --text-primary: #f8fafc;
  --text-secondary: #e2e8f0;
  --text-tertiary: #cbd5e1;
  --text-quaternary: #94a3b8;
  --border-primary: rgba(255, 255, 255, 0.10);
  --border-secondary: rgba(255, 255, 255, 0.15);
  --border-tertiary: rgba(255, 255, 255, 0.20);
  --border-accent-primary: rgba(56, 189, 248, 0.4);
  --border-accent-success: rgba(74, 222, 128, 0.4);
  --shadow-glass-sm:
    0 0 30px rgba(56, 189, 248, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 var(--glass-refraction-top),
    inset 0 -1px 0 var(--glass-refraction-bottom);
  --shadow-glass-md:
    0 0 40px rgba(56, 189, 248, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 var(--glass-refraction-top),
    inset 0 -1px 0 var(--glass-refraction-bottom);
  --shadow-glass-lg:
    0 0 60px rgba(56, 189, 248, 0.1),
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 8px 40px rgba(0, 0, 0, 0.35),
    0 16px 56px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 var(--glass-refraction-top),
    inset 0 -1px 0 var(--glass-refraction-bottom);
  --shadow-glass-xl:
    0 0 80px rgba(56, 189, 248, 0.12),
    0 8px 30px rgba(0, 0, 0, 0.5),
    0 16px 50px rgba(0, 0, 0, 0.4),
    0 24px 70px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 var(--glass-refraction-top),
    inset 0 -1px 0 var(--glass-refraction-bottom);
  --shadow-glow-blue:
    0 0 20px rgba(56, 189, 248, 0.5),
    0 0 40px rgba(56, 189, 248, 0.3);
  --shadow-glow-green:
    0 0 20px rgba(74, 222, 128, 0.5),
    0 0 40px rgba(74, 222, 128, 0.3);
  --shadow-glow-purple:
    0 0 20px rgba(168, 85, 247, 0.5),
    0 0 40px rgba(168, 85, 247, 0.3);
  --shadow-accent-glow:
    0 4px 15px rgba(56, 189, 248, 0.4),
    0 0 30px rgba(56, 189, 248, 0.2);
  --shadow-accent-glow-intense:
    0 8px 25px rgba(56, 189, 248, 0.5),
    0 0 50px rgba(56, 189, 248, 0.3);
  --shadow-floating:
    0 0 80px rgba(56, 189, 248, 0.1),
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 8px 40px rgba(0, 0, 0, 0.3);
  --button-bg: var(--glass-medium);
  --button-border: var(--border-secondary);
  --button-text: var(--text-primary);
  --input-bg: rgba(40, 45, 60, 0.7);
  --input-border: var(--border-secondary);
  --input-focus-shadow:
    0 0 0 3px rgba(56, 189, 248, 0.25),
    0 0 20px rgba(56, 189, 248, 0.15);
  --footer-gradient-start: transparent;
  --footer-gradient-mid: rgba(20, 25, 41, 0.9);
  --footer-gradient-end: rgba(26, 31, 53, 0.95);
  --footer-border: rgba(255, 255, 255, 0.12);
}
:root[data-theme=fintech] body {
  background: radial-gradient(ellipse at 20% 30%, var(--mesh-color-1) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, var(--mesh-color-2) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, var(--mesh-color-3) 0%, transparent 50%), radial-gradient(ellipse at top, #1a1f35, #0a0e1a);
  background-attachment: fixed;
  color: var(--text-primary);
  transition: background 0.5s ease, color 0.3s ease;
}
:root[data-theme=fintech] .item::after,
:root[data-theme=fintech] .card-demo::after,
:root[data-theme=fintech] .receipt-item::after,
:root[data-theme=fintech] .qr-code-card::after,
:root[data-theme=fintech] .payment-method-section::after,
:root[data-theme=fintech] .wizard-cart-summary::after,
:root[data-theme=fintech] .settings-section::after,
:root[data-theme=fintech] .editable-field::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.05) 0%, rgba(168, 85, 247, 0.03) 25%, rgba(74, 222, 128, 0.05) 50%, rgba(56, 189, 248, 0.03) 75%, rgba(168, 85, 247, 0.05) 100%);
  pointer-events: none;
  opacity: 0.7;
}
@media (hover: hover) and (pointer: fine) {
  :root[data-theme=fintech] .item::after,
  :root[data-theme=fintech] .card-demo::after,
  :root[data-theme=fintech] .receipt-item::after,
  :root[data-theme=fintech] .qr-code-card::after,
  :root[data-theme=fintech] .payment-method-section::after,
  :root[data-theme=fintech] .wizard-cart-summary::after,
  :root[data-theme=fintech] .settings-section::after,
  :root[data-theme=fintech] .editable-field::after {
    background-size: 400% 400%;
    animation: holographicShift 8s ease-in-out infinite;
    mix-blend-mode: overlay;
  }
}
@media (hover: none) {
  :root[data-theme=fintech] .item::after,
  :root[data-theme=fintech] .card-demo::after,
  :root[data-theme=fintech] .receipt-item::after,
  :root[data-theme=fintech] .qr-code-card::after,
  :root[data-theme=fintech] .payment-method-section::after,
  :root[data-theme=fintech] .wizard-cart-summary::after,
  :root[data-theme=fintech] .settings-section::after,
  :root[data-theme=fintech] .editable-field::after {
    background-size: 100% 100%;
    animation: none;
    mix-blend-mode: normal;
  }
}
@keyframes holographicShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
:root[data-theme=fintech] .pos-header-overlay {
  background: linear-gradient(180deg, rgba(20, 25, 40, 0.95) 0%, rgba(15, 20, 35, 0.95) 100%) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none !important;
  border-image: none !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  overflow: hidden;
}
:root[data-theme=fintech] .pos-header-overlay::before, :root[data-theme=fintech] .pos-header-overlay::after {
  display: none !important;
}
:root[data-theme=fintech] .pos-header-overlay .pos-logo-icon {
  color: var(--accent-primary);
  filter: drop-shadow(var(--shadow-glow-blue));
}
:root[data-theme=fintech] .pos-header-overlay .pos-powered-by {
  color: var(--text-tertiary);
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}
:root[data-theme=fintech] .pos-header-overlay .pos-brand-name {
  color: var(--text-primary);
  text-shadow: 0 0 20px rgba(56, 189, 248, 0.6);
}
:root[data-theme=fintech] .pos-header-overlay .pos-settlement-status {
  background: var(--glass-green);
  border: 1px solid var(--border-accent-primary);
  box-shadow: var(--shadow-glow-green);
}
:root[data-theme=fintech] .pos-header-overlay .pos-status-text {
  color: var(--accent-success-light);
}
:root[data-theme=fintech] .pos-header-overlay .pos-status-indicator {
  background: var(--accent-success);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.5);
}
:root[data-theme=fintech] .nav-button,
:root[data-theme=fintech] .context-action-button {
  background: linear-gradient(145deg, rgb(20, 25, 41) 0%, rgb(15, 20, 35) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--button-border);
  box-shadow: var(--shadow-glass-md);
  color: #ffffff;
}
:root[data-theme=fintech] .nav-button::before,
:root[data-theme=fintech] .context-action-button::before {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}
:root[data-theme=fintech] .nav-button i,
:root[data-theme=fintech] .context-action-button i {
  color: #ffffff;
  filter: none;
}
:root[data-theme=fintech] .nav-button:hover:not([disabled]),
:root[data-theme=fintech] .context-action-button:hover:not([disabled]) {
  background: var(--glass-heavy);
  box-shadow: var(--shadow-glass-lg), var(--shadow-glow-blue);
}
:root[data-theme=fintech] .nav-button:hover:not([disabled])::before,
:root[data-theme=fintech] .context-action-button:hover:not([disabled])::before {
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
}
:root[data-theme=fintech] .nav-button:hover:not([disabled]),
:root[data-theme=fintech] .context-action-button:hover:not([disabled]) {
  border-color: var(--border-accent-primary);
}
:root[data-theme=fintech] .nav-button:active:not([disabled]),
:root[data-theme=fintech] .context-action-button:active:not([disabled]) {
  background: var(--glass-ultra);
}
:root[data-theme=fintech] .menu-item {
  background: linear-gradient(145deg, rgba(20, 25, 41, 0.97) 0%, rgba(15, 20, 35, 0.95) 50%, rgba(12, 16, 30, 0.93) 100%);
  border: 1px solid var(--button-border);
  box-shadow: var(--shadow-glass-md);
  color: #ffffff;
}
:root[data-theme=fintech] .menu-item::before {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}
:root[data-theme=fintech] .menu-item i {
  color: #ffffff;
  filter: none;
}
:root[data-theme=fintech] .menu-item:hover:not([disabled]) {
  background: linear-gradient(145deg, rgba(25, 30, 48, 0.98) 0%, rgba(20, 25, 42, 0.97) 100%);
  box-shadow: var(--shadow-glass-lg), var(--shadow-glow-blue);
}
:root[data-theme=fintech] .menu-item:hover:not([disabled])::before {
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
}
:root[data-theme=fintech] .menu-item:hover:not([disabled]) {
  border-color: var(--border-accent-primary);
}
:root[data-theme=fintech] .menu-item:active:not([disabled]) {
  background: linear-gradient(145deg, rgba(30, 35, 55, 0.98) 0%, rgba(25, 30, 48, 0.97) 100%);
}
:root[data-theme=fintech] .circle,
:root[data-theme=fintech] .item .controls .controls-normal .circle,
:root[data-theme=fintech] .split-controls .split-btn,
:root[data-theme=fintech] .lists-container .items-list .item .item-text .proceed-to-list,
:root[data-theme=fintech] .lists-container .items-list .item .item-text .main-button,
:root[data-theme=fintech] .lists-container .items-list .item .item-text .sub-button {
  background: linear-gradient(145deg, rgb(30, 35, 50) 0%, rgb(22, 27, 42) 50%, rgb(15, 20, 35) 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(56, 189, 248, 0.15) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 30px rgba(56, 189, 248, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
:root[data-theme=fintech] .circle::after,
:root[data-theme=fintech] .item .controls .controls-normal .circle::after,
:root[data-theme=fintech] .split-controls .split-btn::after,
:root[data-theme=fintech] .lists-container .items-list .item .item-text .proceed-to-list::after,
:root[data-theme=fintech] .lists-container .items-list .item .item-text .main-button::after,
:root[data-theme=fintech] .lists-container .items-list .item .item-text .sub-button::after {
  display: none !important;
}
:root[data-theme=fintech] .circle:hover:not(:disabled),
:root[data-theme=fintech] .item .controls .controls-normal .circle:hover:not(:disabled),
:root[data-theme=fintech] .split-controls .split-btn:hover:not(:disabled),
:root[data-theme=fintech] .lists-container .items-list .item .item-text .proceed-to-list:hover:not(:disabled),
:root[data-theme=fintech] .lists-container .items-list .item .item-text .main-button:hover:not(:disabled),
:root[data-theme=fintech] .lists-container .items-list .item .item-text .sub-button:hover:not(:disabled) {
  border-color: rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 40px rgba(56, 189, 248, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transform: translateY(-2px) scale(1.05);
}
:root[data-theme=fintech] .circle:active:not(:disabled),
:root[data-theme=fintech] .item .controls .controls-normal .circle:active:not(:disabled),
:root[data-theme=fintech] .split-controls .split-btn:active:not(:disabled),
:root[data-theme=fintech] .lists-container .items-list .item .item-text .proceed-to-list:active:not(:disabled),
:root[data-theme=fintech] .lists-container .items-list .item .item-text .main-button:active:not(:disabled),
:root[data-theme=fintech] .lists-container .items-list .item .item-text .sub-button:active:not(:disabled) {
  background: linear-gradient(145deg, rgb(20, 25, 40) 0%, rgb(12, 17, 32) 100%) !important;
  transform: translateY(0) scale(0.98);
}
:root[data-theme=fintech] .item .controls .controls-edit .edit-btn,
:root[data-theme=fintech] .item .controls .controls-edit .toggle-btn,
:root[data-theme=fintech] .item .controls .controls-edit .delete-btn {
  background: linear-gradient(145deg, rgb(30, 35, 50) 0%, rgb(22, 27, 42) 50%, rgb(15, 20, 35) 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(56, 189, 248, 0.15) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 30px rgba(56, 189, 248, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
:root[data-theme=fintech] .item .controls .controls-edit .edit-btn::after,
:root[data-theme=fintech] .item .controls .controls-edit .toggle-btn::after,
:root[data-theme=fintech] .item .controls .controls-edit .delete-btn::after {
  display: none !important;
}
:root[data-theme=fintech] .item .controls .controls-edit .edit-btn:hover:not(:disabled),
:root[data-theme=fintech] .item .controls .controls-edit .toggle-btn:hover:not(:disabled),
:root[data-theme=fintech] .item .controls .controls-edit .delete-btn:hover:not(:disabled) {
  border-color: rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 40px rgba(56, 189, 248, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transform: translateY(-2px) scale(1.05);
}
:root[data-theme=fintech] .item .controls .controls-edit .edit-btn:active:not(:disabled),
:root[data-theme=fintech] .item .controls .controls-edit .toggle-btn:active:not(:disabled),
:root[data-theme=fintech] .item .controls .controls-edit .delete-btn:active:not(:disabled) {
  background: linear-gradient(145deg, rgb(20, 25, 40) 0%, rgb(12, 17, 32) 100%) !important;
  transform: translateY(0) scale(0.98);
}
:root[data-theme=fintech] .item .controls .controls-edit .edit-btn:hover:not(:disabled) {
  border-color: rgba(56, 189, 248, 0.4) !important;
}
:root[data-theme=fintech] .item .controls .controls-edit .toggle-btn:hover:not(:disabled) {
  border-color: rgba(100, 116, 139, 0.4) !important;
}
:root[data-theme=fintech] .item .controls .controls-edit .delete-btn:hover:not(:disabled) {
  border-color: rgba(239, 68, 68, 0.4) !important;
}
:root[data-theme=fintech] .edit-mode-item .edit-mode-toggle {
  background: linear-gradient(145deg, rgb(30, 35, 50) 0%, rgb(22, 27, 42) 50%, rgb(15, 20, 35) 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(56, 189, 248, 0.15) !important;
  color: #ffffff !important;
}
:root[data-theme=fintech] .edit-mode-item .edit-mode-toggle:hover {
  border-color: rgba(56, 189, 248, 0.3) !important;
  color: var(--accent-primary-light) !important;
}
:root[data-theme=fintech] .edit-mode-item .edit-mode-toggle.active {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-light) 100%) !important;
  border-color: var(--accent-primary-light) !important;
  color: #0f172a !important;
}
@media only screen and (min-width: 481px) {
  :root[data-theme=fintech] .app-container {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 16px 48px rgba(0, 0, 0, 0.3), 0 32px 64px rgba(0, 0, 0, 0.2) !important;
  }
}
:root[data-theme=fintech] .modal-overlay {
  background: rgba(10, 14, 26, 0.85);
}
:root[data-theme=fintech] .modal-container {
  background: linear-gradient(145deg, rgba(30, 35, 50, 0.98) 0%, rgba(20, 25, 40, 0.95) 100%);
  border: 1px solid rgba(56, 189, 248, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 40px rgba(56, 189, 248, 0.1);
}
:root[data-theme=fintech] .modal-header {
  border-color: rgba(255, 255, 255, 0.1);
}
:root[data-theme=fintech] .modal-header h2 {
  color: #ffffff;
}
:root[data-theme=fintech] .modal-header .modal-close-btn {
  display: none;
}
:root[data-theme=fintech] .modal-body label {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}
:root[data-theme=fintech] .modal-body .form-input,
:root[data-theme=fintech] .modal-body input[type=text],
:root[data-theme=fintech] .modal-body input[type=number],
:root[data-theme=fintech] .modal-body textarea {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
}
:root[data-theme=fintech] .modal-body .form-input::placeholder,
:root[data-theme=fintech] .modal-body input[type=text]::placeholder,
:root[data-theme=fintech] .modal-body input[type=number]::placeholder,
:root[data-theme=fintech] .modal-body textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
:root[data-theme=fintech] .modal-body .form-input:focus,
:root[data-theme=fintech] .modal-body input[type=text]:focus,
:root[data-theme=fintech] .modal-body input[type=number]:focus,
:root[data-theme=fintech] .modal-body textarea:focus {
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}
:root[data-theme=fintech] .modal-footer {
  border-color: rgba(255, 255, 255, 0.1);
}
:root[data-theme=fintech] .modal-footer .btn-cancel,
:root[data-theme=fintech] .modal-footer button[type=button]:not(.btn-primary) {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
}
:root[data-theme=fintech] .modal-footer .btn-cancel:hover,
:root[data-theme=fintech] .modal-footer button[type=button]:not(.btn-primary):hover {
  background: rgba(255, 255, 255, 0.15);
}
:root[data-theme=fintech] .modal-footer .btn-primary,
:root[data-theme=fintech] .modal-footer button[type=submit] {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-light) 100%);
  color: #0f172a;
}
:root[data-theme=fintech] .items-wrapper .menu-item {
  background: linear-gradient(145deg, rgb(30, 35, 50) 0%, rgb(22, 27, 42) 50%, rgb(15, 20, 35) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(56, 189, 248, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 30px rgba(56, 189, 248, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
:root[data-theme=fintech] .items-wrapper .menu-item::before {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}
:root[data-theme=fintech] .items-wrapper .menu-item:hover:not([disabled]) {
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 40px rgba(56, 189, 248, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
:root[data-theme=fintech] .items-wrapper .menu-item:hover:not([disabled])::before {
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.6);
}
:root[data-theme=fintech] .items-wrapper .menu-item:active:not([disabled]) {
  background: linear-gradient(145deg, rgba(20, 25, 40, 0.98) 0%, rgba(12, 17, 32, 0.95) 100%);
}
:root[data-theme=fintech] .footer {
  background: linear-gradient(0deg, rgba(20, 25, 40, 0.95) 0%, rgba(15, 20, 35, 0.95) 100%) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none !important;
  border-image: none !important;
  border-top: 1px solid rgba(56, 189, 248, 0.15) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
}
:root[data-theme=fintech] .footer::before, :root[data-theme=fintech] .footer::after {
  display: none !important;
}
:root[data-theme=fintech] .footer .total-price-value,
:root[data-theme=fintech] .footer .total-quantity-value {
  color: var(--accent-primary-light);
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
}
:root[data-theme=fintech] .global-btn {
  background: linear-gradient(145deg, rgba(30, 35, 50, 0.95) 0%, rgba(22, 27, 42, 0.9) 50%, rgba(15, 20, 35, 0.85) 100%);
  border: 1px solid rgba(56, 189, 248, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
:root[data-theme=fintech] .global-btn .btn-label {
  color: #ffffff;
}
:root[data-theme=fintech] .global-btn.primary {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-light) 100%);
  border-color: var(--accent-primary-light);
  color: #0f172a;
  box-shadow: var(--shadow-glass-md), var(--shadow-glow-blue);
}
:root[data-theme=fintech] .global-btn.primary .btn-label {
  color: #0f172a;
}
:root[data-theme=fintech] .global-btn.primary:disabled {
  background: linear-gradient(145deg, rgba(30, 35, 50, 0.5) 0%, rgba(22, 27, 42, 0.4) 100%);
  border-color: rgba(56, 189, 248, 0.08);
  color: rgba(255, 255, 255, 0.3);
  box-shadow: none;
}
:root[data-theme=fintech] .global-btn.primary:disabled .btn-label {
  color: rgba(255, 255, 255, 0.3);
}
:root[data-theme=fintech] .context-action-button,
:root[data-theme=fintech] .wizard-button.primary,
:root[data-theme=fintech] .generate-qr-button {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-light) 100%);
  border: 1px solid var(--accent-primary-light);
  box-shadow: var(--shadow-glass-md), var(--shadow-glow-blue);
  color: #0f172a;
  font-weight: 700;
}
:root[data-theme=fintech] .context-action-button i,
:root[data-theme=fintech] .wizard-button.primary i,
:root[data-theme=fintech] .generate-qr-button i {
  color: #0f172a;
  filter: none;
}
:root[data-theme=fintech] .context-action-button:hover:not([disabled]),
:root[data-theme=fintech] .wizard-button.primary:hover:not([disabled]),
:root[data-theme=fintech] .generate-qr-button:hover:not([disabled]) {
  background: linear-gradient(135deg, var(--accent-primary-light) 0%, var(--accent-primary) 100%);
  transform: translateY(-2px);
}
:root[data-theme=fintech] .form-input,
:root[data-theme=fintech] input[type=text],
:root[data-theme=fintech] input[type=number],
:root[data-theme=fintech] input[type=tel],
:root[data-theme=fintech] select {
  background: var(--bg-tertiary);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  box-shadow: var(--shadow-glass-sm);
}
:root[data-theme=fintech] .form-input::placeholder,
:root[data-theme=fintech] input[type=text]::placeholder,
:root[data-theme=fintech] input[type=number]::placeholder,
:root[data-theme=fintech] input[type=tel]::placeholder,
:root[data-theme=fintech] select::placeholder {
  color: var(--text-quaternary);
}
:root[data-theme=fintech] .form-input:focus,
:root[data-theme=fintech] input[type=text]:focus,
:root[data-theme=fintech] input[type=number]:focus,
:root[data-theme=fintech] input[type=tel]:focus,
:root[data-theme=fintech] select:focus {
  background: var(--glass-medium);
  border-color: var(--accent-primary);
  box-shadow: var(--input-focus-shadow), var(--shadow-glow-blue);
  outline: none;
}
:root[data-theme=fintech] .item,
:root[data-theme=fintech] .receipt-item {
  background: linear-gradient(135deg, rgba(18, 22, 36, 0.95) 0%, rgba(14, 18, 32, 0.93) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-glass-sm);
}
:root[data-theme=fintech] .item:hover,
:root[data-theme=fintech] .receipt-item:hover {
  background: var(--glass-heavy);
  box-shadow: var(--shadow-glass-lg), var(--shadow-glow-blue);
  border-color: var(--border-accent-primary);
}
:root[data-theme=fintech] .item .title,
:root[data-theme=fintech] .receipt-item .title {
  color: var(--text-primary);
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}
:root[data-theme=fintech] .item .price,
:root[data-theme=fintech] .receipt-item .price {
  color: var(--accent-success-light);
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
  font-weight: 700;
}
:root[data-theme=fintech] .content {
  background: linear-gradient(135deg, rgba(12, 16, 28, 0.97) 0%, rgba(17, 22, 38, 0.95) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none !important;
  box-shadow: var(--shadow-glass-md);
}
@media only screen and (min-width: 481px) {
  :root[data-theme=fintech] .content {
    border: none !important;
    box-shadow: none !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  :root[data-theme=fintech] .content::-webkit-scrollbar {
    display: none;
  }
}
:root[data-theme=fintech] .content .top-content-container {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none !important;
  box-shadow: none !important;
}
:root[data-theme=fintech] .payment-wizard-overlay {
  background: rgba(10, 14, 26, 0.95);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:root[data-theme=fintech] .payment-wizard-content {
  background: linear-gradient(135deg, rgba(20, 25, 40, 0.98) 0%, rgba(15, 20, 35, 0.97) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border-secondary);
  box-shadow: var(--shadow-glass-lg), var(--shadow-glow-blue);
}
:root[data-theme=fintech] .payment-wizard-content h2, :root[data-theme=fintech] .payment-wizard-content h3 {
  color: var(--text-primary);
  text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
}
:root[data-theme=fintech] .receipt-status {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:root[data-theme=fintech] .receipt-status.status-completed {
  background: var(--glass-green);
  border-color: var(--accent-success);
  color: var(--accent-success-light);
  box-shadow: 0 0 15px rgba(74, 222, 128, 0.4);
}
:root[data-theme=fintech] .receipt-status.status-pending {
  background: rgba(251, 191, 36, 0.1);
  border-color: var(--accent-warning);
  color: var(--accent-warning);
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.4);
}
:root[data-theme=fintech] .view {
  background-color: var(--bg-primary) !important;
}
:root[data-theme=fintech] .lists-container,
:root[data-theme=fintech] .list-items-container,
:root[data-theme=fintech] .receipts-container {
  background-color: var(--bg-primary) !important;
}
:root[data-theme=fintech] .lists-container .items-list,
:root[data-theme=fintech] .list-items-container .items-list {
  background-color: transparent !important;
  background: transparent !important;
}
:root[data-theme=fintech] .view-header,
:root[data-theme=fintech] .header {
  background-color: var(--bg-secondary) !important;
}
:root[data-theme=fintech] .app-container .content {
  background: var(--glass-medium) !important;
  background-color: transparent !important;
}
:root[data-theme=fintech] .image-upload-content,
:root[data-theme=fintech] .upload-status,
:root[data-theme=fintech] .preview-grid {
  background: var(--glass-light);
  background-color: transparent;
}
:root[data-theme=fintech] .preview-item {
  background: var(--glass-medium);
  background-color: transparent;
  border: 1px solid var(--border-primary);
}
:root[data-theme=fintech] .context-action-camera {
  background: var(--glass-medium);
  background-color: transparent;
}
:root[data-theme=fintech] .context-action-camera i {
  color: var(--accent-primary);
}
:root[data-theme=fintech] .org-details-container,
:root[data-theme=fintech] .users-container,
:root[data-theme=fintech] .user-profile-container {
  background: var(--glass-light);
  background-color: transparent;
}
:root[data-theme=fintech] .org-details-container .editable-field,
:root[data-theme=fintech] .users-container .editable-field,
:root[data-theme=fintech] .user-profile-container .editable-field {
  background: var(--glass-medium);
  background-color: transparent;
  border-bottom-color: var(--border-primary);
}
:root[data-theme=fintech] .org-details-container .editable-field label,
:root[data-theme=fintech] .users-container .editable-field label,
:root[data-theme=fintech] .user-profile-container .editable-field label {
  color: var(--text-secondary);
}
:root[data-theme=fintech] .org-details-container .editable-field .org-input,
:root[data-theme=fintech] .org-details-container .editable-field .user-input,
:root[data-theme=fintech] .org-details-container .editable-field .user-profile-input,
:root[data-theme=fintech] .users-container .editable-field .org-input,
:root[data-theme=fintech] .users-container .editable-field .user-input,
:root[data-theme=fintech] .users-container .editable-field .user-profile-input,
:root[data-theme=fintech] .user-profile-container .editable-field .org-input,
:root[data-theme=fintech] .user-profile-container .editable-field .user-input,
:root[data-theme=fintech] .user-profile-container .editable-field .user-profile-input {
  background: var(--input-bg);
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--input-border);
}
:root[data-theme=fintech] .org-details-container .editable-field .org-input:focus,
:root[data-theme=fintech] .org-details-container .editable-field .user-input:focus,
:root[data-theme=fintech] .org-details-container .editable-field .user-profile-input:focus,
:root[data-theme=fintech] .users-container .editable-field .org-input:focus,
:root[data-theme=fintech] .users-container .editable-field .user-input:focus,
:root[data-theme=fintech] .users-container .editable-field .user-profile-input:focus,
:root[data-theme=fintech] .user-profile-container .editable-field .org-input:focus,
:root[data-theme=fintech] .user-profile-container .editable-field .user-input:focus,
:root[data-theme=fintech] .user-profile-container .editable-field .user-profile-input:focus {
  background: var(--glass-medium);
  background-color: transparent;
  border-color: var(--accent-primary);
  box-shadow: var(--input-focus-shadow), var(--shadow-glow-blue);
}
:root[data-theme=fintech] .org-details-container .editable-field .org-input::placeholder,
:root[data-theme=fintech] .org-details-container .editable-field .user-input::placeholder,
:root[data-theme=fintech] .org-details-container .editable-field .user-profile-input::placeholder,
:root[data-theme=fintech] .users-container .editable-field .org-input::placeholder,
:root[data-theme=fintech] .users-container .editable-field .user-input::placeholder,
:root[data-theme=fintech] .users-container .editable-field .user-profile-input::placeholder,
:root[data-theme=fintech] .user-profile-container .editable-field .org-input::placeholder,
:root[data-theme=fintech] .user-profile-container .editable-field .user-input::placeholder,
:root[data-theme=fintech] .user-profile-container .editable-field .user-profile-input::placeholder {
  color: var(--text-quaternary);
}
:root[data-theme=fintech] .items-wrapper .menu-item .nav-badge {
  background: var(--accent-danger);
  color: #ffffff;
  box-shadow: var(--shadow-glow-blue);
}
:root[data-theme=fintech] .receipt-item.receipt-item--unread {
  border-color: var(--accent-warning);
  box-shadow: var(--shadow-glow-blue);
}
:root[data-theme=fintech] .payment-split-container {
  background-color: var(--bg-primary) !important;
}
:root[data-theme=fintech] .payment-split-container .split-header {
  background: var(--glass-medium);
  background-color: transparent;
  border-bottom-color: var(--border-secondary);
}
:root[data-theme=fintech] .payment-split-container .split-header h3 {
  color: var(--text-primary);
}
:root[data-theme=fintech] .payment-split-container .back-button {
  background: var(--glass-medium);
  border-color: var(--border-secondary);
  color: var(--text-secondary);
}
:root[data-theme=fintech] .payment-split-container .back-button:hover {
  background: var(--glass-heavy);
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-glow-blue);
}
:root[data-theme=fintech] .payment-split-container .cart-summary-section,
:root[data-theme=fintech] .payment-split-container .discount-section,
:root[data-theme=fintech] .payment-split-container .tip-section,
:root[data-theme=fintech] .payment-split-container .split-section,
:root[data-theme=fintech] .payment-split-container .total-section {
  background: linear-gradient(135deg, rgba(18, 22, 36, 0.95) 0%, rgba(14, 18, 32, 0.93) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-glass-sm);
}
:root[data-theme=fintech] .payment-split-container .cart-summary-section h3,
:root[data-theme=fintech] .payment-split-container .discount-section h3,
:root[data-theme=fintech] .payment-split-container .tip-section h3,
:root[data-theme=fintech] .payment-split-container .split-section h3,
:root[data-theme=fintech] .payment-split-container .total-section h3 {
  color: var(--text-tertiary);
}
:root[data-theme=fintech] .payment-split-container .discount-btn,
:root[data-theme=fintech] .payment-split-container .tip-btn {
  background: var(--glass-medium);
  border-color: var(--border-secondary);
  color: var(--text-primary);
}
:root[data-theme=fintech] .payment-split-container .discount-btn:hover:not(:disabled):not(.active),
:root[data-theme=fintech] .payment-split-container .tip-btn:hover:not(:disabled):not(.active) {
  background: var(--glass-heavy);
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-glow-blue);
}
:root[data-theme=fintech] .payment-split-container .discount-btn.active,
:root[data-theme=fintech] .payment-split-container .tip-btn.active {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-light) 100%);
  border-color: var(--accent-primary-light);
  color: #0f172a;
  box-shadow: var(--shadow-glow-blue);
  text-shadow: none;
}
:root[data-theme=fintech] .payment-split-container .tip-buttons .tip-btn {
  background: var(--glass-medium);
  border-color: var(--border-primary);
  color: var(--text-secondary);
}
:root[data-theme=fintech] .payment-split-container .tip-buttons .tip-btn:hover {
  background: var(--glass-heavy);
  border-color: var(--accent-primary);
}
:root[data-theme=fintech] .payment-split-container .tip-buttons .tip-btn.active {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-light) 100%);
  border-color: var(--accent-primary);
  color: #0f172a;
  box-shadow: var(--shadow-glow-blue);
}
:root[data-theme=fintech] .payment-split-container .split-controls .split-btn {
  background: var(--glass-medium);
  border-color: var(--border-primary);
  color: var(--text-primary);
}
:root[data-theme=fintech] .payment-split-container .split-controls .split-btn:hover {
  background: var(--glass-heavy);
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-glow-blue);
}
:root[data-theme=fintech] .payment-split-container .split-controls .split-count {
  color: var(--accent-primary-light);
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
}
:root[data-theme=fintech] .payment-split-container .split-controls .split-label {
  color: var(--text-primary);
}
:root[data-theme=fintech] .payment-split-container .split-controls .split-people-label {
  color: var(--text-quaternary);
}
:root[data-theme=fintech] .payment-split-container .advanced-toggle {
  background: var(--glass-light);
  border-color: var(--border-primary);
  color: var(--text-secondary);
}
:root[data-theme=fintech] .payment-split-container .advanced-toggle:hover {
  background: var(--glass-medium);
  border-color: var(--accent-primary);
  color: var(--text-primary);
}
:root[data-theme=fintech] .payment-split-container .total-section .total-row {
  color: var(--text-secondary);
}
:root[data-theme=fintech] .payment-split-container .total-section .total-row.total-final {
  border-top-color: var(--border-secondary);
  color: var(--text-primary);
}
:root[data-theme=fintech] .payment-split-container .total-section .total-row.per-person-row {
  color: var(--accent-primary-light);
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}
:root[data-theme=fintech] .payment-split-container .total-section .total-row.discount-row span:last-child {
  color: var(--accent-danger);
}
:root[data-theme=fintech] .payment-split-container .total-section .total-row.tip-row span:last-child {
  color: var(--accent-success-light);
}
:root[data-theme=fintech] .payment-split-container .primary-action-btn {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-light) 100%);
  color: #0f172a;
  box-shadow: var(--shadow-glass-md), var(--shadow-glow-blue);
}
:root[data-theme=fintech] .payment-split-container .primary-action-btn:hover {
  background: linear-gradient(135deg, var(--accent-primary-light) 0%, var(--accent-primary) 100%);
}
:root[data-theme=fintech] .payment-summary-container {
  background-color: var(--bg-primary) !important;
}
:root[data-theme=fintech] .payment-summary-container .summary-header {
  background: var(--glass-medium);
  background-color: transparent;
  border-bottom-color: var(--border-secondary);
}
:root[data-theme=fintech] .payment-summary-container .summary-header h2 {
  color: var(--text-primary);
}
:root[data-theme=fintech] .payment-summary-container .summary-total {
  background: linear-gradient(145deg, rgb(30, 35, 50) 0%, rgb(22, 27, 42) 50%, rgb(15, 20, 35) 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.15) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
:root[data-theme=fintech] .payment-summary-container .summary-total .total-label {
  color: var(--text-secondary) !important;
}
:root[data-theme=fintech] .payment-summary-container .summary-total .total-value {
  color: var(--accent-primary-light) !important;
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
}
:root[data-theme=fintech] .payment-summary-container .qr-display,
:root[data-theme=fintech] .payment-summary-container #payment-qr-display {
  background: linear-gradient(145deg, rgb(30, 35, 50) 0%, rgb(22, 27, 42) 50%, rgb(15, 20, 35) 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.15) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
:root[data-theme=fintech] .payment-summary-container .qr-display .qr-code-wrapper,
:root[data-theme=fintech] .payment-summary-container #payment-qr-display .qr-code-wrapper {
  background: #ffffff !important;
  border-radius: 12px;
  padding: 12px;
}
:root[data-theme=fintech] .payment-summary-container .qr-display .qr-amount,
:root[data-theme=fintech] .payment-summary-container .qr-display .qr-amount-label,
:root[data-theme=fintech] .payment-summary-container #payment-qr-display .qr-amount,
:root[data-theme=fintech] .payment-summary-container #payment-qr-display .qr-amount-label {
  color: var(--accent-primary-light) !important;
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
}
:root[data-theme=fintech] .payment-summary-container .qr-display .qr-person-label,
:root[data-theme=fintech] .payment-summary-container #payment-qr-display .qr-person-label {
  color: var(--accent-success-light) !important;
}
:root[data-theme=fintech] .payment-summary-container .qr-flip-back {
  background: linear-gradient(145deg, rgb(30, 35, 50) 0%, rgb(22, 27, 42) 50%, rgb(15, 20, 35) 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.15) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
:root[data-theme=fintech] .payment-summary-container .qr-flip-back .form-group label {
  color: var(--text-secondary) !important;
}
:root[data-theme=fintech] .payment-summary-container .qr-flip-back .form-group .form-input {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(56, 189, 248, 0.2) !important;
  color: #ffffff !important;
}
:root[data-theme=fintech] .payment-summary-container .qr-flip-back .form-group .form-input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}
:root[data-theme=fintech] .payment-summary-container .qr-flip-back .form-group .form-input:focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15) !important;
}
:root[data-theme=fintech] .payment-summary-container .payid-form {
  background: linear-gradient(145deg, rgb(30, 35, 50) 0%, rgb(22, 27, 42) 50%, rgb(15, 20, 35) 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.15) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
:root[data-theme=fintech] .payment-summary-container .payid-form .form-group label {
  color: var(--text-secondary) !important;
}
:root[data-theme=fintech] .payment-summary-container .payid-form .form-group .form-input {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(56, 189, 248, 0.2) !important;
  color: #ffffff !important;
}
:root[data-theme=fintech] .payment-summary-container .payid-form .form-group .form-input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}
:root[data-theme=fintech] .payment-summary-container .payid-form .form-group .form-input:focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15) !important;
}
:root[data-theme=fintech] .payment-summary-container .qr-code-card {
  background: var(--glass-medium);
  border-color: var(--border-primary);
  box-shadow: var(--shadow-glass-md);
}
:root[data-theme=fintech] .payment-summary-container .qr-code-card:hover {
  box-shadow: var(--shadow-glass-lg), var(--shadow-glow-blue);
  border-color: var(--border-accent-primary);
}
:root[data-theme=fintech] .payment-summary-container .qr-code-card.paid {
  border-color: var(--accent-success);
  background: var(--glass-green);
  box-shadow: var(--shadow-glow-green);
}
:root[data-theme=fintech] .payment-summary-container .qr-code-card .amount-display {
  color: var(--accent-primary-light);
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
}
:root[data-theme=fintech] .payment-summary-container .qr-code-card .payid-display {
  color: var(--text-quaternary);
}
:root[data-theme=fintech] .settings-container {
  background-color: var(--bg-primary) !important;
}
:root[data-theme=fintech] .settings-container .settings-section {
  background: var(--glass-light);
  background-color: transparent;
  border-bottom-color: var(--border-primary);
}
:root[data-theme=fintech] .settings-container .settings-section h3 {
  color: var(--text-primary);
}
:root[data-theme=fintech] .settings-container .settings-section h3 i {
  color: var(--accent-primary);
  filter: drop-shadow(var(--shadow-glow-blue));
}
:root[data-theme=fintech] .settings-container .theme-selector-wrapper .theme-select {
  background: var(--glass-medium);
  border-color: var(--border-primary);
  color: var(--text-primary);
}
:root[data-theme=fintech] .settings-container .theme-selector-wrapper .theme-select:focus {
  background: var(--glass-heavy);
  border-color: var(--accent-primary);
  box-shadow: var(--input-focus-shadow), var(--shadow-glow-blue);
}
:root[data-theme=fintech] .settings-container .layout-toggle {
  background: var(--glass-medium);
  border-color: var(--border-primary);
}
:root[data-theme=fintech] .settings-container .layout-toggle i {
  color: var(--text-quaternary);
}
:root[data-theme=fintech] .settings-container .layout-toggle span {
  color: var(--text-primary);
}
:root[data-theme=fintech] .settings-container .layout-toggle small {
  color: var(--text-quaternary);
}
:root[data-theme=fintech] .settings-container .layout-toggle:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-glow-blue);
}
:root[data-theme=fintech] .settings-container .layout-toggle.active {
  border-color: var(--accent-primary);
  background: var(--glass-blue);
  box-shadow: var(--shadow-glow-blue);
}
:root[data-theme=fintech] .settings-container .layout-toggle.active i {
  color: var(--accent-primary);
  filter: drop-shadow(var(--shadow-glow-blue));
}
:root[data-theme=fintech] .settings-container .reset-button {
  background: var(--glass-medium);
  border-color: var(--accent-danger);
  color: var(--accent-danger);
}
:root[data-theme=fintech] .settings-container .reset-button:hover {
  background: rgba(248, 113, 113, 0.15);
  box-shadow: 0 0 20px rgba(248, 113, 113, 0.3);
}
:root[data-theme=fintech] .scan-payment-container .scanner-container .scanner-frame {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4000px rgba(10, 14, 26, 0.8), var(--shadow-glow-blue);
}
:root[data-theme=fintech] .scan-payment-container .scanner-controls button.start-scan-button {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-light) 100%);
  color: #0f172a;
  box-shadow: var(--shadow-glass-md), var(--shadow-glow-blue);
}
:root[data-theme=fintech] .scan-payment-container .scanner-controls button.stop-scan-button {
  background: var(--glass-medium);
  border-color: var(--accent-danger);
  color: var(--accent-danger);
}
:root[data-theme=fintech] .scan-payment-container .scanner-controls button.stop-scan-button:hover {
  background: rgba(248, 113, 113, 0.15);
}
:root[data-theme=fintech] .scan-payment-container .scanned-payment-details {
  background: var(--glass-heavy);
  border-color: var(--border-secondary);
  box-shadow: var(--shadow-glass-lg);
}
:root[data-theme=fintech] .scan-payment-container .scanned-payment-details h3 {
  color: var(--text-primary);
}
:root[data-theme=fintech] .scan-payment-container .scanned-payment-details .payment-actions button.confirm-payment-button {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-light) 100%);
  color: #0f172a;
  box-shadow: var(--shadow-glass-md), var(--shadow-glow-blue);
}
:root[data-theme=fintech] .scan-payment-container .scanned-payment-details .payment-actions button.cancel-payment-button {
  background: var(--glass-medium);
  border-color: var(--border-secondary);
  color: var(--text-secondary);
}
:root[data-theme=fintech] .scan-payment-container .scanner-status {
  color: var(--text-quaternary);
}
:root[data-theme=fintech] .scan-payment-container .scanner-status.error {
  background: rgba(248, 113, 113, 0.15);
  color: var(--accent-danger);
}
:root[data-theme=fintech] .scan-payment-container .scanner-status.success {
  background: rgba(74, 222, 128, 0.15);
  color: var(--accent-success-light);
}

:root[data-theme=light-flat] {
  --btn-size: 8rem;
  --extra-space: 2rem;
  --app-viewport: 400px;
  --app-width: 100%;
  --bg-primary: #f5f5f7;
  --bg-secondary: rgba(240, 240, 245, 0.9);
  --bg-tertiary: rgba(235, 235, 240, 0.8);
  --bg-gradient-start: #f8f8fa;
  --bg-gradient-end: #f0f0f2;
  --mesh-color-1: rgba(76, 175, 80, 0.02);
  --mesh-color-2: rgba(100, 100, 100, 0.01);
  --mesh-color-3: rgba(150, 150, 150, 0.01);
  --text-primary: #333333;
  --text-secondary: #555555;
  --text-tertiary: #777777;
  --text-quaternary: #999999;
  --border-primary: rgba(0, 0, 0, 0.08);
  --border-secondary: rgba(0, 0, 0, 0.12);
  --border-tertiary: rgba(0, 0, 0, 0.06);
  --border-glass: rgba(0, 0, 0, 0.05);
  --glass-refraction-top: rgba(255, 255, 255, 0.3);
  --glass-refraction-bottom: rgba(0, 0, 0, 0.03);
  --glass-ambient-glow: transparent;
  --glass-ultra-light: rgba(240, 240, 245, 0.4);
  --glass-light: rgba(240, 240, 245, 0.6);
  --glass-medium: rgba(240, 240, 245, 0.8);
  --glass-heavy: rgba(240, 240, 245, 0.9);
  --nav-glass-medium: rgba(245, 245, 247, 0.95);
  --nav-button-bg: var(--nav-glass-medium);
  --blur-subtle: blur(4px);
  --blur-medium: blur(8px);
  --blur-heavy: blur(12px);
  --blur-ultra: blur(16px);
  --blur-extreme: blur(20px);
  --backdrop-glass: blur(10px) saturate(120%);
  --backdrop-glass-heavy: blur(16px) saturate(120%);
  --button-bg-start: rgba(240, 240, 245, 0.9);
  --button-bg-mid: rgba(245, 245, 247, 0.95);
  --button-bg-end: rgba(240, 240, 245, 0.9);
  --button-border: rgba(0, 0, 0, 0.1);
  --button-shadow-light: rgba(255, 255, 255, 0.5);
  --button-shadow-mid: rgba(0, 0, 0, 0.08);
  --button-shadow-dark: rgba(0, 0, 0, 0.12);
  --button-shadow-darker: rgba(255, 255, 255, 0.6);
  --shadow-glass-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-glass-md: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-glass-lg: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-glass-xl: 0 6px 16px rgba(0, 0, 0, 0.14);
  --shadow-glass-glow: none;
  --shadow-accent-glow: 0 2px 8px rgba(76, 175, 80, 0.25);
  --shadow-accent-glow-intense: 0 4px 12px rgba(76, 175, 80, 0.35);
  --shadow-floating: 0 4px 16px rgba(0, 0, 0, 0.12);
  --footer-gradient-start: transparent;
  --footer-gradient-mid: rgba(245, 245, 247, 0.9);
  --footer-gradient-end: rgba(248, 248, 250, 0.95);
  --footer-border: rgba(0, 0, 0, 0.08);
  --input-bg: rgba(245, 245, 247, 0.9);
  --input-focus-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
  --accent-primary: #4CAF50;
  --accent-primary-rgb: 76, 175, 80;
  --accent-primary-light: rgba(76, 175, 80, 0.12);
  --accent-primary-lighter: #66bb6a;
  --accent-primary-dark: #388e3c;
  --accent-danger: #f44336;
  --accent-danger-rgb: 244, 67, 54;
  --accent-danger-light: rgba(244, 67, 54, 0.12);
  --accent-grey: #757575;
  --accent-info: #2196f3;
  --accent-info-rgb: 33, 150, 243;
  --accent-info-light: rgba(33, 150, 243, 0.12);
  --accent-warning: #ff9800;
  --accent-warning-rgb: 255, 152, 0;
  --accent-purple: #9c27b0;
  --accent-purple-rgb: 156, 39, 176;
  --skeleton-base: rgba(220, 220, 225, 0.7);
  --skeleton-highlight: rgba(245, 245, 247, 0.9);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-smooth: 0.2s ease;
  --transition-spring: 0.25s ease;
}

:root[data-theme=dark-flat] {
  --bg-primary: #1a1a1e;
  --bg-secondary: rgba(35, 35, 40, 0.9);
  --bg-tertiary: rgba(45, 45, 52, 0.8);
  --bg-gradient-start: #1a1a1e;
  --bg-gradient-end: #222226;
  --mesh-color-1: rgba(76, 175, 80, 0.03);
  --mesh-color-2: rgba(100, 100, 140, 0.02);
  --mesh-color-3: rgba(150, 150, 180, 0.02);
  --text-primary: #e8e8ec;
  --text-secondary: #c8c8d0;
  --text-tertiary: #888890;
  --text-quaternary: #606068;
  --border-primary: rgba(255, 255, 255, 0.08);
  --border-secondary: rgba(255, 255, 255, 0.12);
  --border-tertiary: rgba(255, 255, 255, 0.06);
  --border-glass: rgba(255, 255, 255, 0.05);
  --glass-refraction-top: rgba(255, 255, 255, 0.06);
  --glass-refraction-bottom: rgba(0, 0, 0, 0.1);
  --glass-ambient-glow: transparent;
  --glass-ultra-light: rgba(50, 50, 55, 0.4);
  --glass-light: rgba(50, 50, 55, 0.6);
  --glass-medium: rgba(50, 50, 55, 0.8);
  --glass-heavy: rgba(50, 50, 55, 0.9);
  --nav-glass-medium: rgba(35, 35, 40, 0.95);
  --nav-button-bg: var(--nav-glass-medium);
  --blur-subtle: blur(4px);
  --blur-medium: blur(8px);
  --blur-heavy: blur(12px);
  --blur-ultra: blur(16px);
  --blur-extreme: blur(20px);
  --backdrop-glass: blur(10px) saturate(120%);
  --backdrop-glass-heavy: blur(16px) saturate(120%);
  --button-bg-start: rgba(50, 50, 55, 0.9);
  --button-bg-mid: rgba(55, 55, 60, 0.95);
  --button-bg-end: rgba(50, 50, 55, 0.9);
  --button-border: rgba(255, 255, 255, 0.1);
  --button-shadow-light: rgba(255, 255, 255, 0.03);
  --button-shadow-mid: rgba(0, 0, 0, 0.25);
  --button-shadow-dark: rgba(0, 0, 0, 0.35);
  --button-shadow-darker: rgba(255, 255, 255, 0.02);
  --shadow-glass-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-glass-md: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-glass-lg: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-glass-xl: 0 6px 16px rgba(0, 0, 0, 0.35);
  --shadow-glass-glow: none;
  --shadow-accent-glow: 0 2px 8px rgba(102, 187, 106, 0.2);
  --shadow-accent-glow-intense: 0 4px 12px rgba(102, 187, 106, 0.3);
  --shadow-floating: 0 4px 16px rgba(0, 0, 0, 0.3);
  --footer-gradient-start: transparent;
  --footer-gradient-mid: rgba(30, 30, 35, 0.9);
  --footer-gradient-end: rgba(35, 35, 40, 0.95);
  --footer-border: rgba(255, 255, 255, 0.08);
  --input-bg: rgba(40, 40, 45, 0.9);
  --input-focus-shadow: 0 0 0 2px rgba(102, 187, 106, 0.2);
  --accent-primary: #66bb6a;
  --accent-primary-rgb: 102, 187, 106;
  --accent-primary-light: rgba(102, 187, 106, 0.12);
  --accent-primary-lighter: #81c784;
  --accent-primary-dark: #4caf50;
  --accent-danger: #ef5350;
  --accent-danger-rgb: 239, 83, 80;
  --accent-danger-light: rgba(239, 83, 80, 0.12);
  --accent-grey: #9e9e9e;
  --accent-info: #42a5f5;
  --accent-info-rgb: 66, 165, 245;
  --accent-info-light: rgba(66, 165, 245, 0.12);
  --accent-warning: #ffb74d;
  --accent-warning-rgb: 255, 183, 77;
  --accent-purple: #ba68c8;
  --accent-purple-rgb: 186, 104, 200;
  --skeleton-base: rgba(60, 60, 65, 0.7);
  --skeleton-highlight: rgba(80, 80, 90, 0.8);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-smooth: 0.2s ease;
  --transition-spring: 0.25s ease;
}

:root[data-theme=fintech-flat] {
  --bg-primary: #0d1117;
  --bg-secondary: rgba(22, 27, 34, 0.95);
  --bg-tertiary: rgba(30, 36, 44, 0.9);
  --bg-gradient-start: #0d1117;
  --bg-gradient-end: #161b22;
  --mesh-color-1: rgba(56, 189, 248, 0.03);
  --mesh-color-2: rgba(74, 222, 128, 0.02);
  --mesh-color-3: rgba(168, 85, 247, 0.02);
  --text-primary: #f0f6fc;
  --text-secondary: #c9d1d9;
  --text-tertiary: #8b949e;
  --text-quaternary: #6e7681;
  --border-primary: rgba(255, 255, 255, 0.08);
  --border-secondary: rgba(255, 255, 255, 0.12);
  --border-tertiary: rgba(255, 255, 255, 0.06);
  --border-glass: rgba(255, 255, 255, 0.05);
  --glass-refraction-top: rgba(255, 255, 255, 0.06);
  --glass-refraction-bottom: rgba(0, 0, 0, 0.1);
  --glass-ambient-glow: transparent;
  --glass-ultra-light: rgba(30, 36, 44, 0.4);
  --glass-light: rgba(30, 36, 44, 0.6);
  --glass-medium: rgba(30, 36, 44, 0.8);
  --glass-heavy: rgba(30, 36, 44, 0.9);
  --nav-glass-medium: rgba(22, 27, 34, 0.95);
  --nav-button-bg: var(--nav-glass-medium);
  --blur-subtle: blur(4px);
  --blur-medium: blur(8px);
  --blur-heavy: blur(12px);
  --blur-ultra: blur(16px);
  --blur-extreme: blur(20px);
  --backdrop-glass: blur(10px) saturate(120%);
  --backdrop-glass-heavy: blur(16px) saturate(120%);
  --button-bg-start: rgba(30, 36, 44, 0.9);
  --button-bg-mid: rgba(35, 42, 52, 0.95);
  --button-bg-end: rgba(30, 36, 44, 0.9);
  --button-border: rgba(255, 255, 255, 0.1);
  --button-shadow-light: rgba(255, 255, 255, 0.03);
  --button-shadow-mid: rgba(0, 0, 0, 0.25);
  --button-shadow-dark: rgba(0, 0, 0, 0.35);
  --button-shadow-darker: rgba(255, 255, 255, 0.02);
  --shadow-glass-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-glass-md: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-glass-lg: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-glass-xl: 0 6px 16px rgba(0, 0, 0, 0.35);
  --shadow-glass-glow: none;
  --shadow-accent-glow: 0 2px 8px rgba(56, 189, 248, 0.2);
  --shadow-accent-glow-intense: 0 4px 12px rgba(56, 189, 248, 0.3);
  --shadow-floating: 0 4px 16px rgba(0, 0, 0, 0.3);
  --footer-gradient-start: transparent;
  --footer-gradient-mid: rgba(22, 27, 34, 0.9);
  --footer-gradient-end: rgba(26, 32, 40, 0.95);
  --footer-border: rgba(255, 255, 255, 0.08);
  --input-bg: rgba(30, 36, 44, 0.9);
  --input-focus-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
  --accent-primary: #38bdf8;
  --accent-primary-rgb: 56, 189, 248;
  --accent-primary-light: rgba(56, 189, 248, 0.12);
  --accent-primary-lighter: #7dd3fc;
  --accent-primary-dark: #0284c7;
  --accent-danger: #f87171;
  --accent-danger-rgb: 248, 113, 113;
  --accent-danger-light: rgba(248, 113, 113, 0.12);
  --accent-grey: #8b949e;
  --accent-info: #22d3ee;
  --accent-info-rgb: 34, 211, 238;
  --accent-info-light: rgba(34, 211, 238, 0.12);
  --accent-warning: #fbbf24;
  --accent-warning-rgb: 251, 191, 36;
  --accent-purple: #a855f7;
  --accent-purple-rgb: 168, 85, 247;
  --accent-success: #4ade80;
  --accent-success-rgb: 74, 222, 128;
  --skeleton-base: rgba(48, 54, 61, 0.7);
  --skeleton-highlight: rgba(68, 76, 86, 0.8);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-smooth: 0.2s ease;
  --transition-spring: 0.25s ease;
}

:root[data-theme=light-flat] .nav-button:hover:not([disabled]),
:root[data-theme=light-flat] .context-action-button:hover:not([disabled]),
:root[data-theme=light-flat] .circle:hover:not([disabled]),
:root[data-theme=dark-flat] .nav-button:hover:not([disabled]),
:root[data-theme=dark-flat] .context-action-button:hover:not([disabled]),
:root[data-theme=dark-flat] .circle:hover:not([disabled]),
:root[data-theme=fintech-flat] .nav-button:hover:not([disabled]),
:root[data-theme=fintech-flat] .context-action-button:hover:not([disabled]),
:root[data-theme=fintech-flat] .circle:hover:not([disabled]) {
  transform: scale(1.05);
}
:root[data-theme=light-flat] .nav-button:active:not([disabled]),
:root[data-theme=light-flat] .context-action-button:active:not([disabled]),
:root[data-theme=light-flat] .circle:active:not([disabled]),
:root[data-theme=dark-flat] .nav-button:active:not([disabled]),
:root[data-theme=dark-flat] .context-action-button:active:not([disabled]),
:root[data-theme=dark-flat] .circle:active:not([disabled]),
:root[data-theme=fintech-flat] .nav-button:active:not([disabled]),
:root[data-theme=fintech-flat] .context-action-button:active:not([disabled]),
:root[data-theme=fintech-flat] .circle:active:not([disabled]) {
  transform: scale(0.95);
}
:root[data-theme=light-flat] .nav-button::before,
:root[data-theme=light-flat] .context-action-button::before,
:root[data-theme=light-flat] .circle::before,
:root[data-theme=dark-flat] .nav-button::before,
:root[data-theme=dark-flat] .context-action-button::before,
:root[data-theme=dark-flat] .circle::before,
:root[data-theme=fintech-flat] .nav-button::before,
:root[data-theme=fintech-flat] .context-action-button::before,
:root[data-theme=fintech-flat] .circle::before {
  display: none;
}
:root[data-theme=light-flat] .item:hover,
:root[data-theme=light-flat] .card:hover,
:root[data-theme=light-flat] .receipt-item:hover,
:root[data-theme=dark-flat] .item:hover,
:root[data-theme=dark-flat] .card:hover,
:root[data-theme=dark-flat] .receipt-item:hover,
:root[data-theme=fintech-flat] .item:hover,
:root[data-theme=fintech-flat] .card:hover,
:root[data-theme=fintech-flat] .receipt-item:hover {
  transform: scale(1.01);
}
:root[data-theme=light-flat] .item::before,
:root[data-theme=light-flat] .card::before,
:root[data-theme=light-flat] .receipt-item::before,
:root[data-theme=dark-flat] .item::before,
:root[data-theme=dark-flat] .card::before,
:root[data-theme=dark-flat] .receipt-item::before,
:root[data-theme=fintech-flat] .item::before,
:root[data-theme=fintech-flat] .card::before,
:root[data-theme=fintech-flat] .receipt-item::before {
  display: none;
}
:root[data-theme=light-flat] .glass-panel::before,
:root[data-theme=light-flat] .quick-upload-item::before,
:root[data-theme=dark-flat] .glass-panel::before,
:root[data-theme=dark-flat] .quick-upload-item::before,
:root[data-theme=fintech-flat] .glass-panel::before,
:root[data-theme=fintech-flat] .quick-upload-item::before {
  display: none;
}
:root[data-theme=light-flat] input:focus, :root[data-theme=light-flat] select:focus, :root[data-theme=light-flat] textarea:focus,
:root[data-theme=dark-flat] input:focus,
:root[data-theme=dark-flat] select:focus,
:root[data-theme=dark-flat] textarea:focus,
:root[data-theme=fintech-flat] input:focus,
:root[data-theme=fintech-flat] select:focus,
:root[data-theme=fintech-flat] textarea:focus {
  box-shadow: var(--input-focus-shadow);
}
:root[data-theme=light-flat] .generate-qr-button,
:root[data-theme=light-flat] .empty-state-button,
:root[data-theme=light-flat] .start-scan-button,
:root[data-theme=light-flat] .confirm-payment-button,
:root[data-theme=light-flat] .wizard-button.primary,
:root[data-theme=dark-flat] .generate-qr-button,
:root[data-theme=dark-flat] .empty-state-button,
:root[data-theme=dark-flat] .start-scan-button,
:root[data-theme=dark-flat] .confirm-payment-button,
:root[data-theme=dark-flat] .wizard-button.primary,
:root[data-theme=fintech-flat] .generate-qr-button,
:root[data-theme=fintech-flat] .empty-state-button,
:root[data-theme=fintech-flat] .start-scan-button,
:root[data-theme=fintech-flat] .confirm-payment-button,
:root[data-theme=fintech-flat] .wizard-button.primary {
  background: linear-gradient(to bottom, var(--accent-primary), var(--accent-primary-dark));
  box-shadow: var(--shadow-accent-glow);
}
:root[data-theme=light-flat] .generate-qr-button:hover,
:root[data-theme=light-flat] .empty-state-button:hover,
:root[data-theme=light-flat] .start-scan-button:hover,
:root[data-theme=light-flat] .confirm-payment-button:hover,
:root[data-theme=light-flat] .wizard-button.primary:hover,
:root[data-theme=dark-flat] .generate-qr-button:hover,
:root[data-theme=dark-flat] .empty-state-button:hover,
:root[data-theme=dark-flat] .start-scan-button:hover,
:root[data-theme=dark-flat] .confirm-payment-button:hover,
:root[data-theme=dark-flat] .wizard-button.primary:hover,
:root[data-theme=fintech-flat] .generate-qr-button:hover,
:root[data-theme=fintech-flat] .empty-state-button:hover,
:root[data-theme=fintech-flat] .start-scan-button:hover,
:root[data-theme=fintech-flat] .confirm-payment-button:hover,
:root[data-theme=fintech-flat] .wizard-button.primary:hover {
  transform: scale(1.02);
}