:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-soft: #fafaff;
  --surface-hover: #f2f0ff;
  --ink: #0b0f2a;
  --ink-soft: #525970;
  --ink-muted: #858ba0;
  --border: #e5e7f0;
  --border-strong: #d8dbea;
  --primary: #5b3dff;
  --primary-strong: #4726e8;
  --primary-soft: #f0edff;
  --violet: #8a57e8;
  --violet-soft: #f3edff;
  --blue: #356df3;
  --blue-soft: #eaf0ff;
  --sidebar: #080b1f;
  --sidebar-soft: #111631;
  --usynai-cyan: #00d4ff;
  --usynai-lavender: #b9a7ff;
  --shadow-sm: 0 1px 2px rgba(11, 15, 42, .025), 0 12px 32px rgba(20, 25, 67, .055);
  --shadow-md: 0 24px 70px rgba(20, 25, 67, .12);
}

html[data-brand="usynai"] {
  background: var(--bg);
}

body.usynai-brand {
  background:
    radial-gradient(circle at 82% -12%, rgba(91, 61, 255, .075), transparent 33rem),
    radial-gradient(circle at 16% 105%, rgba(0, 212, 255, .045), transparent 28rem),
    var(--bg);
}

body.usynai-brand button:focus-visible,
body.usynai-brand input:focus-visible,
body.usynai-brand select:focus-visible,
body.usynai-brand textarea:focus-visible,
body.usynai-brand a:focus-visible {
  outline: 3px solid rgba(91, 61, 255, .22);
  outline-offset: 3px;
}

body.usynai-brand .app-shell {
  grid-template-columns: 282px minmax(0, 1fr);
}

body.usynai-brand .sidebar {
  padding: 24px 18px 20px;
  gap: 22px;
  background:
    radial-gradient(circle at 18% -3%, rgba(91, 61, 255, .32), transparent 31%),
    radial-gradient(circle at 95% 96%, rgba(0, 212, 255, .12), transparent 28%),
    linear-gradient(180deg, #0b0f2a 0%, #070918 100%);
  border-right-color: rgba(185, 167, 255, .1);
  box-shadow: 18px 0 60px rgba(11, 15, 42, .08);
}

body.usynai-brand .sidebar::after {
  width: 310px;
  height: 310px;
  left: -205px;
  bottom: -160px;
  background: rgba(91, 61, 255, .2);
  filter: blur(26px);
}

body.usynai-brand .brand {
  min-height: 52px;
  padding: 2px 7px;
  gap: 13px;
}

body.usynai-brand .brand-mark,
body.usynai-brand .auth-brand-mark,
body.usynai-brand .faq-brand-mark {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  color: transparent;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035)),
    #111631;
  box-shadow:
    0 14px 34px rgba(49, 34, 170, .34),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

body.usynai-brand .brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 15px;
}

body.usynai-brand .brand-mark img,
body.usynai-brand .auth-brand-mark img,
body.usynai-brand .faq-brand-mark img {
  width: 100%;
  height: 100%;
  padding: 6px;
  object-fit: contain;
}

body.usynai-brand .brand strong {
  color: #fff;
  font-size: 18px;
  font-weight: 820;
  letter-spacing: -.035em;
}

body.usynai-brand .brand small {
  color: #969db8;
  font-size: 9px;
  letter-spacing: .15em;
}

body.usynai-brand .workspace-card {
  border-color: rgba(185, 167, 255, .13);
  background: linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 16px 28px rgba(0, 0, 0, .09);
}

body.usynai-brand .workspace-card:hover {
  border-color: rgba(185, 167, 255, .24);
  background: linear-gradient(135deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .045));
}

body.usynai-brand .workspace-logo {
  background: linear-gradient(145deg, #5b3dff, #8759ff 58%, #00bde7);
  box-shadow: 0 8px 20px rgba(91, 61, 255, .24);
}

body.usynai-brand .nav-list {
  gap: 6px;
}

body.usynai-brand .nav-item {
  min-height: 46px;
  border-radius: 13px;
  color: #969db5;
}

body.usynai-brand .nav-item:not(:disabled):hover {
  color: #fff;
  background: rgba(255, 255, 255, .065);
  transform: translateX(3px);
}

body.usynai-brand .nav-item.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(91, 61, 255, .33), rgba(91, 61, 255, .08));
  box-shadow: inset 2px 0 0 #8e7cff, 0 10px 24px rgba(30, 23, 91, .16);
}

body.usynai-brand .nav-item.active > span:first-child {
  color: #c9beff;
}

body.usynai-brand .sidebar-help-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .055);
}

body.usynai-brand .app-main {
  max-width: 1680px;
  padding: 36px 44px 64px;
}

body.usynai-brand .topbar {
  min-height: 80px;
  align-items: center;
}

body.usynai-brand .topbar h1 {
  color: #0b0f2a;
  font-weight: 840;
  letter-spacing: -.052em;
}

body.usynai-brand .eyebrow,
body.usynai-brand .panel-kicker,
body.usynai-brand .profile-kicker {
  color: #696f88;
  letter-spacing: .13em;
}

body.usynai-brand .connection-badge {
  min-height: 38px;
  padding-inline: 15px;
  border-color: rgba(216, 219, 234, .88);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 10px 28px rgba(20, 25, 67, .06);
}

body.usynai-brand .connect-hero {
  min-height: 570px;
  background:
    radial-gradient(circle at 88% 6%, rgba(0, 212, 255, .15), transparent 31%),
    radial-gradient(circle at 12% 100%, rgba(91, 61, 255, .2), transparent 38%),
    linear-gradient(145deg, #0b0f2a 0%, #11163a 55%, #24205c 100%);
  border: 1px solid rgba(185, 167, 255, .12);
  box-shadow: 0 30px 90px rgba(15, 19, 58, .19);
}

body.usynai-brand .connect-hero::before {
  opacity: .08;
  background-size: 44px 44px;
}

body.usynai-brand .hero-kicker {
  color: #d4ccff;
  border-color: rgba(185, 167, 255, .24);
  background: rgba(91, 61, 255, .12);
}

body.usynai-brand .connect-hero h2 {
  text-wrap: balance;
}

body.usynai-brand .connect-hero-content > p {
  color: #b4bad0;
}

body.usynai-brand .metric-card,
body.usynai-brand .panel,
body.usynai-brand .connect-form-card,
body.usynai-brand .products-empty,
body.usynai-brand .products-loading,
body.usynai-brand .products-register,
body.usynai-brand .profitability-register {
  border-color: rgba(225, 228, 239, .92);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-sm);
}

body.usynai-brand .metric-card,
body.usynai-brand .panel {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body.usynai-brand .metric-card:hover,
body.usynai-brand .panel:hover {
  border-color: rgba(185, 167, 255, .46);
  box-shadow: 0 18px 48px rgba(20, 25, 67, .085);
}

body.usynai-brand .metric-primary {
  color: #fff;
  border-color: transparent;
  background:
    radial-gradient(circle at 94% 2%, rgba(0, 212, 255, .28), transparent 44%),
    linear-gradient(135deg, #4d31e7 0%, #6544ff 50%, #7a55ff 100%);
  box-shadow: 0 20px 46px rgba(91, 61, 255, .23);
}

body.usynai-brand .primary-button,
body.usynai-brand .auth-submit,
body.usynai-brand .faq-primary-button {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #6548ff 0%, #5b3dff 54%, #4726e8 100%);
  box-shadow: 0 15px 34px rgba(91, 61, 255, .27);
}

body.usynai-brand .primary-button:hover,
body.usynai-brand .auth-submit:hover,
body.usynai-brand .faq-primary-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 42px rgba(91, 61, 255, .34);
}

body.usynai-brand .text-button,
body.usynai-brand .auth-link,
body.usynai-brand a {
  accent-color: var(--primary);
}

body.usynai-brand .auth-gate {
  color: var(--ink);
  background: #f8f8fc;
}

body.usynai-brand .auth-visual {
  background:
    radial-gradient(circle at 12% 0%, rgba(91, 61, 255, .42), transparent 31%),
    radial-gradient(circle at 92% 88%, rgba(0, 212, 255, .2), transparent 31%),
    linear-gradient(145deg, #080b1f 0%, #0e1230 53%, #211b55 100%);
}

body.usynai-brand .auth-brand-mark {
  width: 50px;
  height: 50px;
  border-radius: 16px;
}

body.usynai-brand .auth-brand strong {
  color: #fff;
  font-size: 20px;
}

body.usynai-brand .auth-brand small {
  color: #9da5bf;
  letter-spacing: .15em;
}

body.usynai-brand .auth-hero span {
  color: #d9d2ff;
  border-color: rgba(185, 167, 255, .22);
  background: rgba(91, 61, 255, .1);
}

body.usynai-brand .auth-card {
  border-color: rgba(221, 224, 237, .95);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 32px 90px rgba(20, 25, 67, .14);
}

body.usynai-brand .auth-card-head p {
  color: var(--primary);
}

body.usynai-brand .auth-tabs {
  background: #f0eff8;
}

body.usynai-brand .auth-tabs button.active {
  color: #17132f;
  box-shadow: 0 7px 18px rgba(20, 25, 67, .09);
}

body.usynai-brand .auth-field input:focus {
  border-color: #7258ff;
  box-shadow: 0 0 0 4px rgba(91, 61, 255, .12);
}

body.usynai-brand .auth-user-avatar {
  background: linear-gradient(145deg, #6548ff, #4f61ef 62%, #00bde7);
}

body.usynai-brand .faq-header,
body.usynai-brand .faq-hero-panel,
body.usynai-brand .faq-feature-grid article,
body.usynai-brand .faq-list details {
  border-color: rgba(225, 228, 239, .95);
}

body.usynai-brand .faq-brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}

body.usynai-brand .faq-kicker {
  color: var(--primary);
}

body.usynai-brand .faq-hero {
  background:
    radial-gradient(circle at 88% 6%, rgba(0, 212, 255, .11), transparent 30%),
    radial-gradient(circle at 10% 100%, rgba(91, 61, 255, .14), transparent 35%),
    linear-gradient(145deg, #0b0f2a, #171644 70%, #24205c);
}

@media (max-width: 1100px) {
  body.usynai-brand .app-shell {
    grid-template-columns: 250px minmax(0, 1fr);
  }
  body.usynai-brand .app-main {
    padding-inline: 30px;
  }
}

@media (max-width: 800px) {
  body.usynai-brand .app-shell {
    display: block;
  }
  body.usynai-brand .app-main {
    padding: 20px 15px 42px;
  }
  body.usynai-brand .topbar {
    min-height: auto;
  }
}

@media (max-width: 560px) {
  body.usynai-brand .auth-panel {
    background:
      radial-gradient(circle at 80% 0%, rgba(91, 61, 255, .09), transparent 18rem),
      #fff;
  }
  body.usynai-brand .auth-card {
    background: transparent;
  }
}

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