.tui { --t-bg: #1a1b26; --t-bar: #16161e; --t-line: #3b4261; --t-fg: #c0caf5; --t-dim: #8a91b8; --t-blue: #7aa2f7; --t-green: #c0caf5; --t-amber: #e0af68;
  position: relative; display: grid; grid-template-rows: auto 1fr auto; height: 520px; overflow: hidden; font: 12.5px/1.55 var(--mono); color: var(--t-fg); background: var(--t-bg); border: 1px solid #3b4261; border-radius: 16px; box-shadow: 0 0 0 1px #0006, 0 60px 120px -40px #000, 0 0 90px -30px rgb(122 162 247 / 0.2); }
.tui-tabs, .tui-status { display: flex; align-items: center; gap: 2px; padding: 0 6px; height: 30px; background: var(--t-bar); white-space: nowrap; }
.tui-space { padding: 2px 10px; background: var(--t-blue); color: var(--t-bg); font-weight: 700; margin-right: 6px; }
.tui-tab { padding: 2px 10px; color: var(--t-dim); }
.tui-tab.on { background: var(--t-line); color: var(--t-fg); }
.tui-tab i { font-style: normal; color: var(--t-amber); font-weight: 800; }
.tui-tab[data-tab-blocked] { color: var(--t-amber); }
.tui-plus { color: var(--t-blue); padding: 0 8px; }
.tui-main { display: grid; grid-template-columns: 208px 1fr; min-height: 0; }
.tui-side { display: flex; flex-direction: column; padding: 10px 0; background: var(--t-bar); border-right: 1px solid #292e42; }
.tui-side p { padding: 1px 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tui-label { color: var(--t-dim); font-weight: 700; margin-top: 10px; }
.tui-label:first-child { margin-top: 0; }
.tui-agents { display: flex; flex-direction: column; }
.tui-agent { padding: 3px 16px; transition: background 300ms; }
.tui-agent b { font-weight: 700; }
.tui-agent small { display: block; font-size: 12.5px; color: var(--t-dim); padding-left: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tui-agent.focus { background: #232538; }
.tui-foot { margin-top: auto; color: var(--t-dim); }
.tui-panes { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; padding: 8px; min-height: 0; }
.pane { position: relative; display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--t-line); border-radius: 0; overflow: hidden; transition: border-color 400ms var(--ease), box-shadow 400ms var(--ease); }
.pane-title { display: flex; align-items: center; gap: 8px; padding: 3px 10px; font-size: 12px; color: var(--t-dim); border-bottom: 1px solid #292e42; white-space: nowrap; overflow: hidden; }
.pane-title b { color: var(--t-fg); }
.pane-glyph::before { content: "◇"; color: var(--t-dim); }
.pane-state { margin-left: auto; }
.pane-body { flex: 1; padding: 8px 12px; overflow: hidden; }
.pane-body p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pane-body u { text-decoration: none; color: var(--t-blue); }
.pane .dim, .tui .dim { color: var(--t-dim); }
.tui .ok { color: var(--t-green); }
.tui .amber { color: var(--t-amber); }
.pane .spin { color: var(--t-blue); margin-top: 6px; }
.pane .stream { color: var(--t-fg); min-height: 1.55em; }
.pane .ask { margin-top: 8px; padding: 8px 10px; border: 1px solid #5a4a36; border-radius: 6px; background: rgb(224 175 104 / 0.06); }
.pane .ask .cmd { color: var(--t-amber); }
.pane[data-state="working"] .pane-glyph::before { content: "◆"; color: var(--t-blue); }
.pane[data-state="working"] .pane-state::after { content: "◆ working"; color: var(--t-blue); }
.pane[data-state="blocked"] { border-color: var(--t-amber); box-shadow: 0 0 0 1px var(--t-amber), 0 0 32px -6px rgb(224 175 104 / 0.55); animation: needs 2.4s ease-in-out infinite; }
.pane[data-state="blocked"] .pane-glyph::before { content: "!"; color: var(--t-amber); font-weight: 800; }
.pane[data-state="blocked"] .pane-state::after { content: "! needs you"; color: var(--t-amber); font-weight: 700; }
.pane[data-state="done"] .pane-glyph::before { content: "✓"; color: var(--t-green); }
.pane[data-state="done"] .pane-state::after { content: "✓ done"; color: var(--t-green); }
.pane[data-state="idle"] .pane-state::after { content: "shell"; }
@keyframes needs { 50% { box-shadow: 0 0 0 1px var(--t-amber), 0 0 46px -4px rgb(224 175 104 / 0.7); } }
.tui-status .seg { padding: 2px 9px; color: var(--t-fg); }
.tui-status .seg.on { background: var(--t-blue); color: var(--t-bg); }
.tui-status .seg.acc { background: var(--t-line); color: var(--t-blue); }
.tui-status .working { color: var(--t-blue); }
.tui-status .blocked { color: var(--t-amber); font-weight: 700; }
.tui-status .blocked.zero { color: var(--t-dim); font-weight: 400; }
.tui-status .theme { background: var(--t-amber); color: var(--t-bg); }
.tui-status .spacer { flex: 1; }
.tui-toast { position: absolute; top: 40px; right: 14px; padding: 7px 12px; font-size: 12px; color: var(--t-bg); background: var(--t-amber); border-radius: 7px; box-shadow: 0 10px 30px -8px #000; opacity: 0; transform: translateY(-8px); transition: opacity 300ms, transform 300ms var(--ease); }
.tui-toast.show { opacity: 1; transform: none; }
.tui-toast.done { background: var(--t-green); }


/* the active space's git, in the status row: branch (green when clean and in step), ↑ to push, ↓ to pull, ● changed */
.tui-status .seg.tui-git { color: var(--t-dim); }
.tui-status .seg.tui-git b { color: var(--t-fg); font-weight: 400; }
.tui-git.clean { color: #9ece6a; }
.tui-git i { font-style: normal; }
.tui-git .up { color: var(--t-blue); } .tui-git .down { color: var(--t-amber); } .tui-git .chg { color: #bb9af7; }
.tui-mark { display: inline-block; width: 1ch; }