:root{--bg:#0e1117;--card:#161b24;--card2:#1c2230;--line:#2a3140;--tx:#eef0f5;--mut:#9aa4b8;--ac:#ff6a00;--ac2:#ffa21f;--ok:#22c55e;--bad:#ef4444}
@media (prefers-color-scheme:light){:root:not([data-theme]){--bg:#f6f7fa;--card:#fff;--card2:#f0f2f7;--line:#dde1ea;--tx:#151922;--mut:#5a6477}}
:root[data-theme=light]{--bg:#f6f7fa;--card:#fff;--card2:#f0f2f7;--line:#dde1ea;--tx:#151922;--mut:#5a6477;color-scheme:only light}
:root[data-theme=dark]{--bg:#0e1117;--card:#161b24;--card2:#1c2230;--line:#2a3140;--tx:#eef0f5;--mut:#9aa4b8;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}
/* 19.10: жалоба — на телефоне кнопка голосового интервью «не работает». Разбор (Playwright,
   эмуляция Pixel 7): после появления карточки интервью/чата браузер сам дёргает прокрутку —
   штатное «scroll anchoring» компенсирует изменение высоты контента выше. На мобильном пальцем
   в этот момент попадаешь мимо кнопки. Отключаем самодёрг прокрутки у мест, где контент меняется. */
html,body,#cvbox,.chat{overflow-anchor:none}
body{margin:0;background:var(--bg);color:var(--tx);font:18px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--ac);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
header.top{display:flex;align-items:center;gap:14px;padding:10px 14px;max-width:1240px;margin:0 auto}   /* 19.10: шапка по ширине сайта (как .app): значок у начала строки над меню «Резюме» */
header.top img{width:110px;height:110px}header.top b{font-size:20px}header.top .sp{flex:1}
.btn{display:inline-block;font:inherit;font-weight:600;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);border:2px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 0 #000;border-radius:12px;padding:12px 22px;cursor:pointer;text-decoration:none}
.btn:hover{text-decoration:none;filter:brightness(1.07)}
.btn.sec{background:var(--card);color:var(--tx);text-shadow:none;border:2px solid #000}
.btn.sm{padding:7px 12px;font-size:15px;border-radius:9px}.btn.bad{background:var(--card);color:var(--bad);text-shadow:none;border:2px solid #000}.btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 #000}
.btn[disabled]{opacity:.55;cursor:default}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;padding:36px 0 20px}
.hero h1{font-size:40px;line-height:1.15;margin:0 0 14px}.hero p{color:var(--mut);margin:0 0 20px;font-size:20px}
.hero img{width:100%;max-width:340px;justify-self:center}
section.blk{padding:26px 0}section.blk h2{font-size:28px;margin:0 0 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column}
.card .push{margin-top:auto!important;padding-top:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.grid{align-items:stretch}
.card h3{margin:0 0 6px;font-size:19px}.card p{margin:0;color:var(--mut);font-size:16.5px}
.num{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--ac);color:#1a0d00;font-weight:700;align-items:center;justify-content:center;margin-bottom:8px}
.src{display:flex;flex-wrap:wrap;gap:8px}.src span{background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:15.5px;color:var(--mut)}
footer{border-top:1px solid var(--line);margin-top:30px;padding:22px 20px;text-align:center;color:var(--mut);font-size:15px}
footer a{margin:0 10px}
.lang{display:flex;gap:6px}.lang button{font:inherit;font-size:14px;background:var(--card);color:var(--mut);border:1px solid var(--line);border-radius:8px;padding:5px 10px;cursor:pointer}.lang button.on{color:var(--ac);border-color:var(--ac)}
/* страницы-документы */
.doc{max-width:820px;margin:0 auto;padding:10px 20px 40px}.doc h1{font-size:32px}.doc h2{font-size:22px;margin-top:28px}.doc p,.doc li{color:var(--tx)}.doc .draft{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px 16px;color:var(--mut);font-size:15.5px}
/* кабинет */
.app{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 78px);max-width:1240px;margin:0 auto}
nav.side{padding:14px;border-right:1px solid var(--line)}
nav.side button{display:block;width:100%;text-align:left;font:inherit;background:none;color:var(--tx);border:0;border-radius:10px;padding:12px 14px;margin-bottom:4px;cursor:pointer}
nav.side button:hover{background:var(--card)}nav.side button.on{background:var(--card2);color:var(--ac);font-weight:600}
nav.side .badge{float:right;background:var(--ac);color:#1a0d00;border-radius:999px;padding:0 8px;font-size:14px}
main.pane{padding:22px 26px;min-width:0}main.pane h2{margin:0 0 6px;font-size:26px}.sub{color:var(--mut);margin:0 0 18px}
label{display:block;font-weight:600;margin:12px 0 4px;font-size:16px}
input,select,textarea{width:100%;font:inherit;background:var(--card);color:var(--tx);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
textarea{min-height:90px;resize:vertical}input:focus,select:focus,textarea:focus{outline:2px solid var(--ac);outline-offset:0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chips label{display:inline-flex;gap:6px;align-items:center;font-weight:400;margin:0;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;font-size:15.5px}.chips input{width:auto}
.chat{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow:auto;padding:6px 2px;margin:12px 0}
.bub{max-width:82%;padding:11px 15px;border-radius:16px;white-space:pre-wrap}.bub.bot{background:var(--card2);border:1px solid var(--line);align-self:flex-start}.bub.me{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#1a0d00;align-self:flex-end}
.pbar{height:8px;background:var(--card2);border-radius:99px;overflow:hidden;margin:8px 0}.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--ac),var(--ac2));width:0;transition:width .4s}
.inp{display:flex;gap:8px;align-items:flex-end}.inp textarea{min-height:56px}
.vac{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.vac h3{margin:0 0 4px;font-size:19px}.vac .m{color:var(--mut);font-size:15.5px;margin-bottom:8px}.vac .act{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tag{display:inline-block;background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:14px;color:var(--mut);margin-right:6px}
.msg{margin-top:10px;font-weight:600}.msg.ok{color:var(--ok)}.msg.bad{color:var(--bad)}
.cv{background:#fff;color:#1b1f27;border-radius:10px;padding:34px 40px;max-width:780px;margin-top:14px;line-height:1.45;font-size:16px}
.cv h1{margin:0;font-size:30px;color:#111}.cv .hd{color:#d65a00;font-weight:600;margin:2px 0 8px}.cv .ct{color:#555;font-size:14.5px;margin-bottom:12px}.cv h2{font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:#d65a00;border-bottom:2px solid #ffd2ad;padding-bottom:3px;margin:20px 0 8px}
.cv .job b{color:#111}.cv .job .p{color:#666;font-size:14px}.cv ul{margin:4px 0 10px 20px;padding:0}.cv .sk span{display:inline-block;background:#fff1e6;border-radius:6px;padding:2px 9px;margin:2px 4px 2px 0;font-size:14.5px}
.gate{max-width:640px;margin:60px auto;padding:0 20px}
@media(max-width:820px){.hero{grid-template-columns:1fr}.hero h1{font-size:31px}.app{grid-template-columns:1fr}nav.side{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px}nav.side button{white-space:nowrap;width:auto}.row,.row3{grid-template-columns:1fr}.cv{padding:20px}main.pane{padding:16px}}
@media print{body{background:#fff}nav.side,header.top,.noprint{display:none!important}.app{display:block}main.pane{padding:0}.cv{box-shadow:none;max-width:none;padding:0}}

select.langSel{width:auto;font:inherit;font-size:15px;background:var(--card);color:var(--tx);border:1px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer}
.hero{align-items:center}.hero>div{align-self:center}

/* ===== Дизайн 18.10: подложка, объёмные кнопки с состояниями, анимации ===== */
:root{--glow1:rgba(255,106,0,.20);--glow2:rgba(80,130,255,.15);--dot:rgba(255,255,255,.06);--shadow:rgba(0,0,0,.35);--okbg:rgba(34,197,94,.12)}
@media (prefers-color-scheme:light){:root:not([data-theme]){--glow1:rgba(255,106,0,.16);--glow2:rgba(80,130,255,.12);--dot:rgba(20,30,60,.07);--shadow:rgba(30,40,70,.16)}}
:root[data-theme=light]{--glow1:rgba(255,106,0,.16);--glow2:rgba(80,130,255,.12);--dot:rgba(20,30,60,.07);--shadow:rgba(30,40,70,.16)}

/* подложка: мягкие цветные пятна + точечная сетка */
body{position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:-10%;z-index:-2;pointer-events:none;
  background:radial-gradient(42% 38% at 12% 8%,var(--glow1),transparent 70%),radial-gradient(38% 34% at 92% 18%,var(--glow2),transparent 70%),radial-gradient(40% 36% at 70% 98%,var(--glow1),transparent 72%);
  animation:drift 28s ease-in-out infinite alternate}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(var(--dot) 1.2px,transparent 1.4px);background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,transparent 75%);mask-image:linear-gradient(180deg,#000 0,transparent 75%)}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2.5%,2%,0) scale(1.06)}100%{transform:translate3d(-2%,3%,0) scale(1.02)}}

/* КНОПКИ: непрожатая — выпуклая, нажатая и выбранная — вдавлена */
.btn{position:relative;overflow:hidden;user-select:none;-webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 0 rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.07),0 4px 0 #000,0 9px 16px rgba(255,106,0,.28);
  transition:transform .14s cubic-bezier(.3,.7,.4,1.4),box-shadow .14s ease,filter .2s ease,background-color .2s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.1),0 6px 0 #000,0 14px 24px rgba(255,106,0,.42)}
.btn:active,.btn.on,.btn[aria-pressed=true]{transform:translateY(3px);filter:brightness(.97);box-shadow:inset 0 3px 9px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.05),0 1px 0 #000}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn.sec,.btn.bad,.btn.tgl:not(.on){background:linear-gradient(180deg,var(--card2),var(--card));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.2),0 0 0 1px var(--line),0 4px 0 #000,0 8px 14px var(--shadow)}
.btn.sec:hover,.btn.bad:hover,.btn.tgl:not(.on):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -2px 0 rgba(0,0,0,.2),0 0 0 1px var(--ac),0 6px 0 #000,0 12px 20px var(--shadow)}
.btn.sec:active,.btn.bad:active{box-shadow:inset 0 3px 9px rgba(0,0,0,.45),0 0 0 1px var(--line),0 1px 0 #000}
.btn.bad:hover{color:#fff;background:linear-gradient(135deg,#e23b3b,#ff6a4d);text-shadow:0 1px 2px rgba(0,0,0,.55)}
.btn.tgl.on{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);animation:settle .28s ease}
.btn.tgl.on::after{content:"";position:absolute;left:12%;right:12%;bottom:3px;height:3px;border-radius:3px;background:rgba(255,255,255,.85)}
.btn[disabled]{opacity:.5;filter:grayscale(.7);transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 0 #000;cursor:not-allowed}
@keyframes settle{0%{transform:translateY(-2px)}60%{transform:translateY(4px)}100%{transform:translateY(3px)}}
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}
/* блик на главной кнопке */
.hero .btn:not(.sec)::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:sheen 4.5s ease-in-out infinite}
@keyframes sheen{0%,55%{left:-60%}100%{left:130%}}

/* боковое меню кабинета */
nav.side button{position:relative;transition:background .18s,transform .18s,color .18s,padding .18s}
nav.side button:hover{transform:translateX(4px);background:var(--card)}
nav.side button.on{background:linear-gradient(90deg,rgba(255,106,0,.2),transparent);box-shadow:inset 0 0 0 1px rgba(255,106,0,.35)}
nav.side button.on::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:4px;border-radius:4px;background:linear-gradient(var(--ac),var(--ac2));box-shadow:0 0 12px var(--ac);animation:bar .3s ease}
@keyframes bar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
nav.side .badge{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,106,0,.55)}50%{box-shadow:0 0 0 7px rgba(255,106,0,0)}}

/* карточки: приподнимаются, появляются мягко */
.card,.vac{box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 24px var(--shadow);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;background-image:linear-gradient(180deg,rgba(255,255,255,.035),transparent 40%)}
.card:hover,.vac:hover{transform:translateY(-3px);border-color:rgba(255,106,0,.55);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 14px 32px var(--shadow),0 0 0 1px rgba(255,106,0,.18)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
main.pane>*,.hero>*,.grid>*{animation:rise .5s cubic-bezier(.2,.7,.3,1) backwards}
main.pane>*:nth-child(2),.grid>*:nth-child(2){animation-delay:.06s}main.pane>*:nth-child(3),.grid>*:nth-child(3){animation-delay:.12s}main.pane>*:nth-child(4),.grid>*:nth-child(4){animation-delay:.18s}main.pane>*:nth-child(5),.grid>*:nth-child(5){animation-delay:.24s}main.pane>*:nth-child(n+6),.grid>*:nth-child(n+6){animation-delay:.3s}
.hero>*:nth-child(2){animation-delay:.12s}
.hero img{animation:rise .6s .1s backwards,floaty 6s 0.7s ease-in-out infinite;filter:drop-shadow(0 18px 30px rgba(255,106,0,.35))}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -10px}}
header.top img{transition:transform .4s cubic-bezier(.3,.7,.4,1.5)}header.top img:hover{transform:rotate(-6deg) scale(1.06)}
.hero h1{background:linear-gradient(100deg,var(--tx) 30%,var(--ac) 70%,var(--ac2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.num{box-shadow:0 0 0 4px rgba(255,106,0,.18),0 6px 14px rgba(255,106,0,.35);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}.reveal.in{opacity:1;transform:none}

/* поля, плашки, чат, прогресс */
input,select,textarea{transition:border-color .18s,box-shadow .18s,background .18s}
input:hover,select:hover,textarea:hover{border-color:rgba(255,106,0,.5)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 4px rgba(255,106,0,.22)}
.chips label{transition:all .16s}.chips label:hover{border-color:var(--ac);transform:translateY(-1px)}
.chips label:has(input:checked){border-color:var(--ac);background:rgba(255,106,0,.16);color:var(--tx);box-shadow:inset 0 2px 5px rgba(0,0,0,.25)}
.src span{transition:all .16s}.src span:hover{border-color:var(--ac);color:var(--tx);transform:translateY(-2px)}
.tag{transition:border-color .16s}
.bub{animation:pop .3s cubic-bezier(.3,.7,.4,1.3) both;box-shadow:0 4px 12px var(--shadow)}
.bub.me{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
@keyframes pop{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:none}}
.pbar i{background-size:200% 100%;background-image:linear-gradient(90deg,var(--ac),var(--ac2),var(--ac));animation:flow 2s linear infinite}
@keyframes flow{to{background-position:200% 0}}
.msg.ok,.msg.bad{animation:pop .3s both}
select.langSel{transition:border-color .18s,box-shadow .18s}select.langSel:hover{border-color:var(--ac)}
details>summary{cursor:pointer;transition:color .15s}details>summary:hover{color:var(--ac)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
@media print{body::before,body::after{display:none}}

/* переключатель темы и язык: маленькие квадратные кнопки */
.thm{position:relative;display:inline-flex;flex:none}
.btn.thmBtn{width:42px;height:42px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:11px}
.thmBtn svg{display:block;transition:transform .35s cubic-bezier(.3,.7,.4,1.5)}.thmBtn:hover svg{transform:rotate(25deg) scale(1.1)}
.thmMenu{position:absolute;right:0;top:calc(100% + 10px);min-width:200px;white-space:nowrap;z-index:3000;background:var(--card);border:2px solid #000;border-radius:14px;padding:6px;box-shadow:0 0 0 1px var(--line),0 18px 40px var(--shadow);animation:pop .18s ease both;transform-origin:top right}
.thmMenu[hidden]{display:none}
.thmMenu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;font-size:16px;color:var(--tx);background:none;border:0;border-radius:9px;padding:10px 12px;cursor:pointer;transition:background .15s,transform .15s}
.thmMenu button:hover{background:var(--card2);transform:translateX(3px)}
.thmMenu button.on{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
select.langSel{width:62px!important;height:42px;padding:0 4px 0 12px!important;font-weight:800;font-size:15px!important;letter-spacing:.04em;border:2px solid #000!important;border-radius:11px!important;background:linear-gradient(180deg,var(--card2),var(--card));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px var(--line),0 4px 0 #000;cursor:pointer}
select.langSel:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px var(--ac),0 6px 0 #000}
:root[data-theme=light]{color-scheme:only light}
.flg{display:inline-block;width:26px;height:18px;border-radius:4px;overflow:hidden;border:1px solid rgba(0,0,0,.45);flex:none;box-shadow:0 1px 3px rgba(0,0,0,.35)}.flg svg{display:block;width:100%;height:100%}.flg.none{border-color:transparent;box-shadow:none}
.btn.lngBtn{height:42px;padding:0 12px;display:inline-flex;align-items:center;gap:8px;border-radius:11px;font-size:15px}
.lngBtn b{letter-spacing:.05em}.lngBtn u{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;opacity:.8;transition:transform .2s}.lngBtn[aria-expanded=true] u{transform:rotate(180deg)}
.lng .thmMenu{min-width:210px}.lng .thmMenu b{width:28px;letter-spacing:.04em}.lng .thmMenu span{opacity:.85;font-size:15px}

/* 18.10: запас снизу — окно браузера бывает ниже видимого экрана (за панелью задач), последний блок должен доезжать до видимого края при любом масштабе */
main.pane{padding-bottom:max(130px,20vh)!important}
.doc{padding-bottom:max(130px,20vh)}
footer{padding-bottom:max(100px,14vh)}
.gate{padding-bottom:max(100px,14vh)}

/* 18.10, слово владельца: «почему не все кнопки оранжевые? Сделай оранжевыми» — все кнопки оранжевые; отличаются состоянием (выпуклая / вдавленная), «Удалить» — красно-оранжевая, невыбранная вкладка — приглушённая */
.btn.sec,.btn.bad,.btn.tgl:not(.on){background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 0 rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.07),0 4px 0 #000,0 9px 16px rgba(255,106,0,.28)}
.btn.bad{background:linear-gradient(135deg,#d92f1c,#ff7a2f)}
.btn.tgl:not(.on){filter:saturate(.5) brightness(.88)}
.btn.sec:hover,.btn.bad:hover,.btn.tgl:not(.on):hover{color:#fff;filter:brightness(1.1) saturate(1);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.1),0 6px 0 #000,0 14px 24px rgba(255,106,0,.42)}
.btn.bad:hover{background:linear-gradient(135deg,#e5391f,#ff8a3a)}
.btn.sec:active,.btn.bad:active,.btn.tgl:not(.on):active{transform:translateY(3px);filter:brightness(.97);box-shadow:inset 0 3px 9px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.05),0 1px 0 #000}

/* 18.10: экран телефона во время звонка */
.phone{max-width:340px;margin:0 auto;border-radius:34px;background:#111827;color:#fff;padding:26px 18px 20px;box-shadow:0 12px 40px rgba(0,0,0,.35);border:6px solid #1f2937}
.ph-top{text-align:center}.ph-av{width:72px;height:72px;line-height:72px;border-radius:50%;background:#2563eb;font-size:34px;margin:0 auto 10px}
.ph-name{font-size:22px;font-weight:700}.ph-sub{opacity:.7;font-size:14px;margin-top:2px}.ph-st{font-size:24px;margin:10px 0}
.ph-cv{font-size:13px;text-align:center;opacity:.85;min-height:18px}
.ph-cap{height:190px;overflow:auto;background:#0b1220;border-radius:14px;padding:10px;margin:10px 0;font-size:15px;line-height:1.35}
.ph-cap div{margin:5px 0;padding:6px 10px;border-radius:12px;max-width:88%}.ph-me{background:#2563eb;margin-left:auto!important}.ph-he{background:#374151}
.ph-btn{text-align:center;margin:8px 0}.ph-hang{width:76px;height:76px;border-radius:50%;border:0;background:#dc2626;color:#fff;font-size:34px;cursor:pointer}
.ph-snd{text-align:center;font-size:14px;opacity:.9}

/* 19.10, слова владельца: «оранжевый цвет с кнопок убери, сделай только ободок… но это только внутри админки» */
.adm .btn,.adm button.btn{background:transparent!important;background-image:none!important;box-shadow:none!important;border:2px solid var(--ac)!important;color:var(--tx)!important;text-shadow:none!important;filter:none!important}
.adm .btn:hover,.adm button.btn:hover{background:rgba(255,106,0,.14)!important;transform:none!important}
.adm .btn:active{background:rgba(255,106,0,.26)!important}

/* 19.10, слова владельца: админка — нормальные таблицы с рамками и крупными цифрами (плохое зрение), а не строчки */
.adm h3{margin:22px 0 8px;font-size:21px}
.adm-t{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:16px}
.adm-t th,.adm-t td{border:2px solid rgba(255,106,0,.55);padding:10px 12px;vertical-align:middle;text-align:left}
.adm-t th{background:rgba(255,106,0,.14);font-size:14px;font-weight:700}
.adm-t td.n,.adm-t th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.adm-t td.c,.adm-t th.c{text-align:center}
.adm-t td.act{min-width:190px}.adm-t td.act .btn{margin:2px 0}
.adm-t .big{font-size:22px;font-weight:800}
.adm-t .neg{color:#ff6b5e!important}
.adm-t tr.tot td{background:rgba(255,106,0,.12)}
.adm details summary{font-size:18px;font-weight:700;cursor:pointer;margin:12px 0}

.adm-t tr.actrow td{background:rgba(255,106,0,.07);padding:8px 12px}
.adm-t{font-size:15px}.adm-t .big{font-size:21px}
/* (повтор блока ниже безвреден) */
/* 19.10, слова владельца: админка — нормальные таблицы с рамками и крупными цифрами (плохое зрение), а не строчки */
.adm h3{margin:22px 0 8px;font-size:21px}
.adm-t{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:16px}
.adm-t th,.adm-t td{border:2px solid rgba(255,106,0,.55);padding:10px 12px;vertical-align:middle;text-align:left}
.adm-t th{background:rgba(255,106,0,.14);font-size:14px;font-weight:700}
.adm-t td.n,.adm-t th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.adm-t td.c,.adm-t th.c{text-align:center}
.adm-t td.act{min-width:190px}.adm-t td.act .btn{margin:2px 0}
.adm-t .big{font-size:22px;font-weight:800}
.adm-t .neg{color:#ff6b5e!important}
.adm-t tr.tot td{background:rgba(255,106,0,.12)}
.adm details summary{font-size:18px;font-weight:700;cursor:pointer;margin:12px 0}

.adm-t th,.adm-t td{padding:9px 9px}

/* 19.10: переключатель резюме («задвижка», как в Dialog Bridge Invest) */
.sw{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600}
.sw input{display:none}
.sw .swi{position:relative;width:52px;height:28px;border-radius:28px;background:#5a5a60;transition:background .2s;display:inline-block;flex:none}
.sw .swi:after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .2s}
.sw input:checked+.swi{background:var(--ac)}
.sw input:checked+.swi:after{left:27px}

.vac .mu{color:var(--mut);font-size:15.5px;margin-bottom:8px}

/* 22.10.2026, разбор по навыку apple-design (слово владельца: «прогони через Apple»). Бэкап: /root/jobhelp/backup_design_1022/.
   Правила только для главной (body.pub), кроме шапки на телефоне, касаний и reduced-motion — они общие. Бренд, оранжевые кнопки и тексты не тронуты. */
/* 1. Шапка на телефоне: кнопки «Вход / Регистрация» уезжали за правый край (body{overflow-x:hidden} их прятал) */
@media(max-width:560px){header.top{flex-wrap:wrap;gap:8px;padding:8px 14px}header.top img{width:72px;height:72px}header.top .sp{flex-basis:0}.pub header.top>a.btn.sm{flex:1 1 40%;text-align:center}}
/* 2. Касания не меньше 44 px (Apple HIG) */
@media(pointer:coarse){.btn.sm,.btn.thmBtn,.btn.lngBtn,select.langSel{min-height:44px}.btn.thmBtn{width:44px}}
/* 3. Отклик и наведение: подъём только для мыши, у неинтерактивных карточек главной подъёма нет (они не кликабельны) */
@media(hover:none){.btn:hover,.btn.sec:hover,.btn.bad:hover,.btn.tgl:not(.on):hover{transform:none}.card:hover,.vac:hover{transform:none}}
.pub .card:hover{transform:none;border-color:var(--line);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 24px var(--shadow)}
/* 4. Явный список свойств вместо transition:all */
.chips label{transition:border-color .16s,transform .16s,background-color .16s,box-shadow .16s}
.src span{transition:border-color .16s,color .16s,transform .16s}
/* 5. Типографика: на больших размерах плотнее трекинг, ровные переносы, строка не длиннее ~70 знаков */
.pub .hero h1{letter-spacing:-.022em;text-wrap:balance}
.pub section.blk h2{letter-spacing:-.015em;text-wrap:balance}
.pub .card h3{text-wrap:balance}
.pub .card p{text-wrap:pretty}
.pub .card p+p{margin-top:.8em}
/* 6. Главное действие на первом экране */
.pub .hero .heroCta{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pub .hero .heroCta .btn{font-size:19px;padding:14px 28px}
/* 7. FAQ: пять карточек без «сироты» в последнем ряду — две колонки, последняя на всю ширину */
.pub #faq .grid{grid-template-columns:repeat(2,1fr)}
.pub #faq .card:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:820px){.pub #faq .grid{grid-template-columns:1fr}.pub .hero img{max-width:170px}.pub .hero .heroCta .btn{width:100%;text-align:center}}
/* 8. Reduced motion: и плавная прокрутка тоже */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===== 22.10.2026, подложка и анимация по навыкам animate / find-animation-opportunities / apple-design §12, §14 =====
   Правило: движение только там, где оно что-то значит. Главная (показ редкий) — можно; кабинет (десятки раз в день) — почти неподвижный. Бренд не тронут. */
:root{--ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1)}
/* Подложка: цветные пятна и точечная сетка остаются, но дрейф на весь экран — только на главной и только с мышью (без батареи телефона и без движущегося фона в кабинете) */
body::before{animation:none}
@media (hover:hover) and (pointer:fine){body.pub::before{animation:drift 28s ease-in-out infinite alternate;will-change:transform}}
/* Кабинет: появление блоков 180 мс, без лесенки; на главной тот же вход, но с сильной кривой */
@keyframes riseS{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
main.pane>*:nth-child(n),.app .grid>*:nth-child(n){animation:riseS .18s var(--ease-out) backwards;animation-delay:0s}
.pub .hero>*,.pub .grid>*{animation-timing-function:var(--ease-out)}
/* Логотип в первом экране: без бесконечного покачивания (период 6 с — как раз полоса, которую избегают из-за укачивания) */
.hero img{animation:rise .6s var(--ease-out) .1s backwards}
/* Блик на главной кнопке: двигаем transform, а не left; три прохода и тишина */
@keyframes sheen{0%,55%{transform:translateX(0) skewX(-20deg)}100%{transform:translateX(475%) skewX(-20deg)}}
.hero .btn:not(.sec)::before{animation:sheen 4.5s var(--ease-in-out) 1.2s 3}
/* Навигация кабинета — частое действие: без сдвига и без анимации индикатора */
nav.side button{transition:background-color .15s ease,color .15s ease}
nav.side button:hover{transform:none}
nav.side button.on::before{animation:none}
nav.side .badge{animation:pulse 2.4s ease-out 3}
/* Сообщения: 200 мс, без пружины */
@keyframes popS{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
.bub,.msg.ok,.msg.bad{animation:popS .2s var(--ease-out) both}
/* Карточки не кликабельны — у них нет подъёма и подсветки; чипы без прыжка; логотип не вертится на касании */
.card:hover,.vac:hover{transform:none;border-color:var(--line);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 24px var(--shadow)}
.chips label:hover,.src span:hover{transform:none}
@media (hover:none){header.top img:hover{transform:none}}
/* Материалы (apple-design §12): плашка согласия и меню — полупрозрачный слой с размытием, с твёрдой запасной версией */
div[data-notr][style*="z-index:99998"]{background:rgba(27,27,34,.82)!important;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
.thmMenu{background:color-mix(in srgb,var(--card) 88%,transparent);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
@media (prefers-reduced-transparency:reduce){div[data-notr][style*="z-index:99998"]{background:#1b1b22!important;-webkit-backdrop-filter:none;backdrop-filter:none}.thmMenu{background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){.card,.vac,input,select,textarea{border-color:var(--tx)}.btn{border-color:#000}}

/* ===== 22.10.2026, кабинет на телефоне: ничего не обрезается (слово владельца: «нигде ничего не должно обрезаться») ===== */
.app b,.app a,#who{overflow-wrap:anywhere}
.app p,.app td,.app th,.app label,.card{overflow-wrap:break-word}
@media(max-width:820px){
 /* вкладки кабинета: все видны сразу, без прокрутки вбок (раньше за правым краем прятались семь из десяти) */
 nav.side{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:6px;overflow:visible;padding:10px 12px;border-bottom:1px solid var(--line)}
 nav.side button{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;width:auto;margin:0;min-height:46px;padding:8px 6px;font-size:15.5px;line-height:1.2;text-align:center;white-space:normal}
 nav.side .badge{float:none}
 /* кнопка «Помощник» — круглая, не закрывает текст */
 body #hlpBtn{padding:0;width:52px;height:52px;justify-content:center;gap:0;right:12px;bottom:12px}
 body #hlpBtn b{display:none}
 body #hlpBtn span{font-size:26px;line-height:1}
 /* таблицы админки — карточками: подписи колонок берутся из заголовков (скрипт в app.html); числа по две в ряд */
 .adm-t,.adm-t tbody{display:block;width:100%}
 .adm-t thead{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
 .adm-t tr{display:grid;grid-template-columns:1fr 1fr;margin:0 0 12px;border:2px solid rgba(255,106,0,.55);border-radius:12px;overflow:hidden;background:var(--card)}
 .adm-t th,.adm-t td{display:block;min-width:0;border:0;border-bottom:1px solid rgba(255,106,0,.3);padding:9px 12px;text-align:left!important;white-space:normal!important}
 .adm-t td:not(.n):not(.c),.adm-t th{grid-column:1/-1}
 .adm-t td[data-l]::before{content:attr(data-l);display:block;font-weight:700;font-size:13px;color:var(--mut);margin-bottom:2px}
 .adm-t td:first-child[data-l]{background:rgba(255,106,0,.1)}
 .adm-t td:first-child[data-l]::before{display:none}
 .adm-t td.act,.adm-t tr.actrow td{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
 .adm-t .btn{white-space:normal}
}
@media(max-width:560px){
 #who{order:9;flex:1 1 100%;font-size:14px}
}
/* касания: флажки и переключатели крупнее, чипы не ниже 44 px */
@media(pointer:coarse){input[type=checkbox],input[type=radio]{width:24px;height:24px;flex:none}.chips label{min-height:44px;padding:8px 14px}}
/* заголовок главной: коричневая «грязь» в середине градиента убрана — цвет текста дольше держится, оранжевый только на конце */
.pub .hero h1{background-image:linear-gradient(100deg,var(--tx) 62%,var(--ac) 86%,var(--ac2))}
/* на узком экране заголовок переносится на 3 строки, и проценты градиента иногда красят оранжевым случайные 1-2 буквы в середине слова — на телефоне градиент выключен, заголовок сплошным цветом */
@media(max-width:480px){.pub .hero h1{background-image:none;-webkit-text-fill-color:currentColor;color:var(--tx)}}