/* WCPS Opportunity Hub — SGO-specific styles (on top of app.css + wcps.css) */
.ic.big { width: 44px; height: 44px; stroke-width: 1.6; }
.fd { background: #c9d3ee; } .fd.info { background: var(--info); } .fd.ghost { background: #ccc; }
.btn.ghost-l { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25); } .btn.ghost-l:hover { background: rgba(255,255,255,.18); }

/* ---------- Radar ---------- */
.rd-hero .hz-hl { max-width: 720px; }
.rd-hero { padding: 22px 28px; }
.rd-hero .hz-hl h1 { font-size: 25px; }
.rd-hero .hz-hl p { font-size: 13.5px; }
.rd-cta { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.rd-kpis { flex-direction: column; gap: 8px; } .rd-kpis .hk { min-width: 230px; padding: 8px 14px; } .rd-kpis .hk b { font-size: 26px; margin: 0; }
.rd-ctrl { display: flex; align-items: center; gap: 12px; padding: 10px 14px; flex-wrap: wrap; }
.rd-needs { display: flex; gap: 8px; flex-wrap: wrap; }
.needchip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #e1e1e1; background: #fff; color: var(--mut); font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 20px; cursor: pointer; transition: all .15s; }
.needchip .ic { width: 14px; height: 14px; }
.needchip.on { border-color: var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 9%, #fff); }
.rd-map { aspect-ratio: 800 / 640; }
.rd-ring { fill: none; stroke: #24418F; stroke-opacity: .07; stroke-width: 1.5; }
#beam { transform-origin: 500px 380px; opacity: 0; }
#beam.go { opacity: 1; animation: beam 2.3s linear; }
@keyframes beam { from { transform: rotate(0deg); } to { transform: rotate(-720deg); } }
.rd-sch { cursor: pointer; transition: opacity .3s; }
.rd-sch.off { opacity: .18; pointer-events: none; }
.rd-sch circle { transition: r .6s cubic-bezier(.2,.8,.2,1); }
.rd-sch.lit > circle:not(.rd-glow) { animation: pop .55s cubic-bezier(.2,1.4,.4,1) both; animation-delay: var(--d); }
@keyframes pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
.rd-sch.lit { transform-box: fill-box; }
.rd-sch.lit > circle:not(.rd-glow) { transform-origin: center; transform-box: fill-box; }
.rd-glow { animation: glow 2.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes glow { 0%,100% { opacity: .35; } 50% { opacity: .9; } }
.rd-sch.sel > circle:not(.rd-glow) { stroke: #E0262F; stroke-width: 4; }
.rd-sch:hover > circle:not(.rd-glow) { stroke: #242424; }
.m-sname.hov { opacity: 0; transition: opacity .15s; } .rd-sch:hover .m-sname.hov { opacity: 1; }
.rd-n { font-size: 11.5px; font-weight: 800; fill: #fff; text-anchor: middle; pointer-events: none; }
.rd-side { padding: 0; max-height: 760px; display: flex; flex-direction: column; }
.rd-side .card-h.pad { padding: 16px 16px 8px; }
.rd-rank { padding: 4px 8px 12px; overflow-y: auto; }
.rd-rank .hr-row { grid-template-columns: 1fr 84px 58px; }
.hr-bar { height: 8px; background: #eef1f8; border-radius: 6px; overflow: hidden; } .hr-bar i { display: block; height: 100%; border-radius: 6px; }
.rd-idle { padding: 40px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--navy, #24418F); }
.rd-idle p { margin: 0 0 6px; }
.rd-fun { padding: 4px 16px 6px; }
.fn { display: grid; grid-template-columns: 104px 1fr 50px; gap: 8px; align-items: center; font-size: 12px; padding: 2px 0; }
.fn div { height: 10px; background: #f0f2f8; border-radius: 5px; overflow: hidden; } .fn i { display: block; height: 100%; background: #24418F; border-radius: 5px; transition: width .6s; }
.fn b { text-align: right; font-variant-numeric: tabular-nums; }
.rd-gap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 16px; }
.rd-gap > div { background: #fff4f4; border-radius: 10px; padding: 9px 12px; }
.rd-gap label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: #a1221f; display: block; }
.rd-gap b { font-size: 21px; font-weight: 800; color: #242424; }
.rd-list-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-top: 1px solid var(--line); }
.rd-list { overflow-y: auto; padding: 0 10px 8px; flex: 1; min-height: 120px; }
.cand { display: flex; gap: 10px; padding: 9px 8px; border-radius: 10px; cursor: pointer; border: 1.5px solid transparent; margin-bottom: 4px; }
.cand:hover { background: #f6f8fd; } .cand.on { background: #eef2fb; border-color: #c4d0ee; } .cand.done { opacity: .75; cursor: default; }
.cand input { margin-top: 3px; accent-color: #24418F; }
.cand-b { flex: 1; min-width: 0; }
.cand-t { display: flex; align-items: center; gap: 7px; } .cand-t em { font-style: normal; font-weight: 800; color: #0f6e3f; }
.cand-n { display: flex; gap: 5px; flex-wrap: wrap; margin: 4px 0 3px; }
.nd { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); padding: 2px 7px; border-radius: 10px; }
.nd .ic { width: 12px; height: 12px; }
.cand small .ic { width: 12px; height: 12px; color: var(--ok); }
.rd-act { padding: 10px 14px 14px; border-top: 1px solid var(--line); }
.btn.wide { width: 100%; justify-content: center; }
.rd-fund .card-h { flex-wrap: wrap; }
.rd-fund-b { display: grid; grid-template-columns: 1.1fr 1.4fr auto; gap: 26px; align-items: center; }
.rd-sl label { font-weight: 700; font-size: 13px; display: block; margin-bottom: 8px; }
.rd-sl input[type=range] { width: 100%; accent-color: #E0262F; }
.rd-sl-v { margin: 6px 0; } .rd-sl-v b { font-size: 26px; font-weight: 800; }
.rd-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; }
.rd-out label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--mut); display: block; }
.rd-out b { font-size: 24px; font-weight: 800; display: block; }
.rd-cov { grid-column: 1 / -1; } .rd-cov .bar { height: 12px; margin-bottom: 4px; } .rd-cov .bar i { background: linear-gradient(90deg, #24418F, #1a9b5b); }
.rd-fund-a { display: flex; flex-direction: column; gap: 6px; width: 240px; } .rd-fund-a .btn { white-space: nowrap; justify-content: center; }
.inv-h { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.inv-ch { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; }
.inv-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-height: 420px; overflow-y: auto; }
.inv-lh { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.inv-l .sms { max-width: none; font-size: 12.5px; }
.inv-l .sms b { color: var(--info); font-size: 12px; }

/* ---------- Family application ---------- */
.v-apply { background: linear-gradient(180deg, #e8edf8 0, #f8f8f8 320px); }
.ap-wrap { max-width: 780px; margin: 0 auto; }
.ap-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.ap-brand { display: flex; align-items: center; gap: 12px; } .ap-brand img { width: 48px; height: 48px; border-radius: 10px; background: #fff; padding: 3px; box-shadow: var(--sh); }
.ap-brand b { display: block; font-size: 16px; color: #24418F; } .ap-brand small { color: var(--mut); }
.ap-card { background: #fff; border-radius: 20px; box-shadow: 0 12px 40px rgba(23,45,102,.12); padding: 30px 34px; border-top: 5px solid #E0262F; }
.ap-card h1 { font-size: 25px; color: #12224d; }
.ap-card > p { margin: 8px 0 18px; }
.ap-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 22px; }
.ap-steps > div { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--mut); border-top: 3px solid #e6e6e6; padding-top: 9px; }
.ap-steps i { width: 22px; height: 22px; border-radius: 50%; background: #eee; display: grid; place-items: center; font-style: normal; font-size: 11.5px; font-weight: 800; flex: none; }
.ap-steps i .ic { width: 13px; height: 13px; }
.ap-steps .on { color: #24418F; border-color: #24418F; } .ap-steps .on i { background: #24418F; color: #fff; }
.ap-steps .done { color: #0f6e3f; border-color: #1a9b5b; } .ap-steps .done i { background: #1a9b5b; color: #fff; }
.ap-body { display: flex; flex-direction: column; gap: 14px; min-height: 250px; }
.ap-body .fld input, .ap-body .fld select, .ap-body .fld textarea { font-size: 15px; padding: 11px 12px; height: auto; line-height: 1.3; }
.ap-hits { display: flex; flex-direction: column; gap: 8px; }
.ap-hit { display: flex; align-items: center; gap: 12px; text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 12px 14px; font: inherit; cursor: pointer; }
.ap-hit > div { flex: 1; } .ap-hit.on { border-color: #24418F; background: #eef2fb; box-shadow: 0 0 0 3px rgba(36,65,143,.12); }
.elig { border-radius: 12px; padding: 12px 14px; background: var(--ok-l); } .elig.bad { background: var(--bad-l); }
.elig-bar { position: relative; height: 10px; background: rgba(0,0,0,.07); border-radius: 6px; margin-bottom: 8px; }
.elig-bar i { display: block; height: 100%; background: var(--ok); border-radius: 6px; transition: width .3s; } .elig.bad .elig-bar i { background: var(--bad); }
.elig-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; } .elig.ok .elig-t .ic { color: var(--ok); } .elig.bad .elig-t .ic { color: var(--bad); }
.ap-needs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ap-need { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: 14px; font: inherit; cursor: pointer; transition: all .15s; }
.ap-need .ic { width: 22px; height: 22px; color: var(--c); } .ap-need small { color: var(--mut); }
.ap-need.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 15%, transparent); }
.ap-rev { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ap-rev > div { background: #f6f8fd; border-radius: 12px; padding: 12px 14px; } .ap-rev label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--mut); display: block; } .ap-rev b { display: block; margin: 2px 0; } .ap-rev small { color: var(--mut); }
.ap-foot { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.ap-done { text-align: center; } .ap-done > .ic { color: #fff; background: var(--ok); border-radius: 50%; padding: 10px; width: 64px; height: 64px; margin-bottom: 8px; }
.ap-done .ap-foot { text-align: left; }
.tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 22px 0 4px; text-align: center; }
.tl > div { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12.5px; color: var(--mut); position: relative; }
.tl > div::before { content: ""; position: absolute; top: 14px; left: -50%; right: 50%; height: 3px; background: #e6e6e6; z-index: 0; } .tl > div:first-child::before { display: none; }
.tl > div.on::before { background: var(--ok); }
.tl i { width: 30px; height: 30px; border-radius: 50%; background: #eee; display: grid; place-items: center; font-style: normal; font-weight: 800; z-index: 1; }
.tl .on i { background: var(--ok); color: #fff; } .tl .on b { color: var(--ink); }
.tsearch.big { padding: 10px 14px; } .tsearch.big input { font-size: 16px; }

/* ---------- other modules ---------- */
.donut-wrap { display: flex; flex-direction: column; align-items: center; } .donut-wrap .donut { width: 190px; }
.imp { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.imp-r { display: grid; grid-template-columns: 220px 1fr 50px; gap: 12px; align-items: center; font-size: 13px; }
.imp-bar { position: relative; height: 14px; background: linear-gradient(90deg, #fdeaea 0 25%, #fff3dc 25% 50%, #e7f0fa 50% 75%, #e3f5ec 75%); border-radius: 7px; }
.imp-bar i { position: absolute; top: -2px; width: 4px; height: 18px; border-radius: 2px; } .imp-bar i.b { background: #9aa3b8; } .imp-bar i.a { background: #1a9b5b; }
.imp-bar s { position: absolute; top: 5px; height: 4px; background: #1a9b5b; opacity: .55; text-decoration: none; }
.imp-r em { font-style: normal; text-align: right; }
.bar.sm { height: 6px; margin-bottom: 3px; }
.prov-cats { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.pc { background: #fff; border-radius: 12px; box-shadow: var(--sh); padding: 12px; } .pc b { display: block; font-size: 22px; color: #24418F; } .pc span { font-size: 12px; color: var(--mut); }
.camps { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.camp { border-top: 4px solid var(--c); } .camp p { margin: 4px 0 10px; min-height: 34px; }
.camp-h { display: flex; justify-content: space-between; align-items: baseline; }
.camp-f { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; } .camp-f b { font-size: 20px; }
.rcpt { border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; font-size: 13.5px; line-height: 1.6; }
.rcpt-h { display: flex; gap: 12px; align-items: center; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 2px solid #24418F; } .rcpt-h img { width: 44px; } .rcpt-h b { display: block; font-size: 16px; } .rcpt-h small { color: var(--mut); }
.chk { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid #f0f0f0; } .chk > div { flex: 1; }
.chk .fd { width: 26px; height: 26px; margin: 0; display: grid; place-items: center; color: #fff; } .chk .fd .ic { width: 14px; height: 14px; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; } .kv span { color: var(--mut); }
.banner { margin-top: 12px; }

@media (max-width: 1500px) {
  .rd-kpis { flex-direction: row; } .rd-kpis .hk { min-width: 0; }
  .rd-hero { grid-template-columns: 1fr; }
  .rd-fund-b { grid-template-columns: 1fr 1.3fr; } .rd-fund-a { grid-column: 1 / -1; flex-direction: row; align-items: center; max-width: none; }
  .prov-cats { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1360px) {
  .hz-main { grid-template-columns: 1fr 330px; }
  .inv-langs { grid-template-columns: 1fr; }
}
.rd-map .m-sname { font-size: 13px; } .rd-n { font-size: 13px; }
.cand-t { flex-wrap: wrap; row-gap: 2px; } .cand-t b { white-space: nowrap; }
@media (max-width: 1500px) { .rd-fund-a { width: auto; } .rd-fund-a small { flex: 1; } }