/* 记电页面补充样式
   站点样式由本项目自带的 css/style.css 提供（container / card / card-title /
   about-text / neu-btn / back-link / site-header / site-title / site-footer 等），
   本文件只补充记电专属的表单、统计卡、流水表、图表与登录弹窗样式。 */

.header-sub { margin: 6px 0 0; opacity: .75; font-size: 14px; }
.dj-hint { font-size: 13px; opacity: .75; margin: 8px 0 0; }
.dj-empty { font-size: 13px; opacity: .65; margin: 12px 0; }
.dj-ok { color: #3c9d5f; }
.dj-warn { color: #d9534f; }

.dj-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------- 统计卡 ---------- */
.dj-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.dj-stat {
  background: rgba(127, 127, 127, .08);
  border: 1px solid rgba(127, 127, 127, .18);
  border-radius: var(--radius, 10px);
  padding: 10px 12px;
}
.dj-k { display: block; font-size: 12px; opacity: .7; }
.dj-v { display: block; font-size: 20px; font-weight: 600; line-height: 1.25; margin-top: 4px; }
.dj-v small { font-size: 12px; font-weight: 400; opacity: .7; margin-left: 4px; }
.dj-stat.dj-alert { border-color: #d9534f; }
.dj-stat.dj-alert .dj-v { color: #d9534f; }

/* ---------- 表单 ---------- */
.dj-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 12px;
}
.dj-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.dj-field > span { opacity: .75; }
.dj-field-wide { grid-column: 1 / -1; }
.dj-field input,
.dj-field select,
.dj-textarea {
  font: inherit;
  font-size: 15px;
  padding: 8px 10px;
  box-sizing: border-box;
  border-radius: var(--radius, 10px);
  border: 1px solid rgba(127, 127, 127, .35);
  background: rgba(127, 127, 127, .06);
  color: inherit;
}
.dj-field input[readonly] { opacity: .85; cursor: default; }
.dj-textarea {
  width: 100%;
  margin-top: 8px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}

/* ---------- 表格 ---------- */
.dj-table-wrap { overflow-x: auto; }
table.dj-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.dj-table th,
table.dj-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(127, 127, 127, .2);
  text-align: right;
  white-space: nowrap;
}
table.dj-table th:first-child,
table.dj-table td:first-child,
table.dj-table th:nth-child(2),
table.dj-table td:nth-child(2) { text-align: left; }
table.dj-table thead th { font-weight: 600; opacity: .75; }
tr.dj-bad td { color: #d9534f; }
button.dj-del {
  border: 0;
  background: transparent;
  color: #d9534f;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

/* ---------- 图表 ---------- */
.dj-chart-box { margin-top: 8px; }
.dj-chart { width: 100%; height: auto; display: block; }
.dj-axis { stroke: currentColor; stroke-opacity: .25; stroke-width: 1; }
.dj-bar { fill: var(--primary, #4a90d9); fill-opacity: .7; }
.dj-bar-hi { fill-opacity: 1; }
.dj-line { fill: none; stroke: var(--primary, #4a90d9); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.dj-dot { fill: var(--primary, #4a90d9); }
.dj-axis-label { font-size: 8px; fill: currentColor; fill-opacity: .6; }

/* ---------- 折叠区 ---------- */
.dj-details summary { cursor: pointer; opacity: .85; font-size: 14px; margin: 6px 0; }
.dj-details .dj-field { margin-top: 8px; }

/* ---------- 已登录的用户信息 ---------- */
.dj-user { display: flex; align-items: center; gap: 12px; }
.dj-user-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  background: var(--primary, #4a90d9);
}
.dj-user-info { display: flex; flex-direction: column; line-height: 1.35; }
.dj-user-info b { font-size: 17px; }
.dj-user-info small { font-size: 12px; opacity: .7; margin-top: 2px; }

/* ---------- 登录弹窗 ---------- */
.dj-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.dj-modal[hidden] { display: none; }
.dj-modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
}
.dj-modal-box {
  position: relative;
  width: 100%;
  max-width: 380px;
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px 20px 16px;
  border-radius: var(--radius, 12px);
  border: 1px solid rgba(127, 127, 127, .28);
  background: var(--bg, #fff);
  color: inherit;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
  animation: dj-modal-in .16s ease-out;
}
@keyframes dj-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.dj-modal-title { margin: 0 0 14px; font-size: 18px; }
.dj-modal-box .dj-form { grid-template-columns: 1fr; }
.dj-modal-box .dj-actions { margin-top: 14px; }

/* ---------- 主操作按钮：改为实心 ----------
   站点用的是新拟态（neumorphism）风格：按钮 background 与页面背景同为 --bg，
   只靠双向阴影凸起。在浅色底上这会让按钮淡化到"看起来只是一行紫字"，
   关键操作（登录 / 解析 / 保存 / 推送…）必须一眼可见，因此覆盖为实心填充。 */
.dj-actions .neu-btn.primary,
.neu-btn.solid {
  background: var(--primary, #6d5dfc);
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(109, 93, 252, .38);
}
.dj-actions .neu-btn.primary:hover,
.neu-btn.solid:hover {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.dj-actions .neu-btn.primary:active,
.neu-btn.solid:active {
  transform: translateY(0);
  filter: brightness(.96);
}
/* 次级按钮（取消 / 导出…）保持新拟态，但补一点边框让轮廓清晰 */
.dj-actions .neu-btn:not(.primary) {
  border: 1px solid rgba(127, 127, 127, .22);
}
/* 未登录卡片里的登录按钮单独放大一点，作为主要入口 */
#loginState .neu-btn.primary {
  padding: 13px 34px;
  font-size: 15px;
}

/* ---------- 行内排布（登录态与未登录态都是「文字 + 按钮」同一行） ---------- */
.dj-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dj-inline-text { opacity: .82; }
.dj-inline-name { font-size: 17px; }
.dj-inline .dj-user-avatar { width: 34px; height: 34px; font-size: 16px; }

/* 仅用于让浏览器把密码与用户名配对，不参与交互与视觉 */
.dj-offscreen {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}