/* Sage UI · 独立精简版。直接维护此文件；无需构建。
   语义颜色与字体来自 DesignLang style/ 2.0.0，统一加 sage 前缀。
   主题变量可全局使用；组件与基础排版只在 .sage-ui 内生效。 */
@font-face {
  font-family: 'Manrope';
  src: url('./fonts/manrope-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('./fonts/ibm-plex-mono-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* 1. 主题：明确浅色 / 深色；省略属性或 system 时跟随系统。 */
:root, [data-sage-theme="light"], [data-sage-theme="system"] {
  color-scheme: light;
  --sage-background: #f4f6f4;
  --sage-foreground: #202724;
  --sage-card: #ffffff;
  --sage-card-foreground: #202724;
  --sage-popover: #ffffff;
  --sage-popover-foreground: #202724;
  --sage-primary: #526f62;
  --sage-primary-foreground: #ffffff;
  --sage-primary-ink: #315c4d;
  --sage-secondary: #edf1ed;
  --sage-secondary-foreground: #202724;
  --sage-muted: #eef1ee;
  --sage-muted-foreground: #66716b;
  --sage-accent: #eaf0eb;
  --sage-accent-foreground: #202724;
  --sage-destructive: #a33d35;
  --sage-destructive-foreground: #ffffff;
  --sage-destructive-ink: #a33d35;
  --sage-border: #e3e7e3;
  --sage-row-divider: #e8ece8;
  --sage-row-hover: #dbe7de;
  --sage-row-hover-muted-foreground: #536359;
  --sage-section-surface: var(--sage-card);
  --sage-input: #9ba89f;
  --sage-ring: #315c4d;
  --sage-sidebar: #f0f3f0;
  --sage-sidebar-foreground: #202724;
  --sage-signal: #e5ece6;
  --sage-signal-foreground: #45584b;
  --sage-positive: #315c4d;
  --sage-positive-foreground: #ffffff;
  --sage-positive-ink: #315c4d;
  --sage-sunken: #eff2ef;
  --sage-sunken-strong: #ecf0ec;
  --sage-scrim: rgb(19 30 23 / 0.28);
  --sage-lifted-shadow: 0 20px 64px rgb(20 35 25 / 0.12);
  --sage-control-boundary: var(--sage-muted-foreground);
}
[data-sage-theme="dark"] {
  color-scheme: dark;
  --sage-background: #191e1b;
  --sage-foreground: #edf1ee;
  --sage-card: #202722;
  --sage-card-foreground: #edf1ee;
  --sage-popover: #252e28;
  --sage-popover-foreground: #edf1ee;
  --sage-primary: #a2baaa;
  --sage-primary-foreground: #1a3023;
  --sage-primary-ink: #b7d3c2;
  --sage-secondary: #29342d;
  --sage-secondary-foreground: #e5ece7;
  --sage-muted: #252e28;
  --sage-muted-foreground: #adb8b0;
  --sage-accent: #303d34;
  --sage-accent-foreground: #edf1ee;
  --sage-destructive: #c87b72;
  --sage-destructive-foreground: #211816;
  --sage-destructive-ink: #efaaa1;
  --sage-border: #354038;
  --sage-row-divider: #303a33;
  --sage-row-hover: #35483c;
  --sage-row-hover-muted-foreground: #c0ccc3;
  --sage-section-surface: var(--sage-card);
  --sage-input: #65756b;
  --sage-ring: #b7d3c2;
  --sage-sidebar: #1d251f;
  --sage-sidebar-foreground: #edf1ee;
  --sage-signal: #334238;
  --sage-signal-foreground: #c2d2c7;
  --sage-positive: #b7d3c2;
  --sage-positive-foreground: #1a3023;
  --sage-positive-ink: #b7d3c2;
  --sage-sunken: #1c231e;
  --sage-sunken-strong: #263029;
  --sage-scrim: rgb(0 0 0 / 0.5);
  --sage-lifted-shadow: 0 20px 64px rgb(0 0 0 / 0.32);
  --sage-control-boundary: var(--sage-muted-foreground);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-sage-theme]), [data-sage-theme="system"] {
  color-scheme: dark;
  --sage-background: #191e1b;
  --sage-foreground: #edf1ee;
  --sage-card: #202722;
  --sage-card-foreground: #edf1ee;
  --sage-popover: #252e28;
  --sage-popover-foreground: #edf1ee;
  --sage-primary: #a2baaa;
  --sage-primary-foreground: #1a3023;
  --sage-primary-ink: #b7d3c2;
  --sage-secondary: #29342d;
  --sage-secondary-foreground: #e5ece7;
  --sage-muted: #252e28;
  --sage-muted-foreground: #adb8b0;
  --sage-accent: #303d34;
  --sage-accent-foreground: #edf1ee;
  --sage-destructive: #c87b72;
  --sage-destructive-foreground: #211816;
  --sage-destructive-ink: #efaaa1;
  --sage-border: #354038;
  --sage-row-divider: #303a33;
  --sage-row-hover: #35483c;
  --sage-row-hover-muted-foreground: #c0ccc3;
  --sage-section-surface: var(--sage-card);
  --sage-input: #65756b;
  --sage-ring: #b7d3c2;
  --sage-sidebar: #1d251f;
  --sage-sidebar-foreground: #edf1ee;
  --sage-signal: #334238;
  --sage-signal-foreground: #c2d2c7;
  --sage-positive: #b7d3c2;
  --sage-positive-foreground: #1a3023;
  --sage-positive-ink: #b7d3c2;
  --sage-sunken: #1c231e;
  --sage-sunken-strong: #263029;
  --sage-scrim: rgb(0 0 0 / 0.5);
  --sage-lifted-shadow: 0 20px 64px rgb(0 0 0 / 0.32);
  --sage-control-boundary: var(--sage-muted-foreground);
}
}

/* 2. 字体与尺度。rem 按浏览器默认 16px 根字号理解。 */
:root {
  --sage-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --sage-font-display: 'Manrope', 'PingFang SC', 'Segoe UI', sans-serif;
  --sage-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --sage-radius-control: 0.5rem;
  --sage-radius-group: 0.875rem;
  --sage-radius-overlay: 1rem;
  --sage-control-size: 2.75rem;
  --sage-section-gap: 2rem;
  --sage-row-pad: 1rem;
  --sage-motion-fast: 100ms;
  --sage-motion-base: 180ms;
  --sage-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 3. 可选基础样式。选择器保持低权重，便于宿主覆盖。 */
.sage-ui { margin: 0; background: var(--sage-background); color: var(--sage-foreground); font: 15px/1.6 var(--sage-font-sans); font-synthesis: none; -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
:where(.sage-ui, .sage-ui *, .sage-ui *::before, .sage-ui *::after) { box-sizing: border-box; }
:where(.sage-ui) :where([hidden]) { display: none !important; }
:where(.sage-ui) :where(h1, h2, h3, p) { margin: 0; }
:where(.sage-ui) :where(h1, h2, h3) { font: 600 1rem/1.5 var(--sage-font-display); letter-spacing: -0.025em; }
:where(.sage-ui) :where(h1) { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.3; letter-spacing: -0.035em; }
:where(.sage-ui) :where(h1, h2, h3):is(:lang(zh), :lang(ja), :lang(ko)) { letter-spacing: 0; }
:where(.sage-ui) :where(button, input, select, textarea) { font: inherit; }
:where(.sage-ui) :where(a) { color: var(--sage-primary-ink); text-underline-offset: 0.2em; }
:where(.sage-ui) :where(a, button, summary) { touch-action: manipulation; }
:where(.sage-ui) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--sage-ring); outline-offset: 3px; }
:where(.sage-ui) :where(code, pre) { font-family: var(--sage-font-mono); font-size: 0.8125rem; }
:where(.sage-ui) :where(.sage-muted, .sage-hint) { color: var(--sage-muted-foreground); }
:where(.sage-ui) :where(.sage-hint, .sage-error) { font-size: 0.8125rem; }
:where(.sage-ui) :where(.sage-error) { color: var(--sage-destructive-ink); }
:where(.sage-ui) :where(.sage-number) { font: 400 0.875rem/1.6 var(--sage-font-mono); font-variant-numeric: tabular-nums; }

/* 页面、内容组、连续条目。布局断点仅为默认留白。 */
.sage-shell { width: 100%; max-width: 76rem; min-width: 0; margin-inline: auto; padding: 2rem 1.25rem 3rem; display: grid; gap: var(--sage-section-gap); }
.sage-shell--narrow { max-width: 44rem; }
:where(.sage-ui) :where(.sage-section) { display: grid; align-content: start; gap: 0.875rem; min-width: 0; }
:where(.sage-ui) :where(.sage-surface) { background: var(--sage-section-surface); color: var(--sage-card-foreground); border: 0; border-radius: var(--sage-radius-group); box-shadow: none; min-width: 0; }
:where(.sage-ui) :where(.sage-pad) { padding: var(--sage-row-pad); }
:where(.sage-ui) :where(.sage-stack) { display: grid; gap: 1.25rem; min-width: 0; }
:where(.sage-ui) :where(.sage-actions) { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
:where(.sage-ui) :where(.sage-grow) { flex: 1; min-width: 0; }
:where(.sage-ui) :where(.sage-list) { list-style: none; margin: 0; padding: 0 var(--sage-row-pad); }
:where(.sage-ui) :where(.sage-row) { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; min-width: 0; padding-block: 1rem; }
:where(.sage-ui) :where(.sage-row + .sage-row) { border-top: 1px solid var(--sage-row-divider); }
:where(.sage-ui) :where(a.sage-row, button.sage-row) { width: 100%; min-height: var(--sage-control-size); color: inherit; background: transparent; border-inline: 0; border-bottom: 0; text-align: start; text-decoration: none; cursor: pointer; }
:where(.sage-ui) :where(button.sage-row:first-child) { border-top: 0; }

/* 主操作、次操作与状态。交互逻辑由宿主实现。 */
:where(.sage-ui) :where(.sage-button) { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--sage-control-size); min-width: var(--sage-control-size); max-width: 100%; padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: var(--sage-radius-control); background: var(--sage-primary); color: var(--sage-primary-foreground); font-size: 0.875rem; font-weight: 600; line-height: 1.5; text-align: center; text-decoration: none; cursor: pointer; transition: transform var(--sage-motion-fast) var(--sage-ease-out), border-color var(--sage-motion-fast); }
:where(.sage-ui) :where(.sage-button--secondary) { background: var(--sage-secondary); color: var(--sage-secondary-foreground); }
:where(.sage-ui) :where(.sage-button--outline) { background: var(--sage-card); color: var(--sage-card-foreground); border-color: var(--sage-control-boundary); }
:where(.sage-ui) :where(.sage-button--ghost) { background: transparent; color: var(--sage-primary-ink); }
:where(.sage-ui) :where(.sage-button--danger) { background: var(--sage-destructive); color: var(--sage-destructive-foreground); }
:where(.sage-ui) :where(.sage-button):disabled { opacity: 0.45; cursor: not-allowed; }
:where(.sage-ui) :where(.sage-button):not(:disabled):active { transform: scale(0.985); }
:where(.sage-ui) :where(.sage-badge) { display: inline-flex; padding: 0.25rem 0.5rem; background: var(--sage-signal); color: var(--sage-signal-foreground); border-radius: 0.375rem; font-size: 0.75rem; font-weight: 500; }

/* 原生表单，避免自造复杂组件。 */
:where(.sage-ui) :where(.sage-field) { display: grid; gap: 0.5rem; min-width: 0; }
:where(.sage-ui) :where(.sage-field > label) { font-size: 0.875rem; font-weight: 600; }
:where(.sage-ui) :where(.sage-input) { width: 100%; min-width: 0; min-height: var(--sage-control-size); padding: 0.5rem 0.75rem; border: 1px solid var(--sage-control-boundary); border-radius: var(--sage-radius-control); background: var(--sage-card); color: var(--sage-card-foreground); }
:where(.sage-ui) :where(.sage-input)::placeholder { color: var(--sage-muted-foreground); opacity: 1; }
:where(.sage-ui) :where(textarea.sage-input) { resize: vertical; }
:where(.sage-ui) :where(.sage-input[readonly]) { background: var(--sage-sunken); }
:where(.sage-ui) :where(.sage-input):disabled { background: var(--sage-muted); opacity: 0.55; cursor: not-allowed; }
:where(.sage-ui) :where(.sage-input[aria-invalid="true"]) { border-color: var(--sage-destructive-ink); }
:where(.sage-ui) :where(.sage-check) { display: flex; align-items: center; gap: 0.75rem; min-height: var(--sage-control-size); cursor: pointer; }
:where(.sage-ui) :where(.sage-check input) { width: 1.125rem; height: 1.125rem; margin: 0; flex: none; accent-color: var(--sage-primary); }

/* 只有真实浮层使用阴影。 */
:where(.sage-ui) :where(.sage-dialog) { width: min(32rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.5rem; overflow-y: auto; border: 1px solid var(--sage-border); border-radius: var(--sage-radius-overlay); background: var(--sage-popover); color: var(--sage-popover-foreground); box-shadow: var(--sage-lifted-shadow); }
:where(.sage-ui) :where(.sage-dialog)::backdrop { background: var(--sage-scrim); }
:where(.sage-ui) :where(.sage-dialog .sage-surface) { --sage-section-surface: var(--sage-background); }

@media (hover: hover) {
  :where(.sage-ui) :where(.sage-button):not(:disabled):hover { border-color: currentColor; }
  :where(.sage-ui) :where(a.sage-row, button.sage-row):not(:disabled):hover { background: var(--sage-row-hover); }
  :where(.sage-ui) :where(a.sage-row, button.sage-row):not(:disabled):hover :where(.sage-muted, .sage-hint) { color: var(--sage-row-hover-muted-foreground); }
}
@media (min-width: 768px) {
  :root { --sage-section-gap: 2.5rem; --sage-row-pad: 1.5rem; }
  .sage-shell { padding: 3rem 2.5rem 4rem; }
}
@media (pointer: coarse) { :where(.sage-ui) :where(.sage-input) { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) {
  :where(.sage-ui, .sage-ui *, .sage-ui *::before, .sage-ui *::after) { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  :where(.sage-ui) :where(.sage-button):active { transform: none; }
}
@media (forced-colors: active) {
  :where(.sage-ui) :where(.sage-button, .sage-input, .sage-badge, .sage-dialog) { border: 1px solid ButtonText; }
  :where(.sage-ui) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: Highlight; }
}