/* Premium colorful system with balanced contrast and subtle depth */
:root {
  --v-hue: 160;
  --v-hue-2: 196;
  --v-hue-3: 220;
  --v-accent-1: hsl(var(--v-hue) 78% 44%);
  --v-accent-2: hsl(var(--v-hue-2) 80% 50%);
  --v-accent-3: hsl(var(--v-hue-3) 76% 54%);
  --v-ink: hsl(208 37% 16%);
  --v-ink-soft: hsl(205 23% 37%);
  --v-card: #ffffff;
  --v-stroke: hsl(var(--v-hue) 42% 84%);
  --v-radius-sm: 10px;
  --v-radius-md: 14px;
  --v-radius-lg: 18px;
  --v-shadow-soft: 0 10px 24px rgba(12, 37, 54, 0.08);
  --v-shadow-card: 0 12px 24px rgba(10, 38, 52, 0.1);
}

body {
  background:
    radial-gradient(900px 460px at 10% -20%, hsl(calc(var(--v-hue) - 28) 100% 95%), transparent 55%),
    radial-gradient(800px 420px at 100% 0%, hsl(calc(var(--v-hue-2) - 8) 100% 95%), transparent 52%),
    linear-gradient(160deg, hsl(calc(var(--v-hue) - 34) 95% 97%), hsl(calc(var(--v-hue-2) - 14) 95% 98%) 46%, hsl(calc(var(--v-hue-3) - 18) 96% 97%));
  color: var(--v-ink);
  line-height: 1.35;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.05rem); }
h2 { font-size: clamp(1.2rem, 1rem + 1vw, 1.55rem); }
h3 { font-size: clamp(1.02rem, 0.92rem + 0.6vw, 1.22rem); }

p,
label,
input,
select,
textarea,
button,
.small,
.muted {
  font-size: clamp(0.86rem, 0.82rem + 0.24vw, 0.96rem);
}

.section-head h2,
.title {
  font-weight: 800;
}

.app,
.phone,
.container,
main {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
}

.hero,
.header,
.page-head,
.topbar {
  background: linear-gradient(135deg, var(--v-accent-1), var(--v-accent-2)) !important;
  color: #ffffff !important;
}

.card,
.service-card,
.ticket,
.slot,
.package-card,
.profile-card,
.summary,
.panel,
.item {
  background: linear-gradient(180deg, #ffffff, hsl(calc(var(--v-hue) - 24) 100% 99%)) !important;
  border-color: var(--v-stroke) !important;
  border-radius: var(--v-radius-md);
  box-shadow: var(--v-shadow-soft);
}

.section,
.panel,
.card,
.profile-card {
  border-radius: var(--v-radius-lg);
}

.section-head {
  margin-bottom: 10px;
}

h1,
h2,
h3,
h4,
strong,
.title {
  color: var(--v-ink);
}

p,
.small,
.muted,
label {
  color: var(--v-ink-soft);
}

input,
select,
textarea,
button {
  font: inherit;
}

input,
select,
textarea {
  border-radius: var(--v-radius-sm);
  border: 1px solid color-mix(in srgb, var(--v-stroke) 82%, #9ec8b2 18%);
  background: #ffffff;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--v-accent-2) 26%, transparent);
  border-color: color-mix(in srgb, var(--v-accent-2) 62%, #ffffff 38%);
}

.nav-link,
.nav-btn {
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.16s ease;
}

.nav-link:active,
.nav-btn:active {
  transform: translateY(1px);
}

.vib-btn {
  border: 0 !important;
  color: #ffffff !important;
  border-radius: 12px;
  box-shadow: var(--v-shadow-card);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 0.16s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.vib-btn.btn-tone-1 {
  background: linear-gradient(135deg, var(--v-accent-1), hsl(var(--v-hue) 82% 50%)) !important;
}

.vib-btn.btn-tone-2 {
  background: linear-gradient(135deg, var(--v-accent-2), hsl(var(--v-hue-2) 86% 56%)) !important;
}

.vib-btn.btn-tone-3 {
  background: linear-gradient(135deg, var(--v-accent-3), hsl(var(--v-hue-3) 84% 60%)) !important;
}

.vib-btn:hover,
.vib-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(12, 37, 54, 0.25);
  filter: saturate(1.05);
}

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

@media (max-width: 700px) {
  .vib-btn {
    box-shadow: 0 8px 14px rgba(12, 37, 54, 0.18);
  }
}