* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, "Microsoft YaHei", sans-serif; background: #f6f7f9; color: #17202a; }
a { color: #155eef; text-decoration: none; }
.topbar { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: #111827; color: white; }
.topbar a { color: white; margin-right: 16px; }
.brand { font-weight: 700; font-size: 18px; }
.container { max-width: 1120px; margin: 24px auto; padding: 0 16px; }
.panel, .stats div, .login-card { background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 18px; margin-bottom: 18px; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats strong { display: block; font-size: 32px; margin-bottom: 6px; }
table { width: 100%; border-collapse: collapse; background: white; border: 1px solid #e5e7eb; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
th { background: #f3f4f6; }
label { display: block; margin-bottom: 12px; font-weight: 600; }
input, textarea, select { width: 100%; padding: 10px; margin-top: 6px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; }
textarea { resize: vertical; }
button, .button { display: inline-block; border: 0; border-radius: 6px; padding: 10px 14px; background: #155eef; color: white; cursor: pointer; font: inherit; }
.secondary { background: #475467; }
.danger { background: #c2410c; }
.toolbar { display: flex; gap: 12px; align-items: end; margin-bottom: 16px; }
.toolbar select { width: 220px; }
.badge { display: inline-block; padding: 4px 8px; border-radius: 999px; background: #eef2ff; color: #3730a3; }
.messages { display: grid; gap: 12px; }
.message { border-left: 4px solid #94a3b8; padding: 10px 12px; background: #f8fafc; }
.message.inbound { border-left-color: #155eef; }
.message.outbound { border-left-color: #16a34a; }
.message.ai_draft { border-left-color: #9333ea; }
.draft textarea { width: 100%; }
.inline { display: flex; gap: 8px; align-items: center; }
.inline input { width: auto; margin: 0; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.status-box { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 6px; padding: 12px; margin-bottom: 14px; }
.highlight { border-color: #bfdbfe; background: #eff6ff; }
.status-box p { margin: 6px 0; }
.muted, .notes { color: #475467; }
.notes { line-height: 1.8; }
.login-body { min-height: 100vh; display: grid; place-items: center; }
.login-card { width: min(420px, 92vw); }
.error { color: #b42318; }
.warn { color: #b54708; }
.success { color: #067647; }
.connect-status div.ok { border-color: #16a34a; background: #ecfdf3; }
.connect-status div.bad { border-color: #dc2626; background: #fef2f2; }
.connect-status div.pending { border-color: #cbd5e1; background: #f8fafc; }
.connect-status div.ok strong { color: #067647; }
.connect-status div.bad strong { color: #b42318; }
.connect-status div.pending strong { color: #475467; }
.deploy-status-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.deploy-status-grid strong { font-size: 22px; overflow-wrap: anywhere; }
.deploy-warning { border-color: #fda29b; background: #fef3f2; color: #b42318; font-weight: 700; }
.hero-actions .button { font-size: 18px; padding: 14px 18px; }
.workbench { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.conversation-list { position: sticky; top: 16px; max-height: calc(100vh - 100px); overflow: auto; }
.conversation-item { display: block; padding: 12px; border: 1px solid #e5e7eb; border-radius: 6px; margin-bottom: 10px; color: #17202a; background: #fff; }
.conversation-item strong, .conversation-item span, .conversation-item small { display: block; margin-bottom: 4px; }
.conversation-item span { color: #475467; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workbench-detail textarea { width: 100%; }
pre { white-space: pre-wrap; background: #111827; color: #d1fae5; padding: 12px; border-radius: 6px; }
@media (max-width: 800px) {
  .grid { grid-template-columns: 1fr; }
  .workbench { grid-template-columns: 1fr; }
  .topbar { height: auto; align-items: flex-start; flex-direction: column; padding: 16px; gap: 12px; }
  table { display: block; overflow-x: auto; }
}