@font-face {
  font-family: "Inter Variable";
  src: url("/assets/inter-clean.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

html[data-style="clean"] {
  --cc-clean-accent: #7c3aed;
  --cc-clean-accent-strong: #6d28d9;
  --cc-clean-accent-soft: rgba(124, 58, 237, .11);
  --cc-editor-accent: var(--cc-clean-accent);
}

html[data-style="clean"][data-theme="light"] {
  color-scheme: light;
  --cc-clean-bg: #f7f7f8;
  --cc-clean-panel: #ffffff;
  --cc-clean-panel-2: #f6f6f7;
  --cc-clean-panel-3: #ececef;
  --cc-clean-text: #171717;
  --cc-clean-muted: #6b6b6f;
  --cc-clean-line: #dedee3;
  --cc-clean-line-strong: #cfcfd5;
  --cc-clean-shadow: 0 10px 30px rgba(15, 15, 20, .07);
  --cc-clean-accent-text: #6d28d9;
}

html[data-style="clean"][data-theme="dark"] {
  color-scheme: dark;
  --cc-clean-bg: #0d0d0d;
  --cc-clean-panel: #171717;
  --cc-clean-panel-2: #212121;
  --cc-clean-panel-3: #2f2f2f;
  --cc-clean-text: #f2f2f2;
  --cc-clean-muted: #a6a6a6;
  --cc-clean-line: #3a3a3a;
  --cc-clean-line-strong: #4a4a4a;
  --cc-clean-shadow: 0 14px 36px rgba(0, 0, 0, .24);
  --cc-clean-accent-text: #b69aff;
}

html[data-style="clean"][data-theme] body,
html[data-style="clean"][data-theme] body * {
  font-family: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

html[data-style="clean"] body {
  font-optical-sizing: auto;
  font-weight: 400;
}

html[data-style="clean"] :is(h1, h2, h3, h4, strong, button, .nav-label, .eyebrow) {
  letter-spacing: -.012em;
}

html[data-style="clean"] body,
html[data-style="clean"] :is(.sales-app, .legal-app, .hr-app, .it-app, .app-shell) {
  --bg: var(--cc-clean-bg);
  --page: var(--cc-clean-bg);
  --app-bg: var(--cc-clean-bg);
  --surface: var(--cc-clean-panel);
  --surface-1: var(--cc-clean-panel);
  --surface-2: var(--cc-clean-panel-2);
  --surface-3: var(--cc-clean-panel-3);
  --panel: var(--cc-clean-panel);
  --panel-2: var(--cc-clean-panel-2);
  --panel-3: var(--cc-clean-panel-3);
  --bg-soft: var(--cc-clean-panel-2);
  --panel-soft: var(--cc-clean-panel-2);
  --panel-strong: var(--cc-clean-panel);
  --ink: var(--cc-clean-text);
  --text: var(--cc-clean-text);
  --muted: var(--cc-clean-muted);
  --muted-2: var(--cc-clean-muted);
  --line: var(--cc-clean-line);
  --border: var(--cc-clean-line);
  --border-strong: var(--cc-clean-line-strong);
  --line-strong: var(--cc-clean-line-strong);
  --primary: var(--cc-clean-accent);
  --primary-2: var(--cc-clean-accent-text);
  --primary-soft: var(--cc-clean-accent-soft);
  --accent: var(--cc-clean-accent);
  --accent-action: var(--cc-clean-accent-strong);
  --violet: var(--cc-clean-accent);
  --violet-2: var(--cc-clean-accent-text);
  --violet-strong: var(--cc-clean-accent-strong);
  --violet-soft: #c4a7ff;
  --pink: var(--cc-clean-accent);
  --pink-2: var(--cc-clean-accent-text);
  --pink-soft: var(--cc-clean-accent-soft);
  --purple: var(--cc-clean-accent);
  --purple-2: var(--cc-clean-accent-text);
  --purple-3: #c4a7ff;
  --purple-soft: var(--cc-clean-accent-soft);
  --shadow: var(--cc-clean-shadow);
  --shadow-soft: var(--cc-clean-shadow);
  color: var(--cc-clean-text);
  background: var(--cc-clean-bg);
  background-image: none;
}

html[data-style="clean"] :is(.sidebar, .portal-sidebar) {
  color: var(--cc-clean-text) !important;
  background: var(--cc-clean-panel) !important;
  background-image: none !important;
  border-color: var(--cc-clean-line) !important;
  box-shadow: none !important;
}

html[data-style="clean"] :is(.topbar, .app-topbar, .portal-topbar) {
  color: var(--cc-clean-text) !important;
  background: color-mix(in srgb, var(--cc-clean-panel) 94%, transparent) !important;
  background-image: none !important;
  border-color: var(--cc-clean-line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

html[data-style="clean"] :is(.card, .panel, .metric-card, .kpi-card, .priority-card, .hero-panel, .overview-card, .rail-card, .right-card, .table-card, .content-card, .quick-card, .modal, .drawer, .assistant-panel, .assistant-drawer, .ai-panel) {
  border-color: var(--cc-clean-line) !important;
  background-color: var(--cc-clean-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-style="clean"] :is(.nav-item, .sidebar button, .portal-sidebar button) {
  box-shadow: none !important;
}

html[data-style="clean"] :is(.nav-item, .sidebar .nav-item, .portal-sidebar .nav-item) {
  min-height: 46px;
  color: var(--cc-clean-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2;
}

html[data-style="clean"] :is(.nav-label, .sidebar-section-label, .sidebar-group-title, .nav-section-title) {
  color: var(--cc-clean-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .075em !important;
  text-transform: none !important;
}

html[data-style="clean"] :is(.topbar h1, .app-topbar h1, .portal-topbar h1, .shell-greeting h1) {
  font-size: 21px !important;
  font-weight: 650 !important;
  line-height: 1.2;
}

html[data-style="clean"] :is(.topbar p, .app-topbar p, .portal-topbar p, .shell-greeting p) {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4;
}

html[data-style="clean"] :is(.profile strong, .user-mini strong, .user-profile strong, .profile-button strong) {
  font-size: 13px !important;
  font-weight: 650 !important;
}

html[data-style="clean"] :is(.profile small, .user-mini small, .user-profile small, .profile-button small) {
  font-size: 11px !important;
  font-weight: 400 !important;
}

html[data-style="clean"] :is(.nav-item.active, .sidebar button.active, .portal-sidebar button.active) {
  color: var(--cc-clean-accent-text) !important;
  border-color: color-mix(in srgb, var(--cc-clean-accent) 42%, var(--cc-clean-line)) !important;
  background: var(--cc-clean-accent-soft) !important;
  background-image: none !important;
}

html[data-style="clean"] :is(.button:not(.secondary):not(.success):not(.danger), .primary-button, button.primary, .btn-primary, [data-variant="primary"]) {
  color: #ffffff !important;
  border-color: var(--cc-clean-accent-strong) !important;
  background: var(--cc-clean-accent) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-style="clean"] :is(.button.secondary, .secondary-button, button.secondary, .btn-secondary) {
  color: var(--cc-clean-text) !important;
  border-color: var(--cc-clean-line) !important;
  background: var(--cc-clean-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-style="clean"] :is(input, textarea, select) {
  color: var(--cc-clean-text);
  border-color: var(--cc-clean-line);
  background: var(--cc-clean-panel-2);
}

html[data-style="clean"][data-theme="light"] :is(.brand-logo, .brand-link > img, .brand > img, .brand-button .brand-logo, .cc-sidebar-logo) {
  content: url("/assets/cybercompany-navigation-purple.svg") !important;
  border-radius: 0 !important;
  object-fit: contain;
  filter: none !important;
}

html[data-style="clean"][data-theme="dark"] :is(.brand-logo, .brand-link > img, .brand > img) {
  filter: none !important;
}

html[data-style="clean"] .ccuc-menu,
html[data-style="clean"] .ccuc-overlay {
  --ccuc-accent: var(--cc-clean-accent);
  --ccuc-icon-accent: #c4a7ff;
  --ccuc-icon-soft: rgba(124, 58, 237, .15);
  font-family: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

html[data-style="clean"] :is(.user-settings-nav button > span, .settings-card-title > span, .profile-menu-icon) {
  color: var(--cc-clean-accent) !important;
  background: var(--cc-clean-accent-soft) !important;
}

html[data-style="clean"] .settings-section-heading span {
  color: var(--cc-clean-accent-strong) !important;
}

html[data-style="clean"] .user-settings-modal .settings-segmented button.active {
  color: #ffffff !important;
  border-color: var(--cc-clean-accent-strong) !important;
  background: var(--cc-clean-accent) !important;
  box-shadow: none !important;
}

html[data-style="clean"] .user-settings-panel {
  scrollbar-color: var(--cc-clean-accent) var(--cc-clean-panel-3) !important;
}

html[data-style="clean"] .user-settings-panel::-webkit-scrollbar-thumb {
  background: var(--cc-clean-accent) !important;
}

/* Shared shell: Clean is neutral and violet in every assistant. */
html[data-style="clean"] .cc-sidebar-header {
  --cc-assistant-color: var(--cc-clean-accent) !important;
}

html[data-style="clean"] :is(.cc-sidebar-brand, .cc-sidebar-brand:hover, .cc-sidebar-brand:focus-visible) {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

html[data-style="clean"] .cc-sidebar-logo {
  filter: none !important;
}

html[data-style="clean"] :is(.nav-item:hover, .nav-item:focus-visible) {
  color: var(--cc-clean-accent-text) !important;
  border-color: color-mix(in srgb, var(--cc-clean-accent) 34%, var(--cc-clean-line)) !important;
  background: var(--cc-clean-panel-2) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-style="clean"] :is(.nav-item:hover, .nav-item:focus-visible) .nav-item-icon {
  color: inherit !important;
  background: var(--cc-clean-accent-soft) !important;
}

html[data-style="clean"] .cc-assistant-selector {
  color: var(--cc-clean-text) !important;
  border-color: var(--cc-clean-line) !important;
  background: var(--cc-clean-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-style="clean"] .cc-assistant-selector:hover,
html[data-style="clean"] .cc-assistant-selector[aria-expanded="true"] {
  color: var(--cc-clean-text) !important;
  border-color: color-mix(in srgb, var(--cc-clean-accent) 48%, var(--cc-clean-line)) !important;
  background: var(--cc-clean-panel-2) !important;
  box-shadow: none !important;
}

html[data-style="clean"] .cc-selector-mark {
  border-color: color-mix(in srgb, var(--cc-clean-accent) 34%, var(--cc-clean-line)) !important;
  background: var(--cc-clean-accent-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-style="clean"] .cc-selector-chevron,
html[data-style="clean"] .cc-sidebar-return-label small {
  color: var(--cc-clean-muted) !important;
}

html[data-style="clean"] .cc-sidebar-return-label strong {
  color: var(--cc-clean-text) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

html[data-style="clean"] .cc-assistants-menu {
  color: var(--cc-clean-text) !important;
  border-color: var(--cc-clean-line) !important;
  background: color-mix(in srgb, var(--cc-clean-panel) 97%, transparent) !important;
  box-shadow: 0 16px 42px rgba(15, 15, 25, .14) !important;
  scrollbar-color: var(--cc-clean-accent) transparent !important;
}

html[data-style="clean"] .cc-assistants-heading,
html[data-style="clean"] .cc-assistant-copy small {
  color: var(--cc-clean-muted) !important;
}

html[data-style="clean"] .cc-assistant-option {
  color: var(--cc-clean-text) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-style="clean"] .cc-assistant-option:is(:hover, :focus-visible, .active) {
  color: var(--cc-clean-text) !important;
  background: var(--cc-clean-accent-soft) !important;
}

html[data-style="clean"] .cc-assistant-option.active {
  box-shadow: inset 2px 0 0 var(--cc-clean-accent) !important;
}

html[data-style="clean"] .cc-assistant-avatar {
  color: var(--cc-clean-accent-text) !important;
  border-color: var(--cc-clean-line) !important;
  background: var(--cc-clean-accent-soft) !important;
  box-shadow: none !important;
}

html[data-style="clean"] .cc-assistant-check {
  color: var(--cc-clean-accent-text) !important;
}

/* Feedback and support use the same Clean navigation and panels. */
html[data-style="clean"] .sidebar .cc-feedback-nav {
  min-height: 46px !important;
  padding: 10px 12px !important;
  color: var(--cc-clean-muted) !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 500 14px/1.2 "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
}

html[data-style="clean"] .sidebar .cc-feedback-nav :is(span, svg) {
  color: inherit !important;
  stroke: currentColor !important;
}

html[data-style="clean"] .sidebar .cc-feedback-nav:is(:hover, :focus-visible) {
  color: var(--cc-clean-accent-text) !important;
  background: var(--cc-clean-panel-2) !important;
}

html[data-style="clean"] .cc-feedback-dialog {
  --cc-fg: var(--cc-clean-text);
  --cc-bg: var(--cc-clean-panel);
  --cc-field: var(--cc-clean-panel-2);
  --cc-line: var(--cc-clean-line);
  --cc-muted: var(--cc-clean-muted);
  color: var(--cc-clean-text) !important;
  border-color: var(--cc-clean-line) !important;
  background: var(--cc-clean-panel) !important;
  box-shadow: var(--cc-clean-shadow) !important;
}

html[data-style="clean"] .cc-feedback-dialog *,
html[data-style="clean"] .cc-feedback-dialog :is(input, textarea, button) {
  font-family: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

html[data-style="clean"] .cc-feedback-shell > header,
html[data-style="clean"] :is(.cc-feedback-form input, .cc-feedback-form textarea, .cc-feedback-category-toggle, .cc-feedback-attach, .cc-feedback-identity) {
  color: var(--cc-clean-text) !important;
  border-color: var(--cc-clean-line) !important;
  background: var(--cc-clean-panel-2) !important;
}

html[data-style="clean"] .cc-feedback-options {
  border-color: var(--cc-clean-line) !important;
  background: var(--cc-clean-panel) !important;
  box-shadow: var(--cc-clean-shadow) !important;
}

html[data-style="clean"] .cc-feedback-options button {
  color: var(--cc-clean-text) !important;
}

html[data-style="clean"] .cc-feedback-options :is(button:hover, [aria-selected="true"]) {
  color: var(--cc-clean-accent-text) !important;
  background: var(--cc-clean-accent-soft) !important;
}

html[data-style="clean"] .cc-feedback-form footer button {
  color: var(--cc-clean-text) !important;
  border-color: var(--cc-clean-line) !important;
  background: var(--cc-clean-panel-2) !important;
}

html[data-style="clean"] .cc-feedback-form footer .cc-feedback-save {
  color: #ffffff !important;
  border-color: var(--cc-clean-accent-strong) !important;
  background: var(--cc-clean-accent) !important;
}

/* Marketing's inverse card hover is disabled only in Clean mode. */
html[data-style="clean"] body {
  --cc-card-hover-surface: var(--cc-clean-panel-2) !important;
  --cc-card-hover-ink: var(--cc-clean-text) !important;
  --cc-card-hover-muted: var(--cc-clean-muted) !important;
  --cc-card-hover-border: color-mix(in srgb, var(--cc-clean-accent) 42%, var(--cc-clean-line)) !important;
}

html[data-style="clean"] :is(.quick-card, .kpi-card, .metric-box, .insight, .module-card):is(:hover, :focus-visible) {
  color: var(--cc-clean-text) !important;
  border-color: color-mix(in srgb, var(--cc-clean-accent) 42%, var(--cc-clean-line)) !important;
  background: var(--cc-clean-panel-2) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-style="clean"] :is(.quick-card, .kpi-card, .metric-box, .insight, .module-card):is(:hover, :focus-visible)
  :is(h1, h2, h3, h4, b, strong, .kpi-value) {
  color: var(--cc-clean-text) !important;
}

html[data-style="clean"] :is(.quick-card, .kpi-card, .metric-box, .insight, .module-card):is(:hover, :focus-visible)
  :is(p, small, span, .kpi-head) {
  color: var(--cc-clean-muted) !important;
}

html[data-style="clean"] .hero-card::before,
html[data-style="clean"] .module-card::after {
  background: radial-gradient(circle, var(--cc-clean-accent-soft), transparent 68%) !important;
}

html[data-style="clean"] :is(.hero-orb, .media-canvas .media-orb, .wizard-orb, .growth-room-mark) {
  color: #ffffff !important;
  background: var(--cc-clean-accent) !important;
  box-shadow: none !important;
}

html[data-style="clean"] .growth-room-eyebrow {
  color: var(--cc-clean-accent-text) !important;
}

html[data-style="clean"] .growth-demo-note {
  color: var(--cc-clean-muted) !important;
  background: var(--cc-clean-panel-2) !important;
  background-image: none !important;
}

html[data-style="clean"] :is(.assistant-drawer, .assistant-drawer .drawer-thread, .assistant-drawer .chat-input) {
  color: var(--cc-clean-text) !important;
  border-color: var(--cc-clean-line) !important;
  background: var(--cc-clean-panel) !important;
}

html[data-style="clean"] .drawer-head {
  color: #ffffff !important;
  border-color: color-mix(in srgb, var(--cc-clean-accent) 70%, white) !important;
  background: var(--cc-clean-accent) !important;
  background-image: none !important;
}

html[data-style="clean"] .drawer-identity > span {
  border-color: rgba(255, 255, 255, .32) !important;
  background: rgba(255, 255, 255, .12) !important;
}

html[data-style="clean"] .drawer-identity :is(b, small),
html[data-style="clean"] .drawer-head #closeAssistant {
  color: #ffffff !important;
}

html[data-style="clean"] .assistant-drawer .message.ai {
  color: var(--cc-clean-text) !important;
  border-color: var(--cc-clean-line) !important;
  background: var(--cc-clean-panel-2) !important;
}

html[data-style="clean"] .assistant-drawer .message.user,
html[data-style="clean"] :is(.send-button, .copilot-support:hover) {
  color: #ffffff !important;
  border-color: var(--cc-clean-accent-strong) !important;
  background: var(--cc-clean-accent) !important;
  background-image: none !important;
}

html[data-style="clean"] .assistant-fab {
  border-color: color-mix(in srgb, var(--cc-clean-accent) 42%, var(--cc-clean-line)) !important;
  background: var(--cc-clean-panel) !important;
  background-image: none !important;
  box-shadow: var(--cc-clean-shadow) !important;
}

@media (max-width: 900px) {
  html[data-style="clean"] .cc-mobile-bottom-nav {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(9px + env(safe-area-inset-bottom)) !important;
    border-color: color-mix(in srgb, var(--cc-clean-line) 68%, white 20%) !important;
    border-radius: 24px !important;
    background: color-mix(in srgb, var(--cc-clean-panel) 70%, transparent) !important;
    box-shadow: 0 18px 48px rgba(5, 5, 12, .18), inset 0 1px rgba(255, 255, 255, .26) !important;
    backdrop-filter: blur(28px) saturate(175%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(175%) !important;
  }

  html[data-style="clean"][data-theme="dark"] .cc-mobile-bottom-nav {
    border-color: rgba(255, 255, 255, .12) !important;
    background: rgba(32, 33, 39, .70) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .10) !important;
  }

  html[data-style="clean"] .cc-mobile-nav-item {
    color: var(--cc-clean-muted) !important;
    border-radius: 17px !important;
    touch-action: manipulation;
    pointer-events: auto;
  }

  html[data-style="clean"] .cc-mobile-nav-item > * {
    pointer-events: none;
  }

  html[data-style="clean"] .cc-mobile-nav-item.active {
    color: var(--cc-clean-accent-text) !important;
    background: var(--cc-clean-accent-soft) !important;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-style="clean"] :is(.topbar, .app-topbar, .portal-topbar, .cc-mobile-bottom-nav) {
    background: var(--cc-clean-panel) !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  html[data-style="clean"] :is(.topbar, .app-topbar, .portal-topbar, .cc-mobile-bottom-nav) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--cc-clean-panel) !important;
  }
}