/*! v7工作室AI版 · [R197] 顶栏「报表」+「汇率换算」浮层样式（纯皮肤层）
 * 搭配 mk-r197.js；删掉 index.html 里这两行即回退。
 * 视觉基准 = 新版 V7 原版的「每日设备报表」弹窗 / 「汇率换算」浮窗（白卡 + 发丝线 + 圆角）。
 * ========================================================================== */

/* ---------- 顶栏两个入口按钮 ---------- */
#mk197-report-btn, #mk197-fx-btn { color: #33415c !important; }
#mk197-report-btn svg, #mk197-fx-btn svg { color: #4f6ef7; }
#mk197-report-btn.active, #mk197-fx-btn.active {
  background: #eef3ff !important;
  border-color: #c9d8ff !important;
  color: #2b47c7 !important;
}

/* ---------- 通用：遮罩 / 卡片头 / 关闭 / 刷新 ---------- */
.mk197-mask {
  position: fixed; inset: 0; z-index: 9600;
  background: rgba(15, 23, 42, .28);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 74px 24px 24px;
  animation: mk197-fade .12s ease-out;
}
@keyframes mk197-fade { from { opacity: 0 } to { opacity: 1 } }

.mk197-mask .mk197-modal {
  background: #fff; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22), 0 2px 8px rgba(15, 23, 42, .08);
  font-family: inherit; color: #0f172a;
  overflow: hidden; box-sizing: border-box;
}
.mk197-bar, .mk197-popbar {
  display: flex; align-items: center; gap: 9px;
  height: 58px; padding: 0 24px;
  border-bottom: 1px solid #eef1f6; box-sizing: border-box;
}
.mk197-popbar { height: 52px; padding: 0 18px; }
.mk197-bar strong, .mk197-popbar strong { font-size: 17px; font-weight: 700; color: #0f172a; letter-spacing: .2px; }
.mk197-popbar strong { font-size: 16px; }
.mk197-baric { display: inline-flex; align-items: center; color: #4f6ef7; }
.mk197-baric svg { width: 20px; height: 20px; }
.mk197-popbar .mk197-baric svg { width: 18px; height: 18px; }
.mk197-x {
  margin-left: auto; width: 30px; height: 30px; flex: 0 0 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: transparent; color: #94a3b8;
  cursor: pointer; padding: 0;
}
.mk197-x:hover { background: #f1f5f9; color: #334155; }
.mk197-x svg { width: 17px; height: 17px; }
.mk197-rbtn {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #dbe3ee; border-radius: 10px; background: #fff;
  color: #475569; cursor: pointer; padding: 0;
}
.mk197-rbtn:hover { border-color: #b9c8de; color: #1f2b45; }
.mk197-rbtn svg { width: 16px; height: 16px; }
.mk197-rbtn.spin svg { animation: mk197-spin .9s linear infinite; }
@keyframes mk197-spin { to { transform: rotate(360deg) } }

/* ---------- ① 每日设备报表 ---------- */
.mk197-modal.mk197-rp { width: 892px; max-width: 100%; }
.mk197-body { padding: 22px 26px 18px; }
.mk197-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.mk197-kicker { font-size: 11px; letter-spacing: 1.6px; color: #98a2b3; }
.mk197-intro h2 { margin: 6px 0 5px; font-size: 22px; font-weight: 700; color: #0f172a; letter-spacing: .2px; }
.mk197-intro p { margin: 0; font-size: 12.5px; color: #94a3b8; }
.mk197-actions { display: flex; align-items: center; gap: 10px; }
.mk197-actions > label { font-size: 12.5px; color: #94a3b8; white-space: nowrap; }
.mk197-date {
  display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px;
  border: 1px solid #dbe3ee; border-radius: 10px; background: #fff; color: #64748b;
}
.mk197-date svg { width: 15px; height: 15px; flex: 0 0 15px; }
.mk197-date input {
  border: 0 !important; outline: 0; background: transparent !important;
  font: inherit; font-size: 13px; color: #0f172a; width: 118px; padding: 0;
  box-shadow: none !important;
}
.mk197-twrap { margin-top: 18px; overflow-x: auto; }
table.mk197-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.mk197-table th, table.mk197-table td { padding: 12px 14px; border-bottom: 1px solid #eef1f6; }
table.mk197-table thead th {
  font-size: 12.5px; font-weight: 500; color: #94a3b8; text-align: center; white-space: nowrap;
  border-bottom: 1px solid #eef1f6;
}
table.mk197-table thead th:first-child, table.mk197-table tbody th { text-align: left; }
table.mk197-table tbody th { font-weight: 500; color: #334155; white-space: nowrap; }
table.mk197-table tbody td { text-align: center; color: #0f172a; font-variant-numeric: tabular-nums; }
table.mk197-table tbody tr[data-latest] { background: #fafbfd; }
table.mk197-table tbody tr:last-child th, table.mk197-table tbody tr:last-child td { border-bottom: 0; }
.mk197-latest {
  display: inline-block; margin-left: 8px; padding: 1px 6px;
  font-size: 11px; line-height: 1.5; color: #64748b;
  border: 1px solid #dde5ef; border-radius: 6px; background: #fff;
}
.mk197-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 14px; font-size: 11.5px; color: #98a2b3;
}
.mk197-err {
  margin-top: 14px; padding: 9px 12px; font-size: 12.5px;
  color: #b42318; background: #fff5f4; border: 1px solid #ffd9d5; border-radius: 9px;
}
.mk197-ph { padding: 26px 0; font-size: 13px; color: #98a2b3; text-align: center; }

/* ---------- ② 汇率换算浮窗 ---------- */
.mk197-pop {
  position: fixed; z-index: 9700; width: 486px; max-width: calc(100vw - 24px);
  background: #fff; border-radius: 14px;
  box-shadow: 0 22px 55px rgba(15, 23, 42, .22), 0 2px 8px rgba(15, 23, 42, .08);
  color: #0f172a; overflow: hidden; box-sizing: border-box;
  animation: mk197-fade .12s ease-out;
}
.mk197-fx { padding: 16px 18px 14px; }
.mk197-fxrow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.mk197-fx label { display: block; margin: 0; }
.mk197-fx label > span { display: block; margin-bottom: 6px; font-size: 12px; color: #64748b; }
.mk197-fx input, .mk197-fx select {
  width: 100%; height: 38px; padding: 0 10px; box-sizing: border-box;
  border: 1px solid #d9e1ec; border-radius: 9px; background: #fff;
  font: inherit; font-size: 13.5px; color: #0f172a; outline: 0; box-shadow: none !important;
}
.mk197-fx input:focus, .mk197-fx select:focus { border-color: #a9bcf5; box-shadow: 0 0 0 3px rgba(79, 110, 247, .10) !important; }
.mk197-result {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 14px; padding: 12px 14px; background: #f7f9fc; border-radius: 11px;
}
.mk197-result span { display: block; font-size: 12px; color: #64748b; margin-bottom: 4px; }
.mk197-result output { font-size: 24px; font-weight: 700; letter-spacing: .2px; }
.mk197-result output small { font-size: 12px; font-weight: 500; color: #94a3b8; margin-left: 3px; }
.mk197-tsection { margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef1f6; }
.mk197-thead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mk197-thead strong { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: #334155; }
.mk197-thead strong svg { width: 15px; height: 15px; color: #64748b; }
.mk197-region { display: flex; align-items: center; gap: 8px; margin: 0; }
.mk197-region > span { font-size: 12px; color: #94a3b8; white-space: nowrap; }
.mk197-region select {
  height: 32px; max-width: 190px; padding: 0 8px;
  border: 1px solid #dbe3ee; border-radius: 8px; background: #fff;
  font: inherit; font-size: 12.5px; color: #334155; outline: 0; box-shadow: none !important;
}
.mk197-times { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 14px; }
.mk197-read small { display: block; font-size: 11.5px; color: #98a2b3; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk197-read strong { font-size: 14.5px; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.mk197-note {
  margin-top: 15px; padding-top: 12px; border-top: 1px solid #eef1f6;
  font-size: 11.5px; color: #98a2b3; line-height: 1.6;
}
.mk197-note.warn { color: #b45309; }

/* ---------- 控制页（/panel/device）顶栏的图标小入口 ---------- */
.ctrl-topbar .mk197-ctlwrap { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.ctrl-topbar .mk197-ctlbtn {
  width: 28px; height: 28px; flex: 0 0 28px; margin-left: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #dbe3ee; border-radius: 8px; background: #fff;
  color: #475569; cursor: pointer; padding: 0; box-shadow: none;
}
.ctrl-topbar .mk197-ctlbtn svg { width: 15px; height: 15px; color: #4f6ef7; }
.ctrl-topbar .mk197-ctlbtn:hover { border-color: #b9c8de; color: #1f2b45; }
.ctrl-topbar .mk197-ctlbtn.active { background: #eef3ff; border-color: #c9d8ff; color: #2b47c7; }

/* 窄屏兜底 */
@media (max-width: 900px) {
  .mk197-fxrow { grid-template-columns: 1fr 1fr; }
  .mk197-sel:last-child { grid-column: span 2; }
  .mk197-times { grid-template-columns: 1fr 1fr; }
}