/* ════════════════════════════════════════════════════════════
   CREW — DESIGN TOKENS (Sharp Whitespace)
   Источник правды — Design System.html. Скопировано в проект.
   ════════════════════════════════════════════════════════════ */
:root{
  /* — Surfaces & ink — */
  --bg:            #F7F6F2;
  --surface:       #FFFFFF;
  --ink:           #15181F;
  --ink-soft:      #3A3C42;
  --muted:         #80847D;
  --hairline:      #E3E1D8;
  --hairline-faint:#EEEDE6;

  /* — Accent pairs (fg + tint) — */
  --blue:     #3F6FA8;  --blue-tint:     #DBEAFE;
  --mint:     #2F6E4A;  --mint-tint:     #DCFCE7;
  --peach:    #B86A36;  --peach-tint:    #FED7AA;
  --rose:     #B25B5B;  --rose-tint:     #FECACA;
  --sky:      #4D70A6;  --sky-tint:      #DBEAFE;
  --lavender: #7257A6;  --lavender-tint: #EDE3FA;

  /* — Brand — */
  --brand-deep: #16284D;
  --brand-navy: #0A1F3D;
  --brand-cream:#F5F2EA;

  /* — Radius — */
  --r-sm: 4px;
  --r-md: 6px;
  --r-pill: 999px;

  /* — Type — */
  --font-ui:    'Inter', system-ui, sans-serif;
  --font-brand: 'Manrope', 'Inter', sans-serif;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--bg);
  font-family: var(--font-ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 0;
}

/* ─────────── Layout shell ─────────── */
.shell{ display:grid; grid-template-columns: 232px 1fr; min-height:100vh; }

.nav{
  position: sticky; top:0; align-self:start; height:100vh;
  border-right: 1px solid var(--hairline-faint);
  padding: 30px 22px; display:flex; flex-direction:column; gap:26px;
  background: var(--bg); overflow-y:auto;
}
.nav-brand{ display:flex; align-items:center; gap:9px; }
.nav-word{ font-family: var(--font-brand); font-size:22px; font-weight:800; line-height:1; color: var(--brand-navy); letter-spacing:-0.6px; }
.nav-group-label{
  font-size:10px; color:var(--muted); font-weight:500;
  text-transform:uppercase; letter-spacing:1.5px; margin-bottom:10px;
}
.nav-section{ display:flex; flex-direction:column; }
.nav a{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--muted);
  font-size:13px; padding:9px 2px; border-top:1px solid var(--hairline-faint);
  transition: color .12s; cursor:pointer;
}
.nav a:first-of-type{ border-top:none; }
.nav a:hover{ color:var(--ink); }
.nav a.on{ color:var(--ink); font-weight:600; }
.nav a .ico{ width:5px; height:5px; border-radius:var(--r-pill); background:var(--hairline); flex:none; }
.nav a.on .ico{ background:var(--lavender); }
.nav-spacer{ flex:1; }
.nav-user{ display:flex; align-items:center; gap:10px; border-top:1px solid var(--hairline-faint); padding-top:18px; }
.nav-user .who{ min-width:0; }
.nav-user .who .e{ font-size:12px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-user .who .logout{ font-size:11px; color:var(--muted); cursor:pointer; }
.nav-user .who .logout:hover{ color:var(--rose); }

/* ─────────── Content ─────────── */
.content{ overflow:hidden; }
.wrap{ max-width: 1080px; margin:0 auto; padding: 0 60px; }

.page-head{ padding: 60px 0 28px; }
.page-head .eyebrow{
  font-size:11px; color:var(--muted); font-weight:500;
  text-transform:uppercase; letter-spacing:1.6px; margin-bottom:14px;
}
.page-head h1{ margin:0; font-size:40px; font-weight:400; letter-spacing:-1.1px; line-height:1.1; }
.page-head h1 b{ font-weight:600; }
.page-head p{ margin:14px 0 0; font-size:15px; line-height:1.6; color:var(--ink-soft); max-width:620px; text-wrap:pretty; }

/* Subheading / divider with label */
.sub{
  font-size:10.5px; color:var(--muted); font-weight:500;
  text-transform:uppercase; letter-spacing:2px; margin:0 0 16px;
  display:flex; align-items:center; gap:10px;
}
.sub::after{ content:""; flex:1; height:1px; background:var(--hairline-faint); }
.sub .strong{ color:var(--ink); }
.divider-label{
  font-size:10.5px; font-weight:500; text-transform:uppercase; letter-spacing:2px;
  display:flex; align-items:center; gap:10px; margin:36px 0 18px;
}
.divider-label .strong{ color:var(--ink); }
.divider-label .line{ flex:1; height:1px; background:var(--hairline); }
.divider-label .note{ color:var(--muted); text-transform:none; letter-spacing:0; font-size:11.5px; }

.lead{ font-size:15px; line-height:1.65; color:var(--ink-soft); max-width:640px; text-wrap:pretty; margin:0 0 28px; }
.section-gap{ padding-bottom:48px; }

/* ─────────── Cards ─────────── */
.card{
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-sm); padding:24px 28px;
}
.grid-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
@media (max-width:1080px){ .grid-cards{ grid-template-columns: repeat(2,1fr); } }

/* Agent card */
.agent-card{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-sm); padding:20px 22px; display:flex; flex-direction:column; }
.agent-card.disabled{ opacity:.6; }
.agent-card.clickable{ cursor:pointer; transition:border-color .12s; }
.agent-card.clickable:hover{ border-color:var(--ink); }
.agent-card .top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.agent-card .ico{ font-size:26px; line-height:1; }
.agent-card .cat{ font-size:10px; color:var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:1.5px; margin:14px 0 6px; }
.agent-card h3{ margin:0; font-size:16px; font-weight:600; letter-spacing:-0.2px; }
.agent-card p{ margin:6px 0 0; font-size:13px; line-height:1.5; color:var(--ink-soft); flex:1; }
.agent-card .foot{ margin-top:16px; }
.agent-card .conn{ margin-top:14px; font-size:11.5px; display:flex; align-items:center; gap:7px; color:var(--muted); }

/* ─────────── Buttons ─────────── */
.btn{ font-family:inherit; cursor:pointer; border-radius:var(--r-sm); font-weight:500; }
.btn-primary{ background:var(--ink); color:#fff; border:1px solid var(--ink); padding:9px 15px; font-size:12.5px; }
.btn-primary:hover{ background:#000; }
.btn-primary:disabled{ background:var(--hairline); border-color:var(--hairline); color:var(--muted); cursor:not-allowed; }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--hairline); padding:9px 15px; font-size:12.5px; }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-ghost:disabled{ color:var(--muted); cursor:not-allowed; }
.btn-ghost:disabled:hover{ border-color:var(--hairline); }
.btn-ghost-sm{ background:transparent; color:var(--ink-soft); border:1px solid var(--hairline); padding:6px 11px; font-size:11.5px; }
.btn-ghost-sm:hover{ border-color:var(--ink); }
.btn-block{ width:100%; text-align:center; }
.btn-icon{ display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.kbd{ font-size:9.5px; padding:1px 5px; background:rgba(255,255,255,.15); border-radius:3px; }
.link-action{ background:none; border:none; padding:0; font-family:inherit; cursor:pointer; font-size:12px; font-weight:500; color:var(--lavender); }
.link-action:hover{ color:var(--ink); }

/* ─────────── Badges ─────────── */
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:1.5px; padding:3px 8px; border-radius:var(--r-sm); }
.badge .dot{ width:4px; height:4px; border-radius:var(--r-pill); }
.badge.blue{ background:var(--blue-tint); color:var(--blue); }
.badge.mint{ background:var(--mint-tint); color:var(--mint); }
.badge.peach{ background:var(--peach-tint); color:var(--peach); }
.badge.rose{ background:var(--rose-tint); color:var(--rose); }
.badge.lavender{ background:var(--lavender-tint); color:var(--lavender); }
.badge.muted{ background:var(--bg); color:var(--muted); }
.dot{ width:5px; height:5px; border-radius:var(--r-pill); display:inline-block; }
.dot.mint{ background:var(--mint); } .dot.peach{ background:var(--peach); }
.dot.rose{ background:var(--rose); } .dot.blue{ background:var(--blue); }
.dot.lavender{ background:var(--lavender); } .dot.muted{ background:var(--muted); }

/* ─────────── Tabs ─────────── */
.tabs{ display:inline-flex; gap:4px; padding:3px; background:var(--bg);
  border-radius:var(--r-md); border:1px solid var(--hairline-faint); }
.tabs span{ padding:6px 13px; border-radius:var(--r-sm); font-size:12px; font-weight:500; cursor:pointer; color:var(--muted); border:1px solid transparent; }
.tabs span.on{ background:var(--surface); color:var(--ink); border-color:var(--hairline); }

/* ─────────── Pills ─────────── */
.pill{ font-size:11.5px; color:var(--ink-soft); background:var(--surface);
  border:1px solid var(--hairline); padding:5px 11px; border-radius:var(--r-pill); cursor:pointer; }

/* ─────────── Inputs ─────────── */
.field-label{ font-size:11px; color:var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:8px; display:block; }
.field-box{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-sm); padding:11px 14px; }
.field-box:focus-within{ border-color:var(--ink); }
.field-box .ph{ flex:1; font-size:14px; color:var(--muted); }
.input{ width:100%; font-family:inherit; font-size:14px; color:var(--ink); background:var(--surface);
  border:1px solid var(--hairline); border-radius:var(--r-sm); padding:11px 14px; outline:none; }
.input::placeholder{ color:var(--muted); }
.input:focus{ border-color:var(--ink); }
.input.mono{ font-family:ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size:12.5px; }
.input.bare{ border:none; background:transparent; padding:0; }
.input-flush{ flex:1; font-family:inherit; font-size:14px; color:var(--ink); background:transparent; border:none; outline:none; }
.input-flush::placeholder{ color:var(--muted); }
select.input{ -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2380847D' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:34px; }
select.input:disabled{ background-color:var(--bg); color:var(--muted); }
textarea.input{ resize:vertical; line-height:1.6; min-height:64px; }
/* Поля настроек агента, скрытые по условию showIf (инлайновый display иначе перебьёт [hidden]) */
.set-field[hidden]{ display:none !important; }

/* Search box */
.search-box{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-sm); padding:11px 14px; }
.search-box:focus-within{ border-color:var(--ink); }
.search-box svg{ flex:none; color:var(--muted); }

/* Checkbox / switch */
.switch{ position:relative; display:inline-block; width:42px; height:24px; flex:none; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; cursor:pointer; inset:0; background:var(--hairline); transition:.18s; border-radius:var(--r-pill); }
.slider:before{ content:""; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:#fff; transition:.18s; border-radius:50%; }
input:checked + .slider{ background:var(--mint); }
input:checked + .slider:before{ transform:translateX(18px); }

/* ─────────── Avatar ─────────── */
.avatar{ width:30px; height:30px; border-radius:var(--r-sm); font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; flex:none; }

/* ─────────── Callout ─────────── */
.callout{ position:relative; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-sm); padding:22px 26px; }
.callout .bar{ position:absolute; left:0; top:22px; bottom:22px; width:3px; background:var(--lavender); }
.callout .lab{ font-size:10.5px; color:var(--lavender); font-weight:600; text-transform:uppercase; letter-spacing:2px; margin-bottom:10px; }
.callout p{ margin:0; font-size:17px; line-height:1.6; color:var(--ink); text-wrap:pretty; }

/* ─────────── Numerals / stats ─────────── */
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--hairline); border-radius:var(--r-sm); overflow:hidden; background:var(--surface); }
.stat-row.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:760px){ .stat-row, .stat-row.cols-3{ grid-template-columns:repeat(2,1fr); } }
.stat{ padding:22px 24px; border-right:1px solid var(--hairline-faint); border-bottom:1px solid var(--hairline-faint); }
.stat .v{ font-size:40px; font-weight:300; letter-spacing:-1px; line-height:1; font-variant-numeric:tabular-nums; color:var(--ink); }
.stat .v .u{ font-size:15px; color:var(--muted); margin-left:4px; }
.stat .l{ font-size:10.5px; color:var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:1.5px; margin-top:12px; }
.stat .n{ font-size:11.5px; color:var(--muted); margin-top:5px; font-variant-numeric:tabular-nums; }

/* ─────────── Карточка агента «Подробнее» ─────────── */
.det-cat{ font-size:10.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:1.6px; }
.det-title{ font-size:21px; font-weight:600; letter-spacing:-0.3px; margin-top:5px; color:var(--ink); }
.det-lead{ font-size:16px; line-height:1.65; color:var(--ink-soft); margin:0 0 22px; text-wrap:pretty; }
.det-sec{ margin-bottom:34px; }
.det-sec:last-of-type{ margin-bottom:12px; }
.det-sec .demo-block:last-child{ margin-bottom:0; }
.det-list, .det-steps{ margin:16px 0 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.det-list li{ position:relative; padding-left:20px; font-size:14px; line-height:1.65; color:var(--ink-soft); text-wrap:pretty; }
.det-list li::before{ content:''; position:absolute; left:2px; top:9px; width:5px; height:5px; border-radius:50%; background:var(--hairline); }
.det-list.check li::before{ content:'✓'; left:0; top:0; width:auto; height:auto; background:none; color:var(--mint); font-size:12px; font-weight:700; }
.det-steps{ counter-reset:step; }
.det-steps li{ position:relative; padding-left:32px; font-size:14px; line-height:1.65; color:var(--ink-soft); text-wrap:pretty; counter-increment:step; }
.det-steps li::before{
  content:counter(step); position:absolute; left:0; top:1px;
  width:21px; height:21px; border-radius:50%; border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-variant-numeric:tabular-nums; color:var(--muted); background:var(--surface);
}
.det-foot{ border-top:1px solid var(--hairline); padding-top:24px; }
.det-note{ font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:14px; }
.det-sub{ font-size:11.5px; color:var(--muted); text-align:center; margin-top:12px; }
.btn-lg{ padding:14px 22px; font-size:14px; }

/* ─────────── Демо-визуализация метрик ─────────── */
/* Одна серия — один тон (lavender, акцент работы агентов).
   Значение кодирует длина марки, не цвет. */
.demo-block{ margin-bottom:26px; }
.demo-lab{ font-size:10.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:14px; }
.demo-chart{
  display:flex; align-items:flex-end; gap:2px;   /* 2px — зазор поверхности между марками */
  height:132px; padding:18px 2px 0;
  border-bottom:1px solid var(--hairline);
}
.dc-col{ flex:1; height:100%; display:flex; align-items:flex-end; justify-content:center; }
.dc-bar{
  position:relative; width:100%; max-width:24px;  /* марка остаётся тонкой на широком экране */
  background:var(--lavender);
  border-radius:3px 3px 0 0;                      /* скруглён только конец данных */
  min-height:2px; transition:opacity .12s;
}
.dc-bar.zero{ background:var(--hairline); height:2px !important; }
.dc-col:hover .dc-bar{ opacity:.72; }
.dc-peak{
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:6px;
  font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap;
}
.dc-tip{
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:6px;
  background:var(--ink); color:#fff; font-size:11px; font-variant-numeric:tabular-nums;
  padding:4px 8px; border-radius:var(--r-sm); white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .12s; z-index:2;
}
.dc-col:hover .dc-tip{ opacity:1; }
.dc-col:hover .dc-peak{ opacity:0; }
.demo-axis{ display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:8px; }

.demo-rows{ display:flex; flex-direction:column; gap:10px; }
.demo-row{ display:grid; grid-template-columns:minmax(120px,1fr) 2.2fr auto; align-items:center; gap:14px; }
.demo-row .nm{ font-size:13px; color:var(--ink-soft); }
.demo-row .track{ height:10px; background:var(--hairline-faint); border-radius:var(--r-sm); overflow:hidden; }
.demo-row .fill{ display:block; height:100%; background:var(--lavender); border-radius:var(--r-sm); }
.demo-row .vl{ font-size:13px; font-variant-numeric:tabular-nums; color:var(--ink); min-width:34px; text-align:right; }

@media (max-width:640px){
  .demo-row{ grid-template-columns:1fr auto; }
  .demo-row .track{ grid-column:1 / -1; order:3; }
}

/* Meta row */
.meta-row{ display:flex; gap:22px; font-size:12.5px; font-variant-numeric:tabular-nums; flex-wrap:wrap; }
.meta-item{ display:inline-flex; align-items:baseline; gap:6px; }
.meta-item .dot{ align-self:center; }
.meta-item b{ color:var(--ink); font-weight:600; } .meta-item .ml{ color:var(--muted); }

/* Bar chart (inline) */
.chart{ display:flex; align-items:flex-end; gap:6px; height:140px; padding-top:8px; }
.chart .col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; justify-content:flex-end; height:100%; }
.chart .bar{ width:100%; max-width:34px; background:var(--lavender-tint); border-radius:2px 2px 0 0; min-height:2px; }
.chart .bar.has{ background:var(--lavender); }
.chart .cl{ font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ─────────── Log rows (История) ─────────── */
.log-list{ border-top:1px solid var(--hairline-faint); }
.log-row{ display:grid; grid-template-columns:64px 96px 1fr; gap:16px; align-items:start; padding:13px 2px; border-bottom:1px solid var(--hairline-faint); }
.log-row .time{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; padding-top:2px; }
.log-row .agent{ font-size:11.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-top:2px; }
.log-row .body{ min-width:0; }
.log-row .body .msg{ font-size:13.5px; line-height:1.5; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.log-row .body .detail{ margin-top:8px; }
.log-day{ font-size:10.5px; font-weight:500; text-transform:uppercase; letter-spacing:2px; color:var(--ink); display:flex; align-items:center; gap:10px; margin:28px 0 6px; }
.log-day .line{ flex:1; height:1px; background:var(--hairline); }

.code{ font-family:ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size:11.5px; color:var(--ink-soft); background:var(--bg);
  border:1px solid var(--hairline-faint); border-radius:var(--r-sm); padding:10px 12px;
  font-variant-numeric:tabular-nums; line-height:1.6; white-space:pre-wrap; word-break:break-word; overflow-x:auto; }

/* Empty state */
.empty{ border:1px dashed var(--hairline); border-radius:var(--r-sm); padding:48px 28px; text-align:center; }
.empty .t{ font-size:15px; color:var(--ink); margin-bottom:6px; }
.empty .s{ font-size:13px; color:var(--muted); }

/* ─────────── Auth screen ─────────── */
.auth{ display:grid; grid-template-columns:1fr 1fr; min-height:100vh; }
@media (max-width:880px){ .auth{ grid-template-columns:1fr; } .auth .promo{ display:none; } }
.auth .promo{ background:var(--brand-deep); color:#fff; padding:48px; display:flex; flex-direction:column; justify-content:space-between; }
.auth .promo .word{ font-family:var(--font-brand); font-size:24px; font-weight:800; letter-spacing:-0.6px; color:#fff; }
.auth .promo h1{ font-size:34px; font-weight:400; line-height:1.15; letter-spacing:-0.8px; margin:0 0 18px; }
.auth .promo h1 b{ font-weight:600; }
.auth .promo p{ font-size:15px; line-height:1.6; color:rgba(245,242,234,.75); max-width:380px; margin:0 0 28px; }
.auth .promo ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.auth .promo li{ font-size:14px; color:rgba(245,242,234,.85); display:flex; align-items:center; gap:10px; }
.auth .promo li .ck{ color:#9FE0B8; }
.auth .promo .foot{ font-size:12px; color:rgba(245,242,234,.5); }
.auth .form-side{ display:flex; align-items:center; justify-content:center; padding:32px; }
.auth .form-box{ width:100%; max-width:340px; }
.auth .form-box .word{ font-family:var(--font-brand); font-size:22px; font-weight:800; color:var(--brand-navy); letter-spacing:-0.6px; margin-bottom:28px; }
.auth .form-box h2{ font-size:22px; font-weight:600; letter-spacing:-0.4px; margin:0 0 6px; }
.auth .form-box .hint{ font-size:13px; color:var(--muted); margin:0 0 24px; }
.auth .form-box form{ display:flex; flex-direction:column; gap:16px; }
.auth .form-box .switch-link{ font-size:13px; color:var(--muted); text-align:center; margin-top:20px; }
.auth .form-box .switch-link a{ color:var(--ink); font-weight:600; cursor:pointer; text-decoration:none; }

/* ─────────── Modal ─────────── */
.modal-backdrop{ position:fixed; inset:0; z-index:40; background:rgba(21,24,31,.32); backdrop-filter:blur(2px); display:flex; align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto; }
.modal{ background:var(--bg); width:100%; max-width:720px; border:1px solid var(--hairline); border-radius:var(--r-sm); display:flex; flex-direction:column; }
.modal.modal-wide{ max-width:780px; }
.modal-head{ background:var(--surface); border-bottom:1px solid var(--hairline); padding:18px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-radius:var(--r-sm) var(--r-sm) 0 0; }
.modal-head .who{ display:flex; align-items:center; gap:12px; min-width:0; }
.modal-head .who .ico{ font-size:22px; }
.modal-head .name-input{ font-size:17px; font-weight:600; letter-spacing:-0.3px; color:var(--ink); background:transparent; border:none; border-bottom:1px solid transparent; outline:none; padding:1px 2px; margin-left:-2px; }
.modal-head .name-input:hover{ border-bottom-color:var(--hairline); }
.modal-head .name-input:focus{ border-bottom-color:var(--ink); }
.modal-head .sub-t{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.modal-close{ background:none; border:none; font-size:24px; line-height:1; color:var(--muted); cursor:pointer; }
.modal-close:hover{ color:var(--ink); }
.modal-body{ padding:24px; display:flex; flex-direction:column; gap:18px; }
.modal-block{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-sm); padding:20px 22px; }
.modal-block h3{ margin:0 0 14px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; }
.setup-step{ display:grid; grid-template-columns:28px 1fr; gap:12px; padding:14px 0; border-top:1px solid var(--hairline-faint); }
.setup-step:first-of-type{ border-top:none; padding-top:0; }
.step-n{ font-size:13px; font-weight:600; color:var(--lavender); font-variant-numeric:tabular-nums; }
.step-n.done{ width:20px; height:20px; border-radius:var(--r-pill); background:var(--mint); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; }
.step-n.todo{ width:20px; height:20px; border-radius:var(--r-pill); background:var(--hairline); color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:11px; }
.setup-step .st{ font-size:13px; font-weight:600; }
.setup-step .sd{ font-size:11.5px; color:var(--muted); line-height:1.5; margin:3px 0 8px; }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .row-2{ grid-template-columns:1fr; } }
.modal-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:4px; }
details.modal-block summary{ cursor:pointer; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; list-style:none; }
details.modal-block summary::-webkit-details-marker{ display:none; }
details.modal-block[open] summary{ margin-bottom:14px; }
.with-btn{ display:flex; gap:8px; }
.with-btn .input{ flex:1; }

/* ─────────── Toast ─────────── */
#toast{ position:fixed; bottom:24px; right:24px; z-index:50; display:flex; flex-direction:column; gap:8px; }
.toast{ font-size:13px; padding:11px 16px; border-radius:var(--r-sm); color:#fff; border:1px solid transparent; animation:toastIn .2s ease; }
.toast.success{ background:var(--mint); }
.toast.error{ background:var(--rose); }
.toast.info{ background:var(--ink); }
@keyframes toastIn { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }

.fade-in{ animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

.log-scroll::-webkit-scrollbar{ width:8px; }
.log-scroll::-webkit-scrollbar-thumb{ background:var(--hairline); border-radius:4px; }

/* ─────────── Responsive shell ─────────── */
@media (max-width:900px){
  .shell{ grid-template-columns:1fr; }
  .nav{ position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:14px; }
  .nav-section{ flex-direction:row; flex-wrap:wrap; gap:6px; }
  .nav a{ border-top:none; padding:6px 10px; border:1px solid var(--hairline-faint); border-radius:var(--r-sm); }
  .nav-spacer{ display:none; }
  .nav-group-label{ display:none; }
  .nav-user{ border-top:none; padding-top:0; }
  .wrap{ padding:0 24px; }
  .page-head{ padding:32px 0 24px; }
  .page-head h1{ font-size:30px; }
}