/* ============================================================
   MLM Suite — Modern Theme (Bootstrap 5 based)
   统一现代主题：认证页 / 会员中心 / 后台管理
   ============================================================ */

:root {
  /* 2026 潮流：molten teal 祖母绿-青绿 + burnished amber 琥珀金 + 柔白中性 */
  --brand-1: #065f46;   /* emerald-800 */
  --brand-2: #0d9488;   /* teal-600 */
  --brand-3: #10b981;   /* emerald-500 */
  --accent:  #f59e0b;   /* amber-500 金色点缀 */
  --accent-2:#d97706;   /* amber-600 */
  --brand-grad: linear-gradient(135deg, #065f46 0%, #0d9488 55%, #10b981 100%);
  --ink: #0f1a17;        /* 深墨绿黑 */
  --muted: #6b7280;      /* gray-500 */
  --line: #e6e9e8;       /* 中性描边 */
  --surface: #ffffff;
  --bg: #f6f7f5;         /* Cloud Dancer 柔白中性 */
  --radius: 16px;
  --shadow-sm: 0 1px 2px rgba(6,95,70,.06), 0 1px 3px rgba(6,95,70,.08);
  --shadow: 0 10px 30px rgba(6,95,70,.10);
  --shadow-lg: 0 25px 60px rgba(13,148,136,.25);
}

* { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif; }
body { background: var(--bg); color: var(--ink); }

/* ---------- 通用组件 ---------- */
.btn-brand {
  background: var(--brand-grad);
  border: none; color: #fff; font-weight: 600;
  border-radius: 12px; padding: .65rem 1.1rem;
  box-shadow: 0 8px 20px rgba(13,148,136,.35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-brand:hover { color:#fff; transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 12px 26px rgba(13,148,136,.45); }
.btn-brand:active { transform: translateY(0); }

.card-soft { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.form-control, .form-select { border-radius: 12px; padding: .7rem .9rem; border-color: var(--line); }
.form-control:focus, .form-select:focus { border-color: var(--brand-2); box-shadow: 0 0 0 .2rem rgba(13,148,136,.15); }
.text-brand { color: var(--brand-2) !important; }
a { color: var(--brand-2); text-decoration: none; }
a:hover { color: var(--brand-1); }

/* ---------- 认证页（登录/注册/找回） ---------- */
.auth-wrap {
  min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr;
  background: var(--bg);
}
.auth-hero {
  position: relative; overflow: hidden; color: #fff;
  background: var(--brand-grad); padding: 56px 52px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.auth-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px 300px at 80% 20%, rgba(255,255,255,.18), transparent 60%),
              radial-gradient(500px 300px at 10% 90%, rgba(255,255,255,.12), transparent 60%);
}
.auth-hero .brand { font-size: 1.35rem; font-weight: 800; letter-spacing:.3px; position:relative; z-index:1; }
.auth-hero h1 { font-size: 2.3rem; font-weight: 800; line-height:1.15; position:relative; z-index:1; }
.auth-hero p { opacity:.92; font-size:1.02rem; max-width: 30ch; position:relative; z-index:1; }
.auth-hero .feat { display:flex; gap:.6rem; align-items:center; margin:.5rem 0; position:relative; z-index:1; }
.auth-hero .feat i { font-size:1.15rem; }

.auth-panel { display:flex; align-items:center; justify-content:center; padding: 40px 24px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card .logo { text-align:center; margin-bottom: 1.2rem; }
.auth-card h2 { font-weight: 800; font-size: 1.6rem; }
.auth-card .sub { color: var(--muted); margin-bottom: 1.6rem; }

@media (max-width: 900px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-hero { display:none; }
}

/* ---------- 会员/后台 仪表盘骨架 ---------- */
.app-shell { min-height:100vh; }
.app-sidebar {
  width: 250px; background: #0f1a17; color:#cbd5e1;
  padding: 18px 14px; position: fixed; top:0; left:0; bottom:0; height:100vh;
  overflow-y:auto; z-index:1030;
}
.app-sidebar .brand { color:#fff; font-weight:800; font-size:1.15rem; padding: 8px 10px 18px; display:flex; gap:.5rem; align-items:center; }
.app-sidebar .nav-link { color:#94a3b8; border-radius:10px; padding:.6rem .8rem; margin-bottom:2px; display:flex; gap:.6rem; align-items:center; font-weight:500; }
.app-sidebar .nav-link:hover { background:#16241f; color:#fff; }
.app-sidebar .nav-link.active { background: var(--brand-grad); color:#fff; box-shadow: 0 6px 16px rgba(13,148,136,.4); }
.app-main { margin-left:250px; min-width:0; min-height:100vh; display:flex; flex-direction:column; }
.app-topbar { background:#fff; border-bottom:1px solid var(--line); padding:14px 22px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:5; }
.app-content { padding: 24px; background:
  radial-gradient(1100px 420px at 100% -5%, rgba(13,148,136,.06), transparent 60%),
  radial-gradient(900px 380px at -10% 110%, rgba(245,158,11,.05), transparent 55%),
  var(--bg); }
.stat-card { border-radius: var(--radius); border:1px solid var(--line); background:#fff; padding:18px; box-shadow: var(--shadow-sm); }
.stat-card .icon { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; color:#fff; background:var(--brand-grad); font-size:1.3rem; }
.stat-card .val { font-size:1.7rem; font-weight:800; }
.stat-card .lbl { color:var(--muted); font-size:.85rem; }
.table thead th { color:var(--muted); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--line); }
.badge-soft { background: rgba(13,148,136,.1); color: var(--brand-2); font-weight:600; border-radius:8px; padding:.35em .6em; }

@media (max-width: 768px){ .app-sidebar{ left:-260px; z-index:1050; transition:left .25s; box-shadow: 0 0 40px rgba(0,0,0,.3); } .app-sidebar.open{ left:0; } .app-main{ margin-left:0; } }


/* ============================================================
   遗留页面正文基础样式（作用域限定在 .app-content 内，不影响外壳）
   让旧页面的表格/表单/容器在现代外壳里也有干净观感
   ============================================================ */
.app-content .remain,
.app-content .gao1 { padding: 0 !important; margin: 0; background: none !important; overflow: visible !important; float: none !important; width: auto !important; }
.app-content .remain { display: block; }

/* 卡片化容器：把裸内容包一层卡片感 */
.app-content > .remain,
.app-content .container2,
.app-content .box,
.app-content form:not(.d-flex) {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 20px; margin-bottom: 20px;
}

/* 表格统一 Bootstrap 观感：卡片外框 + 斑马纹 + 悬停高亮 */
.app-content table { width: 100%; border-collapse: separate; border-spacing: 0; background:#fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 1.25rem; box-shadow: var(--shadow-sm); }
.app-content table th { background: linear-gradient(180deg,#f7faf9,#eef3f1); color: #475569; font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; padding: 13px 15px; border-bottom: 2px solid var(--line); text-align: left; white-space: nowrap; }
.app-content table td { padding: 13px 15px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; color: var(--ink); }
.app-content table tbody tr:nth-child(even) td { background: #fafbfb; }
.app-content table tbody tr:hover td { background: rgba(13,148,136,.06); }
.app-content table tbody tr:last-child td { border-bottom: none; }

/* 嵌套表格（多用于布局）不套卡片/斑马纹，避免双层边框与错乱 */
.app-content table table { border: none; box-shadow: none; background: transparent; border-radius: 0; margin-bottom: 0; }
.app-content table table th { background: none; border-bottom: 1px solid #f1f5f9; text-transform: none; letter-spacing: 0; }
.app-content table table td { border-bottom: none; }
.app-content table table tbody tr:nth-child(even) td,
.app-content table table tbody tr:hover td { background: transparent; }

/* 表格内联表单控件：紧凑、统一，不再裸白 */
.app-content table td select,
.app-content table td input[type=text],
.app-content table td input[type=number],
.app-content table td textarea { width: 100%; padding: .4rem .6rem; font-size: .85rem; border-radius: 8px; background:#fff; margin: 2px 0; }
.app-content table td .btn,
.app-content table td button,
.app-content table td input[type=submit] { padding: .35rem .8rem; font-size: .82rem; border-radius: 8px; margin-top: 4px; }

/* 表单元素统一 */
.app-content input[type=text], .app-content input[type=password], .app-content input[type=number],
.app-content input[type=email], .app-content input[type=tel], .app-content select, .app-content textarea {
  border: 1px solid var(--line); border-radius: 10px; padding: .55rem .8rem; max-width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.app-content input:focus, .app-content select:focus, .app-content textarea:focus {
  outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 .2rem rgba(13,148,136,.15);
}

/* 按钮：把旧的红色主按钮统一成品牌绿金 */
.app-content .btn-primary, .app-content button[type=submit]:not(.btn-brand):not(.btn-light) {
  background: var(--brand-grad) !important; border: none !important; color: #fff !important;
  border-radius: 10px; padding: .5rem 1rem; font-weight: 600;
}
.app-content .btn-default { border-radius: 10px; }

/* 标题与图片 */
.app-content h1, .app-content h2, .app-content h3 { font-weight: 700; color: var(--ink); }
.app-content img { max-width: 100%; height: auto; }

/* 商城商品项排版兜底 */
.app-content .long_table td { vertical-align: top; }


/* ============================================================
   精修：侧栏滚动条 / 面包屑 / 面板 / 页头（覆盖前面的兜底）
   ============================================================ */

/* 侧栏：细而低调的滚动条 + 更紧凑 */
.app-sidebar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; padding-bottom: 28px; }
.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; }
.app-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }
.app-sidebar::-webkit-scrollbar-track { background: transparent; }
.app-sidebar .nav-link { padding: .55rem .85rem; margin-bottom: 3px; font-size: .9rem; line-height: 1.25; }
/* 分组标题：与上一组拉开距离，加细分隔线，缓解拥挤感 */
.app-sidebar .brand + .px-2 + .nav-link { margin-top: 2px; }
.app-sidebar > div.text-uppercase { margin-top: 1.35rem !important; margin-bottom: .4rem !important; padding-top: .85rem; border-top: 1px solid rgba(255,255,255,.07); font-size: .68rem !important; opacity:.85; }
/* 第一个分组标题不需要顶部分隔线（紧接品牌/仪表盘） */
.app-sidebar > div.text-uppercase:first-of-type { border-top: none; padding-top: 0; margin-top: .9rem !important; }

/* .remain 不再套卡片（页面自身有 .panel 卡片） */
.app-content > .remain { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0; }
/* 旧页头 h3 与面包屑/面板标题重复 → 隐藏,去重更清爽 */
.app-content .page-header { display: none; }
.app-content .gao1 { display: none; }

/* 旧版 Bootstrap3 标签页(nav-tabs)现代化 */
.app-content .nav-tabs { display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin:0 0 18px; padding:0 0 2px; border-bottom:2px solid var(--line); }
.app-content .nav-tabs > li { list-style:none; }
.app-content .nav-tabs > li > a { display:inline-block; padding:.55rem 1rem; border-radius:10px 10px 0 0; color:var(--muted); font-weight:600; text-decoration:none; border:2px solid transparent; border-bottom:none; margin-bottom:-2px; }
.app-content .nav-tabs > li > a:hover { color:var(--brand-2); background:rgba(13,148,136,.06); }
.app-content .nav-tabs > li.active > a, .app-content .nav-tabs > li > a.active { color:var(--brand-1); background:#fff; border-color:var(--line); border-bottom:2px solid #fff; }
.app-content .tab-content > .tab-pane { display:none; }
.app-content .tab-content > .tab-pane.active { display:block; }

/* 旧版 form-horizontal 行距(BS3 .form-group 在 BS5 下没间距→挤在一起) */
.app-content .form-group { margin-bottom: 16px; }
.app-content .control-label { display:block; font-weight:600; color:var(--ink); margin-bottom:5px; }
.app-content .form-group .form-control { margin-bottom:0; }

/* 面包屑：现代化 + 分隔符 */
.app-content .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; list-style: none; background: none; padding: 0; margin: 0 0 18px; font-size: .85rem; }
.app-content .breadcrumb li { display: inline-flex; align-items: center; color: var(--muted); }
.app-content .breadcrumb li:not(:first-child)::before { content: "\203A"; margin-right: .5rem; color: #cbd5e1; font-weight: 700; }
.app-content .breadcrumb li.active { color: var(--ink); font-weight: 600; }
.app-content .breadcrumb a { color: var(--brand-2); text-decoration: none; }
.app-content .breadcrumb a:hover { text-decoration: underline; }

/* BS3 面板 → 现代卡片 */
.app-content .panel, .app-content .panel-default { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 20px; overflow: hidden; }
.app-content .panel-heading { padding: 14px 18px; background: #f8fafc; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--ink); }
.app-content .panel-body { padding: 18px; }
.app-content .panel > table, .app-content .panel .long_table { margin: 0; }


/* ============================================================
   家谱树 zTree 现代皮肤（覆盖默认皮肤；作用于 .app-content 内）
   ============================================================ */
.app-content .ztree { padding: 6px 2px; background: none; }
.app-content .ztree li { line-height: normal; }
.app-content .ztree li ul { margin: 0; padding: 0 0 0 24px; position: relative; }
.app-content .ztree li ul::before { content:""; position:absolute; left:10px; top:0; bottom:14px; border-left:1px dashed #cbd5e1; }
.app-content .ztree li a {
  height: auto; min-height: 0; padding: 7px 12px; margin: 4px 0;
  border-radius: 10px; border: 1px solid var(--line); background: #fff;
  color: var(--ink); font-size: .88rem; display: inline-flex; align-items: center; gap: .45rem;
  box-shadow: var(--shadow-sm); transition: all .12s ease; vertical-align: middle;
}
.app-content .ztree li a:hover { background: #f0fdfa; border-color: var(--brand-2); color: var(--brand-1); text-decoration: none; }
.app-content .ztree li a.curSelectedNode { background: var(--brand-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(13,148,136,.35); }
.app-content .ztree li a.curSelectedNode .node_name { color:#fff; }
/* zTree 展开/收起按钮：低调圆形 */
.app-content .ztree li span.button.switch { width: 18px; height: 18px; margin-right: 2px; }
/* 隐藏默认文档图标，用留白更干净 */
.app-content .ztree li span.button.ico_docu, 
.app-content .ztree li span.button.ico_open, 
.app-content .ztree li span.button.ico_close { background-position: -110px 0; }
/* 节点文字里的状态标记美化（√Activated / ×Inactive 通过 JS 包 badge） */
.app-content .gv-badge-on { background: rgba(16,185,129,.14); color: #059669; font-weight: 600; border-radius: 6px; padding: .1em .5em; font-size: .78em; margin-left: .3em; }
.app-content .gv-badge-off { background: rgba(148,163,184,.2); color: #64748b; font-weight: 600; border-radius: 6px; padding: .1em .5em; font-size: .78em; margin-left: .3em; }


/* ============================================================
   现代分页 .gv-pager（pager.php link() 输出）
   ============================================================ */
.gv-pager { display:flex; flex-wrap:wrap; align-items:center; gap:6px; justify-content:center; margin:18px 0; }
.gv-pager a, .gv-pager span.active, .gv-pager span.disabled, .gv-pager span.gap {
  min-width:38px; height:38px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink);
  font-size:.9rem; font-weight:600; text-decoration:none; transition:all .12s ease;
}
.gv-pager a:hover { border-color:var(--brand-2); color:var(--brand-1); background:#f0fdfa; }
.gv-pager span.active { background:var(--brand-grad); color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(13,148,136,.3); }
.gv-pager span.disabled { color:#cbd5e1; background:#f8fafc; cursor:not-allowed; }
.gv-pager span.gap { border:none; background:none; min-width:auto; color:var(--muted); }
.gv-pager .gv-pager-info { border:none; background:none; color:var(--muted); font-weight:500; font-size:.85rem; margin-left:8px; min-width:auto; }
/* admin 主题下当前页用金色 */
.stat-card .icon, .gv-pager span.active { }


/* ============================================================
   家谱 org-chart 组织架构树（居中、上下分叉、连线、懒加载）
   ============================================================ */
.gv-orgchart { overflow-x: auto; padding: 12px 4px 4px; }
.gv-tree, .gv-tree ul { display: flex; justify-content: center; padding-top: 22px; position: relative; margin: 0; list-style: none; }
.gv-tree li { position: relative; padding: 22px 12px 0; text-align: center; list-style: none; }
/* 连接线 */
.gv-tree li::before, .gv-tree li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid var(--line); width: 50%; height: 22px; }
.gv-tree li::after { right: auto; left: 50%; border-left: 2px solid var(--line); }
.gv-tree li:only-child::before, .gv-tree li:only-child::after { display: none; }
.gv-tree li:only-child { padding-top: 22px; }
.gv-tree li:first-child::before, .gv-tree li:last-child::after { border: 0 none; }
.gv-tree li:last-child::before { border-right: 2px solid var(--line); border-radius: 0 6px 0 0; }
.gv-tree li:first-child::after { border-radius: 6px 0 0 0; }
.gv-tree ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid var(--line); width: 0; height: 22px; }
/* 根节点上方不画线 */
#gvTreeRoot { padding-top: 0; }
#gvTreeRoot > li::before, #gvTreeRoot > li::after { display: none; }
#gvTreeRoot > li { padding-top: 0; }
/* 折叠时隐藏子层 */
.gv-tree li:not(.expanded) > .gv-children { display: none; }
.gv-children:empty { display: none; }

/* 节点卡片 */
.gv-node { display: inline-flex; align-items: center; gap: .5rem; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); position: relative; transition: border-color .12s, box-shadow .12s; }
.gv-node.has-children { cursor: pointer; }
.gv-node.has-children:hover { border-color: var(--brand-2); box-shadow: var(--shadow); }
.gv-node-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-grad); color: #fff; display: grid; place-items: center; font-size: .95rem; flex: 0 0 auto; }
.gv-node-body { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.gv-node-name { font-weight: 700; font-size: .85rem; color: var(--ink); }
.gv-node-toggle { width: 22px; height: 22px; border-radius: 50%; background: #eef2f7; display: grid; place-items: center; font-size: .7rem; color: var(--brand-1); margin-left: .2rem; }
.gv-node.has-children:hover .gv-node-toggle { background: var(--brand-2); color: #fff; }
.gv-loading, .gv-empty { padding: 20px; font-size: .9rem; }

/* 头像圆标（会员仪表盘 profile 卡片） */
.stat-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--brand-grad); color:#fff; display: grid; place-items: center; font-size: 1.5rem; flex: 0 0 auto; box-shadow: var(--shadow-sm); }