/* ============================================================
   MID Code — Console Theme Override (Anthropic/Parchment style)
   Injected via nginx sub_filter for code.midaccs.com
   Matches new_homepage.html / new_about.html / new_docs.html
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

/* ---------- Semi Design CSS variable overrides (light) ---------- */
body,
body .semi-always-light,
:host,
:host .semi-always-light {
  /* Primary = Anthropic orange */
  --semi-color-primary: 201, 100, 66;
  --semi-color-primary-hover: 184, 90, 58;
  --semi-color-primary-active: 167, 80, 50;
  --semi-color-primary-disabled: 235, 200, 186;
  --semi-color-primary-light-default: 253, 240, 234;
  --semi-color-primary-light-hover: 249, 222, 210;
  --semi-color-primary-light-active: 244, 204, 186;

  /* Link */
  --semi-color-link: 201, 100, 66;
  --semi-color-link-hover: 184, 90, 58;
  --semi-color-link-active: 167, 80, 50;
  --semi-color-link-visited: 201, 100, 66;

  /* Focus ring */
  --semi-color-focus-border: 201, 100, 66;

  /* Warm neutral palette (replaces cool greys) */
  --semi-color-bg-0: 245, 244, 237;   /* page bg = #f5f4ed parchment */
  --semi-color-bg-1: 250, 249, 245;   /* card bg = #faf9f5 */
  --semi-color-bg-2: 240, 238, 230;   /* hover = #f0eee6 */
  --semi-color-bg-3: 232, 230, 220;   /* sider = #e8e6dc */
  --semi-color-bg-4: 209, 207, 197;   /* emphasis */

  --semi-color-fill-0: 240, 238, 230;
  --semi-color-fill-1: 232, 230, 220;
  --semi-color-fill-2: 209, 207, 197;

  /* Text — bumped darker for better readability on parchment bg */
  --semi-color-text-0: 20, 20, 19;     /* titles = #141413 */
  --semi-color-text-1: 61, 61, 58;     /* body = #3d3d3a (was #4d4c48) */
  --semi-color-text-2: 77, 76, 72;     /* secondary = #4d4c48 (was #5e5d59) */
  --semi-color-text-3: 107, 106, 100;  /* placeholder = #6b6a64 (was #87867f) */

  /* Tertiary text vars Semi uses in some components */
  --semi-color-tertiary: 77, 76, 72;
  --semi-color-tertiary-hover: 61, 61, 58;
  --semi-color-tertiary-active: 48, 48, 46;
  --semi-color-disabled-text: 135, 134, 127;

  /* Border */
  --semi-color-border: 209, 207, 197;  /* #d1cfc5 (was #e8e6dc, more visible) */

  /* Semantic colors tuned to warm palette */
  --semi-color-success: 34, 197, 94;
  --semi-color-success-hover: 22, 163, 74;
  --semi-color-success-light-default: 236, 253, 245;
  --semi-color-danger: 220, 38, 38;
  --semi-color-warning: 217, 119, 6;
  --semi-color-info: 59, 130, 246;
}

/* ---------- Dark mode overrides ---------- */
body[theme-mode="dark"],
body[theme-mode="dark"] .semi-always-dark,
.semi-always-dark {
  --semi-color-primary: 217, 119, 87;         /* #d97757 brighter in dark */
  --semi-color-primary-hover: 228, 140, 108;
  --semi-color-primary-active: 201, 100, 66;
  --semi-color-link: 217, 119, 87;
  --semi-color-link-hover: 228, 140, 108;

  --semi-color-bg-0: 20, 20, 19;      /* #141413 */
  --semi-color-bg-1: 26, 26, 24;      /* #1a1a18 */
  --semi-color-bg-2: 48, 48, 46;      /* #30302e */
  --semi-color-bg-3: 61, 61, 58;      /* #3d3d3a */
  --semi-color-bg-4: 77, 76, 72;

  --semi-color-fill-0: 48, 48, 46;
  --semi-color-fill-1: 61, 61, 58;
  --semi-color-fill-2: 77, 76, 72;

  --semi-color-text-0: 250, 249, 245; /* #faf9f5 — near-white */
  --semi-color-text-1: 209, 207, 197; /* #d1cfc5 — light grey (was #b0aea5, too dim) */
  --semi-color-text-2: 176, 174, 165; /* #b0aea5 — medium (was #87867f, hard to read) */
  --semi-color-text-3: 135, 134, 127; /* #87867f — placeholder (was #6b6a64, invisible) */

  --semi-color-tertiary: 176, 174, 165;
  --semi-color-tertiary-hover: 209, 207, 197;
  --semi-color-tertiary-active: 232, 230, 220;
  --semi-color-disabled-text: 176, 174, 165;  /* #b0aea5 — bumped up, group titles read as this */
  --semi-color-disabled-bg: 48, 48, 46;

  --semi-color-border: 77, 76, 72;  /* #4d4c48 — more visible in dark mode */
}

/* ---------- Global typography ---------- */
body,
body .semi-body-regular,
body .semi-layout {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  letter-spacing: -0.005em;
}

/* Serif headings — only in console, not in Semi modal titles where it'd look odd */
.semi-typography-h1,
.semi-typography-h2,
.semi-typography-h3,
.semi-typography-h4,
.semi-typography-h5,
.semi-typography-h6,
.semi-card-header-title,
.semi-page-header-heading-title {
  font-family: Georgia, 'Times New Roman', 'Noto Serif SC', serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.2px;
}

/* Code/mono elements */
code,
pre,
.semi-input-wrapper input[type="password"],
.semi-form-field-extra code,
.semi-tag-content-mono {
  font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', 'Menlo', monospace !important;
}

/* ---------- Border radius — softer, editorial ---------- */
.semi-button,
.semi-input-wrapper,
.semi-select,
.semi-tag,
.semi-select-selection {
  border-radius: 10px !important;
}

.semi-card,
.semi-modal-content,
.semi-dropdown-content,
.semi-popover-content,
.semi-notification-notice,
.semi-toast,
.semi-table,
.semi-table-tbody .semi-table-row:first-child td:first-child {
  border-radius: 14px !important;
}

.semi-card {
  border: 1px solid rgba(var(--semi-color-border)) !important;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 16px !important;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.semi-card:hover {
  box-shadow: rgba(0, 0, 0, 0.07) 0px 8px 28px !important;
  border-color: rgba(209, 207, 197, 0.9) !important;
}

/* ---------- Buttons — warm primary ---------- */
.semi-button-primary {
  background: rgba(var(--semi-color-primary)) !important;
  box-shadow: rgba(var(--semi-color-primary), 0.2) 0px 2px 8px !important;
  font-weight: 500 !important;
}
.semi-button-primary:hover:not(.semi-button-disabled) {
  background: rgba(var(--semi-color-primary-hover)) !important;
  transform: translateY(-1px);
  box-shadow: rgba(var(--semi-color-primary), 0.35) 0px 6px 16px !important;
}

.semi-button-secondary,
.semi-button-tertiary {
  border-radius: 10px !important;
  font-weight: 500 !important;
}

/* ---------- Navigation (sidebar + header) ----------
   High-specificity rules so they win regardless of which theme-switch
   mechanism (body[theme-mode], .semi-always-dark, html.dark, etc.) is used. */
.semi-navigation {
  background: rgb(var(--semi-color-bg-1)) !important;
  border-right: 1px solid rgb(var(--semi-color-border)) !important;
}

/* Nav item text — maximum specificity, no theme prefix needed (inherits var) */
.semi-navigation .semi-navigation-item,
.semi-navigation .semi-navigation-item-inner,
.semi-navigation .semi-navigation-item-text,
.semi-navigation .semi-navigation-sub-title,
.semi-navigation .semi-navigation-sub-title-text,
.semi-navigation .semi-navigation-item-icon,
.semi-navigation .semi-navigation-item-icon svg,
.semi-navigation-vertical .semi-navigation-item,
.semi-navigation-vertical .semi-navigation-item-text,
.semi-navigation-vertical .semi-navigation-sub-title {
  color: rgb(var(--semi-color-text-0)) !important;
}

/* Nav item icons get the softer body text color */
.semi-navigation .semi-navigation-item-icon {
  color: rgb(var(--semi-color-text-1)) !important;
  opacity: 0.95;
}

/* Selected state — keep orange accent */
.semi-navigation-vertical .semi-navigation-item-selected,
.semi-navigation-horizontal .semi-navigation-item-selected,
.semi-navigation-vertical .semi-navigation-item-selected .semi-navigation-item-text,
.semi-navigation-vertical .semi-navigation-item-selected .semi-navigation-item-icon {
  background: rgb(var(--semi-color-primary-light-default)) !important;
  color: rgb(var(--semi-color-primary)) !important;
  font-weight: 600 !important;
}

/* Hover */
.semi-navigation-item:hover:not(.semi-navigation-item-selected) {
  background: rgb(var(--semi-color-bg-2)) !important;
}

/* "always-dark" sidebar variant — if Semi wraps the sidebar in always-dark,
   its variables are dark regardless of outer theme. Force text to use those. */
.semi-always-dark .semi-navigation-item,
.semi-always-dark .semi-navigation-item-text,
.semi-always-dark .semi-navigation-sub-title,
.semi-always-dark .semi-navigation-sub-title-text {
  color: rgb(250, 249, 245) !important;    /* #faf9f5 — near-white */
}
.semi-always-dark .semi-navigation-item-icon {
  color: rgb(209, 207, 197) !important;    /* #d1cfc5 */
}
.semi-always-dark .semi-navigation {
  background: rgb(20, 20, 19) !important;  /* #141413 */
}

/* Nav group headers — Semi renders these as .sub-title-disabled which makes them
   look like "disabled items". Restyle as proper editorial section labels. */
.semi-navigation-sub-title-disabled,
.semi-navigation-sub-title-disabled .semi-navigation-sub-title-text,
.semi-navigation-vertical .semi-navigation-sub-title-disabled {
  color: rgb(var(--semi-color-text-2)) !important;
  opacity: 1 !important;
  cursor: default !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase;
  padding-top: 12px !important;
  padding-bottom: 4px !important;
  margin-bottom: 2px !important;
}
.semi-navigation-sub-title-disabled .semi-navigation-item-icon {
  color: rgb(var(--semi-color-text-3)) !important;
  opacity: 0.7 !important;
}

/* ===== Top horizontal nav (logo + 首页/控制台/模型广场/...)  =====
   Semi assigns `.semi-navigation-list .semi-navigation-item { color: var(--semi-color-text-2) }`
   (3 classes). We match that selector length so our !important reliably wins,
   then bind to text-0 for maximum contrast against the transparent header bg
   (which shows body bg — always high-contrast opposite of text-0 in either theme). */
html body .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item,
html body .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-text,
html body .semi-navigation-horizontal .semi-navigation-header,
html body .semi-navigation-horizontal .semi-navigation-header-text,
html body .semi-navigation-horizontal .semi-navigation-header-link,
html body .semi-navigation-horizontal .semi-navigation-header-link *,
html body .semi-navigation-horizontal a,
html body .semi-navigation-horizontal a * {
  color: rgb(var(--semi-color-text-0)) !important;
  opacity: 1 !important;
}

/* Icons inside horizontal nav items */
html body .semi-navigation-horizontal .semi-navigation-item-icon,
html body .semi-navigation-horizontal .semi-navigation-item-icon svg {
  color: rgb(var(--semi-color-text-1)) !important;
  opacity: 1 !important;
}

/* Selected top-nav item — orange accent + underline */
html body .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-selected,
html body .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-selected .semi-navigation-item-text {
  color: rgb(var(--semi-color-primary)) !important;
  font-weight: 600 !important;
}

/* Hover state — orange with subtle bg */
html body .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item:hover:not(.semi-navigation-item-selected),
html body .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item:hover:not(.semi-navigation-item-selected) .semi-navigation-item-text {
  color: rgb(var(--semi-color-primary)) !important;
  background-color: rgb(var(--semi-color-bg-2)) !important;
}

/* Logo "MID Code" brand text */
html body .semi-navigation-header-text {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px;
}

/* ==================================================================
   CRITICAL FIX: Tailwind `text-semi-color-*` / `bg-semi-color-*` utilities
   ==================================================================
   new-api's Tailwind config compiles these as `color: var(--semi-color-*)`
   but Semi defines those vars as bare triplets like "20, 20, 19" (no rgb wrapper).
   Result: `color: 20, 20, 19` is invalid CSS → falls back to initial/inherited
   (browser default = black) → dark-on-dark invisibility in dark mode.
   Force rgb() wrapper on every affected class. */

/* Text colors */
html body .text-semi-color-text-0 { color: rgb(var(--semi-color-text-0)) !important; }
html body .text-semi-color-text-1 { color: rgb(var(--semi-color-text-1)) !important; }
html body .text-semi-color-text-2 { color: rgb(var(--semi-color-text-2)) !important; }
html body .text-semi-color-text-3 { color: rgb(var(--semi-color-text-3)) !important; }
html body .text-semi-color-primary { color: rgb(var(--semi-color-primary)) !important; }
html body .text-semi-color-primary-hover { color: rgb(var(--semi-color-primary-hover)) !important; }
html body .text-semi-color-secondary { color: rgb(var(--semi-color-secondary, 94, 93, 89)) !important; }
html body .text-semi-color-tertiary { color: rgb(var(--semi-color-tertiary)) !important; }
html body .text-semi-color-danger { color: rgb(var(--semi-color-danger)) !important; }
html body .text-semi-color-success { color: rgb(var(--semi-color-success)) !important; }
html body .text-semi-color-warning { color: rgb(var(--semi-color-warning)) !important; }
html body .text-semi-color-info { color: rgb(var(--semi-color-info)) !important; }
html body .text-semi-color-link { color: rgb(var(--semi-color-link)) !important; }
html body .text-semi-color-disabled-text { color: rgb(var(--semi-color-disabled-text)) !important; }
html body .text-semi-color-white { color: rgb(255, 255, 255) !important; }
html body .text-semi-color-black { color: rgb(0, 0, 0) !important; }

/* Hover variants (Tailwind escapes `:` so selectors read `hover\:...`) */
html body .hover\:text-semi-color-primary:hover { color: rgb(var(--semi-color-primary)) !important; }
html body .hover\:text-semi-color-text-0:hover { color: rgb(var(--semi-color-text-0)) !important; }
html body .hover\:text-semi-color-text-1:hover { color: rgb(var(--semi-color-text-1)) !important; }
html body .hover\:text-semi-color-text-2:hover { color: rgb(var(--semi-color-text-2)) !important; }

/* Focus variants */
html body .focus\:text-semi-color-primary:focus { color: rgb(var(--semi-color-primary)) !important; }

/* Background colors */
html body .bg-semi-color-bg-0 { background-color: rgb(var(--semi-color-bg-0)) !important; }
html body .bg-semi-color-bg-1 { background-color: rgb(var(--semi-color-bg-1)) !important; }
html body .bg-semi-color-bg-2 { background-color: rgb(var(--semi-color-bg-2)) !important; }
html body .bg-semi-color-bg-3 { background-color: rgb(var(--semi-color-bg-3)) !important; }
html body .bg-semi-color-bg-4 { background-color: rgb(var(--semi-color-bg-4)) !important; }
html body .bg-semi-color-fill-0 { background-color: rgb(var(--semi-color-fill-0)) !important; }
html body .bg-semi-color-fill-1 { background-color: rgb(var(--semi-color-fill-1)) !important; }
html body .bg-semi-color-fill-2 { background-color: rgb(var(--semi-color-fill-2)) !important; }
html body .bg-semi-color-primary { background-color: rgb(var(--semi-color-primary)) !important; }
html body .bg-semi-color-primary-light-default { background-color: rgb(var(--semi-color-primary-light-default)) !important; }

/* Hover bg */
html body .hover\:bg-semi-color-fill-0:hover { background-color: rgb(var(--semi-color-fill-0)) !important; }
html body .hover\:bg-semi-color-fill-1:hover { background-color: rgb(var(--semi-color-fill-1)) !important; }
html body .hover\:bg-semi-color-primary-light-default:hover { background-color: rgb(var(--semi-color-primary-light-default)) !important; }

/* Borders */
html body .border-semi-color-border { border-color: rgb(var(--semi-color-border)) !important; }
html body .border-semi-color-primary { border-color: rgb(var(--semi-color-primary)) !important; }

/* Fill (SVG) */
html body .fill-semi-color-primary { fill: rgb(var(--semi-color-primary)) !important; }
html body .fill-semi-color-text-0 { fill: rgb(var(--semi-color-text-0)) !important; }

/* ==================================================================
   Dark mode fix for Tailwind `text-gray-*` hardcoded colors
   ==================================================================
   new-api uses `text-gray-800` etc. without `dark:` variants. These compile to
   hardcoded near-black (#1f2937) that works on light bg but disappears on dark.
   Remap the gray scale to a readable light palette when html.dark is active. */

html.dark body .text-gray-900,
html.dark body .text-slate-900,
html.dark body .text-zinc-900,
html.dark body .text-neutral-900,
html.dark body .text-stone-900 {
  color: rgb(250, 249, 245) !important;  /* #faf9f5 — titles */
}

html.dark body .text-gray-800,
html.dark body .text-slate-800,
html.dark body .text-zinc-800,
html.dark body .text-neutral-800,
html.dark body .text-stone-800 {
  color: rgb(234, 232, 222) !important;  /* near-white — primary text (greeting, card titles) */
}

html.dark body .text-gray-700,
html.dark body .text-slate-700,
html.dark body .text-zinc-700,
html.dark body .text-neutral-700,
html.dark body .text-stone-700 {
  color: rgb(209, 207, 197) !important;  /* #d1cfc5 — body text */
}

html.dark body .text-gray-600,
html.dark body .text-slate-600,
html.dark body .text-zinc-600,
html.dark body .text-neutral-600,
html.dark body .text-stone-600 {
  color: rgb(176, 174, 165) !important;  /* #b0aea5 — secondary */
}

html.dark body .text-gray-500,
html.dark body .text-slate-500,
html.dark body .text-zinc-500,
html.dark body .text-neutral-500,
html.dark body .text-stone-500 {
  color: rgb(155, 153, 145) !important;  /* muted */
}

html.dark body .text-gray-400,
html.dark body .text-slate-400,
html.dark body .text-zinc-400,
html.dark body .text-neutral-400,
html.dark body .text-stone-400 {
  color: rgb(135, 134, 127) !important;  /* #87867f — placeholder/hint */
}

html.dark body .text-gray-300,
html.dark body .text-slate-300,
html.dark body .text-zinc-300 {
  color: rgb(107, 106, 100) !important;  /* low emphasis */
}

/* Light mode — bump these a bit darker than Tailwind default for better
   contrast on parchment bg (Tailwind default #4b5563 on #faf9f5 is OK but cool-tinted) */
html:not(.dark) body .text-gray-800,
html:not(.dark) body .text-slate-800,
html:not(.dark) body .text-zinc-800 {
  color: rgb(var(--semi-color-text-0)) !important;   /* #141413 warm black */
}
html:not(.dark) body .text-gray-700 {
  color: rgb(var(--semi-color-text-1)) !important;
}
html:not(.dark) body .text-gray-600 {
  color: rgb(var(--semi-color-text-2)) !important;
}
html:not(.dark) body .text-gray-500 {
  color: rgb(var(--semi-color-text-3)) !important;
}

/* Tailwind bg grays in dark mode — commonly used for card bg */
html.dark body .bg-gray-50,
html.dark body .bg-gray-100,
html.dark body .bg-slate-50,
html.dark body .bg-slate-100,
html.dark body .bg-zinc-50,
html.dark body .bg-zinc-100 {
  background-color: rgb(var(--semi-color-bg-2)) !important;
}
html.dark body .bg-gray-200,
html.dark body .bg-slate-200,
html.dark body .bg-zinc-200 {
  background-color: rgb(var(--semi-color-bg-3)) !important;
}
html.dark body .bg-white {
  background-color: rgb(var(--semi-color-bg-1)) !important;
}

/* Tailwind border grays in dark mode */
html.dark body .border-gray-200,
html.dark body .border-gray-300,
html.dark body .border-slate-200,
html.dark body .border-zinc-200 {
  border-color: rgb(var(--semi-color-border)) !important;
}

/* ==================================================================
   new-api custom classes (not Semi, not Tailwind — their own naming)
   ==================================================================
   Discovered via F12: sidebar group headers use `.sidebar-group-label`
   with `opacity: 0.8` on top of text-2 color, making them too dim in dark.
   Other custom wrappers use `sidebar-*`, `app-sider`, etc. */

/* Sidebar section/group labels (个人中心, 管理员, etc.) */
html body .sidebar-group-label,
html body .sidebar-section-label,
html body .sidebar-section-title {
  opacity: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px !important;
}
html.dark body .sidebar-group-label,
html.dark body .sidebar-section-label,
html.dark body .sidebar-section-title {
  color: rgb(var(--semi-color-text-1)) !important;  /* #d1cfc5 brighter than text-2 */
}
html:not(.dark) body .sidebar-group-label,
html:not(.dark) body .sidebar-section-label,
html:not(.dark) body .sidebar-section-title {
  color: rgb(var(--semi-color-text-1)) !important;
}

/* Sidebar container + section wrappers — ensure bg and border follow theme */
html.dark body .app-sider,
html.dark body .sidebar-container,
html.dark body .semi-layout-sider {
  background-color: rgb(var(--semi-color-bg-1)) !important;
  border-right: 1px solid rgb(var(--semi-color-border)) !important;
}

/* Sidebar dividers */
html.dark body .sidebar-divider,
html.dark body .semi-divider {
  border-color: rgb(var(--semi-color-border)) !important;
  background-color: rgb(var(--semi-color-border)) !important;
}

/* ==================================================================
   CRITICAL: body-level default color
   ==================================================================
   Many texts in new-api are bare text nodes (no color class).
   Their color inherits up to <body>, and without an explicit `color` on body,
   the browser default (black) wins. In dark mode that's invisible.
   Set body color to follow the theme. */
html body {
  color: rgb(var(--semi-color-text-1));
}
html.dark body {
  color: rgb(var(--semi-color-text-1)) !important;   /* #d1cfc5 */
}

/* Card headers — cover every Semi naming variant new-api might use */
html body .semi-card-header,
html body .semi-card-header-wrapper,
html body .semi-card-header-wrapper-title,
html body .semi-card-header-title,
html body .semi-card-header-wrapper-title > *,
html body .semi-card-header-wrapper-header,
html body .semi-card-header-wrapper-extra {
  color: rgb(var(--semi-color-text-0)) !important;
}
html body .semi-card-body,
html body .semi-card-body > *:not([class*="text-"]):not([class*="bg-"]) {
  color: inherit;  /* let body cascade through */
}

/* Titles / headings without explicit color class — use theme text-0 */
html body h1:not([class*="text-"]),
html body h2:not([class*="text-"]),
html body h3:not([class*="text-"]),
html body h4:not([class*="text-"]),
html body h5:not([class*="text-"]),
html body h6:not([class*="text-"]) {
  color: rgb(var(--semi-color-text-0));
}

/* Dashboard stat cards — the 4 top cards with value + chart */
html body .semi-card-meta-title,
html body .semi-card-meta-description,
html body .stat-title,
html body .stat-value,
html body .stat-label {
  color: inherit !important;  /* follow body/parent theme */
}
html.dark body .stat-value {
  color: rgb(var(--semi-color-text-0)) !important;
}

.semi-navigation-header-logo img {
  border-radius: 8px;
}

/* ---------- Layout shells ---------- */
.semi-layout {
  background: rgba(var(--semi-color-bg-0)) !important;
}

.semi-layout-header {
  background: rgba(var(--semi-color-bg-1)) !important;
  border-bottom: 1px solid rgba(var(--semi-color-border)) !important;
  backdrop-filter: saturate(1.2);
}

/* ---------- Tables — warmer, less grid-y ---------- */
.semi-table-thead > .semi-table-row > .semi-table-row-head {
  background: rgba(var(--semi-color-bg-2)) !important;
  font-weight: 600 !important;
  color: rgba(var(--semi-color-text-0)) !important;
  text-transform: uppercase;
  font-size: 11.5px !important;
  letter-spacing: 0.5px;
}

.semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell {
  background: rgba(var(--semi-color-primary-light-default), 0.5) !important;
}

/* ---------- Inputs ---------- */
.semi-input-wrapper:hover:not(.semi-input-wrapper-disabled) {
  border-color: rgba(var(--semi-color-primary), 0.5) !important;
}
.semi-input-wrapper-focus {
  border-color: rgba(var(--semi-color-primary)) !important;
  box-shadow: rgba(var(--semi-color-primary), 0.15) 0px 0px 0px 3px !important;
}

/* ---------- Tags — warmer tones ---------- */
.semi-tag-solid-orange,
.semi-tag-solid-red {
  background: rgba(var(--semi-color-primary)) !important;
}
.semi-tag-light-orange,
.semi-tag-light-red {
  background: rgba(var(--semi-color-primary-light-default)) !important;
  color: rgba(var(--semi-color-primary)) !important;
}

/* ---------- Progress / stats ---------- */
.semi-progress-track-inner {
  background: rgba(var(--semi-color-primary)) !important;
}

/* ---------- Scrollbar (webkit) ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(135, 134, 127, 0.35);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 100, 66, 0.55);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* ---------- Preserve homepage (.mc-home) styles ----------
   Homepage HTML uses .mc-* classes with inline colors;
   we don't override them. This block is a safety net to ensure
   our font change doesn't leak into the parchment editorial. */
.mc-home {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif !important;
}
.mc-home h1,
.mc-home h2,
.mc-home h3 {
  font-family: Georgia, 'Times New Roman', serif !important;
}

/* ---------- Mild card lift on hover for content cards ---------- */
.semi-card[class*="hover"],
.semi-card.semi-card-hover {
  transition: all .25s;
}

/* ---------- Force opaque backgrounds on floating/popup surfaces ----------
   Semi Design layers some of these with rgba(bg-var, alpha) and when bg-var
   is a warm parchment tone it can read as translucent. Force solid. */

/* Modal body + mask */
.semi-modal-content,
.semi-modal-content-body,
.semi-modal-header,
.semi-modal-footer {
  background-color: rgb(var(--semi-color-bg-1)) !important;
}
body[theme-mode="dark"] .semi-modal-content,
body[theme-mode="dark"] .semi-modal-content-body,
body[theme-mode="dark"] .semi-modal-header,
body[theme-mode="dark"] .semi-modal-footer {
  background-color: rgb(var(--semi-color-bg-2)) !important;
}
.semi-modal-mask,
.semi-portal-inner .semi-modal-mask {
  background-color: rgba(20, 20, 19, 0.55) !important;
  backdrop-filter: blur(4px);
}

/* Dropdowns (menus, select panel) */
.semi-dropdown-content,
.semi-dropdown,
.semi-select-option-list,
.semi-cascader-option-list {
  background-color: rgb(var(--semi-color-bg-1)) !important;
  border: 1px solid rgb(var(--semi-color-border)) !important;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 28px !important;
}
body[theme-mode="dark"] .semi-dropdown-content,
body[theme-mode="dark"] .semi-dropdown,
body[theme-mode="dark"] .semi-select-option-list,
body[theme-mode="dark"] .semi-cascader-option-list {
  background-color: rgb(var(--semi-color-bg-2)) !important;
}

/* Popovers (tooltips with content, help panels) */
.semi-popover-content,
.semi-popover-content-wrapper {
  background-color: rgb(var(--semi-color-bg-1)) !important;
  border: 1px solid rgb(var(--semi-color-border)) !important;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 28px !important;
}
body[theme-mode="dark"] .semi-popover-content,
body[theme-mode="dark"] .semi-popover-content-wrapper {
  background-color: rgb(var(--semi-color-bg-2)) !important;
}

/* Notifications (top-right 公告 toasts) */
.semi-notification-notice,
.semi-notification-notice-wrapper,
.semi-toast,
.semi-toast-wrapper {
  background-color: rgb(var(--semi-color-bg-1)) !important;
  border: 1px solid rgb(var(--semi-color-border)) !important;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 36px !important;
  backdrop-filter: none !important;
}
body[theme-mode="dark"] .semi-notification-notice,
body[theme-mode="dark"] .semi-notification-notice-wrapper,
body[theme-mode="dark"] .semi-toast,
body[theme-mode="dark"] .semi-toast-wrapper {
  background-color: rgb(var(--semi-color-bg-2)) !important;
}

/* Banner (通常用作公告条) */
.semi-banner {
  background-color: rgb(var(--semi-color-bg-1)) !important;
  border: 1px solid rgb(var(--semi-color-border)) !important;
}
body[theme-mode="dark"] .semi-banner {
  background-color: rgb(var(--semi-color-bg-2)) !important;
}

/* SideSheet / Drawer (右侧抽屉、设置面板常用) */
.semi-sidesheet-inner,
.semi-sidesheet-content,
.semi-sidesheet-header,
.semi-sidesheet-body,
.semi-sidesheet-footer {
  background-color: rgb(var(--semi-color-bg-1)) !important;
}
body[theme-mode="dark"] .semi-sidesheet-inner,
body[theme-mode="dark"] .semi-sidesheet-content,
body[theme-mode="dark"] .semi-sidesheet-header,
body[theme-mode="dark"] .semi-sidesheet-body,
body[theme-mode="dark"] .semi-sidesheet-footer {
  background-color: rgb(var(--semi-color-bg-2)) !important;
}
.semi-sidesheet-mask {
  background-color: rgba(20, 20, 19, 0.55) !important;
  backdrop-filter: blur(4px);
}

/* Tooltip (简短文字提示，保持深色更好读) */
.semi-tooltip-wrapper,
.semi-tooltip-content {
  background-color: #141413 !important;
  color: #faf9f5 !important;
  border: 1px solid #3d3d3a !important;
}
.semi-tooltip-icon-arrow,
.semi-tooltip-arrow {
  color: #141413 !important;
}

/* ---------- Explicit readability fixes for common low-contrast spots ---------- */

/* Form labels — often too faint */
.semi-form-field-label-text,
.semi-form-label,
label.semi-form-field-label {
  color: rgb(var(--semi-color-text-0)) !important;
  font-weight: 500 !important;
}

/* Input placeholders */
.semi-input::placeholder,
.semi-input-wrapper input::placeholder,
.semi-input-textarea::placeholder,
.semi-input-wrapper textarea::placeholder,
.semi-select-selection-placeholder,
.semi-cascader-selection-placeholder {
  color: rgb(var(--semi-color-text-3)) !important;
  opacity: 1 !important;  /* Firefox default is .54 */
}

/* Input entered text */
.semi-input,
.semi-input-wrapper input,
.semi-input-textarea,
.semi-input-wrapper textarea,
.semi-select-selection-text,
.semi-select-selection {
  color: rgb(var(--semi-color-text-0)) !important;
}

/* Tertiary buttons (Cancel/Back typically) + Borderless buttons (toolbar actions) */
.semi-button-tertiary,
.semi-button-tertiary:not(.semi-button-disabled),
.semi-button-borderless,
.semi-button-borderless:not(.semi-button-disabled),
.semi-button-ghost,
.semi-button-ghost:not(.semi-button-disabled) {
  color: rgb(var(--semi-color-text-0)) !important;
}
.semi-button-tertiary .semi-button-content,
.semi-button-borderless .semi-button-content,
.semi-button-ghost .semi-button-content {
  color: inherit !important;
}
.semi-button-tertiary:hover:not(.semi-button-disabled),
.semi-button-borderless:hover:not(.semi-button-disabled) {
  background-color: rgb(var(--semi-color-bg-2)) !important;
  color: rgb(var(--semi-color-primary)) !important;
}

/* Secondary/ghost buttons */
.semi-button-secondary:not(.semi-button-disabled) {
  color: rgb(var(--semi-color-text-0)) !important;
  border: 1px solid rgb(var(--semi-color-border)) !important;
}

/* Dark mode — force min contrast on all button text variants */
body[theme-mode="dark"] .semi-button-tertiary,
body[theme-mode="dark"] .semi-button-borderless,
body[theme-mode="dark"] .semi-button-ghost,
body[theme-mode="dark"] .semi-button-secondary,
.semi-always-dark .semi-button-tertiary,
.semi-always-dark .semi-button-borderless {
  color: rgb(250, 249, 245) !important;
}

/* Table cell text — ensure contrast */
.semi-table-tbody .semi-table-row-cell,
.semi-table-tbody .semi-table-row-cell span:not(.semi-tag):not(.semi-avatar) {
  color: rgb(var(--semi-color-text-1)) !important;
}
.semi-table-thead .semi-table-row-head {
  color: rgb(var(--semi-color-text-0)) !important;
}

/* Typography secondary/tertiary */
.semi-typography-secondary {
  color: rgb(var(--semi-color-text-2)) !important;
}
.semi-typography-tertiary {
  color: rgb(var(--semi-color-text-3)) !important;
}

/* Menu items — cover every Semi dropdown menu class variant */
.semi-navigation-item,
.semi-navigation-item-text,
.semi-dropdown-item,
.semi-dropdown-item-text,
.semi-dropdown-menu-item,
.semi-dropdown-menu-item-text,
.semi-dropdown-menu-title,
.semi-dropdown-menu li,
.semi-dropdown-content ul > li,
.semi-dropdown-content .semi-button,
.semi-select-option,
.semi-select-option-text {
  color: rgb(var(--semi-color-text-0)) !important;
}

/* Defensive: any direct text node inside a dropdown/popover */
.semi-dropdown-content,
.semi-popover-content {
  color: rgb(var(--semi-color-text-0)) !important;
}

body[theme-mode="dark"] .semi-navigation-item,
body[theme-mode="dark"] .semi-navigation-item-text,
body[theme-mode="dark"] .semi-dropdown-item,
body[theme-mode="dark"] .semi-dropdown-item-text,
body[theme-mode="dark"] .semi-dropdown-menu-item,
body[theme-mode="dark"] .semi-dropdown-menu-item-text,
body[theme-mode="dark"] .semi-dropdown-menu-title,
body[theme-mode="dark"] .semi-dropdown-menu li,
body[theme-mode="dark"] .semi-dropdown-content ul > li,
body[theme-mode="dark"] .semi-select-option,
body[theme-mode="dark"] .semi-select-option-text,
body[theme-mode="dark"] .semi-dropdown-content,
body[theme-mode="dark"] .semi-popover-content {
  color: rgb(var(--semi-color-text-0)) !important;
}

/* Hover state for dropdown items — subtle highlight */
.semi-dropdown-item:hover,
.semi-dropdown-menu-item:hover {
  background-color: rgb(var(--semi-color-bg-2)) !important;
}
body[theme-mode="dark"] .semi-dropdown-item:hover,
body[theme-mode="dark"] .semi-dropdown-menu-item:hover {
  background-color: rgb(var(--semi-color-bg-3)) !important;
}

/* Selected nav item — orange text on light orange bg needs weight */
.semi-navigation-item-selected,
.semi-navigation-item-selected .semi-navigation-item-text {
  color: rgb(var(--semi-color-primary)) !important;
  font-weight: 600 !important;
}

/* Primary button text — white/cream ONLY on solid orange bg.
   Light/borderless/ghost variants have pale bg and should use orange text. */
.semi-button-primary:not(.semi-button-light):not(.semi-button-borderless):not(.semi-button-ghost):not(.semi-button-tertiary),
.semi-button-primary:not(.semi-button-light):not(.semi-button-borderless):not(.semi-button-ghost):not(.semi-button-tertiary) .semi-button-content,
.semi-button-primary:not(.semi-button-light):not(.semi-button-borderless):not(.semi-button-ghost):not(.semi-button-tertiary) span {
  color: #faf9f5 !important;
}

/* Primary LIGHT variant — pale orange bg + orange text + orange border (chip style) */
.semi-button-primary.semi-button-light,
.semi-button-primary.semi-button-light .semi-button-content,
.semi-button-primary.semi-button-light span,
.semi-button-primary.semi-button-borderless,
.semi-button-primary.semi-button-borderless .semi-button-content,
.semi-button-primary.semi-button-borderless span {
  color: rgb(var(--semi-color-primary)) !important;
}

/* Add visible border to light/pale buttons so they stand out from bg */
.semi-button-primary.semi-button-light,
.semi-button-primary.semi-button-borderless {
  border: 1px solid rgba(var(--semi-color-primary), 0.35) !important;
  background: rgb(var(--semi-color-primary-light-default)) !important;
  transition: all .18s;
}
.semi-button-primary.semi-button-light:hover:not(.semi-button-disabled),
.semi-button-primary.semi-button-borderless:hover:not(.semi-button-disabled) {
  border-color: rgb(var(--semi-color-primary)) !important;
  background: rgb(var(--semi-color-primary-light-hover)) !important;
  transform: translateY(-1px);
  box-shadow: rgba(var(--semi-color-primary), 0.18) 0 4px 12px !important;
}
/* Selected/active state of light button (filter chips, tabs-as-buttons) */
.semi-button-primary.semi-button-light.semi-button-active,
.semi-button-primary.semi-button-light[aria-pressed="true"] {
  background: rgb(var(--semi-color-primary)) !important;
  color: #faf9f5 !important;
  border-color: rgb(var(--semi-color-primary)) !important;
}
.semi-button-primary.semi-button-light.semi-button-active span,
.semi-button-primary.semi-button-light[aria-pressed="true"] span {
  color: #faf9f5 !important;
}

/* Also give secondary/tertiary light-ish buttons a subtle neutral border */
.semi-button-secondary.semi-button-light,
.semi-button-tertiary.semi-button-light {
  border: 1px solid rgb(var(--semi-color-border)) !important;
}

/* ==================================================================
   Add borders to ALL tertiary / borderless Semi buttons
   ==================================================================
   These usually render as plain text — adds 1px neutral border so they read
   as proper "buttons" instead of blending into the background. */

.semi-button-tertiary:not(.semi-button-disabled),
.semi-button-borderless:not(.semi-button-disabled) {
  border: 1px solid rgb(var(--semi-color-border)) !important;
  background: rgb(var(--semi-color-bg-1)) !important;
  transition: all .18s;
}

.semi-button-tertiary:hover:not(.semi-button-disabled),
.semi-button-borderless:hover:not(.semi-button-disabled) {
  border-color: rgb(var(--semi-color-primary)) !important;
  color: rgb(var(--semi-color-primary)) !important;
  background: rgb(var(--semi-color-primary-light-default)) !important;
  transform: translateY(-1px);
  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 8px !important;
}

/* Selected/active state (filter chips, toggled buttons) */
.semi-button-tertiary.semi-button-active,
.semi-button-tertiary[aria-pressed="true"],
.semi-button-tertiary.selected,
.semi-button-borderless.semi-button-active,
.semi-button-borderless[aria-pressed="true"] {
  background: rgb(var(--semi-color-primary)) !important;
  color: #faf9f5 !important;
  border-color: rgb(var(--semi-color-primary)) !important;
}
.semi-button-tertiary.semi-button-active span,
.semi-button-tertiary[aria-pressed="true"] span,
.semi-button-borderless.semi-button-active span,
.semi-button-borderless[aria-pressed="true"] span {
  color: #faf9f5 !important;
}

/* Secondary buttons without light variant — also get a proper border */
.semi-button-secondary:not(.semi-button-light):not(.semi-button-disabled) {
  border: 1px solid rgb(var(--semi-color-border)) !important;
  background: rgb(var(--semi-color-bg-1)) !important;
}
.semi-button-secondary:not(.semi-button-light):hover:not(.semi-button-disabled) {
  border-color: rgb(var(--semi-color-primary)) !important;
  background: rgb(var(--semi-color-bg-2)) !important;
}

/* ==================================================================
   new-api's `.sbg-button` (filter chips in 模型广场/筛选面板)
   ==================================================================
   These use sbg-button + optionally semi-button-primary.semi-button-light.
   "全部XX" (all-select) variants get stripped of bg/border by new-api's own
   CSS — force every sbg-button to show as a proper bordered chip. */

/* 3+ class specificity so this beats the earlier .semi-button-primary.semi-button-light
   rule AND any "selected state" stripping new-api applies to the "全部XX" variants */
html body .sbg-button.semi-button.semi-button-primary,
html body .sbg-button.semi-button.semi-button-primary.semi-button-light,
html body .sbg-button.semi-button.semi-button-primary.semi-button-light.semi-button-active,
html body .sbg-button.semi-button.semi-button-primary.semi-button-light[aria-pressed="true"],
html body .sbg-button.semi-button.semi-button-primary.semi-button-light[aria-selected="true"],
html body button.sbg-button,
html body .sbg-button {
  border: 1.5px solid rgb(var(--semi-color-primary)) !important;
  background: rgb(var(--semi-color-bg-1)) !important;
  color: rgb(var(--semi-color-primary)) !important;
  border-radius: 10px !important;
  transition: all .18s !important;
  opacity: 1 !important;
}

html body .sbg-button.semi-button.semi-button-primary:hover,
html body .sbg-button.semi-button.semi-button-primary.semi-button-light:hover,
html body button.sbg-button:hover,
html body .sbg-button:hover {
  background: rgb(var(--semi-color-primary-light-default)) !important;
  border-color: rgb(var(--semi-color-primary)) !important;
  color: rgb(var(--semi-color-primary)) !important;
  transform: translateY(-1px);
  box-shadow: rgba(var(--semi-color-primary), 0.18) 0 4px 12px !important;
}

/* Selected / active sbg-button — solid orange */
html body button.sbg-button.semi-button-active,
html body button.sbg-button[aria-pressed="true"],
html body button.sbg-button.sbg-button-active,
html body button.sbg-button.sbg-button-selected,
html body .sbg-button.active {
  background: rgb(var(--semi-color-primary)) !important;
  border-color: rgb(var(--semi-color-primary)) !important;
  color: #faf9f5 !important;
}
html body button.sbg-button.semi-button-active span,
html body button.sbg-button[aria-pressed="true"] span,
html body button.sbg-button.sbg-button-active span,
html body .sbg-button.active span {
  color: #faf9f5 !important;
}

/* Tags — only solid variants need forced white text; let Semi handle light-* tints */
.semi-tag-solid,
.semi-tag-solid .semi-tag-content,
.semi-tag-solid .semi-tag-text {
  color: #faf9f5 !important;
}
/* Neutral grey light tag: parchment-friendly dark text */
.semi-tag-light-grey,
.semi-tag-light-white {
  color: rgb(var(--semi-color-text-0)) !important;
}
/* Small tags need weight to read on pale tinted bg */
.semi-tag {
  font-weight: 500 !important;
  border: 1px solid transparent;
}

/* Dark mode — light tag variants keep pale bg but need darker text for contrast.
   Semi's default light-{color}-6 text is calibrated for white bg, not dark;
   bump saturation and weight so they stand out on #141413. */
body[theme-mode="dark"] .semi-tag-light-red,
body[theme-mode="dark"] .semi-tag-light-orange,
body[theme-mode="dark"] .semi-tag-light-amber,
body[theme-mode="dark"] .semi-tag-light-yellow,
body[theme-mode="dark"] .semi-tag-light-lime,
body[theme-mode="dark"] .semi-tag-light-green,
body[theme-mode="dark"] .semi-tag-light-cyan,
body[theme-mode="dark"] .semi-tag-light-blue,
body[theme-mode="dark"] .semi-tag-light-indigo,
body[theme-mode="dark"] .semi-tag-light-purple,
body[theme-mode="dark"] .semi-tag-light-violet,
body[theme-mode="dark"] .semi-tag-light-pink,
body[theme-mode="dark"] .semi-tag-light-teal,
body[theme-mode="dark"] .semi-tag-light-grey,
body[theme-mode="dark"] .semi-tag-light-white,
body[theme-mode="dark"] .semi-tag-light {
  font-weight: 600 !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}

/* Description / help text under inputs */
.semi-form-field-extra,
.semi-form-field-helper {
  color: rgb(var(--semi-color-text-2)) !important;
}

/* Empty state / no-data */
.semi-table-placeholder,
.semi-empty-description {
  color: rgb(var(--semi-color-text-2)) !important;
}

/* Pagination */
.semi-page-item,
.semi-page-item a {
  color: rgb(var(--semi-color-text-0)) !important;
}

/* Radio / Checkbox labels */
.semi-radio-addon,
.semi-checkbox-addon,
.semi-radio-inner-display,
.semi-checkbox-inner-display + span {
  color: rgb(var(--semi-color-text-0)) !important;
}

/* Modal title + description */
.semi-modal-title,
.semi-modal-header-title {
  color: rgb(var(--semi-color-text-0)) !important;
  font-weight: 600 !important;
}
.semi-modal-body,
.semi-modal-content-body {
  color: rgb(var(--semi-color-text-1)) !important;
}

/* Tabs */
.semi-tabs-tab {
  color: rgb(var(--semi-color-text-2)) !important;
}
.semi-tabs-tab-active {
  color: rgb(var(--semi-color-primary)) !important;
  font-weight: 600 !important;
}

/* Card titles + content */
.semi-card-header-title {
  color: rgb(var(--semi-color-text-0)) !important;
}
.semi-card-body {
  color: rgb(var(--semi-color-text-1)) !important;
}

/* Breadcrumb */
.semi-breadcrumb-item {
  color: rgb(var(--semi-color-text-2)) !important;
}
.semi-breadcrumb-item:last-child,
.semi-breadcrumb-item-active {
  color: rgb(var(--semi-color-text-0)) !important;
  font-weight: 500 !important;
}

/* Switch — track needs contrast */
.semi-switch:not(.semi-switch-checked) {
  background-color: rgb(var(--semi-color-bg-3)) !important;
  border: 1px solid rgb(var(--semi-color-border)) !important;
}

/* ---------- Accent selection color ---------- */
::selection {
  background: rgba(201, 100, 66, 0.25);
  color: #141413;
}
body[theme-mode="dark"] ::selection {
  background: rgba(217, 119, 87, 0.3);
  color: #faf9f5;
}

/* ==================================================================
   GLOBAL BORDER PASS — last in file, highest priority
   ==================================================================
   Consolidated border rules for every form control, container, and
   divider. Uses brighter border tones (above the default `--semi-color-border`)
   because Semi's default is too subtle on our warm palette. */

/* ---- Stronger border variable for emphasis ---- */
html body {
  --mc-border: 201, 199, 189;     /* #c9c7bd — warm light grey, clear on parchment */
  --mc-border-strong: 176, 174, 165;  /* #b0aea5 */
}
html.dark body,
body[theme-mode="dark"] {
  --mc-border: 77, 76, 72;        /* #4d4c48 — 2.7:1 on #141413, still subtle */
  --mc-border-strong: 107, 106, 100;  /* #6b6a64 — 3.5:1 for emphasis */
}

/* ---- Inputs ---- */
html body .semi-input-wrapper,
html body .semi-input-number,
html body .semi-input-wrapper-default,
html body .semi-input-wrapper-large,
html body .semi-input-wrapper-small,
html body textarea.semi-input-textarea,
html body .semi-input-textarea-wrapper {
  border: 1.5px solid rgb(var(--mc-border)) !important;
  background-color: rgb(var(--semi-color-bg-1)) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
html body .semi-input-wrapper:hover:not(.semi-input-wrapper-disabled),
html body textarea.semi-input-textarea:hover {
  border-color: rgb(var(--mc-border-strong)) !important;
}
html body .semi-input-wrapper-focus,
html body .semi-input-wrapper:focus-within,
html body textarea.semi-input-textarea:focus {
  border-color: rgb(var(--semi-color-primary)) !important;
  box-shadow: rgba(var(--semi-color-primary), 0.15) 0 0 0 3px !important;
}

/* ---- Select / Cascader / DatePicker / TimePicker / TreeSelect ---- */
html body .semi-select,
html body .semi-select-selection,
html body .semi-cascader,
html body .semi-cascader-selection,
html body .semi-tree-select,
html body .semi-datepicker,
html body .semi-datepicker-range,
html body .semi-timepicker,
html body .semi-tagInput {
  border: 1.5px solid rgb(var(--mc-border)) !important;
  background-color: rgb(var(--semi-color-bg-1)) !important;
}
html body .semi-select:hover,
html body .semi-cascader:hover,
html body .semi-tree-select:hover,
html body .semi-datepicker:hover,
html body .semi-timepicker:hover {
  border-color: rgb(var(--mc-border-strong)) !important;
}
html body .semi-select-open,
html body .semi-select-focus,
html body .semi-cascader-focus,
html body .semi-datepicker-focus {
  border-color: rgb(var(--semi-color-primary)) !important;
  box-shadow: rgba(var(--semi-color-primary), 0.15) 0 0 0 3px !important;
}

/* ---- Slider / Rating / Upload / Radio / Checkbox box ---- */
html body .semi-radio-cardRadio,
html body .semi-checkbox-cardCheckbox,
html body .semi-upload-drag-area {
  border: 1.5px dashed rgb(var(--mc-border)) !important;
}

/* ---- Cards / Collapse / Panel ---- */
html body .semi-card,
html body .semi-card-bordered,
html body .semi-collapse,
html body .semi-collapse-item {
  border: 1px solid rgb(var(--mc-border)) !important;
}
html body .semi-card:hover {
  border-color: rgb(var(--mc-border-strong)) !important;
}

/* ---- Tabs track + bar ---- */
html body .semi-tabs-bar,
html body .semi-tabs-bar-top,
html body .semi-tabs-bar-bottom {
  border-bottom: 1px solid rgb(var(--mc-border)) !important;
}
html body .semi-tabs-bar-left {
  border-right: 1px solid rgb(var(--mc-border)) !important;
}

/* ---- Tables — row separators ---- */
html body .semi-table,
html body .semi-table-bordered {
  border: 1px solid rgb(var(--mc-border)) !important;
}
html body .semi-table-tbody > .semi-table-row > .semi-table-row-cell,
html body .semi-table-thead > .semi-table-row > .semi-table-row-head {
  border-bottom: 1px solid rgb(var(--mc-border)) !important;
}

/* ---- Dividers — make them visible ---- */
html body .semi-divider-horizontal,
html body .semi-divider-vertical,
html body .semi-divider-dashed,
html body hr {
  border-color: rgb(var(--mc-border)) !important;
  background-color: rgb(var(--mc-border)) !important;
}

/* ---- Modal / Drawer / SideSheet ---- */
html body .semi-modal-content,
html body .semi-sidesheet-inner {
  border: 1px solid rgb(var(--mc-border)) !important;
}
html body .semi-modal-header {
  border-bottom: 1px solid rgb(var(--mc-border)) !important;
}
html body .semi-modal-footer {
  border-top: 1px solid rgb(var(--mc-border)) !important;
}

/* ---- Form field groups ---- */
html body .semi-form-field {
  border-color: rgb(var(--mc-border));
}

/* ---- Popover arrow + tooltip frame ---- */
html body .semi-popover-content {
  border: 1px solid rgb(var(--mc-border)) !important;
}

/* ---- Navigation + sidebar — strengthen divider lines ---- */
html body .semi-navigation-horizontal {
  border-bottom: 1px solid rgb(var(--mc-border)) !important;
}
html body .semi-layout-sider,
html body .app-sider {
  border-right: 1px solid rgb(var(--mc-border)) !important;
}

/* ---- Disabled state: keep a visible but softer border ---- */
html body .semi-input-wrapper-disabled,
html body .semi-select-disabled,
html body .semi-button-disabled {
  border-color: rgb(var(--mc-border)) !important;
  opacity: 0.6;
}