/* ==========================================================================
   统一设计系统  ·  layout.css
   ────────────────────────────────────────────────────────────────────────
   基准：以「收益复利计算器」页为唯一视觉基准（该页排版自有、本文件不侵入）。
   其余页面（门户 / 余额监控 / 后台管理）统一消费本文件提供的令牌与组件。

   分层：
     A. 设计令牌     —— 全局，与计算器 :root 逐值一致
     B. 页面外壳     —— 全局
     C. 容器         —— 三档宽度（页面按内容密度选档，不再各自写死数字）
     D. 页面头部     —— 与计算器 header.top 同构：logo + 标题 + 副标题 + chips
     E. 卡片 / 区块  —— 与计算器 .card 同材质
     F. 控件 / 表格  —— 作用域 .wb-ui，仅作用于参与统一的页面
   ========================================================================== */

/* ══════════════════ A. 设计令牌（= 计算器基准值） ══════════════════ */
:root{
  /* —— 色板 —— */
  --bg:       #14110e;   /* 页面底色 */
  --bg-2:     #1b1712;   /* 输入框底 */
  --panel:    #201a14;   /* 卡片顶 */
  --panel-2:  #261f17;   /* 卡片底 / 表头 */
  --line:     #35291d;   /* 常规描边 */
  --line-2:   #43331f;   /* 强调描边 / 输入框 */
  --text:     #f6ede1;   /* 主文字 */
  --text-2:   #c9b8a4;   /* 次文字 */
  --muted:    #93816d;   /* 弱文字 */
  --amber:    #f2a93b;   /* 主强调 */
  --amber-2:  #ffc061;   /* 亮强调 */
  --coral:    #ff7a59;   /* 次强调 */
  --coral-2:  #ff9a7d;
  --green:    #6fcf97;   /* 成功 / 涨 */
  --red:      #ef6d6d;   /* 失败 / 跌 */

  /* —— 材质 —— */
  --shadow:   0 10px 30px rgba(0,0,0,.45);
  --radius:   14px;      /* 卡片圆角（计算器 .card） */
  --r-in:     11px;      /* 内嵌块圆角 */
  --r-ctl:    9px;       /* 控件/按钮圆角 */

  /* —— 尺寸 —— */
  /* 全站统一容器宽度：四个页面一律 1280px，不再分档。
     取 1280 的依据：计算器 .layout = 400px 左栏 + 20px 间距 + 右栏，
     右栏内最宽的表格 min-width 为 760px，故需 1280 - 48(左右 padding) - 420 >= 760 → >= 1228px，
     1280 是最接近且留有余量的通用值（Bootstrap xl 断点）。 */
  --w-page:   1280px;
  --w-narrow: var(--w-page);   /* 兼容旧类名：portal 的 .narrow */
  --w-wide:   var(--w-page);   /* 兼容旧类名：calculator 的 .wide */
  --page-pad: 24px;      /* 容器左右内边距 */
  --sp-sec:   20px;      /* 区块间距（= 计算器 .layout gap） */

  /* —— 兼容别名：历史页面曾用 --panel2 / --border 命名 —— */
  --panel2: var(--panel-2);
  --border: var(--line);
}

/* ══════════════════ B. 页面外壳 ══════════════════ */
body.wb-page{
  margin: 0;
  padding: 0 0 56px;
  min-height: 100vh;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei",
               system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 600px at 12% -8%, rgba(242,169,59,.10), transparent 60%),
    radial-gradient(900px  500px at 95%   0%, rgba(255,122,89,.08), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  /* 切换页面时的轻微淡入。
     刻意只用 opacity、不用 transform —— transform 会创建新包含块，
     可能让导航条的 position:sticky 行为异常。 */
  animation: wb-fade .26s ease-out;
}
@keyframes wb-fade{ from{ opacity: 0 } to{ opacity: 1 } }
@media (prefers-reduced-motion: reduce){
  body.wb-page{ animation: none; }
}

/* ══════════════════ C. 容器 ══════════════════ */
.wb-page .wrap{
  max-width: var(--w-page);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.wb-page .wrap.narrow{ max-width: var(--w-narrow); }
.wb-page .wrap.wide  { max-width: var(--w-wide);   }

/* ══════════════════ D. 页面头部（与计算器 header.top 同构） ══════════════════ */
.wb-pagehead{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 2px 0 var(--sp-sec);
}
.wb-pagehead .wb-ph-main{ display: flex; align-items: center; gap: 14px; }
.wb-pagehead .wb-ph-logo{
  width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
  background: linear-gradient(145deg, var(--amber), var(--coral));
  display: flex; align-items: center; justify-content: center;
  font-size: 23px;
  box-shadow: 0 6px 18px rgba(242,169,59,.28);
}
.wb-pagehead h1{
  margin: 0;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: .3px;
}
.wb-pagehead .sub{ margin-top: 3px; font-size: 12.5px; color: var(--muted); }

/* 右侧信息胶囊（计算器 .chip） */
.wb-ph-chips{ display: flex; gap: 8px; flex-wrap: wrap; }
.wb-pagehead .chip,
.wb-page .chip{
  font-size: 11.5px;
  color: var(--text-2);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}
.wb-page .chip b{ color: var(--amber-2); font-weight: 600; }

/* ══════════════════ E. 卡片 / 区块标题 ══════════════════ */
.wb-page .panel,
.wb-page .wb-card{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.wb-page .panel{ padding: 20px; margin-bottom: var(--sp-sec); }

/* 栅格内的卡片不再叠加下边距：纵向间距统一由 grid gap 控制，
   否则会出现「列间距 16px、行间距 36px」的不匀称 */
.wb-page .grid{ gap: var(--sp-sec); }
.wb-page .grid > .panel,
.wb-page .grid > .wb-card{ margin-bottom: 0; }

/* 区块标题 = 计算器 .inputs h2 的视觉：小号 + 琥珀 + 字距 */
body.wb-page:not(.wb-own-h) h2{
  margin: 22px 0 12px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .8px;
  color: var(--amber);
}

/* KPI 卡（计算器 .kpi） */
.wb-kpis{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: var(--sp-sec);
}
.wb-kpi{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 15px 16px;
}
.wb-kpi .k{
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--muted); letter-spacing: .4px;
  margin-bottom: 7px;
}
.wb-kpi .v{
  font-size: 22px; font-weight: 700; letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
}
.wb-kpi .v.small{ font-size: 13px; font-weight: 500; }
/* 自适应列数：项数不固定时（如后台 6 项）用 .auto，避免 4 列网格出现 4+2 的缺口 */
.wb-kpis.auto{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.wb-kpi.good .v{ color: var(--green); }
.wb-kpi.hl{
  border-color: var(--line-2);
  background: linear-gradient(180deg, rgba(111,207,151,.08), var(--panel-2));
}

/* ══════════════════ F. 控件 / 表格（仅 .wb-ui 页面） ══════════════════ */
.wb-ui input[type=text],
.wb-ui input[type=password],
.wb-ui input[type=number],
.wb-ui input[type=file],
.wb-ui select{
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  padding: 9px 11px;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.wb-ui input:focus,
.wb-ui select:focus{
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(242,169,59,.14);
}
.wb-ui input::placeholder{ color: var(--muted); opacity: .75; }

/* 主操作按钮 = 计算器 .seg button.on 的渐变材质
   注意：排除 .op —— 后台表格里的「重置密码/禁用/删除」是纯文字操作，不是按钮 */
.wb-ui .btn,
.wb-ui button:not(.op){
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  color: #241203;
  background: linear-gradient(145deg, var(--amber), var(--coral));
  transition: opacity .15s, filter .15s;
}
.wb-ui .btn:hover,
.wb-ui button:not(.op):hover{ filter: brightness(1.07); }
.wb-ui .btn:disabled,
.wb-ui button:not(.op):disabled{ opacity: .4; cursor: not-allowed; }
.wb-ui .btn.mini{ padding: 6px 11px; font-size: 12px; font-weight: 500; }

/* 次操作：幽灵按钮（描边而非填充） */
.wb-ui .btn.ghost{
  background: var(--bg-2);
  color: var(--text-2);
  border-color: var(--line-2);
}
.wb-ui .btn.ghost:hover{ color: var(--text); border-color: var(--amber); filter: none; }

/* 语义色按钮：保留颜色语义，仅统一形状 */
.wb-ui .btn.coral { background: var(--coral);  color: #fff; }
.wb-ui .btn.green { background: var(--green);  color: #12200f; }
.wb-ui .btn.danger{ background: var(--red);    color: #fff; }

.wb-ui .btn-row{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* 表格 = 计算器 table.cmp 的材质 */
.wb-ui table{ width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wb-ui th, .wb-ui td{
  padding: 10px 13px;
  text-align: left;
  border-bottom: 1px solid rgba(53,41,29,.55);
}
.wb-ui th{
  background: var(--panel-2);
  color: var(--text-2);
  font-weight: 600;
  font-size: 11.5px;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.wb-ui tbody tr:hover{ background: rgba(242,169,59,.05); }
.wb-ui tr:last-child td{ border-bottom: none; }

.wb-ui .hint{ font-size: 12px; color: var(--muted); line-height: 1.7; }
.wb-ui .hint a{ color: var(--amber); }

/* ══════════════════ G. 全站统一细节 ══════════════════ */

/* 统一页脚：四页共用同一枚，收束页面底部节奏 */
.wb-foot{
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}
.wb-foot .dot-sep{ opacity: .45; }

/* 滚动条：深色 + 琥珀悬停（计算器内的横向滚动表格同样适用） */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: var(--line-2);
  border-radius: 6px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover{ background: var(--amber); }

/* 文本选中色 */
::selection{ background: rgba(242,169,59,.28); color: var(--text); }

/* 键盘可达：统一的聚焦轮廓（不影响鼠标点击） */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: var(--r-ctl);
}

/* ══════════════════ H. 响应式 ══════════════════ */
@media (max-width: 1100px){
  .wb-kpis{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px){
  .wb-page .grid{ grid-template-columns: 1fr; }   /* 两列栅格折单列 */
}
@media (max-width: 720px){
  :root{ --page-pad: 14px; }
  body.wb-page{ padding-bottom: 40px; }
  .wb-page .panel{ padding: 16px; }
  .wb-pagehead{ margin-bottom: 16px; }
  .wb-pagehead h1{ font-size: 19px; }
  .wb-pagehead .wb-ph-logo{ width: 40px; height: 40px; font-size: 20px; }
}
@media (max-width: 520px){
  .wb-kpis{ grid-template-columns: 1fr; }
}