/* One palette shared by the native shell and nonce-protected extension frames. */
:root {
  color-scheme: light dark;
  --ui-bg: light-dark(#fafafa, #101012);
  --ui-surface: light-dark(#ffffff, #161618);
  --ui-soft: light-dark(#f5f5f6, #1c1c20);
  --ui-raised: light-dark(#ffffff, #202024);
  --ui-text: light-dark(#18181b, #ededf0);
  --ui-muted: light-dark(#65656f, #a0a0aa);
  --ui-faint: light-dark(#85858f, #7c7c88);
  --ui-border: light-dark(#e6e6e9, #2b2b31);
  --ui-border-strong: light-dark(#ceced4, #44444e);
  --ui-accent: light-dark(#202024, #ededf0);
  --ui-on-accent: light-dark(#ffffff, #18181b);
  --ui-selected: light-dark(#ededf0, #29292f);
  --ui-focus: light-dark(#6366c9, #a5a6ff);
  --ui-success: light-dark(#21734c, #87cba5);
  --ui-success-soft: light-dark(#edf7f0, #182c22);
  --ui-warning: light-dark(#92651b, #e3bd7e);
  --ui-warning-soft: light-dark(#fbf5e9, #30271b);
  --ui-danger: light-dark(#b63a44, #f498a0);
  --ui-danger-soft: light-dark(#fdf0f1, #342024);
  --ui-info: light-dark(#5962a8, #b2b7ee);
  --ui-info-soft: light-dark(#f0f1fa, #25263b);
  --ui-shadow: 0 12px 40px light-dark(#18181b14, #0005), 0 2px 6px light-dark(#18181b08, #0003);
  --ui-font: Inter, "Noto Sans SC", "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-mono: "SFMono-Regular", "Cascadia Code", Consolas, monospace;
}

/* The native toggle overrides the OS, including inside opaque frames. */
:root[data-ui-native], :root[data-ui-theme="light"] { color-scheme: light; }
:root.dark[data-ui-native], :root[data-ui-theme="dark"] { color-scheme: dark; }

/* Scoped to the pinned native SPA; extension documents share only the tokens. */
html[data-ui-native] {
  --el-color-primary: var(--ui-accent);
  --el-color-primary-light-3: var(--ui-muted);
  --el-color-primary-light-5: var(--ui-faint);
  --el-color-primary-light-7: var(--ui-border-strong);
  --el-color-primary-light-8: var(--ui-border);
  --el-color-primary-light-9: var(--ui-selected);
  --el-color-primary-dark-2: var(--ui-text);
  --el-color-success: var(--ui-success);
  --el-color-success-light-9: var(--ui-success-soft);
  --el-color-warning: var(--ui-warning);
  --el-color-warning-light-9: var(--ui-warning-soft);
  --el-color-danger: var(--ui-danger);
  --el-color-danger-light-9: var(--ui-danger-soft);
  --el-color-error: var(--ui-danger);
  --el-color-error-light-9: var(--ui-danger-soft);
  --el-color-info: var(--ui-muted);
  --el-color-info-light-9: var(--ui-soft);
  --el-bg-color: var(--ui-surface);
  --el-bg-color-page: var(--ui-bg);
  --el-bg-color-overlay: var(--ui-raised);
  --el-fill-color: var(--ui-selected);
  --el-fill-color-light: var(--ui-soft);
  --el-fill-color-lighter: var(--ui-bg);
  --el-fill-color-extra-light: var(--ui-bg);
  --el-fill-color-blank: var(--ui-surface);
  --el-text-color-primary: var(--ui-text);
  --el-text-color-regular: var(--ui-text);
  --el-text-color-secondary: var(--ui-muted);
  --el-text-color-placeholder: var(--ui-faint);
  --el-text-color-disabled: var(--ui-faint);
  --el-border-color: var(--ui-border);
  --el-border-color-light: var(--ui-border);
  --el-border-color-lighter: var(--ui-border);
  --el-border-color-extra-light: var(--ui-soft);
  --el-border-color-dark: var(--ui-border-strong);
  --el-border-color-darker: var(--ui-border-strong);
  --el-border-color-hover: var(--ui-border-strong);
  --el-font-family: var(--ui-font);
  --el-font-size-base: 13px;
  --el-border-radius-base: 6px;
  --el-border-radius-small: 4px;
  --el-box-shadow: var(--ui-shadow);
  --el-box-shadow-light: var(--ui-shadow);
  --el-box-shadow-lighter: none;
  --el-transition-duration: .16s;
  background: var(--ui-bg);
}
html[data-ui-native] body { color: var(--ui-text); font-size: 13px; -webkit-font-smoothing: antialiased; }
html[data-ui-native] button { font-family: inherit; }
html[data-ui-native] :focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
html[data-ui-native] ::selection { background: var(--ui-selected); color: var(--ui-text); }
html[data-ui-native] #app > .el-container { height: 100dvh !important; }
html[data-ui-native] .el-container { min-width: 0; min-height: 0; }
html[data-ui-native] .sidebar {
  background: var(--ui-bg);
  border-right: 1px solid var(--ui-border);
  height: 100dvh;
  overflow: hidden;
}
html[data-ui-native] .sidebar:has(.el-menu:not(.el-menu--collapse)) { width: 212px; }
html[data-ui-native] .sidebar .logo { height: 56px; min-height: 56px; justify-content: flex-start; padding: 0 18px; border-bottom: 0; font-size: 16px; letter-spacing: -.025em; gap: 10px; }
html[data-ui-native] .sidebar .logo-img { width: 27px; height: 27px; }
html[data-ui-native] .sidebar .el-menu { padding: 10px 8px; background: transparent; overflow-y: auto; }
html[data-ui-native] .sidebar .el-menu-item { height: 36px; line-height: 36px; margin: 3px 0; border-radius: 6px; font-size: 13px; padding-left: 12px !important; color: var(--ui-muted); }
html[data-ui-native] .sidebar .el-menu-item .el-icon { font-size: 17px; width: 22px; margin-right: 9px; }
html[data-ui-native] .sidebar .el-menu-item:hover { background: var(--ui-soft); color: var(--ui-text); }
html[data-ui-native] .sidebar .el-menu-item.is-active { background: var(--ui-selected); color: var(--ui-text); font-weight: 600; }
html[data-ui-native] .sidebar .el-menu--collapse .el-menu-item { padding-left: 12px !important; }
html[data-ui-native] .header { height: 56px; min-height: 56px; padding: 0 20px; background: var(--ui-surface); gap: 14px; }
html[data-ui-native] .header > .el-button { min-width: 30px; padding: 7px; margin: 0; color: var(--ui-muted); }
html[data-ui-native] .header .workspace-breadcrumb { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ui-muted); min-width: 0; }
html[data-ui-native] .workspace-breadcrumb strong { color: var(--ui-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui-native] .workspace-breadcrumb .separator { color: var(--ui-border-strong); }
html[data-ui-native] .el-main { padding: 0; background: var(--ui-surface); min-width: 0; }
html[data-ui-native] .el-card { --el-card-border-radius: 8px; --el-card-padding: 18px; box-shadow: none; border-color: var(--ui-border); }
html[data-ui-native] .el-card.is-hover-shadow:hover { box-shadow: none; border-color: var(--ui-border-strong); }
html[data-ui-native] .el-card__header { font-size: 13px; font-weight: 550; padding: 14px 18px; }
html[data-ui-native] .el-button { font-size: 12px; min-height: 32px; box-shadow: none; }
html[data-ui-native] .el-button--primary:not(.is-link):not(.is-text):not(.is-plain) { --el-button-text-color: var(--ui-on-accent); --el-button-hover-text-color: var(--ui-on-accent); --el-button-hover-bg-color: var(--ui-text); --el-button-hover-border-color: var(--ui-text); --el-button-disabled-text-color: var(--ui-on-accent); }
html[data-ui-native] .el-button--primary.is-plain { --el-button-hover-text-color: var(--ui-on-accent); }
html[data-ui-native] .el-radio-button { --el-radio-button-checked-text-color: var(--ui-on-accent); }
html[data-ui-native] .el-switch.is-checked .el-switch__action { background: var(--ui-on-accent); }
html[data-ui-native] .el-checkbox__input.is-checked .el-checkbox__inner::after { border-color: var(--ui-on-accent); }
html[data-ui-native] .el-checkbox__input.is-indeterminate .el-checkbox__inner::before { background: var(--ui-on-accent); }
html[data-ui-native] .el-radio__input.is-checked .el-radio__inner::after { background: var(--ui-on-accent); }
html[data-ui-native] .el-pagination.is-background .el-pager li.is-active { color: var(--ui-on-accent); }
html[data-ui-native] .el-tag { border-color: transparent; border-radius: 4px; font-size: 11px; font-weight: 500; }
html[data-ui-native] .el-input__wrapper, html[data-ui-native] .el-select__wrapper { background: var(--ui-surface); border-radius: 6px; }
html[data-ui-native] .el-input__wrapper.is-focus, html[data-ui-native] .el-select__wrapper.is-focused { box-shadow: 0 0 0 1px var(--ui-focus) inset; }
html[data-ui-native] .el-tabs__item { font-size: 13px; font-weight: 500; }
html[data-ui-native] .el-dialog { border: 1px solid var(--ui-border); border-radius: 10px; max-width: calc(100vw - 32px); box-shadow: var(--ui-shadow); }
html[data-ui-native] .el-dialog__title { font-size: 17px; font-weight: 600; }
html[data-ui-native] .el-table { --el-table-header-bg-color: var(--ui-bg); --el-table-row-hover-bg-color: var(--ui-soft); font-size: 13px; }
html[data-ui-native] .el-table th.el-table__cell { font-weight: 550; color: var(--ui-muted); }
html[data-ui-native] .el-empty__description p { color: var(--ui-muted); font-size: 13px; }
html[data-ui-native] .el-empty__image { opacity: .65; filter: grayscale(1); }
html[data-ui-native] :is(.dashboard-page, .market-page, .logs-page, .chat-page) { padding: 28px 32px; }
html[data-ui-native] .page-header { margin-bottom: 26px; gap: 12px; flex-wrap: wrap; }
html[data-ui-native] .page-header h2 { font-size: 22px; font-weight: 650; letter-spacing: -.035em; }
html[data-ui-native] .dashboard-page { max-width: 1440px; margin: 0 auto; }
html[data-ui-native] .stats-row { gap: 0; border: 1px solid var(--ui-border); border-radius: 8px; overflow: hidden; margin-bottom: 28px; }
html[data-ui-native] .stat-card { border: 0; border-right: 1px solid var(--ui-border); border-radius: 0; text-align: left; }
html[data-ui-native] .stat-card:last-child { border-right: 0; }
html[data-ui-native] .stat-card .el-card__body { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px; overflow: visible; }
html[data-ui-native] .stat-label { order: -1; margin-top: 0; font-size: 12px; color: var(--ui-muted); }
html[data-ui-native] .stat-value { font-size: 30px; font-weight: 550; letter-spacing: -.05em; color: var(--ui-text); font-variant-numeric: tabular-nums; line-height: 1.1; }
html[data-ui-native] .chart-card { margin-bottom: 20px; }
html[data-ui-native] .chart { height: 320px; filter: grayscale(1); }
html.dark[data-ui-native] .chart { filter: grayscale(1) invert(.88); }
html[data-ui-native] .quick-actions { justify-content: flex-end; gap: 8px; }
html[data-ui-native] .quick-actions .el-button + .el-button { margin-left: 0; }
html[data-ui-native] .settings-sidebar { width: 232px; flex-shrink: 0; padding: 18px 12px; background: var(--ui-bg); }
html[data-ui-native] .settings-sidebar .group-title { color: var(--ui-muted); font-size: 11px; font-weight: 550; padding: 12px 9px 6px; }
html[data-ui-native] .settings-sidebar .menu-item { padding: 8px 9px; border-radius: 5px; font-size: 12px; }
html[data-ui-native] .settings-sidebar .menu-item.active { color: var(--ui-text); background: var(--ui-selected); }
html[data-ui-native] .settings-main { padding: 26px 28px; scrollbar-gutter: stable; }
html[data-ui-native] .section-header h3 { font-size: 21px; font-weight: 600; letter-spacing: -.025em; }
html[data-ui-native] .plugin-header { border-radius: 8px; padding: 18px; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
html[data-ui-native] .plugin-header .info { min-width: 0; }
html[data-ui-native] .plugin-header .meta { flex-wrap: wrap; font-size: 12px; gap: 8px; }
html[data-ui-native] .plugin-header h3 { font-size: 18px; }
html[data-ui-native] .plugin-header .actions { gap: 6px; flex-wrap: wrap; margin: 0; }
html[data-ui-native] .schema-field { margin-bottom: 20px; }
html[data-ui-native] .field-label { font-size: 13px; font-weight: 550; }
html[data-ui-native] .field-desc { line-height: 1.65; margin-top: 4px; overflow-wrap: anywhere; }
html[data-ui-native] .extension-page { padding: 0; height: 100%; min-height: 0; }
html[data-ui-native] .panel-host { height: 100%; min-height: 0; }
html[data-ui-native] .panel-host iframe { display: block; width: 100%; height: 100%; border: 0; }
html[data-ui-native] .login-card { width: 360px; max-width: 100%; padding: 28px; border: 1px solid var(--ui-border); border-radius: 10px; box-shadow: var(--ui-shadow); }
html[data-ui-native] .login-card h2 { font-size: 22px; letter-spacing: -.035em; font-weight: 600; margin: 0 0 26px; }
html[data-ui-native] .login-card .el-form-item { display: block; margin-bottom: 20px; }
html[data-ui-native] .login-card .el-form-item__label { display: block; height: auto; padding: 0 0 7px; line-height: 1.5; font-size: 12px; color: var(--ui-muted); }
html[data-ui-native] .login-card .el-button { width: 100%; min-height: 36px; }
html[data-ui-native] .blank { background: var(--ui-bg); padding: 20px; }
html[data-ui-native] .logs-page { min-width: 0; }
html[data-ui-native] .logs-page pre { font-family: var(--ui-mono); font-size: 12px; }
html[data-ui-native] .chat-header h3 { font-size: 22px; letter-spacing: -.035em; font-weight: 600; }
html[data-ui-native] .chat-messages { background: var(--ui-bg); padding: 20px; }
html[data-ui-native] .chat-message .avatar { width: 32px; height: 32px; border-radius: 6px; font-size: 12px; }
html[data-ui-native] .chat-message .bubble { box-shadow: none; border: 1px solid var(--ui-border); border-radius: 8px; font-size: 13px; }
html[data-ui-native] .chat-message.user .bubble { color: var(--ui-on-accent); border-color: var(--ui-accent); }
html[data-ui-native] .chat-message.user .bubble :is(.satori-at, .satori-sharp) { color: inherit; text-decoration: underline; }
html[data-ui-native] .market-card { background: var(--ui-surface); border: 1px solid var(--ui-border); }
html[data-ui-native] .market-card .title { color: var(--ui-text); font-size: 15px; font-weight: 600; }
html[data-ui-native] .market-card .desc { color: var(--ui-muted); font-size: 13px; line-height: 1.65; }
html[data-ui-native] .market-page .toolbar { flex-wrap: wrap; }
html[data-ui-native] .market-page .toolbar > * { max-width: 100%; }
html[data-ui-native] .markdown-body { color: var(--ui-text); background: transparent; font-family: var(--ui-font); font-size: 14px; }
html[data-ui-native] .markdown-body pre, html[data-ui-native] .markdown-body code { background: var(--ui-soft); color: var(--ui-text); }
html[data-ui-native] .reconnecting-banner { background: var(--ui-warning-soft); color: var(--ui-warning); border-bottom: 1px solid var(--ui-border); padding: 7px; font-size: 12px; }
@media (max-width: 1100px) {
  html[data-ui-native] :is(.dashboard-page, .market-page, .logs-page, .chat-page) { padding: 24px; }
  html[data-ui-native] .settings-sidebar { width: 206px; }
  html[data-ui-native] .settings-main { padding: 20px; }
}
@media (max-width: 760px) {
  html[data-ui-native] #app > .el-container { flex-direction: column; }
  html[data-ui-native] .sidebar, html[data-ui-native] .sidebar:has(.el-menu:not(.el-menu--collapse)) { width: 100%; height: auto; flex: none; border-right: 0; border-bottom: 1px solid var(--ui-border); }
  html[data-ui-native] .sidebar .logo { height: 44px; min-height: 44px; padding: 0 14px; font-size: 14px; }
  html[data-ui-native] .sidebar .logo-img { width: 22px; height: 22px; }
  html[data-ui-native] .sidebar .logo-text { display: inline !important; }
  html[data-ui-native] .sidebar .el-menu { display: flex; flex: none; overflow-x: auto; scrollbar-width: thin; padding: 0 8px 6px; width: 100%; gap: 3px; }
  html[data-ui-native] .sidebar .el-menu-item { flex: 0 0 auto; height: 34px; line-height: 34px; padding: 0 10px !important; font-size: 12px; margin: 0; }
  html[data-ui-native] .sidebar .el-menu-item .el-icon { width: 17px; margin-right: 5px; font-size: 15px; }
  html[data-ui-native] .header { height: 42px; min-height: 42px; padding: 0 14px; }
  html[data-ui-native] .header > .el-button:first-child { display: none; }
  html[data-ui-native] :is(.dashboard-page, .market-page, .logs-page, .chat-page) { padding: 20px 16px; }
  html[data-ui-native] .page-header { margin-bottom: 20px; }
  html[data-ui-native] .page-header h2 { font-size: 20px; }
  html[data-ui-native] .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 20px; }
  html[data-ui-native] .stat-card:nth-child(2) { border-right: 0; }
  html[data-ui-native] .stat-card:nth-child(-n+2) { border-bottom: 1px solid var(--ui-border); }
  html[data-ui-native] .stat-card .el-card__body { padding: 16px; gap: 12px; }
  html[data-ui-native] .stat-value { font-size: 26px; }
  html[data-ui-native] .chart { height: 250px; }
  html[data-ui-native] .settings-page { flex-direction: column; }
  html[data-ui-native] .settings-sidebar { width: 100%; max-height: 180px; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--ui-border); }
  html[data-ui-native] .settings-sidebar .menu-scroll { overflow: auto; margin-top: 8px; }
  html[data-ui-native] .settings-main { padding: 18px 16px; }
  html[data-ui-native] .plugin-header .meta { display: grid; }
  html[data-ui-native] .simple-row { flex-wrap: wrap; }
  html[data-ui-native] .value-input { min-width: 150px; }
  html[data-ui-native] .el-dialog { width: calc(100vw - 24px); margin-top: 5vh; }
  html[data-ui-native] .el-message-box { max-width: calc(100vw - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui-native] *, html[data-ui-native] *::before, html[data-ui-native] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}