:root {
  color-scheme: light;
  --sm-bg: #f5f5f2;
  --sm-bg-elevated: #fbfbf8;
  --sm-surface: rgba(255, 255, 252, .86);
  --sm-surface-solid: #fffffc;
  --sm-surface-muted: #eeeeea;
  --sm-ink: #111312;
  --sm-ink-soft: #323836;
  --sm-muted: #6d7470;
  --sm-line: rgba(17, 19, 18, .1);
  --sm-line-strong: rgba(17, 19, 18, .17);
  --sm-accent: #1f6feb;
  --sm-accent-2: #00a676;
  --sm-warm: #b58b4a;
  --sm-danger: #b33a30;
  --sm-radius: 8px;
  --sm-shadow: 0 18px 50px rgba(17, 19, 18, .08);
  --sm-shadow-soft: 0 8px 24px rgba(17, 19, 18, .055);
  --sm-blur: blur(22px) saturate(1.18);
  --sm-ease: cubic-bezier(.22, 1, .36, 1);
}

html {
  scroll-behavior: smooth;
  background: var(--sm-bg);
}

body {
  color: var(--sm-ink) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 252, .9) 0%, rgba(245, 245, 242, .98) 42%, #f2f2ee 100%) !important;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(17, 19, 18, .035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(17, 19, 18, .026) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .6), transparent 72%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 8%, rgba(31, 111, 235, .13), transparent 28rem),
    radial-gradient(circle at 86% 18%, rgba(181, 139, 74, .11), transparent 26rem),
    radial-gradient(circle at 72% 92%, rgba(0, 166, 118, .09), transparent 30rem);
  opacity: .9;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(17, 19, 18, .26) transparent;
}

*::selection {
  color: #fff;
  background: var(--sm-ink);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(17, 19, 18, .24);
  background-clip: padding-box;
}

a,
button,
input,
textarea,
select {
  letter-spacing: 0 !important;
  font-family: inherit !important;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4,
.hero-title,
.campaign-intro h1,
.brand strong,
.logo,
.task-title,
.section-title {
  color: var(--sm-ink) !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
}

p,
small,
label,
.muted,
.lead,
.page-subtitle,
.hero-subtitle,
.campaign-intro p,
.campaign-footer-cta p,
.module-card-main > p,
.task-meta,
.meta {
  color: var(--sm-muted) !important;
}

.bg-orbs,
.orb,
.parallax-shapes,
.shape,
#ambientCanvas,
.cursor,
.cursor-dot {
  display: none !important;
}

#art-canvas {
  opacity: .12 !important;
  filter: grayscale(1) contrast(.86);
  mix-blend-mode: multiply;
}

nav,
.campaign-header,
.topbar,
.sidebar,
.admin-header,
.page-header,
.header,
.nav-content {
  border-color: var(--sm-line) !important;
  background: rgba(255, 255, 252, .78) !important;
  backdrop-filter: var(--sm-blur);
  -webkit-backdrop-filter: var(--sm-blur);
  box-shadow: none !important;
}

nav,
.campaign-header {
  border-bottom: 1px solid var(--sm-line) !important;
}

.sidebar {
  border-right: 1px solid var(--sm-line) !important;
}

.logo,
.campaign-brand,
.brand {
  color: var(--sm-ink) !important;
}

.brand-mark,
.campaign-mark,
.mark,
.module-icon,
.nav-icon,
.feature-icon,
.service-icon,
.stat-icon {
  border: 1px solid rgba(255, 255, 255, .54) !important;
  border-radius: var(--sm-radius) !important;
  color: #fff !important;
  background:
    linear-gradient(145deg, #232725 0%, #111312 58%, #303836 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 24px rgba(17, 19, 18, .14) !important;
}

.nav-item,
.nav-link,
.header-back,
.campaign-button,
.nav-cta,
.btn-primary,
.btn-secondary,
.button,
.soft-btn,
.dark-btn,
.action-btn,
.submit-btn,
.submit-button,
button[type="submit"],
button:not(.tab):not(.promo-dots button) {
  min-height: 40px;
  border-radius: var(--sm-radius) !important;
  border: 1px solid var(--sm-line) !important;
  transition:
    transform .22s var(--sm-ease),
    background .22s var(--sm-ease),
    border-color .22s var(--sm-ease),
    box-shadow .22s var(--sm-ease),
    color .22s var(--sm-ease) !important;
}

.nav-link {
  min-height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.nav-item,
.nav-link {
  color: var(--sm-muted) !important;
}

.nav-item:hover,
.nav-item.active,
.nav-link:hover {
  color: var(--sm-ink) !important;
  background: transparent !important;
  border-color: transparent !important;
  transform: translateY(-1px);
}

.nav-cta,
.campaign-button.primary,
.btn-primary,
.dark-btn,
.action-btn.primary,
.submit-btn,
.submit-button,
button[type="submit"] {
  color: #fff !important;
  border-color: rgba(17, 19, 18, .92) !important;
  background: linear-gradient(180deg, #242827 0%, #111312 100%) !important;
  box-shadow: 0 14px 34px rgba(17, 19, 18, .18), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

.btn-secondary,
.button,
.soft-btn,
.header-back,
.campaign-button:not(.primary),
.action-btn:not(.primary) {
  color: var(--sm-ink) !important;
  background: rgba(255, 255, 252, .72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

.nav-cta:hover,
.campaign-button.primary:hover,
.btn-primary:hover,
.dark-btn:hover,
.action-btn.primary:hover,
.submit-btn:hover,
.submit-button:hover,
button[type="submit"]:hover,
.btn-secondary:hover,
.button:hover,
.soft-btn:hover,
.header-back:hover,
.campaign-button:not(.primary):hover,
.action-btn:not(.primary):hover {
  border-color: rgba(17, 19, 18, .24) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(17, 19, 18, .12), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
  filter: none !important;
}

.panel,
.card,
.task-card,
.module-card,
.client-module-card,
.invite-card,
.skill-request-card,
.auth-card,
.metric,
.stat-card,
.service-card,
.feature-card,
.team-card,
.process-card,
.preview-card,
.demo-card,
.workspace-item,
.account-card,
.account-panel,
.hero-main,
.modules-page-card,
.modules-hero,
.module-roadmap > div,
.feedback-item-admin,
.feedback-card,
.upload-box,
.image-card,
.delivery-card,
.campaign-list article,
.signup-card,
.trial-card,
.copywriter-card {
  border: 1px solid var(--sm-line) !important;
  border-radius: var(--sm-radius) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 252, .9), rgba(250, 250, 246, .76)) !important;
  box-shadow: var(--sm-shadow-soft) !important;
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.glass-card,
.mini-card,
.tab-btn,
.platform-chip,
.compact-section,
.prompt-block,
[class*="bg-white"],
[class*="bg-stone-50"] {
  border-color: var(--sm-line) !important;
  border-radius: var(--sm-radius) !important;
  background-color: rgba(255, 255, 252, .82) !important;
  box-shadow: var(--sm-shadow-soft) !important;
}

.gradient-text,
[class*="text-primary"],
[class*="text-accent"] {
  color: var(--sm-accent) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

[class*="from-primary"],
[class*="to-accent"],
[class*="bg-primary"],
[class*="bg-accent"],
.animated-border,
.slider-track::-webkit-slider-thumb {
  background-image: linear-gradient(135deg, #232725, #111312) !important;
  background-color: #111312 !important;
}

.slider-track {
  background:
    linear-gradient(to right, var(--sm-ink) 0%, var(--sm-ink) var(--progress, 0%), rgba(17, 19, 18, .11) var(--progress, 0%), rgba(17, 19, 18, .11) 100%) !important;
}

.tab-btn:hover,
.tab-btn.active,
.mini-card:hover,
.mini-card.selected,
.compact-section.active,
.flow-label:hover,
.flow-label.active {
  color: var(--sm-accent) !important;
  border-color: rgba(31, 111, 235, .24) !important;
  background: rgba(31, 111, 235, .075) !important;
}

.tab-btn.active::after {
  background: linear-gradient(90deg, var(--sm-accent), var(--sm-accent-2)) !important;
}

.client-module-card.module-featured,
.client-module-card.module-featured > strong,
.client-module-card.module-featured > p,
.client-module-card.module-featured .module-card-main > strong,
.client-module-card.module-featured .module-card-main > p,
.client-module-card.module-featured .module-card-main > small,
.client-module-card.module-featured .module-card-cue {
  color: var(--sm-ink) !important;
}

.client-module-card.module-featured > p,
.client-module-card.module-featured .module-card-main > p,
.client-module-card.module-featured .module-card-main > small {
  color: var(--sm-muted) !important;
}

.client-module-card.module-featured .module-card-main > span {
  border-color: rgba(31, 111, 235, .22) !important;
  background: rgba(31, 111, 235, .08) !important;
  color: var(--sm-accent) !important;
}

.client-module-card .module-card-main > span,
.client-module-card.module-featured .module-card-main > span {
  border-color: rgba(31, 111, 235, .32) !important;
  background: linear-gradient(180deg, rgba(31, 111, 235, .12), rgba(31, 111, 235, .07)) !important;
  color: var(--sm-accent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76) !important;
}

.client-module-card.module-featured .module-card-cue {
  border-top-color: var(--sm-line) !important;
}

.sidebar .nav-icon,
.nav .nav-icon {
  border-color: rgba(17, 19, 18, .14) !important;
  background: linear-gradient(145deg, #202523, #101312) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  filter: none !important;
}

.sidebar .nav-item,
.nav .nav-item {
  box-shadow: none !important;
}

.sidebar .nav-item:hover,
.sidebar .nav-item.active,
.nav .nav-item:hover,
.nav .nav-item.active {
  border-color: rgba(17, 19, 18, .12) !important;
  background: rgba(255, 255, 252, .74) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76) !important;
}

.panel:hover,
.card:hover,
.task-card:hover,
.module-card:hover,
.client-module-card:hover,
.invite-card:hover,
.skill-request-card:hover,
.service-card:hover,
.feature-card:hover,
.team-card:hover,
.process-card:hover,
.preview-card:hover,
.demo-card:hover,
.workspace-item:hover,
.image-card:hover {
  border-color: rgba(17, 19, 18, .18) !important;
  box-shadow: var(--sm-shadow) !important;
  transform: translateY(-2px);
}

input,
textarea,
select,
.input,
.quota-input {
  color: var(--sm-ink) !important;
  border: 1px solid var(--sm-line) !important;
  border-radius: var(--sm-radius) !important;
  background: rgba(255, 255, 252, .86) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .64) !important;
  transition: border-color .2s var(--sm-ease), box-shadow .2s var(--sm-ease), background .2s var(--sm-ease) !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: rgba(31, 111, 235, .58) !important;
  box-shadow: 0 0 0 4px rgba(31, 111, 235, .12), inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

.hero,
.campaign-intro,
.page,
.main,
.content,
.admin-main,
.campaign-main {
  position: relative;
}

.hero,
.campaign-hero,
.modules-hero {
  background:
    linear-gradient(180deg, rgba(255, 255, 252, .95) 0%, rgba(245, 245, 242, .9) 100%) !important;
}

.hero::before,
.campaign-intro::before,
.auth-card::before,
.topbar::before {
  content: "";
  position: absolute;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
  opacity: .58;
}

.hero::before,
.campaign-intro::before {
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
}

.status-pill,
.select-pill,
.plan-chip,
.agent-chip,
.tag,
.badge,
.hero-eyebrow,
.eyebrow,
.card-kicker,
.training-date {
  border-radius: 999px !important;
  border: 1px solid var(--sm-line) !important;
  color: var(--sm-ink-soft) !important;
  background: rgba(255, 255, 252, .74) !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
}

.hero-eyebrow {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  gap: 8px !important;
  margin-bottom: 24px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 252, .72) !important;
}

.hero-eyebrow::before {
  width: 18px !important;
}

.status-completed,
.status-active,
.plan-chip.formal,
.agent-chip.connected {
  color: #087455 !important;
  border-color: rgba(0, 166, 118, .24) !important;
  background: rgba(0, 166, 118, .09) !important;
}

.status-pending,
.select-pill {
  color: #8a651f !important;
  border-color: rgba(181, 139, 74, .28) !important;
  background: rgba(181, 139, 74, .1) !important;
}

.status-rejected,
.status-error {
  color: var(--sm-danger) !important;
  border-color: rgba(179, 58, 48, .24) !important;
  background: rgba(179, 58, 48, .08) !important;
}

.progress-track,
.quota-bar {
  overflow: hidden;
  border-radius: 999px !important;
  background: rgba(17, 19, 18, .08) !important;
}

.progress-fill,
.quota-fill {
  background: linear-gradient(90deg, var(--sm-accent), var(--sm-accent-2)) !important;
}

.tabs,
.tab-group {
  border: 1px solid var(--sm-line) !important;
  border-radius: var(--sm-radius) !important;
  background: rgba(255, 255, 252, .7) !important;
  padding: 4px !important;
}

.tab {
  border-radius: 6px !important;
  color: var(--sm-muted) !important;
  background: transparent !important;
}

.tab.active,
.tab:hover {
  color: var(--sm-ink) !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(17, 19, 18, .08) !important;
}

img,
video {
  border-radius: var(--sm-radius);
}

.campaign-hero img,
.hero-image img,
.preview-image img {
  box-shadow: none !important;
}

.empty-state,
.toast,
.modal,
.drawer,
.detail-panel {
  border: 1px solid var(--sm-line) !important;
  border-radius: var(--sm-radius) !important;
  background: rgba(255, 255, 252, .92) !important;
  box-shadow: var(--sm-shadow) !important;
  backdrop-filter: var(--sm-blur);
  -webkit-backdrop-filter: var(--sm-blur);
}

.campaign-main,
.page,
.app-main,
.main,
.admin-main {
  animation: smPageIn .52s var(--sm-ease) both;
}

.panel,
.card,
.task-card,
.module-card,
.client-module-card,
.service-card,
.feature-card,
.team-card,
.process-card,
.preview-card,
.demo-card,
.campaign-list article {
  animation: smLiftIn .6s var(--sm-ease) both;
}

.panel:nth-of-type(2n),
.card:nth-of-type(2n),
.task-card:nth-of-type(2n),
.module-card:nth-of-type(2n),
.client-module-card:nth-of-type(2n),
.service-card:nth-of-type(2n),
.feature-card:nth-of-type(2n),
.campaign-list article:nth-of-type(2n) {
  animation-delay: .04s;
}

.panel:nth-of-type(3n),
.card:nth-of-type(3n),
.task-card:nth-of-type(3n),
.module-card:nth-of-type(3n),
.client-module-card:nth-of-type(3n),
.service-card:nth-of-type(3n),
.feature-card:nth-of-type(3n),
.campaign-list article:nth-of-type(3n) {
  animation-delay: .08s;
}

@keyframes smPageIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes smLiftIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@media (max-width: 900px) {
  body::before {
    background-size: 44px 44px;
  }

  .app-shell {
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    position: sticky !important;
    top: 0;
    z-index: 20;
    border-right: 0 !important;
    border-bottom: 1px solid var(--sm-line) !important;
  }

  .nav,
  .nav-links,
  .header-actions,
  .campaign-actions {
    gap: 8px !important;
  }

  [class*="max-w-[1400px]"] {
    max-width: 100% !important;
  }

  [class*="w-[580px]"],
  [class*="w-[520px]"],
  [class*="w-[480px]"],
  [class*="w-[360px]"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  [class*="flex gap-5"],
  [class*="flex gap-4"] {
    flex-direction: column !important;
  }

  [class*="grid-cols-4"],
  [class*="grid-cols-3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [class*="fixed right-0"] {
    left: 0 !important;
  }
}