*{box-sizing:border-box}:root{--bg:#f3f6f8;--panel:#fff;--panel2:#f8fafb;--text:#191919;--muted:#667085;--line:#d9e1e7;--brand:#0a66c2;--brand2:#004182;--pink:#d62b7f;--green:#057642;--amber:#9a6700;--shadow:0 1px 3px rgba(0,0,0,.08),0 8px 24px rgba(0,0,0,.05);--radius:16px}[data-theme="dark"]{--bg:#101214;--panel:#1b1f23;--panel2:#22272b;--text:#f3f6f8;--muted:#aeb8c1;--line:#38424a;--brand:#70b5f9;--brand2:#a8d4ff;--pink:#ff5aa5;--green:#57c58a;--amber:#e2b75a;--shadow:0 1px 3px rgba(0,0,0,.45),0 12px 30px rgba(0,0,0,.25)}
html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);transition:background .2s,color .2s}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.top{height:64px;display:flex;align-items:center;gap:18px;padding:0 28px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}.logo{font-weight:950;line-height:.77;font-size:16px;letter-spacing:-.6px;min-width:100px}.logo b{font-size:24px}.logo .p{color:var(--pink)}.nav{display:flex;gap:4px}.nav button{border:0;background:transparent;color:var(--muted);padding:10px 12px;border-radius:10px;font-weight:700}.nav button.active,.nav button:hover{background:var(--panel2);color:var(--text)}.actions{margin-left:auto;display:flex;align-items:center;gap:8px}.iconbtn,.selectbtn{border:1px solid var(--line);background:var(--panel);color:var(--text);height:40px;border-radius:10px;padding:0 11px;font-weight:700}.post{background:var(--brand);color:white;border:0;border-radius:10px;padding:11px 15px;font-weight:800}.post:hover{background:var(--brand2)}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--pink);color:white;font-weight:900}
.wrap{max-width:1460px;margin:auto;padding:24px}.hero{display:grid;grid-template-columns:1.35fr .65fr;gap:18px}.heroMain{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow)}.eyebrow{display:flex;align-items:center;gap:8px;color:var(--brand);font-weight:800;font-size:13px}.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--green)}h1{font-size:44px;line-height:1.04;letter-spacing:-1.9px;margin:14px 0 12px;max-width:760px}.sub{font-size:17px;color:var(--muted);line-height:1.55;max-width:820px}.search{display:grid;grid-template-columns:1.3fr .7fr auto;gap:8px;margin-top:24px}.field{display:flex;align-items:center;gap:9px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:0 12px}.field input,.field select{width:100%;border:0;background:transparent;color:var(--text);outline:0;padding:13px 0}.primary{border:0;background:var(--brand);color:white;border-radius:10px;padding:0 20px;font-weight:850}.primary:hover{background:var(--brand2)}.heroLinks{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.softbtn{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:10px 12px;font-weight:750}.softbtn:hover{border-color:var(--brand);color:var(--brand)}.aiBtn{border:1px solid var(--brand);background:transparent;color:var(--brand);border-radius:10px;padding:10px 12px;font-weight:850}
.radar{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}.radarHead{display:flex;justify-content:space-between;align-items:center}.live{color:var(--green);font-weight:800;font-size:12px}.big{font-size:52px;font-weight:950;letter-spacing:-2px;margin:20px 0 0}.muted{color:var(--muted)}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}.metric{border:1px solid var(--line);background:var(--panel2);border-radius:12px;padding:13px}.metric b{display:block;font-size:18px}.metric small{color:var(--muted)}
.grid{display:grid;grid-template-columns:245px minmax(0,1fr) 300px;gap:18px;margin-top:18px}.side,.consume{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;height:max-content;position:sticky;top:84px}.side h3,.consume h3{margin:0 0 16px}.filter{margin:14px 0}.filter label{display:block;font-size:12px;font-weight:850;margin-bottom:7px;color:var(--muted)}.filter select{width:100%;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:9px;padding:10px}.resultsHead{display:flex;justify-content:space-between;align-items:end;margin-bottom:12px}.resultsHead h2{margin:0;font-size:23px}.resultsHead p{margin:5px 0 0;color:var(--muted)}.sort{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:9px;padding:9px}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;transition:.18s;box-shadow:0 1px 2px rgba(0,0,0,.03)}.card:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-2px)}.person{display:flex;gap:13px}.photo{width:68px;height:68px;border-radius:50%;object-fit:cover;border:2px solid var(--panel)}.person h3{margin:2px 0 3px;font-size:17px}.role{font-weight:750}.loc{font-size:12px;color:var(--muted);margin-top:4px}.tags{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}.tag{font-size:11px;border:1px solid var(--line);background:var(--panel2);border-radius:999px;padding:5px 8px}.signal{color:var(--green);font-weight:800}.detailgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-top:1px solid var(--line);padding-top:12px}.detail{font-size:12px}.detail span{display:block;color:var(--muted);margin-bottom:2px}.cardActions{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap}.cardActions button{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:8px;padding:8px 9px;font-size:12px;font-weight:750}.cardActions .unlock{background:var(--brand);color:white;border-color:var(--brand)}.cardActions button:hover{border-color:var(--brand);color:var(--brand)}.cardActions .unlock:hover{color:white;background:var(--brand2)}
.consumptionScore{font-size:34px;font-weight:950}.progress{height:8px;background:var(--panel2);border-radius:99px;overflow:hidden;margin:8px 0 14px;border:1px solid var(--line)}.progress i{display:block;height:100%;width:0;background:var(--brand)}.notice{border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:10px;padding:12px;margin:11px 0;background:var(--panel2)}.notice b{display:block;margin-bottom:3px}.notice small{color:var(--muted);line-height:1.35}.consume .primary{width:100%;padding:11px;margin-top:4px}.activity{margin-top:17px;padding-top:15px;border-top:1px solid var(--line)}.event{font-size:12px;color:var(--muted);padding:6px 0}.event b{color:var(--text)}.footerCta{margin:22px 0 4px;background:var(--brand2);color:white;border-radius:var(--radius);padding:28px;display:flex;align-items:center;gap:20px}.footerCta h3{margin:0 0 6px;font-size:23px}.footerCta p{margin:0;color:rgba(255,255,255,.85)}.footerCta .post{margin-left:auto;background:white;color:#D63384;white-space:nowrap}.toast{position:fixed;right:24px;bottom:24px;background:var(--text);color:var(--panel);padding:12px 16px;border-radius:10px;box-shadow:var(--shadow);opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s;z-index:50}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1100px){.hero{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.side,.consume{position:static}.side{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.side h3{grid-column:1/-1}.filter{margin:0}}@media(max-width:780px){.top{padding:0 14px}.nav{display:none}.actions .selectbtn:nth-child(2){display:none}.wrap{padding:14px}h1{font-size:34px}.heroMain{padding:23px}.search{grid-template-columns:1fr}.primary{padding:13px}.cards{grid-template-columns:1fr}.side{grid-template-columns:1fr 1fr}.footerCta{align-items:flex-start;flex-direction:column}.footerCta .post{margin-left:0}}@media(max-width:520px){.actions .plan{display:none}.post.toppost{font-size:0;padding:11px}.post.toppost:after{content:'+';font-size:19px}.metrics{grid-template-columns:1fr}.side{grid-template-columns:1fr}}

/* ============================================================
   JobOnePlus brand overrides (magenta #D63384 / navy #000B4E)
   Overrides the design's LinkedIn-blue tokens after the fact.
   ============================================================ */
:root{--brand:#D63384;--brand2:#000B4E;--pink:#D63384}
[data-theme="dark"]{--brand:#ff5aa5;--brand2:#D63384;--pink:#ff5aa5}

/* Header links behave like buttons */
.nav a{display:inline-block;text-decoration:none}
.actions a.selectbtn{display:inline-flex;align-items:center;text-decoration:none}

/* User menu (replaces the demo "DS" avatar with a real dropdown) */
.usermenu{position:relative}
.usermenu .avatar{border:0;cursor:pointer}
.menu{position:absolute;right:0;top:46px;min-width:220px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;display:none;z-index:60}
.menu.open{display:block}
.menu .who{padding:8px 10px;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line);margin-bottom:6px;word-break:break-all}
.menu a,.menu button{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--text);padding:9px 10px;border-radius:8px;font-weight:700;font-size:13px}
.menu a:hover,.menu button:hover{background:var(--panel2)}
.menu form{margin:0}
.menu .danger{color:var(--pink)}

/* Skill chips inside cards */
.tag.skill{border-color:var(--line)}

/* Contact reveal after unlock */
.contactBox{margin-top:12px;border:1px solid var(--line);border-left:4px solid var(--green);background:var(--panel2);border-radius:10px;padding:10px 12px;font-size:13px}
.contactBox b{display:block;font-size:11px;color:var(--muted);font-weight:800;margin-bottom:2px}
.contactBox a{color:var(--brand);font-weight:750}

/* Loading / empty states for real results */
.stateMsg{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 12px;border:1px dashed var(--line);border-radius:14px}
.stateMsg.small{padding:22px 12px}

/* Disabled (no-backend) buttons: honest, non-clickable look */
.aiBtn[disabled],.cardActions button[disabled]{opacity:.5;cursor:not-allowed}
.aiBtn[disabled]:hover,.cardActions button[disabled]:hover{border-color:var(--line);color:var(--muted);background:var(--panel)}

/* Saved state heart */
.cardActions .saved{color:var(--pink);border-color:var(--pink)}

/* Guest note in consume panel */
.guestNote{font-size:12px;color:var(--muted);line-height:1.4;margin-top:6px}

/* S3: footer CTA stays navy in BOTH themes.
   The base rule uses var(--brand2), which the brand override remaps to
   magenta (#D63384) in dark mode, flipping the whole CTA block. Pin navy
   so navy=footer reads consistently; white text on #000B4E = AAA contrast. */
.footerCta{background:#000B4E}
.footerCta h3{color:#fff}
.footerCta p{color:#c7cbe8}
.footerCta .post{background:#fff;color:#000B4E}

/* ============================================================
   HEADER — Job One+ "feed" polish (magenta #D63384 / navy).
   Feed identity cues applied to the Talent Pro header while
   keeping its structure (logo · tabs · lang · theme · plan ·
   publish · avatar). Theme via [data-theme="dark"]; light is
   the default. Presentation only — no JS hooks changed.
   ============================================================ */
:root{--mag:#D63384;--mag2:#E85D9F}

/* --- Shell / bar + signature 2px magenta hairline ---------- */
.top{
  position:sticky;top:0;z-index:30;
  height:60px;gap:14px;padding:0 24px;
  display:flex;align-items:center;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.top::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:2px;background:var(--mag);z-index:2;pointer-events:none;
}
[data-theme="dark"] .top{
  background:#222226;border-bottom-color:rgba(255,255,255,.08);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}

/* --- Logo -------------------------------------------------- */
.top .logo{margin-right:12px;flex-shrink:0}
.top .logo .p{color:var(--mag)}
[data-theme="dark"] .top .logo{color:#fff}

/* --- Nav: vertical icon+label pill chips (feed style) ------ */
.top .nav{display:flex;align-items:center;gap:2px;height:100%}
.navtab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:4px;padding:6px 12px;
  min-width:70px;height:48px;
  border-radius:10px;cursor:pointer;position:relative;text-decoration:none;
  transition:background .18s;
}
.navtab .ti{
  width:20px;height:20px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  color:#5A616B;transition:color .18s;
}
.navtab .ti svg{width:20px;height:20px;display:block}
.navtab .tl{
  font-size:10px;font-weight:600;line-height:1;letter-spacing:.01em;
  color:#5A616B;white-space:nowrap;transition:color .18s;
}
.navtab:hover{background:rgba(0,0,0,.05)}
.navtab:hover .ti,.navtab:hover .tl{color:#1A1A1A}
.navtab.active{background:rgba(214,51,132,.10)}
.navtab.active .ti,.navtab.active .tl{color:var(--mag)}

[data-theme="dark"] .navtab .ti,
[data-theme="dark"] .navtab .tl{color:rgba(255,255,255,.5)}
[data-theme="dark"] .navtab:hover{background:rgba(255,255,255,.06)}
[data-theme="dark"] .navtab:hover .ti,
[data-theme="dark"] .navtab:hover .tl{color:rgba(255,255,255,.9)}
[data-theme="dark"] .navtab.active{background:rgba(214,51,132,.18)}
[data-theme="dark"] .navtab.active .ti{color:#fff}
[data-theme="dark"] .navtab.active .tl{color:rgba(255,255,255,.95)}

/* --- Actions cluster (right) with subtle divider ----------- */
.top .actions{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  padding-left:16px;border-left:1px solid var(--line);
}
[data-theme="dark"] .top .actions{border-left-color:rgba(255,255,255,.08)}

/* --- Pill controls: lang select + theme toggle ------------- */
.top .selectbtn,
.top .iconbtn{
  height:38px;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 12px;font-weight:700;font-size:13px;
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.10);
  color:var(--text);
  transition:border-color .2s,background .2s,color .2s;
}
.top .iconbtn{min-width:40px;padding:0;font-size:16px;line-height:1}
.top .selectbtn:hover,
.top .iconbtn:hover{border-color:rgba(214,51,132,.5);background:rgba(214,51,132,.06)}

[data-theme="dark"] .top .selectbtn,
[data-theme="dark"] .top .iconbtn{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
  color:#fff;
}
[data-theme="dark"] .top .selectbtn:hover,
[data-theme="dark"] .top .iconbtn:hover{
  border-color:rgba(214,51,132,.6);background:rgba(214,51,132,.14);
}

/* --- "Mi Plan" pill: magenta-tinted to flag credits -------- */
.top .selectbtn.plan{
  gap:2px;font-weight:750;
  color:var(--mag);
  background:rgba(214,51,132,.08);
  border-color:rgba(214,51,132,.28);
}
.top .selectbtn.plan:hover{background:rgba(214,51,132,.14);border-color:rgba(214,51,132,.5)}
.top .selectbtn.plan #planCredits{color:inherit;font-variant-numeric:tabular-nums}
[data-theme="dark"] .top .selectbtn.plan{
  color:var(--mag2);background:rgba(214,51,132,.16);border-color:rgba(214,51,132,.4);
}

/* --- "Publicar" primary pill (filled magenta) -------------- */
.top .post.toppost{
  height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:11px;padding:0 16px;
  font-weight:800;font-size:13px;
  background:var(--mag);color:#fff;
  box-shadow:0 2px 8px rgba(214,51,132,.28);
  transition:background .2s,transform .15s,box-shadow .2s;
}
.top .post.toppost:hover{background:var(--mag2);transform:translateY(-1px);box-shadow:0 4px 14px rgba(214,51,132,.38)}

/* --- Avatar: 34px round magenta with hover lift ------------ */
.top .usermenu .avatar,
.top .avatar{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--mag);color:#fff;font-weight:900;font-size:13px;
  border:1.5px solid rgba(0,0,0,.10);
  transition:border-color .2s,transform .15s;
}
[data-theme="dark"] .top .usermenu .avatar,
[data-theme="dark"] .top .avatar{border-color:rgba(255,255,255,.14)}
.top .usermenu .avatar:hover{border-color:var(--mag);transform:scale(1.06)}

/* --- Guest "Sign in" pill --------------------------------- */
.top .actions>a.selectbtn[data-i="signin"]{font-weight:750}

/* --- Responsive: icons-only tabs, then hide nav ----------- */
@media(max-width:1280px){
  .navtab .tl{display:none}
  .navtab{min-width:44px;padding:8px 10px;height:44px}
}
@media(max-width:780px){
  .top{padding:0 14px;gap:10px;height:56px}
  .top .actions{padding-left:10px;gap:6px}
}