/* «Я выбрал» — оформление по брендбуку.
   Палитра, шрифт и паттерн взяты из «Я выбрал брендбук.pdf». */
@import url('/fonts.css');

:root {
  /* из брендбука, раздел «Палитра» */
  --ink:        #0A2540;  /* фон тёмной темы и шрифт на светлой */
  --bg:         #F6F9FC;  /* фон светлой темы */
  --ink-2:      #ACD6FF;  /* шрифт второго порядка на тёмной теме */
  --wave-light: #D3E4F5;  /* волна на светлой теме */

  /* градиенты волн 1–3 */
  --g1-a: #FFBD31;  --g1-b: #FF5ED2;
  --g2-a: #65FFDA;  --g2-b: #1DAEFF;
  --g3-a: #808FFF;  --g3-b: #C364F7;

  /* производные для интерфейса */
  --card:   #FFFFFF;
  --line:   #DEE9F4;
  --muted:  #5B7A99;
  --accent: #1DAEFF;
  --accent-soft: #E8F6FF;
  --ok:      #12855A;
  --ok-soft: #E4F6EE;
  --warn:      #B26A00;
  --warn-soft: #FFF3E0;

  --radius: 18px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.5;          /* 150% — сплошной текст по брендбуку */
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── шапка ───────────────────────────────────────────────────────── */
header.top {
  background: rgba(246, 249, 252, .88);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.top .inner {
  max-width: 1120px; margin: 0 auto; padding: 12px 22px;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.top .logo { display: block; line-height: 0; }
.top .logo img { height: 30px; width: auto; display: block; }
.top .logo:hover { text-decoration: none; }
.top nav { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.top nav a {
  color: var(--muted); font-size: 15px; font-weight: 500;
  padding: 4px 0; border-bottom: 2px solid transparent;
}
.top nav a:hover { color: var(--ink); text-decoration: none; }
.top nav a.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }

/* на телефоне меню — лента с прокруткой, а не перенос на вторую строку */
@media (max-width: 720px) {
  .top .inner { gap: 12px; padding: 10px 16px; flex-wrap: nowrap; }
  .top .logo img { height: 26px; }
  .top nav {
    flex-wrap: nowrap; overflow-x: auto; gap: 16px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-left: auto; max-width: 62vw;
  }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { white-space: nowrap; font-size: 14.5px; }
  main { padding: 26px 16px 70px; }
}

main { max-width: 1120px; margin: 0 auto; padding: 40px 22px 90px; }
.narrow { max-width: 700px; }

/* ── типографика по брендбуку ────────────────────────────────────── */
h1 {
  font-size: clamp(30px, 4.6vw, 46px); font-weight: 800;
  line-height: 1.14; letter-spacing: -0.025em; margin: 0 0 14px;
}
h2 {
  font-size: 25px; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.02em; margin: 44px 0 16px;
}
h3 { font-size: 19px; font-weight: 700; line-height: 1.25; margin: 0 0 8px; letter-spacing: -0.01em; }
p.lead { font-size: 19px; color: var(--muted); font-weight: 500; margin: 0 0 30px; }
.muted { color: var(--muted); }
.small { font-size: 14.5px; }

/* приём брендбука: ключевые слова в заголовке — цветом */
.hl-1 { background: linear-gradient(90deg, var(--g1-a), var(--g1-b));
        -webkit-background-clip: text; background-clip: text; color: transparent; }
.hl-2 { background: linear-gradient(90deg, var(--g2-a), var(--g2-b));
        -webkit-background-clip: text; background-clip: text; color: transparent; }
.hl-3 { background: linear-gradient(90deg, var(--g3-a), var(--g3-b));
        -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── карточки ────────────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; margin-bottom: 16px;
}
.card.pad-lg { padding: 28px; }
.card.hover:hover { border-color: #C3DCF0; box-shadow: 0 6px 22px rgba(10,37,64,.06); }
.grid { display: grid; gap: 16px; }
.grid.two   { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ── герой с волной ──────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; border-radius: 26px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg) 100%);
  border: 1px solid var(--line); padding: 44px 40px 0; margin-bottom: 30px; }
.hero .wave { display: block; width: 100%; height: auto; margin: 26px -40px -2px; max-width: none;
  width: calc(100% + 80px); }
@media (max-width: 640px) { .hero { padding: 30px 22px 0; }
  .hero .wave { margin: 20px -22px -2px; width: calc(100% + 44px); } }

/* ── кнопки ──────────────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 12px;
  background: var(--ink); color: #fff; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em;
}
.btn:hover { text-decoration: none; opacity: .88; }
.btn.grad { background: linear-gradient(90deg, var(--g2-b), var(--g3-a)); }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn.ghost:hover { border-color: var(--accent); opacity: 1; }
.btn.sm { padding: 8px 15px; font-size: 14px; border-radius: 10px; }
.btn:disabled { opacity: .4; cursor: default; }

/* ── формы ───────────────────────────────────────────────────────── */
label { display: block; font-weight: 700; font-size: 15.5px; margin: 22px 0 7px; }
label .hint { display: block; font-weight: 400; color: var(--muted); font-size: 14.5px; margin-top: 3px; }
input[type=text], textarea, select {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 12px; font: inherit; font-size: 16px; background: #fff; color: var(--ink);
}
textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}

/* ── строки профиля ──────────────────────────────────────────────── */
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 200px 1fr; gap: 18px;
  padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.row .k { color: var(--muted); font-size: 14.5px; font-weight: 500; }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; gap: 3px; } }

/* ── метки ───────────────────────────────────────────────────────── */
.tag { display: inline-block; padding: 4px 12px; border-radius: 30px;
  font-size: 13.5px; font-weight: 700; margin: 0 6px 7px 0;
  background: var(--accent-soft); color: #0B6E9E; }
.tag.grey { background: #EDF2F8; color: var(--muted); }
.tag.ok   { background: var(--ok-soft);   color: var(--ok); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }

/* ── плашки ──────────────────────────────────────────────────────── */
.note { border-radius: var(--radius); padding: 16px 20px; font-size: 15.5px;
  margin-bottom: 22px; background: var(--accent-soft); color: #0B4F70;
  border-left: 4px solid var(--accent); }
.note.ok   { background: var(--ok-soft);   color: #0B5C3E; border-left-color: var(--ok); }
.note.warn { background: var(--warn-soft); color: #7A4900; border-left-color: #FFBD31; }

/* ── видео-визитка ───────────────────────────────────────────────── */
.video-box {
  background: var(--ink); border-radius: var(--radius); aspect-ratio: 9/16;
  max-width: 200px; display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); font-size: 13.5px; font-weight: 500;
  text-align: center; padding: 18px; line-height: 1.45;
}

/* ── чат ─────────────────────────────────────────────────────────── */
.msg { padding: 11px 16px; border-radius: 16px; margin-bottom: 9px; max-width: 78%; font-size: 15.5px; }
.msg.mine   { background: var(--accent-soft); margin-left: auto; border-bottom-right-radius: 5px; }
.msg.theirs { background: #EDF2F8; border-bottom-left-radius: 5px; }
.msg .who { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 3px; }

/* ── меню, сгруппированное по ролям ──────────────────────────────── */
.nav-group { display: inline-flex; align-items: center; gap: 14px;
  padding: 0 16px; border-left: 1px solid var(--line); }
.nav-group:first-child { border-left: 0; padding-left: 0; }
.nav-label { font-size: 11px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: #9FB6CC; }
@media (max-width: 720px) {
  .nav-group { gap: 12px; padding: 0 10px; }
  .nav-label { display: none; }
}

/* ── «кто вы» в прототипе ────────────────────────────────────────── */
.whobar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #EDF2F8; border-radius: 14px; padding: 10px 16px; margin-bottom: 26px; }
.whobar form { display: flex; gap: 8px; }
.whobar select { width: auto; padding: 6px 10px; font-size: 14.5px; font-weight: 700; border-radius: 9px; }

/* ── карточка с действиями справа ────────────────────────────────── */
.split { display: flex; gap: 18px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── таблица ─────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 700; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .05em; }

/* ── фильтры ─────────────────────────────────────────────────────── */
.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 24px; }
.filters label { margin: 0 0 5px; font-size: 13px; color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; }
.filters .f { flex: 1 1 175px; }

.big-num { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }

footer.bot { border-top: 1px solid var(--line); margin-top: 50px;
  padding: 24px; text-align: center; color: var(--muted); font-size: 14px; }

/* ── добавлено на этапе 0–4 ───────────────────────────────────────── */
.top .me { display: flex; align-items: center; gap: 10px; margin-left: 16px; }
.top nav { margin-left: auto; }
@media (max-width: 720px) {
  .top .me { margin-left: 8px; }
  .top .me .small { font-size: 13px; }
  .top .me span.muted { display: none; }
}

.radios { display: grid; gap: 10px; }
.radio { display: flex; align-items: center; gap: 10px; font-weight: 500;
  border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 15px;
  margin: 0; cursor: pointer; background: #fff; }
.radio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.radio input { width: auto; }
.check { display: flex; align-items: center; gap: 8px; text-transform: none;
  letter-spacing: 0; font-size: 14.5px; color: var(--ink); }
.check input { width: auto; }

/* заполненность анкеты */
.fill { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.fill-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.fill-bar { height: 9px; background: #E7EEF6; border-radius: 20px; overflow: hidden; }
.fill-bar i { display: block; height: 100%; border-radius: 20px;
  background: linear-gradient(90deg, var(--g2-a), var(--g2-b)); }

/* профиль стажёра */
.profile { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
@media (max-width: 760px) { .profile { grid-template-columns: 1fr; } }
.invite-box { background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; margin: 18px 0; }
.invite-box .split { align-items: center; gap: 10px; }

.nowrap { white-space: nowrap; }

details.complain { margin-top: 26px; }
details.complain summary { cursor: pointer; color: var(--muted); font-size: 14.5px; }
details.complain textarea { margin-top: 10px; min-height: 80px; }

/* воронка */
.funnel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.funnel-row { display: grid; grid-template-columns: 210px 1fr 60px; gap: 14px;
  align-items: center; padding: 7px 0; }
.funnel-row .fl { font-size: 15px; }
.funnel-row .fb { height: 12px; background: #EDF2F8; border-radius: 20px; overflow: hidden; }
.funnel-row .fb i { display: block; height: 100%; border-radius: 20px;
  background: linear-gradient(90deg, var(--g3-a), var(--g3-b)); }
.funnel-row .fn { text-align: right; font-weight: 800; }
@media (max-width: 620px) { .funnel-row { grid-template-columns: 1fr 50px; }
  .funnel-row .fb { grid-column: 1 / -1; } }

/* ── уведомления ──────────────────────────────────────────────────── */
.bell { position: relative; display: inline-flex; align-items: center; color: var(--muted); }
.bell:hover { color: var(--ink); }
.bell.has { color: var(--accent); }
.bell i { position: absolute; top: -6px; right: -9px; background: #FF5ED2; color: #fff;
  font-style: normal; font-size: 10.5px; font-weight: 800; line-height: 1;
  padding: 3px 5px; border-radius: 20px; }
.notif { display: block; background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 10px; color: var(--ink); }
.notif:hover { text-decoration: none; border-color: #C3DCF0; }
.notif.new { border-left-color: var(--accent); background: #FCFEFF; }
.notif-kind { font-size: 11.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); }
.notif-title { font-weight: 700; margin: 3px 0; }
.notif-body { font-size: 15px; color: var(--muted); }
.notif-date { font-size: 12.5px; color: #93AEC7; margin-top: 6px; }
.periods { margin: -18px 0 26px; display: flex; gap: 14px; align-items: center; font-size: 15px; }
.periods a { color: var(--muted); }
.periods a.on { color: var(--ink); font-weight: 700; }

/* ── шаги и результат ─────────────────────────────────────────────── */
.steps { list-style: none; display: flex; gap: 10px; padding: 0; margin: 0 0 26px; flex-wrap: wrap; }
.steps li { display: flex; align-items: center; gap: 9px; flex: 1 1 190px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; }
.steps li b { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%;
  background: #EDF2F8; color: var(--muted); display: grid; place-items: center;
  font-size: 13px; font-weight: 800; }
.steps li span { font-size: 14.5px; color: var(--muted); font-weight: 600; }
.steps li.now { border-color: var(--accent); }
.steps li.now b { background: linear-gradient(90deg, var(--g2-b), var(--g3-a)); color: #fff; }
.steps li.now span { color: var(--ink); }
.steps li.done b { background: var(--ok-soft); color: var(--ok); }
.steps li.done span { color: var(--ink); }

ul.plain { list-style: none; padding: 0; margin: 0 0 18px; }
ul.plain li { position: relative; padding-left: 26px; margin-bottom: 9px; font-size: 16px; }
ul.plain li::before { content: ""; position: absolute; left: 4px; top: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(90deg, var(--g2-a), var(--g2-b)); }

.win { background: linear-gradient(180deg, #fff, var(--bg)); border: 1px solid var(--line);
  border-radius: 24px; padding: 30px 28px; margin-bottom: 26px; }
.win-nums { display: flex; gap: 30px; flex-wrap: wrap; }
.win-nums div { display: flex; flex-direction: column; }
.win-nums b { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.win-nums span { font-size: 14px; color: var(--muted); }

/* ── как это работает ─────────────────────────────────────────────── */
.who-tag { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
ol.howto { list-style: none; counter-reset: h; padding: 0; margin: 0; }
ol.howto li { counter-increment: h; position: relative; padding-left: 42px; margin-bottom: 18px; }
ol.howto li::before { content: counter(h); position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--g2-b), var(--g3-a)); }
ol.howto li b { display: block; font-size: 16.5px; margin-bottom: 3px; }
ol.howto li span { display: block; font-size: 15px; color: var(--muted); line-height: 1.45; }
ol.howto.big li { margin-bottom: 22px; }

.demo-box { display: flex; gap: 18px; justify-content: space-between; align-items: center;
  flex-wrap: wrap; background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: 20px 24px; margin-top: 26px; }
.demo-box b { font-size: 17px; }
.demo-box .muted { color: var(--ink-2); }
.demo-box .btn { background: #fff; color: var(--ink); }
.demo-box .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }

.copy-row { display: flex; gap: 10px; margin: 10px 0 18px; }
.copy-row input { font-size: 15px; }
@media (max-width: 520px) { .copy-row { flex-direction: column; } }

/* ── запись видео ─────────────────────────────────────────────────── */
.vwrap { position: relative; max-width: 260px; margin-bottom: 14px; }
.vwrap video { width: 100%; aspect-ratio: 9/16; object-fit: cover;
  background: var(--ink); border-radius: var(--radius); display: block; }
.vtimer { position: absolute; left: 12px; right: 12px; bottom: 12px;
  background: rgba(10,37,64,.72); border-radius: 20px; padding: 7px 12px;
  display: flex; align-items: center; gap: 10px; }
.vtimer i { display: block; height: 4px; border-radius: 4px; flex: 1;
  background: linear-gradient(90deg, var(--g2-a), var(--g2-b)); width: 0; }
.vtimer span { color: #fff; font-size: 13px; font-weight: 700; }
video.video-box { width: 100%; max-width: 200px; aspect-ratio: 9/16;
  object-fit: cover; background: var(--ink); border-radius: var(--radius); display: block; }

/* ── опасные действия ─────────────────────────────────────────────── */
.card.danger { border-color: #F3D2D2; background: #FFFBFB; }
.btn.danger { background: #C43B3B; }
.btn.danger:hover { opacity: .88; }