:root {
  --red: #e11d24;
  --red-2: #8d0009;
  --red-3: #ff343b;
  --gold: #ffd21f;
  --gold-2: #ffd21f;
  --white: #ffffff;
  --muted: #bfc0c7;
  --deep: #130004;
  --theme-bg-start: #030303;
  --theme-bg-middle: #130004;
  --theme-bg-end: #000000;
  --theme-bubble-primary: rgba(225, 29, 36, 0.42);
  --theme-bubble-accent: rgba(255, 210, 31, 0.16);
  --panel: rgba(18, 18, 24, 0.86);
  --panel-strong: rgba(18, 18, 24, 0.94);
  --line: rgba(255, 255, 255, 0.12);
  --line-gold: rgba(255, 210, 31, 0.3);
  --line-red: rgba(225, 29, 36, 0.42);
  --theme-style: aero_2026;
}

body {
  background:
    radial-gradient(circle at 14% -12%, rgba(255, 52, 59, 0.42), transparent 30%),
    radial-gradient(circle at 88% 0%, rgba(255, 210, 31, 0.22), transparent 34%),
    radial-gradient(circle at 55% 105%, rgba(225, 29, 36, 0.2), transparent 38%),
    linear-gradient(145deg, #030303 0%, #130004 48%, #000000 100%);
}

button:not(.logo-button),
.action-btn,
a.btn-primary,
.primary-btn,
a.btn-secondary,
a.btn-test,
a.btn-run,
a.qr-download,
a.ghost-btn,
.mini-action {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 52, 59, 0.98), rgba(141, 0, 9, 0.98)),
    linear-gradient(90deg, transparent, rgba(255, 210, 31, 0.26), transparent);
  box-shadow:
    0 16px 34px rgba(141, 0, 9, 0.34),
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.22);
  transition: transform 170ms cubic-bezier(.2,.9,.2,1), filter 170ms ease, box-shadow 170ms ease;
}

button:not(.logo-button)::after,
.action-btn::after,
a.btn-primary::after,
.primary-btn::after,
a.btn-secondary::after,
a.btn-test::after,
a.btn-run::after,
a.qr-download::after,
a.ghost-btn::after,
.mini-action::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.24) 42%, transparent 62%);
  transform: translateX(-125%);
  transition: transform 520ms cubic-bezier(.2,.8,.2,1);
}

button:not(.logo-button):hover::after,
.action-btn:hover::after,
a.btn-primary:hover::after,
.primary-btn:hover::after,
a.btn-secondary:hover::after,
a.btn-test:hover::after,
a.btn-run:hover::after,
a.qr-download:hover::after,
a.ghost-btn:hover::after,
.mini-action:hover::after {
  transform: translateX(125%);
}

button:not(.logo-button):hover,
.action-btn:hover,
a.btn-primary:hover,
.primary-btn:hover,
a.btn-secondary:hover,
a.btn-test:hover,
a.btn-run:hover,
a.qr-download:hover,
a.ghost-btn:hover,
.mini-action:hover {
  transform: translateY(-2px);
  filter: saturate(1.12) brightness(1.08);
  box-shadow:
    0 22px 42px rgba(141, 0, 9, 0.44),
    0 0 0 1px rgba(255, 210, 31, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.32);
}

button:not(.logo-button):active,
.action-btn:active,
a.btn-primary:active,
.primary-btn:active,
a.btn-secondary:active,
a.btn-test:active,
a.btn-run:active,
a.qr-download:active,
a.ghost-btn:active,
.mini-action:active {
  transform: translateY(1px) scale(0.985);
  transition-duration: 70ms;
}

.btn-secondary,
.btn-test,
.btn.ghost,
.btn.secondary {
  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(18, 18, 24, 0.5));
  border-color: rgba(255, 255, 255, 0.18);
}

.flow-card,
.info-panel,
.sync-panel,
.data-panel,
.panel,
.main-settings-card {
  backdrop-filter: blur(18px) saturate(1.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)),
    rgba(18, 18, 24, 0.78);
}

input:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 4px rgba(255, 210, 31, 0.16), 0 0 26px rgba(255, 210, 31, 0.08);
}

.loading-overlay {
  background:
    radial-gradient(circle at center, rgba(225, 29, 36, 0.22), transparent 34%),
    rgba(0,0,0,0.78);
}

.loader-card {
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.025)),
    rgba(18, 18, 24, 0.88);
  border-color: rgba(255, 210, 31, 0.28);
  animation: aeroCardFloat 1.8s ease-in-out infinite;
}

.loader-bar {
  height: 5px;
}

.loader-bar span {
  width: 52%;
  background: linear-gradient(90deg, #e11d24, #ffd21f, #ff343b);
  animation: loaderSweep 0.82s cubic-bezier(.55,0,.2,1) infinite;
}

@keyframes aeroCardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}