/* ============================================================
   theme.css — 私域引流宝 全局主题系统 (uipro)
   默认主题: 亮色 · 橙白 · 磨砂玻璃 · 高端
   支持多色切换: 橙 / 蓝 / 紫 / 绿 / 暗夜
   用法: <link theme.css> + <script theme.js>; body 加 .theme-orange 等
   ============================================================ */
:root{
  /* 色板变量(默认 = 橙) */
  --t-primary:#F97316;
  --t-primary-strong:#EA580C;
  --t-primary-dim:rgba(249,115,22,.12);
  --t-primary-dim2:rgba(249,115,22,.08);
  --t-primary-text:rgba(249,115,22,.75);
  --t-accent:#FB923C;
  --t-ink:#1C1917;
  --t-ink-soft:#57534E;
  --t-ink-mute:#A8A29E;
  --t-line:rgba(120,113,108,.14);
  --t-bg:#FDF7F0;          /* 橙白磨砂底: 暖白带橙调 */
  --t-bg-grad:#FFF8F1;
  --t-card:rgba(255,255,255,.72);  /* 磨砂白 */
  --t-card-solid:#FFFFFF;
  --t-shadow:0 10px 34px -12px rgba(180,83,9,.18);
  --t-shadow-sm:0 2px 10px -4px rgba(180,83,9,.12);
  --t-radius:18px;
  --t-radius-sm:12px;
  --t-font:Inter,"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
}
/* —— 多色切换: 覆盖变量即换色 —— */
html.theme-blue   { --t-primary:#2B80FF; --t-primary-strong:#1d6fe0; --t-primary-dim:rgba(43,128,255,.12); --t-primary-text:rgba(43,128,255,.75); --t-accent:#4FA3FF; --t-bg:#EFF6FF; --t-bg-grad:#F5FAFF; --t-shadow:0 10px 34px -12px rgba(29,111,224,.2); }
html.theme-purple { --t-primary:#8B5CF6; --t-primary-strong:#7C3AED; --t-primary-dim:rgba(139,92,246,.12); --t-primary-text:rgba(139,92,246,.75); --t-accent:#A78BFA; --t-bg:#F5F3FF; --t-bg-grad:#FAF8FF; --t-shadow:0 10px 34px -12px rgba(124,58,237,.2); }
html.theme-green  { --t-primary:#10B981; --t-primary-strong:#059669; --t-primary-dim:rgba(16,185,129,.12); --t-primary-text:rgba(16,185,129,.75); --t-accent:#34D399; --t-bg:#ECFDF5; --t-bg-grad:#F3FEF9; --t-shadow:0 10px 34px -12px rgba(5,150,105,.2); }

/* —— 暗夜 —— */
html.theme-dark{
  --t-primary:#FB923C; --t-primary-strong:#F97316; --t-primary-dim:rgba(251,146,60,.14); --t-primary-text:rgba(251,146,60,.8); --t-accent:#FDBA74;
  --t-ink:#E7E5E4; --t-ink-soft:#A8A29E; --t-ink-mute:#78716C; --t-line:rgba(231,229,228,.12);
  --t-bg:#17130F; --t-bg-grad:#1C1813; --t-card:rgba(28,24,19,.82); --t-card-solid:#201B15;
  --t-shadow:0 10px 34px -12px rgba(0,0,0,.6);
}

/* ================= 基础 ================= */
body,html{background:var(--t-bg);}
body{
  font-family:var(--t-font);
  color:var(--t-ink);
  background:linear-gradient(180deg,var(--t-bg-grad) 0%,var(--t-bg) 100%) fixed;
}
a{transition:color .2s}
a:hover{color:var(--t-primary-strong)}

/* ================= 磨砂卡片 (通用) ================= */
/* 后台数据卡片 / 面板磨砂化 */
.data-card,.card,.panel,.widget,.wrap > .grid > div,.pvuv-card,
[class*="card"], .ivu-card{
  background:var(--t-card)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  border:1px solid var(--t-line)!important;
  border-radius:var(--t-radius)!important;
  box-shadow:var(--t-shadow-sm)!important;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease!important;
}
[class*="card"]:hover{
  transform:translateY(-2px);
  box-shadow:var(--t-shadow)!important;
  border-color:var(--t-primary-dim2)!important;
}

/* 面板背景优位于全局磨砂底 */
body { background: linear-gradient(160deg, var(--t-bg-grad) 0%, var(--t-bg) 55%, var(--t-bg-grad) 100%) fixed; }

/* ================= 侧边栏 (uipro v4 · flex 均衡 + 底部固定) ================= */
#app .left{
  background:var(--t-card)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
  border-right:1px solid var(--t-line)!important;
  box-shadow:2px 0 24px -14px rgba(120,113,108,.3), inset -1px 0 0 var(--t-line)!important;
  width:230px!important;
  display:flex!important; flex-direction:column!important;
  position:fixed!important; left:0; top:0; bottom:0; height:100vh!important;
  overflow:hidden!important;
}
/* logo (2026-08-21 加大) */
#app .left .dhview .logo{
  width:190px!important; height:66px!important; margin:22px auto 16px!important;
  flex:0 0 auto!important; border-radius:12px!important; background-size:auto 82%!important;
}
/* 菜单区: 弹性占满剩余, 内部滚动, 紧凑 */
#app .left .dhview{
  width:190px!important; margin:0 auto!important;
  flex:1 1 auto!important; min-height:0!important;
  overflow-y:auto!important; overflow-x:hidden!important;
  padding-bottom:130px!important;
  scrollbar-width:thin;
  display:block!important;
}
#app .left .dhview ul{ padding:0!important; margin:0!important; }
/* 菜单项: 中性深灰 + hover 淡橙 + 选中橙边 + 动画 */
#app .left .dhview ul li, .nav-li{
  width:auto!important; min-height:40px!important; line-height:1.2!important; height:auto!important;
  margin:3px 6px!important; padding:10px 10px!important;
  border-radius:10px!important; border-left:3px solid transparent;
  list-style:none!important; font-size:15px!important; text-indent:0!important;
  display:flex!important; align-items:center!important;
  color:var(--t-ink-soft)!important; font-weight:500!important;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease!important;
  cursor:pointer;
}
#app .left .dhview ul li:hover, .nav-li:hover{
  background:var(--t-primary-dim)!important; color:var(--t-ink)!important;
  transform:translateX(5px); box-shadow:var(--t-shadow-sm);
}
#app .left .dhview ul li.active, #app .left .dhview ul li.on, #app .left .dhview ul li.current,
.nav-li.active, .nav-a.active .nav-li{
  background:var(--t-primary-dim)!important; color:var(--t-ink)!important;
  border-left-color:var(--t-primary)!important; box-shadow:var(--t-shadow-sm)!important;
  font-weight:600!important;
}
#app .left .dhview ul li span, .nav-li span, .nav-a span{ color:inherit!important; }
#app .left .dhview ul li i, .nav-li i, .nav-a i{ color:var(--t-primary)!important; opacity:.92; margin-right:10px; }
/* 底部账户: flex 块, 固定占位, 绝不遮挡菜单 */
#app .left .account{
  position:absolute!important; left:0; right:0; bottom:0;
  flex:0 0 auto!important;
  margin-top:0!important;
  width:100%!important; margin-left:0!important; margin-right:0!important;
  padding:10px 14px 14px!important;
  background:var(--t-primary-dim)!important; border-top:1px solid var(--t-line)!important;
  text-align:left!important; box-sizing:border-box!important;
}
.left .vipCard, #app .left .account .vipCard{
  background:var(--t-card-solid)!important; border:1px solid var(--t-line)!important;
  border-radius:14px!important; padding:12px 14px!important;
  box-shadow:var(--t-shadow-sm)!important; backdrop-filter:blur(12px)!important;
  width:auto!important; margin:0!important;
}
#app .left .account .vipCard .version{ color:var(--t-primary-strong)!important; font-weight:700!important; font-size:14px!important; margin-bottom:6px!important; }
#app .left .account .vipCard .user_name{ color:var(--t-ink)!important; font-size:13px!important; display:flex!important; justify-content:space-between!important; align-items:center!important; }
#app .left .account .vipCard .exitLogin{ color:var(--t-primary)!important; cursor:pointer!important; }
#app .left .account .vipCard .exitLogin:hover{ color:var(--t-primary-strong)!important; text-decoration:underline!important; }
/* 折叠态: 窄栏兼容 */
@media (max-width:768px){
  #app .left .dhview ul li span, .nav-li span{ display:none; }
}

/* ================= 顶部/导航 ================= */
.topbar,header,[class*="navbar"]{
  background:var(--t-card)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  border-bottom:1px solid var(--t-line)!important;
}

/* ================= 按钮 ================= */
.btn,.btn-primary,button[class*="btn"]{
  transition:all .2s cubic-bezier(.4,0,.2,1)!important;
}
.btn-primary,button.btn-primary,input[type=submit],.t-btn{
  background:var(--t-primary)!important;border-color:var(--t-primary)!important;color:#fff!important;
  box-shadow:var(--t-shadow-sm)!important;
}
.btn-primary:hover,button.btn-primary:hover{
  background:var(--t-primary-strong)!important;border-color:var(--t-primary-strong)!important;
  transform:translateY(-1px);box-shadow:var(--t-shadow)!important;
}

/* ================= 标题/强调 ================= */
h1,h2,h3,h4,h5,[class*="title"],.title,.card-name .name-text{
  color:var(--t-ink)!important;
}
a, .name-text, [class*="link"]{ color:var(--t-primary)!important; }
a:hover{ color:var(--t-primary-strong)!important; }

/* ================= 官网首页融合 ================= */
/* 复用 uipro.css 变量, 让首页与后台同主题 */
.index-hero, .bg-primary{ background:var(--t-primary)!important; }
.text-primary{ color:var(--t-primary)!important; }
.hover\:text-primary:hover{ color:var(--t-primary-strong)!important; }
.hover\:bg-primary:hover{ background:var(--t-primary-strong)!important; }
.grid > div{ background:var(--t-card); backdrop-filter:blur(14px); }

/* ================= 表单/输入 ================= */
input,select,textarea{
  background:var(--t-card-solid)!important;color:var(--t-ink)!important;
  border:1px solid var(--t-line)!important;border-radius:var(--t-radius-sm)!important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--t-primary)!important;box-shadow:0 0 0 3px var(--t-primary-dim)!important;outline:none!important;
}

/* ================= 表格 ================= */
table, .table{ color:var(--t-ink); }
.table thead th{ background:var(--t-primary-dim)!important; color:var(--t-primary-strong)!important; }

/* ================= 滚动条 ================= */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--t-primary-dim);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--t-primary-dim2)}
::-webkit-scrollbar-track{background:transparent}

/* ================= 悬浮换肤按钮 ================= */
.uitheme-fab{
  position:fixed;right:18px;top:14px;z-index:10003;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--t-primary)!important;color:#fff!important;
  box-shadow:var(--t-shadow)!important;border:none!important;
  transition:transform .2s;font-size:20px;
}
.uitheme-fab:hover{transform:scale(1.06)}
.uitheme-panel{
  position:fixed;right:18px;top:62px;z-index:10003;
  background:var(--t-card)!important;backdrop-filter:blur(20px)!important;
  border:1px solid var(--t-line)!important;border-radius:16px;
  box-shadow:var(--t-shadow)!important;padding:14px;width:190px;display:none;
}
.uitheme-panel.open{display:block}
.uitheme-panel h6{margin:0 0 8px;font-size:12px;color:var(--t-ink-mute);letter-spacing:.05em}
.uitheme-row{display:flex;gap:8px;flex-wrap:wrap}
.uitheme-swatch{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .15s}
.uitheme-swatch:hover{transform:scale(1.12)}
.uitheme-swatch.on{border-color:#fff;outline:2px solid var(--t-primary)}
.uitheme-mode{display:flex;gap:6px;margin-top:8px}
.uitheme-mode span{flex:1;text-align:center;font-size:12px;padding:6px 0;border-radius:8px;cursor:pointer;background:var(--t-primary-dim);color:var(--t-ink-soft)}
.uitheme-mode span.on{background:var(--t-primary);color:#fff}

/* ================= 暗夜下修正 ================= */
html.theme-dark [class*="card"],html.theme-dark .data-card{
  background:var(--t-card)!important;
}
html.theme-dark .table thead th{background:rgba(251,146,60,.15)}

/* ================= 焦点可见性/动效 (uipro) ================= */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--t-primary);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (prefers-color-scheme:dark){
  html:not(.theme-dark).theme-auto{ --t-primary:#FB923C; --t-primary-strong:#F97316; --t-primary-dim:rgba(251,146,60,.14); --t-primary-text:rgba(251,146,60,.8); --t-accent:#FDBA74; --t-ink:#E7E5E4; --t-ink-soft:#A8A29E; --t-ink-mute:#78716C; --t-line:rgba(231,229,228,.12); --t-bg:#17130F; --t-bg-grad:#1C1813; --t-card:rgba(28,24,19,.82); --t-card-solid:#201B15; }
}

/* ============================================================
   ===== 组件统一层 (uipro) · 覆盖全后台功能页共用组件 =====
   插件卡片 / 基础按钮 / 数据列表 / 面包屑 / 统计块
   ============================================================ */

/* ---- 插件中心卡片: 磨砂白 + 主题色 ---- */
.data-list .plugin_card{
  background:var(--t-card)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  border:1px solid var(--t-line)!important;
  border-radius:var(--t-radius)!important;
  box-shadow:var(--t-shadow-sm)!important;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease!important;
}
.data-list .plugin_card:hover{
  transform:translateY(-3px);
  box-shadow:var(--t-shadow)!important;
  border-color:var(--t-primary-dim2)!important;
}
.data-list .plugin_card .plugin_name{ color:var(--t-ink)!important; }
.data-list .plugin_card .plugin_desc{ color:var(--t-ink-soft)!important; }
.data-list .plugin_card .plugin_btn .action_btn{
  background:var(--t-primary)!important; border:none!important; color:#fff!important;
  border-radius:9px!important; box-shadow:var(--t-shadow-sm)!important;
  transition:all .2s!important;
}
.data-list .plugin_card .plugin_btn .action_btn:hover{ background:var(--t-primary-strong)!important; transform:translateY(-1px); }

/* ---- 基础按钮: 默认/浅色/危险 ---- */
#app .default-btn, #right .data-card .default-btn{
  background:var(--t-card-solid)!important; color:var(--t-ink)!important;
  border:1px solid var(--t-line)!important; border-radius:10px!important;
  transition:all .2s!important;
}
#app .default-btn:hover, #right .data-card .default-btn:hover{
  border-color:var(--t-primary)!important; color:var(--t-primary-strong)!important;
  background:var(--t-primary-dim)!important;
}
#app .tint-btn, #right .data-card .tint-btn{
  background:var(--t-primary)!important; color:#fff!important; border:none!important;
  border-radius:10px!important; box-shadow:var(--t-shadow-sm)!important;
  transition:all .2s!important;
}
#app .tint-btn:hover, #right .data-card .tint-btn:hover{ background:var(--t-primary-strong)!important; transform:translateY(-1px); box-shadow:var(--t-shadow)!important; }

/* ---- 面包屑/标题行 ---- */
#right h3{ color:var(--t-ink)!important; font-weight:600!important; }
#right h3 .mbx{ color:var(--t-primary)!important; }

/* ---- 数据列表/表格 通用 ---- */
#right .data-list, #right .table-wrap{ background:var(--t-card)!important; border-radius:var(--t-radius)!important; border:1px solid var(--t-line)!important; box-shadow:var(--t-shadow-sm)!important; }
#right .table thead th{ background:var(--t-primary-dim)!important; color:var(--t-primary-strong)!important; }
#right .table td{ color:var(--t-ink-soft)!important; }

/* ---- 统计数字块 ---- */
.data-card [class*="metric"], .pvuv-card .metric .m-value, .m-value{
  color:var(--t-primary-strong)!important;
}
.data-card [class*="metric"] .m-label, .m-label, .m-sub{
  color:var(--t-ink-soft)!important;
}

/* ---- 弹窗/模态 ---- */
.modal-content, .modal-body{
  background:var(--t-card)!important; backdrop-filter:blur(16px)!important;
  border:1px solid var(--t-line)!important; border-radius:18px!important;
}
.modal-title{ color:var(--t-ink)!important; }

/* ---- 徽标/标签 ---- */
.badge, [class*="tag"], .status-tag{
  background:var(--t-primary-dim)!important; color:var(--t-primary-strong)!important;
  border-radius:8px!important;
}

/* ---- 暗夜下补充 ---- */
html.theme-dark .data-list .plugin_card, html.theme-dark .modal-content{ background:var(--t-card)!important; }

/* ===== 侧边栏 logo 防闪 (uipro) ===== */
#app .left .dhview .logo, .left .dhview .logo{
  background-image:none;
  background-color:transparent !important;
}

/* ===== 分享卡片演示区 (uipro) ===== */
.shareCard_preview, .shareCard_desc_img, .shareCard_img{
  background:var(--t-card)!important; backdrop-filter:blur(10px)!important;
  border:1px solid var(--t-line)!important; border-radius:14px!important;
  box-shadow:var(--t-shadow-sm)!important; padding:6px!important;
}
.shareCard_preview img, .shareCard_img img{ border-radius:10px!important; }

/* ===== 手机端汉堡菜单 (uipro · 悬浮 · 跟随主题) ===== */
.menu-toggle{
  position:fixed!important; top:12px!important; right:12px!important; z-index:10001!important;
  width:40px!important; height:40px!important; border-radius:12px!important;
  display:none!important; align-items:center!important; justify-content:center!important;
  background:var(--t-primary)!important; box-shadow:var(--t-shadow)!important;
  cursor:pointer!important; border:none!important;
}
.menu-toggle span,.menu-toggle span:before,.menu-toggle span:after{
  content:""; display:block; width:18px; height:2px; border-radius:2px;
  background:#fff; position:absolute;
}
.menu-toggle span{ position:relative; }
.menu-toggle span:before{ top:-5px; }
.menu-toggle span:after{ top:5px; }
.menu-toggle.open span{ background:transparent; }
.menu-toggle.open span:before{ top:0; transform:rotate(45deg); }
.menu-toggle.open span:after{ top:0; transform:rotate(-45deg); }
.menu-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:9999; display:none; }
@media (max-width:768px){
  .menu-toggle{ display:flex!important; }
  #app .left { transform:translateX(-100%); transition:transform .3s ease!important; z-index:10000; }
  #app .left.open, body.menu-open #app .left{ transform:translateX(0)!important; box-shadow:var(--t-shadow)!important; }
  .menu-overlay.show{ display:block; }
}

/* 手机端: 换肤与菜单按钮并排右上 */
@media (max-width:768px){
  .uitheme-fab{ right:60px!important; top:12px!important; width:40px!important; height:40px!important; font-size:18px!important; z-index:10003!important; }
  .uitheme-panel{ right:8px!important; top:60px!important; }
}

/* ===== mobile-fab-hamburger-final (uipro) ===== */
@media (max-width:768px){
  .menu-toggle{ left:auto!important; top:12px!important; right:12px!important; display:flex!important; }
  .uitheme-fab{ left:auto!important; top:12px!important; right:60px!important; width:40px!important; height:40px!important; font-size:18px!important; }
  .uitheme-panel{ top:60px!important; right:8px!important; }
}