/* КиберПетя - дизайн-система (солидный + акцент-маскот; светлая/авто-тёмная).
   Один файл, ноль сборки. Принципы apple-design: мгновенный отклик, глубина
   материалами, размерная типографика, экономный акцент. */

/* ── переменные ── */
:root {
  --red: #E4322B; --red-ink: #B8261F; --red-soft: #FCE9E7;
  --amber: #F5A623; --amber-soft: #FEF3E0;
  --green: #2E9E5B; --green-soft: #E6F4EC;
  --bg: #F6F5F2; --surface: #FFFFFF; --surface-2: #FBFAF7;
  --text: #1A1A17; --muted: #6E6A60; --border: #E7E4DC; --border-strong: #D8D4C8;
  --shadow-sm: 0 1px 2px rgba(30,25,10,.06), 0 1px 3px rgba(30,25,10,.05);
  --shadow-md: 0 2px 8px rgba(30,25,10,.08), 0 8px 24px rgba(30,25,10,.06);
  --shadow-lg: 0 4px 16px rgba(30,25,10,.10), 0 20px 48px rgba(30,25,10,.10);
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-pill: 999px;
  --gap: 1rem; --pad: 1.25rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --maxw: 60rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --red: #FF5A50; --red-ink: #FF6B62; --red-soft: #3A211E;
    --amber: #FFB84D; --amber-soft: #3A2E17;
    --green: #4FBE7C; --green-soft: #1E3326;
    --bg: #14130E; --surface: #201E17; --surface-2: #1A1913;
    --text: #F1EFE7; --muted: #A29B8B; --border: #322F26; --border-strong: #423E32;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 4px 16px rgba(0,0,0,.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --red: #FF5A50; --red-ink: #FF6B62; --red-soft: #3A211E;
  --amber: #FFB84D; --amber-soft: #3A2E17;
  --green: #4FBE7C; --green-soft: #1E3326;
  --bg: #14130E; --surface: #201E17; --surface-2: #1A1913;
  --text: #F1EFE7; --muted: #A29B8B; --border: #322F26; --border-strong: #423E32;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 4px 16px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
}

/* ── reset ── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  line-height: 1.55; font-size: 16px; -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: var(--red-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* ── типографика (размерный трекинг/лидинг + вертикальный ритм) ── */
h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em; font-weight: 750; margin-bottom: .5rem; }
h2 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -.015em; font-weight: 700; margin-bottom: 1.25rem; }
h3 { font-size: 1.05rem; line-height: 1.25; letter-spacing: -.005em; font-weight: 650;
     color: var(--muted); text-transform: uppercase; font-size: .8rem; letter-spacing: .05em; margin: 2.25rem 0 1rem; }
small { font-size: .82rem; color: var(--muted); }
/* заголовки внутри flex/hero-контейнеров не должны раздвигать ряд */
.actions-row h2, .agent-hero h2, .login-card h1, .empty h2 { margin-bottom: 0; }

/* ── layout ── */
main.container { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

/* ── топбар (translucent) ── */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto; padding: .6rem 1.25rem;
  display: flex; align-items: center; gap: .75rem;
  flex-wrap: wrap; row-gap: .25rem; /* узкий экран: nav уходит на свою строку, а не наезжает на лого */
}
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 750; letter-spacing: -.02em; font-size: 1.1rem; color: var(--text); flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: 34px; }
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.topbar nav a { color: var(--muted); font-weight: 550; padding: .4rem .7rem; border-radius: var(--r-sm); font-size: .92rem; }
.topbar nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.topbar nav form { display: inline; }

/* ── кнопки ── */
button, .btn, [role="button"] {
  font-family: inherit; font-size: .94rem; font-weight: 600; line-height: 1.2;
  padding: .58rem 1.05rem; border-radius: var(--r-sm); border: 1px solid transparent;
  background: var(--red); color: #fff; cursor: pointer;
  transition: transform .1s ease-out, background .15s, box-shadow .15s, border-color .15s;
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
}
button:hover, .btn:hover, [role="button"]:hover { background: var(--red-ink); text-decoration: none; box-shadow: var(--shadow-sm); }
button:active, .btn:active, [role="button"]:active { transform: scale(.97); }
button:focus-visible, input:focus-visible, select:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px;
}
button.outline, a.outline {
  background: var(--surface); color: var(--text); border-color: var(--border-strong);
}
button.outline:hover, a.outline:hover { background: var(--surface-2); border-color: var(--muted); box-shadow: var(--shadow-sm); }
button.secondary, a.secondary {
  background: var(--surface-2); color: var(--muted); border-color: var(--border);
}
button.secondary:hover, a.secondary:hover { color: var(--text); background: var(--surface); }
button.contrast { background: var(--text); color: var(--surface); }
button.contrast:hover { opacity: .88; background: var(--text); }
button:disabled { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); cursor: not-allowed; transform: none; box-shadow: none; }

/* ── формы ── */
input, select, textarea {
  font-family: inherit; font-size: .95rem; width: 100%;
  padding: .6rem .8rem; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 6rem; resize: vertical; line-height: 1.5;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .86rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
input::placeholder, textarea::placeholder { color: var(--muted); }
/* вертикальный стек полей формы */
.form-stack { display: grid; gap: 1.5rem; }
.form-stack button { justify-self: start; }
.field { display: grid; gap: .45rem; grid-template-columns: minmax(0, 1fr); }
.field > label { font-weight: 600; font-size: .9rem; color: var(--text); }
.field > .hint { margin: .1rem 0 0; line-height: 1.45; }
textarea { width: 100%; }
label { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--muted); margin: .5rem 0; }
label input[type="checkbox"] { width: auto; }
form { margin: 0; }

/* ── карточки (article) ── */
article, .card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--pad); box-shadow: var(--shadow-sm); margin-bottom: var(--gap);
}
article header { border: 0; padding: 0; background: none; margin-bottom: .5rem;
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
article header strong { font-size: 1.02rem; font-weight: 650; }
article > form { margin-top: .8rem; }

/* ── плитки коннекторов (сетка) ── */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--gap); align-items: stretch; }
.tiles article { margin: 0; display: flex; flex-direction: column; }
.tiles article:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transition: box-shadow .15s, border-color .15s; }
.tiles article p { margin-bottom: .9rem; }
/* кнопка/форма прижаты к низу плитки, ряд кнопок выровнен между плитками */
.tiles article > form, .tiles article > button, .tiles article > .btn, .tiles article > a[role="button"] { margin-top: auto; }
/* подпись в плитке идёт ПОД своей кнопкой - так её видно как пояснение к
   действию. Раньше стоял order:-1 ради ровного низа кнопок в ряду, но
   оторванная подпись читается как чужая строка (прогон UI 26.07). */
.tiles article form .hint { display: block; margin: .45rem 0 0; font-size: .78rem; }
.tiles article form { display: flex; flex-direction: column; align-items: flex-start; }
.tiles article details { border: 0; background: none; padding: 0; margin: .6rem 0 0; }
.tiles article details summary { padding: 0; font-size: .78rem; }
.tiles article details form { margin-top: .5rem; }
/* хвостовая подпись канала («скоро») - тоже к низу плитки, не в середине */
.tiles article > p.hint:last-child { margin-top: auto; margin-bottom: 0; }
/* метка «источник · connected» всегда на своей строке под заголовком -
   единый вид вне зависимости от длины названия плитки */
.tiles article header small { flex-basis: 100%; }

/* код device-flow Power BI: крупно, моноширинно, с кнопкой копирования */
.devcode { display: flex; align-items: center; gap: .5rem; }
.devcode strong { font-size: 1.4rem; letter-spacing: .12em; font-family: ui-monospace, monospace; }
.devcode .copy { padding: .15rem .45rem; font-size: .95rem; line-height: 1;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
  border-radius: var(--r-sm, 6px); cursor: pointer; width: auto; }
.devcode .copy:hover { color: var(--text); border-color: var(--border-strong); }

/* ── статус-пилюли ── */
.pill, mark, del, em.status {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem; border-radius: var(--r-pill); font-size: .8rem; font-weight: 600;
  font-style: normal; text-decoration: none; background: var(--surface-2); color: var(--muted);
}
mark { background: var(--green-soft); color: var(--green); }
mark::before { content: "●"; font-size: .6rem; }
del { background: var(--surface-2); color: var(--muted); text-decoration: none; }
em.status, .pill.applying { background: var(--amber-soft); color: var(--amber); font-style: normal; }

/* ── таблицы ── */
/* обёртка: таблица шире экрана скроллится ВНУТРИ неё - страница не едет
   вбок и не «рвётся» на мобиле (скролл на body ломал sticky-топбар) */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--r); box-shadow: var(--shadow-sm); }
.table-wrap table { box-shadow: none; }
table { width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); }
th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 650; padding: .7rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--border); }
td { padding: .7rem 1rem; border-bottom: 1px solid var(--border); font-size: .92rem; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }

/* ── details ── */
details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: .3rem 1rem; margin-bottom: .75rem; }
details summary { cursor: pointer; padding: .6rem 0; font-weight: 600; font-size: .92rem; color: var(--muted); }
details[open] summary { color: var(--text); border-bottom: 1px solid var(--border); margin-bottom: .8rem; }
details form { padding-bottom: .8rem; display: grid; gap: .6rem; }

/* ── логин-витрина ── */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.25rem;
  background: radial-gradient(120% 90% at 50% -10%, var(--amber-soft), var(--bg) 55%); }
.login-card { width: 100%; max-width: 25rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 2.5rem 2rem; text-align: center; }
.login-card .hero { width: 132px; height: 132px; margin: 0 auto .5rem;
  filter: drop-shadow(0 8px 20px rgba(228,50,43,.18)); }
.login-card h1 { margin-bottom: .15rem; }
.login-card .tagline { color: var(--muted); margin-bottom: 1.6rem; font-size: .95rem; }
.login-card form { display: grid; gap: .7rem; text-align: left; }
.login-card button[type="submit"] { justify-content: center; padding: .7rem; font-size: 1rem; margin-top: .3rem; }
.form-error { background: var(--red-soft); color: var(--red-ink); padding: .6rem .8rem;
  border-radius: var(--r-sm); font-size: .88rem; text-align: center;
  margin-bottom: 1rem; /* воздух до первого поля формы */ }

/* ── карточка-герой агента (/my) ── */
.agent-hero { display: flex; align-items: center; gap: 1.1rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-md); margin-bottom: 1.5rem; }
.agent-hero .avatar { width: 76px; height: 76px; flex-shrink: 0;
  background: radial-gradient(circle at 50% 40%, var(--amber-soft), transparent 70%); border-radius: 50%; }
.agent-hero .meta { flex: 1; min-width: 0; }
.agent-hero .meta h2 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.agent-hero .meta .sub { color: var(--muted); font-size: .9rem; margin-top: .1rem; }
.agent-hero .actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
/* узкий экран: одна колонка, всё по левому краю - иначе заголовок по центру,
   аватар слева, кнопки узким столбиком справа (прогон UI 26.07, 390px) */
@media (max-width: 30rem) {
  .agent-hero { flex-direction: column; align-items: flex-start; gap: .8rem; padding: 1.1rem 1.15rem; }
  .agent-hero .avatar { width: 56px; height: 56px; }
  .agent-hero .actions { width: 100%; }
  .agent-hero .actions form, .agent-hero .actions a[role="button"] { flex: 1 1 auto; }
}

/* ── пустое состояние (Петя ждёт) ── */
.empty { text-align: center; padding: 3rem 1rem; }
.empty img { width: 120px; margin: 0 auto 1rem; opacity: .9; }
.empty h2 { margin-bottom: .4rem; }
.empty p { color: var(--muted); }

/* ── ряд действий ── */
.actions-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .5rem 0 1rem; }
.hint { color: var(--muted); font-size: .82rem; }
.backlink { display: inline-block; color: var(--muted); font-weight: 550; margin-bottom: 1rem; }

/* ── тема-тоггл ── */
.theme-toggle { background: none; border: 1px solid var(--border); color: var(--muted);
  padding: .4rem .6rem; border-radius: var(--r-sm); font-size: .95rem; }
.theme-toggle:hover { background: var(--surface-2); color: var(--text); border-color: var(--muted); }

code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85em;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: .1em .4em; }
pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 1rem; overflow-x: auto; font-family: ui-monospace, Menlo, monospace; font-size: .85rem; line-height: 1.5; }
pre code { background: none; border: 0; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  button:active, .btn:active { transform: none; }
}

/* Прополка bundled: имён под сотню, простыня в один столбец нечитаема */
.skill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.1rem .8rem;margin:.5rem 0 1rem}
.skill-grid label{margin:0;font-size:.9rem}

.skills-list{margin:0 0 1.4rem;padding-left:1.1rem}
.skills-list li{margin:.2rem 0}