/* dn.ljzhome.cn 业务模块样式（v2.6.0）
   与 dn-arbitrage-tool.html 的变量体系保持一致，只在需要处补充。 */

/* ---------- 顶部导航 ---------- */
.dn-nav{
  position:sticky; top:0; z-index:60;
  background:rgba(15,23,42,.97); backdrop-filter:saturate(140%) blur(8px);
  color:#e2e8f0; border-bottom:1px solid rgba(255,255,255,.08);
}
.dn-nav-inner{
  max-width:1600px; margin:0 auto; padding:8px 18px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.dn-brand{
  color:#fff; text-decoration:none; font-weight:700; font-size:14px;
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px;
  border:1px solid rgba(255,255,255,.22); border-radius:8px; white-space:nowrap;
}
.dn-brand:hover{ background:rgba(255,255,255,.1) }
.dn-tabs{ display:flex; gap:4px; flex-wrap:wrap; margin:0 auto; }
.dn-tab{
  border:none; background:transparent; color:#cbd5e1; cursor:pointer;
  padding:7px 14px; border-radius:8px; font-size:13px; font-family:inherit; white-space:nowrap;
}
.dn-tab:hover{ background:rgba(255,255,255,.09); color:#fff }
.dn-tab.active{ background:#2563eb; color:#fff; font-weight:600 }
.dn-user{ font-size:12px; color:#94a3b8; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.dn-user .who{ color:#e2e8f0 }

/* ---------- 汇总条 ---------- */
.dn-summary{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px;
  margin-bottom:10px;
}
.dn-kpi{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:11px 14px; box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.dn-kpi .k{ font-size:12px; color:var(--muted); }
.dn-kpi .v{ font-size:19px; font-weight:700; margin-top:3px; letter-spacing:.2px; }
.dn-kpi .v.pos{ color:var(--pos) }
.dn-kpi .v.neg{ color:var(--neg) }
.dn-kpi .s{ font-size:11.5px; color:var(--muted2); margin-top:2px; line-height:1.5; }
.dn-kpi .s b.pos{ color:var(--pos) }
.dn-kpi .s b.neg{ color:var(--neg) }
/* 人民币那张卡是结论，给一层底把主次拉开 */
.dn-kpi-rmb{ background:linear-gradient(180deg,#f5f8ff,#fff); border-color:#dbe6ff; }
.dn-kpi-rmb .v{ color:var(--primary) }

/* ---------- 汇率条（v2.6.4） ---------- */
.dn-rates{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:16px; padding:9px 14px; font-size:12.5px; color:var(--muted);
  background:#fbfcfe; border:1px solid var(--line); border-radius:10px;
}
.dn-rates-label{ font-weight:600; color:var(--text); }
.dn-rate-field{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.dn-rate-field input{
  width:88px; padding:4px 8px; font-size:12.5px; font-family:inherit; text-align:right;
  border:1.5px solid var(--line); border-radius:7px; background:#fff; color:var(--text);
}
.dn-rate-field input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12) }
.dn-rate-field em{ font-style:normal; color:var(--muted2); }
.dn-rates-tip{ font-size:11.5px; color:var(--muted2); }
.dn-rates-tip b{ color:var(--text); }

/* ---------- 视图容器 ---------- */
.dn-view{ display:none }
.dn-view.active{ display:block }

/* ---------- 表单 ---------- */
.dn-form{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px; align-items:end; padding:14px 16px; border-bottom:1px solid var(--line);
  background:#fbfcfe;
}
.dn-field{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.dn-field label{ font-size:11.5px; color:var(--muted); }
.dn-field input, .dn-field select, .dn-field textarea{
  width:100%; padding:7px 9px; font-size:13px; font-family:inherit;
  border:1.5px solid var(--line); border-radius:8px; background:#fff; color:var(--text);
}
.dn-field input:focus, .dn-field select:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.dn-field.wide{ grid-column:span 2 }
.dn-actions{ display:flex; gap:8px; align-items:center }
.dn-btn{
  border:1.5px solid var(--line); background:#fff; color:var(--text); cursor:pointer;
  padding:7px 13px; border-radius:8px; font-size:13px; font-family:inherit; white-space:nowrap;
}
.dn-btn:hover{ border-color:var(--primary); color:var(--primary) }
.dn-btn.primary{ background:var(--primary); border-color:var(--primary); color:#fff }
.dn-btn.primary:hover{ background:var(--primary-d); color:#fff }
.dn-btn.danger{ color:var(--neg); border-color:#fecaca }
.dn-btn.danger:hover{ background:#fef2f2 }
.dn-btn.sm{ padding:4px 9px; font-size:12px }
.dn-btn:disabled{ opacity:.55; cursor:not-allowed }

/* ---------- 表格 ---------- */
.dn-scroll{ overflow:auto; max-height:520px }
.dn-table{ width:100%; border-collapse:collapse; font-size:13px; }
.dn-table thead th{
  position:sticky; top:0; background:#f8fafc; text-align:left; font-weight:600;
  color:var(--muted); font-size:12px; padding:9px 12px; border-bottom:1px solid var(--line);
  white-space:nowrap; z-index:1;
}
.dn-table td{ padding:9px 12px; border-bottom:1px solid var(--line2); vertical-align:middle; }
.dn-table tbody tr:hover{ background:#f8fafc }
.dn-table .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
.dn-table .pos{ color:var(--pos) }
.dn-table .neg{ color:var(--neg) }
.dn-table .empty{ text-align:center; color:var(--muted2); padding:26px 10px }
.dn-tag{
  display:inline-block; padding:1px 7px; border-radius:99px; font-size:11.5px;
  background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe;
}
.dn-tag.sell{ background:#fef2f2; color:#b91c1c; border-color:#fecaca }
.dn-tag.buy{ background:#ecfdf5; color:#047857; border-color:#a7f3d0 }
.dn-tag.income{ background:#ecfdf5; color:#047857; border-color:#a7f3d0 }
.dn-tag.expense{ background:#fef2f2; color:#b91c1c; border-color:#fecaca }
/* 币种标签：龙币蓝、金币金，同一列里两种货币一眼分开 */
.dn-tag.gem{ background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe }
.dn-tag.gold{ background:#fffbeb; color:#b45309; border-color:#fde68a }
/* 数值单元格后面的币种小角标（龙 / 金） */
.dn-u{
  display:inline-block; margin-left:3px; padding:0 4px; border-radius:4px;
  font-size:10.5px; line-height:15px; font-weight:600; vertical-align:1px;
  background:#f1f5f9; color:var(--muted); border:1px solid var(--line);
}

/* ---------- 口径提示与表内副行（v2.6.1 / v2.6.4 布局修正） ---------- */
/* 提示块独占一整行：它放在字段行里时，文字一多就撑高整行，
   而 grid 是 align-items:end，同行的商品/方向/数量会被顶到下面去（右侧变高影响左侧）。 */
.dn-field.dn-hint{
  grid-column:1 / -1;
  font-size:12px; color:var(--muted); line-height:1.6;
  background:#f8fafc; border:1px dashed var(--line); border-radius:8px; padding:8px 10px;
}
.dn-field.dn-hint b{ color:var(--text); font-weight:700 }
/* 提示内部按「一行一件事」排，避免长句被挤成竖条 */
.dn-hint-line{ display:flex; gap:8px; align-items:flex-start }
.dn-hint-line + .dn-hint-line{ margin-top:3px }
.dn-hint-line .k{ color:var(--muted2); flex:0 0 auto; min-width:56px; }
.dn-hint-line .k b{ color:var(--muted) }
.dn-hint-line > span:last-child{ flex:1 1 auto; min-width:0; }
.dn-table .dn-sub{ font-size:11px; margin-top:2px; line-height:1.4 }

/* ---------- 录入模式切换（v2.6.3） ---------- */
.dn-seg{
  display:inline-flex; gap:4px; padding:4px; margin:14px 16px 0;
  background:#eef2f7; border-radius:10px;
}
.dn-seg-btn{
  border:none; background:transparent; color:var(--muted); cursor:pointer;
  padding:6px 14px; border-radius:7px; font-size:12.5px; font-family:inherit; white-space:nowrap;
}
.dn-seg-btn:hover{ color:var(--text) }
.dn-seg-btn.active{ background:#fff; color:var(--primary); font-weight:700; box-shadow:0 1px 3px rgba(16,24,40,.12) }

/* ---------- 记账常用分类（v2.6.3） ---------- */
.dn-chips{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px }
.dn-chip-label{ font-size:11.5px; color:var(--muted2) }
.dn-chip{
  border:1px solid var(--line); background:#fff; color:var(--muted); cursor:pointer;
  padding:3px 10px; border-radius:999px; font-size:12px; font-family:inherit;
}
.dn-chip:hover{ border-color:var(--primary); color:var(--primary) }

/* ---------- 行内调账 ---------- */
.dn-adjust-row td{ background:#fffbeb; }
.dn-adjust-inner{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.dn-adjust-inner input{
  width:110px; padding:5px 8px; font-size:12.5px; border:1.5px solid var(--line);
  border-radius:7px; background:#fff; color:var(--text);
}

/* ---------- 登录门 ---------- */
.dn-gate{
  max-width:520px; margin:60px auto; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:28px 30px; text-align:center;
  box-shadow:0 10px 30px -18px rgba(16,24,40,.4);
}
.dn-gate h3{ margin:0 0 8px; font-size:17px }
.dn-gate p{ margin:0 0 18px; color:var(--muted); font-size:13px }
.dn-gate a{
  display:inline-block; background:var(--primary); color:#fff; text-decoration:none;
  padding:9px 18px; border-radius:9px; font-size:13.5px; font-weight:600;
}
.dn-gate a:hover{ background:var(--primary-d) }

/* ---------- 提示 ---------- */
.dn-toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:#0f172a; color:#fff; padding:9px 16px; border-radius:9px;
  font-size:13px; box-shadow:0 10px 26px rgba(0,0,0,.25); z-index:99;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
}
.dn-toast.show{ opacity:1; transform:translateX(-50%) translateY(-4px) }

@media (max-width: 720px){
  .dn-tabs{ order:3; width:100%; margin:6px 0 0 }
  .dn-field.wide{ grid-column:span 1 }
}