/* Временный минимум; дизайн-система (Nord, JetBrains Mono) — в Фазе 6 */
[hidden] { display: none !important; }
body { margin: 0; font-family: ui-monospace, monospace; background: #eceff4; color: #2e3440; }
.muted { color: #4c566a; font-size: .9em; }
.error { background: #bf616a; color: #fff; padding: 8px 12px; margin-bottom: 12px; }

.btn { display: inline-block; padding: 10px 16px; border: 1px solid #4c566a; background: #e5e9f0; color: #2e3440; font: inherit; cursor: pointer; text-decoration: none; }
.btn-primary { background: #5e81ac; border-color: #5e81ac; color: #fff; }
.btn-wide { display: block; text-align: center; }
.link { background: none; border: 0; padding: 0; font: inherit; color: #5e81ac; cursor: pointer; text-decoration: underline; }

.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-box { width: 100%; max-width: 360px; background: #fff; padding: 32px; border: 1px solid #d8dee9; }
.login-box h1 { margin: 0 0 4px; letter-spacing: .1em; }
.login-box .link { margin-top: 14px; }
.legacy-form { display: grid; gap: 8px; margin-top: 12px; }
.legacy-form input { padding: 9px; border: 1px solid #d8dee9; font: inherit; }

.topbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 12px 20px; background: #2e3440; color: #eceff4; }
.topbar .link { color: #88c0d0; }
.brand { font-weight: 700; letter-spacing: .1em; }
.nav { display: flex; gap: 16px; flex: 1; }
.nav a { color: #d8dee9; text-decoration: none; }
.nav a.active { color: #88c0d0; border-bottom: 2px solid #88c0d0; }
.app { padding: 24px 20px; overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; background: #fff; }
.table th, .table td { text-align: left; padding: 10px; border-bottom: 1px solid #e5e9f0; vertical-align: top; }
.table th { background: #e5e9f0; font-weight: 600; }
.badge-off { background: #bf616a; color: #fff; padding: 1px 6px; font-size: .8em; }

/* --- Проекты (Ф4) --- */
.projects-layout { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.projects-main { flex: 1 1 640px; min-width: 0; }
.projects-side { flex: 0 0 220px; background: #fff; border: 1px solid #d8dee9; padding: 16px; }
.side-total { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.side-total span:first-child { font-size: 2em; font-weight: 700; }
.side-statuses { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.side-st { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: 1px solid transparent; padding: 4px; font: inherit; cursor: pointer; }
.side-st.active, .side-st:hover { border-color: #d8dee9; background: #eceff4; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.toolbar select, .toolbar input { padding: 8px; border: 1px solid #d8dee9; font: inherit; background: #fff; }
.toolbar input { flex: 1; min-width: 160px; }
.table-wrap { overflow-x: auto; }
.table th[data-sort] { cursor: pointer; white-space: nowrap; }
.table th[data-sort]::after { content: attr(data-dir); margin-left: 4px; }
.table th.sorted { color: #5e81ac; }
.table select { font: inherit; padding: 3px; }
.actions { white-space: nowrap; }
.actions .link { margin-right: 10px; }
.link.danger { color: #bf616a; }
.tag { border: 1px solid #4c566a; padding: 1px 6px; font-size: .8em; }
.badge { display: inline-block; padding: 2px 8px; font-size: .8em; font-weight: 600; border: 0; }
.st-new { background: #e5e9f0; color: #2e3440; }
.st-work { background: #ebcb8b; color: #2e3440; }
.st-ready { background: #a3be8c; color: #2e3440; }
.st-prod { background: #bf616a; color: #fff; }
.st-internal { background: #b48ead; color: #fff; }
tr.flash { animation: flash 2s; }
@keyframes flash { from { background: #ebcb8b; } to { background: transparent; } }

.dialog { border: 1px solid #4c566a; padding: 24px; width: min(440px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(46, 52, 64, .5); }
.dialog h3 { margin-top: 0; }
.dialog label { display: grid; gap: 4px; margin-bottom: 10px; }
.dialog input { padding: 8px; border: 1px solid #d8dee9; font: inherit; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dialog-wide { width: min(1100px, calc(100vw - 32px)); height: min(80vh, 800px); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; }
.explorer { display: flex; gap: 12px; height: calc(100% - 50px); }
.explorer-tree { flex: 0 0 280px; overflow: auto; border: 1px solid #e5e9f0; padding: 8px; }
.explorer-tree ul { list-style: none; margin: 0; padding-left: 14px; }
.explorer-tree > ul { padding-left: 0; }
.explorer-view { flex: 1; overflow: auto; margin: 0; padding: 12px; background: #2e3440; color: #eceff4; white-space: pre; }
.explorer-view.muted { color: #d8dee9; }
@media (max-width: 700px) { .explorer { flex-direction: column; } .explorer-tree { flex-basis: 35%; } }

/* --- Шапка: виджеты (Ф5) --- */
.widgets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .82em; }
.w { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid #4c566a; color: #d8dee9; background: transparent; font: inherit; }
.w b { color: #eceff4; }
.w-sub { color: #a5abb6; }
.w-ok { border-color: #a3be8c; }
.w-warn { border-color: #ebcb8b; }
.w-crit { border-color: #bf616a; background: rgba(191, 97, 106, .25); }
.w.stale { opacity: .6; }
.w-btn { cursor: pointer; }
.spark { display: block; }
.spark polyline { fill: none; stroke: #88c0d0; stroke-width: 1.2; }
.status-list { list-style: none; padding: 0; display: grid; gap: 6px; }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: #a3be8c; }
.dot-warn { background: #ebcb8b; }

/* --- Чат в проекте (Ф5) --- */
.workspace { display: flex; align-items: stretch; min-height: calc(100vh - 56px); }
.workspace .app { flex: 1; min-width: 0; }
.chat { flex: 0 0 min(520px, 100%); display: flex; flex-direction: column; border-right: 1px solid #d8dee9; background: #fff; height: calc(100vh - 56px); position: sticky; top: 0; }
.chat.wide { flex-basis: min(1000px, 100%); }
.chat-head { padding: 10px 12px; border-bottom: 1px solid #e5e9f0; display: grid; gap: 8px; }
.chat-project { letter-spacing: .05em; }
.chat-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chat-controls select { font: inherit; font-size: .85em; padding: 4px; max-width: 220px; }
.seg { display: inline-flex; border: 1px solid #4c566a; }
.seg button { border: 0; background: #fff; font: inherit; font-size: .8em; padding: 4px 8px; cursor: pointer; }
.seg button.active { background: #2e3440; color: #eceff4; }
.icon { border: 1px solid #d8dee9; background: #fff; cursor: pointer; font: inherit; padding: 3px 8px; }
.chat-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.msg { padding: 8px 12px; line-height: 1.5; overflow-wrap: anywhere; }
.msg-user { background: #e5e9f0; align-self: flex-end; max-width: 85%; }
.msg-assistant { background: #fff; border-left: 3px solid #5e81ac; }
.msg code { background: #eceff4; padding: 0 4px; }
.md-code { background: #2e3440; color: #eceff4; padding: 8px; overflow-x: auto; margin: 6px 0; }
.tool { font-size: .82em; border: 1px solid #e5e9f0; padding: 4px 8px; color: #4c566a; }
.tool summary { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool pre, .tool-result { font-size: .9em; background: #eceff4; padding: 6px; overflow-x: auto; max-height: 300px; margin: 4px 0 0; white-space: pre-wrap; }
.tool-error { border-color: #bf616a; }
.error-text { color: #bf616a; }
.note { font-size: .82em; color: #4c566a; text-align: center; }
.note-error { color: #bf616a; }
.note-summary { text-align: right; }
.chat-status { padding: 6px 12px; font-size: .85em; color: #5e81ac; border-top: 1px solid #e5e9f0; }
.chat-form { border-top: 1px solid #e5e9f0; padding: 10px; display: grid; gap: 8px; }
.chat-form textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px; border: 1px solid #d8dee9; resize: vertical; }
.chat-form-row { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.chat-form-row .muted { margin-right: auto; }
@media (max-width: 900px) {
  .workspace { flex-direction: column; }
  .chat { position: fixed; inset: 0; z-index: 10; height: 100vh; flex-basis: auto; }
}