@font-face {
  font-family: Manrope;
  src: url('/assets/woof-beta/fonts/manrope-cyrillic.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Manrope;
  src: url('/assets/woof-beta/fonts/manrope-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Marck Script';
  src: url('/assets/woof-beta/fonts/marck-script-cyrillic.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Marck Script';
  src: url('/assets/woof-beta/fonts/marck-script-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --woof-font-sans: Manrope, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --woof-font-hand: 'Marck Script', 'Segoe Print', cursive;
  --woof-bg: #050b14;
  --woof-panel: #0b1422;
  --woof-panel-2: #101b2c;
  --woof-line: rgba(138, 184, 225, .16);
  --woof-line-strong: rgba(69, 204, 255, .32);
  --woof-text: #f6f8ff;
  --woof-muted: #8fa3ba;
  --woof-cyan: #35d9ff;
  --woof-blue: #4f9dff;
  --woof-violet: #8258ff;
  --woof-green: #44e3a4;
  --woof-radius: 18px;
  --woof-shadow: 0 28px 80px rgba(0, 0, 0, .35);
}

body.woof-theme {
  --font-sans: var(--woof-font-sans);
  --font-body: var(--woof-font-sans);
  --font-display: var(--woof-font-sans);
  --font: var(--woof-font-sans);
  --font-hand: var(--woof-font-hand);
  --bg: var(--woof-bg);
  --surface: var(--woof-panel);
  --surface2: var(--woof-panel-2);
  --panel: var(--woof-panel);
  --panel2: var(--woof-panel-2);
  --line: var(--woof-line);
  --line2: var(--woof-line-strong);
  --text: var(--woof-text);
  --muted: var(--woof-muted);
  --accent: var(--woof-cyan);
  --cyan: var(--woof-cyan);
  --blue: var(--woof-blue);
  --violet: var(--woof-violet);
  --green: var(--woof-green);
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 76% 2%, rgba(60, 80, 200, .14), transparent 32rem),
    radial-gradient(circle at 8% 40%, rgba(0, 195, 220, .07), transparent 34rem),
    var(--woof-bg);
  color: var(--woof-text);
  font-family: var(--woof-font-sans);
  -webkit-font-smoothing: antialiased;
}

body.woof-theme,
body.woof-theme :where(h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, label, summary, small, strong, b, em) {
  font-family: var(--woof-font-sans) !important;
}

.woof-theme .eyebrow::before {
  display: none !important;
  content: none !important;
}

.woof-theme .eyebrow {
  padding-left: 0 !important;
}

body.app-surface.meridian.wolf-ui.woof-theme {
  min-height: 100vh !important;
  background:
    radial-gradient(circle at 76% 2%, rgba(60, 80, 200, .14), transparent 32rem),
    radial-gradient(circle at 8% 40%, rgba(0, 195, 220, .07), transparent 34rem),
    var(--woof-bg) !important;
  color: var(--woof-text) !important;
  font-family: var(--woof-font-sans) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

body.app-surface.meridian.wolf-ui.woof-theme.woof-landing-page {
  font-size: 16px !important;
}

body.app-surface.meridian.wolf-ui.woof-theme :where(button, input, select, textarea) {
  font-family: var(--woof-font-sans) !important;
}

.woof-theme button,
.woof-theme input,
.woof-theme select,
.woof-theme textarea {
  font: inherit;
}

.woof-theme :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--woof-cyan);
  outline-offset: 3px;
}

.woof-theme :where(h1, h2, h3, h4, strong) {
  color: var(--woof-text);
}

.woof-theme :where(p, .muted, .help) {
  color: var(--woof-muted);
}

.woof-theme .button {
  border-radius: 11px !important;
  font-weight: 760;
}

.woof-theme .button:not(.secondary):not(.button--ghost) {
  border-color: transparent !important;
  background: linear-gradient(110deg, var(--woof-cyan), #5eb7ff 55%, var(--woof-violet)) !important;
  color: #03111b !important;
  box-shadow: 0 10px 28px rgba(60, 185, 255, .2) !important;
}

.woof-theme .button.secondary,
.woof-theme .button.button--ghost {
  border: 1px solid var(--woof-line-strong) !important;
  background: rgba(25, 42, 64, .56) !important;
  color: var(--woof-text) !important;
  box-shadow: none !important;
}

.woof-theme :where(.field, input, select, textarea) {
  border-color: var(--woof-line);
  background-color: rgba(4, 12, 23, .76);
  color: var(--woof-text);
}

.woof-theme :where(.field, input, select, textarea):focus {
  border-color: var(--woof-cyan);
  box-shadow: 0 0 0 3px rgba(53, 217, 255, .12);
}

.woof-theme .wolf-sidebar {
  width: 224px;
  gap: 18px;
  padding: 25px 13px;
  overflow-y: auto;
  border-color: var(--woof-line);
  background: rgba(11, 21, 41, .96);
}

.woof-theme .wolf-app-shell {
  grid-template-columns: 224px minmax(0, 1fr);
}

.woof-theme .wolf-sidebar .wolf-brand {
  padding: 0 10px;
  font-family: var(--woof-font-sans);
  font-size: 19px;
  letter-spacing: -.05em;
}

.woof-theme .wolf-sidebar .wolf-brand img {
  width: 32px;
  height: 32px;
}

.woof-theme .wolf-side-meta {
  padding: 0 14px;
  color: #6581aa;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.woof-theme .wolf-side-nav {
  gap: 2px;
}

.woof-theme .wolf-side-nav a,
.woof-theme .wolf-side-bottom button {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  color: #aebbd0;
  font-family: var(--woof-font-sans);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
}

.woof-theme .wolf-side-nav a[aria-current="page"] {
  border-color: transparent;
  background: #17344f;
  box-shadow: inset 2px 0 var(--woof-cyan);
}

.woof-theme .wolf-side-nav i {
  width: 22px;
  color: var(--woof-cyan);
  font-size: 16px;
  text-align: center;
}

.woof-theme .wolf-side-nav b {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--woof-cyan);
  color: #071425;
  font-size: 10px;
}

.woof-theme .wolf-side-bottom {
  margin-top: auto;
  padding-top: 0;
  border-top: 0;
}

.woof-theme .wolf-topbar {
  height: 65px;
  padding: 0 34px;
  border-color: var(--woof-line);
  background: rgba(10, 20, 37, .82);
}

.woof-theme .wolf-main-column {
  grid-column: 2;
  display: flex;
  min-width: 0;
  min-height: 100vh;
  flex-direction: column;
}

.woof-theme .wolf-main-column > main {
  flex: 1;
}

.woof-theme .wolf-topbar-title span {
  color: var(--woof-muted);
  font-size: 11px;
  font-weight: 500;
}

.woof-theme .wolf-topbar-title small {
  color: var(--woof-text);
  font-size: 12px;
  font-weight: 700;
}

.woof-theme .woof-customer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 20px 32px;
  border-top: 1px solid var(--woof-line);
  color: #6c84a6;
  font-size: 11px;
}

.woof-theme .woof-customer-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.woof-theme .woof-customer-footer a {
  color: inherit;
  text-decoration: none;
}

.woof-theme .woof-customer-footer a:hover {
  color: var(--woof-text);
}

.woof-theme .woof-auth-header {
  width: min(1100px, calc(100% - 48px));
  height: 78px;
  display: flex;
  align-items: center;
  margin: 0 auto;
  padding-left: 40px;
}

.woof-theme .woof-auth-header .wolf-brand {
  font-family: var(--woof-font-sans);
}

.woof-theme.woof-auth-page > main {
  min-height: calc(100vh - 78px);
}

.woof-theme .wolf-brand b,
.woof-theme .woof-brand b {
  color: var(--woof-cyan);
}

.woof-theme .flash {
  border-color: var(--woof-line-strong);
  background: rgba(12, 27, 45, .96);
  color: var(--woof-text);
}

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

@media (max-width: 820px) {
  .woof-theme .wolf-app-shell {
    display: block;
  }

  .woof-theme .wolf-main-column {
    display: flex;
  }

  .woof-theme .woof-customer-footer {
    padding: 18px 16px 82px;
  }

  .woof-theme .wolf-mobile-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .woof-theme .woof-auth-header {
    width: min(100% - 32px, 1100px);
    height: 68px;
    padding-left: 0;
  }
}

@media (min-width: 761px) and (max-width: 820px) {
  .woof-theme .wolf-app-shell {
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
  }

  .woof-theme .wolf-sidebar {
    display: flex;
  }

  .woof-theme .wolf-main-column {
    grid-column: 2;
  }

  .woof-theme .wolf-topbar-title small {
    display: block;
  }

  .woof-theme .wolf-user-chip b,
  .woof-theme .wolf-user-chip i {
    display: inline;
  }

  .woof-theme .wolf-user-chip > span {
    width: 38px;
    height: 38px;
  }

  .woof-theme .wolf-mobile-nav {
    display: none;
  }

  .woof-theme .woof-customer-footer {
    padding: 20px 32px;
  }
}