:root { --navy:#101B6B; --blue:#1557E6; --cyan:#18C9F4; --ink:#122044; --muted:#74809a; --line:#e6eaf3; --paper:#f6f8fb; --card:#fff; }
* { box-sizing:border-box; }
body.desktop-experience { background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
/* The mobile app-shell is capped at 840px; desktop owns the full viewport. */
body.desktop-experience #app.app-shell { width:100%; max-width:none; margin:0; min-height:100vh; }
.desktop-shell { min-height:100vh; display:grid; grid-template-columns:252px minmax(0,1fr); }
.desktop-sidebar { position:sticky; top:0; height:100vh; padding:30px 18px 22px; background:linear-gradient(160deg,#101b6b 0%,#142c9c 54%,#1557e6 100%); color:#fff; display:flex; flex-direction:column; box-shadow:8px 0 28px rgba(16,27,107,.12); }
.brand { display:flex; align-items:center; gap:10px; padding:0 10px 37px; color:#fff; font-size:23px; letter-spacing:-.8px; text-decoration:none; }.brand img { width:37px; height:37px; object-fit:contain; }.brand b { color:var(--cyan); }
.desktop-sidebar nav { display:grid; gap:7px; }.nav-link,.account-link { appearance:none; width:100%; border:0; background:transparent; color:rgba(255,255,255,.78); text-align:left; padding:13px 12px; border-radius:13px; font-size:14px; cursor:pointer; }.nav-link span { display:inline-grid; width:24px; place-items:center; margin-right:8px; font-size:18px; }.nav-link:hover,.nav-link.is-active { color:#fff; background:rgba(255,255,255,.14); }.sidebar-bottom { margin-top:auto; display:grid; gap:11px; }.create-link,.gradient-cta,.primary-action { appearance:none; border:0; border-radius:12px; background:linear-gradient(115deg,var(--blue),var(--cyan)); color:#fff; padding:13px 16px; font-weight:750; text-decoration:none; cursor:pointer; box-shadow:0 8px 18px rgba(21,87,230,.2); }.create-link { width:100%; text-align:center; }.account-link { border-top:1px solid rgba(255,255,255,.18); border-radius:0; padding-top:18px; color:#fff; }.account-link small { display:block; margin-top:4px; color:rgba(255,255,255,.6); }
.desktop-content { min-width:0; }.desktop-topbar { min-height:84px; background:rgba(255,255,255,.9); display:flex; align-items:center; gap:12px; padding:16px clamp(24px,4vw,62px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; backdrop-filter:blur(14px); }.search-field { flex:1; max-width:670px; display:flex; align-items:center; gap:9px; padding:0 14px; background:#f2f5fa; border:1px solid transparent; border-radius:12px; }.search-field:focus-within { background:#fff; border-color:#9db9fd; }.search-field input { width:100%; padding:12px 0; border:0; outline:0; background:transparent; font-size:14px; }.desktop-topbar select { min-width:155px; border:1px solid var(--line); border-radius:11px; background:#fff; padding:11px; color:var(--ink); }.login-button { border:1px solid #cdd8fa; color:var(--blue); background:#fff; border-radius:10px; padding:11px 14px; font-weight:700; cursor:pointer; }.avatar { margin-left:auto; width:38px; height:38px; border:0; border-radius:50%; color:#fff; background:var(--navy); font-weight:800; }
.desktop-main { max-width:1510px; margin:0 auto; padding:43px clamp(24px,4vw,62px) 64px; }.catalog-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:27px; }.eyebrow { margin:0 0 8px; color:var(--blue); font-size:11px; font-weight:800; letter-spacing:1.2px; }.catalog-header h1 { margin:0; font-size:clamp(27px,3vw,39px); letter-spacing:-1.6px; }.catalog-header p:not(.eyebrow) { margin:10px 0 0; color:var(--muted); }.category-tabs { display:flex; gap:8px; overflow:auto; padding-bottom:20px; }.category-tabs button { white-space:nowrap; border:1px solid var(--line); padding:9px 13px; border-radius:99px; background:#fff; color:#536078; cursor:pointer; }.category-tabs button.is-active { border-color:var(--blue); background:#eaf0ff; color:var(--blue); font-weight:700; }.market-layout { display:grid; grid-template-columns:minmax(530px,2fr) minmax(284px,1fr); gap:25px; align-items:start; }.vacancy-grid,.saved-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }.vacancy-card { min-height:225px; padding:18px; border:1px solid var(--line); border-radius:17px; background:var(--card); cursor:pointer; transition:transform .15s,box-shadow .15s,border-color .15s; }.vacancy-card:hover,.vacancy-card.is-selected { transform:translateY(-2px); border-color:#95b5ff; box-shadow:0 11px 27px rgba(24,49,116,.08); }.ready-card { background:linear-gradient(145deg,#fff 50%,#effbff); border-color:#c7edf7; }.card-head { display:flex; align-items:center; gap:8px; color:#62708a; font-size:12px; font-weight:700; }.company-mark { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; background:#eaf0ff; color:var(--navy); font-size:11px; }.ready-card .company-mark { background:#dff9ff; color:#027a99; }.save-button { margin-left:auto; border:0; background:transparent; color:#7b89a4; font-size:22px; cursor:pointer; }.save-button.is-saved { color:#ec476c; }.vacancy-card h3 { margin:17px 0 8px; font-size:17px; letter-spacing:-.35px; }.vacancy-card p { margin:0; min-height:53px; color:#65718a; font-size:13px; line-height:1.45; }.vacancy-card footer { display:flex; justify-content:space-between; gap:10px; margin-top:18px; padding-top:13px; border-top:1px solid #eef1f6; color:#465472; font-size:12px; }.right-rail { position:sticky; top:108px; }.detail-panel { min-height:430px; padding:26px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 10px 25px rgba(31,53,104,.05); }.ready-detail { border-color:#bdebf7; background:linear-gradient(160deg,#fff,#effcff); }.detail-label { color:var(--blue); font-size:11px; font-weight:850; letter-spacing:1px; }.detail-panel h2 { margin:12px 0 7px; font-size:25px; letter-spacing:-1px; }.detail-company,.detail-meta,.detail-text { color:var(--muted); }.detail-company { margin:0; }.detail-meta { display:flex; flex-wrap:wrap; gap:11px; margin:20px 0; font-size:13px; }.detail-panel hr { border:0; border-top:1px solid var(--line); }.detail-text { white-space:pre-line; line-height:1.6; font-size:14px; }.tag-row { display:flex; flex-wrap:wrap; gap:7px; }.tag-row span { color:#395fc5; background:#edf2ff; border-radius:999px; padding:6px 9px; font-size:11px; }.detail-actions,.composer-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }.secondary-action { border:1px solid #d5def1; border-radius:12px; padding:11px 13px; color:var(--blue); background:#fff; cursor:pointer; text-decoration:none; }.link-note { display:block; margin-top:13px; color:#8190a9; }.empty-state,.empty-detail { padding:50px 25px; border:1px dashed #cbd5e7; background:#fff; border-radius:16px; color:var(--muted); text-align:center; grid-column:1/-1; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px; }.stats div { padding:20px; border-radius:16px; background:#fff; border:1px solid var(--line); }.stats small { display:block; color:var(--muted); }.stats strong { display:block; margin-top:7px; font-size:27px; }.listing-table { background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; }.table-title { display:flex; justify-content:space-between; padding:19px 22px; border-bottom:1px solid var(--line); }.table-title h2 { margin:0; font-size:18px; }.listing-table article { display:grid; grid-template-columns:2fr .8fr .7fr .8fr; gap:12px; align-items:center; padding:17px 22px; border-bottom:1px solid #eff2f7; font-size:13px; }.listing-table article:last-child { border:0; }.listing-table b,.listing-table small { display:block; }.listing-table small { margin-top:5px; color:var(--muted); }.status { width:max-content; padding:5px 9px; border-radius:99px; background:#f1f4f8; color:#60708b; font-size:11px; }.status-sent,.status-approved,.status-scheduled { color:#137c63; background:#e3f8f0; }
.pipeline-strip { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:0 0 20px; }.pipeline-strip span { display:grid; gap:4px; padding:13px; border:1px solid var(--line); border-radius:13px; background:#fff; color:var(--muted); font-size:12px; }.pipeline-strip b { color:var(--navy); font-size:20px; }.candidate-panel { margin-top:22px; overflow:hidden; border:1px solid #bed0fc; border-radius:18px; background:#fff; }.candidate-panel article { display:grid; grid-template-columns:1fr auto 130px; align-items:center; gap:14px; padding:17px 22px; border-bottom:1px solid #eff2f7; }.candidate-panel article:last-child { border:0; }.candidate-panel p { margin:6px 0 0; color:var(--muted); font-size:12px; }.candidate-panel select { border:1px solid #d7dfee; border-radius:9px; padding:8px; background:#fff; }.profile-layout { display:grid; grid-template-columns:minmax(330px,.8fr) minmax(0,1.2fr); gap:24px; }.profile-layout > section { min-width:0; }
.composer-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr); gap:25px; }.composer-form,.preview-rail { padding:26px; background:#fff; border:1px solid var(--line); border-radius:18px; }.stepper { display:flex; gap:6px; margin-bottom:30px; overflow:auto; }.stepper span { display:flex; align-items:center; gap:7px; white-space:nowrap; color:#98a3b7; font-size:12px; }.stepper i { display:grid; width:23px; height:23px; place-items:center; font-style:normal; border-radius:50%; border:1px solid #cfd7e6; }.stepper .is-current,.stepper .is-done { color:var(--blue); font-weight:700; }.stepper .is-current i,.stepper .is-done i { border-color:var(--blue); background:#eaf0ff; }.composer-form h2 { margin:0 0 22px; }.composer-form label { display:grid; gap:7px; margin:16px 0; color:#465472; font-size:13px; font-weight:650; }.composer-form input,.composer-form textarea,.composer-form select { width:100%; border:1px solid #dce3ef; border-radius:10px; padding:11px; outline-color:#89aeff; font:inherit; }.composer-form textarea { min-height:115px; resize:vertical; }.preview-rail { height:max-content; position:sticky; top:108px; }.preview-rail .vacancy-card { cursor:default; }.preview-rail .save-button { display:none; }
.modal-backdrop { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; background:rgba(8,17,57,.48); backdrop-filter:blur(4px); }.login-modal { width:min(420px,100%); position:relative; padding:34px; border-radius:21px; background:#fff; text-align:center; box-shadow:0 28px 80px rgba(0,0,0,.24); }.login-modal img { width:59px; }.login-modal h2 { margin:8px 0; font-size:26px; letter-spacing:-1px; }.login-modal p:not(.eyebrow) { color:var(--muted); line-height:1.5; }.close-modal { position:absolute; top:13px; right:15px; border:0; background:transparent; font-size:25px; cursor:pointer; }.telegram-widget { min-height:43px; margin:23px 0 14px; }.login-modal small { color:#8290a7; }.desktop-failure { max-width:500px; margin:15vh auto; text-align:center; }.desktop-failure button { padding:10px 14px; border:0; border-radius:9px; background:var(--blue); color:#fff; }
@media (max-width:1190px) { .desktop-shell { grid-template-columns:210px minmax(0,1fr); }.desktop-sidebar { padding:26px 13px; }.market-layout { grid-template-columns:minmax(0,1fr) 300px; }.desktop-main { padding-inline:28px; }.vacancy-grid { grid-template-columns:1fr; } }
@media (max-width:1023px) { body.desktop-experience .desktop-shell { display:none; } }