:root { --bg:#f5f6f8; --fg:#1a1d21; --card:#ffffff; --line:#dde1e6; --accent:#2563eb; --muted:#6b7280; --err:#b91c1c; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#101418; --fg:#e7eaee; --card:#1a2027; --line:#2a323c; --accent:#60a5fa; --muted:#8b95a1; --err:#f87171; }
}
:root[data-theme="dark"] { --bg:#101418; --fg:#e7eaee; --card:#1a2027; --line:#2a323c; --accent:#60a5fa; --muted:#8b95a1; --err:#f87171; }
* { box-sizing: border-box; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--fg); min-height:100vh; display:flex; flex-direction:column; }
body.center { justify-content:center; align-items:center; }
header.top { display:flex; justify-content:space-between; align-items:center; padding:.7rem 1rem; border-bottom:1px solid var(--line); background:var(--card); }
.brand { font-weight:600; }
nav a { margin-left:1rem; color:var(--accent); text-decoration:none; }
main { flex:1; padding:1rem; max-width:60rem; width:100%; margin:0 auto; }
footer { padding:.6rem 1rem; text-align:center; }
h1 { font-size:1.25rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:.6rem; padding:1rem; }
.login { max-width:20rem; text-align:center; }
.login input { width:100%; font-size:1.4rem; text-align:center; letter-spacing:.3rem; padding:.5rem; margin:.6rem 0; border:1px solid var(--line); border-radius:.5rem; background:var(--bg); color:var(--fg); }
.login button { width:100%; padding:.6rem; font-size:1rem; border:0; border-radius:.5rem; background:var(--accent); color:#fff; cursor:pointer; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:.8rem; }
.agent-id { font-family:ui-monospace,monospace; color:var(--accent); }
.agent-ru { margin-top:.2rem; }
.muted { color:var(--muted); }
.small { font-size:.85rem; }
.error { color:var(--err); }
.okmsg { color:#15803d; }
.evt { padding:.25rem 0; border-bottom:1px solid var(--line); }
.tabs { display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem 0 .8rem; }
.tabs a { padding:.3rem .7rem; border:1px solid var(--line); border-radius:1rem; text-decoration:none; color:var(--fg); background:var(--card); font-size:.9rem; }
.tabs a.tab-active { background:var(--accent); color:#fff; border-color:var(--accent); }
.searchbar { display:flex; gap:.5rem; margin-bottom:.8rem; align-items:center; }
.searchbar input { flex:1; padding:.45rem .6rem; border:1px solid var(--line); border-radius:.5rem; background:var(--card); color:var(--fg); }
.searchbar button, .btn { padding:.45rem .9rem; border:0; border-radius:.5rem; background:var(--accent); color:#fff; cursor:pointer; text-decoration:none; font-size:.95rem; display:inline-block; }
.btn.secondary { background:var(--card); color:var(--fg); border:1px solid var(--line); }
.tablewrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; background:var(--card); border:1px solid var(--line); border-radius:.5rem; }
th, td { text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--line); font-size:.92rem; }
tbody tr { cursor:pointer; }
tbody tr:hover { background:var(--bg); }
dl.props { display:grid; grid-template-columns:minmax(9rem,max-content) 1fr; gap:.35rem .8rem; margin:0 0 .8rem; }
dl.props dt { color:var(--muted); }
dl.props dd { margin:0; word-break:break-word; }
dl.props input, dl.props textarea { width:100%; padding:.35rem .5rem; border:1px solid var(--line); border-radius:.4rem; background:var(--bg); color:var(--fg); font:inherit; }
.card button[type=submit] { padding:.5rem 1.2rem; border:0; border-radius:.5rem; background:var(--accent); color:#fff; cursor:pointer; }
.secret-card { margin-top:1rem; border-color:var(--accent); }
.secret-btns { display:flex; flex-wrap:wrap; gap:.5rem; }
.secret-box { margin-top:.7rem; padding:.6rem; border:1px dashed var(--accent); border-radius:.5rem; background:var(--bg); }
.secret-row { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; padding:.2rem 0; }
.secret-row code { background:var(--card); padding:.15rem .4rem; border-radius:.3rem; user-select:all; word-break:break-all; }
.btn.tiny { padding:.15rem .5rem; font-size:.8rem; }
pre.pdn { white-space:pre-wrap; word-break:break-word; background:var(--card); padding:.5rem; border-radius:.4rem; margin:.3rem 0 0; }
a.room { text-decoration:none; color:var(--fg); }
a.room:hover { border-color:var(--accent); }
.chatlog { display:flex; flex-direction:column; gap:.5rem; margin:.8rem 0; }
.bubble { max-width:85%; padding:.5rem .7rem; border-radius:.7rem; border:1px solid var(--line); }
.bubble .btext { white-space:pre-wrap; word-break:break-word; }
.bubble.user { align-self:flex-end; background:var(--accent); color:#fff; border-color:var(--accent); }
.bubble.assistant { align-self:flex-start; background:var(--card); }
.bubble .btime { margin-top:.2rem; opacity:.7; }
.bubble.user .btime { color:#e5edff; }
.chatform { display:flex; gap:.5rem; align-items:flex-end; }
.chatform textarea { flex:1; padding:.5rem; border:1px solid var(--line); border-radius:.5rem; background:var(--card); color:var(--fg); font:inherit; resize:vertical; }
.chatform button { padding:.6rem 1rem; border:0; border-radius:.5rem; background:var(--accent); color:#fff; cursor:pointer; }
.dash { display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:.8rem; }
.dash-h { font-weight:600; margin-bottom:.4rem; }
.dash .big { font-size:1.5rem; font-weight:700; margin:.2rem 0 .5rem; }
.dash-row { display:flex; justify-content:space-between; gap:.5rem; padding:.15rem 0; border-bottom:1px solid var(--line); }
.dash-row:last-child { border-bottom:0; }
.warn { color:#b45309; margin-top:.4rem; }
svg.spark { width:100%; height:60px; display:block; margin:.3rem 0; }

/* Живой офис */
.floor { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
  background:repeating-linear-gradient(45deg,var(--line) 0 2px,transparent 2px 14px),var(--card);
  border:2px solid var(--line); border-radius:.5rem; padding:6px; }
.deskroom { position:relative; min-height:110px; border:1px dashed var(--line); border-radius:.4rem;
  background:var(--bg); text-decoration:none; color:var(--fg); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.rlabel { position:absolute; top:3px; left:5px; font-size:.7rem; color:var(--muted); font-family:ui-monospace,monospace; }
.agent { text-align:center; transition:transform .5s ease; }
.agent .ava { font-size:1.9rem; line-height:1; filter:grayscale(1) opacity(.5); transition:filter .3s; }
.agent .nm { font-size:.72rem; color:var(--muted); }
.agent .bubble-mini { position:absolute; top:-2px; right:8px; opacity:0; transform:scale(.6); transition:.2s; }
.agent.st-working .ava { filter:none; animation:bob .7s ease-in-out infinite; }
.agent.st-speaking .ava { filter:none; }
.agent.st-speaking .bubble-mini { opacity:1; transform:scale(1); animation:bob .6s ease-in-out infinite; }
.agent.st-idle .ava { filter:grayscale(1) opacity(.45); }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.lg-speak { color:var(--accent); }
.lg-work { color:#15803d; }
.postman { position:absolute; top:-4px; left:-30px; font-size:1.5rem; opacity:0; }
.postman.on { animation:deliver 4s linear; }
@keyframes deliver { 0%{opacity:1;left:-30px} 90%{opacity:1;left:100%} 100%{opacity:0;left:100%} }