/* Internal Clean System v1.0 — approved by Abby, 2026-09-12. */
:root {
  color-scheme: light;
  --sys-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --sys-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sys-bg: #f5f5f7; --sys-surface: #fff; --sys-sidebar: #f0f1f4;
  --sys-text: #202124; --sys-muted: #62666d; --sys-line: #e3e5e8;
  --sys-blue: #0868ce; --sys-blue-hover: #0057b3; --sys-selected: #e9f1ff;
  --sys-success: #266039; --sys-success-bg: #e8f4eb;
  --sys-warning: #855800; --sys-warning-bg: #fff2d8;
  --sys-danger: #b42318; --sys-danger-bg: #fff0ee;
  --sys-radius-control: 8px; --sys-radius-panel: 12px;
  --sys-shadow: 0 1px 3px rgb(20 30 45 / 4%);
  --sys-focus: 0 0 0 3px rgb(8 104 206 / 24%);
}
/* Map existing component tokens so apps keep their layout and behavior. */
:root, .cz-page, .crm-shell {
  --cz-font-body: var(--sys-font); --cz-font-heading: var(--sys-font); --cz-font-logo: var(--sys-font);
  --cz-color-heading: var(--sys-text); --cz-color-text: var(--sys-text); --cz-color-muted: var(--sys-muted);
  --cz-color-line: var(--sys-line); --cz-color-background: var(--sys-bg); --cz-color-bg: var(--sys-bg);
  --cz-color-link: var(--sys-blue); --cz-color-dark: var(--sys-text); --cz-focus: var(--sys-focus);
  --sans: var(--sys-font); --serif: var(--sys-font);
  --ink: var(--sys-text); --text: var(--sys-text); --muted: var(--sys-muted); --sub: var(--sys-muted);
  --line: var(--sys-line); --bg: var(--sys-bg); --card: var(--sys-surface); --paper: var(--sys-surface);
  --cream: var(--sys-bg); --brown: var(--sys-text); --accent: var(--sys-blue);
  --insights-font: var(--sys-font); --insights-ink: var(--sys-text); --insights-muted: var(--sys-muted);
  --insights-line: var(--sys-line); --insights-canvas: var(--sys-bg); --insights-surface: var(--sys-surface);
  --insights-dark: var(--sys-text); --insights-dark-hover: #e6eaf0; --insights-active: var(--sys-selected);
  --insights-accent: var(--sys-blue); --insights-soft-accent: var(--sys-selected); --insights-warm: #fff; --insights-warm-strong: #f0f2f5;
  --crm-ink: var(--sys-text); --crm-muted: var(--sys-muted); --crm-line: var(--sys-line);
  --crm-panel: var(--sys-surface); --crm-canvas: var(--sys-bg); --crm-accent: var(--sys-blue);
  --brand-primary: var(--sys-blue); --brand-primary-hover: var(--sys-blue-hover); --brand-primary-light: var(--sys-selected);
  --brand-taupe: #dce8f7; --brand-button: var(--sys-blue); --brand-button-hover: var(--sys-blue-hover);
  --gray-50: #fafbfc; --gray-100: #f0f2f5; --gray-200: #e3e5e8; --gray-300: #c6cbd2;
  --gray-400: #737982; --gray-500: var(--sys-muted); --gray-700: #383c42; --gray-900: var(--sys-text);
  --bg-page: var(--sys-bg); --bg-card: var(--sys-surface);
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
}
html, body { background-color: var(--sys-bg); color: var(--sys-text); }
body { font-family: var(--sys-font) !important; font-size: 14px; line-height: 1.55; }
:where(h1,h2,h3,h4,h5,h6,p,span,div,a,label,button,input,select,textarea,th,td,dt,dd,strong,b,small,summary,li):not([contenteditable="true"] *) {
  font-family: var(--sys-font) !important;
}
:where(code,pre,kbd,samp), :where(code,pre,kbd,samp) * { font-family: var(--sys-mono) !important; }
h1:not([contenteditable="true"] *) { font-size: 26px !important; font-weight: 650 !important; line-height: 1.25 !important; letter-spacing: -.025em !important; }
h2:not([contenteditable="true"] *) { font-size: 18px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: -.01em !important; }
h3:not([contenteditable="true"] *) { font-size: 16px !important; font-weight: 600 !important; line-height: 1.45 !important; letter-spacing: 0 !important; }
h4:not([contenteditable="true"] *),h5:not([contenteditable="true"] *),h6:not([contenteditable="true"] *) { font-size: 14px !important; font-weight: 600 !important; line-height: 1.5 !important; }
:where(small,.eyebrow,.nav-label,.nav-group-title,.subnote,.hint,.helper-text,.help-text,.muted) { font-size: 12px; line-height: 1.5; }
:where(.eyebrow,.nav-label,.nav-group-title,[class$="__eyebrow"]) { letter-spacing: .025em !important; font-weight: 500 !important; }
:where(button,input,select,textarea) { font-size: 14px; }
:where(button,.btn,.cz-button) { border-radius: var(--sys-radius-control); }
:where(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]) {
  border-color: #c6cbd2; border-radius: var(--sys-radius-control); color: var(--sys-text); background-color: #fff;
}
:where(input[type="checkbox"],input[type="radio"],input[type="range"]) { accent-color: var(--sys-blue); }
:where(button,a,input,select,textarea,summary):focus-visible { outline: 2px solid var(--sys-blue) !important; outline-offset: 3px; }
:where(button,input,select,textarea):disabled { cursor: not-allowed; }
:where(.panel,.card,.metric-card,.kpi-card,.summary,.modal-content,.dialog-panel) { border-color: var(--sys-line); border-radius: var(--sys-radius-panel); box-shadow: var(--sys-shadow); }
:where(table) { font-variant-numeric: tabular-nums; }
:where(th) { background-color: #f7f8fa; color: var(--sys-muted); font-weight: 500; font-size: 12px; }
:where(td) { font-size: 14px; line-height: 1.5; }
:where(th,td) { border-color: var(--sys-line); }
:where(.num,.number,.amount,.metric-value,.kpi-value) { font-variant-numeric: tabular-nums; }
:where(.primary-action,.btn-primary,.primary-button,.button-primary,.login-submit,.cz-button--primary) {
  background: var(--sys-blue) !important; border-color: var(--sys-blue) !important; color: #fff !important;
  border-radius: var(--sys-radius-control) !important; font-size: 14px !important; font-weight: 500 !important;
  letter-spacing: 0 !important;
}
:where(.primary-action,.btn-primary,.primary-button,.button-primary,.login-submit,.cz-button--primary):hover { background: var(--sys-blue-hover) !important; }
:where(.secondary-action,.btn-secondary,.secondary-button,.button-secondary) {
  background: #fff !important; border-color: #c6cbd2 !important; color: var(--sys-text) !important;
  border-radius: var(--sys-radius-control) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important;
}
:where(.danger-action,.btn-danger,.button-danger) { color: var(--sys-danger) !important; }
:where(.badge,.status-pill,.stage-pill,.tag) { font-size: 12px; letter-spacing: 0; }
@media(max-width:700px) {
  h1:not([contenteditable="true"] *) { font-size: 24px !important; }
  :where(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) { font-size: 16px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto !important; } }
@media print { html,body { background: #fff; } }

/* Reviewed legacy neutral surfaces; semantic status and customer artwork excluded. */
:root {
  background: #ededed !important
}
.cz-account__checks small { background: #e8e8e8 !important; color: #676767 !important
}
.cz-improvement-center__tabs a { border: 1px solid #b6b6b6 !important; color: #313131 !important
}
.cz-improvement-filters a { border: 1px solid #d0d0d0 !important; color: #484848 !important
}
.cz-improvement-advanced { border: 1px solid #d2d2d2 !important
}
.cz-improvement-advanced > summary { color: #484848 !important
}
.cz-improvement-advanced-filters { border-top: 1px solid #d2d2d2 !important
}
.cz-improvement-advanced-filters label { color: #545454 !important
}
.cz-improvement-advanced-filters select { border: 1px solid #b3b3b3 !important; color: #272727 !important
}
.cz-attachment-card { background: #f4f4f4 !important; color: #3a3a3a !important
}
.cz-attachment-card--image img { background: #efefef !important
}
.cz-attachment-card--file::before { background: #e3e3e3 !important; color: #555555 !important
}
.cz-improvement__meta span { background: #e7e7e7 !important
}
.cz-improvement__section { border-top: 1px solid #e1e1e1 !important
}
.cz-improvement__event { border-left: 2px solid #d2d2d2 !important
}
.cz-improvement-ai { border: 1px solid #c8c8c8 !important; background: #f3f3f3 !important
}
.cz-improvement-ai small { color: #6e6e6e !important
}
.cz-improvement-ai strong { color: #222222 !important
}
.cz-improvement-ai > p, .cz-improvement-ai__block p { color: #4a4a4a !important
}
.cz-improvement-ai > header > span { border: 1px solid #a3a3a3 !important; color: #545454 !important
}
.cz-improvement-ai__block, .cz-improvement-ai__checks { border-top: 1px solid #d6d6d6 !important
}
.cz-improvement-ai__block > b, .cz-improvement-ai__checks > b { color: #5c5c5c !important
}
.cz-improvement-ai ul { color: #4c4c4c !important
}
.cz-improvement-ai__checks li span { color: #6a6a6a !important
}
.cz-improvement-ai__previews a { color: #4c4c4c !important
}
.cz-improvement-ai__previews img { border: 1px solid #d6d6d6 !important
}
.cz-improvement-ai .cz-improvement-ai__hashes { color: #757575 !important
}
.cz-improvement-ai__actions { border-top: 1px solid #d6d6d6 !important
}
:root {
  --insights-canvas: #f9f9f9 !important;
  --insights-dark-hover: #b4b4b4 !important;
  --insights-active: #b4b4b4 !important;
  --insights-accent: #838383 !important;
  --insights-soft-accent: #efefef !important;
  --insights-warm-strong: #efefef !important
}
.cz-workspace > .cz-shell__header .cz-brand span {
  color: #838383 !important
}
.cz-workspace__sidebar-foot > p {
  color: #838383 !important
}
.cz-workspace__logout:hover {
  color: #838383 !important
}
.cz-workspace__card:hover,
.cz-workspace__card--accent:hover {
  border-color: #b4b4b4 !important
}
.cz-workspace__mark {
  color: #838383 !important
}
.cz-workspace__card--accent {
  border-color: #838383 !important
}
.cz-workspace__card--accent:hover {
  border-color: #b4b4b4 !important;
  background: #f9f9f9 !important
}
.cz-workspace__card--accent .cz-workspace__mark {
  color: #838383 !important
}
.cz-skill-hub {
  --skill-hub-taupe: #b4b4b4 !important;
  --skill-hub-deep-taupe: #838383 !important;
  --skill-hub-soft: #efefef !important;
  --skill-hub-canvas: #f9f9f9 !important
}
.cz-skill-hub__plugin-card:hover {
  border-color: #b4b4b4 !important
}
.cz-skill-hub__manage-card:hover {
  border-color: #b4b4b4 !important
}
.cz-skill-hub__catalog-plugin:hover {
  border-color: #b4b4b4 !important
}
.cz-skill-hub__anomaly {
  border: 1px solid #c1c1c1 !important
}
.cz-skill-hub__anomaly > span {
  color: #505050 !important
}
.cz-skill-hub__device-summary:hover {
  border-color: #b4b4b4 !important
}
.shared-conflict-actions {
  border: 1px solid #c4c4c4 !important;
  color: #585858 !important
}

/* Portal, account, KOL, Skill Hub and improvement surfaces. */
body.cz-auth,.cz-workspace,.cz-login { background: var(--sys-bg) !important; color: var(--sys-text) !important; }
.cz-workspace > .cz-shell__header { background: var(--sys-sidebar) !important; border-color: var(--sys-line) !important; }
.cz-shell__nav a { border-radius: 8px !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; }
.cz-shell__nav a.is-active { background: var(--sys-selected) !important; color: var(--sys-blue) !important; }
.cz-shell__nav a:hover { background: #e6eaf0 !important; }
.cz-workspace__card,.cz-workspace__identity,.cz-login__panel { background: #fff !important; border: 1px solid var(--sys-line) !important; border-radius: 12px !important; box-shadow: var(--sys-shadow) !important; backdrop-filter: none !important; }
.cz-workspace__card:hover { border-color: #a9c9ef !important; box-shadow: 0 3px 12px #2021240a !important; }
.cz-workspace__card-icon { background: var(--sys-selected) !important; color: var(--sys-blue) !important; border-radius: 10px !important; }
.cz-workspace__intro h1 { margin-bottom: 8px !important; }
.cz-workspace__lead { color: var(--sys-muted) !important; font-size: 14px !important; }
.cz-workspace__sidebar-foot p,.cz-workspace__eyebrow,.cz-brand span { color: var(--sys-muted) !important; letter-spacing: .025em !important; font-size: 12px !important; }
.cz-workspace__card strong { font-size: 16px !important; font-weight: 600 !important; }
.cz-workspace__card small { color: var(--sys-muted) !important; font-size: 13px !important; }
.cz-login__panel { transform: none !important; padding: 32px !important; }
.cz-login__card input { min-height: 44px !important; border-color: #c6cbd2 !important; border-radius: 8px !important; }
.cz-login__dingtalk { background: var(--sys-blue) !important; border-radius: 8px !important; }
.cz-login__card button { border-radius: 8px !important; }
.cz-shell,.cz-admin,.cz-improvements,.cz-improvement-page { background: var(--sys-bg) !important; }
.cz-panel,.cz-account-card,.cz-improvement-card,.cz-form-card,.sh-card,.kol-card { border-color: var(--sys-line) !important; border-radius: 12px !important; }
.kol-flow,.kol-app,.kol-shared { --kol-accent: var(--sys-blue); --kol-ink: var(--sys-text); --kol-muted: var(--sys-muted); --kol-paper: #fff; --kol-line: var(--sys-line); }

/* Small identity mark; one clear heading and quiet supporting information. */
.cz-workspace > .cz-shell__header .cz-brand { min-height: 60px !important; padding: 0 10px 16px !important; gap: 0 !important; align-content: center !important; }
.cz-workspace > .cz-shell__header .cz-brand img { width: 76px !important; max-width: 76px !important; height: auto !important; }
.cz-login > .cz-brand img { width: 88px !important; height: auto !important; }
.cz-skill-hub { --skill-hub-ink: var(--sys-text) !important; --skill-hub-muted: var(--sys-muted) !important; --skill-hub-taupe: var(--sys-selected) !important; --skill-hub-deep-taupe: var(--sys-muted) !important; --skill-hub-soft: #f7f8fa !important; --skill-hub-canvas: var(--sys-bg) !important; --skill-hub-line: var(--sys-line) !important; }
.cz-skill-hub__admin-tabs a.is-active,.cz-skill-hub__switcher a.is-active { background: var(--sys-selected) !important; border-color: #c7dbf5 !important; color: var(--sys-blue) !important; }
.cz-skill-hub__admin-tabs a,.cz-skill-hub__switcher a { border-radius: 8px !important; font-weight: 500 !important; }
.cz-skill-hub__admin-panel { margin-top: 24px !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; }
.cz-skill-hub__demo-note { border-radius: 8px !important; margin-top: 16px !important; }
.cz-skill-hub__switcher { flex-wrap: wrap !important; overflow: visible !important; }
.cz-workspace__intro { gap: 20px !important; }
.cz-workspace__identity { padding: 12px 16px !important; }

.cz-workspace__intro { align-items: center !important; }
.cz-workspace__identity { min-height: 0 !important; gap: 4px !important; }

/* Shared application shell: identical navigation and content origin on every page. */
.cz-shell { display:grid !important; grid-template-columns:212px minmax(0,1fr); padding:0 !important; min-height:100vh; }
.cz-shell > .cz-shell__header { position:sticky; top:0; height:100vh; min-width:0; padding:22px 14px 16px; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:18px; background:var(--sys-sidebar); border-right:1px solid var(--sys-line); }
.cz-shell > .cz-shell__header .cz-brand { padding:0 10px 16px; min-height:60px; border-bottom:1px solid var(--sys-line); }
.cz-shell > .cz-shell__header .cz-brand img { width:76px !important; max-width:76px !important; height:auto !important; }
.cz-shell > .cz-shell__header .cz-shell__nav { display:flex; flex-direction:column; align-items:stretch; width:100%; margin:0; gap:6px; }
.cz-shell__nav a { padding:10px 12px; min-height:40px; border:0 !important; }
.cz-shell > .cz-shell__header > form { margin-top:auto; }
.cz-shell > .cz-shell__content { width:100%; min-width:0; max-width:1280px; margin:0 auto !important; padding:32px clamp(20px,3vw,40px) 48px; }
.cz-shell__content h1 { margin:0 0 12px !important; }
.cz-shell__content > .cz-help { margin:0 0 24px; max-width:760px; line-height:1.65; }
.cz-settings-panel { margin-top:24px; padding:24px; background:#fff; border:1px solid var(--sys-line); border-radius:12px; max-width:840px; }
.cz-settings-panel h2 { margin:0 0 8px; }
.cz-settings { display:block; border:0; }
.cz-settings > div { display:grid; grid-template-columns:140px minmax(0,1fr); gap:16px; min-height:64px; padding:18px 0 !important; align-items:start; border-color:var(--sys-line); }
.cz-settings > div:last-child { border-bottom:0; }
.cz-settings strong { font-size:15px !important; line-height:1.7; font-weight:500 !important; overflow-wrap:anywhere; }
.cz-settings-panel + .cz-help { margin-top:16px; }
.cz-account { border-radius:12px; grid-template-columns:minmax(140px,.6fr) 2fr; gap:24px; padding:20px; border-color:var(--sys-line); }
.cz-account strong { font-size:15px; font-weight:600; }
.cz-account__checks { gap:12px 20px; }
.cz-account__checks label { display:inline-flex; align-items:center; gap:6px; line-height:1.5; }
.cz-account__checks small { background:var(--sys-selected) !important; color:var(--sys-blue) !important; font-size:12px !important; }
.cz-accounts-form { padding-bottom:0; }
.cz-accounts__actions { position:sticky; bottom:16px; margin-top:20px; border-radius:12px; background:#fff !important; padding:12px; box-shadow:var(--sys-shadow); backdrop-filter:none; }
.cz-improvement-center__heading { margin-bottom:20px; }
.cz-improvement-center__heading .cz-help { max-width:760px; line-height:1.65; }
.cz-improvement-center__tabs { display:flex; gap:6px; margin:0 0 24px; padding:4px; background:#e9ebef; border-radius:10px; width:fit-content; max-width:100%; }
.cz-improvement-center__tabs a { min-height:36px; padding:8px 16px; border:0 !important; border-radius:8px; background:transparent !important; color:var(--sys-muted) !important; font-size:14px; font-weight:500; }
.cz-improvement-center__tabs a.is-active { background:#fff !important; color:var(--sys-blue) !important; box-shadow:var(--sys-shadow); }
.cz-improvement-form--standalone { width:100%; max-width:840px; margin:0; padding:24px; border-radius:12px; }
.cz-improvement-form--standalone > button { justify-self:start; }
.cz-improvement-board--standalone { padding:24px; border:1px solid var(--sys-line); border-radius:12px; background:#fff; }
.cz-improvement-filters a { border-radius:8px; }
.cz-improvement-filters a.is-active { background:var(--sys-selected) !important; color:var(--sys-blue) !important; border-color:#c7dbf5 !important; }
@media(max-width:760px) {
 .cz-shell { grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr; }
 .cz-shell > .cz-shell__header { position:static; height:auto; padding:16px; border-right:0; border-bottom:1px solid var(--sys-line); gap:12px; }
 .cz-shell > .cz-shell__header .cz-brand { padding:0; min-height:0; border:0; }
 .cz-shell > .cz-shell__header .cz-shell__nav { flex-direction:row; flex-wrap:wrap; gap:4px; }
 .cz-shell > .cz-shell__header > form { margin:0; }
 .cz-shell__nav a { padding:8px 10px; }
 .cz-shell > .cz-shell__content { padding:24px 16px 32px; }
 .cz-settings-panel,.cz-improvement-form--standalone,.cz-improvement-board--standalone { padding:16px; }
 .cz-settings > div { grid-template-columns:100px minmax(0,1fr); gap:12px; }
 .cz-account { grid-template-columns:1fr; gap:16px; }
 .cz-improvement-center__heading { align-items:flex-start; }
}

.cz-improvement,.cz-improvement-advanced { border-radius:12px; border-color:var(--sys-line); }
.cz-improvement { padding:24px; }
.cz-improvement__meta span { border-radius:6px; }
@media(max-width:760px) { .cz-improvement { padding:16px; } }