* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  background: #f5f7fa; color: #2c3e50; min-height: 100vh;
}
a { color: #1677ff; text-decoration: none; }

/* 顶部导航 */
.topnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.topnav .title { font-size: 18px; font-weight: 600; }
.topnav .right { display: flex; align-items: center; gap: 16px; font-size: 13px; color: #888; }

/* 主容器 */
.container { max-width: 1180px; margin: 0 auto; padding: 24px 16px 60px; }
.container.wide { max-width: 1680px; }

/* 左右两栏 */
.main-grid { display: flex; gap: 16px; align-items: stretch; }
.left-col { flex: 1; min-width: 0; }
.right-col { flex: 1.15; min-width: 0; }
@media (max-width: 960px) {
  .main-grid { flex-direction: column; }
  .right-col { width: 100%; }
}
.card {
  background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.card .label { font-size: 13px; color: #888; margin-bottom: 8px; }

/* 录音按钮 */
.record-wrap { display: flex; flex-direction: column; align-items: center; padding: 28px 0 20px; }
.mic-btn {
  width: 92px; height: 92px; border-radius: 50%; border: none; cursor: pointer;
  background: #1677ff; color: #fff; font-size: 40px; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(22,119,255,.35); user-select: none; -webkit-user-select: none;
  touch-action: none;
}
.mic-btn:active, .mic-btn.recording {
  background: #e5484d; transform: scale(1.06); box-shadow: 0 4px 18px rgba(229,72,77,.45);
}
.mic-btn.recording { animation: pulse 1.2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(229,72,77,.5); }
  70% { box-shadow: 0 0 0 18px rgba(229,72,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); }
}
.status-text { margin-top: 14px; font-size: 15px; color: #555; min-height: 22px; }
.status-text.recording { color: #e5484d; font-weight: 600; }
.status-text.parsing { color: #1677ff; }

/* 音量表 */
.mic-level { width: 220px; height: 8px; background: #e6e9ee; border-radius: 4px; margin-top: 12px; overflow: hidden; }
.mic-level-fill { height: 100%; width: 0%; background: #1677ff; transition: width .05s linear; }
.mic-level-fill.loud { background: #e5484d; }
.device-info { margin-top: 6px; font-size: 12px; color: #999; max-width: 300px; text-align: center; word-break: break-all; }

/* 文本与JSON */
.result-box {
  background: #f8fafc; border: 1px solid #e6e9ee; border-radius: 8px;
  padding: 12px 14px; font-size: 14px; line-height: 1.6; min-height: 40px;
  word-break: break-all; max-height: 180px; overflow: auto;
}
pre.json-out {
  background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 14px;
  font-size: 13px; line-height: 1.55; overflow: auto; max-height: 320px;
  font-family: "JetBrains Mono", Consolas, monospace; white-space: pre-wrap; word-break: break-word;
}
.json-out .k { color: #7dd3fc; }  /* key */
.json-out .s { color: #86efac; }  /* string */
.json-out .n { color: #fcd34d; }  /* number */
.json-out .b { color: #f472b6; }  /* bool/null */

/* 按钮 */
.btn {
  padding: 8px 16px; border-radius: 8px; border: 1px solid #d9dee5; background: #fff;
  font-size: 14px; cursor: pointer; color: #333;
}
.btn:hover { border-color: #1677ff; color: #1677ff; }
.btn.primary { background: #1677ff; color: #fff; border-color: #1677ff; }
.btn.primary:hover { background: #3b8bff; color: #fff; }
.btn.danger { color: #e5484d; border-color: #e5484d; }
.btn.danger:hover { background: #e5484d; color: #fff; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* 日志 */
.log-list { list-style: none; font-size: 12px; color: #666; max-height: 200px; overflow: auto; }
.log-list li { padding: 4px 0; border-bottom: 1px dashed #eee; }
.log-list .time { color: #999; margin-right: 6px; }

/* 配置页 */
.config-section h3 { font-size: 15px; margin-bottom: 12px; color: #333; }
textarea.prompt {
  width: 100%; min-height: 260px; font-size: 13px; line-height: 1.6;
  border: 1px solid #e6e9ee; border-radius: 8px; padding: 12px;
  font-family: Consolas, monospace; resize: vertical;
}
textarea.prompt.fullscreen {
  position: fixed; inset: 0; z-index: 100; min-height: 100vh; width: 100vw;
  border-radius: 0; font-size: 15px;
}
table.mapping { width: 100%; border-collapse: collapse; font-size: 13px; }
table.mapping th, table.mapping td { border: 1px solid #e6e9ee; padding: 6px 8px; text-align: left; }
table.mapping th { background: #f8fafc; }
table.mapping input { width: 100%; border: 1px solid transparent; padding: 4px; font-size: 13px; border-radius: 4px; }
table.mapping input:focus { border-color: #1677ff; outline: none; }
.status-pill { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; }
.status-pill.ok { background: #e6f7ee; color: #16a34a; }
.status-pill.no { background: #fdeaea; color: #e5484d; }
.health-row { display: flex; gap: 24px; font-size: 14px; margin-bottom: 8px; }

/* 设备状态面板 */
.dev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.device-card {
  display: flex; align-items: center; gap: 12px; position: relative;
  border: 1px solid #e6e9ee; border-radius: 10px; padding: 10px 12px; background: #fafbfc;
}
.device-card.on { border-color: #bfe3cd; background: #f4fbf7; }
.device-card.off { opacity: .72; }
.device-card .dev-icon { font-size: 26px; width: 34px; text-align: center; }
.device-card .dev-info { flex: 1; min-width: 0; }
.device-card .dev-name { font-size: 14px; font-weight: 600; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-card .dev-type { font-size: 11px; color: #999; margin-top: 2px; }
.device-card .dev-state { text-align: right; }
.device-card .dev-power { font-size: 13px; font-weight: 600; }
.device-card.on .dev-power { color: #16a34a; }
.device-card.off .dev-power { color: #999; }
.device-card .dev-value { font-size: 12px; color: #666; margin-top: 3px; }
.device-card .dev-badge {
  position: absolute; top: -7px; right: -5px; font-size: 10px; color: #fff;
  background: #1677ff; border-radius: 8px; padding: 1px 7px;
}
.dev-hint { margin-top: 10px; font-size: 12px; color: #aaa; }

/* Tab（历史指令 / 状态日志） */
.tab-bar { display: flex; gap: 4px; border-bottom: 1px solid #e6e9ee; margin-bottom: 12px; }
.tab {
  padding: 7px 16px; font-size: 13px; color: #666; cursor: pointer; user-select: none;
  border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; margin-bottom: -1px;
}
.tab:hover { color: #1677ff; }
.tab.active { color: #1677ff; font-weight: 600; border-color: #e6e9ee; background: #fff; }
.hidden { display: none !important; }
.tab-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; font-size: 12px;
}

/* 历史指令 */
.btn.sbtn { padding: 3px 10px; font-size: 12px; }
.btn.sbtn.active { background: #1677ff; color: #fff; border-color: #1677ff; }
.btn.sbtn.active:hover { color: #fff; }
.history-list { list-style: none; font-size: 13px; }
.history-list .empty { color: #999; font-size: 12px; padding: 6px 0; }
.hist-item {
  display: block; padding: 8px 10px; border: 1px solid #e6e9ee; border-radius: 8px;
  margin-bottom: 8px; cursor: pointer; transition: border-color .15s, background .15s; user-select: none;
}
.hist-item:last-child { margin-bottom: 0; }
.hist-item:hover { border-color: #1677ff; background: #f0f6ff; }
.hist-item .hist-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hist-item .hist-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-item .hist-count { font-size: 12px; color: #1677ff; font-weight: 600; }
.hist-item .hist-time { font-size: 12px; color: #999; }
.hist-item .hist-sub { font-size: 11px; color: #aaa; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }