/* ================================================================
   AI小白 主题 v4 — 全系统魔改 (Light+Dark, layout-transparent)
   关键修复: 让 Semi layout 透明，亮色渐变背景得以透出
   ================================================================ */

/* ============ 1. 品牌变量 ============ */
body, :host {
  --ax-cyan:#0891b2; --ax-cyan-2:#06b6d4; --ax-cyan-3:#22d3ee;
  --ax-violet:#7c3aed; --ax-violet-2:#8b5cf6;
  --ax-grad:linear-gradient(135deg,#0891b2 0%,#7c3aed 100%);
  --ax-grad-hover:linear-gradient(135deg,#06b6d4 0%,#8b5cf6 100%);
  --ax-grad-soft:linear-gradient(135deg,rgba(8,145,178,.10),rgba(124,58,237,.07));
  --ax-glow:0 0 0 3px rgba(34,211,238,.22);
  --ax-shadow:0 1px 2px rgba(8,145,178,.04),0 12px 32px -12px rgba(124,58,237,.25);
  --ax-shadow-hov:0 4px 10px rgba(8,145,178,.10),0 24px 56px -10px rgba(124,58,237,.4);
}

/* ============ 2. Semi 主色 → 青色品牌 ============ */
body, :host {
  --semi-color-primary:#0891b2 !important;
  --semi-color-primary-hover:#06b6d4 !important;
  --semi-color-primary-active:#0e7490 !important;
  --semi-color-primary-light-default:rgba(8,145,178,.08) !important;
  --semi-color-primary-light-hover:rgba(8,145,178,.15) !important;
  --semi-color-primary-light-active:rgba(8,145,178,.22) !important;
  --semi-color-link:#0891b2 !important;
  --semi-color-link-hover:#06b6d4 !important;
  --semi-color-focus-border:#22d3ee !important;
}

/* ============ 3. Semi blue 调色板 → cyan ============ */
body, :host {
  --semi-blue-0:207,250,254 !important; --semi-blue-1:165,243,252 !important;
  --semi-blue-2:103,232,249 !important; --semi-blue-3:34,211,238 !important;
  --semi-blue-4:6,182,212 !important;   --semi-blue-5:8,145,178 !important;
  --semi-blue-6:14,116,144 !important;  --semi-blue-7:21,94,117 !important;
  --semi-blue-8:22,78,99 !important;    --semi-blue-9:8,51,68 !important;
}

/* ============ 4. ★关键★ 全息背景 + 透明 layout (亮色生效) ============ */
html, body {
  background:
    radial-gradient(at 8% 0%, rgba(34,211,238,.13) 0%, transparent 42%),
    radial-gradient(at 92% 10%, rgba(168,85,247,.12) 0%, transparent 45%),
    radial-gradient(at 50% 100%, rgba(20,184,166,.08) 0%, transparent 55%),
    #eef2f8 !important;
  background-attachment: fixed !important;
}
/* 让整条 Semi 布局链透明，背景透出 */
#root,
.app-layout,
.app-layout.semi-layout,
.semi-layout,
.semi-layout-content,
.semi-layout-footer,
main.semi-layout-content,
.semi-layout .semi-layout {
  background: transparent !important;
}
/* 动态光晕 */
body::before, body::after {
  content:''; position:fixed; width:520px; height:520px;
  pointer-events:none; z-index:0; border-radius:50%;
}
body::before {
  top:-220px; right:-160px;
  background:radial-gradient(circle, rgba(34,211,238,.18) 0%, transparent 70%);
  animation: ax-float 18s ease-in-out infinite;
}
body::after {
  bottom:-220px; left:-160px;
  background:radial-gradient(circle, rgba(124,58,237,.16) 0%, transparent 70%);
  animation: ax-float 22s ease-in-out infinite reverse;
}
@keyframes ax-float { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(60px,-40px) scale(1.15)} }

/* ============ 5. ★首页★ 专属魔改 ============ */
/* 渐变流光标题 */
.shine-text {
  background:linear-gradient(110deg,#06b6d4,#3b82f6 35%,#a855f7 70%,#ec4899) !important;
  background-size:220% auto !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  animation: ax-shine 6s linear infinite !important;
  filter: drop-shadow(0 4px 24px rgba(124,58,237,.25));
}
@keyframes ax-shine { to { background-position:220% center } }

/* 首页发光球 */
.blur-ball-indigo {
  background:radial-gradient(circle, rgba(124,58,237,.55), transparent 70%) !important;
  width:460px !important; height:460px !important; filter:blur(70px) !important;
}
.blur-ball-teal {
  background:radial-gradient(circle, rgba(34,211,238,.5), transparent 70%) !important;
  width:460px !important; height:460px !important; filter:blur(70px) !important;
}

/* 首页 BASE URL 输入框 — 玻璃发光 */
.semi-input-wrapper.\!rounded-full {
  background:rgba(255,255,255,.7) !important;
  backdrop-filter:blur(14px) saturate(180%) !important;
  border:1px solid rgba(8,145,178,.25) !important;
  box-shadow:0 8px 28px -10px rgba(8,145,178,.35) !important;
}

/* 首页供应商图标 hover 发光 */
.flex-wrap > div > svg, .flex-wrap > div > span {
  transition: transform .25s, filter .25s;
}
.flex-wrap > div:hover > svg {
  transform: translateY(-4px) scale(1.12);
  filter: drop-shadow(0 6px 16px rgba(8,145,178,.45));
}

/* 首页 footer 黄球 → 青紫 */
.semi-layout-footer [class*="bg-[#FFD166]"],
.semi-layout-footer .bg-\[\#FFD166\] {
  background:linear-gradient(135deg,#22d3ee,#a855f7) !important;
  opacity:.45 !important; filter:blur(2px);
}

/* ============ 6. 卡片 — 玻璃 + 大圆角 ============ */
.semi-card, .semi-card-bordered {
  border-radius:20px !important;
  background:rgba(255,255,255,.72) !important;
  backdrop-filter:blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(180%) !important;
  border:1px solid rgba(255,255,255,.7) !important;
  box-shadow:var(--ax-shadow) !important;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s !important;
  position:relative; z-index:1;
}
.semi-card:hover { transform:translateY(-2px); box-shadow:var(--ax-shadow-hov) !important; }
.semi-card-header { border-bottom:1px solid rgba(8,145,178,.08) !important; }

/* ============ 7. 侧边栏 / 导航 — 玻璃 ============ */
.semi-navigation {
  background:rgba(255,255,255,.6) !important;
  backdrop-filter:blur(18px) saturate(180%) !important;
  border-right:1px solid rgba(8,145,178,.08) !important;
}
.semi-navigation-item, .sidebar-nav-item {
  border-radius:12px !important; transition:background .2s, transform .15s !important;
}
.semi-navigation-item:hover, .sidebar-nav-item:hover { background:var(--ax-grad-soft) !important; }
.semi-navigation-item-selected, .sidebar-nav-item-selected,
.semi-navigation-item-normal-selected {
  background:var(--ax-grad-soft) !important; color:var(--ax-cyan) !important;
  position:relative;
  box-shadow:inset 0 0 0 1px rgba(8,145,178,.18), 0 4px 16px -6px rgba(8,145,178,.32) !important;
}
.semi-navigation-item-selected::before, .sidebar-nav-item-selected::before {
  content:''; position:absolute; left:-2px; top:8px; bottom:8px; width:3px;
  background:var(--ax-grad); border-radius:0 3px 3px 0; box-shadow:0 0 12px rgba(8,145,178,.6);
}
.semi-navigation-item-selected svg, .sidebar-nav-item-selected svg {
  filter:drop-shadow(0 0 4px rgba(8,145,178,.5));
}

/* ============ 8. 顶栏 — 玻璃 ============ */
header, .semi-navigation-header {
  background:rgba(255,255,255,.62) !important;
  backdrop-filter:blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(180%) !important;
  border-bottom:1px solid rgba(8,145,178,.08) !important;
}

/* ============ 9. 渐变标题 ============ */
.semi-typography-h1,.semi-typography-h2,.semi-typography-h3,
h1.semi-typography,h2.semi-typography,h3.semi-typography {
  background:var(--ax-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent !important;
  font-weight:700 !important; letter-spacing:-.02em;
}

/* ============ 10. 主按钮 — 渐变 ============ */
.semi-button-primary, .semi-button-solid.semi-button-primary {
  background:var(--ax-grad) !important; border:none !important; border-radius:10px !important;
  color:#fff !important; font-weight:600 !important;
  box-shadow:0 4px 14px -4px rgba(8,145,178,.45) !important; transition:all .25s !important;
}
.semi-button-primary:hover {
  background:var(--ax-grad-hover) !important; transform:translateY(-1px);
  box-shadow:0 6px 22px -4px rgba(8,145,178,.6) !important;
}
.semi-button, .semi-button-secondary, .semi-button-tertiary, .semi-button-borderless { border-radius:10px !important; }
.semi-button-light { border-radius:10px !important; }

/* ============ 11. 输入 — 圆角 + 聚焦发光 ============ */
.semi-input-wrapper,.semi-select,.semi-textarea-wrapper,.semi-cascader,
.semi-datepicker,.semi-timepicker,.semi-tagInput { border-radius:10px !important; transition:box-shadow .2s,border-color .2s !important; }
.semi-input-wrapper-focus,.semi-select-focus,.semi-textarea-wrapper:focus-within,
.semi-cascader-focus,.semi-input-wrapper:focus-within {
  box-shadow:var(--ax-glow) !important; border-color:var(--ax-cyan-3) !important;
}

/* ============ 12. Tab — 渐变下划线 ============ */
.semi-tabs-tab-active { color:var(--ax-cyan) !important; font-weight:700 !important; }
.semi-tabs-active-bar { background:var(--ax-grad) !important; height:3px !important; border-radius:3px !important; box-shadow:0 0 12px rgba(8,145,178,.45); }

/* ============ 13. 表格 ============ */
.semi-table-thead > .semi-table-row > .semi-table-row-head {
  background:linear-gradient(135deg,rgba(8,145,178,.07),rgba(124,58,237,.05)) !important;
  font-weight:700 !important; border-bottom:2px solid rgba(8,145,178,.14) !important;
}
.semi-table-row:hover > .semi-table-row-cell { background:rgba(8,145,178,.045) !important; }
.semi-table, .semi-table-tbody, .semi-table-row-cell { background:transparent !important; }

/* ============ 14. Modal ============ */
.semi-modal-content {
  border-radius:24px !important; overflow:hidden;
  background:rgba(255,255,255,.88) !important;
  backdrop-filter:blur(24px) saturate(180%) !important;
  box-shadow:0 24px 64px -16px rgba(8,145,178,.28),0 8px 16px -8px rgba(124,58,237,.18) !important;
}
.semi-modal-mask { backdrop-filter:blur(6px) !important; background:rgba(8,12,30,.35) !important; }

/* ============ 15. 下拉 / Toast / Tag / Switch ============ */
.semi-dropdown-menu,.semi-select-option-list,.semi-cascader-option-list {
  border-radius:14px !important; backdrop-filter:blur(20px) saturate(180%) !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 12px 36px -8px rgba(8,145,178,.22),0 4px 8px -4px rgba(124,58,237,.12) !important;
  border:1px solid rgba(8,145,178,.1) !important;
}
.semi-select-option-selected,.semi-dropdown-item-active { background:var(--ax-grad-soft) !important; color:var(--ax-cyan) !important; font-weight:600 !important; }
.semi-toast,.semi-notification-notice { border-radius:16px !important; backdrop-filter:blur(16px) !important; background:rgba(255,255,255,.88) !important; }
.semi-tag { border-radius:6px !important; }
.semi-switch-checked { background:var(--ax-grad) !important; box-shadow:0 0 12px rgba(8,145,178,.35); }
.semi-checkbox-checked .semi-checkbox-inner-display,.semi-radio-checked .semi-radio-inner { background:var(--ax-grad) !important; border-color:var(--ax-cyan) !important; }
.semi-progress-track-inner { background:var(--ax-grad) !important; }
.semi-avatar-orange { background:var(--ax-grad) !important; }
.semi-page-item-active { background:var(--ax-grad) !important; border-color:var(--ax-cyan) !important; color:#fff !important; }

/* ============ 16. 滚动条 ============ */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#0891b2,#7c3aed); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#06b6d4,#8b5cf6); background-clip:padding-box; }

/* ============ ★ 暗色模式 ★ ============ */
body[theme-mode=dark], html.dark body {
  background:
    radial-gradient(at 0% 0%, rgba(34,211,238,.08) 0%, transparent 40%),
    radial-gradient(at 100% 100%, rgba(124,58,237,.10) 0%, transparent 45%),
    #070a14 !important;
  --semi-color-primary:#06b6d4 !important;
  --semi-color-primary-hover:#22d3ee !important;
  --semi-color-bg-0:rgba(8,10,22,1) !important;
  --semi-color-bg-1:rgba(12,16,32,1) !important;
  --semi-color-bg-2:rgba(18,22,42,1) !important;
}
body[theme-mode=dark] .semi-card, html.dark .semi-card {
  background:rgba(12,16,32,.6) !important; border:1px solid rgba(34,211,238,.12) !important;
  backdrop-filter:blur(20px) saturate(180%) !important;
}
body[theme-mode=dark] .semi-navigation, html.dark .semi-navigation {
  background:rgba(10,14,30,.6) !important; border-right:1px solid rgba(34,211,238,.1) !important;
}
body[theme-mode=dark] header, html.dark header {
  background:rgba(10,14,34,.7) !important; border-bottom:1px solid rgba(34,211,238,.12) !important;
}
body[theme-mode=dark] .semi-modal-content, html.dark .semi-modal-content {
  background:rgba(12,16,32,.88) !important; border:1px solid rgba(34,211,238,.15) !important;
}
body[theme-mode=dark] .semi-dropdown-menu,
body[theme-mode=dark] .semi-select-option-list, html.dark .semi-dropdown-menu {
  background:rgba(12,16,32,.94) !important; border:1px solid rgba(34,211,238,.12) !important;
}
body[theme-mode=dark] .semi-table-thead > .semi-table-row > .semi-table-row-head, html.dark .semi-table-thead > .semi-table-row > .semi-table-row-head {
  background:linear-gradient(135deg,rgba(34,211,238,.08),rgba(124,58,237,.06)) !important;
  border-bottom-color:rgba(34,211,238,.15) !important;
}