/*! v7工作室AI版 · 设备详细信息卡 (mk-devinfo.css)
 *  [R51] 初版；[R120] 整卡 UI 重构：分组 + Lucide 图标 + 真实 Android 版本。
 *  [R120b] 紧凑化：每格「标签一行 / 值一行」双列网格 → 设备卡 + AI 金融分析刚好一屏放下，不滚动。
 *  纯皮肤层：不改 React 打包产物；删掉 index.html 里两行引用即可完全回退。
 *  图标素材：lucide-static（ISC 许可，可商用）→ /panel/skin/assets/icons/*.svg
 */

/* ============================ 设计变量 ============================ */
.mkdi-card {
  --mkdi-bg: #ffffff;
  --mkdi-line: rgba(24, 43, 77, .11);
  --mkdi-line2: rgba(24, 43, 77, .055);
  --mkdi-txt: #1f2937;
  --mkdi-txt2: #64748b;
  --mkdi-txt3: #93a2b5;
  --mkdi-accent: #2f6bff;
  --mkdi-accent-soft: rgba(47, 107, 255, .09);
  --mkdi-ok: #15803d;
  --mkdi-warn: #b45309;
  --mkdi-bad: #dc2626;
  --mkdi-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;

  position: relative;
  background: var(--mkdi-bg);
  border: 1px solid var(--mkdi-line);
  border-radius: 14px;
  padding: 10px 11px 9px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(24, 43, 77, .05), 0 18px 36px -32px rgba(24, 43, 77, .8);
  isolation: isolate;
  overflow: hidden;
}
html[data-theme="dark"] .mkdi-card {
  --mkdi-bg: rgba(15, 23, 42, .70);
  --mkdi-line: rgba(146, 178, 224, .18);
  --mkdi-line2: rgba(146, 178, 224, .10);
  --mkdi-txt: #e6edf8;
  --mkdi-txt2: #9db0c9;
  --mkdi-txt3: #6f819a;
  --mkdi-accent: #6ea8ff;
  --mkdi-accent-soft: rgba(110, 168, 255, .12);
  --mkdi-ok: #7ccc9e;
  --mkdi-warn: #e0b070;
  --mkdi-bad: #e79090;
}
.mkdi-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 110px;
  background: radial-gradient(115% 100% at 100% 0%, rgba(47, 107, 255, .10), rgba(47, 107, 255, 0) 66%);
  pointer-events: none; z-index: 0;
}
.mkdi-card > * { position: relative; z-index: 1; }

/* ============================ 头部（紧凑单行） ============================ */
.mkdi-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.mkdi-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mkdi-logo {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, #5f95ff 0%, #2f6bff 62%, #2452d8 100%);
  box-shadow: 0 6px 13px -8px rgba(47, 107, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .38);
}
.mkdi-logo .mkdi-i { width: 14px; height: 14px; }
.mkdi-tt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mkdi-title { font-size: 12.5px; font-weight: 750; letter-spacing: .01em; color: var(--mkdi-txt); line-height: 1.1; }
.mkdi-sub {
  font-size: 10px; color: var(--mkdi-txt2); line-height: 1.15; max-width: 250px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.mkdi-right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.mkdi-badge {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px;
  border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
.mkdi-badge.is-on  { background: rgba(22, 163, 74, .10); color: var(--mkdi-ok); border-color: rgba(22, 163, 74, .24); }
.mkdi-badge.is-off { background: rgba(100, 116, 139, .10); color: var(--mkdi-txt2); border-color: rgba(100, 116, 139, .20); }
.mkdi-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: 0 0 5px; }
.mkdi-badge.is-on .mkdi-dot { animation: mkdi-pulse 1.9s ease-in-out infinite; }
@keyframes mkdi-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.mkdi-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px;
  border-radius: 999px; border: 1px solid rgba(47, 107, 255, .22);
  background: var(--mkdi-accent-soft); color: var(--mkdi-accent);
  font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.mkdi-btn:hover { background: rgba(47, 107, 255, .16); border-color: rgba(47, 107, 255, .40); }
.mkdi-btn .mkdi-i { width: 11px; height: 11px; }
.mkdi-btn.is-busy { opacity: .8; pointer-events: none; }
.mkdi-btn.is-busy .mkdi-i { animation: mkdi-spin .9s linear infinite; }

/* ============================ 分组 ============================ */
.mkdi-body { display: flex; flex-direction: column; gap: 6px; }
.mkdi-sec { border: 1px solid var(--mkdi-line2); border-radius: 10px; padding: 5px 6px 4px; }
.mkdi-sec-h { display: flex; align-items: center; gap: 6px; padding: 0 1px 3px; }
.mkdi-sec-ic {
  width: 16px; height: 16px; flex: 0 0 16px; border-radius: 5px;
  display: grid; place-items: center;
  background: var(--mkdi-accent-soft); color: var(--mkdi-accent);
}
.mkdi-sec-ic .mkdi-i { width: 10px; height: 10px; }
.mkdi-sec-t { font-size: 10.5px; font-weight: 750; letter-spacing: .02em; color: var(--mkdi-txt); white-space: nowrap; }
.mkdi-sec-line { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, var(--mkdi-line), rgba(47, 107, 255, 0)); }

/* ============================ 单元格：标签一行 / 值一行，双列 ============================ */
.mkdi-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 5px; }
.mkdi-row {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  padding: 3px 5px; border-radius: 7px;
  transition: background .14s ease;
}
.mkdi-row:hover { background: rgba(47, 107, 255, .05); }
.mkdi-k {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; line-height: 1.2; color: var(--mkdi-txt3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mkdi-k .mkdi-i { width: 10px; height: 10px; flex: 0 0 10px; color: var(--mkdi-txt3); }
.mkdi-v {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 12px; font-weight: 650; color: var(--mkdi-txt);
  line-height: 1.2; word-break: break-word; font-variant-numeric: tabular-nums;
}
.mkdi-v.mono { font-family: var(--mkdi-mono); font-size: 11px; letter-spacing: -.01em; }
.mkdi-v.is-off { color: var(--mkdi-txt3); font-weight: 500; }
.mkdi-strong { font-weight: 750; }
.mkdi-strong.is-ok   { color: var(--mkdi-ok); }
.mkdi-strong.is-warn { color: var(--mkdi-warn); }
.mkdi-strong.is-bad  { color: var(--mkdi-bad); }

.mkdi-v.is-copy { cursor: copy; }
.mkdi-v.is-copy:hover { color: var(--mkdi-accent); }
.mkdi-v.is-copy.is-done { color: var(--mkdi-ok); }
.mkdi-v.is-copy.is-done::after { content: "✓"; margin-left: 3px; font-weight: 800; }

.mkdi-pill {
  display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 7px;
  border-radius: 999px; font-size: 10.5px; font-weight: 700; border: 1px solid transparent;
}
.mkdi-pill.is-ok  { background: rgba(22, 163, 74, .10); color: var(--mkdi-ok); border-color: rgba(22, 163, 74, .22); }
.mkdi-pill.is-off { background: rgba(100, 116, 139, .10); color: var(--mkdi-txt2); border-color: rgba(100, 116, 139, .18); }
.mkdi-pill .mkdi-i { width: 10px; height: 10px; }

.mkdi-chip {
  display: inline-flex; align-items: center; height: 16px; padding: 0 6px;
  border-radius: 5px; font-size: 9.8px; font-weight: 700; white-space: nowrap;
  background: var(--mkdi-accent-soft); color: var(--mkdi-accent);
  border: 1px solid rgba(47, 107, 255, .16);
}
.mono-pw { font-family: var(--mkdi-mono); letter-spacing: .05em; }

.mkdi-bat {
  position: relative; flex: 0 0 46px; width: 46px; height: 6px; border-radius: 999px;
  background: rgba(24, 43, 77, .10); overflow: hidden;
}
.mkdi-bat-fill { display: block; height: 100%; border-radius: 999px; transition: width .32s ease; }
.mkdi-bat.is-high .mkdi-bat-fill { background: linear-gradient(90deg, #34d399, #10b981); }
.mkdi-bat.is-mid  .mkdi-bat-fill { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.mkdi-bat.is-low  .mkdi-bat-fill { background: linear-gradient(90deg, #f87171, #dc2626); }
.mkdi-live { color: #f59e0b; }

.mkdi-flag {
  width: 15px; height: 11px; flex: 0 0 15px; border-radius: 2px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(24, 43, 77, .14);
}

.mkdi-empty { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--mkdi-txt2); padding: 8px 3px; }
.mkdi-spin {
  width: 13px; height: 13px; flex: 0 0 13px; border-radius: 50%;
  border: 2px solid rgba(47, 107, 255, .22); border-top-color: var(--mkdi-accent);
  animation: mkdi-spin .8s linear infinite;
}
@keyframes mkdi-spin { to { transform: rotate(360deg); } }

/* ============================ 图标（mask 渲染，颜色跟随 currentColor） ============================ */
.mkdi-i {
  display: inline-block; width: 12px; height: 12px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--mkdi-mask) center / contain no-repeat;
          mask: var(--mkdi-mask) center / contain no-repeat;
}
.mkdi-i-smartphone          { --mkdi-mask: url("/panel/skin/assets/icons/smartphone.svg"); }
.mkdi-i-hash                { --mkdi-mask: url("/panel/skin/assets/icons/hash.svg"); }
.mkdi-i-tag                 { --mkdi-mask: url("/panel/skin/assets/icons/tag.svg"); }
.mkdi-i-user                { --mkdi-mask: url("/panel/skin/assets/icons/user.svg"); }
.mkdi-i-square-pen          { --mkdi-mask: url("/panel/skin/assets/icons/square-pen.svg"); }
.mkdi-i-cpu                 { --mkdi-mask: url("/panel/skin/assets/icons/cpu.svg"); }
.mkdi-i-package             { --mkdi-mask: url("/panel/skin/assets/icons/package.svg"); }
.mkdi-i-terminal            { --mkdi-mask: url("/panel/skin/assets/icons/terminal.svg"); }
.mkdi-i-monitor-smartphone  { --mkdi-mask: url("/panel/skin/assets/icons/monitor-smartphone.svg"); }
.mkdi-i-battery-charging    { --mkdi-mask: url("/panel/skin/assets/icons/battery-charging.svg"); }
.mkdi-i-wifi                { --mkdi-mask: url("/panel/skin/assets/icons/wifi.svg"); }
.mkdi-i-activity            { --mkdi-mask: url("/panel/skin/assets/icons/activity.svg"); }
.mkdi-i-globe               { --mkdi-mask: url("/panel/skin/assets/icons/globe.svg"); }
.mkdi-i-map-pin             { --mkdi-mask: url("/panel/skin/assets/icons/map-pin.svg"); }
.mkdi-i-app-window          { --mkdi-mask: url("/panel/skin/assets/icons/app-window.svg"); }
.mkdi-i-clock               { --mkdi-mask: url("/panel/skin/assets/icons/clock.svg"); }
.mkdi-i-radar               { --mkdi-mask: url("/panel/skin/assets/icons/radar.svg"); }
.mkdi-i-accessibility       { --mkdi-mask: url("/panel/skin/assets/icons/accessibility.svg"); }
.mkdi-i-key-round           { --mkdi-mask: url("/panel/skin/assets/icons/key-round.svg"); }
.mkdi-i-calendar-clock      { --mkdi-mask: url("/panel/skin/assets/icons/calendar-clock.svg"); }
.mkdi-i-shield-check        { --mkdi-mask: url("/panel/skin/assets/icons/shield-check.svg"); }
.mkdi-i-refresh-cw          { --mkdi-mask: url("/panel/skin/assets/icons/refresh-cw.svg"); }
.mkdi-i-check               { --mkdi-mask: url("/panel/skin/assets/icons/check.svg"); }
.mkdi-i-ban                 { --mkdi-mask: url("/panel/skin/assets/icons/ban.svg"); }
.mkdi-i-zap                 { --mkdi-mask: url("/panel/skin/assets/icons/zap.svg"); }

/* 左栏特别窄时回退单列 */
@media (max-width: 1080px) {
  .mkdi-list { grid-template-columns: 1fr; }
  .mkdi-sub { max-width: 190px; }
}
/* [R120b] 左栏面板内层底部留白压到 6px（内联样式 padding:16px 的兜底覆盖） */
.ctrl-page .mk-pin-info > div { padding-bottom: 6px !important; }