/* ── Слой «стиль Новикова» + цвета ролей + движение (v004) ── */
:root{
  --bg:#fbf7f5;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --pop:cubic-bezier(.34,1.56,.64,1);
  /* роли */
  --lead:#c47a12; --lead-ink:#8a5208; --lead-soft:#fdf2df; --lead-line:#f0d6a8;
  --exp:#b11802;  --exp-ink:#9a1503;  --exp-soft:#fdecea;  --exp-line:#f3c9c0;
  --obs:#6b46c1;  --obs-ink:#4c2f9a;  --obs-soft:#f1ecfc;  --obs-line:#d9ccf5;
  --staff:#1e8a68;--staff-ink:#11634a;--staff-soft:#e6f4ee;--staff-line:#c5e6d8;
}
body{font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg)}
.num,.prog b,.side-n{font-family:"Russo One","Manrope",sans-serif;font-weight:400;letter-spacing:.02em}

/* живой фон: белый центр, тёплые края, два медленных пятна */
.desk,.phone{position:relative;isolation:isolate;background:
  radial-gradient(60% 50% at 0% 0%,rgba(177,24,2,.13),transparent 70%),
  radial-gradient(55% 45% at 100% 0%,rgba(227,151,47,.16),transparent 70%),
  radial-gradient(55% 45% at 0% 100%,rgba(232,96,63,.11),transparent 70%),
  radial-gradient(60% 50% at 100% 100%,rgba(134,11,4,.10),transparent 70%),
  radial-gradient(70% 60% at 50% 45%,#fff 40%,transparent 80%),var(--bg)}
.desk::before,.desk::after,.phone::before,.phone::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(60px);pointer-events:none;width:58%;aspect-ratio:1}
.desk::before,.phone::before{background:rgba(208,38,15,.10);left:-18%;top:-12%;animation:drift1 26s ease-in-out infinite alternate}
.desk::after,.phone::after{background:rgba(227,151,47,.13);right:-16%;bottom:-14%;animation:drift2 28s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(18%,22%) scale(1.12)}}
@keyframes drift2{to{transform:translate(-20%,-16%) scale(1.08)}}
.top{background:rgba(255,255,255,.82);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid rgba(239,230,227,.9);position:relative;z-index:2}
.card{background:rgba(255,255,255,.92);border:1px solid var(--line);box-shadow:0 1px 0 rgba(29,21,23,.03),0 10px 30px -18px rgba(134,11,4,.25)}
.side{background:rgba(255,255,255,.88);border:1px solid var(--line)}

/* ромб — маркер */
.dia{display:inline-block;width:10px;height:10px;border-radius:3px;transform:rotate(45deg);background:var(--red);flex:none}
.sec-title{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.01em}
.sec-title::before{content:"";width:12px;height:12px;border-radius:3px;transform:rotate(45deg);background:linear-gradient(135deg,var(--red2),var(--deep))}
.kicker{font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:8px;margin-bottom:10px}
.kicker::before{content:"";width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:currentColor}
h1{font-weight:800;letter-spacing:-.02em;text-wrap:balance}
h1 em{font-style:normal;color:var(--red)}

/* роли: чип и кольцо цвета роли */
.role{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;padding:3px 10px 3px 8px;border-radius:999px;border:1px solid}
.role::before{content:"";width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:currentColor}
.r-lead{color:var(--lead-ink);background:var(--lead-soft);border-color:var(--lead-line)}
.r-exp{color:var(--exp-ink);background:var(--exp-soft);border-color:var(--exp-line)}
.r-obs{color:var(--obs-ink);background:var(--obs-soft);border-color:var(--obs-line)}
.p-role{margin-top:6px}

/* аватар с кольцом прогресса (как Apple Activity) */
.ring{position:relative;flex:none;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring .trk{stroke:var(--line)}
.ring .val{transition:stroke-dashoffset .6s var(--ease-out);stroke-linecap:round}
.ring .ava{border:0;margin:0}
.ring.lead .val{stroke:var(--lead)} .ring.exp .val{stroke:var(--exp)} .ring.obs .val{stroke:var(--obs)}
.ring.lead .ava{background:var(--lead-soft);color:var(--lead-ink)}
.ring.obs .ava{background:var(--obs-soft);color:var(--obs-ink)}
.ring.done::after{content:"✓";position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px #fff;animation:popin .35s var(--pop)}
.person .ring{width:96px;height:96px}
.person .ring .ava{width:80px;height:80px}
.side-i .ring{width:44px;height:44px}
.side-i .ring .ava{width:36px;height:36px;font-size:.78rem}

/* боковые шаги: ромб-узел с номером и рельса */
.side{padding:14px 12px}
.side-i{position:relative;transition:background .18s ease}
.side-i.cur{background:linear-gradient(90deg,var(--blush),rgba(253,236,234,0))}
.side-i.cur::before{content:"";position:absolute;left:-12px;top:12px;bottom:12px;width:3px;border-radius:3px;background:linear-gradient(var(--red2),var(--gold))}
.side-n{width:30px;height:30px;margin:7px;display:grid;place-items:center;flex:none;position:relative;color:var(--ink2);font-size:.8rem}
.side-n::before{content:"";position:absolute;inset:4px;border-radius:5px;transform:rotate(45deg);border:1.5px solid var(--line2);background:#fff;z-index:-1;transition:all .3s var(--ease-out)}
.side-i.cur .side-n,.side-i.ok .side-n{color:#fff}
.side-i.cur .side-n::before{background:linear-gradient(135deg,var(--red2),var(--deep));border-color:transparent}
.side-i.ok .side-n::before{background:var(--green);border-color:transparent}
.side-i small.r{display:block;font-size:.72rem;font-weight:700;margin-top:1px}
.side-i small.r.lead{color:var(--lead-ink)} .side-i small.r.exp{color:var(--exp-ink)} .side-i small.r.obs{color:var(--obs-ink)}

/* прогресс: Russo One + полоса с переливом и бегунком-ромбом */
.prog b{color:var(--red);font-size:1rem}
.bar{height:6px;background:var(--line);border-radius:999px;overflow:visible;position:relative;margin-bottom:18px}
.bar>i{position:relative;display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#860b04,#d0260f,#e3972f,#d0260f,#860b04);background-size:250% 100%;animation:shim 5s linear infinite;transition:width .5s var(--ease-io)}
.bar>i::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:3px;transform:rotate(45deg);background:var(--gold);box-shadow:0 0 0 4px rgba(227,151,47,.18)}
@keyframes shim{to{background-position:-250% 0}}

/* плитки: отклик на нажатие, «поп» галочки */
.tile{transition:background-color .16s ease,border-color .16s ease,box-shadow .2s ease,transform .14s var(--ease-out)}
.tile:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.tile:hover{border-color:var(--line2);box-shadow:0 6px 16px -12px rgba(134,11,4,.35)}}
.tile.on{background:var(--blush);border-color:var(--red);box-shadow:0 8px 20px -14px rgba(177,24,2,.55)}
.tile.pop .mk{animation:popin .32s var(--pop)}
.tile.pop{animation:press .3s var(--ease-out)}
@keyframes popin{from{transform:scale(.55)}to{transform:scale(1)}}
@keyframes press{0%{transform:scale(.985)}100%{transform:scale(1)}}
.tile.neg.on{background:#fff1ec;border-color:var(--coral)}
.tile.neg.on .mk{background:var(--coral);border-color:var(--coral)}
/* выбор человека — цвет его роли */
.tile.t-lead.on{background:var(--lead-soft);border-color:var(--lead)} .tile.t-lead.on .mk{background:var(--lead);border-color:var(--lead)}
.tile.t-obs.on{background:var(--obs-soft);border-color:var(--obs)} .tile.t-obs.on .mk{background:var(--obs);border-color:var(--obs)}
.tile .ava img,.ava img{object-position:center 18%}
textarea.follow,.contact-f{animation:rise .28s var(--ease-out)}

/* кнопка: пилюля с переливом */
.btn{border-radius:999px;font-weight:800;background:linear-gradient(100deg,#860b04,#d0260f,#e3972f,#d0260f,#860b04);background-size:250% 100%;animation:shim 6s linear infinite;transition:transform .16s var(--ease-out),box-shadow .2s ease}
.btn:active{transform:scale(.97)}
.btn-ghost{background:#fff;animation:none;border:1.5px solid var(--exp-line);color:var(--red)}

/* вход шага: содержимое выезжает, вопросы — каскадом */
.enter .person,.enter .sec-title,.enter .q,.enter .intro-in>*{animation:rise .42s var(--ease-out) both}
.enter .q:nth-of-type(1){animation-delay:.05s}.enter .q:nth-of-type(2){animation-delay:.09s}.enter .q:nth-of-type(3){animation-delay:.13s}.enter .q:nth-of-type(4){animation-delay:.17s}.enter .q:nth-of-type(5){animation-delay:.21s}.enter .q:nth-of-type(n+6){animation-delay:.25s}
.enter .intro-in>*:nth-child(2){animation-delay:.06s}.enter .intro-in>*:nth-child(3){animation-delay:.12s}.enter .intro-in>*:nth-child(4){animation-delay:.18s}.enter .intro-in>*:nth-child(5){animation-delay:.24s}.enter .intro-in>*:nth-child(n+6){animation-delay:.3s}
.enter.back .person,.enter.back .sec-title,.enter.back .q{animation-name:riseBack}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes riseBack{from{opacity:0;transform:translateY(-8px)}}

/* приветствие: состав группы карточками */
.team-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:6px 0 14px}
.tm{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.tm .ava{width:44px;height:44px;font-size:.85rem;flex:none}
.tm b{display:block;font-size:.92rem;font-weight:700;line-height:1.25}
.tm.lead{border-color:var(--lead-line)} .tm.obs{border-color:var(--obs-line)}
.tm.lead .ava{background:var(--lead-soft);color:var(--lead-ink);border-color:var(--lead-line)}
.tm.obs .ava{background:var(--obs-soft);color:var(--obs-ink);border-color:var(--obs-line)}
.team li{list-style:none;display:flex;gap:10px;align-items:baseline;padding:4px 0}
.team{padding-left:0}
.team li .role{margin-left:auto}

/* финал: галочка рисуется, ромбы разлетаются один раз */
.done-ico{width:84px;height:84px;margin:0 auto 16px;position:relative}
.done-ico svg{width:84px;height:84px}
.done-ico circle{fill:#e6f4ee}
.done-ico path{fill:none;stroke:var(--green);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw .6s .15s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.burst{position:absolute;left:50%;top:50%;width:0;height:0}
.burst i{position:absolute;width:9px;height:9px;border-radius:2px;background:var(--c);transform:translate(-50%,-50%) rotate(45deg) scale(.4);opacity:0;animation:fly .9s var(--ease-out) forwards;animation-delay:.2s}
@keyframes fly{0%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(225deg) scale(1)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .done-ico path{stroke-dashoffset:0}
}

/* акцент карточки = роль оцениваемого */
.card.acc-lead .tile.on:not(.neg){background:var(--lead-soft);border-color:var(--lead);box-shadow:0 8px 20px -14px rgba(196,122,18,.6)}
.card.acc-lead .tile.on:not(.neg) .mk{background:var(--lead);border-color:var(--lead)}
.card.acc-obs .tile.on:not(.neg){background:var(--obs-soft);border-color:var(--obs);box-shadow:0 8px 20px -14px rgba(107,70,193,.6)}
.card.acc-obs .tile.on:not(.neg) .mk{background:var(--obs);border-color:var(--obs)}
.card.acc-obs .q-t,.card.acc-lead .q-t{color:var(--ink)}
.side-i.cur.lead::before{background:linear-gradient(var(--lead),var(--gold))}
.side-i.cur.obs::before{background:linear-gradient(var(--obs),#a78bfa)}
.side-i.cur.lead{background:linear-gradient(90deg,var(--lead-soft),rgba(253,242,223,0))}
.side-i.cur.obs{background:linear-gradient(90deg,var(--obs-soft),rgba(241,236,252,0))}

/* телефон: одна колонка плиток, крупное касание */
.phone .tiles,.phone .tiles.people,.phone .team-g{grid-template-columns:1fr}
.phone .tile{min-height:52px}
.phone .person .ring{width:80px;height:80px}.phone .person .ring .ava{width:66px;height:66px}

/* выбор «С кого начнём?» (телефон) */
.pk-list{display:grid;gap:10px;margin:8px 0 14px}
.pk{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:10px 12px;font:inherit;color:var(--ink);cursor:pointer;transition:transform .14s var(--ease-out),border-color .16s ease,box-shadow .2s ease}
.pk:active{transform:scale(.98)}
.pk .ring{width:56px;height:56px}.pk .ring .ava{width:46px;height:46px;font-size:.9rem}
.pk-t{flex:1;min-width:0;display:grid;gap:4px}
.pk-t b{font-weight:700;line-height:1.25}
.pk-t .role{justify-self:start}
.pk-st{font-size:.74rem;font-weight:800;color:var(--ink3);white-space:nowrap}
.pk-st.new{color:var(--red)}
.pk-st.ok{color:var(--green)}
.pk.ok{border-color:#c5e6d8;background:linear-gradient(90deg,#f3faf6,#fff)}
.side-n.big{width:56px;height:56px;margin:0;font-size:1rem}
.side-n.big::before{inset:10px}
.enter .pk{animation:rise .4s var(--ease-out) both}
.enter .pk:nth-child(2){animation-delay:.05s}.enter .pk:nth-child(3){animation-delay:.1s}.enter .pk:nth-child(4){animation-delay:.15s}.enter .pk:nth-child(n+5){animation-delay:.2s}
.allsteps{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:4px 12px;font:inherit;font-size:.78rem;font-weight:700;color:var(--red);cursor:pointer}
.allsteps:active{transform:scale(.97)}

.side-n{isolation:isolate}

/* один ответ: предупреждение, отправленный шаг, тряска при пропуске */
.note.once{background:linear-gradient(90deg,#fdf2df,#fff8ec);border:1px solid #f0d6a8;color:#6b4306}
.note.once b{color:#8a5208}
.sent-bar{margin:-6px 0 14px;padding:9px 12px;border-radius:12px;background:#e6f4ee;border:1px solid #c5e6d8;color:#11634a;font-weight:700;font-size:.88rem;animation:rise .3s var(--ease-out)}
.card.locked .tile,.card.locked textarea,.card.locked input{pointer-events:none}
.card.locked .tile:not(.on){opacity:.55}
.q.missing .q-t{color:var(--red)}
.q.missing{border-left-color:var(--coral)}
.card.shake{animation:shake .38s var(--ease-out)}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* предупреждение о серьёзном замечании */
.ethics{margin-top:10px;padding:11px 13px;border-radius:12px;background:linear-gradient(90deg,#fff1ec,#fff8f5);border:1px solid #f6c6b6;color:#7a2a12;font-size:.88rem;line-height:1.45;animation:rise .28s var(--ease-out)}
.ethics b{color:#b11802}