.ex-page { padding:10px 4px 22px; color:#0b1635; }
.ex-page-head { height:92px; padding:10px 20px; }
.ex-page-head h1 { margin:0; font-size:30px; line-height:1.25; }
.ex-page-head p { margin:6px 0 0; color:#65789d; font-size:14px; }
.ex-recommend { display:grid; grid-template-columns:minmax(0,1.95fr) minmax(360px,1fr); gap:18px; margin:0 18px 12px; }
.ex-recommend-main,.ex-recommend > aside { min-width:0; height:218px; border:1px solid #dfe8f7; border-radius:17px; background:#fff; }
.ex-recommend-main { padding:16px 20px; display:grid; grid-template-columns:235px minmax(0,1fr) 280px 220px; grid-template-rows:34px 1fr; gap:8px 18px; }
.ex-recommend-main h2 { grid-column:1 / -1; margin:0; font-size:19px; }
.ex-recommend-main h2 span { color:#3d57ee; }
.ex-recommend-main > img { width:170px; height:160px; justify-self:center; object-fit:contain; }
.ex-reason,.ex-skills,.ex-cost { min-width:0; padding-top:12px; }
.ex-reason b,.ex-skills b,.ex-cost b { display:block; margin-bottom:12px; font-size:13px; }
.ex-reason p { margin:0; color:#53698f; font-size:12px; line-height:1.7; }
.ex-skills > div { display:flex; flex-wrap:wrap; gap:8px; }
.ex-skills span { border:1px solid #d4e2f7; border-radius:12px; padding:4px 9px; color:#4d638d; font-size:11px; }
.ex-cost strong { display:block; margin:5px 0 22px; color:#4d46e5; font-size:17px; }
.ex-cost button { width:100%; height:48px; border:0; border-radius:10px; color:#fff; background:#2868f5; font-weight:750; }
.ex-recommend > aside { position:relative; padding:26px 220px 18px 24px; display:grid; align-content:start; gap:16px; overflow:hidden; }
.ex-recommend > aside > div { display:grid; grid-template-columns:100px minmax(0,1fr); gap:8px; }
.ex-recommend > aside b { color:#586b90; font-size:12px; }
.ex-recommend > aside strong,.ex-recommend > aside p { margin:0; font-size:13px; }
.ex-recommend > aside > img { position:absolute; right:20px; bottom:8px; width:210px; height:180px; object-fit:contain; }
.ex-employees { margin:0 18px 12px; padding:12px 16px 16px; border:1px solid #dfe8f7; border-radius:17px; background:#fff; }
.ex-employees h2 { margin:0 0 10px; font-size:17px; }
.ex-employees > div { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.ex-employees article { min-width:0; height:181px; padding:10px 12px; display:grid; grid-template-columns:86px minmax(0,1fr); grid-template-rows:1fr 36px; gap:5px 9px; border:1px solid #dce7f7; border-radius:13px; }
.ex-employees article.active { border:2px solid #3574ff; }
.ex-employees article > img { width:84px; height:105px; object-fit:contain; object-position:center bottom; }
.ex-employees article h3 { margin:2px 0 4px; font-size:14px; }
.ex-employees article p { margin:0; color:#60749a; font-size:10px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ex-tags { display:flex; flex-wrap:wrap; gap:3px; margin-top:7px; }
.ex-tags span { border:1px solid #d3e0f7; border-radius:9px; padding:1px 5px; color:#3e6ee5; font-size:8px; }
.ex-employees footer { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; border-top:1px solid #eef2f8; padding-top:6px; }
.ex-employees footer span { color:#5d7198; font-size:10px; }
.ex-employees footer button { width:75px; height:30px; border:1px solid #cbdcf7; border-radius:7px; color:#2566e4; background:#fff; font-size:11px; }
.ex-employees article.active footer button { color:#fff; border-color:#2868f5; background:#2868f5; }
.ex-task-row { display:grid; grid-template-columns:minmax(0,1.85fr) minmax(370px,1fr); gap:18px; margin:0 18px 12px; align-items:stretch; }
.ex-task,.ex-summary { min-width:0; min-height:350px; border:1px solid #dfe8f7; border-radius:17px; background:#fff; }
.ex-task { padding:16px 18px; }
.ex-task > h2,.ex-summary > h2 { margin:0 0 13px; font-size:17px; }
.ex-form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 20px; }
.ex-form-grid label { min-width:0; display:grid; grid-template-columns:96px minmax(0,1fr); align-items:center; gap:10px; }
.ex-form-grid label > span { color:#172746; font-size:13px; font-weight:650; white-space:nowrap; }
.ex-form-grid input,.ex-form-grid select,.ex-form-grid button { min-width:0; width:100%; height:42px; border:1px solid #d8e4f6; border-radius:8px; padding:0 12px; color:#435a82; background:#fff; font-size:13px; line-height:1.4; }
.ex-form-grid input::placeholder { color:#91a2bf; opacity:1; }
.ex-materials { margin-top:16px; padding:13px; border:1px solid #e3eaf5; border-radius:12px; }
.ex-materials h3 { margin:0 0 11px; font-size:14px; }
.ex-materials h3 small { color:#7787a7; font-weight:400; }
.ex-materials > div { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.ex-materials article { position:relative; min-width:0; height:78px; padding:8px; display:grid; grid-template-columns:50px minmax(0,1fr) 18px; align-items:center; gap:8px; border:1px solid #dfe8f5; border-radius:9px; }
.ex-materials article.selected { border-color:#79d9bd; background:#f2fcf8; }
.ex-materials article img { width:48px; height:48px; object-fit:contain; object-position:center; }
.ex-materials article div { min-width:0; display:grid; gap:2px; }
.ex-materials strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; }
.ex-materials span { color:#7182a5; font-size:10px; }
.ex-materials input { width:16px; height:16px; }
.ex-summary { position:relative; padding:14px 18px; overflow:hidden; }
.ex-summary > img { position:absolute; right:12px; top:8px; width:170px; height:105px; object-fit:contain; opacity:.72; }
.ex-summary dl { position:relative; z-index:1; margin:0; padding-top:10px; }
.ex-summary dl > div { min-height:47px; display:grid; grid-template-columns:125px minmax(0,1fr); align-items:center; border-bottom:1px solid #ebf0f8; }
.ex-summary dt { color:#61759a; font-size:12px; }
.ex-summary dd { margin:0; font-size:13px; font-weight:700; }
.ex-summary dd span { display:inline-block; margin:2px; border-radius:9px; padding:2px 7px; color:#3d67d9; background:#eff5ff; font-size:9px; }
.ex-summary footer { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.ex-summary footer button { height:46px; border:1px solid #d4e1f6; border-radius:9px; color:#33496f; background:#fff; font-weight:700; }
.ex-summary footer .primary { color:#fff; border-color:#2868f5; background:#2868f5; }
.ex-flow { margin:0 18px; min-height:145px; padding:14px 20px; border:1px solid #dfe8f7; border-radius:17px; background:#fff; }
.ex-flow h2 { margin:0 0 13px; font-size:17px; }
.ex-flow > div { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:24px; }
.ex-flow article { min-width:0; display:grid; grid-template-columns:58px minmax(0,1fr); align-items:center; gap:10px; }
.ex-flow article img { width:56px; height:56px; object-fit:contain; }
.ex-flow article div { min-width:0; display:grid; gap:3px; }
.ex-flow strong { font-size:11px; }
.ex-flow span { color:#7182a5; font-size:9px; }
@media (max-width:1500px) {
  .ex-recommend { grid-template-columns:minmax(0,1.7fr) minmax(330px,1fr); gap:10px; margin-inline:10px; }
  .ex-recommend-main { grid-template-columns:190px minmax(0,1fr) 210px 180px; padding-inline:12px; gap:8px; }
  .ex-recommend-main > img { width:150px; }
  .ex-recommend > aside { padding-right:170px; }
  .ex-recommend > aside > img { width:170px; }
  .ex-employees,.ex-task-row,.ex-flow { margin-inline:10px; }
  .ex-employees > div { gap:8px; }
  .ex-task-row { grid-template-columns:minmax(0,1.65fr) minmax(340px,1fr); gap:10px; }
  .ex-form-grid { gap:10px; }
  .ex-form-grid label { grid-template-columns:78px minmax(0,1fr); }
}