:root { --primary: #0b4ea2; --primary-dark: #083a7a; --accent: #c9a227; --bg: #f4f6fa; --line: #dfe4ec; --ink: #1d2533; --muted: #6b7486 }
* { box-sizing: border-box }
/* 带 display 的区块会盖过 hidden 属性，这里统一兜住 */
[hidden] { display: none !important }
body { margin: 0; font: 14px/1.6 -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; color: var(--ink); background: var(--bg); height: 100vh; display: flex; flex-direction: column }
button, select, textarea { font: inherit }
button { cursor: pointer; border-radius: 6px; padding: 6px 14px; border: 1px solid var(--line); background: #fff }
button.primary { background: var(--primary); border-color: var(--primary); color: #fff }
button.primary:hover { background: var(--primary-dark) }
button.ghost { background: transparent; border-color: rgba(255,255,255,.4); color: #fff }
button.block { width: 100%; margin: 10px 0 18px }
.muted { color: var(--muted) } .small { font-size: 12px }
.error { color: #b42318; min-height: 1.2em }
.top { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background: var(--primary); color: #fff; border-bottom: 3px solid var(--accent) }
.brand { display: flex; gap: 10px; align-items: center } .brand small { display: block; opacity: .85; font-size: 12px }
.logo { width: 34px; height: 34px; border-radius: 8px; background: var(--accent); color: var(--primary-dark); display: grid; place-items: center; font-weight: 700; font-size: 18px }
.who { display: flex; gap: 10px; align-items: center }
.signin { flex: 1; display: grid; place-items: center }
.signin .card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 36px 44px; text-align: center; max-width: 420px }
.app { flex: 1; display: grid; grid-template-columns: 240px 1fr 260px; min-height: 0 }
.side, .files { background: #fff; border-right: 1px solid var(--line); padding: 16px; overflow-y: auto }
.files { border-right: 0; border-left: 1px solid var(--line) }
.side select { width: 100%; padding: 6px }
#sessions, #artifacts { list-style: none; margin: 6px 0 0; padding: 0 }
#sessions li { padding: 6px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
#sessions li:hover { background: var(--bg) } #sessions li.active { background: #e6eefa; color: var(--primary-dark) }
#artifacts li { padding: 6px 0; border-bottom: 1px dashed var(--line) } #artifacts a { color: var(--primary); cursor: pointer }
.chat { display: flex; flex-direction: column; min-height: 0 }
.home { padding: 40px 32px } .home h2 { margin-top: 0 }
.actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px }
.actions button { text-align: left; padding: 14px; background: #fff; border-radius: 10px }
.actions button:hover { border-color: var(--primary) }
.actions b { display: block; color: var(--primary-dark) }
.log { flex: 1; overflow-y: auto; padding: 20px 28px }
.msg { max-width: 78%; margin: 10px 0; padding: 10px 14px; border-radius: 10px; white-space: pre-wrap; word-break: break-word }
.msg.user { margin-left: auto; background: var(--primary); color: #fff }
.msg.assistant { background: #fff; border: 1px solid var(--line) }
.tool { font-size: 12px; color: var(--muted); margin: 4px 0; padding-left: 10px; border-left: 2px solid var(--line) }
.tool.ok { border-color: #12b76a } .tool.error, .tool.denied { border-color: #f04438 }
.approval { margin: 10px 0; padding: 12px 14px; border: 1px solid var(--accent); background: #fffbeb; border-radius: 10px; max-width: 78% }
.approval pre { white-space: pre-wrap; font-size: 12px; background: #fff; padding: 6px; border-radius: 6px; margin: 6px 0 }
.approval button { margin-right: 8px }
.run { text-align: center; font-size: 12px; color: var(--muted); margin: 6px 0 }
.composer { display: flex; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); background: #fff }
.composer button { align-self: flex-end; white-space: nowrap; padding: 10px 20px }
.composer textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px }
.foot { text-align: center; font-size: 11px; color: var(--muted); padding: 4px }
@media (max-width: 900px) { .app { grid-template-columns: 1fr } .side, .files { display: none } }