/* ============================================================================ TIMDRIVE — дизайн-система кабинета. Перенесена 1:1 из утверждённого прототипа (scratchpad/timdrive-prototype). Палитра с логотипа: лайм #A3D219 + графит #333B44. Токены названы как в прототипе (--ground/--ink/--primary), старые имена (--bg/--text/--accent) оставлены алиасами: на них ещё завязаны шаблоны, которые не переверстаны. Удалять алиасы можно будет, когда переверстаются все. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700;800&family=Source+Sans+3:wght@400;600;700&display=swap'); :root{ --ground:#F0F1F2; --surface:#FFFFFF; --surface-2:#F5F6F7; --ink:#2B333C; --ink-2:#6E7883; --line:#E3E6E9; --primary:#A3D219; --primary-2:#8FBB12; --on-primary:#232A32; --primary-soft:#F0F8DC; --primary-ink:#5E7F0C; --graphite:#333B44; --graphite-2:#232A32; --grad-btn:linear-gradient(180deg,#B0DE28,#93C114); --ok:#0E8A5F; --ok-bg:#E3F5EC; --warn:#A36305; --warn-bg:#FBF0DC; --bad:#C03B2E; --bad-bg:#FBEAE7; --shadow-s:0 1px 2px rgba(35,42,50,.05), 0 4px 14px rgba(35,42,50,.06); --shadow-m:0 2px 4px rgba(35,42,50,.05), 0 14px 34px rgba(35,42,50,.10); --shadow-btn:0 8px 20px rgba(143,187,18,.38); --font-d:"Barlow", system-ui, "Segoe UI", sans-serif; --font-b:"Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --nav-h:calc(70px + env(safe-area-inset-bottom)); /* Алиасы на старые имена */ --bg:var(--ground); --text:var(--ink); --text-muted:var(--ink-2); --border:var(--line); --accent:var(--primary); --accent-text:var(--primary-ink); --accent-ink:var(--on-primary); --accent-grad:var(--grad-btn); --trust:#0D8F84; --trust-bg:#E0F2F0; --success:var(--ok); --success-bg:var(--ok-bg); --warning:var(--warn); --warning-bg:var(--warn-bg); --critical:var(--bad); --critical-bg:var(--bad-bg); --shadow:var(--shadow-s); --font-display:var(--font-d); --font-body:var(--font-b); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ground:#171C22; --surface:#20272F; --surface-2:#28303A; --ink:#EDF0F3; --ink-2:#98A3AF; --line:#333C47; --primary:#B8E62E; --primary-2:#C8F045; --on-primary:#1A2008; --primary-soft:#2A331A; --primary-ink:#B8E62E; --grad-btn:linear-gradient(180deg,#C2ED3C,#A0CE1E); --ok:#4CC694; --ok-bg:#12291F; --warn:#E3A83F; --warn-bg:#2B2110; --bad:#F08A7E; --bad-bg:#2D1613; --shadow-s:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.35); --shadow-m:0 2px 4px rgba(0,0,0,.4), 0 16px 38px rgba(0,0,0,.5); --shadow-btn:0 8px 22px rgba(160,206,30,.35); --trust:#4CC0B4; --trust-bg:#12292B; } } *{box-sizing:border-box;} /* Многие блоки ниже задают display явно (flex/grid), и это перебивает атрибут hidden — без этой строки «скрытый» оверлей матча оставался бы на экране. */ [hidden]{display:none !important;} html{color-scheme:light dark;} body{ margin:0; background:var(--ground); color:var(--ink); font-family:var(--font-b); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; } img{display:block;} h1,h2,h3,.d{font-family:var(--font-d); text-wrap:balance; margin:0; letter-spacing:-.01em;} a{color:var(--primary-ink);} .num{font-variant-numeric:tabular-nums;} /* ---------------------------------------------------------------- Каркас -- Кабинет — не «телефон в рамке», а обычная страница, поэтому вместо .device из прототипа обычный поток: шапка сверху, таб-бар прибит к низу окна. */ .appbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:10px; padding:10px 16px 12px; background:var(--ground); } .appbar .title{ font-family:var(--font-d); font-weight:700; font-size:16.5px; flex:1; text-align:center; letter-spacing:-.01em; } .appbar .title small{display:block; font-family:var(--font-b); font-weight:400; font-size:12px; color:var(--ink-2); letter-spacing:0;} .iconbtn{ width:36px; height:36px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); display:grid; place-items:center; cursor:pointer; flex:none; padding:0; box-shadow:var(--shadow-s); text-decoration:none; } .iconbtn:hover{border-color:var(--primary-ink); color:var(--primary-ink);} .iconbtn.ghost{border-color:transparent; background:transparent; box-shadow:none;} .iconbtn-sp{width:36px; flex:none;} /* Точка на кнопке фильтров — признак, что подборка сейчас сужена вручную. Без неё пустая лента из-за забытого фильтра читается как «сломалось». */ .iconbtn.has-dot{position:relative; border-color:var(--primary-ink); color:var(--primary-ink);} .iconbtn.has-dot::after{ content:""; position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:99px; background:var(--primary); border:2px solid var(--ground); } .page{max-width:560px; margin:0 auto; padding:0 16px 28px;} .has-nav{padding-bottom:calc(var(--nav-h) + 32px);} /* Панель «Сохранить» и таб-бар оба прибиты к низу окна — без этого смещения они накладываются друг на друга и кнопка сохранения оказывается под навигацией. */ body:has(.bottomnav) .save-bar{bottom:var(--nav-h);} body:has(.bottomnav):has(.save-bar) .has-nav{padding-bottom:calc(var(--nav-h) + 96px);} /* Нижняя навигация */ .bottomnav{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid; grid-template-columns:repeat(var(--nav-cols,4),1fr); gap:2px; border-top:1px solid var(--line); background:var(--surface); padding:9px 10px calc(14px + env(safe-area-inset-bottom)); } .bottomnav a{ background:none; border:none; cursor:pointer; padding:4px 2px; color:var(--ink-2); display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none; font-family:var(--font-d); font-size:10.5px; font-weight:600; letter-spacing:.02em; } .bottomnav a.on{color:var(--primary-ink);} .bottomnav a.on .navic{background:var(--primary-soft);} .navic{width:44px; height:30px; border-radius:99px; display:grid; place-items:center; position:relative;} .badge-dot{ position:absolute; top:-3px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:99px; background:#E11D48; color:#fff; border:2px solid var(--surface); font-size:9px; font-weight:700; display:grid; place-items:center; font-family:var(--font-d); } /* Меню с «+» по центру (Сергей, 02.09, новый эталон): 4 вкладки + приподнятая лаймовая кнопка. Средняя колонка — пустой распорка .px-fab-slot, сам «+» позиционируется абсолютно по центру и выступает над полосой. */ .bottomnav.bottomnav-fab{grid-template-columns:1fr 1fr 66px 1fr 1fr; position:fixed;} .px-fab-slot{display:block;} .px-fab{ position:absolute; left:50%; bottom:calc(15px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:58px; height:58px; border-radius:99px; background:linear-gradient(155deg,#8FD44A,#5FB726); color:#fff; text-decoration:none; display:grid; place-items:center; z-index:41; box-shadow:0 10px 22px rgba(95,183,38,.5), 0 0 0 5px var(--surface); } .px-fab:active{transform:translateX(-50%) scale(.94);} /* ------------------------------------------------------- Общие элементы -- */ .card{background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-s);} .pad{padding:16px 18px;} .eyebrow{font-family:var(--font-d); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--primary-ink);} .dash{display:block; width:26px; height:4px; border-radius:99px; background:var(--primary); margin-bottom:8px;} .h-lg{font-size:26px; font-weight:800; letter-spacing:-.02em; margin:2px 0 6px;} .h-md{font-size:19px; font-weight:700; margin:0 0 4px;} .muted{color:var(--ink-2); font-size:13.5px;} .row{display:flex; align-items:center; gap:10px;} .spread{display:flex; align-items:center; justify-content:space-between; gap:10px;} .stack{display:flex; flex-direction:column;} .btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; border:none; border-radius:15px; padding:15px; cursor:pointer; text-decoration:none; background:var(--grad-btn); color:var(--on-primary); box-shadow:var(--shadow-btn); font-family:var(--font-d); font-size:15px; font-weight:700; letter-spacing:.01em; } .btn:hover{filter:brightness(1.06);} .btn:disabled{opacity:.55; cursor:default; filter:none; box-shadow:none;} .btn.sec{background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-s);} .btn.sec:hover{border-color:var(--primary-ink); color:var(--primary-ink); filter:none;} .linkbtn{background:none; border:none; color:var(--primary-ink); font-family:var(--font-b); font-size:14px; cursor:pointer; padding:6px; font-weight:700; text-decoration:none;} .chip{ display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:99px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink); font-family:var(--font-d); font-size:12px; font-weight:600; white-space:nowrap; } .chip.ok{background:var(--ok-bg); color:var(--ok); border-color:transparent;} .chip.warn{background:var(--warn-bg); color:var(--warn); border-color:transparent;} .chip.bad{background:var(--bad-bg); color:var(--bad); border-color:transparent;} .chip.pri{background:var(--primary-soft); color:var(--primary-ink); border-color:transparent;} .chip.trust{background:var(--trust-bg); color:var(--trust); border-color:transparent;} .chiprow{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px;} /* Бейджи (старое имя, оставлено — используется в шаблонах документов/статусов) */ .badge{ display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:99px; font-family:var(--font-d); font-size:11.5px; font-weight:600; border:1px solid transparent; white-space:nowrap; } .badge.ok{background:var(--ok-bg); color:var(--ok);} .badge.warn{background:var(--warn-bg); color:var(--warn);} .badge.bad{background:var(--bad-bg); color:var(--bad);} .badge.trust{background:var(--trust-bg); color:var(--trust);} .badge.neutral{background:var(--surface-2); color:var(--ink-2);} .notice{ display:flex; gap:10px; padding:13px 15px; border-radius:15px; background:var(--primary-soft); color:var(--primary-ink); font-size:13.5px; align-items:flex-start; margin-bottom:14px; } .notice svg{flex:none; margin-top:1px;} .notice.warn{background:var(--warn-bg); color:var(--warn);} .notice.bad{background:var(--bad-bg); color:var(--bad);} .empty{text-align:center; color:var(--ink-2); padding:42px 20px; font-size:14px;} .legend{margin-top:26px; color:var(--ink-2); font-size:13.5px; text-align:center;} .legend b{color:var(--ink);} /* Поля ввода */ label.field, .field{display:block; margin-top:13px;} .field > span{ display:block; font-family:var(--font-d); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-bottom:6px; } .field input, .field select, .field textarea, select, input[type=text], input[type=number], input[type=email], input[type=password], input[type=tel]{ width:100%; padding:13px 15px; border-radius:14px; border:1.5px solid var(--line); background:var(--surface-2); color:var(--ink); font-family:var(--font-b); font-size:15px; } .field textarea{resize:vertical; min-height:80px;} input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:none; border-color:var(--primary-ink); background:var(--surface); box-shadow:0 0 0 3px var(--primary-soft); } .req-mark{color:var(--bad);} .badge-note{color:var(--ink-2); font-size:11.5px; margin-top:6px;} /* Поле пароля с «глазом» */ .pwfield, .pw-wrap{position:relative; display:block;} .pwfield input, .pw-wrap input{padding-right:46px;} .pweye, .pw-toggle{ position:absolute; right:7px; top:50%; transform:translateY(-50%); background:none; border:none; padding:9px; cursor:pointer; color:var(--ink-2); line-height:0; display:flex; align-items:center; } .pweye:hover, .pw-toggle:hover{color:var(--ink);} .pweye .i-eye-off, .pw-toggle .i-eye-off{display:none;} .pweye.shown .i-eye, .pw-toggle.shown .i-eye{display:none;} .pweye.shown .i-eye-off, .pw-toggle.shown .i-eye-off{display:block;} /* Выбор одного из нескольких (категория прав, статус документа) */ .choice-row{display:flex; gap:7px; flex-wrap:wrap; margin-top:6px;} .choice-row label{ flex:1; min-width:88px; text-align:center; background:var(--surface); border:1.5px solid var(--line); border-radius:99px; padding:9px 8px; font-family:var(--font-d); font-size:12.5px; font-weight:700; color:var(--ink-2); cursor:pointer; user-select:none; } .choice-row input{display:none;} .choice-row label:has(input:checked){background:var(--primary-soft); border-color:var(--primary-ink); color:var(--primary-ink);} .checkbox-row{display:flex; align-items:center; gap:10px; margin-top:14px; font-size:13.5px;} .checkbox-row input{width:19px; height:19px; accent-color:var(--primary-ink); flex:none;} /* Шаги регистрации */ .steps{display:flex; align-items:center; justify-content:center; margin:4px 0 18px; counter-reset:step;} .steps i{ counter-increment:step; width:28px; height:28px; border-radius:99px; flex:none; background:var(--surface); border:1.5px solid var(--line); color:var(--ink-2); display:grid; place-items:center; font-style:normal; font-family:var(--font-d); font-size:12.5px; font-weight:700; } .steps i::before{content:counter(step);} .steps i.on{background:var(--primary); border-color:var(--primary-ink); color:var(--on-primary);} .steps i + i{margin-left:34px; position:relative;} .steps i + i::after{content:""; position:absolute; right:100%; top:50%; width:34px; height:2px; background:var(--line); transform:translateY(-50%);} .steps i.on + i.on::after{background:var(--primary);} /* --------------------------------------------------------- Логотип-марка -- */ .brandmark{ font-family:var(--font-d); font-weight:800; font-size:23px; margin:8px 0 0; display:flex; align-items:center; justify-content:center; gap:.42em; color:var(--ink); text-decoration:none; } .brandmark .logo{width:1.32em; height:1.32em; flex:none; display:block; object-fit:contain;} .brandmark .wordmark{letter-spacing:.13em; line-height:1;} .brandmark .leaf-dark{fill:var(--ink);} .brandmark .leaf-lime{fill:#A3D219;} /* Логотип в шапке ленты вместо заголовка — как в прототипе: слева, мелко, и он же занимает место заголовка, поэтому flex:1. */ .brandmark.inbar{font-size:16px; margin:0; flex:1; justify-content:flex-start;} .brandmark.on-photo{color:#fff; font-size:30px; margin:0;} .brandmark.on-photo .leaf-dark{fill:#fff;} /* ------------------------------------------------- Экран выбора роли (/auth) */ .role-screen{ position:relative; display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; padding:18px 18px calc(22px + env(safe-area-inset-bottom)); overflow:hidden; isolation:isolate; } .role-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;} .role-scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(20,26,32,.30) 0%, rgba(20,26,32,.52) 42%, rgba(20,26,32,.82) 100%); } .role-top{text-align:center; padding-top:18px;} .role-top h1{margin:16px 0 4px; font-size:31px; font-weight:800; color:#fff; letter-spacing:-.02em;} .role-top p{margin:0; color:rgba(255,255,255,.78); font-size:13.5px;} .role-cards{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:auto auto 20px; width:100%; max-width:420px; } .role-card{ border:none; cursor:pointer; text-align:left; padding:0; overflow:hidden; text-decoration:none; border-radius:18px; display:flex; flex-direction:column; background:#242B33; box-shadow:0 0 0 4px rgba(163,210,25,.20), 0 14px 32px rgba(8,12,18,.5); } .role-card .shot{display:block; width:100%; height:132px; object-fit:cover; background:#E8EAEC;} .role-card .cap{padding:11px 13px 14px; color:#fff; flex:1;} .role-card .cap b{font-family:var(--font-d); font-size:15px; font-weight:700; display:block; letter-spacing:-.01em; line-height:1.2;} .role-card .cap small{display:block; color:rgba(255,255,255,.7); font-size:11.5px; margin-top:3px;} .role-card:hover, .role-card:focus-visible{ box-shadow:0 0 0 4px rgba(163,210,25,.85), 0 0 26px 6px rgba(163,210,25,.45), 0 14px 32px rgba(8,12,18,.5); } /* Вход партнёра на экране «Кто вы?»: строкой под карточками — не массовый сценарий, но и не спрятанная служебная дверь, как вход для сотрудников. */ .role-partner{ display:flex; align-items:center; gap:12px; width:100%; max-width:420px; margin:0 auto 16px; padding:12px 15px; border-radius:16px; text-decoration:none; color:#fff; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20); backdrop-filter:blur(4px); } .role-partner:hover{background:rgba(163,210,25,.20); border-color:var(--primary);} .role-partner .ico{ width:34px; height:34px; border-radius:11px; flex:none; display:grid; place-items:center; background:rgba(255,255,255,.14); } .role-partner b{font-family:var(--font-d); font-size:14.5px; font-weight:700; display:block;} .role-partner small{color:rgba(255,255,255,.72); font-size:12px;} .role-partner .chev{margin-left:auto; color:rgba(255,255,255,.6); font-size:20px; line-height:1;} .role-skip{ align-self:center; background:none; border:none; cursor:pointer; padding:6px; color:rgba(255,255,255,.82); font-family:var(--font-b); font-size:14px; text-decoration:underline; text-underline-offset:4px; } .role-skip:hover{color:var(--primary);} .role-lang{position:absolute; top:16px; right:16px; display:flex; gap:2px; font-size:11.5px; font-weight:700; z-index:2;} .role-lang a{color:rgba(255,255,255,.7); text-decoration:none; padding:5px 9px; border-radius:7px; letter-spacing:.03em;} .role-lang a.active{color:#fff; background:rgba(255,255,255,.16);} .role-continue{ display:block; text-align:center; color:#fff; font-weight:700; font-size:13.5px; margin-top:14px; text-decoration:none; } .role-foot{display:flex; gap:10px; align-items:center; justify-content:center; margin-top:16px; color:rgba(255,255,255,.6); font-size:12.5px;} .role-foot a{color:rgba(255,255,255,.72); text-decoration:none;} .role-foot a:hover{color:var(--primary);} /* ------------------------------------------------ Формы входа/регистрации -- */ .auth-page{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:var(--ground); } .auth-wrap{width:100%; max-width:420px; margin:0 auto; padding:0 18px 32px;} .auth-card{margin-top:6px;} .auth-error{color:var(--bad); font-weight:600; margin:0 0 14px; font-size:13.5px;} .auth-switch{text-align:center; margin-top:18px; font-size:13.5px; color:var(--ink-2);} .auth-tabs{display:flex; gap:28px; border-bottom:1px solid var(--line); margin-bottom:22px;} .auth-tab{ background:none; border:none; color:var(--ink-2); padding:0 0 12px; margin-bottom:-1px; font-family:var(--font-d); font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; border-bottom:2px solid transparent; text-decoration:none; } .auth-tab.active{color:var(--ink); border-bottom-color:var(--primary);} .auth-panel[hidden]{display:none;} /* --------------------------------------------------------- Карточка ленты -- */ .feedcard{overflow:hidden; border-radius:24px; box-shadow:var(--shadow-m); border:none; background:var(--surface); margin-bottom:14px;} .feedcard .art{height:210px; position:relative; background:#2B333C;} .feedcard .art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .feedcard .art .scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,14,30,.05) 55%, rgba(6,14,30,.5) 100%);} /* Кандидат без фото: инициал на графите. Стоковое лицо вместо реального человека вводило бы компанию в заблуждение, поэтому именно буква, а не картинка. */ .feedcard .art .initial{ position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(140deg,#3A434E,#232A32); color:rgba(255,255,255,.9); font-family:var(--font-d); font-size:64px; font-weight:800; letter-spacing:.02em; } .feedcard .art .pay{ position:absolute; left:14px; bottom:12px; background:rgba(255,255,255,.94); color:#232A32; padding:8px 14px; border-radius:13px; font-family:var(--font-d); font-weight:800; font-size:17.5px; box-shadow:0 6px 18px rgba(4,10,24,.35); font-variant-numeric:tabular-nums; } .feedcard .art .pay em{font-style:normal; font-size:11.5px; font-weight:600; color:#6E7883;} .feedcard .art .flag{ position:absolute; right:14px; top:14px; background:var(--grad-btn); color:#232A32; padding:5px 12px; border-radius:99px; font-family:var(--font-d); font-size:11px; font-weight:700; letter-spacing:.04em; box-shadow:0 4px 12px rgba(143,187,18,.45); } .feedcard .meat{padding:16px 18px 18px;} .feedcard h3{margin:0 0 2px; font-size:21px; font-weight:800; letter-spacing:-.01em;} .feedcard .where{color:var(--ink-2); font-size:13.5px;} .perks{margin:14px 0 0; padding:13px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px;} .perks div{font-size:13.5px; color:var(--ink-2); display:flex; gap:9px; align-items:flex-start;} .perks .tick{ flex:none; width:18px; height:18px; border-radius:99px; background:var(--ok-bg); color:var(--ok); display:grid; place-items:center; margin-top:1px; } .swipebar{display:grid; grid-template-columns:56px 1fr 1.35fr; gap:10px; margin-top:14px;} .swipebar button, .swipebar a{ border-radius:16px; padding:13px 6px; cursor:pointer; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-family:var(--font-d); font-size:13.5px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:7px; box-shadow:var(--shadow-s); text-decoration:none; } .swipebar .like{background:var(--grad-btn); color:var(--on-primary); border-color:transparent; box-shadow:var(--shadow-btn);} .swipebar .like:hover{filter:brightness(1.06);} .swipebar .skip{color:var(--ink-2);} .swipebar .skip:hover{border-color:var(--bad); color:var(--bad);} .swipebar .more:hover{border-color:var(--primary-ink); color:var(--primary-ink);} .counter{text-align:center; font-family:var(--font-d); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin:12px 0 2px;} /* ------------------------------------------------ Список подбора (ТЗ 22.08) -- Компании/кандидаты списком, а не по одной: процент совпадения — главный акцент, лайк ставится прямо в списке и ничего не листает. На широком экране — сетка. */ .page.feed{max-width:1040px;} .feed-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px;} .filters-btn{ display:inline-flex; align-items:center; gap:7px; flex:none; margin-top:4px; padding:10px 14px; border-radius:13px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-family:var(--font-d); font-size:13.5px; font-weight:700; cursor:pointer; box-shadow:var(--shadow-s); } .filters-btn:hover{border-color:var(--primary-ink); color:var(--primary-ink);} .filters-btn.on{border-color:var(--primary-ink); color:var(--primary-ink); background:var(--primary-soft);} .filters-btn b{background:var(--primary); color:var(--on-primary); border-radius:99px; min-width:20px; height:20px; padding:0 6px; display:grid; place-items:center; font-size:11.5px;} .feed-meta{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px;} .feed-meta .count b{display:block; font-family:var(--font-d); font-size:15px; font-weight:700;} .feed-meta .count small{display:block; color:var(--ink-2); font-size:12.5px;} .sortbox select{ appearance:none; -webkit-appearance:none; padding:9px 30px 9px 12px; border-radius:12px; border:1px solid var(--line); background:var(--surface) url("data:image/svg+xml;utf8,") no-repeat right 10px center; color:var(--ink); font-family:var(--font-d); font-size:13px; font-weight:700; cursor:pointer; box-shadow:var(--shadow-s); } .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;} .mlist{display:grid; gap:12px; margin-bottom:6px;} .mcard{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-s); padding:16px 16px 14px; display:flex; flex-direction:column; gap:8px; } .mcard.liked{border-color:var(--primary);} .mpct{ position:absolute; top:14px; right:14px; border:none; cursor:pointer; padding:7px 11px 6px; border-radius:14px; background:var(--grad-btn); color:var(--on-primary); box-shadow:0 6px 16px rgba(143,187,18,.38); display:flex; flex-direction:column; align-items:center; line-height:1; gap:2px; font-family:var(--font-d); } .mpct b{font-size:21px; font-weight:800; letter-spacing:-.02em;} .mpct small{font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.8;} .mpct[aria-expanded="true"]{background:var(--graphite); color:#fff; box-shadow:none;} .mpct.lock{background:var(--graphite); color:#fff; box-shadow:none; cursor:default;} .mpct.lock b{font-size:18px;} /* Компания, поиск кандидатов: звезда «в избранное» переехала из строки с именем под процент совпадения — стоит колонкой на месте прежнего .mpct, тот сам становится обычным элементом потока внутри .mcorner (не своим absolute). */ .mcorner{position:absolute; top:14px; right:14px; display:flex; flex-direction:column; align-items:flex-end; gap:7px;} .mcorner .mpct{position:static;} .mcorner .starbtn.pctstar{width:38px; height:38px; border-radius:13px;} /* min-width:0 на карточке обязателен: грид-ячейка иначе растягивается под min-content длинного названия и страница уезжает вбок (поймано на 390px). */ .mlist > *{min-width:0;} /* padding-right резервирует место под absolute-плашку «NN% · СОВПАДЕНИЕ» (.mcorner): 86px не хватало — длинное имя заезжало под плашку (Сергей, скрин 23.08). */ .mhead{display:flex; gap:12px; align-items:center; padding-right:112px; min-width:0;} .mhead .ava{width:48px; height:48px; border-radius:14px; font-size:17px;} .mtitle{min-width:0; flex:1 1 auto; overflow:hidden;} .mtitle h3{ font-size:17.5px; font-weight:800; letter-spacing:-.01em; margin:0; line-height:1.2; text-wrap:initial; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; } .mtitle .where{color:var(--ink-2); font-size:13px;} .mpay{font-family:var(--font-d); font-size:20px; font-weight:800; letter-spacing:-.01em; margin-top:2px; overflow-wrap:anywhere;} .mpay em{font-style:normal; font-size:12.5px; font-weight:600; color:var(--ink-2);} .mpay.muted{font-size:13.5px; font-weight:600;} /* Зарплата свободным текстом («посуточно: до 6 мес 84€…») — не кричим 20px, читаем как условие. */ .mpay.long{font-size:14.5px; font-weight:700; line-height:1.35;} .mline{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13.5px; color:var(--ink-2);} .mline .chip{padding:4px 9px;} .mline .sched{font-family:var(--font-d); font-weight:800; color:var(--ink); font-size:15px; background:var(--surface-2); padding:3px 9px; border-radius:9px;} .mdir{font-size:13.5px; color:var(--ink);} .mcard .chiprow{margin-top:2px;} .why{ margin-top:4px; padding:12px 14px; border-radius:14px; background:var(--surface-2); display:flex; flex-direction:column; gap:7px; font-size:13.5px; } .why div{display:flex; gap:9px; align-items:flex-start; color:var(--ink);} .why .mark{flex:none; width:20px; height:20px; border-radius:99px; display:grid; place-items:center; font-size:12px; font-weight:700; margin-top:1px;} .why .ok .mark{background:var(--ok-bg); color:var(--ok);} .why .warn .mark{background:var(--warn-bg); color:var(--warn);} .why .warn{color:var(--ink-2);} .mactions{display:grid; grid-template-columns:1fr 1.25fr; gap:9px; margin-top:6px;} .mactions a, .mactions button{ border-radius:14px; padding:12px 8px; cursor:pointer; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-family:var(--font-d); font-size:13.5px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; box-shadow:var(--shadow-s); } .mactions .more:hover{border-color:var(--primary-ink); color:var(--primary-ink);} .mactions .like{background:var(--grad-btn); color:var(--on-primary); border-color:transparent; box-shadow:var(--shadow-btn);} .mactions .like:hover{filter:brightness(1.06);} .mactions .like.liked, .mactions .like:disabled{background:var(--primary-soft); color:var(--primary-ink); box-shadow:none; opacity:1; cursor:default; filter:none;} .mcard.locked{opacity:.92;} .mcard.locked .ava{background:var(--surface-2); color:var(--ink-2);} .toast{ position:fixed; left:50%; bottom:calc(var(--nav-h) + 14px); transform:translateX(-50%); z-index:60; background:var(--graphite); color:#fff; padding:11px 16px; border-radius:14px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow-m); max-width:min(92vw, 420px); text-align:center; } @media (min-width:820px){ .mlist{grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px;} .feed-head{margin-top:6px;} } /* Панель фильтров: bottom sheet на телефоне, боковая панель на широком экране. */ .sheet-backdrop{position:fixed; inset:0; background:rgba(20,26,32,.45); z-index:55;} .sheet{ position:fixed; left:0; right:0; bottom:0; z-index:56; max-height:88vh; max-height:88dvh; background:var(--ground); border-radius:22px 22px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.25); display:flex; flex-direction:column; } .sheet-head{display:flex; align-items:center; gap:10px; padding:14px 16px 8px;} .sheet-head .title{font-family:var(--font-d); font-weight:700; font-size:17px; flex:1;} .sheet-body{overflow-y:auto; padding:0 16px; flex:1; -webkit-overflow-scrolling:touch;} .sheet-foot{padding:12px 16px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--ground);} .fgroup{padding:4px 0 2px;} .fgroup-title{font-family:var(--font-d); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--primary-ink); margin:14px 0 -6px;} .sheet .frow{padding:13px 0;} body.sheet-open{overflow:hidden;} @media (min-width:820px){ .sheet{left:auto; top:0; bottom:0; width:440px; max-height:none; border-radius:0; box-shadow:-10px 0 40px rgba(0,0,0,.2);} } /* ------------------------------------------------------- Экран совпадения -- */ .match-screen{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px 24px; text-align:center; gap:4px; position:relative; overflow:hidden; background:radial-gradient(90% 55% at 50% 18%, #3E4A2A 0%, #2B333C 56%, #1B2128 100%); color:#F4F7EE; } .match-screen .eyebrow{color:#B8E62E;} .match-screen h2{font-size:32px; font-weight:800; margin:0; letter-spacing:-.02em; color:#fff;} .match-screen .muted{color:#A8B3A0;} .match-screen .actions{width:100%; max-width:340px; display:flex; flex-direction:column; gap:10px; position:relative; z-index:2;} .match-screen .btn{box-shadow:0 10px 26px rgba(160,206,30,.45); color:#1A2008;} .match-screen .btn.sec{background:rgba(255,255,255,.08); color:#E4F7F4; border:1px solid rgba(255,255,255,.22); box-shadow:none;} .match-screen .btn.sec:hover{border-color:#B8E62E; color:#fff;} .confetti{position:absolute; inset:0; pointer-events:none;} .confetti i{position:absolute; width:7px; height:7px; border-radius:2px; opacity:.85; animation:drift 5s ease-in-out infinite alternate;} .confetti i:nth-child(1){left:12%; top:16%; background:#B8E62E; transform:rotate(15deg);} .confetti i:nth-child(2){left:26%; top:34%; background:#FFD166; transform:rotate(40deg); animation-delay:.4s;} .confetti i:nth-child(3){left:78%; top:14%; background:#B8E62E; transform:rotate(-20deg); animation-delay:.8s;} .confetti i:nth-child(4){left:88%; top:38%; background:#B8E62E; transform:rotate(60deg); animation-delay:1.2s;} .confetti i:nth-child(5){left:8%; top:58%; background:#D9F27A; transform:rotate(-35deg); animation-delay:.2s;} .confetti i:nth-child(6){left:90%; top:64%; background:#FFD166; transform:rotate(10deg); animation-delay:1s;} .confetti i:nth-child(7){left:20%; top:78%; background:#B8E62E; transform:rotate(75deg); animation-delay:.6s;} .confetti i:nth-child(8){left:72%; top:82%; background:#D9F27A; transform:rotate(-50deg); animation-delay:1.4s;} @keyframes drift{from{translate:0 0;}to{translate:0 14px;}} .match-pair{display:flex; align-items:center; margin:26px 0 30px; position:relative; z-index:2;} .match-ava{ width:108px; height:108px; border-radius:99px; overflow:hidden; border:4px solid rgba(255,255,255,.9); box-shadow:0 0 0 6px rgba(184,230,46,.3), 0 18px 40px rgba(0,0,0,.5); background:#2B333C; display:grid; place-items:center; color:#fff; font-family:var(--font-d); font-size:30px; font-weight:700; } .match-ava img{width:100%; height:100%; object-fit:cover;} .match-link{ width:48px; height:48px; border-radius:99px; background:var(--grad-btn); color:#1A2008; display:grid; place-items:center; margin:0 -16px; z-index:2; border:4px solid #2B333C; box-shadow:0 6px 18px rgba(160,206,30,.55); } /* ------------------------------------------------------- Списки и строки -- */ .list{display:flex; flex-direction:column; gap:9px;} .listrow{ display:flex; gap:12px; align-items:center; padding:13px 15px; cursor:pointer; background:var(--surface); border:1px solid var(--line); border-radius:18px; text-align:left; width:100%; font-family:var(--font-b); color:inherit; font-size:15px; box-shadow:var(--shadow-s); text-decoration:none; } .listrow:hover{border-color:var(--primary-ink);} .ava{ width:46px; height:46px; border-radius:99px; flex:none; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary-ink); font-family:var(--font-d); font-weight:700; font-size:14px; overflow:hidden; } .ava img{width:100%; height:100%; object-fit:cover;} .ava.lg{width:76px; height:76px; font-size:24px;} .listrow .txt{flex:1; min-width:0;} .listrow .txt b{display:block; font-family:var(--font-d); font-size:14.5px; font-weight:700;} .listrow .txt small{display:block; color:var(--ink-2); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .listrow .when{font-size:11.5px; color:var(--ink-2); font-family:var(--font-d); flex:none; align-self:flex-start; margin-top:2px;} .unread{ background:var(--primary); color:var(--on-primary); border-radius:99px; min-width:20px; height:20px; display:grid; place-items:center; font-family:var(--font-d); font-size:11px; font-weight:700; padding:0 6px; flex:none; } .seg{display:flex; gap:6px; margin:2px 0 14px;} .seg a, .seg button{ flex:1; padding:9px 4px; border-radius:99px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-family:var(--font-d); font-size:12px; font-weight:700; cursor:pointer; text-align:center; text-decoration:none; } .seg .on{background:var(--primary); color:var(--on-primary); border-color:transparent; box-shadow:var(--shadow-btn);} /* Красная плашка «требует ответа» в углу вкладки сегмента (Лайки → «Мне»): та же .badge-dot, что на иконках меню, — одна механика по всей цепочке. */ .seg a, .seg button{position:relative;} .seg .badge-dot{top:-6px; right:-3px;} /* Кружок уведомления окрашен по смыслу события: решение по анкете — зелёное, ожидание — жёлтое, отказ — красное. Цвет тут несёт информацию, не украшает. */ .ava.note-ok{background:var(--ok-bg); color:var(--ok);} .ava.note-warn{background:var(--warn-bg); color:var(--warn);} .ava.note-bad{background:var(--bad-bg); color:var(--bad);} .ava.note-pri{background:var(--grad-btn); color:var(--on-primary);} .ava.note-plain{background:var(--surface-2); color:var(--ink-2);} /* ------------------------------------------------------------------ Чат -- */ .thread{display:flex; flex-direction:column; gap:9px; padding:6px 0 12px;} .daymark{text-align:center; font-family:var(--font-d); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin:6px 0;} .bub{max-width:80%; padding:11px 14px; border-radius:18px; font-size:14.5px; position:relative; box-shadow:var(--shadow-s); white-space:pre-wrap;} .bub.them{background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:6px; align-self:flex-start;} .bub.me{background:var(--grad-btn); color:var(--on-primary); border-bottom-right-radius:6px; align-self:flex-end; box-shadow:0 4px 14px rgba(143,187,18,.3);} .bub time{display:block; font-size:10.5px; opacity:.72; margin-top:4px; font-family:var(--font-d); font-variant-numeric:tabular-nums;} /* Галочки статуса (п.14 правил 01.09): ✓ отправлено (ждём сервер), ✓✓ доставлено, ✓✓ синие — прочитано. Видны только отправителю, на своих пузырях. */ .bub .tick{letter-spacing:-.14em; margin-left:2px; font-weight:700;} /* «Прочитано» — зелёные (Сергей, 01.09): свой пузырь в кабинете синий (px-skin), синие галочки на нём слепли. Здесь — токен --ok, на синем пузыре px-skin уточняет оттенок. */ .bub .tick.read{color:var(--ok);} .bub.pending{opacity:.6;} .listrow .tick{letter-spacing:-.14em; font-weight:700; color:var(--ink-2);} .listrow .tick.read{color:var(--ok);} /* Закрытый чат — список требований с кнопками (ч.2 правил 01.09): что мешает → куда нажать. */ .reqbox{background:var(--warn-bg); color:var(--warn); border-radius:16px; padding:12px 14px; margin:8px 0 12px; font-size:13.5px;} .reqbox .reqhead{font-weight:700; margin-bottom:6px;} .reqbox .req{display:flex; align-items:center; gap:8px; padding:8px 0; border-top:1px solid rgba(0,0,0,.07);} .reqbox .req .mark{flex:none; width:20px; text-align:center;} .reqbox .req .txt{flex:1; min-width:0; font-weight:600;} .reqbox .req .act{flex:none; font-weight:700; color:inherit; text-decoration:underline; text-underline-offset:3px; white-space:nowrap;} .reqbox .req.soft .txt{font-weight:500;} .reqbox .hint-line{margin-top:8px; font-size:12px; text-align:left; opacity:.9;} .locknote a{color:inherit; font-weight:700;} .locknote.soft{background:var(--surface); border:1px solid var(--line); color:var(--ink-2); font-weight:500;} /* «Остальные» — не подходят под фильтры, но доступны (01.09: фильтр = приоритет, не скрытие). */ .feed-rest{margin-top:14px;} .feed-rest > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 14px; border-radius:16px; background:var(--surface); border:1px solid var(--line); font-weight:700; color:var(--ink);} .feed-rest > summary::-webkit-details-marker{display:none;} .feed-rest > summary::before{content:'▸'; color:var(--ink-2);} .feed-rest[open] > summary::before{content:'▾';} .feed-rest > summary small{font-weight:500; color:var(--ink-2);} .feed-rest[open] > summary{margin-bottom:10px;} .guard{display:flex; gap:8px; align-items:center; justify-content:center; margin:12px 0 2px; color:var(--ink-2); font-size:12.5px; text-align:center;} /* «По рукам» — блок над полем ввода. Намеренно отдельной плашкой, а не ещё одной кнопкой в ряду: это не действие в переписке, а выход из неё в оформление. */ .deal-bar{ background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-s); padding:14px 16px; margin:8px 0 12px; display:flex; flex-direction:column; gap:10px; } .deal-bar.done{background:var(--ok-bg); border-color:transparent; box-shadow:none;} .deal-state{ display:flex; gap:8px; align-items:center; justify-content:center; text-align:center; font-size:13.5px; color:var(--ink-2); } .deal-state b{color:var(--ink);} .deal-bar.done .deal-state, .deal-bar.done .deal-state b{color:var(--ok);} .i-emoji{font-size:1.15em; line-height:1;} /* «По рукам» — круглая кнопка над «отправить» (Сергей, 01.09): рукопожатие в кружке с неоново-зелёным ореолом, чуть крупнее кнопки отправки (44 → 52px). Состояния: pulse — вторая сторона уже нажала, ждёт вас; wait — вы нажали, ждём вторую; done — обе стороны, заполненный зелёный (small — в плашке сверху). */ .deal-orb{ position:absolute; right:0; bottom:calc(100% + 4px); width:52px; height:52px; border-radius:50%; border:none; background:var(--surface); color:var(--ink); display:grid; place-items:center; cursor:pointer; padding:0; z-index:3; font-size:24px; line-height:1; box-shadow:0 0 0 3px rgba(77,255,154,.55), 0 0 18px 6px rgba(77,255,154,.55), 0 6px 16px rgba(0,0,0,.14); transition:transform .15s ease; } .deal-orb .i-emoji{font-size:26px;} .deal-orb:active{transform:scale(.94);} .deal-orb.pulse{animation:deal-pulse 1.6s ease-in-out infinite;} .deal-orb .dot{position:absolute; top:1px; right:1px; width:13px; height:13px; border-radius:50%; background:#4DFF9A; border:2px solid var(--surface);} .deal-orb.wait, .deal-orb:disabled{box-shadow:0 0 0 3px rgba(120,130,150,.25), 0 6px 14px rgba(0,0,0,.08); opacity:.7; cursor:default; animation:none;} .deal-orb.done{background:linear-gradient(180deg,#5CF29C,#22C55E); color:#fff; cursor:default; box-shadow:0 0 0 3px rgba(77,255,154,.4), 0 0 14px 4px rgba(77,255,154,.5);} .deal-orb.small{position:static; width:38px; height:38px; flex:none;} .deal-orb.small .i-emoji{font-size:19px;} @keyframes deal-pulse{ 0%,100%{box-shadow:0 0 0 3px rgba(77,255,154,.55), 0 0 18px 6px rgba(77,255,154,.55), 0 6px 16px rgba(0,0,0,.14);} 50%{box-shadow:0 0 0 8px rgba(77,255,154,.22), 0 0 30px 12px rgba(77,255,154,.9), 0 6px 16px rgba(0,0,0,.14);} } @media (prefers-reduced-motion: reduce){.deal-orb.pulse{animation:none;}} .guard.has-orb{padding-right:64px;} /* Плавающая кнопка поддержки (Сергей, 01.09): правый нижний угол над нижним меню, голова с гарнитурой в зелёном кружке, лёгкое зелёное свечение. Над панелью «Сохранить» поднимается выше, чтобы не перекрывать кнопку. */ .support-fab{ position:fixed; right:16px; bottom:calc(var(--nav-h) + 16px); z-index:41; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(180deg,#5CF29C,#22C55E); color:#fff; text-decoration:none; box-shadow:0 0 0 3px rgba(77,255,154,.28), 0 0 14px 4px rgba(77,255,154,.4), 0 8px 18px rgba(0,0,0,.18); transition:transform .15s ease; } .support-fab:active{transform:scale(.94);} .support-fab .badge-dot{top:-2px; right:-2px;} body:has(.save-bar) .support-fab{bottom:calc(var(--nav-h) + 92px);} /* Уведомления: свайп и пометка «новое» (Сергей, 01.09). */ .notif-list{overflow:hidden;} .listrow.notif{touch-action:pan-y; user-select:none; -webkit-user-select:none; transition:transform .2s ease, opacity .2s ease, height .25s ease, margin .25s ease, padding .25s ease; will-change:transform;} .listrow.notif.new .txt b{font-weight:800;} .listrow.notif .newdot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--bad); margin-right:6px; vertical-align:middle;} .composer{ position:sticky; bottom:0; display:flex; gap:9px; align-items:center; padding:11px 0 calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--ground); /* sticky — позиционированный элемент, так что .deal-orb (absolute) считается от композера. */ } .composer input{ flex:1; padding:12px 16px; border-radius:99px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font-family:var(--font-b); font-size:14.5px; } .composer .send{ width:44px; height:44px; border-radius:99px; background:var(--grad-btn); color:var(--on-primary); border:none; display:grid; place-items:center; cursor:pointer; flex:none; box-shadow:var(--shadow-btn); padding:0; } .composer .send:disabled{opacity:.5; box-shadow:none; cursor:default;} /* -------------------------------------------------------------- Профили -- */ .hero{border-radius:24px; overflow:hidden; position:relative; background:var(--surface); box-shadow:var(--shadow-m); border:none;} .hero-split{position:relative; height:190px; background:var(--surface);} .hero-split img{position:absolute; right:0; top:0; width:64%; height:100%; object-fit:cover; clip-path:polygon(20% 0, 100% 0, 100% 100%, 0 100%);} /* Фото в шапке профиля — обёртка, а не голый : avatar.js после загрузки подменяет содержимое контейнера целиком (box.innerHTML), ему нужен именно контейнер. */ .hero-photo{ position:absolute; right:0; top:0; width:64%; height:100%; overflow:hidden; clip-path:polygon(20% 0, 100% 0, 100% 100%, 0 100%); background:var(--surface-2); } .hero-photo img{position:static; width:100%; height:100%; object-fit:cover; clip-path:none;} .hero-empty{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--ink-2); padding-left:14%; text-align:center; } .hero-empty b{font-family:var(--font-d); font-size:24px; font-weight:700; line-height:1;} .hero-empty small{font-size:11.5px;} .hero-cam{ position:absolute; right:12px; bottom:12px; z-index:3; width:34px; height:34px; border-radius:99px; background:var(--grad-btn); color:var(--on-primary); border:3px solid var(--surface); display:grid; place-items:center; cursor:pointer; padding:0; box-shadow:var(--shadow-btn); } .hero-cam input{display:none;} .hero-split .left{position:absolute; left:0; top:0; bottom:0; width:46%; padding:18px 0 16px 18px; display:flex; flex-direction:column; justify-content:center;} .hero-split h2{margin:0 0 9px; font-size:23px; font-weight:800; letter-spacing:-.015em; line-height:1.12;} .cat-badge{ display:inline-block; align-self:flex-start; background:var(--graphite); color:#fff; font-family:var(--font-d); font-weight:800; font-size:17px; letter-spacing:.06em; padding:5px 13px; border-radius:9px; } .hero-full{height:150px; position:relative; background:#2B333C;} .hero-full img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} /* Та же причина, что у .hero-photo: avatar.js подменяет содержимое контейнера. */ .hero-cover{position:absolute; inset:0; overflow:hidden;} .hero-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .hero .meat{padding:15px 18px 17px;} .hero .meat h2{margin:0 0 2px; font-size:22px; font-weight:800; letter-spacing:-.015em;} .sec-title{display:flex; align-items:baseline; justify-content:space-between; margin:22px 0 10px; gap:10px;} .sec-title h3{margin:0; font-size:16.5px; font-weight:700;} .kv{display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14.5px; align-items:center;} .kv:last-child{border-bottom:none;} .kv .k{color:var(--ink-2);} .docrow{display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--line);} .docrow:last-child{border-bottom:none;} .docrow .ico{width:40px; height:40px; border-radius:13px; background:var(--primary-soft); display:grid; place-items:center; color:var(--primary-ink); flex:none;} .docrow .txt{flex:1; min-width:0;} .docrow .txt b{display:block; font-family:var(--font-d); font-size:14.5px; font-weight:700;} .docrow .txt small{color:var(--ink-2); font-size:12.5px;} /* ------------------------------------------------- Панель управления -------- Экран сотрудницы/владельца: метрики, воронка с конверсией, разрез по каналам. Визуал перенесён из прототипа «VLG Match». */ /* Именно .dashboard, а не .dash: короткое имя уже занято декоративной чёрточкой выше (`width:26px`), и контейнер панели наследовал от неё ширину — экран схлопывался в узкую колонку. */ .dashboard{max-width:1100px; margin:0 auto; padding:0 16px 40px;} .dash-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:6px 0 20px;} .dash-head h1{font-size:24px; font-weight:800; letter-spacing:-.02em;} .dash-head .sub{color:var(--ink-2); font-size:13.5px; margin-top:3px;} /* Метрики намеренно компактные: их четыре в ряд, и крупные плитки занимали пол-экрана, не добавляя смысла (правка Сергея 20.08 — «чуть-чуть меньше и элегантней»). */ .metrics{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:20px;} .metric{background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-s); padding:13px 15px;} .metric .n{font-family:var(--font-d); font-size:23px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.15;} .metric .label{color:var(--ink-2); font-size:12px; margin-top:2px;} .metric .delta{font-family:var(--font-d); font-size:11px; font-weight:700; color:var(--ok); margin-top:5px;} .metric .delta.flat{color:var(--ink-2); font-weight:600;} /* Переключатель разреза: вся сеть / только наши / конкретный партнёр */ .scope-bar{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px;} .scope-bar a{ padding:7px 13px; border-radius:99px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink-2); font-family:var(--font-d); font-size:12.5px; font-weight:700; text-decoration:none; } .scope-bar a:hover{border-color:var(--primary-ink); color:var(--primary-ink);} .scope-bar a.on{background:var(--primary-soft); border-color:var(--primary-ink); color:var(--primary-ink);} /* Воронка: полоса на всю ширину этапа + подпись конверсии от предыдущего */ .funnel{background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-s); padding:18px 20px; margin-bottom:22px;} .funnel-row{display:flex; align-items:center; gap:12px; padding:9px 0;} .funnel-row .name{width:150px; flex:none; font-size:13.5px;} .funnel-track{flex:1; height:26px; background:var(--surface-2); border-radius:8px; overflow:hidden; position:relative;} .funnel-fill{height:100%; background:var(--grad-btn); border-radius:8px; min-width:2px;} .funnel-row .num{ width:52px; flex:none; text-align:right; font-family:var(--font-d); font-weight:700; font-variant-numeric:tabular-nums; font-size:15px; } .funnel-row .conv{width:66px; flex:none; text-align:right; font-size:12.5px; color:var(--ink-2); font-variant-numeric:tabular-nums;} .funnel-row .conv.low{color:var(--bad);} @media (max-width:640px){ .funnel-row{flex-wrap:wrap;} .funnel-row .name{width:100%;} .funnel-row .conv{width:auto;} } /* Каналы */ .chan-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin-bottom:22px;} .chan{background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-s); padding:16px 18px;} .chan .top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;} .chan .top b{font-family:var(--font-d); font-size:15px;} .chan-line{display:flex; justify-content:space-between; gap:10px; padding:6px 0; font-size:13.5px; border-bottom:1px solid var(--line);} .chan-line:last-child{border-bottom:none;} .chan-line span:last-child{font-variant-numeric:tabular-nums; font-weight:600;} /* Ссылка партнёра в карточке */ .partner-link{ display:flex; align-items:center; gap:8px; margin-bottom:10px; padding:8px 10px; background:var(--surface-2); border:1px dashed var(--line); border-radius:12px; } .partner-link code{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; color:var(--primary-ink); } .partner-link .btn-sm{padding:6px 10px; font-size:12px;} /* Очередь на проверку и таблицы */ .queue{display:flex; flex-direction:column; gap:10px;} .qrow{background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-s); padding:15px 17px;} .qrow .qtitle{font-family:var(--font-d); font-weight:700; font-size:15px;} .qrow .qmeta{color:var(--ink-2); font-size:13px; margin-top:4px;} .qrow .qactions{display:flex; gap:8px; margin-top:11px; flex-wrap:wrap;} .btn-sm{ border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:12px; padding:8px 14px; font-family:var(--font-d); font-size:13px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; } .btn-sm.primary{background:var(--grad-btn); color:var(--on-primary); border-color:transparent; box-shadow:var(--shadow-btn);} .btn-sm.danger{color:var(--bad);} .btn-sm:disabled{opacity:.5; cursor:default;} /* Компактные строки — для списков-настроек вроде этапов конвейера, где карточка размером с заявку выглядит громоздко (правка Сергея 20.08). */ .mini-list{display:flex; flex-direction:column;} .mini-row{ display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid var(--line); } .mini-row:last-child{border-bottom:none;} .mini-row .ord{ width:26px; height:26px; flex:none; border-radius:99px; background:var(--surface-2); color:var(--ink-2); display:grid; place-items:center; font-family:var(--font-d); font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; } .mini-row .txt{flex:1; min-width:0;} .mini-row .txt b{font-family:var(--font-d); font-size:14px; font-weight:700; display:block;} .mini-row .txt small{color:var(--ink-2); font-size:12px;} .icon-del{ background:none; border:none; color:var(--ink-2); cursor:pointer; padding:6px 8px; font-size:14px; line-height:1; flex:none; border-radius:9px; } .icon-del:hover{color:var(--bad); background:var(--bad-bg);} .icon-del:disabled{opacity:.4; cursor:default;} .mini-form{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);} /* Строка истории работы: три поля и крестик. На телефоне поля встают в столбик — три инпута в ряд на 360px превращаются в нечитаемые огрызки. */ .wh-row{ display:grid; grid-template-columns:1fr 1fr 1.4fr 34px; gap:8px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); } .wh-row:last-child{border-bottom:none;} .wh-row input{margin:0;} @media (max-width:560px){ .wh-row{grid-template-columns:1fr 34px; grid-template-areas:"a x" "b x" "c x";} .wh-row input:nth-child(1){grid-area:a;} .wh-row input:nth-child(2){grid-area:b;} .wh-row input:nth-child(3){grid-area:c;} .wh-row .icon-del{grid-area:x; align-self:start;} } .mini-form input{ padding:9px 12px; border-radius:11px; border:1.5px solid var(--line); background:var(--surface-2); color:var(--ink); font-family:var(--font-b); font-size:13.5px; } .waiting{font-size:12.5px; margin-top:7px; color:var(--ink-2);} .waiting.taken{color:var(--ok);} .waiting.stale{color:var(--bad); font-weight:600;} .dash-table{width:100%; border-collapse:collapse; font-size:13.5px;} .dash-table th, .dash-table td{text-align:left; padding:9px 8px; border-bottom:1px solid var(--line);} .dash-table th{color:var(--ink-2); font-family:var(--font-d); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;} .dash-table td a{color:var(--primary-ink); text-decoration:none;} .dash-table td a:hover{text-decoration:underline;} .table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;} /* Колокольчик уведомлений — прибит к правому верхнему углу окна. Выпадашка позиционируется от ОКНА (fixed), а не от кнопки: при absolute она уезжала за правый край экрана, если кнопка стояла близко к границе. */ .bell-wrap{position:fixed; top:14px; right:14px; z-index:60;} .bell-badge{ position:absolute; top:-5px; right:-5px; background:#E11D48; color:#fff; border:2px solid var(--surface); font-family:var(--font-d); font-size:10px; font-weight:700; border-radius:99px; min-width:19px; height:19px; display:grid; place-items:center; padding:0 4px; } .bell-dropdown{ position:fixed; top:60px; right:14px; width:min(360px, calc(100vw - 28px)); max-height:min(60vh, calc(100vh - 80px)); overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-m); z-index:60; padding:7px; } /* Шапка панели не должна залезать под фиксированный колокольчик */ .dashboard{padding-top:8px;} .dash-head{padding-right:56px;} .bell-item{display:block; padding:11px 13px; border-radius:13px; text-decoration:none; color:var(--ink); margin-bottom:4px; border-left:3px solid var(--line);} .bell-item:hover{background:var(--surface-2);} .bell-item.bell-chat_locked{border-left-color:var(--bad);} .bell-item.bell-mutual_match{border-left-color:var(--primary);} .bell-item.bell-support{border-left-color:var(--warn);} .bell-item.bell-handoff_message{border-left-color:var(--warn);} .bell-item.bell-profile_pending{border-left-color:var(--primary-ink);} .bell-item.bell-document_pending{border-left-color:var(--trust);} .bell-item.bell-deal_ready{border-left-color:var(--ok); background:var(--ok-bg);} .bell-item.bell-signal_waiting{border-left-color:var(--primary);} .bell-item-msg{font-size:13.5px;} .bell-item-time{font-size:11.5px; color:var(--ink-2); margin-top:3px;} .bell-empty{padding:15px 13px; color:var(--ink-2); font-size:13.5px;} .unread-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 5px; margin-left:6px; border-radius:99px; background:#E11D48; color:#fff; font-family:var(--font-d); font-size:10.5px; font-weight:700; vertical-align:middle; } /* Ссылка «Мои документы» внутри анкеты */ .doc-link{ display:flex; align-items:center; gap:13px; margin-top:16px; padding:13px 15px; background:var(--surface-2); border:1px solid var(--line); border-radius:16px; text-decoration:none; color:inherit; } .doc-link:hover{border-color:var(--primary-ink);} .doc-link .ico{ width:40px; height:40px; border-radius:13px; background:var(--primary-soft); display:grid; place-items:center; color:var(--primary-ink); flex:none; } .doc-link .txt{flex:1; min-width:0;} .doc-link .txt b{display:block; font-family:var(--font-d); font-size:14.5px; font-weight:700;} .doc-link .txt small{color:var(--ink-2); font-size:12.5px;} .doc-link .chev{color:var(--ink-2); flex:none;} /* Экран документов: файлы под строкой типа + кнопка добавления */ .doc-files{display:flex; flex-direction:column; gap:6px; margin:-4px 0 10px 53px;} .doc-file{display:flex; align-items:center; gap:8px; font-size:13px;} .doc-file a{color:var(--primary-ink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .doc-file a:hover{text-decoration:underline;} .doc-del{ background:none; border:none; color:var(--ink-2); cursor:pointer; padding:2px 6px; font-size:13px; line-height:1; flex:none; } .doc-del:hover{color:var(--bad);} .doc-del:disabled{opacity:.4; cursor:default;} .doc-add{display:block; margin:0 0 16px 53px; cursor:pointer;} .doc-add input{display:none;} .doc-add span{ display:inline-block; font-family:var(--font-d); font-size:12.5px; font-weight:700; color:var(--primary-ink); border:1.5px dashed var(--line); border-radius:99px; padding:7px 14px; } .doc-add:hover span{border-color:var(--primary-ink); background:var(--primary-soft);} .doc-add.busy{opacity:.5; pointer-events:none;} .timeline{display:flex; flex-direction:column;} .tl{display:flex; gap:13px; padding-bottom:17px; position:relative;} .tl:last-child{padding-bottom:0;} .tl .dot{width:12px; height:12px; border-radius:99px; background:var(--primary); flex:none; margin-top:5px; position:relative; box-shadow:0 0 0 3px var(--primary-soft);} .tl:not(:last-child) .dot::after{content:""; position:absolute; left:50%; top:17px; width:2px; height:calc(100% + 12px); background:var(--line); transform:translateX(-50%);} .tl b{font-family:var(--font-d); font-size:14.5px; font-weight:700; display:block;} .tl small{color:var(--ink-2); font-size:12.5px;} /* Аватар профиля с загрузкой фото */ .ava-edit{position:relative; flex:none;} .ava-edit .ava{width:92px; height:92px; font-size:28px; border:3px solid var(--surface); box-shadow:var(--shadow-s);} .ava-cam{ position:absolute; right:-2px; bottom:-2px; width:32px; height:32px; border-radius:99px; background:var(--grad-btn); color:var(--on-primary); border:3px solid var(--surface); display:grid; place-items:center; cursor:pointer; padding:0; box-shadow:var(--shadow-btn); } .ava-cam input{display:none;} .ava-edit.busy{opacity:.55; pointer-events:none;} /* Кадрирование фото перед загрузкой: круглое окно, картинку можно таскать и приближать. Раньше сервер просто резал по центру, и подвинуть кадр было нельзя. */ .crop-overlay{ position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center; background:rgba(10,14,18,.72); padding:20px; } .crop-overlay.show{display:flex;} .crop-card{ background:var(--surface); border-radius:22px; box-shadow:var(--shadow-m); padding:20px; width:100%; max-width:340px; text-align:center; } .crop-card h3{font-size:17px; margin:0 0 4px;} .crop-stage{ position:relative; width:100%; aspect-ratio:1; margin:16px auto 12px; border-radius:99px; overflow:hidden; background:var(--surface-2); touch-action:none; cursor:grab; box-shadow:0 0 0 3px var(--primary-soft); } .crop-stage:active{cursor:grabbing;} .crop-stage img{position:absolute; left:50%; top:50%; transform-origin:0 0; max-width:none; user-select:none; -webkit-user-drag:none;} .crop-hint{color:var(--ink-2); font-size:12.5px; margin:0;} .crop-zoom{display:flex; align-items:center; gap:10px; margin:12px 0 16px; color:var(--ink-2);} .crop-zoom input[type=range]{margin-top:0;} .crop-actions{display:flex; gap:10px;} .crop-actions .btn{flex:1;} /* --------------------------------------------------------------- Фильтры -- */ .frow{padding:15px 0; border-bottom:1px solid var(--line);} .frow:last-child{border-bottom:none;} .frow .lab{display:flex; justify-content:space-between; align-items:center; gap:10px;} .frow .lab b{font-family:var(--font-d); font-size:14.5px; font-weight:700;} .frow .lab span{color:var(--ink-2); font-size:13.5px; font-variant-numeric:tabular-nums;} input[type=range]{width:100%; accent-color:var(--primary-ink); margin-top:12px;} .switch{width:46px; height:27px; border-radius:99px; border:none; background:var(--line); position:relative; cursor:pointer; flex:none; padding:0; transition:background .15s ease;} .switch i{position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:99px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.35); transition:left .15s ease;} .switch.on{background:var(--primary);} .switch.on i{left:22px;} .pillgroup{display:flex; gap:7px; flex-wrap:wrap; margin-top:11px;} .pillgroup button, .pillgroup label{ padding:8px 14px; border-radius:99px; border:1.5px solid var(--line); background:var(--surface); cursor:pointer; font-family:var(--font-d); font-size:12.5px; font-weight:700; color:var(--ink-2); } .pillgroup .on, .pillgroup label:has(input:checked){background:var(--primary-soft); border-color:var(--primary-ink); color:var(--primary-ink);} .pillgroup input{display:none;} .sticky-cta{ position:sticky; bottom:0; padding:12px 0 calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--ground); } /* --------------------------------------- Закрытые вакансии (нет Код 95) ---- Витрина, продающая курс: вакансию видно, деньги размыты, переписки нет. Блюр — только оформление; настоящая защита в том, что сервер не отдаёт ни названия компании, ни ссылки на переписку (webapp.py, ветка locked_cards). */ .locked-head{ background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-s); padding:16px 18px; margin:24px 0 12px; } .locked-head h2{font-size:17px; margin:5px 0 6px;} .feedcard.locked .art{filter:saturate(.35);} .feedcard.locked .art::after{ content:""; position:absolute; inset:0; background:rgba(20,26,32,.42); } .feedcard.locked .meat{opacity:.96;} .match-money{font-family:var(--font-d); font-size:21px; font-weight:700; margin-top:10px;} .veiled{filter:blur(3.5px); opacity:.85; user-select:none; pointer-events:none;} @supports not (filter: blur(3px)){ .veiled{color:transparent; text-shadow:0 0 10px var(--ink);} } .lock-mark{font-size:20px; line-height:1;} .code95-cta{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:14px; padding:15px; cursor:pointer; background:var(--grad-btn); color:var(--on-primary); border:none; border-radius:15px; font-family:var(--font-d); font-size:15px; font-weight:700; box-shadow:var(--shadow-btn); } .code95-cta:hover{filter:brightness(1.05);} .code95-cta:disabled{opacity:.6; cursor:default; filter:none; box-shadow:none;} /* ------------------------------------------------ Прогресс заполнения ----- */ .completeness{margin-top:14px;} .completeness-row{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-2); margin-bottom:5px;} .completeness-track{height:7px; background:var(--surface-2); border-radius:99px; overflow:hidden;} .completeness-fill{height:100%; background:var(--grad-btn); border-radius:99px;} /* Бейдж «Верифицированный водитель» — чек-лист условий в профиле водителя (ред.23, 22.08) */ .badge-card{margin-top:14px;} .badge-head{display:flex; gap:12px; align-items:flex-start;} .badge-head .badge-ico{flex:none; width:40px; height:40px; border-radius:12px; background:var(--trust-bg); color:var(--trust); display:grid; place-items:center;} .badge-head b{display:block; font-family:var(--font-d); font-size:15px; font-weight:800; line-height:1.2;} .badge-head small{display:block; color:var(--ink-2); font-size:12.5px; line-height:1.45; margin-top:4px;} .checklist{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:9px;} .checklist li{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; font-weight:600; min-width:0;} .checklist .mark{flex:none; min-width:26px; height:26px; padding:0 7px; border-radius:99px; background:var(--surface-2); color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-d); font-size:11.5px; font-weight:700;} .checklist li.done .mark{background:var(--ok-bg); color:var(--ok);} .checklist li.done{color:var(--ink-2); font-weight:500;} .checklist li > span:last-child{min-width:0;} .checklist small{display:block; font-weight:500; color:var(--ink-2); font-size:12px; line-height:1.4; margin-top:2px;} .checklist small a{color:var(--primary-ink); font-weight:700; text-decoration:none;} /* Счётчики компании «Показано · Просмотрено · Отмечено» (ред.23, образец driver-work.com) */ .statstrip{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px;} .statstrip > div{background:var(--surface-2); border-radius:12px; padding:10px 6px; text-align:center; min-width:0;} .statstrip b{display:block; font-family:var(--font-d); font-size:21px; font-weight:800; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums;} .statstrip small{display:block; color:var(--ink-2); font-size:11.5px; margin-top:2px;} .statstrip em{display:block; font-style:normal; color:var(--ok); font-family:var(--font-d); font-size:10.5px; font-weight:700; margin-top:2px;} /* ==== Главная /auth (ред.24, 22.08) — тёмный неон по макету Сергея. Своя палитра --ld-*, не зависит от светлой/тёмной темы кабинета: страница всегда чёрная с лаймовым неоном. ==== */ .ld-body{margin:0; background:#060806; color:#F1F5EA; min-height:100vh;} .ld{ --ld-bg:#060806; --ld-bg-2:#0B0F0B; --ld-surface:#0F1510; --ld-surface-2:#141C15; --ld-line:#1E2A1F; --ld-lime:#B8E62E; --ld-lime-2:#D9FF5C; --ld-lime-soft:rgba(184,230,46,.12); --ld-ink:#F1F5EA; --ld-ink-2:#A7B3A3; --ld-ink-3:#7A877A; --ld-glow:0 0 0 1px var(--ld-lime), 0 0 14px rgba(184,230,46,.55), 0 0 38px rgba(184,230,46,.25), inset 0 0 18px rgba(184,230,46,.08); --ld-glow-soft:0 0 0 1px rgba(184,230,46,.45), 0 0 10px rgba(184,230,46,.22); max-width:560px; margin:0 auto; padding:18px 18px 48px; position:relative; background:radial-gradient(120% 70% at 50% -10%, #10190f 0%, var(--ld-bg) 55%); color:var(--ld-ink); font-family:var(--font-b); font-size:15px; line-height:1.45; } @media (min-width:900px){ .ld{max-width:640px;} } .ld a{color:inherit;} .ld-lang{position:absolute; top:14px; right:14px; display:flex; gap:2px; font-family:var(--font-d); font-size:12px; font-weight:700; letter-spacing:.06em; z-index:2;} .ld-lang a{padding:5px 9px; border-radius:7px; color:var(--ld-ink-3); text-decoration:none;} .ld-lang a.on{color:var(--ld-lime); background:var(--ld-lime-soft);} .ld-brand{text-align:center; padding-top:22px;} .ld-wordmark{display:inline-block; font-family:var(--font-d); font-weight:800; font-size:58px; letter-spacing:.02em; line-height:1; color:var(--ld-lime-2); text-shadow:0 0 6px rgba(217,255,92,.9), 0 0 18px rgba(184,230,46,.75), 0 0 42px rgba(184,230,46,.45), 0 0 90px rgba(184,230,46,.25);} @media (max-width:380px){ .ld-wordmark{font-size:48px;} } .ld-brand p{margin:14px auto 0; max-width:34ch; color:var(--ld-ink-2); font-size:15.5px; line-height:1.45; text-wrap:balance;} .ld-brand p b{color:var(--ld-ink); font-weight:600;} .ld-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:24px; padding:14px 8px; border-top:1px solid rgba(184,230,46,.18); border-bottom:1px solid rgba(184,230,46,.18);} .ld-stats > div{display:flex; align-items:center; gap:8px; justify-content:center; min-width:0;} .ld-sico{flex:none; width:30px; height:30px; color:var(--ld-lime); filter:drop-shadow(0 0 6px rgba(184,230,46,.55));} .ld-sico svg{width:30px; height:30px; display:block;} .ld-stats b{display:block; font-family:var(--font-d); font-weight:800; font-size:25px; line-height:1; color:var(--ld-lime-2); font-variant-numeric:tabular-nums; text-shadow:0 0 12px rgba(184,230,46,.5); letter-spacing:-.01em;} .ld-stats small{display:block; margin-top:3px; font-size:11.5px; color:var(--ld-ink-2); line-height:1.15; white-space:nowrap;} @media (max-width:400px){ .ld-stats{gap:2px; padding:14px 0;} .ld-stats > div{gap:6px;} .ld-sico, .ld-sico svg{width:24px; height:24px;} .ld-stats b{font-size:21px;} .ld-stats small{font-size:10.5px;} } .ld h2{font-family:var(--font-d); font-weight:800; letter-spacing:-.01em; margin:0; color:var(--ld-ink); text-wrap:balance;} .ld-who{margin-top:34px; text-align:center;} .ld-who h2{font-size:30px;} .ld-roles{display:grid; grid-template-columns:1fr; gap:18px; margin-top:18px;} @media (min-width:560px){ .ld-roles{grid-template-columns:1fr 1fr; gap:22px;} } .ld-role{display:block; text-decoration:none; border-radius:22px; background:var(--ld-bg-2); box-shadow:var(--ld-glow); overflow:hidden; position:relative; transition:transform .18s ease, box-shadow .18s ease;} .ld-role:hover, .ld-role:focus-visible{transform:translateY(-2px); box-shadow:0 0 0 1.5px var(--ld-lime-2), 0 0 22px rgba(184,230,46,.7), 0 0 60px rgba(184,230,46,.35), inset 0 0 22px rgba(184,230,46,.12); outline:none;} .ld-shot-wrap{display:block; position:relative;} .ld-shot{display:block; width:100%; aspect-ratio:455/353; object-fit:cover; background:#0a0d0a;} .ld-cap{display:flex; align-items:center; gap:12px; margin:12px; padding:12px 14px; border-radius:16px; border:1px solid var(--ld-lime); box-shadow:0 0 10px rgba(184,230,46,.35), inset 0 0 12px rgba(184,230,46,.07); background:rgba(6,8,6,.6);} .ld-role .ld-ico{flex:none; width:38px; height:38px; border-radius:50%; border:2px solid var(--ld-lime); color:var(--ld-lime); display:grid; place-items:center; box-shadow:0 0 10px rgba(184,230,46,.45);} .ld-cap b{font-family:var(--font-d); font-weight:700; font-size:19px; color:var(--ld-ink); letter-spacing:-.01em; text-align:left;} .ld-partner{display:flex; align-items:center; gap:12px; margin-top:18px; padding:12px 14px; border-radius:16px; text-decoration:none; text-align:left; background:var(--ld-surface); border:1px solid rgba(184,230,46,.3); box-shadow:var(--ld-glow-soft); opacity:.9; transition:box-shadow .18s ease, opacity .18s ease;} .ld-partner:hover, .ld-partner:focus-visible{opacity:1; box-shadow:var(--ld-glow); outline:none;} .ld-partner .ld-ico{flex:none; width:34px; height:34px; border-radius:50%; border:1.5px solid rgba(184,230,46,.6); color:var(--ld-lime); display:grid; place-items:center;} .ld-partner b{display:block; font-family:var(--font-d); font-weight:700; font-size:16px;} .ld-partner small{display:block; color:var(--ld-ink-2); font-size:12.5px;} .ld-chev{margin-left:auto; color:var(--ld-ink-3); font-size:22px; line-height:1;} .ld-sec{margin-top:36px;} .ld-sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:4px 10px; padding:0 2px; flex-wrap:wrap;} .ld-sec-head h2{font-size:20px;} .ld-rail{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:14px 18px 10px; margin:0 -18px; scrollbar-width:none; -webkit-overflow-scrolling:touch;} .ld-rail::-webkit-scrollbar{display:none;} .ld-rail > article{flex:0 0 236px; scroll-snap-align:start; background:var(--ld-surface); border:1px solid var(--ld-line); border-radius:18px; padding:14px 14px 12px; display:flex; flex-direction:column; gap:8px; position:relative; min-width:0; box-shadow:inset 0 1px 0 rgba(184,230,46,.14);} .ld-top{display:flex; align-items:center; gap:8px; color:var(--ld-ink-2); font-size:12.5px; min-width:0;} .ld-flag{font-size:18px; line-height:1;} .ld-top b{color:var(--ld-ink); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .ld-rank{margin-left:auto; flex:none; font-family:var(--font-d); font-weight:700; font-size:11px; color:var(--ld-lime); background:var(--ld-lime-soft); border-radius:99px; padding:3px 8px;} .ld-pay{font-family:var(--font-d); font-weight:800; font-size:22px; color:var(--ld-lime-2); letter-spacing:-.01em; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .ld-pay small{font-size:12px; font-weight:600; color:var(--ld-ink-2); margin-left:4px;} .ld-pay .ld-muted{font-size:14px; font-weight:600; color:var(--ld-ink-2);} .ld-chips{display:flex; gap:6px; flex-wrap:wrap;} .ld-chip{font-family:var(--font-d); font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:99px; background:var(--ld-surface-2); color:var(--ld-ink-2); border:1px solid var(--ld-line); white-space:nowrap;} .ld-chip.pri{color:var(--ld-lime); border-color:rgba(184,230,46,.35); background:var(--ld-lime-soft);} .ld-line{color:var(--ld-ink-2); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .ld-line .chip.trust{font-size:11px; padding:3px 8px;} .ld-meter{margin-top:auto; padding-top:6px;} .ld-meter-row{display:flex; justify-content:space-between; font-size:11px; color:var(--ld-ink-3); margin-bottom:4px;} .ld-meter-row b{color:var(--ld-ink-2); font-weight:600;} .ld-meter-track{height:5px; border-radius:99px; background:var(--ld-surface-2); overflow:hidden;} .ld-meter-fill{height:100%; border-radius:99px; background:linear-gradient(90deg, var(--ld-lime), var(--ld-lime-2)); box-shadow:0 0 8px rgba(184,230,46,.5);} .ld-more{margin-top:8px; display:flex; align-items:center; justify-content:center; gap:7px; width:100%; padding:9px 10px; border-radius:12px; border:1px solid rgba(184,230,46,.35); background:transparent; color:var(--ld-lime); font-family:var(--font-d); font-weight:700; font-size:13.5px; cursor:pointer; transition:background .15s ease, box-shadow .15s ease;} .ld-more:hover{background:var(--ld-lime-soft); box-shadow:var(--ld-glow-soft);} .ld-more:focus-visible{outline:2px solid var(--ld-lime-2); outline-offset:2px;} .ld-ava{width:40px; height:40px; border-radius:50%; flex:none; background:linear-gradient(135deg, #1d2a1c, #0f1610); border:1px solid rgba(184,230,46,.35); color:var(--ld-lime); display:grid; place-items:center; font-family:var(--font-d); font-weight:800; font-size:16px;} .ld-drv .ld-top{gap:10px; align-items:flex-start;} .ld-drv .ld-rank{margin-top:2px;} .ld-name{display:flex; flex-direction:column; min-width:0;} .ld-name b{font-size:15px; white-space:normal;} .ld-name small{color:var(--ld-ink-2); font-size:12px; line-height:1.3;} .ld-dots{display:flex; justify-content:center; gap:5px; margin-top:2px;} .ld-dots i{width:5px; height:5px; border-radius:50%; background:var(--ld-line);} .ld-dots i.on{background:var(--ld-lime); box-shadow:0 0 6px rgba(184,230,46,.7);} .ld-empty{margin-top:12px; padding:18px; border:1px dashed var(--ld-line); border-radius:16px; color:var(--ld-ink-3); text-align:center; font-size:13.5px;} .ld-foot{margin-top:34px; text-align:center; display:flex; flex-direction:column; gap:10px; align-items:center;} .ld-foot a{color:var(--ld-ink-2); text-decoration:none; font-size:13.5px;} .ld-foot a.ld-staff{font-size:12.5px; color:var(--ld-ink-3);} .ld-divider{width:28px; height:2px; background:var(--ld-lime); box-shadow:0 0 8px rgba(184,230,46,.8); border-radius:2px; margin:6px auto 0;} .ld-toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); opacity:0; background:#141C15; color:#F1F5EA; border:1px solid #B8E62E; box-shadow:0 0 0 1px rgba(184,230,46,.45), 0 0 10px rgba(184,230,46,.22); border-radius:14px; padding:11px 16px; font-size:14px; max-width:calc(100% - 32px); text-align:center; transition:opacity .2s ease, transform .2s ease; pointer-events:none; z-index:10;} .ld-toast.show{opacity:1; transform:translateX(-50%) translateY(0);} .ld-flash{animation:ld-flash 1.2s ease 1;} @keyframes ld-flash{0%,100%{box-shadow:var(--ld-glow);} 50%{box-shadow:0 0 0 2px var(--ld-lime-2), 0 0 28px rgba(184,230,46,.9), 0 0 70px rgba(184,230,46,.45);}} @media (prefers-reduced-motion:reduce){ .ld-role, .ld-partner, .ld-more{transition:none;} .ld-flash{animation:none;} } /* Панель управления: ручные цифры для главной (пусто = из базы ×10) */ .landing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;} @media (max-width:560px){ .landing-grid{grid-template-columns:1fr;} } .ls-stat{display:flex; flex-direction:column; gap:3px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface);} .ls-stat small{color:var(--ink-2); font-size:11.5px;} .ls-stat b{font-family:var(--font-d); font-size:24px; font-weight:800; line-height:1.1;} .ls-controls{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin-top:12px;} .ls-mult{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700;} .ls-mult input{width:92px; padding:8px 10px; border-radius:11px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-family:var(--font-d); font-size:16px; font-weight:700;} .hint-line{color:var(--ink-2); font-size:12.5px; margin-top:10px;} /* ---------------------------------- Раскрывающиеся секции анкеты ---------- */ .section{ background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-s); margin-bottom:10px; overflow:hidden; } .section summary{ list-style:none; cursor:pointer; padding:15px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; user-select:none; } .section summary::-webkit-details-marker{display:none;} .section summary .stitle{display:flex; flex-direction:column; gap:3px; min-width:0;} .section summary .stitle .name{font-family:var(--font-d); font-weight:700; font-size:14.5px;} .section summary .stitle .preview{ font-size:12.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60vw; } .section summary .stitle .preview.empty{color:var(--warn);} .section .chev{flex:none; color:var(--ink-2); transition:transform .15s ease; font-size:13px;} .section[open] .chev{transform:rotate(90deg);} .section .body{padding:2px 18px 18px; border-top:1px solid var(--line);} /* ----------------------------------------------- Панель сохранения ------- */ .save-bar{ position:fixed; left:0; right:0; bottom:0; background:var(--surface); border-top:1px solid var(--line); padding:12px 16px calc(12px + env(safe-area-inset-bottom)); display:flex; justify-content:center; box-shadow:0 -6px 16px rgba(20,22,21,.06); z-index:45; transition:transform .22s ease, opacity .22s ease; } /* После успешного сохранения панель уезжает вниз и открывает контент — раньше она висела поверх экрана всегда, и было неясно, сохранилось ли (жалоба Сергея 20.08). Возвращается при первой же правке любого поля. */ .save-bar.tucked{transform:translateY(130%); opacity:0; pointer-events:none;} .save-bar-inner{max-width:560px; width:100%; display:flex; gap:10px; align-items:center;} button.submit, a.submit{ flex:1; background:var(--grad-btn); color:var(--on-primary); border:none; border-radius:15px; padding:14px; font-family:var(--font-d); font-size:15px; font-weight:700; cursor:pointer; box-shadow:var(--shadow-btn); display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; } button.submit:disabled{opacity:.55; cursor:default; box-shadow:none;} #save-toast{font-size:12.5px; color:var(--ink-2); white-space:nowrap;} #save-toast.ok{color:var(--ok); font-weight:600;} #save-toast.err{color:var(--bad); font-weight:600;} .status-banner{border-radius:15px; padding:12px 15px; margin-bottom:14px; font-size:13.5px; font-weight:600;} .status-banner.ok{background:var(--ok-bg); color:var(--ok);} .status-banner.pending{background:var(--warn-bg); color:var(--warn);} /* Оверлей «Сохраняем…» — чтобы клик по «Сохранить» никогда не выглядел так, будто ничего не произошло (после реального кейса с компанией #35). */ .saving-overlay{ position:fixed; inset:0; background:rgba(10,11,10,.55); backdrop-filter:blur(1px); display:none; align-items:center; justify-content:center; z-index:60; opacity:0; transition:opacity .15s ease; } .saving-overlay.show{display:flex;} .saving-overlay.visible{opacity:1;} .saving-card{ background:var(--surface); border-radius:20px; padding:24px 30px; box-shadow:var(--shadow-m); display:flex; flex-direction:column; align-items:center; gap:12px; max-width:80%; } .saving-spinner{ width:30px; height:30px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--primary-ink); animation:saving-spin .8s linear infinite; } .saving-card span{font-size:14px; font-weight:600; color:var(--ink);} @keyframes saving-spin{ to{ transform:rotate(360deg); } } /* ---------------------- Переписка с администрацией (старая разметка) ------ */ .chat{display:flex; flex-direction:column; gap:9px; max-height:340px; overflow-y:auto; margin-bottom:10px; padding-right:2px;} .bubble{max-width:85%; padding:11px 14px; border-radius:18px; font-size:14px; line-height:1.45; white-space:pre-wrap; box-shadow:var(--shadow-s);} .bubble .time{display:block; font-size:10.5px; color:var(--ink-2); margin-top:4px; font-family:var(--font-d);} .bubble.in{align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:6px;} .bubble.out{align-self:flex-end; background:var(--grad-btn); color:var(--on-primary); border-bottom-right-radius:6px;} .bubble.out .time{color:var(--on-primary); opacity:.7;} /* Галочки в чате с администрацией — те же, что в чате матча (п.14): ✓ / ✓✓ / ✓✓ зелёные. */ .bubble .tick{letter-spacing:-.14em; margin-left:2px; font-weight:700;} .bubble.out .tick.read{color:var(--ok);} .bubble.pending{opacity:.6;} .chat-empty{color:var(--ink-2); font-size:13.5px;} .msg-row{display:flex; gap:9px; align-items:flex-start;} .msg-row textarea{ flex:1; background:var(--surface); border:1.5px solid var(--line); border-radius:16px; padding:12px 15px; color:var(--ink); font-size:14.5px; font-family:var(--font-b); resize:vertical; min-height:46px; } .msg-send{ background:var(--grad-btn); color:var(--on-primary); border:none; border-radius:16px; padding:12px 18px; font-family:var(--font-d); font-weight:700; cursor:pointer; flex:none; font-size:14px; box-shadow:var(--shadow-btn); } .msg-send:disabled{opacity:.55; cursor:default; box-shadow:none;} /* --------------------------------------------------- Мелочи и остатки ---- */ .install-btn{ display:flex; align-items:center; justify-content:center; gap:7px; width:100%; font-family:var(--font-d); font-size:13.5px; font-weight:700; padding:12px 14px; margin:0 0 14px; border-radius:15px; border:1.5px solid var(--primary-ink); color:var(--primary-ink); background:none; cursor:pointer; } .install-btn:disabled{opacity:.6; cursor:default;} .open-hint{ font-size:12.5px; color:var(--ink-2); background:var(--surface-2); border:1px dashed var(--line); border-radius:15px; padding:12px 14px; margin:0 0 14px; line-height:1.6; } .demo-card{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:16px 18px; margin-bottom:12px; box-shadow:var(--shadow-s);} .demo-card .demo-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;} .demo-card .demo-name{font-family:var(--font-d); font-weight:700; font-size:15px;} .demo-badge{background:var(--primary); color:var(--on-primary); font-family:var(--font-d); font-weight:700; font-size:12px; padding:4px 10px; border-radius:99px;} .demo-card .demo-meta{color:var(--ink-2); font-size:12.5px;} @media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} } /* ═══════════════════════════════════════════════════════════════════════════ Кабинеты по макетам Сергея (опрос 23.08.2026). От макета берём ФОРМУ: светло-голубое полотно, крупные белые карточки, ряд плиток с иконками, воздух между блоками. Палитру оставляем фирменную — лайм + графит с логотипа: синий из макета уже дважды уводил в чужой бренд. Ничего из .ld-* / --ld-* (замороженная главная /auth) здесь не переопределяется. ═══════════════════════════════════════════════════════════════════════════ */ /* Полотно кабинета — чуть голубее нейтрального фона, как на макете. */ :root{ --canvas:#EAEEF3; --canvas-2:#E3E9F0; } @media (prefers-color-scheme: dark){ :root{ --canvas:#161A1F; --canvas-2:#12161A; } } body.cab{background:linear-gradient(180deg, var(--canvas) 0%, var(--canvas-2) 100%); min-height:100vh;} /* Шапка прибита к верху и НЕ прозрачная: при прокрутке сквозь неё просвечивал текст карточек (поймано на скриншоте). Цвет ровно как верх полотна, стык не виден. */ body.cab .appbar{background:var(--canvas);} /* .ghost у кнопки = вторичная кнопка. Исторически .ghost существовал только для .iconbtn, поэтому `class="btn ghost"` молча оставался ярко-зелёным, и обе кнопки внизу профиля выглядели одинаково главными. */ .btn.ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-s);} .btn.ghost:hover{border-color:var(--primary-ink); color:var(--primary-ink); filter:none;} /* Шапка макета: заголовок крупный и слева, действия справа. */ .appbar-title{font-family:var(--font-d); font-weight:800; font-size:26px; letter-spacing:-.02em; flex:1;} .appbar-actions{display:flex; align-items:center; gap:8px; flex:none;} .appbar-actions .iconbtn{position:relative; width:40px; height:40px; border-radius:14px;} .appbar-actions .badge-dot{top:-4px; right:-4px; border-color:var(--canvas);} /* Ряд плиток под шапкой: Опыт · Категории · Надёжность · Код 95. */ .stiles{display:grid; grid-template-columns:repeat(var(--stiles,4),1fr); gap:10px; margin:14px 0;} .stile{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:12px 8px; display:flex; flex-direction:column; align-items:center; gap:5px; box-shadow:var(--shadow-s); text-decoration:none; color:var(--ink); text-align:center; } .stile-ic{ width:34px; height:34px; border-radius:12px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary-ink); } .stile-label{font-size:11px; color:var(--ink-2); line-height:1.2;} .stile-value{font-family:var(--font-d); font-weight:800; font-size:15px; letter-spacing:-.01em;} .stile-hint{font-size:10px; color:var(--ink-2);} /* Код 95, которого нет, — единственная «продающая» плитка: жёлтая и кликабельная. */ .stile.warn .stile-ic{background:var(--warn-bg); color:var(--warn);} .stile.warn .stile-value{color:var(--warn);} .stile.ok .stile-ic{background:var(--ok-bg); color:var(--ok);} /* Заголовок блока с карандашом — правка профиля по частям (решение 16). */ .card-head{display:flex; align-items:center; gap:10px; padding:16px 18px 0;} .card-head h3{font-family:var(--font-d); font-weight:700; font-size:15.5px; flex:1;} .card-more{font-size:12.5px; text-decoration:none; color:var(--primary-ink); font-weight:600;} /* Hero профиля: фото, имя, статус «на связи», прогресс заполненности. */ .phero{display:flex; gap:14px; align-items:center; padding:16px 18px;} .phero-photo{width:96px; height:96px; border-radius:18px; object-fit:cover; flex:none; background:var(--surface-2);} .phero-body{min-width:0; flex:1;} .phero-name{font-family:var(--font-d); font-weight:800; font-size:20px; letter-spacing:-.02em;} .presence{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-2); margin-top:2px;} .presence::before{content:""; width:8px; height:8px; border-radius:99px; background:var(--ink-2);} .presence.on{color:var(--ok);} .presence.on::before{background:var(--ok);} /* Строка статистики под плитками (решение 33). */ .statline{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px 18px 16px;} .statline div{text-align:center;} .statline .n{font-family:var(--font-d); font-weight:800; font-size:17px;} .statline .l{font-size:11px; color:var(--ink-2);} .statline .d{font-size:10.5px; color:var(--ok);} /* Документы: строка со статусом и сроком годности (решения 9-11). */ .doc-list{display:flex; flex-direction:column;} .doc-row{display:flex; align-items:center; gap:12px; padding:12px 18px; border-top:1px solid var(--line);} .doc-row:first-child{border-top:none;} .doc-ic{width:36px; height:36px; border-radius:12px; display:grid; place-items:center; background:var(--surface-2); color:var(--ink-2); flex:none;} /* display:block обязателен: разметка строки собрана на (чтобы её можно было обернуть в ), а инлайновые дети склеивались в одну строку — подпись липла к названию документа («Паспорт Обязателен»). */ .doc-main{flex:1; min-width:0; display:block;} .doc-title{display:block; font-size:14px; font-weight:600;} .doc-sub{display:block; font-size:11.5px; color:var(--ink-2);} .doc-sub.soon{color:var(--warn);} .doc-sub.gone{color:var(--bad);} /* Карточка в списке подбора/избранного: размытая витрина (решения 12, 13, 18). Зарплата и процент остаются читаемыми — это ровно то, ради чего человек возвращается дозаполнять анкету. Размывается только «кто именно». */ .blurname{filter:blur(6px); user-select:none; pointer-events:none;} .locknote{ display:flex; align-items:center; gap:8px; margin-top:10px; padding:9px 12px; border-radius:14px; background:var(--warn-bg); color:var(--warn); font-size:12.5px; font-weight:600; } /* Избранное — звезда на карточке. Активная заливается, но остаётся тихой: вторая сторона о ней не узнаёт (решение 4). */ .starbtn{ width:34px; height:34px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); display:grid; place-items:center; cursor:pointer; flex:none; padding:0; } .starbtn.on{color:var(--primary-ink); border-color:var(--primary); background:var(--primary-soft);} /* Автопарк — лента миниатюр с плиткой «+N», ровно как в макете (решение 27). */ .fleet{display:flex; gap:8px; overflow-x:auto; padding:12px 18px 16px; scrollbar-width:none;} .fleet::-webkit-scrollbar{display:none;} .fleet img, .fleet .more{width:72px; height:72px; border-radius:14px; object-fit:cover; flex:none; background:var(--surface-2);} .fleet .more{display:grid; place-items:center; font-family:var(--font-d); font-weight:700; color:var(--ink-2); border:1px dashed var(--line);} /* Вакансии компании. */ .vac-row{display:flex; align-items:center; gap:12px; padding:13px 18px; border-top:1px solid var(--line); text-decoration:none; color:var(--ink);} .vac-row:first-of-type{border-top:none;} .vac-title{font-weight:600; font-size:14px;} .vac-sub{font-size:11.5px; color:var(--ink-2);} .vac-pay{font-family:var(--font-d); font-weight:700; font-size:14px; margin-left:auto; flex:none;} .vac-row.closed .vac-title{color:var(--ink-2); text-decoration:line-through;} /* Пара кнопок внизу профиля: «Изменить» + основное действие. */ .profile-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0 8px;} /* Публичные страницы (резюме, витрина компании) — открываются без входа, поэтому таб-бара нет и полотно то же, что в кабинете. */ .pubwrap{max-width:560px; margin:0 auto; padding:18px 16px 40px;} .pubmark{display:flex; align-items:center; justify-content:center; gap:8px; margin:22px 0 8px; color:var(--ink-2); font-size:12px;}