/* Workspace UI 2.0 foundations. Published values remain the single source for --sy-* tokens. */
:root {
  --sy-font-family: Inter, "Microsoft YaHei", system-ui, sans-serif;
  --sy-font-size-xs: 12px;
  --sy-font-size-sm: 13px;
  --sy-font-size-body: 14px;
  --sy-font-size-md: 15px;
  --sy-font-size-lg: 16px;
  --sy-font-size-xl: 20px;
  --sy-font-size-page-title: 22px;
  --sy-font-weight-regular: 400;
  --sy-font-weight-medium: 500;
  --sy-font-weight-semibold: 600;
  --sy-line-height-sm: 1.35;
  --sy-line-height-body: 1.5;
  --sy-line-height-lg: 1.65;
  --sy-type-page-size: 22px;
  --sy-type-page-weight: 700;
  --sy-type-page-line-height: 1.35;
  --sy-type-module-size: 16px;
  --sy-type-module-weight: 650;
  --sy-type-module-line-height: 24px;
  --sy-type-subheading-size: 14px;
  --sy-type-subheading-weight: 600;
  --sy-type-subheading-line-height: 20px;
  --sy-type-body-size: 14px;
  --sy-type-body-weight: 400;
  --sy-type-body-line-height: 20px;
  --sy-type-small-size: 13px;
  --sy-type-small-weight: 400;
  --sy-type-small-line-height: 18px;
  --sy-type-label-size: 13px;
  --sy-type-label-weight: 500;
  --sy-type-label-line-height: 18px;
  --sy-type-helper-size: 12px;
  --sy-type-helper-weight: 400;
  --sy-type-helper-line-height: 18px;
  --sy-type-caption-size: 11px;
  --sy-type-caption-weight: 400;
  --sy-type-caption-line-height: 16px;
  --sy-space-1: 4px;
  --sy-space-2: 8px;
  --sy-space-3: 12px;
  --sy-space-4: 16px;
  --sy-space-5: 20px;
  --sy-space-6: 24px;
  --sy-space-7: 32px;
  --sy-space-8: 32px;
  --sy-radius-xs: 6px;
  --sy-radius-sm: 8px;
  --sy-radius-md: 12px;
  --sy-radius-lg: 16px;
  --sy-radius-xl: 20px;
  --sy-radius-full: 999px;
  --sy-color-primary: #f47732;
  --sy-color-primary-hover: #ea6e2d;
  --sy-color-primary-active: #d95f20;
  --sy-color-primary-soft: #fff1e8;
  --sy-bg-page: #f7f7f5;
  --sy-bg-panel: #fafaf8;
  --sy-bg-card: #ffffff;
  --sy-bg-hover: #f1f1ef;
  --sy-bg-selected: #fff1e8;
  --sy-text-primary: #181817;
  --sy-text-secondary: #6f6f6b;
  --sy-text-tertiary: #a3a39e;
  --sy-text-disabled: #aaa39d;
  --sy-text-inverse: #ffffff;
  --sy-border-default: #e8e8e5;
  --sy-border-strong: #ddd7d1;
  --sy-border-focus: #ed7d3b;
  --sy-border-divider: #e9e5e1;
  --sy-border-selected: #ed7d3b;
  --sy-border-width-default: 1px;
  --sy-border-width-strong: 2px;
  --sy-success: #3c8c68;
  --sy-warning: #b9792b;
  --sy-error: #c65e57;
  --sy-info: #5f7898;
  --sy-shadow-sm: 0 2px 8px rgba(36, 34, 30, 0.05);
  --sy-shadow-md: 0 8px 24px rgba(36, 34, 30, 0.08);
  --sy-shadow-lg: 0 20px 60px rgba(36, 34, 30, 0.12);
  --sy-shadow-float: 0 8px 24px rgba(36, 34, 30, 0.10);
  --sy-shadow-modal: var(--sy-shadow-lg);
  --sy-motion-fast: 120ms;
  --sy-motion-normal: 180ms;
  --sy-motion-slow: 240ms;
  --sy-icon-xs: 16px;
  --sy-icon-sm: 18px;
  --sy-icon-md: 20px;
  --sy-icon-lg: 24px;
  --sy-icon-default-color: #64615d;
  --sy-icon-secondary-color: #8d8179;
  --sy-icon-disabled-color: #aba39c;
  --sy-icon-weight: regular;
  --sy-icon-aux: 16px;
  --sy-icon-tool: 18px;
  --sy-icon-body: 20px;
  --sy-icon-nav: 20px;
  --sy-icon-text-gap: 8px;
  --sy-icon-button-size-sm: 32px;
  --sy-icon-button-size-md: 36px;
  --sy-icon-button-size-lg: 40px;
  --sy-icon-button-radius: 8px;
  --sy-icon-button-border-width: 1px;
  --sy-icon-button-border-color: #e9ded5;
  --sy-icon-button-bg: #fffdfb;
  --sy-icon-button-bg-hover: #fff2e9;
  --sy-icon-button-bg-pressed: #ffe5d3;
  --sy-icon-button-bg-selected: #fff0e5;
  --sy-icon-button-color: #8d8179;
  --sy-icon-button-color-hover: #c85d26;
  --sy-icon-button-color-disabled: #aba39c;
  --sy-icon-button-shadow: none;
  --sy-icon-button-padding: 0px;
  --sy-button-height-sm: 28px;
  --sy-button-height-md: 32px;
  --sy-button-height-lg: 36px;
  --sy-input-height: 32px;
  --sy-dropdown-item-height: 32px;
  --sy-card-padding: 16px;
  --sy-form-row-gap: 16px;
  --sy-form-label-gap: 6px;
  --sy-tooltip-padding: 10px;
  --sy-layer-tooltip: 50;
  --sy-table-header-height: 36px;
  --sy-table-row-height: 40px;
  --sy-table-cell-padding-x: 12px;
  --sy-table-cell-padding-y: 8px;
  --sy-table-header-font-size: 12px;
  --sy-table-body-font-size: 13px;
  --sy-table-border: #e8e8e4;
  --sy-table-hover: #fafaf9;
  --sy-table-selected: #fff3eb;
  --sy-table-selected-border: #ed7d3b;
  --sy-table-image-radius: 8px;
  --sy-table-tag-height: 22px;
  --sy-table-avatar-size: 24px;
  /* UI 2.0 semantic aliases point at the existing published token set. */
  --sy-primary: var(--sy-color-primary);
  --sy-primary-hover: var(--sy-color-primary-hover);
  --sy-primary-active: var(--sy-color-primary-active);
  --sy-primary-soft: var(--sy-color-primary-soft);
  --sy-bg-surface: var(--sy-bg-card);
  --sy-bg-subtle: var(--sy-bg-panel);
  --sy-border: var(--sy-border-default);
  --sy-shell-rail-width: 52px;
  --sy-shell-sidebar-default: 236px;
  --sy-shell-sidebar-min: 196px;
  --sy-shell-sidebar-max: 360px;
  --sy-shell-item-height: 36px;
  --sy-shell-section-motion: 180ms;
  --sy-shell-collapse-motion: 240ms;
  --sy-focus: color-mix(in srgb, var(--sy-primary) 22%, transparent);
  --sy-danger: var(--sy-error);
}

/* Shared UI 2.0 rules: keep module-specific layout and virtualized table geometry intact. */
#app { font-family: var(--sy-font-family); color: var(--sy-text-primary); }
#app :is(button, input, select, textarea, [role="button"]):focus-visible {
  outline: 2px solid var(--sy-primary);
  outline-offset: 2px;
}
#app :is(.orange-btn, .ghost, .md-tool, .workspace-global-sidebar .side-btn, .workspace-module-menu button) {
  transition-duration: var(--sy-motion-fast);
}
#app :is(.orange-btn, .ghost):disabled { color: var(--sy-text-disabled); opacity: .48; cursor: not-allowed; }
#app :is(.workspace-module-menu, .chat-messages, .chat-conversations, .chat-contacts, .sv2-body, .account-table-wrap, .quota-table-wrap) {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
#app :is(.workspace-module-menu, .chat-messages, .chat-conversations, .chat-contacts, .sv2-body, .account-table-wrap, .quota-table-wrap)::-webkit-scrollbar { width: 6px; height: 6px; }
#app :is(.workspace-module-menu, .chat-messages, .chat-conversations, .chat-contacts, .sv2-body, .account-table-wrap, .quota-table-wrap)::-webkit-scrollbar-thumb { border-radius: var(--sy-radius-full); background: transparent; }
#app :is(.workspace-module-menu, .chat-messages, .chat-conversations, .chat-contacts, .sv2-body, .account-table-wrap, .quota-table-wrap):is(:hover,.is-scrolling) { scrollbar-color: #bbb7b280 transparent; }
#app :is(.workspace-module-menu, .chat-messages, .chat-conversations, .chat-contacts, .sv2-body, .account-table-wrap, .quota-table-wrap):is(:hover,.is-scrolling)::-webkit-scrollbar-thumb { background: #bbb7b280; }
#app .workspace-global-sidebar .side-btn {
  min-height: 36px;
  gap: 10px;
  border-radius: var(--sy-radius-sm);
  color: var(--sy-text-secondary);
  font-size: 14px;
}
#app .workspace-global-sidebar .side-btn:hover { background: var(--sy-bg-hover); color: var(--sy-color-primary); }
#app .workspace-global-sidebar .side-btn.active { background: var(--sy-color-primary-soft); color: var(--sy-color-primary-active); }
#app .workspace-module-menu button { gap: var(--sy-icon-text-gap); border-radius: var(--sy-radius-sm); }
#app .workspace-module-menu button:hover { background: var(--sy-bg-hover); }
#app .workspace-module-menu button.active { background: var(--sy-color-primary-soft); color: var(--sy-color-primary-active); }
#app .orange-btn { border-radius: var(--sy-radius-sm); background: var(--sy-primary); color: var(--sy-text-inverse); }
#app .orange-btn:hover { background: var(--sy-color-primary-hover); }
#app .orange-btn:active { background: var(--sy-primary-active); }
#app .ghost { border-color: var(--sy-border-default); border-radius: var(--sy-radius-sm); color: var(--sy-text-secondary); }
#app main > header .search { border-color: var(--sy-border-default); border-radius: var(--sy-radius-md); }
#app main > header .search:focus-within { border-color: var(--sy-border-focus); }
#app .field input:not([type=checkbox]), #app .field select { border-color: var(--sy-border-default); border-radius: var(--sy-radius-md); }
#app .field input:not([type=checkbox]):focus, #app .field select:focus { border-color: var(--sy-border-focus); }
#app .tab { border-radius: var(--sy-radius-sm); }
#app .tab.active { color: var(--sy-color-primary-active); }
#app .view-dashboard .panel { border-color: var(--sy-border-default); border-radius: var(--sy-radius-lg); box-shadow: var(--sy-shadow-sm); }
#app .view-dashboard .panel h3 { color: var(--sy-text-primary); }
#app .view-dashboard .panel p { color: var(--sy-text-secondary); }
#app .md-workspace { --md-accent: var(--sy-color-primary); --md-accent-soft: var(--sy-color-primary-soft); --md-text: var(--sy-text-primary); --md-muted: var(--sy-text-secondary); --md-shadow: var(--sy-shadow-md); }
#app .md-toolbar { border-color: var(--sy-table-border); }
#app .md-tool { border-radius: var(--sy-radius-sm); color: var(--sy-text-secondary); }
#app .md-tool:hover { background: var(--sy-bg-hover); }
#app .md-tool.active { background: var(--sy-bg-selected); color: var(--sy-color-primary-active); }
#app .md-grid-head { background: var(--sy-bg-panel); border-color: var(--sy-table-border); }
#app .md-grid-header { color: var(--sy-text-secondary); font-size: var(--sy-table-header-font-size); }
#app .md-grid-row { border-color: var(--sy-table-border); }
#app .md-grid-row:hover { background: var(--sy-table-hover); }
#app .md-grid-cell { border-color: var(--sy-table-border); font-size: var(--sy-table-body-font-size); }
/* Search focus stays neutral throughout the workspace; focus-visible keeps a soft cue. */
:root { --sy-search-focus-border: #d8d5d1; --sy-search-focus-ring: rgba(60,55,50,.06); }
#app :is(.search,.account-search,.md-toolbar-search,.conversation-search):focus-within {
  border-color: var(--sy-search-focus-border) !important;
  box-shadow: 0 0 0 2px var(--sy-search-focus-ring) !important;
}
#app :is(.search,.account-search,.md-toolbar-search,.conversation-search) > :is(span,svg,sy-icon) {
  align-self: center;
  flex: none;
}
body input:is([type="search"],[placeholder*="搜索"],[aria-label*="搜索"],[id*="Search"],[data-account-logs-search],[data-art-search]):is(:focus,:focus-visible) {
  border-color: var(--sy-search-focus-border) !important;
  box-shadow: 0 0 0 2px var(--sy-search-focus-ring) !important;
  outline: none !important;
}
#app :is(.search,.account-search,.md-toolbar-search,.conversation-search) > input:is(:focus,:focus-visible) {
  border-color: transparent !important;
  box-shadow: none !important;
}
#app .md-toolbar-search { --sy-search-inline-size: 190px; }
#app .md-toolbar-search:focus-within { width: var(--sy-search-inline-size); border: 1px solid var(--sy-search-focus-border) !important; }
#app main:has(> #content.view-dashboard) > header .search { display: none !important; }
@media (min-width: 1024px) {
  #app main:has(> #content.view-dashboard) > header { grid-template-columns: minmax(0,1fr) auto; }
  #app main:has(> #content.view-dashboard) > header > .actions {
    display: flex;
    align-items: center;
    justify-self: end;
    margin-left: auto;
    gap: 8px;
  }
  #app main:has(> #content.view-dashboard) > header > .actions > .round {
    display: grid;
    place-items: center;
    width: var(--sy-icon-button-size-md);
    min-width: var(--sy-icon-button-size-md);
    height: var(--sy-icon-button-size-md);
    padding: 0;
  }
  #app main:has(> #content.view-dashboard) > header > .header-create { display: none; }
}
@media (max-width: 1100px) { #app .md-toolbar-search { --sy-search-inline-size: 132px; } }
@media (max-width: 980px) { #app .md-toolbar-search { --sy-search-inline-size: 150px; } }
@media (max-width: 760px) { #app .md-toolbar-search { --sy-search-inline-size: min(100%,220px); } }
@media(max-width:767px) {
  #app .workspace-global-sidebar .side-btn, #app .workspace-module-menu button { min-height:44px; }
  #app .orange-btn, #app .ghost { min-height:44px; }
}

/* Shared real-page shell; module layouts and business-specific status colors stay local. */
@media (min-width: 1024px) {
  #app.workspace-shell .workspace-global-sidebar .side-btn {
    display: flex;
    align-items: center;
    font-weight: 500;
  }
  #app.workspace-shell .workspace-global-sidebar .side-btn .ico {
    width: var(--sy-icon-nav);
    min-width: var(--sy-icon-nav);
    height: var(--sy-icon-nav);
    flex: none;
  }
  #app.workspace-shell .workspace-global-sidebar .side-btn.active {
    font-weight: 600;
  }
  #app.workspace-shell.workspace-global-compact .workspace-global-sidebar .side-btn {
    width: 36px;
    min-height: 36px;
    height: 36px;
    gap: 0;
    justify-content: center;
    margin-inline: auto;
    padding: 0;
    border-radius: var(--sy-radius-md);
  }
  #app.workspace-shell.workspace-global-compact .workspace-global-sidebar .side-btn .side-label,
  #app.workspace-shell.workspace-global-compact .workspace-global-sidebar .brand > div:last-of-type,
  #app.workspace-shell.workspace-global-compact .workspace-global-sidebar .online span,
  #app.workspace-shell.workspace-global-compact .workspace-global-sidebar .profile > div,
  #app.workspace-shell.workspace-global-compact .workspace-global-sidebar .profile > strong { display: none; }
  #app.workspace-shell.workspace-global-compact .workspace-global-sidebar .side-btn .ico {
    margin: 0;
    color: currentColor;
  }
  #app.workspace-shell.workspace-global-compact .workspace-global-sidebar .side-btn.active .ico { color: var(--sy-primary-active); }
  #app.workspace-shell.workspace-global-compact .workspace-global-sidebar .side-btn:hover .ico { color: var(--sy-primary); }
  #app.workspace-shell .workspace-main > header {
    padding-inline: var(--sy-space-6) !important;
    background: var(--sy-bg-surface);
    border-color: var(--sy-border);
  }
  #app.workspace-shell .workspace-main > header .page-heading h1 {
    font-size: var(--sy-type-page-size);
    line-height: var(--sy-type-page-line-height);
    font-weight: var(--sy-type-page-weight);
    color: var(--sy-text-primary);
    letter-spacing: -.035em;
  }
  #app.workspace-shell .workspace-main:has(> #content:is(.view-help,.view-trash)) > header {
    grid-template-columns: minmax(0,1fr) auto;
  }
  #app.workspace-shell .workspace-main:has(> #content:is(.view-help,.view-trash)) > header .search { display: none; }
  #app.workspace-shell .workspace-main:has(> #content:is(.view-help,.view-trash)) > header .actions {
    display: flex;
    align-items: center;
    justify-self: end;
    margin-left: auto;
    gap: var(--sy-space-2);
  }
  #app.workspace-shell .workspace-main > #content:not(.view-chat):not(.view-aiCanvas) {
    background: var(--sy-bg-page);
  }
  #app.workspace-shell .workspace-main > #content:not(.view-chat):not(.view-aiCanvas):not(.view-attendance):not(.view-users) {
    padding-inline: var(--sy-space-6);
  }
  #app.workspace-shell .workspace-module-sidebar { background: var(--sy-bg-panel); border-color: var(--sy-border); }
  #app.workspace-shell .workspace-module-header { border-color: var(--sy-border); }
  #app.workspace-shell .workspace-module-menu button { min-height: var(--sy-shell-item-height); color: var(--sy-text-secondary); font-size: 13px; }
  #app.workspace-shell .workspace-module-menu button.active { background: var(--sy-primary-soft); color: var(--sy-primary-active); }
  #app.workspace-shell :is(.orange-btn,.ghost,.soft-btn) { border-radius: var(--sy-radius-sm); box-shadow: none; }
  #app.workspace-shell :is(.orange-btn,.ghost,.soft-btn) { display: inline-flex; align-items: center; justify-content: center; gap: var(--sy-icon-text-gap); }
  #app.workspace-shell :is(.round,.workspace-module-collapse) { display: grid; place-items: center; }
  #app.workspace-shell :is(.personal-card,.help-guide-grid .panel,.view-trash .panel,.sv2-panel,.account-org-main,.account-members-view,.quota-members-panel) {
    border: 1px solid var(--sy-border);
    border-radius: var(--sy-radius-lg);
    background: var(--sy-bg-surface);
    box-shadow: none;
  }
  #app.workspace-shell .personal-card:hover { border-color: var(--sy-border-strong); box-shadow: var(--sy-shadow-sm); }
  #app.workspace-shell .personal-desktop-head {
    border: 1px solid var(--sy-border);
    border-radius: var(--sy-radius-lg);
    background: linear-gradient(115deg, var(--sy-bg-card), var(--sy-primary-soft));
    box-shadow: none;
  }
  #app.workspace-shell .help-shell > .panel {
    border: 0;
    border-radius: 0;
    padding: 4px 0 10px;
    background: transparent;
    box-shadow: none;
  }
  #app.workspace-shell .help-guide-grid .panel { padding: var(--sy-space-5); }
  #app.workspace-shell .help-guide-grid ol,
  #app.workspace-shell .help-shell p { color: var(--sy-text-secondary); }
  #app.workspace-shell .docs-shell { gap: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  #app.workspace-shell .docs-main { border: 1px solid var(--sy-border); border-radius: var(--sy-radius-lg); }
  #app.workspace-shell .docs-category { min-height: 38px; border-radius: var(--sy-radius-sm); }
  #app.workspace-shell .docs-category.active { color: var(--sy-primary-active); background: var(--sy-primary-soft); box-shadow: none; }
  #app.workspace-shell .workspace-module-content .chat-conversation:hover { background: var(--sy-bg-hover) !important; }
  #app.workspace-shell .workspace-module-content .chat-conversation.active { background: var(--sy-bg-selected) !important; }
  #app.workspace-shell .view-chat :is(.chat-main,.chat-messages) { background: var(--sy-bg-page) !important; }
  #app.workspace-shell .view-chat .chat-main-head { background: var(--sy-bg-surface) !important; border-color: var(--sy-border) !important; }
  #app.workspace-shell .document-row { border-color: var(--sy-border); color: var(--sy-text-primary); }
  #app.workspace-shell .document-row:hover { border-radius: 0; background: var(--sy-bg-hover); }
  #app.workspace-shell :is(.docs-table-head,.trash-head,.data-table th,.account-member-table th,.quota-table th) {
    color: var(--sy-text-secondary);
    background: var(--sy-bg-panel);
    font-size: var(--sy-font-size-sm);
    font-weight: 600;
  }
  #app.workspace-shell :is(.data-table td,.account-member-table td,.quota-table td,.trash-row) { border-color: var(--sy-border); }
  #app.workspace-shell .trash-panel { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  #app.workspace-shell .trash-batch { border-color: var(--sy-border); border-radius: var(--sy-radius-md); }
  #app.workspace-shell .trash-row:not(.trash-head):hover { background: var(--sy-bg-hover); }
  #app.workspace-shell .schedule-v2,
  #app.workspace-shell .admin-page-shell { background: var(--sy-bg-page); }
  #app.workspace-shell .sv2-body,
  #app.workspace-shell .admin-tab-stage { gap: var(--sy-space-4); }
  #app.workspace-shell .account-department-head,
  #app.workspace-shell .account-logs-head { border-color: var(--sy-border); }
}