/* ui503: one visual language for the desktop product and public surfaces. */
:root {
  --imp-bg: #071017;
  --imp-shell: #09141c;
  --imp-surface: #0d1b24;
  --imp-raised: #112631;
  --imp-line: rgba(190, 224, 235, 0.18);
  --imp-line-strong: rgba(114, 212, 231, 0.62);
  --imp-text: #edf7f9;
  --imp-muted: #a8bcc4;
  --imp-faint: #78919b;
  --imp-signal: #72d4e7;
  --imp-signal-bright: #d8fbff;
  --imp-good: #8fd6b0;
  --imp-warn: #e3ba73;
  --imp-danger: #e98980;
  --imp-radius: 9px;
  --imp-ease: cubic-bezier(0.22, 0.72, 0.2, 1);
}

html,
body {
  background: var(--imp-bg) !important;
  color: var(--imp-text) !important;
}

::selection {
  background: rgba(114, 212, 231, 0.32) !important;
  color: #fff !important;
}

/* Auth and server-rendered pages use the same shell as the applications. */
html body .wrap,
html body .wrap .login-shell,
html body .wrap .signup-shell,
html body .wrap .reset-shell {
  background: var(--imp-bg) !important;
  color: var(--imp-text) !important;
}

html body .wrap :is(.login-card, .signup-card, .reset-card, .login-link-card) {
  border: 1px solid var(--imp-line) !important;
  border-radius: var(--imp-radius) !important;
  background: var(--imp-surface) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.3) !important;
}

html body .wrap :is(.login-qr-side, .login-form-panel, .signup-copy, .signup-form) {
  border-radius: 7px !important;
  background: var(--imp-raised) !important;
}

html body .wrap :is(.login-mark, .signup-mark) {
  border-radius: 8px !important;
  background: var(--imp-signal) !important;
  color: #06151c !important;
  box-shadow: 0 8px 18px rgba(114, 212, 231, 0.18) !important;
}

html body .wrap :is(.login-title, .login-tabs span, .login-region a, .login-link-card svg, .signup-copy > span, .signup-form label, .reset-card .eyebrow, .reset-card label) {
  color: var(--imp-signal) !important;
  -webkit-text-fill-color: var(--imp-signal) !important;
}

html body .wrap :is(.login-proof-card, .signup-steps div) {
  border: 1px solid var(--imp-line) !important;
  border-radius: 7px !important;
  background: rgba(114, 212, 231, 0.06) !important;
  box-shadow: none !important;
}

html body .wrap :is(.login-proof-card b, .login-consent b) {
  border: 1px solid rgba(114, 212, 231, 0.36) !important;
  border-radius: 7px !important;
  background: rgba(114, 212, 231, 0.14) !important;
  color: var(--imp-signal-bright) !important;
}

html body .wrap :is(.login-form, .signup-form, .reset-card) :is(input, textarea, select),
html body .wrap :is(.login-form, .signup-form, .reset-card) input:-webkit-autofill {
  border: 1px solid var(--imp-line) !important;
  border-radius: 7px !important;
  background: #08151d !important;
  color: var(--imp-text) !important;
  -webkit-text-fill-color: var(--imp-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html body .wrap :is(.login-form, .signup-form, .reset-card) :is(input, textarea, select):focus {
  border-color: var(--imp-line-strong) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(114, 212, 231, 0.14) !important;
}

html body .wrap :is(.login-submit, .signup-form button[type="submit"], .reset-card button) {
  border: 1px solid var(--imp-signal) !important;
  border-radius: 7px !important;
  background: var(--imp-signal) !important;
  color: #06151c !important;
  -webkit-text-fill-color: #06151c !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28) !important;
}

/* Shared application canvas. */
html body #portal-root main.portal-shell,
html body #root main.geo-admin-shell {
  background: var(--imp-bg) !important;
  color: var(--imp-text) !important;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important;
}

html body #portal-root main.portal-shell .portal-header,
html body #root main.geo-admin-shell .geo-sidebar {
  background: var(--imp-shell) !important;
  border-color: var(--imp-line) !important;
}

html body #portal-root main.portal-shell .portal-header .brand,
html body #root main.geo-admin-shell .geo-brand {
  border-bottom: 1px solid var(--imp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #portal-root main.portal-shell .portal-header .brand > span:first-child,
html body #root main.geo-admin-shell .geo-brand .brand-mark,
html body #root main.geo-admin-shell .geo-brand > span:first-child {
  border: 1px solid rgba(114, 212, 231, 0.48) !important;
  border-radius: 7px !important;
  background: var(--imp-signal) !important;
  color: #06151c !important;
  box-shadow: 0 6px 14px rgba(114, 212, 231, 0.14) !important;
}

html body #portal-root main.portal-shell .client-nav-group > span,
html body #root main.geo-admin-shell .geo-nav-group > summary {
  color: var(--imp-faint) !important;
  letter-spacing: 0 !important;
}

html body #portal-root main.portal-shell .client-nav-group button,
html body #root main.geo-admin-shell .geo-nav-children button {
  min-height: 42px !important;
  border: 1px solid transparent !important;
  border-left: 2px solid transparent !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: var(--imp-muted) !important;
  box-shadow: none !important;
  transition: background 180ms var(--imp-ease), border-color 180ms ease, color 180ms ease, transform 180ms var(--imp-ease) !important;
}

html body #portal-root main.portal-shell .client-nav-group button:hover,
html body #portal-root main.portal-shell .client-nav-group button.active,
html body #root main.geo-admin-shell .geo-nav-children button:hover,
html body #root main.geo-admin-shell .geo-nav-children button.active {
  border-left-color: var(--imp-signal) !important;
  background: rgba(114, 212, 231, 0.1) !important;
  color: var(--imp-text) !important;
  transform: translateX(2px) !important;
}

html body #portal-root main.portal-shell .portal-content-stage,
html body #root main.geo-admin-shell .geo-content {
  background: var(--imp-bg) !important;
}

html body #portal-root main.portal-shell :is(.portal-status-strip, .section-pilot-banner, .client-command-console, .client-command-cockpit, .client-core-command-deck, .client-live-cockpit, .page-control-tower, .publisher-command-center, .citation-route-map, .citation-launch-command, .citation-execution-command, .compliance-command, .task-pool-cockpit, .account-command, .report-pack-launcher),
html body #root main.geo-admin-shell :is(.geo-command, .geo-panel, .geo-project-command, .geo-model-command, .geo-prompt-command, .geo-task-command, .geo-search-command, .geo-stats-command, .geo-alert-command, .geo-log-command, .geo-api-command, .geo-user-command, .admin-dashboard-v2, .admin-command-layout) {
  border: 1px solid var(--imp-line) !important;
  border-radius: var(--imp-radius) !important;
  background: var(--imp-surface) !important;
  background-image: none !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2) !important;
}

html body #portal-root main.portal-shell :is(.portal-status-strip, .section-pilot-banner, .client-command-console, .client-command-cockpit, .client-core-command-deck, .client-live-cockpit, .page-control-tower, .publisher-command-center, .citation-route-map, .citation-launch-command, .citation-execution-command, .compliance-command, .task-pool-cockpit, .account-command, .report-pack-launcher),
html body #root main.geo-admin-shell :is(.geo-command, .geo-panel, .geo-project-command, .geo-model-command, .geo-prompt-command, .geo-task-command, .geo-search-command, .geo-stats-command, .geo-alert-command, .geo-log-command, .geo-api-command, .geo-user-command, .admin-dashboard-v2, .admin-command-layout) {
  overflow: visible !important;
}

/* Status strip reads as one control surface instead of a row of unrelated cards. */
html body #portal-root main.portal-shell .portal-status-strip {
  grid-template-columns: minmax(240px, 1fr) minmax(300px, 1.1fr) !important;
  grid-template-areas: "project dials" "actions actions" !important;
  gap: 10px !important;
  padding: 12px !important;
}

html body #portal-root main.portal-shell .status-project { grid-area: project !important; }
html body #portal-root main.portal-shell .status-dials { grid-area: dials !important; }
html body #portal-root main.portal-shell .status-actions {
  grid-area: actions !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

html body #portal-root main.portal-shell .status-actions button {
  min-height: 44px !important;
  border: 1px solid rgba(114, 212, 231, 0.2) !important;
  border-radius: 5px !important;
  background: #102630 !important;
  color: var(--imp-text) !important;
  box-shadow: none !important;
}

/* One button ladder: cyan executes, blue-black navigates, red interrupts. */
html body #portal-root main.portal-shell :is(button, .button, a[role="button"]),
html body #root main.geo-admin-shell :is(button, .button, a[role="button"], .geo-mini-button, .geo-story-button, .geo-action-card-button, .geo-notice-action) {
  min-height: 38px !important;
  max-width: 100% !important;
  border: 1px solid rgba(190, 224, 235, 0.24) !important;
  border-radius: 6px !important;
  background: #122833 !important;
  color: var(--imp-text) !important;
  -webkit-text-fill-color: var(--imp-text) !important;
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.16) !important;
  transition: transform 160ms var(--imp-ease), background 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

html body #portal-root main.portal-shell :is(button, .button, a[role="button"]):not(:disabled):hover,
html body #root main.geo-admin-shell :is(button, .button, a[role="button"], .geo-mini-button, .geo-story-button, .geo-action-card-button, .geo-notice-action):not(:disabled):hover {
  border-color: var(--imp-line-strong) !important;
  background: #173746 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24) !important;
}

html body #portal-root main.portal-shell :is(.primary, .is-primary, .client-ignite-button, .primary-setup-action, .client-home-ignite, .self-start-primary, [data-primary="true"], [data-open-project-modal], .cockpit-launch-action),
html body #root main.geo-admin-shell :is(.primary, .is-primary, .geo-mini-button.accent, .geo-action-card-button.primary, .cockpit-launch-action, button[class*="primary"]) {
  border-color: var(--imp-signal) !important;
  background: var(--imp-signal) !important;
  color: #06151c !important;
  -webkit-text-fill-color: #06151c !important;
  box-shadow: 0 10px 24px rgba(114, 212, 231, 0.14) !important;
}

html body #portal-root main.portal-shell :is(.primary, .is-primary, .client-ignite-button, .primary-setup-action, .client-home-ignite, .self-start-primary, [data-primary="true"], [data-open-project-modal], .cockpit-launch-action):not(:disabled):hover,
html body #root main.geo-admin-shell :is(.primary, .is-primary, .geo-mini-button.accent, .geo-action-card-button.primary, .cockpit-launch-action, button[class*="primary"]):not(:disabled):hover {
  background: var(--imp-signal-bright) !important;
  color: #06151c !important;
  -webkit-text-fill-color: #06151c !important;
}

html body #portal-root main.portal-shell :is(.danger, [class*="danger"], [class*="delete"], [data-task-cancel]),
html body #root main.geo-admin-shell :is(.danger, [class*="danger"], [class*="delete"], button[class*="delete"]) {
  border-color: rgba(233, 137, 128, 0.48) !important;
  background: rgba(111, 40, 37, 0.34) !important;
  color: #ffd9d5 !important;
  -webkit-text-fill-color: #ffd9d5 !important;
}

html body #portal-root main.portal-shell :is(button:disabled, .disabled),
html body #root main.geo-admin-shell :is(button:disabled, .disabled) {
  border-color: rgba(190, 224, 235, 0.1) !important;
  background: #0c171e !important;
  color: rgba(237, 247, 249, 0.42) !important;
  -webkit-text-fill-color: rgba(237, 247, 249, 0.42) !important;
  box-shadow: none !important;
}

html body #portal-root main.portal-shell :is(button, a, input, select, textarea):focus-visible,
html body #root main.geo-admin-shell :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--imp-signal) !important;
  outline-offset: 2px !important;
}

html body #portal-root main.portal-shell :is(input, select, textarea),
html body #root main.geo-admin-shell :is(input, select, textarea) {
  border: 1px solid var(--imp-line) !important;
  border-radius: 6px !important;
  background: #08151d !important;
  color: var(--imp-text) !important;
  -webkit-text-fill-color: var(--imp-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

html body #portal-root main.portal-shell :is(input, select, textarea):focus,
html body #root main.geo-admin-shell :is(input, select, textarea):focus {
  border-color: var(--imp-line-strong) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(114, 212, 231, 0.12) !important;
}

html body #portal-root main.portal-shell :is(.muted, .hint, small, .caption, .meta),
html body #root main.geo-admin-shell :is(.muted, .hint, small, .caption, .meta, .geo-copy, .geo-muted) {
  color: var(--imp-muted) !important;
}

html body #portal-root main.portal-shell :is(.num, .metric-value, .page-control-stats strong, .client-home-kpis strong),
html body #root main.geo-admin-shell :is(.num, .metric-value, .geo-story-metrics strong, .geo-kpi strong) {
  color: var(--imp-signal-bright) !important;
  font-variant-numeric: tabular-nums !important;
}

/* SVG language: clean geometric frames, one line weight and one signal color. */
html body :is(#portal-root, #root) svg.cockpit-vector-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  overflow: visible !important;
  color: var(--imp-muted) !important;
  filter: none !important;
  shape-rendering: geometricPrecision !important;
  transition: color 180ms var(--imp-ease), transform 180ms var(--imp-ease) !important;
}

html body :is(#portal-root, #root) svg.cockpit-vector-icon :is(path, rect, circle, line, polyline, polygon) {
  vector-effect: non-scaling-stroke !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body :is(#portal-root, #root) svg.cockpit-vector-icon .glyph-plate {
  fill: #0b1b24 !important;
  stroke: rgba(190, 224, 235, 0.3) !important;
  stroke-width: 0.9 !important;
}

html body :is(#portal-root, #root) svg.cockpit-vector-icon .glyph-main {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
}

html body :is(#portal-root, #root) svg.cockpit-vector-icon .glyph-fill {
  fill: rgba(114, 212, 231, 0.08) !important;
  stroke: currentColor !important;
  stroke-width: 1.2 !important;
}

html body :is(#portal-root, #root) svg.cockpit-vector-icon .glyph-rail {
  fill: none !important;
  stroke: rgba(190, 224, 235, 0.46) !important;
  stroke-width: 0.8 !important;
  stroke-dasharray: none !important;
}

html body :is(#portal-root, #root) svg.cockpit-vector-icon .glyph-signal {
  fill: none !important;
  stroke: var(--imp-signal) !important;
  stroke-width: 1.85 !important;
}

html body :is(#portal-root, #root) svg.cockpit-vector-icon .glyph-node {
  fill: var(--imp-signal-bright) !important;
  stroke: #1c7184 !important;
  stroke-width: 0.75 !important;
}

html body :is(#portal-root, #root) :is(button, a, summary):is(:hover, :focus-visible) svg.cockpit-vector-icon {
  color: var(--imp-signal-bright) !important;
  transform: translateX(1px) !important;
}

html body :is(#portal-root, #root) svg.cockpit-data-vector {
  border: 1px solid rgba(114, 212, 231, 0.18) !important;
  background: #091820 !important;
  filter: none !important;
}

html body #portal-root main.portal-shell svg.cockpit-data-vector :is(.vector-frame, .vector-axis, .vector-ticks) {
  fill: none !important;
  stroke: rgba(190, 224, 235, 0.32) !important;
}

html body #portal-root main.portal-shell svg.cockpit-data-vector .vector-grid path {
  stroke: rgba(190, 224, 235, 0.12) !important;
  stroke-width: 0.6 !important;
  stroke-dasharray: 2 4 !important;
}

html body #portal-root main.portal-shell svg.cockpit-data-vector :is(.vector-line.brand, .trend-line-main) {
  stroke: var(--imp-signal) !important;
  stroke-width: 2 !important;
  filter: none !important;
}

html body #portal-root main.portal-shell svg.cockpit-data-vector .vector-line.competitor {
  stroke: var(--imp-warn) !important;
  stroke-width: 1.2 !important;
  stroke-dasharray: 3 4 !important;
  filter: none !important;
}

html body #portal-root main.portal-shell svg.cockpit-data-vector :is(.vector-node, .vector-terminal) {
  fill: var(--imp-signal-bright) !important;
  stroke: #1c7184 !important;
  filter: none !important;
}

/* Motion is authored for state changes only. */
@keyframes impVectorDraw {
  from { stroke-dashoffset: 1; opacity: 0.35; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes impBusySweep {
  from { transform: translateX(-110%); opacity: 0; }
  18% { opacity: 0.8; }
  82% { opacity: 0.8; }
  to { transform: translateX(110%); opacity: 0; }
}

html body #portal-root main.portal-shell svg.cockpit-data-vector :is(.vector-line.brand, .trend-line-main)[pathLength="1"] {
  stroke-dasharray: 1 !important;
  stroke-dashoffset: 1 !important;
  animation: impVectorDraw 720ms var(--imp-ease) 80ms both !important;
}

html body #portal-root main.portal-shell[data-cockpit-busy="true"] :is(.cockpit-launch-action, .client-ignite-button)::after,
html body #root main.geo-admin-shell[data-cockpit-busy="true"] :is(.cockpit-launch-action, button[class*="primary"])::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 -35% !important;
  width: 34% !important;
  pointer-events: none !important;
  background: rgba(216, 251, 255, 0.62) !important;
  transform: skewX(-18deg) !important;
  animation: impBusySweep 1.6s ease-in-out infinite !important;
}

html body #portal-root main.portal-shell :is(.cockpit-launch-action, .client-ignite-button),
html body #root main.geo-admin-shell :is(.cockpit-launch-action, button[class*="primary"]) {
  position: relative !important;
  overflow: hidden !important;
}

/* Public site: align marketing, article, resource and legal pages with the product shell. */
html body #root :is(.site-header, .site-footer) {
  border-color: var(--imp-line) !important;
  background: var(--imp-shell) !important;
  color: var(--imp-text) !important;
}

html body #root .site-header {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16) !important;
}

html body #root :is(.site-header .brand-mark, .root-shell-loading__mark, .public-shell-loading__mark) {
  border-color: rgba(114, 212, 231, 0.48) !important;
  border-radius: 7px !important;
  background: var(--imp-signal) !important;
  color: #06151c !important;
  box-shadow: 0 8px 18px rgba(114, 212, 231, 0.16) !important;
}

html body #root :is(.button, .button-dark, .button-light, .root-shell-loading__button, .public-shell-loading__actions a) {
  min-height: 40px !important;
  border: 1px solid rgba(190, 224, 235, 0.24) !important;
  border-radius: 6px !important;
  background: #122833 !important;
  color: var(--imp-text) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18) !important;
}

html body #root :is(.button-dark, .root-shell-loading__button.primary, .public-shell-loading__actions a:first-child) {
  border-color: var(--imp-signal) !important;
  background: var(--imp-signal) !important;
  color: #06151c !important;
}

html body #root :is(.button, .button-dark, .button-light, .root-shell-loading__button, .public-shell-loading__actions a):hover {
  border-color: var(--imp-line-strong) !important;
  background: #173746 !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

html body #root :is(.button-dark, .root-shell-loading__button.primary, .public-shell-loading__actions a:first-child):hover {
  background: var(--imp-signal-bright) !important;
  color: #06151c !important;
}

html body #root :is(.home-hero, .product-hero, .special-hero, .solution-hero, .case-hero, .article-hero, .event-hero, .legal-hero, .trust-hero, .collection-hero, .page-hero-shell, .public-next-step-strip, .pricing-purchase-section, .conversion-section, .directory-section, .utility-section) {
  border-color: var(--imp-line) !important;
  border-radius: var(--imp-radius) !important;
  background: var(--imp-surface) !important;
  background-image: none !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22) !important;
}

html body #root :is(.home-industry-grid article, .home-capability-row, .article-summary-card, .article-cockpit, .article-evidence-panel, .article-action-grid article, .article-insight-list article, .pricing-card, .page-card, .collection-grid article, .special-cockpit, .solution-command-panel, .case-stats, .event-cockpit, .legal-cockpit, .trust-console, .polish-preview, .replica-summary) {
  border-color: var(--imp-line) !important;
  border-radius: 7px !important;
  background: var(--imp-raised) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body #root :is(.section-label, .page-hero-copy > p:first-child, .article-hero-copy > span, .polish-kicker) {
  color: var(--imp-signal) !important;
  letter-spacing: 0 !important;
}

html body #root :is(.home-hero h1, .product-hero h1, .special-hero h1, .solution-hero h1, .case-hero h1, .article-hero h1, .event-hero h1, .legal-hero h1, .trust-hero h1, .collection-hero h1, .page-hero-shell h1) {
  color: var(--imp-text) !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
}

html body #root :is(.home-hero p, .product-hero p, .special-hero p, .solution-hero p, .case-hero p, .article-hero p, .event-hero p, .legal-hero p, .trust-hero p, .collection-hero p, .page-hero-shell p) {
  color: var(--imp-muted) !important;
}

html body #root :is(.workflow-board, .cn-preview-frame, .article-cockpit, .special-radar, .solution-command-panel, .case-stats, .event-cockpit, .legal-cockpit, .trust-console) {
  border-color: rgba(114, 212, 231, 0.22) !important;
  background: #091820 !important;
  background-image: none !important;
}

html body #root :is(.workflow-board, .home-capability-row, .article-summary-card, .article-cockpit, .article-evidence-panel, .article-action-grid article, .article-insight-list article, .page-card, .pricing-card):hover {
  border-color: var(--imp-line-strong) !important;
  transform: translateY(-2px) !important;
}

html body #root :is(.home-proof-stats strong, .article-cockpit-score strong, .article-summary-card strong, .num, .metric-value) {
  color: var(--imp-signal-bright) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body :is(#root, #portal-root) *,
  html body :is(#root, #portal-root) *::before,
  html body :is(#root, #portal-root) *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
}
