:root {
  --brand: #07c160;
  --brand-dark: #06ad56;
  --side-bg: #0f172a;
  --side-fg: #cbd5e1;
  --page-bg: #f3f5f8;
  --el-color-primary: #1f7aec;
}
* { box-sizing: border-box; }
html, body, #app { margin: 0; min-height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  background: var(--page-bg); color: #1f2937; font-size: 14px;
}
a { color: var(--el-color-primary); text-decoration: none; }

/* ---------- 布局 ---------- */
.layout { display: flex; min-height: 100vh; background: linear-gradient(to right, var(--side-bg) 220px, transparent 220px); }
.side { width: 220px; flex: none; position: sticky; top: 0; height: 100vh; background: var(--side-bg); color: var(--side-fg); display: flex; flex-direction: column; }
.brand { height: 60px; display: flex; align-items: center; gap: 10px; padding: 0 18px; color: #fff; font-weight: 600; font-size: 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
.brand .logo { width: 30px; height: 30px; border-radius: 8px; background: var(--brand); display: grid; place-items: center; }
.brand small { display: block; font-weight: 400; font-size: 11px; color: #94a3b8; margin-top: 1px; }
.side .el-menu { border-right: none; background: transparent; flex: 1; padding: 8px 0; }
.side .el-menu-item { color: var(--side-fg); height: 44px; margin: 2px 10px; border-radius: 8px; }
.side .el-menu-item .el-icon { color: #94a3b8; }
.side .el-menu-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.side .el-menu-item.is-active { background: linear-gradient(90deg, #1f7aec, #3b8ff5); color: #fff; }
.side .el-menu-item.is-active .el-icon { color: #fff; }
.side .menu-badge { margin-left: auto; display: inline-flex; align-items: center; }
.side .menu-badge .el-badge__content { position: static; transform: none; border: none; }
.side-foot { padding: 12px 18px; font-size: 12px; color: #64748b; border-top: 1px solid rgba(255,255,255,.06); }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { height: 60px; flex: none; position: sticky; top: 0; z-index: 20; background: #fff; display: flex; align-items: center; padding: 0 24px; gap: 12px; border-bottom: 1px solid #e5e7eb; }
.topbar h1 { font-size: 18px; margin: 0; font-weight: 600; }
.topbar .sub { color: #6b7280; font-size: 13px; }
.topbar .spacer { flex: 1; }
.user-chip { display: flex; align-items: center; gap: 8px; cursor: pointer; color: #374151; }
.content { flex: 1; padding: 20px 24px 32px; min-width: 0; }

/* ---------- 通用 ---------- */
.card { background: #fff; border-radius: 12px; border: 1px solid #e8ebf0; padding: 18px 20px; }
.card + .card { margin-top: 16px; }
.grid > .card + .card, .grid > * { margin-top: 0; }
.row.wrap > .el-button { margin: 0 !important; }
.card-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; margin: 0 0 14px; }
.card-title .extra { margin-left: auto; font-weight: 400; display: flex; gap: 8px; align-items: center; }
.muted { color: #6b7280; }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.grid { display: grid; gap: 16px; }
.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot.on { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.dot.off { background: #9ca3af; }
.dot.warn { background: #f59e0b; }
.dot.err { background: #ef4444; }
.tag-gap .el-tag { margin: 0 4px 4px 0; }
.demo-banner { background: #fff7e6; border: 1px solid #ffd591; color: #ad6800; border-radius: 8px; padding: 3px 10px; font-size: 12px; }

/* ---------- 指标卡 ---------- */
.stat { position: relative; overflow: hidden; }
.stat .label { color: #6b7280; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.stat .value { font-size: 28px; font-weight: 700; margin: 8px 0 4px; letter-spacing: .5px; }
.stat .value small { font-size: 14px; color: #6b7280; font-weight: 500; margin-left: 4px; }
.stat .foot { font-size: 12px; color: #6b7280; }
.stat .icon { position: absolute; right: 16px; top: 16px; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; }
.ic-green { background: #e8f8ef; color: #07a050; }
.ic-blue { background: #e8f1fe; color: #1f7aec; }
.ic-purple { background: #f1ebfe; color: #7c3aed; }
.ic-orange { background: #fff3e6; color: #ea7a0c; }
.ic-pink { background: #fdebf3; color: #db2777; }

/* ---------- 登录 ---------- */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: #fff; }
.login-hero { background: radial-gradient(1200px 600px at 10% 10%, #1f7aec 0%, #0f172a 60%); color: #fff; padding: 64px; display: flex; flex-direction: column; justify-content: space-between; }
.login-hero h2 { font-size: 34px; margin: 18px 0 12px; line-height: 1.3; }
.login-hero p { color: #cbd5e1; font-size: 15px; line-height: 1.8; max-width: 520px; }
.login-hero .feat { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 560px; margin-top: 28px; }
.login-hero .feat div { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 14px 16px; font-size: 13px; color: #e2e8f0; }
.login-hero .feat b { display: block; color: #fff; font-size: 14px; margin-bottom: 4px; }
.login-box { display: grid; place-items: center; }
.login-card { width: 380px; }
.login-card h3 { font-size: 24px; margin: 0 0 6px; }
.login-hint { margin-top: 16px; background: #f6f8fb; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 10px 12px; font-size: 13px; color: #475569; }

/* ---------- 设备调试 ---------- */
.debug-wrap { display: grid; grid-template-columns: 330px 1fr; gap: 18px; }
.screen { position: relative; width: 330px; border-radius: 22px; overflow: hidden; border: 8px solid #111827; background: #111; cursor: crosshair; }
.screen img { display: block; width: 100%; }
.screen .ocr-box { position: absolute; border: 1px solid rgba(31,122,236,.85); background: rgba(31,122,236,.10); pointer-events: none; }
.screen .tap-mark { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid #ef4444; background: rgba(239,68,68,.25); pointer-events: none; animation: pulse 1s ease-out 2; }
@keyframes pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: .2; } }
.screen-empty { height: 560px; display: grid; place-items: center; color: #9ca3af; background: #f3f4f6; border-radius: 14px; }
.kv { display: grid; grid-template-columns: 96px 1fr; row-gap: 8px; font-size: 13px; }
.kv .k { color: #6b7280; }
.score-bar { display: grid; grid-template-columns: 130px 1fr 44px; gap: 8px; align-items: center; font-size: 12px; margin: 4px 0; }
.event-list { max-height: 260px; overflow: auto; font-size: 12px; }
.event-list div { padding: 5px 0; border-bottom: 1px dashed #eef0f3; display: flex; gap: 8px; }

/* ---------- 人设卡片 ---------- */
.persona-card { display: flex; flex-direction: column; gap: 10px; }
.persona-card .head { display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px; flex: none; }
.persona-card .prompt { background: #f8fafc; border-radius: 8px; padding: 10px 12px; color: #475569; font-size: 13px; line-height: 1.6; min-height: 64px; }
.persona-card .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 12px; color: #6b7280; }
.persona-card .meta b { color: #111827; font-weight: 600; }
.trychat { border: 1px solid #e5e7eb; border-radius: 10px; height: 360px; display: flex; flex-direction: column; }
.trychat .msgs { flex: 1; overflow: auto; padding: 12px; background: #f5f6f8; }

/* ---------- 聊天 ---------- */
.chat-wrap { display: grid; grid-template-columns: 340px 1fr; height: calc(100vh - 60px - 56px); min-height: 520px; }
.conv-list { border-right: 1px solid #eef0f3; display: flex; flex-direction: column; min-height: 0; }
.conv-list .filters { padding: 12px; border-bottom: 1px solid #eef0f3; display: grid; gap: 8px; }
.conv-items { overflow: auto; flex: 1; }
.conv-item { padding: 12px 14px; border-bottom: 1px solid #f3f4f6; cursor: pointer; display: grid; grid-template-columns: 40px 1fr; gap: 10px; }
.conv-item:hover { background: #f8fafc; }
.conv-item.active { background: #eef5ff; }
.conv-item .name { font-weight: 600; display: flex; gap: 6px; align-items: center; }
.conv-item .time { margin-left: auto; font-weight: 400; color: #9ca3af; font-size: 12px; }
.conv-item .last { color: #6b7280; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.msg-pane { display: flex; flex-direction: column; min-height: 0; }
.msg-head { padding: 12px 18px; border-bottom: 1px solid #eef0f3; display: flex; align-items: center; gap: 10px; }
.msgs { flex: 1; overflow: auto; padding: 18px 22px; background: #f5f6f8; }
.bubble-row { display: flex; margin: 10px 0; gap: 8px; align-items: flex-start; }
.bubble-row.out { flex-direction: row-reverse; }
.bubble { max-width: 62%; padding: 9px 12px; border-radius: 10px; background: #fff; line-height: 1.6; white-space: pre-wrap; word-break: break-word; box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.bubble-row.out .bubble { background: #95ec69; }
.bubble-row.out.s-human .bubble { background: #ffe7ba; }
.bubble-row.out.s-fallback .bubble { background: #e5e7eb; }
.bubble-row.out.failed .bubble { outline: 2px solid #fca5a5; }
.bubble-meta { font-size: 11px; color: #9ca3af; margin-top: 3px; }
.bubble-row.out .bubble-meta { text-align: right; }
.mini-avatar { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; color: #fff; flex: none; }
.day-sep { text-align: center; color: #9ca3af; font-size: 12px; margin: 14px 0; }

/* ---------- 图片库 ---------- */
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.img-card { border: 1px solid #e8ebf0; border-radius: 10px; overflow: hidden; background: #fff; }
.img-card .thumb { aspect-ratio: 1 / 1; background: #f3f4f6; }
.img-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-card .body { padding: 10px 12px; }
.img-card .name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pair-code { font-size: 40px; letter-spacing: 10px; font-weight: 700; color: #1f7aec; font-family: ui-monospace, Menlo, monospace; text-align: center; padding: 10px 0; }

.el-table { --el-table-header-bg-color: #f8fafc; }
.el-table th.el-table__cell { color: #475569; font-weight: 600; }
.el-drawer__header { margin-bottom: 8px; }
body:has(.layout) { background: linear-gradient(to right, var(--side-bg) 220px, var(--page-bg) 220px); }