:root {
  --bg:#0a0d10; --panel:#0f141a; --panel2:#121922; --line:#1e2a36;
  --ink:#cfe6d8; --dim:#5f7488; --green:#5cf08a; --amber:#ffb020; --red:#ff5a5a;
  --cyan:#57d6ff; --purple:#c46cff;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body { background:var(--bg); color:var(--ink); font:14px/1.5 var(--mono); overflow:hidden; }

/* лёгкий CRT-скан */
#crt { position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.5;
  background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.18) 2px 3px); mix-blend-mode:multiply; }
#crt::after { content:''; position:absolute; inset:0; background:radial-gradient(120% 100% at 50% 0%, transparent 60%, rgba(0,0,0,.5)); }

#app { height:100vh; display:flex; flex-direction:column; max-width:1100px; margin:0 auto; padding:10px; gap:10px; }
header { display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line);
  background:var(--panel); padding:8px 14px; }
.brand { font-weight:700; letter-spacing:2px; color:var(--green); }
.brand .ext { color:var(--dim); }
.role { color:var(--amber); font-size:13px; }

main { flex:1; display:grid; grid-template-columns:300px 1fr; gap:10px; min-height:0; }
.col { border:1px solid var(--line); background:var(--panel); padding:12px; overflow:auto; }
h2 { font-size:11px; letter-spacing:2px; color:var(--dim); margin:14px 0 8px; border-bottom:1px dashed var(--line); padding-bottom:4px; }
h2:first-child { margin-top:0; }

/* полоски характеристик */
.grid { display:flex; flex-direction:column; gap:7px; }
.stat { display:grid; grid-template-columns:1fr auto; gap:2px 8px; align-items:center; }
.stat .k { color:var(--dim); font-size:12px; }
.stat .v { color:var(--ink); font-variant-numeric:tabular-nums; }
.stat .v.flash { animation:flash .6s ease; }
@keyframes flash { 0%{ color:#fff; text-shadow:0 0 8px currentColor; } 100%{} }
.bar { grid-column:1 / -1; height:6px; background:#0a1017; border:1px solid var(--line); overflow:hidden; }
.bar i { display:block; height:100%; transition:width .5s ease; }
.bar.good i { background:var(--green); } .bar.warn i { background:var(--amber); } .bar.bad i { background:var(--red); }
.bar.ai i { background:var(--purple); } .bar.debt i { background:var(--red); } .bar.neutral i { background:var(--cyan); }

/* эксплорер проекта */
.tree { display:flex; flex-direction:column; font-size:12px; line-height:1.7; max-height:34vh; overflow:auto;
  border:1px solid var(--line); background:#080b0e; padding:6px 4px; }
.tree .tr { white-space:nowrap; color:#9fb4a6; }
.tree .tr.dir { color:var(--cyan); }
.tree .tr.gen { color:var(--purple); }
.tree .tr.dep { color:var(--amber); }
.tree .tr.svc { color:var(--purple); }
.tree .tr.bug { color:var(--red); }
.tree .tr.fresh { color:var(--green); animation:fresh 1.1s ease; }
@keyframes fresh { 0%{ background:rgba(92,240,138,.28); } 100%{ background:transparent; } }

/* правая колонка */
.main { display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.task { border:1px solid var(--line); background:var(--panel2); padding:12px; }
.task-label { font-size:11px; letter-spacing:2px; color:var(--dim); }
.task-text { font-size:18px; color:var(--cyan); margin:8px 0 12px; min-height:1.4em; }
.actions { display:flex; flex-direction:column; gap:7px; }
.act { text-align:left; font:inherit; cursor:pointer; padding:10px 12px; color:var(--ink);
  background:#0c1219; border:1px solid var(--line); border-left:3px solid var(--line); }
.act small { display:block; color:var(--dim); font-size:11px; margin-top:2px; }
.act:hover { background:#111a24; }
.act.write:hover { border-left-color:var(--green); } .act.ask:hover { border-left-color:var(--amber); }
.act.let:hover { border-left-color:var(--red); }
.act:disabled { opacity:.4; cursor:default; }
.ai-left { margin-top:8px; font-size:12px; color:var(--dim); }

.deepseek { border:1px solid #2a2036; background:linear-gradient(#140f1c,#0f0b16); padding:12px; }
.ds-head { color:var(--purple); font-weight:700; letter-spacing:1px; }
.ds-msg { margin-top:6px; white-space:pre-wrap; min-height:2.6em; }
.ds-msg.think::after { content:'▋'; animation:blink 1s steps(2) infinite; }
@keyframes blink { 50%{ opacity:0; } }
.ds-code { margin:8px 0 0; padding:8px 10px; background:#0a0710; border:1px solid #2a2036; border-left:3px solid var(--purple);
  color:#c9b6e6; font:12px/1.45 var(--mono); white-space:pre; overflow:auto; max-height:22vh; }
.ds-code.hidden { display:none; }

.log { flex:1; border:1px solid var(--line); background:#080b0e; padding:10px; overflow:auto; font-size:12.5px; color:#9fb4a6; }
.log div { padding:1px 0; white-space:pre-wrap; }
.log div.you { color:var(--green); } .log div.ev { color:var(--amber); } .log div.ai { color:var(--purple); }

.dim { color:var(--dim); }
.quip { color:var(--amber); }

/* overlay */
.overlay { position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:#060809f2; padding:5vh 5vw; overflow:auto; }
.overlay.hidden { display:none; }
.card { max-width:64ch; border:1px solid var(--line); background:var(--panel); padding:22px 26px; }
.logo { color:var(--green); font-size:11px; line-height:1.15; margin:0 0 10px; }
.card h1 { font-size:1.4em; margin:.2em 0; color:var(--cyan); }
.card .sub { color:var(--amber); } .card .ending-id { color:var(--purple); letter-spacing:2px; font-size:12px; }
.big { font:inherit; cursor:pointer; margin-top:16px; padding:11px 22px; font-size:1.05em;
  background:var(--green); color:#04140a; border:0; border-bottom:3px solid #2a7a48; }
.big:active { transform:translateY(2px); border-bottom-width:1px; }
.stats-line { color:var(--dim); font-size:12px; margin-top:10px; }
.card .goal { color:var(--green); border:1px solid #1f3a28; background:#0b1710; padding:8px 10px; font-size:13px; }
.flag { margin-top:14px; padding:12px 14px; border:1px solid #2a7a48; background:#0b1710; }
.flag code { color:var(--green); font-size:1.15em; font-weight:700; letter-spacing:1px; }
.flag small { display:block; color:var(--dim); margin-top:4px; }
.no-flag { margin-top:12px; font-size:12.5px; }

@media (max-width:760px) { main { grid-template-columns:1fr; } .col.stats { max-height:38vh; } }