:root{
  --paper:#f7f7f5; --card:#ffffff; --sunk:#f0f1ee;
  --ink:#1a1f1d; --ink-2:#5a6462; --ink-3:#8b9491;
  --line:#e2e5e1; --line-2:#cfd4cf;
  --accent:#2c6a58; --accent-ink:#1e4c3e; --accent-soft:#e4f0ea;
  --warn:#8a5a17; --warn-soft:#f7eeda;
  --danger:#9a3230; --danger-soft:#f9e6e5;
  --r:10px;
  --shadow:0 1px 2px rgba(20,35,30,.05), 0 10px 30px -18px rgba(20,35,30,.35);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-underline-offset:3px}
h1,h2,h3{line-height:1.2; margin:0; letter-spacing:-.015em; text-wrap:balance}
h1{font-size:clamp(28px,4vw,40px)} h2{font-size:22px} h3{font-size:17px}
p{margin:0 0 12px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.muted{color:var(--ink-2)} .small{font-size:13.5px} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.nowrap{white-space:nowrap}

/* ---------- каркас ---------- */
.topbar{background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.topbar .inner{max-width:1240px; margin:0 auto; padding:0 20px; height:58px; display:flex; align-items:center; gap:18px}
.brand{font-weight:700; font-size:17px; letter-spacing:-.02em; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:8px}
.brand span{width:9px; height:9px; border-radius:2px; background:var(--accent); display:inline-block}
.topbar nav{margin-left:auto; display:flex; align-items:center; gap:8px}
.wrap{max-width:1240px; margin:0 auto; padding:28px 20px 64px}
.wrap.narrow{max-width:460px; padding-top:56px}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid var(--line-2); background:var(--card); color:var(--ink);
  padding:9px 15px; border-radius:8px; font-size:14.5px; font-weight:500;
  cursor:pointer; text-decoration:none; min-height:40px; transition:background .12s,border-color .12s;
}
.btn:hover{background:var(--sunk)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
.btn-ghost{border-color:transparent; background:transparent; color:var(--ink-2)}
.btn-ghost:hover{background:var(--sunk); color:var(--ink)}
.btn-danger{color:var(--danger); border-color:var(--line-2)}
.btn-danger:hover{background:var(--danger-soft); border-color:var(--danger)}
.btn-sm{padding:5px 10px; min-height:32px; font-size:13px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5; pointer-events:none}
.btn-lg{padding:13px 24px; min-height:50px; font-size:16px}

/* ---------- формы ---------- */
label{display:block; font-size:14px; font-weight:500; margin-bottom:6px}
input[type=text],input[type=email],input[type=password],textarea,select{
  width:100%; padding:11px 13px; border:1px solid var(--line-2); border-radius:8px;
  background:var(--card); color:var(--ink); font:inherit; font-size:15px;
}
textarea{resize:vertical; min-height:96px; line-height:1.5}
input:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent)}
.field{margin-bottom:16px}
.err{color:var(--danger); font-size:13.5px; margin-top:6px}
.hint{color:var(--ink-3); font-size:13px; margin-top:6px}

/* ---------- карточки, плашки ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px; box-shadow:var(--shadow)}
.flash{background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent-ink); padding:11px 15px; border-radius:8px; margin-bottom:18px; font-size:14.5px}
.badge{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; padding:3px 9px; border-radius:20px; background:var(--sunk); color:var(--ink-2); white-space:nowrap}
.badge.ready{background:var(--accent-soft); color:var(--accent-ink)}
.badge.busy{background:var(--warn-soft); color:var(--warn)}
.badge.failed{background:var(--danger-soft); color:var(--danger)}
.dot{width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block}
.badge.busy .dot{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.badge.busy .dot{animation:none}}

/* ---------- список проектов ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px}
.proj{display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit}
.proj:hover{border-color:var(--line-2)}
.proj .t{font-weight:600; font-size:15.5px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.proj .foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:6px}

/* ---------- студия ---------- */
.studio{display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:20px; align-items:start}
@media(max-width:940px){.studio{grid-template-columns:minmax(0,1fr)}}
.chat{background:var(--card); border:1px solid var(--line); border-radius:var(--r); display:flex; flex-direction:column; box-shadow:var(--shadow); max-height:calc(100vh - 130px)}
.chat .log{padding:18px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; flex:1; min-height:220px}
.msg{max-width:100%; font-size:14.5px; line-height:1.5}
.msg .who{font-size:11.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); margin-bottom:5px}
.msg .bubble{padding:11px 14px; border-radius:10px; white-space:pre-wrap; word-wrap:break-word}
.msg.user .bubble{background:var(--sunk)}
.msg.assistant .bubble{background:var(--accent-soft); color:var(--accent-ink)}
.chat .composer{border-top:1px solid var(--line); padding:14px; background:var(--card); border-radius:0 0 var(--r) var(--r)}
.chat .composer textarea{min-height:76px; margin-bottom:10px}

.stage{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.stage .bar{display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line); flex-wrap:wrap; background:var(--card)}
.stage .bar .sp{flex:1}
.frame{width:100%; height:calc(100vh - 190px); min-height:460px; border:0; display:block; background:#fff}
.empty{padding:60px 24px; text-align:center; color:var(--ink-2)}
.spinner{width:26px; height:26px; border:2.5px solid var(--line-2); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 16px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}

/* ---------- таблицы (инженер) ---------- */
.tw{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--card)}
table{border-collapse:collapse; width:100%; font-size:14px; min-width:640px}
th{text-align:left; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600; padding:11px 13px; border-bottom:1px solid var(--line-2); white-space:nowrap}
td{padding:11px 13px; border-bottom:1px solid var(--line); vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--sunk)}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums; font-family:ui-monospace,Menlo,monospace; font-size:13px; white-space:nowrap}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:20px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px}
.stat dt{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.stat dd{margin:0; font-size:24px; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
details.tech{border:1px solid var(--line); border-radius:8px; margin-bottom:10px; background:var(--card)}
details.tech>summary{padding:11px 14px; cursor:pointer; font-size:14px; font-weight:500; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
details.tech>summary::-webkit-details-marker{display:none}
details.tech>summary:before{content:"▸"; color:var(--ink-3)}
details.tech[open]>summary:before{content:"▾"}
details.tech pre{margin:0; padding:14px; background:#12181a; color:#cfd8d6; overflow-x:auto; font-size:12.4px; line-height:1.6; border-radius:0 0 8px 8px; white-space:pre-wrap; word-break:break-word; max-height:420px; overflow-y:auto}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.between{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px}

/* ---------- вложения пользователя ---------- */
.files{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.file{
  display:flex; flex-direction:column; gap:4px; width:104px; padding:7px;
  border:1px solid var(--line); border-radius:8px; background:var(--card);
  text-decoration:none; color:var(--ink); font-size:11.5px; line-height:1.3;
}
.file:hover{border-color:var(--accent)}
.file img{width:100%; height:70px; object-fit:cover; border-radius:5px; display:block; background:var(--sunk)}
.file .ext{
  display:flex; align-items:center; justify-content:center; height:70px; border-radius:5px;
  background:var(--sunk); color:var(--ink-2); font-weight:600; letter-spacing:.04em; font-size:12px;
}
.file .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.file .sz{color:var(--ink-3); font-size:10.5px}

/* ---------- индикатор загрузки предпросмотра ---------- */
.stageBody{position:relative}
.loader{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:var(--card); color:var(--ink-2);
}
/* hidden сам по себе не переборет display:flex — гасим явно */
.loader[hidden]{display:none}
.loader p{margin:0}

/* ---------- страница во всю ширину (посадочная) ---------- */
.wrap.bare{max-width:none; padding:0}
.topbar.floating{background:transparent; border-bottom:0; position:absolute; left:0; right:0}