:root {
  --bg: #0d1117; --panel: #161b22; --panel2: #1c2330; --border: #2d3748;
  --text: #e6edf3; --muted: #8b98a9; --accent: #4f9cf9; --green: #3fb950;
  --red: #f85149; --yellow: #d29922; --purple: #bc8cff;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 ui-sans-serif, system-ui, sans-serif; background: var(--bg); color: var(--text); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--red); min-height: 18px; font-size: 13px; }
button { background: var(--accent); border: 0; color: #fff; padding: 7px 14px; border-radius: 6px; cursor: pointer; font-weight: 600; }
button:hover { filter: brightness(1.15); }
button.ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); }
input, select, textarea {
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  padding: 7px 10px; border-radius: 6px; font: inherit;
}
textarea { width: 100%; resize: vertical; }

/* login */
.login-wrap { display: grid; place-items: center; height: 100vh; }
.login-card { background: var(--panel); border: 1px solid var(--border); padding: 34px; border-radius: 12px; width: 330px; display: flex; flex-direction: column; gap: 12px; }
.login-card h1 { margin: 0; font-size: 22px; }
.login-card label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }

/* layout */
.app { display: grid; grid-template-columns: 1fr 320px; grid-template-rows: 52px 1fr; height: 100vh; }
header { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--border); }
.brand { font-weight: 800; letter-spacing: .4px; }
#projectSelect { max-width: 220px; }
.presence { margin-left: auto; color: var(--muted); font-size: 12px; }
main { overflow: auto; padding: 14px 18px; }
nav#tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
nav#tabs button { background: var(--panel); border: 1px solid var(--border); color: var(--muted); }
nav#tabs button.active { color: #fff; border-color: var(--accent); background: var(--panel2); }
.tab { max-width: 900px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.card h3 { margin: 0 0 10px; font-size: 15px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row > input, .row > select { flex: 1; min-width: 120px; }
.pill { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.pill.open { background: #233; color: var(--accent); }
.pill.in_progress { background: #241f0e; color: var(--yellow); }
.pill.review { background: #1e1633; color: var(--purple); }
.pill.done { background: #0f2417; color: var(--green); }
.pill.high { background: #2b1214; color: var(--red); }
.pill.normal, .pill.low { background: #222a36; color: var(--muted); }
.item { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--border); }
.item:first-of-type { border-top: 0; }
.item .grow { flex: 1; min-width: 200px; }
.score { font-weight: 800; min-width: 30px; text-align: center; }
.votebtns button { background: transparent; border: 1px solid var(--border); padding: 2px 8px; }
.votebtns button.mine-up { border-color: var(--green); color: var(--green); }
.votebtns button.mine-down { border-color: var(--red); color: var(--red); }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; font-size: 13px; }
.kv b { color: var(--muted); font-weight: 500; }
code, pre { background: var(--panel2); border-radius: 5px; }
pre { padding: 10px; overflow: auto; border: 1px solid var(--border); }
.keyline code { font-size: 13px; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.stat { background: var(--panel2); border-radius: 8px; padding: 12px; text-align: center; }
.stat .n { font-size: 24px; font-weight: 800; }
.stat .l { color: var(--muted); font-size: 12px; }

/* chat */
#chatPanel { border-left: 1px solid var(--border); background: var(--panel); display: flex; flex-direction: column; }
.chat-head { padding: 10px 14px; font-weight: 700; border-bottom: 1px solid var(--border); }
#chatLog { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 92%; }
.msg .who { font-size: 11px; color: var(--muted); }
.msg .who .k-agent { color: var(--purple); font-weight: 700; }
.msg .who .k-human { color: var(--accent); font-weight: 700; }
.msg .bubble { background: var(--panel2); border: 1px solid var(--border); border-radius: 9px; padding: 6px 10px; white-space: pre-wrap; word-break: break-word; }
.msg.self .bubble { border-color: var(--accent); }
#chatForm { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--border); }
#chatInput { flex: 1; }