/* ============================================================
   SPACE TOOLS — GLOBAL DESIGN SYSTEM
   AI CHAT VISUAL LANGUAGE
   ============================================================ */

:root {
  --st-bg: #020103;
  --st-bg-raised: #07040a;

  --st-surface: rgba(9, 5, 13, .76);
  --st-surface-strong: rgba(11, 6, 16, .92);
  --st-surface-hover: rgba(16, 8, 23, .90);

  --st-text: #f7f4fa;
  --st-muted: #938b9c;
  --st-muted-2: #6f6678;

  --st-purple: #330066;
  --st-purple-deep: #21003f;
  --st-purple-mid: #5a148c;
  --st-lavender: #b98be6;
  --st-lavender-soft: #d2b7ee;

  --st-border: rgba(129, 72, 174, .24);
  --st-border-soft: rgba(129, 72, 174, .13);

  --st-glow: rgba(96, 31, 145, .16);
  --st-glow-strong: rgba(96, 31, 145, .25);

  --st-radius-sm: 12px;
  --st-radius: 18px;
  --st-radius-lg: 24px;
  --st-radius-pill: 999px;

  --st-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ============================================================
   ROOT
   ============================================================ */

html {
  background: var(--st-bg) !important;
}

body {
  background:
    radial-gradient(
      circle at 50% -15%,
      rgba(51, 0, 102, .07),
      transparent 35%
    ),
    #020103 !important;

  color: var(--st-text);
}

/* Keep the AI Chat-style ambient particle field subtle. */

.bg-blobs {
  opacity: .65 !important;
  filter: saturate(.9);
}

#bgParticles {
  opacity: .82;
}

/* ============================================================
   CONTENT WIDTH
   ============================================================ */

.wrap {
  width: 100%;
  max-width: min(1240px, 94vw) !important;
  margin-inline: auto !important;
}

/* ============================================================
   HEADER — FLOATING / CLEAN / FUTURISTIC
   ============================================================ */

.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;

  background: rgba(2, 1, 3, .82) !important;

  border-bottom:
    1px solid rgba(97, 43, 137, .16) !important;

  box-shadow:
    0 14px 40px -28px rgba(0, 0, 0, .92),
    0 1px 0 rgba(255,255,255,.015) inset !important;

  backdrop-filter: blur(22px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(120%) !important;
}

.site-header .topbar,
.topbar {
  max-width: min(1240px, 94vw) !important;
  min-height: 72px !important;
  padding: 11px 16px !important;
}

/* ============================================================
   NAVIGATION ISLAND
   ============================================================ */

.tabs-island {
  border-radius: var(--st-radius-pill) !important;
}

.tabs {
  padding: 5px !important;
  gap: 3px !important;

  background: rgba(5, 2, 8, .72) !important;

  border:
    1px solid rgba(114, 55, 158, .21) !important;

  border-radius: var(--st-radius-pill) !important;

  box-shadow:
    0 10px 36px -24px rgba(0, 0, 0, .95),
    0 1px 0 rgba(255,255,255,.018) inset !important;

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

.tab {
  min-height: 38px !important;
  padding: 0 16px !important;

  border-radius: var(--st-radius-pill) !important;

  color: #9b939f !important;

  font-size: 13px !important;
  font-weight: 600 !important;

  transition:
    color .24s var(--st-ease),
    background .24s var(--st-ease),
    box-shadow .24s var(--st-ease),
    transform .24s var(--st-ease) !important;
}

.tab:hover:not(.active) {
  color: #eee7f3 !important;
  background: rgba(51,0,102,.08) !important;
  transform: translateY(-1px);
}

.tab.active {
  background:
    linear-gradient(
      135deg,
      #330066,
      #4b0879
    ) !important;

  color: #fff !important;

  box-shadow:
    0 7px 22px rgba(51,0,102,.25),
    0 0 22px rgba(90,20,140,.10),
    inset 0 1px 0 rgba(255,255,255,.12) !important;

  animation: none !important;
}

.tab.active .nav-dot {
  background: #fff !important;

  box-shadow:
    0 0 8px rgba(185,139,230,.65) !important;
}

/* ============================================================
   MOBILE NAV BUTTON
   ============================================================ */

.nav-toggle {
  background: rgba(7,3,10,.90) !important;

  border:
    1px solid rgba(105,46,150,.28) !important;

  color: #eee9f2 !important;

  border-radius: 14px !important;

  box-shadow:
    0 0 20px rgba(51,0,102,.07) !important;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  border-color: rgba(185,139,230,.55) !important;
  background: rgba(51,0,102,.09) !important;
}

/* ============================================================
   COMMON FLOATING SURFACES
   ============================================================ */

.card,
.maker-card {
  background:
    linear-gradient(
      145deg,
      rgba(10,5,14,.82),
      rgba(5,3,8,.86)
    ) !important;

  border:
    1px solid var(--st-border) !important;

  border-radius: var(--st-radius-lg) !important;

  box-shadow:
    0 18px 48px -34px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(255,255,255,.025) !important;

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

  transition:
    border-color .25s var(--st-ease),
    box-shadow .25s var(--st-ease),
    transform .25s var(--st-ease) !important;
}

.card:hover,
.maker-card:hover {
  border-color: rgba(121,62,164,.34) !important;

  box-shadow:
    0 22px 54px -35px rgba(0,0,0,.95),
    0 0 28px rgba(51,0,102,.055),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  min-height: 40px;

  background:
    linear-gradient(
      135deg,
      #330066,
      #4c0977
    ) !important;

  color: #fff !important;

  border:
    1px solid rgba(129,72,174,.28) !important;

  border-radius: var(--st-radius-pill) !important;

  box-shadow:
    0 8px 24px rgba(51,0,102,.17),
    inset 0 1px 0 rgba(255,255,255,.10) !important;

  transition:
    transform .24s var(--st-ease),
    box-shadow .24s var(--st-ease),
    filter .24s var(--st-ease) !important;
}

.btn::after {
  display: none !important;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px) !important;

  filter: brightness(1.08);

  box-shadow:
    0 12px 30px rgba(51,0,102,.22),
    0 0 20px rgba(90,20,140,.09) !important;
}

.btn.secondary {
  background: rgba(7,4,10,.72) !important;
  color: #dcd5e1 !important;

  border:
    1px solid rgba(113,62,151,.23) !important;

  box-shadow: none !important;
}

.btn.secondary:hover {
  background: rgba(51,0,102,.075) !important;
  border-color: rgba(185,139,230,.36) !important;
}

/* ============================================================
   INPUTS — AI CHAT STYLE
   ============================================================ */

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  background:
    rgba(6,3,9,.74) !important;

  color: #eee9f2 !important;

  border:
    1px solid rgba(113,62,151,.24) !important;

  border-radius: 14px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.012) !important;

  transition:
    border-color .22s var(--st-ease),
    box-shadow .22s var(--st-ease),
    background .22s var(--st-ease) !important;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
  outline: none !important;

  background: rgba(8,4,12,.90) !important;

  border-color:
    rgba(185,139,230,.48) !important;

  box-shadow:
    0 0 0 3px rgba(51,0,102,.08),
    0 0 22px rgba(51,0,102,.055) !important;
}

input::placeholder,
textarea::placeholder {
  color: #6f6876 !important;
}

/* ============================================================
   PROFILE
   ============================================================ */

.user-avatar-btn {
  background: rgba(7,3,10,.92) !important;

  border:
    1px solid rgba(112,54,156,.36) !important;

  box-shadow:
    0 0 22px rgba(51,0,102,.10) !important;
}

.user-avatar-btn:hover,
.user-menu.open .user-avatar-btn {
  border-color: rgba(185,139,230,.65) !important;

  box-shadow:
    0 0 0 3px rgba(51,0,102,.12),
    0 0 24px rgba(51,0,102,.12) !important;
}

.user-menu-dropdown {
  background:
    linear-gradient(
      145deg,
      rgba(9,5,13,.98),
      rgba(4,2,7,.99)
    ) !important;

  border:
    1px solid rgba(113,62,151,.25) !important;

  box-shadow:
    0 24px 65px rgba(0,0,0,.58),
    0 0 26px rgba(51,0,102,.065) !important;
}

/* ============================================================
   GLOBAL HELP SYSTEM
   PURPLE BY DEFAULT
   ============================================================ */

.st-help {
  border-color: rgba(107,53,150,.32) !important;
  background: rgba(51,0,102,.035) !important;
  color: #b98be6 !important;
}

.st-help:hover,
.st-help:focus-visible {
  color: #dbc2f0 !important;

  border-color:
    rgba(185,139,230,.52) !important;

  background:
    rgba(51,0,102,.085) !important;

  box-shadow:
    0 0 16px rgba(51,0,102,.11) !important;
}

.st-help-tooltip {
  background:
    linear-gradient(
      145deg,
      rgba(10,5,15,.985),
      rgba(4,2,7,.99)
    ) !important;

  color: #cfc6d5 !important;

  border:
    1px solid rgba(113,62,151,.28) !important;

  box-shadow:
    0 20px 55px rgba(0,0,0,.55),
    0 0 24px rgba(51,0,102,.07) !important;
}

.st-help-tooltip strong {
  color: #f7f4fa !important;
}

/* ============================================================
   TELEGRAM HELP SYSTEM — #4169E1
   Tooltip lives directly inside body, so use body page marker.
   ============================================================ */

body[data-st-page="telegram"] .st-help {
  color: #4169E1 !important;

  border-color:
    rgba(65,105,225,.40) !important;

  background:
    rgba(65,105,225,.04) !important;
}

body[data-st-page="telegram"] .st-help:hover,
body[data-st-page="telegram"] .st-help:focus-visible {
  color: #89a5ff !important;

  border-color:
    rgba(65,105,225,.66) !important;

  background:
    rgba(65,105,225,.10) !important;

  box-shadow:
    0 0 16px rgba(65,105,225,.15) !important;
}

body[data-st-page="telegram"] .st-help-tooltip {
  background:
    linear-gradient(
      145deg,
      rgba(5,10,27,.99),
      rgba(2,5,16,.99)
    ) !important;

  border-color:
    rgba(65,105,225,.35) !important;

  color: #c6d2f5 !important;

  box-shadow:
    0 20px 55px rgba(0,0,0,.56),
    0 0 26px rgba(65,105,225,.10) !important;
}

body[data-st-page="telegram"] .st-help-tooltip strong {
  color: #edf2ff !important;
}

/* ============================================================
   TOASTS
   ============================================================ */

.toast {
  background:
    rgba(8,4,11,.96) !important;

  border:
    1px solid rgba(113,62,151,.22) !important;

  box-shadow:
    0 20px 48px rgba(0,0,0,.52) !important;
}

/* ============================================================
   RESPONSIVE NAV
   ============================================================ */

@media (max-width: 1100px) {
  .tabs-island,
  .tabs-island.open {
    background:
      rgba(5,3,8,.97) !important;

    border:
      1px solid rgba(105,50,150,.24) !important;

    border-radius: 22px !important;

    box-shadow:
      0 24px 60px rgba(0,0,0,.48),
      0 0 26px rgba(51,0,102,.055) !important;
  }

  .tabs {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .tab {
    min-height: 48px !important;
    border-radius: 14px !important;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

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