/*
 * UsynAI Signature System
 * Final brand layer for the authenticated product and public utility pages.
 */

html[data-brand="usynai"] {
  --bg: #f3f0e8;
  --surface: #fffef9;
  --surface-soft: #f8f5ee;
  --surface-hover: #e7e2d8;
  --ink: #171a18;
  --ink-soft: #555c57;
  --ink-muted: #7d837e;
  --border: #d8d2c7;
  --border-strong: #bcb5a9;
  --primary: #2f55bf;
  --primary-strong: #23439d;
  --primary-soft: #e7edff;
  --green: #168365;
  --green-soft: #dff4e9;
  --red: #c84f3c;
  --red-soft: #ffebe6;
  --amber: #9c6819;
  --amber-soft: #fff0cf;
  --blue: #3368d8;
  --blue-soft: #e8efff;
  --violet: #2f55bf;
  --violet-soft: #e7edff;
  --sidebar: #ebe6dc;
  --sidebar-soft: #e2ddd2;
  --usynai-cyan: #bfe7d0;
  --usynai-lavender: #d7def7;
  --shadow-sm:
    0 1px 0 rgba(23, 26, 24, 0.035), 0 8px 24px rgba(23, 26, 24, 0.035);
  --shadow-md: 0 24px 64px rgba(23, 26, 24, 0.1);
  color-scheme: light;
  background: var(--bg);
}

body.usynai-brand {
  color: var(--ink);
  background: var(--bg);
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body.usynai-brand::selection {
  color: #fff;
  background: var(--primary);
}
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(47, 85, 191, 0.24);
  outline-offset: 3px;
}

/* Product shell */
body.usynai-brand .app-shell {
  grid-template-columns: 248px minmax(0, 1fr);
}
body.usynai-brand .sidebar {
  padding: 22px 14px 18px;
  gap: 18px;
  color: var(--ink);
  border-right: 1px solid var(--border);
  background: #ebe6dc;
  box-shadow: none;
}
body.usynai-brand .sidebar::before,
body.usynai-brand .sidebar::after {
  display: none;
}

body.usynai-brand .brand {
  min-height: 48px;
  padding: 0 6px;
  gap: 12px;
}
body.usynai-brand .brand-mark,
body.usynai-brand .auth-brand-mark,
body.usynai-brand .faq-brand-mark {
  overflow: hidden;
  color: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: #fffef9;
  box-shadow: 0 1px 0 rgba(23, 26, 24, 0.06);
}
body.usynai-brand .brand-mark {
  width: 42px;
  height: 42px;
}
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: var(--ink);
  font-size: 17px;
  font-weight: 760;
  letter-spacing: -0.025em;
}
body.usynai-brand .brand small {
  color: #6f756f;
  font-size: 9px;
  letter-spacing: 0.08em;
}

body.usynai-brand .workspace-card {
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255, 254, 249, 0.58);
  box-shadow: none;
}
body.usynai-brand .workspace-card:hover {
  border-color: var(--border-strong);
  background: #fffef9;
}
body.usynai-brand .workspace-card strong {
  color: var(--ink);
  font-weight: 700;
}
body.usynai-brand .workspace-card small {
  color: #6f756f;
}
body.usynai-brand .workspace-logo,
body.usynai-brand .store-logo {
  color: #fff;
  background: #ef5c4b;
  box-shadow: none;
}
body.usynai-brand .nav-list {
  gap: 4px;
}
body.usynai-brand .nav-item {
  min-height: 42px;
  padding-inline: 10px;
  border-radius: 8px;
  color: #5e655f;
  font-size: 12px;
}
body.usynai-brand .nav-item:not(:disabled):hover {
  color: var(--ink);
  background: #e1dcd1;
  transform: none;
}
body.usynai-brand .nav-item.active {
  color: #fff;
  background: var(--ink);
  box-shadow: none;
}
body.usynai-brand .nav-item.active > span:first-child {
  color: #bfe7d0;
}
body.usynai-brand .nav-item em {
  color: #7e847f;
  background: transparent;
}
body.usynai-brand .nav-item.active em {
  color: #d9ded9;
}
body.usynai-brand .sidebar-footer {
  border-top-color: var(--border);
}
body.usynai-brand .sidebar-help-link {
  color: #666d67;
}
body.usynai-brand .sidebar-help-link:hover {
  color: var(--ink);
  background: #e1dcd1;
}
body.usynai-brand .system-status :is(strong, small) {
  color: #656c66;
}
body.usynai-brand .system-status > span {
  background: #2b936f;
  box-shadow: 0 0 0 3px rgba(43, 147, 111, 0.1);
}

body.usynai-brand .app-main {
  max-width: 1560px;
  padding: 28px 34px 60px;
  background: var(--bg);
}
body.usynai-brand .topbar {
  min-height: 72px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
body.usynai-brand .topbar h1 {
  color: var(--ink);
  font-weight: 760;
  letter-spacing: -0.04em;
}
body.usynai-brand .eyebrow,
body.usynai-brand .panel-kicker,
body.usynai-brand .profile-kicker {
  color: #747a74;
  letter-spacing: 0.13em;
}
body.usynai-brand .connection-badge {
  min-height: 34px;
  padding-inline: 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 254, 249, 0.72);
  box-shadow: none;
}

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,
body.usynai-brand .settings-card,
body.usynai-brand .unified-catalog-panel,
body.usynai-brand .channel-strategy-panel {
  border-color: var(--border);
  border-radius: 12px;
  background: #fffef9;
  box-shadow: var(--shadow-sm);
}
body.usynai-brand .metric-card,
body.usynai-brand .panel {
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
body.usynai-brand .metric-card:hover,
body.usynai-brand .panel:hover {
  border-color: var(--border-strong);
  box-shadow: 0 12px 30px rgba(20, 24, 22, 0.055);
  transform: none;
}
body.usynai-brand .metric-primary {
  color: var(--ink);
  border-color: var(--border);
  background: #fffef9;
  box-shadow: var(--shadow-sm);
}
body.usynai-brand .metric-primary::before,
body.usynai-brand .metric-primary::after {
  display: none;
}

body.usynai-brand .connect-hero {
  min-height: 560px;
  color: #fff;
  border: 1px solid #141816;
  border-radius: 24px;
  background: #141816;
  box-shadow: 0 18px 48px rgba(20, 24, 22, 0.13);
}
body.usynai-brand .connect-hero::before {
  opacity: 0.13;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 48px 48px;
}
body.usynai-brand .hero-kicker {
  color: #c8f1dc;
  border-color: #536059;
  background: #202724;
}
body.usynai-brand .connect-hero-content > p {
  color: #aab2ac;
}
body.usynai-brand .feature-list > div {
  border-color: #343b37;
  background: #1d231f;
}
body.usynai-brand .feature-list > div > span {
  color: #141816;
  background: #c8f1dc;
}
body.usynai-brand .connect-form-card {
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

body.usynai-brand .primary-button,
body.usynai-brand .settings-save,
body.usynai-brand .auth-submit,
body.usynai-brand .faq-primary-button {
  color: #fff;
  border: 1px solid #141816;
  border-radius: 9px;
  background: #141816;
  box-shadow: none;
}
body.usynai-brand .primary-button:hover,
body.usynai-brand .settings-save:hover,
body.usynai-brand .auth-submit:hover {
  background: #2f55bf;
  box-shadow: none;
  transform: translateY(-1px);
}
body.usynai-brand .secondary-button,
body.usynai-brand .text-button {
  border-color: var(--border);
  background: #fffefa;
}
body.usynai-brand .segmented-control {
  background: #ece8de;
}
body.usynai-brand .segmented-control button.active {
  color: #fff;
  background: #141816;
  box-shadow: none;
}
body.usynai-brand input,
body.usynai-brand select,
body.usynai-brand textarea {
  border-color: var(--border);
  border-radius: 11px;
  background: #fbf9f4;
}
body.usynai-brand input:focus,
body.usynai-brand select:focus,
body.usynai-brand textarea:focus {
  border-color: #2f55bf;
  box-shadow: 0 0 0 4px rgba(47, 85, 191, 0.1);
}
body.usynai-brand .sales-chart .bar,
body.usynai-brand .overview-chart-bar {
  background: #2f55bf;
}
body.usynai-brand .status-donut {
  background: conic-gradient(#2f55bf var(--progress, 0%), #e6e2d9 0);
}

/* Language control and general injected utility pages. */
body.usynai-brand .usynai-language-switcher {
  border-color: var(--border);
  background: #ece8de;
}
body.usynai-brand .usynai-language-switcher button {
  color: #6d736d;
}
body.usynai-brand .usynai-language-switcher button[aria-pressed="true"] {
  color: #fff;
  background: #141816;
  box-shadow: none;
}
body.usynai-brand .faq-shell,
body.usynai-brand .legal-shell {
  background: #f2efe7;
}
body.usynai-brand .faq-card,
body.usynai-brand .legal-card {
  border-color: var(--border);
  background: #fffefa;
  box-shadow: var(--shadow-sm);
}

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

@media (max-width: 760px) {
  body.usynai-brand .app-main {
    padding: 22px 16px 96px;
  }
  body.usynai-brand .mobile-topbar {
    border-bottom-color: var(--border);
    background: #f2efe7;
  }
  body.usynai-brand .mobile-bottom-nav {
    border-top-color: var(--border);
    background: rgba(255, 254, 250, 0.96);
    box-shadow: 0 -12px 30px rgba(20, 24, 22, 0.08);
  }
  body.usynai-brand .mobile-bottom-nav button.active {
    color: #23439d;
  }
}

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