:root{
  --bg:#0a0a0f;
  --card:#13131a;
  --card2:#1a1a23;
  --border:#26262f;
  --text:#e6e6ea;
  --muted:#8a8a96;
  --accent:#7c5cff;
  --green:#3ddc97;
  --red:#ff5470;
  --yellow:#ffb74d;
  --blue:#5cb9ff;
  --pink:#ff5fa8;
  --orange:#ff8a4b;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,Roboto,sans-serif;min-height:100vh;min-height:100dvh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
input,button{font-family:inherit}

/* Shell — body scrolls (для sticky header) */
.app{min-height:100vh;min-height:100dvh}
.app-body{padding:6px 14px calc(env(safe-area-inset-bottom,0) + 86px)}

/* Header — sticky внутри окна */
.app-head{
  position:sticky;top:0;background:var(--bg);z-index:30;
  padding:max(env(safe-area-inset-top,0), 8px) 18px 12px;
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
  border-bottom:1px solid transparent;
  transition:border-color .15s;
}
.app-head.scrolled{border-bottom-color:var(--border)}
.app-head h2{font-size:24px;font-weight:700;letter-spacing:-.3px}
.app-head .sub{color:var(--muted);font-size:13px;margin-top:2px}
.app-head .actions{display:flex;gap:8px}
.icon-btn{
  width:38px;height:38px;border-radius:50%;background:var(--card);
  display:flex;align-items:center;justify-content:center;color:var(--text);
  font-size:18px;border:1px solid var(--border);cursor:pointer;
}
.icon-btn:active{transform:scale(.96)}
.icon-btn.sm{width:32px;height:32px;font-size:15px}

/* Bottom nav */
.bnav{
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(15,15,21,.92);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--border);
  padding:8px 0 calc(env(safe-area-inset-bottom,0) + 8px);
  display:grid;grid-template-columns:repeat(4,1fr);
  z-index:50;
}
.bnav a{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--muted);font-size:11px;padding:6px 4px;
}
.bnav a.active{color:var(--accent)}
.bnav .ic{font-size:22px;line-height:1}

/* Stats */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:4px 0 16px}
.stat{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:10px;text-align:center}
.stat .num{font-size:18px;font-weight:700;color:var(--text)}
.stat .lbl{font-size:10px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.5px}

/* Filter chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding:6px 0 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  padding:7px 14px;border-radius:18px;background:var(--card);
  border:1px solid var(--border);color:var(--muted);font-size:13px;
  white-space:nowrap;flex-shrink:0;cursor:pointer;font-weight:500;
}
.chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Project card */
.proj{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:14px;margin-bottom:10px;display:flex;flex-direction:column;gap:8px;
}
.proj .top{display:flex;align-items:center;gap:10px}
.proj .icon{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;
}
.proj .title{flex:1;min-width:0}
.proj .name{font-weight:600;font-size:15px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj .meta{font-size:11px;color:var(--muted);margin-top:2px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.proj .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.proj .dot.ok{background:var(--green)}
.proj .dot.warn{background:var(--yellow)}
.proj .dot.bad{background:var(--red)}
.proj .dot.unk{background:#444}
.proj .desc{font-size:12px;color:#a0a0aa;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.proj .tags{display:flex;flex-wrap:wrap;gap:5px}
.proj .tag{font-size:10px;padding:3px 7px;background:rgba(124,92,255,.12);color:#b5a4ff;border-radius:6px;font-weight:500}

/* Category icon colors */
.cat-monitoring{background:#1e3a5f;color:#7fb6ff}
.cat-tools{background:#2d2643;color:#b5a4ff}
.cat-probivka{background:#3a2840;color:#ff8fcf}
.cat-telephony{background:#1e3f3a;color:#5ed4b9}
.cat-messaging{background:#3a2d1e;color:#ffb074}
.cat-browser{background:#1e2f4d;color:#7fbeff}
.cat-ai{background:#3a1e2d;color:#ff7f9f}
.cat-other{background:#2a2a35;color:#aaa}

/* Sessions */
.month-head{padding:10px 0 8px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-weight:600;display:flex;justify-content:space-between;align-items:flex-end}
.month-head .stats{font-size:11px;color:var(--accent);font-weight:500;letter-spacing:0;text-transform:none}
.sess{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:13px 14px;margin-bottom:8px;display:flex;flex-direction:column;gap:6px;
}
.sess.active{border-color:rgba(61,220,151,.4);background:linear-gradient(rgba(61,220,151,.04),rgba(61,220,151,.02)),var(--card)}
.sess .row1{display:flex;align-items:center;gap:8px}
.sess .badge{font-size:10px;padding:2px 7px;border-radius:5px;font-weight:600;text-transform:uppercase;flex-shrink:0}
.sess .badge.active{background:rgba(61,220,151,.18);color:var(--green)}
.sess .badge.done{background:rgba(124,92,255,.18);color:#b5a4ff}
.sess .badge.paused{background:rgba(255,183,77,.18);color:var(--yellow)}
.sess .title{flex:1;font-size:14px;font-weight:600;line-height:1.3;color:var(--text);min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sess .row2{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;align-items:center}
.sess-close{
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,84,112,.12);border:1px solid rgba(255,84,112,.25);
  color:var(--red);font-size:14px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;padding:0;line-height:1;
}
.sess-close:active{transform:scale(.92);background:rgba(255,84,112,.22)}
.sess-close:disabled{opacity:.5}
.sess .evt-icons{display:flex;gap:8px}

/* Terminal sessions */
.term-card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:14px;margin-bottom:10px;display:flex;align-items:center;gap:12px;
}
.term-card.pinned{border-color:rgba(124,92,255,.4);background:linear-gradient(rgba(124,92,255,.06),rgba(124,92,255,.02)),var(--card)}
.term-card .ic{
  width:48px;height:48px;border-radius:14px;background:#1f1f2a;
  display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;
}
.term-card.pinned .ic{background:linear-gradient(135deg,#7c5cff,#5b3fe6)}
.term-card .info{flex:1;min-width:0}
.term-card .nm{font-weight:600;font-size:15px;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term-card .nm .pin{font-size:11px;color:var(--accent);flex-shrink:0}
.term-card .mt{font-size:11px;color:var(--muted);margin-top:3px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.term-card .mt .model{padding:2px 7px;background:rgba(255,255,255,.05);border-radius:5px;font-weight:600;font-size:10px;text-transform:uppercase}
.term-card .arrow{color:var(--muted);font-size:18px}
.term-card .stt-ok{color:var(--green)}
.term-card .stt-run{color:var(--yellow)}
.term-card .stt-stop{color:var(--red)}

/* Chat — body-scroll */
.chat-shell{display:flex;flex-direction:column;padding:0 14px calc(env(safe-area-inset-bottom,0) + 70px + 56px);min-height:100vh;min-height:100dvh}
.chat-msg{padding:8px 12px;border-radius:14px;margin-bottom:8px;font-size:14px;line-height:1.4;max-width:88%;word-wrap:break-word;white-space:pre-wrap}
.chat-msg.user{background:rgba(124,92,255,.15);color:#d8ccff;margin-left:auto;border-bottom-right-radius:4px}
.chat-msg.assistant{background:var(--card);color:var(--text);border:1px solid var(--border);border-bottom-left-radius:4px}
.chat-msg.system{background:rgba(255,183,77,.1);color:var(--yellow);border:1px solid rgba(255,183,77,.2);font-size:12px;text-align:center;margin:8px auto}
.chat-msg.tool{background:rgba(92,185,255,.08);color:var(--blue);border:1px solid rgba(92,185,255,.2);font-size:12px;font-family:ui-monospace,Menlo,monospace}
.chat-msg code{background:rgba(255,255,255,.08);padding:1px 4px;border-radius:3px;font-family:ui-monospace,Menlo,monospace;font-size:.9em}
.chat-input{
  position:fixed;left:14px;right:14px;bottom:calc(env(safe-area-inset-bottom,0) + 72px);
  background:var(--card2);border:1px solid var(--border);border-radius:24px;
  padding:6px 6px 6px 16px;display:flex;align-items:center;gap:8px;z-index:6;
}
.chat-input input{flex:1;background:none;border:0;color:var(--text);font-size:14px;outline:0;padding:10px 0}
.chat-input button{width:38px;height:38px;border-radius:50%;background:var(--accent);border:0;color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.chat-input button:disabled{opacity:.5}

/* FAB */
.fab{
  position:fixed;right:18px;bottom:calc(env(safe-area-inset-bottom,0) + 86px);
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,#7c5cff,#5b3fe6);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:26px;border:0;cursor:pointer;
  box-shadow:0 8px 24px rgba(124,92,255,.4);
  z-index:7;
}

/* Login */
.login-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 28px;max-width:420px;margin:0 auto;width:100%}
.login-wrap h1{font-size:28px;font-weight:700;margin-bottom:8px}
.login-wrap .lp-sub{color:var(--muted);margin-bottom:28px;font-size:14px}
.login-wrap form{display:flex;flex-direction:column;gap:12px}
.login-wrap input{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;font-size:16px;color:var(--text);outline:0}
.login-wrap input:focus{border-color:var(--accent)}
.login-wrap button{background:var(--accent);border:0;color:#fff;border-radius:14px;padding:14px;font-size:16px;font-weight:600;cursor:pointer;margin-top:8px}
.login-wrap .err{color:var(--red);font-size:13px;text-align:center;margin-top:4px;min-height:18px}

/* Misc */
.empty{text-align:center;color:var(--muted);font-size:13px;padding:40px 20px;line-height:1.5}
.spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--muted);border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:flex;justify-content:center;padding:40px}

/* iOS WebApp tweaks */
@media (display-mode:standalone){
  .app-head{padding-top:max(env(safe-area-inset-top,12px), 14px)}
}