/*
 Public shell refresh for IQResume content pages (AIT-2599).
 Scoped to body.public-shell so the generator keeps its own CSS contract.
*/
:root {
 --iq-bg:#f6f8fb;
 --iq-surface:#ffffff;
 --iq-ink:#0f172a;
 --iq-muted:#64748b;
 --iq-border:#d8e0ea;
 --iq-blue:#2954ff;
 --iq-blue-dark:#1d3fd1;
 --iq-green:#10b981;
 --iq-green-dark:#059669;
 --iq-shadow:0 18px 48px rgba(15,23,42,0.10);
 --iq-radius:8px;
}

body.public-shell {
 background:var(--iq-bg);
 color:var(--iq-ink);
 font-family:"Inter", Arial, Helvetica, sans-serif;
 font-size:16px;
 line-height:1.7;
}

body.public-shell a {
 color:var(--iq-blue-dark);
 text-decoration:underline;
 text-underline-offset:3px;
}

body.public-shell p { padding-bottom:1rem; }

body.public-shell .h1,
body.public-shell h1,
body.public-shell h2,
body.public-shell h3,
body.public-shell h4 {
 color:var(--iq-ink);
 font-family:"Sora", "Inter", Arial, Helvetica, sans-serif;
 font-weight:700;
 letter-spacing:0;
}

body.public-shell h1,
body.public-shell .h1 {
 font-size:42px;
 line-height:1.12;
 margin:0 0 22px;
}

body.public-shell h2 {
 font-size:26px;
 line-height:1.25;
 margin:32px 0 14px;
}

body.public-shell h3 {
 font-size:19px;
 line-height:1.3;
 margin:24px 0 10px;
}

body.public-shell #topwrapper,
body.public-shell.hp #topwrapper {
 background:linear-gradient(180deg, #ffffff 0%, #eef4ff 58%, #f6f8fb 100%);
 height:auto;
 overflow:visible;
}

body.public-shell #topwrapper2,
body.public-shell.hp #topwrapper2 {
 background:none;
 height:auto;
}

body.public-shell #top {
 box-sizing:border-box;
 width:min(1120px, calc(100% - 40px));
 padding:22px 0 0;
}

body.public-shell #menu {
 align-items:center;
 background:rgba(255,255,255,0.94);
 border:1px solid rgba(216,224,234,0.92);
 border-radius:var(--iq-radius);
 box-shadow:0 12px 34px rgba(15,23,42,0.08);
 box-sizing:border-box;
 display:flex;
 gap:20px;
 height:auto;
 line-height:1.2;
 min-height:64px;
 padding:12px 14px;
}

body.public-shell #logo { float:none; padding:0; }

body.public-shell .brand-lockup { color:var(--iq-ink); }

body.public-shell .brand-lockup-mark {
 background:var(--iq-blue);
 border-radius:8px;
 box-shadow:0 10px 24px rgba(41,84,255,0.20);
}

body.public-shell .brand-lockup-name strong { color:var(--iq-blue); }

body.public-shell #menu ul {
 display:flex;
 flex:1 1 auto;
 flex-wrap:wrap;
 gap:4px;
 justify-content:flex-end;
 white-space:normal;
}

body.public-shell #menu li {
 background:none;
 float:none;
 margin:0;
 padding:0;
}

body.public-shell #menu li a {
 border:1px solid transparent;
 border-radius:8px;
 color:#334155;
 font-size:14px;
 font-weight:600;
 height:auto;
 line-height:1.25;
 min-height:20px;
 padding:10px 12px;
}

body.public-shell #menu li a:hover,
body.public-shell #menu li.active a {
 background:#eef4ff;
 border-color:#dbe6ff;
 color:var(--iq-blue-dark);
}

body.public-shell #topwrapper #func {
 align-items:center;
 display:flex;
 gap:10px;
 height:auto;
 line-height:normal;
 position:absolute;
 right:70px;
 top:84px;
}

body.public-shell #topwrapper a.smallbutton,
body.public-shell a.bigbutton,
body.public-shell a.smallbutton,
body.public-shell .rex-cta,
body.public-shell .public-shell-cta {
 background:var(--iq-green);
 border:0;
 border-radius:8px;
 box-shadow:none;
 color:#ffffff !important;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 font-family:"Inter", Arial, Helvetica, sans-serif;
 font-size:15px;
 font-weight:700;
 height:auto;
 line-height:1.2;
 margin:0;
 min-height:44px;
 padding:12px 18px;
 text-decoration:none;
 text-shadow:none;
 white-space:normal;
}

body.public-shell #topwrapper a.smallbutton:hover,
body.public-shell a.bigbutton:hover,
body.public-shell a.smallbutton:hover,
body.public-shell .rex-cta:hover,
body.public-shell .public-shell-cta:hover {
 background:var(--iq-green-dark);
 margin:0;
 text-decoration:none;
}

body.public-shell #topwrapper a.smallbutton:first-child {
 background:#ffffff;
 border:1px solid var(--iq-border);
 color:#334155 !important;
}

body.public-shell #langs {
 border:1px solid var(--iq-border);
 border-radius:8px;
 box-shadow:0 10px 24px rgba(15,23,42,0.08);
 right:0;
 top:84px;
}

body.public-shell.hp #aboutwrapper {
 background:none;
 box-sizing:border-box;
 display:grid;
 grid-template-columns:minmax(0, 1.05fr) minmax(280px, 0.75fr);
 gap:54px;
 width:min(1120px, calc(100% - 40px));
 padding:72px 0 48px;
}

body.public-shell #about {
 float:none;
 width:auto;
}

body.public-shell #about a { color:var(--iq-blue-dark); }

body.public-shell #about h1,
body.public-shell #about .h1,
body.public-shell #about h1 a,
body.public-shell #about .h1 a {
 color:var(--iq-ink);
 font-family:"Sora", "Inter", Arial, Helvetica, sans-serif;
 font-size:54px;
 font-weight:800;
 line-height:1.04;
 margin:0 0 22px;
 text-decoration:none;
 text-transform:none;
}

body.public-shell #about h1 strong,
body.public-shell #about .h1 strong { color:var(--iq-blue); }

body.public-shell #about p {
 color:#334155;
 font-size:18px;
 line-height:1.72;
 max-width:660px;
 padding:0 0 28px;
}

body.public-shell #sliderwrapper {
 background:#ffffff;
 border:1px solid var(--iq-border);
 border-radius:8px;
 box-shadow:var(--iq-shadow);
 box-sizing:border-box;
 height:auto;
 justify-self:end;
 overflow:hidden;
 padding:14px;
 position:relative;
 right:auto;
 top:auto;
 width:min(360px, 100%);
}

body.public-shell #slider {
 border-radius:6px;
 height:auto;
 opacity:1;
 width:100%;
}

body.public-shell #slider img {
 display:block;
 height:auto;
 width:100%;
}

body.public-shell #sliderwrapper #sprev,
body.public-shell #sliderwrapper #snext {
 background:rgba(15,23,42,0.72);
 border-radius:999px;
 color:#ffffff;
 font-size:18px;
 height:40px;
 left:12px;
 line-height:40px;
 overflow:visible;
 text-align:center;
 text-decoration:none;
 text-indent:0;
 top:calc(50% - 20px);
 width:40px;
}

body.public-shell #sliderwrapper #snext {
 left:auto;
 right:12px;
}

body.public-shell #topwrapper3 {
 background:#ffffff;
 border-bottom:1px solid var(--iq-border);
 height:auto;
}

body.public-shell #tip {
 box-sizing:border-box;
 color:#475569;
 font-size:15px;
 height:auto;
 line-height:1.7;
 width:min(1120px, calc(100% - 40px));
 padding:18px 0;
}

body.public-shell #subpage {
 background:none;
 display:none;
 height:0;
 padding:0;
}

body.public-shell #mainwrapper {
 background:transparent;
 border:0;
 margin-bottom:34px;
}

body.public-shell #main {
 box-sizing:border-box;
 width:min(1120px, calc(100% - 40px));
}

body.public-shell #content {
 background:#ffffff;
 border:1px solid var(--iq-border);
 border-radius:8px;
 box-shadow:0 14px 34px rgba(15,23,42,0.05);
 box-sizing:border-box;
 margin-top:28px;
 padding:42px 48px;
}

body.public-shell.hp #content {
 font-size:16px;
 line-height:1.8;
 text-align:left;
}

body.public-shell.hp #content p,
body.public-shell #content p.big {
 color:#334155;
 font-size:16px;
 line-height:1.8;
 padding-left:0;
 padding-right:0;
}

body.public-shell #content img {
 height:auto;
 max-width:100%;
}

body.public-shell #content .box,
body.public-shell .rex-cta-block {
 background:#f8fafc;
 border:1px solid var(--iq-border);
 border-radius:8px;
 box-shadow:none;
 color:#334155;
 padding:20px 22px;
}

body.public-shell #content ul { margin:0 0 18px; }

body.public-shell #content li {
 background:none;
 color:#334155;
 list-style:disc;
 margin-left:22px;
 padding:0 0 8px 0;
}

body.public-shell #bubbles {
 display:grid;
 gap:16px;
 grid-template-columns:repeat(4, minmax(0, 1fr));
 margin:34px 0 0;
 width:auto;
}

body.public-shell #bubbles a.bubble {
 background:#ffffff;
 border:1px solid var(--iq-border);
 border-radius:8px;
 box-shadow:0 10px 24px rgba(15,23,42,0.06);
 box-sizing:border-box;
 color:var(--iq-ink);
 float:none;
 height:auto;
 line-height:1.45;
 margin:0;
 min-height:230px;
 padding:134px 16px 18px;
 width:auto;
}

body.public-shell #bubbles a.bubble img {
 border-radius:8px 8px 0 0;
 height:118px;
 left:0;
 object-fit:cover;
 top:0;
 width:100%;
}

body.public-shell #bubbles a.bubble .arrow { display:none; }

body.public-shell .createcvbox {
 box-sizing:border-box;
 float:none;
 margin:0 0 24px;
 padding:0;
}

body.public-shell .public-create-resume-card {
 align-items:center;
 background:#f8fafc;
 border:1px solid var(--iq-border);
 border-radius:8px;
 box-sizing:border-box;
 display:grid;
 gap:18px;
 grid-template-columns:88px minmax(0, 1fr) auto;
 margin:0;
 padding:20px;
 text-decoration:none;
 width:100%;
}

body.public-shell .public-create-resume-card img {
 border-radius:8px;
 display:block;
 width:88px;
}

body.public-shell .public-create-resume-card > span:not(.public-shell-cta) {
 display:block;
}

body.public-shell .public-create-resume-card strong {
 color:var(--iq-ink);
 display:block;
 font-family:"Sora", "Inter", Arial, Helvetica, sans-serif;
 font-size:18px;
 line-height:1.25;
 margin-bottom:4px;
}

body.public-shell .public-create-resume-card > span:not(.public-shell-cta) span {
 color:var(--iq-muted);
 display:block;
 font-size:14px;
 line-height:1.5;
}

body.public-shell #creator {
 background:#eef4ff;
 border:1px solid #dbe6ff;
 border-radius:8px;
 color:#334155;
 margin:24px 0 30px;
 padding:24px;
}

body.public-shell #faceswrapper {
 background:#ffffff;
 border-top:1px solid var(--iq-border);
 height:auto;
}

body.public-shell #faces {
 background:none;
 box-sizing:border-box;
 display:grid;
 gap:16px;
 grid-template-columns:repeat(3, minmax(0, 1fr));
 height:auto;
 padding:34px 0;
 width:min(1120px, calc(100% - 40px));
}

body.public-shell #faces .box,
body.public-shell #faces .box1,
body.public-shell #faces .box2,
body.public-shell #faces .box3 {
 background:#f8fafc;
 border:1px solid var(--iq-border);
 border-radius:8px;
 box-sizing:border-box;
 color:#334155;
 display:block;
 font-style:normal;
 height:auto;
 left:auto;
 line-height:1.55;
 min-height:0;
 overflow:visible;
 padding:18px;
 position:static;
 right:auto;
 top:auto;
 width:auto;
}

body.public-shell #faces .box3 .count { color:var(--iq-blue); }

body.public-shell #footer {
 background:#0f172a;
 color:#cbd5e1;
 padding:28px 0 0;
}

body.public-shell #footer a,
body.public-shell #ftr a,
body.public-shell #ftr2 a {
 color:#e2e8f0;
}

body.public-shell #ftr {
 box-sizing:border-box;
 width:min(1120px, calc(100% - 40px));
}

@media only screen and (max-width: 860px) {
 body.public-shell #top,
 body.public-shell #main,
 body.public-shell #tip,
 body.public-shell #ftr,
 body.public-shell #faces,
 body.public-shell.hp #aboutwrapper {
  width:calc(100% - 32px);
 }

 body.public-shell #menu {
  align-items:flex-start;
  flex-direction:column;
  gap:12px;
 }

 body.public-shell #menu ul {
  justify-content:flex-start;
  width:100%;
 }

 body.public-shell #menu li a {
  min-height:28px;
  padding:10px 11px;
 }

 body.public-shell #topwrapper #func {
  position:static;
  justify-content:flex-start;
  margin:12px 64px 0 0;
 }

 body.public-shell #langs { top:88px; }

 body.public-shell.hp #aboutwrapper {
  display:block;
  padding:44px 0 26px;
 }

 body.public-shell #about h1,
 body.public-shell #about .h1,
 body.public-shell #about h1 a,
 body.public-shell #about .h1 a {
  font-size:40px;
 }

 body.public-shell #sliderwrapper {
  justify-self:auto;
  margin:26px auto 8px;
  width:min(340px, 100%);
 }

 body.public-shell #sliderwrapper #sprev,
 body.public-shell #sliderwrapper #snext,
 body.public-shell #pager {
  display:none;
 }

 body.public-shell #content {
  margin-top:20px;
  padding:30px 24px;
 }

 body.public-shell #subpage {
  display:none;
 }

 body.public-shell #bubbles,
 body.public-shell #faces {
  grid-template-columns:1fr;
 }

 body.public-shell .public-create-resume-card {
  grid-template-columns:64px minmax(0, 1fr);
 }

 body.public-shell .public-create-resume-card .public-shell-cta {
  grid-column:1 / -1;
  width:100%;
 }
}

@media only screen and (max-width: 420px) {
 body.public-shell {
  font-size:15px;
 }

 body.public-shell #top,
 body.public-shell #main,
 body.public-shell #tip,
 body.public-shell #ftr,
 body.public-shell #faces,
 body.public-shell.hp #aboutwrapper {
  width:calc(100% - 24px);
 }

 body.public-shell h1,
 body.public-shell .h1 {
  font-size:31px;
 }

 body.public-shell h2 {
  font-size:23px;
 }

 body.public-shell #about h1,
 body.public-shell #about .h1,
 body.public-shell #about h1 a,
 body.public-shell #about .h1 a {
  font-size:34px;
 }

 body.public-shell #about p {
  font-size:16px;
 }

 body.public-shell #topwrapper #func {
  align-items:stretch;
  flex-direction:column;
  margin-right:0;
 }

 body.public-shell #langs {
  right:12px;
  top:86px;
 }

 body.public-shell #content {
  padding:24px 18px;
 }

 body.public-shell .public-create-resume-card {
  grid-template-columns:1fr;
 }

 body.public-shell .public-create-resume-card img {
  display:none;
 }
}