/* ══════════════════════════════════════════════
       LOMO — PROFILE SCREENS (redesigned)
       ══════════════════════════════════════════════ */

    /* Background for all profile screens */
    #screenRecruiterPublic,
    #screenEmployeePublic,
    #screenMyEmployerProfile,
    #screenMyEmployeeProfile{
      background: #f4f8f9;
    }

    /* ── Sticky header ───────────────────────────── */
    .profileHeader{
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(38,110,120,.10);
      flex: 0 0 auto;
      width: 100%;
    }
    .profileHeaderInner{
      max-width: 920px;
      width: 100%;
      margin: 0 auto;
      padding: 0 20px;
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      box-sizing: border-box;
    }
    .profileHeaderActions{
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .profileHeaderTitle{
      font-size: 13px;
      font-weight: 700;
      color: rgba(0,0,0,.50);
      letter-spacing: .04em;
      white-space: nowrap;
    }
    /* Override accent colour for profile header nav buttons */
    .profileHeader .feedNavBtn.accent{
      background: #26707a;
      color: #fff;
      border-color: #26707a;
    }
    .profileHeader .feedNavBtn.accent:hover{
      background: #1a5c68;
      border-color: #1a5c68;
    }

    /* ── Hero banner ─────────────────────────────── */
    .profileHero{
      height: 150px;
      background: linear-gradient(135deg, #2e8891 0%, #26707a 45%, #1a5c68 80%, #0f3d47 100%);
      flex: 0 0 auto;
      width: 100%;
    }
    .profileHeroAvatar{
      display: flex;
      justify-content: center;
      margin-top: -50px;
      flex: 0 0 auto;
      position: relative;
      z-index: 1;
    }
    .avatarCircle.xl{
      width: 100px;
      height: 100px;
      border: 3px solid #fff;
      box-shadow: 0 6px 28px rgba(0,0,0,.18);
    }

    /* ── Public profile page body ────────────────── */
    .profilePageBody{
      width: min(860px, 92vw);
      margin: 0 auto;
      padding: 14px 0 88px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* ── Identity block (centered, below avatar) ─── */
    .profileIdentity{
      text-align: center;
      padding: 4px 12px 0;
    }
    .profileIdentity .profileName{
      font-size: 24px;
      font-weight: 760;
      letter-spacing: -.01em;
    }
    .profileIdentity .badgeRow{
      justify-content: center;
    }

    /* ── Section cards ───────────────────────────── */
    .profileSection{
      background: #fff;
      border: 1px solid rgba(38,110,120,.10);
      border-radius: 20px;
      padding: 18px 20px;
      box-shadow: 0 2px 14px rgba(0,0,0,.04);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .profileSectionHead{
      font-weight: 700;
      letter-spacing: .07em;
      font-size: 11px;
      text-transform: uppercase;
      color: #26707a;
    }
    /* Conditional sections hidden until JS removes .hidden from .profileSectionHead */
    .profileSection.cond{ display: none; }
    .profileSection.cond:has(.profileSectionHead:not(.hidden)){ display: flex; }

    /* ── Profile edit sticky bar (tabs + actions) ── */
    .profileEditStickyBar{
      position: sticky;
      top: 58px;
      z-index: 99;
      background: rgba(248,249,249,.97);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(38,110,120,.10);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 20px;
      flex-shrink: 0;
      width: 100%;
      box-sizing: border-box;
    }
    .profileEditTabBtns{
      display: flex;
      gap: 4px;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .profileEditTabBtns::-webkit-scrollbar{ display: none; }
    .profileTab{
      padding: 6px 14px;
      border-radius: 20px;
      border: 1.5px solid rgba(38,110,120,.22);
      background: #fff;
      font-size: 12px;
      font-weight: 600;
      color: rgba(0,0,0,.50);
      cursor: pointer;
      white-space: nowrap;
      transition: background 150ms, color 150ms, border-color 150ms;
    }
    .profileTab.active{
      background: #2a7a8a;
      color: #fff;
      border-color: #2a7a8a;
    }
    .profileEditStickyActions{
      display: flex;
      gap: 8px;
      align-items: center;
      flex-shrink: 0;
    }
    /* Tab panes */
    .profileTabPane{
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .profileTabPane[hidden]{ display: none !important; }

    /* ── Edit profile page body ──────────────────── */
    .profileEditBody{
      width: min(860px, 92vw);
      margin: 0 auto;
      padding: 16px 0 60px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .profileEditSection{
      background: #fff;
      border: 1px solid rgba(38,110,120,.10);
      border-radius: 20px;
      padding: 18px 20px;
      box-shadow: 0 2px 14px rgba(0,0,0,.04);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .profileEditSection .formCol{ gap: 12px; }
    .profileEditSection .sqInput{ height: 60px; }
    .profileEditSection .sqInput input{ font-size: 16px; }

    /* ── Avatar block in edit screens ────────────── */
    .profileEditAvatar{
      display: flex;
      align-items: center;
      gap: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(38,110,120,.10);
    }

    /* ── Logo / brand mark ───────────────────────── */
    .logoMark{
      font-weight: 700;
      letter-spacing: .10em;
      font-size: 14px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(0,0,0,.10);
      background: rgba(255,255,255,.85);
    }
    .logoMarkBtn{
      background: transparent;
      border: 0;
      padding: 0;
      margin: 0;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
    }
    .logoMarkBtn:focus{ outline: none; }
    .logoMarkBtn:hover .logoMark{ background: #fff; }

    /* ── Avatar ──────────────────────────────────── */
    .avatarCircle{
      width: 82px;
      height: 82px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.04));
      border: 1px solid rgba(0,0,0,.10);
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      flex: 0 0 auto;
    }
    .avatarCircle.lg{ width: 108px; height: 108px; }
    .avatarImg{ width:100%; height:100%; object-fit: cover; display:block; }

    .avatarEdit{
      display:flex;
      flex-direction:column;
      gap: 8px;
      align-items:flex-start;
    }
    .avatarEditActions{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:center;
    }
    .avatarEditActions .pillBtn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:40px;
      text-align:center;
    }
    .fileHidden{ display:none; }

    /* ── Typography ──────────────────────────────── */
    .profileName{
      font-size: 22px;
      font-weight: 700;
      letter-spacing: .01em;
    }
    .profileMeta{
      margin-top: 4px;
      font-size: 14px;
      opacity: .75;
    }
    .profileSub{
      margin-top: 6px;
      font-size: 13px;
      opacity: .70;
    }
    .badgeRow{
      margin-top: 10px;
      display:flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .badge{
      font-size: 12px;
      padding: 8px 10px;
      border-radius: 999px;
      background: #000;
      color: #fff;
      font-weight: 700;
      letter-spacing: .02em;
    }
    .badge.ghost{
      background: #00000008;
      color: #000;
      border: 1px solid #00000015;
    }
    .badge.ok{
      background: rgba(34,197,94,.12);
      border: 1px solid rgba(34,197,94,.28);
      color: rgba(18,94,52,.95);
    }
    .profileAbout{
      font-size: 14px;
      line-height: 1.55;
      opacity: .85;
    }
    .blockTitle{
      font-weight: 700;
      letter-spacing: .06em;
      font-size: 11px;
      text-transform: uppercase;
      opacity: .7;
      margin-top: 4px;
    }

    /* ── Grid layouts ────────────────────────────── */
    .grid3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .miniCard{
      border: 1px solid #00000012;
      background: #00000006;
      border-radius: 16px;
      padding: 14px 16px;
      overflow:hidden;
      min-width:0;
    }
    .miniLabel{
      font-size: 11px;
      opacity: .6;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .miniValue{
      margin-top: 6px;
      font-size: 14px;
      font-weight: 700;
    }
    .miniHint{
      margin-top: 8px;
      font-size: 12px;
      opacity: .7;
    }
    .jobsList{ display:flex; flex-direction:column; gap: 10px; }
    .jobRow{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 12px;
      border: 1px solid #00000012;
      border-radius: 16px;
      padding: 14px;
    }
    .jobTitle{ font-weight: 700; font-size: 14px; }
    .jobMeta{ font-size: 12px; opacity: .7; margin-top: 4px; }

    /* ── Action rows + buttons ───────────────────── */
    .actionsRow{ display:flex; flex-wrap: wrap; gap: 10px; }
    .ghostBtn{
      background: #00000008 !important;
      border: 1px solid #00000015 !important;
      color: #000 !important;
    }
    .verifyGrid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .verifyGridSingleColumn{ grid-template-columns: 1fr; }
    .fileInput{ display:none; }

    .pillBtn{
      border-radius: 999px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 700;
      border: 1px solid rgba(0,0,0,.10);
      background: rgba(255,255,255,.78);
      cursor: pointer;
      transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
      white-space: nowrap;
    }
    .pillBtn:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.08); }
    .pillBtn:active{ transform: translateY(0) scale(.99); }
    .pillBtn.soft{
      background: rgba(110,231,255,.18);
      border-color: rgba(110,231,255,.40);
      color: rgba(0,80,95,.95);
    }
    .backBtnInline{
      border: 1px solid rgba(0,0,0,.10);
      background: rgba(255,255,255,.72);
      border-radius: 999px;
      padding: 8px 14px;
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
    }
    .backBtnInline:hover{ background: rgba(255,255,255,.95); }
    .sqBtn.sm{
      width:auto; height:auto;
      border-radius: 999px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .02em;
    }
    .pillCTA{ padding: 10px 14px; border-radius: 999px; font-size: 13px; }

    /* ── Chips + tags ────────────────────────────── */
    .chip{
      font-size: 12px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(0,0,0,.10);
      background: rgba(255,255,255,.70);
      opacity: .9;
      white-space: nowrap;
    }
    .chip.warn{ background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.30); color: rgba(120,75,0,.95); }
    .chip.ok{   background: rgba(34,197,94,.14);  border-color: rgba(34,197,94,.30);  color: rgba(0,90,35,.95); }
    .chip.bad{  background: rgba(239,68,68,.14);  border-color: rgba(239,68,68,.30);  color: rgba(120,0,0,.95); }
    .chip.ghost{ background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.10); color: rgba(0,0,0,.65); }

    .miniLink{
      border:none;
      background: rgba(59,130,246,.12);
      color: rgba(29,78,216,.95);
      font-weight: 700;
      padding: 8px 12px;
      border-radius: 999px;
      cursor: pointer;
      white-space: nowrap;
      max-width: 100%;
    }
    .miniLink:hover{ background: rgba(59,130,246,.18); }

    /* ── Achievement rows ────────────────────────── */
    .achList{ display:flex; flex-direction:column; gap: 10px; }
    .achRow{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 12px;
      border: 1px solid #00000012;
      border-radius: 14px;
      padding: 14px 16px;
      background: rgba(255,255,255,.55);
    }
    .achTitle{ font-weight: 700; font-size: 14px; }
    .achMeta{ font-size: 12px; opacity: .72; margin-top: 4px; max-width: 520px; }
    .miniTop{
      display:flex; align-items:center; justify-content: flex-start;
      gap: 8px; flex-wrap: wrap; min-width:0;
    }
    .miniTop .miniLabel{ min-width: 120px; flex: 1 1 auto; }
    .miniTop .statusTag{ flex: 0 0 auto; }
    .miniTop .miniLink{ flex: 0 0 auto; margin-left: auto; max-width: 100%; }

    /* ── Status tags ─────────────────────────────── */
    .statusTag{
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(0,0,0,.10);
      background: rgba(0,0,0,.06);
      color: rgba(0,0,0,.65);
      white-space: nowrap;
    }
    .statusTag.ok{   background: rgba(34,197,94,.14);  border-color: rgba(34,197,94,.30);  color: rgba(0,90,35,.95); }
    .statusTag.warn{ background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.30); color: rgba(120,75,0,.95); }
    .statusTag.bad{  background: rgba(239,68,68,.14);  border-color: rgba(239,68,68,.30);  color: rgba(120,0,0,.95); }
    .statusTag.ghost{ background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.10); color: rgba(0,0,0,.65); }

    /* ── Corp email verify row ───────────────────── */
    .corpVerifyRow{
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      padding: 6px 0 2px;
    }
    .corpVerifyRow .statusTag{ flex: 0 0 auto; }
    .corpVerifyRow .pillBtn{ flex: 0 0 auto; }

    /* ── Responsive ──────────────────────────────── */
    @media (max-width: 980px){
      .grid3{ grid-template-columns: 1fr 1fr; }
      .verifyGrid{ grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 640px){
      .grid3{ grid-template-columns: 1fr; }
      .verifyGrid{ grid-template-columns: 1fr; }
      .profileHero{ height: 116px; }
      .avatarCircle.xl{ width: 84px; height: 84px; }
      .profileHeroAvatar{ margin-top: -42px; }
      .profilePageBody,
      .profileEditBody{ width: 100%; padding-left: 0; padding-right: 0; }
      .profileSection,
      .profileEditSection{ border-radius: 16px; }
      .profileHeaderInner{ padding: 0 14px; }
      .profileEditStickyBar{ flex-wrap: wrap; row-gap: 6px; padding: 8px 14px; }
      .profileEditStickyActions{ order: 0; width: 100%; justify-content: flex-end; }
      .profileEditTabBtns{ order: 1; flex: 1 0 100%; }
      .profileTab{ font-size: 11px; padding: 5px 10px; }
    }
    @media (max-width: 540px){
      .profileEditAvatar{ flex-direction: column; align-items: flex-start; }
    }


    /* ── Work experience entries (profile edit) ─────── */
    #screenMyEmployeeProfile .workExpEntry {
      background: rgba(255,255,255,.55);
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 16px;
      padding: 16px 48px 8px 16px;
      margin-bottom: 10px;
      position: relative;
    }
    #screenMyEmployeeProfile .workExpEntry .sqInput {
      margin-bottom: 8px;
    }
    #screenMyEmployeeProfile .removeExpBtn {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 26px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,.06);
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 50%;
      color: rgba(0,0,0,.40);
      font-size: 14px;
      cursor: pointer;
      line-height: 1;
      padding: 0;
      transition: background 120ms, color 120ms;
    }
    #screenMyEmployeeProfile .removeExpBtn:hover {
      background: rgba(239,68,68,.12);
      border-color: rgba(239,68,68,.25);
      color: rgba(185,28,28,.9);
    }
    #screenMyEmployeeProfile .addExpBtn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 11px 16px;
      margin-top: 4px;
      border: 1.5px dashed rgba(38,112,122,.35);
      border-radius: 999px;
      background: rgba(110,231,255,.06);
      color: rgba(0,80,95,.80);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .02em;
      cursor: pointer;
      box-sizing: border-box;
      transition: background 120ms ease, border-color 120ms ease;
    }
    #screenMyEmployeeProfile .addExpBtn:hover {
      background: rgba(110,231,255,.14);
      border-color: rgba(38,112,122,.55);
    }

    #screenMyEmployeeProfile .candidateVerifyIntro {
      padding: 16px 18px;
      margin-bottom: 18px;
      border: 1px solid rgba(38,112,122,.16);
      border-radius: 20px;
      background:
        linear-gradient(135deg, rgba(38,112,122,.11), rgba(255,255,255,.58)),
        rgba(235,248,250,.50);
    }
    #screenMyEmployeeProfile .candidateVerifyIntroTitle {
      color: #134e5a;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: .01em;
    }
    #screenMyEmployeeProfile .candidateVerifyIntroText {
      max-width: 860px;
      margin-top: 6px;
      color: #50606a;
      font-size: 13px;
      line-height: 1.55;
    }
    #screenMyEmployeeProfile .candidateVerifyLevelRow {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 12px;
    }
    #screenMyEmployeeProfile .verifyLevelPill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 26px;
      padding: 0 11px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    #screenMyEmployeeProfile .verifyLevelPill.l1 {
      color: #8a5800;
      background: rgba(245,158,11,.12);
      border-color: rgba(245,158,11,.24);
    }
    #screenMyEmployeeProfile .verifyLevelPill.l2 {
      color: #1a5c68;
      background: rgba(38,112,122,.12);
      border-color: rgba(38,112,122,.22);
    }
    #screenMyEmployeeProfile .verifyLevelPill.l3 {
      color: #166534;
      background: rgba(34,197,94,.12);
      border-color: rgba(34,197,94,.22);
    }
    #screenMyEmployeeProfile .candidateVerifyGroup + .candidateVerifyGroup {
      margin-top: 18px;
    }
    #screenMyEmployeeProfile .candidateVerifyGroupHead {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 12px;
    }
    #screenMyEmployeeProfile .candidateVerifyGroupTitle {
      color: #111827;
      font-size: 15px;
      font-weight: 800;
    }
    #screenMyEmployeeProfile .candidateVerifyGroupSub {
      max-width: 760px;
      margin-top: 4px;
      color: #667085;
      font-size: 12px;
      line-height: 1.5;
    }
    #screenMyEmployeeProfile .candidateVerifyGrid {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    #screenMyEmployeeProfile .candidateVerifyGrid.compactGrid {
      grid-template-columns: minmax(250px, .8fr) minmax(320px, 1.2fr);
    }
    #screenMyEmployeeProfile .candidateVerifyGrid .miniCard {
      min-height: 168px;
    }
    #screenMyEmployeeProfile .candidateVerifyGrid .miniCard.primary {
      border-color: rgba(38,112,122,.22);
      box-shadow: inset 0 0 0 1px rgba(38,112,122,.06);
    }
    #screenMyEmployeeProfile .candidateVerifyGrid .miniCard.sensitive {
      border-color: rgba(34,197,94,.18);
    }
    #screenMyEmployeeProfile .candidateSignalCard {
      min-height: 168px;
      padding: 16px;
      border: 1px solid rgba(38,112,122,.14);
      border-radius: 16px;
      background: rgba(255,255,255,.52);
      box-sizing: border-box;
    }
    #screenMyEmployeeProfile .candidateSignalTitle {
      margin-bottom: 12px;
      color: #134e5a;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    #screenMyEmployeeProfile .candidateSignalCard .sqInput {
      min-height: 52px;
      margin-bottom: 8px;
    }
    #screenMyEmployeeProfile .candidateSignalCard .sqInput:last-child {
      margin-bottom: 0;
    }

    @media (max-width: 760px) {
      #screenMyEmployeeProfile .candidateVerifyGrid.compactGrid {
        grid-template-columns: 1fr;
      }
      #screenMyEmployeeProfile .candidateVerifyGroupHead {
        flex-direction: column;
      }
    }

    /* CONSENT */
    .consentBox{
      width: min(520px, 92vw);
      margin: 18px auto 0;
      padding: 14px 16px;
      border: 1px solid #00000014;
      border-radius: 18px;
      background: #ffffffcc;
      backdrop-filter: blur(6px);
      box-shadow: 0 10px 30px #0000000a;
    }
    .consentTitle{
      font-weight: 700;
      letter-spacing: .02em;
      font-size: 12px;
      text-transform: uppercase;
      color: #111111b3;
      margin-bottom: 10px;
    }
    .consentItem{
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 8px 10px;
      border-radius: 14px;
    }
    .consentItem:hover{ background:#00000005; }
    .consentItem input[type="checkbox"]{
      width: 18px; height: 18px; margin-top: 2px;
      accent-color: #5cc7ff;
      flex: 0 0 auto;
    }
    .consentText{
      font-size: 13px;
      line-height: 1.25;
      color: #111111cc;
    }
    .consentLinks{
      color:#111111b3;
      text-decoration: underline;
      cursor: pointer;
    }
    .consentError{
      margin-top: 8px;
      font-size: 12px;
      color: #b00020;
      display: none;
    }
    .consentBox.error{
      border-color: #b0002033;
      box-shadow: 0 10px 30px #b0002014;
    }
    /* Fix reg form overflow — content taller than viewport */
    #screenRegForm.screen{
      align-items: flex-start;
      justify-content: flex-start;
    }
    #screenRegForm .wrap{
      align-items: center;
      justify-content: flex-start;
      overflow-y: auto;
      padding: 118px 18px 120px;
      box-sizing: border-box;
    }
    #screenRegForm > .backBtn{
      position: fixed;
      left: 28px;
      top: 24px;
      z-index: 140;
      min-height: 0;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(38,110,120,.18);
      background: rgba(235,248,250,.85);
      color: #1a5c68;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      font-size: 13.3333px;
      font-weight: 600;
      letter-spacing: .02em;
    }
    #screenRegForm > .backBtn:hover{
      border-color: rgba(38,110,120,.36);
      background: rgba(235,248,250,.96);
      transform: translateY(-1px);
    }
    #screenRegForm .wrap > .regProgress{
      position: fixed;
      top: 52px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 120;
      margin: 0;
    }
    #screenRegForm .centerBlock{
      width: 100%;
      justify-content: flex-start;
    }
    #screenRegForm .wrap > .nextBtn{
      width: auto;
      min-width: 92px;
      min-height: 42px;
      padding: 12px 24px;
      margin: 4px auto 40px;
      flex: 0 0 auto;
    }
    #screenRegForm .footerArea{
      position: fixed;
      bottom: 32px;
      left: 0;
      right: 0;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(8px);
      padding: 12px 18px 20px;
      box-shadow: 0 -2px 16px rgba(0,0,0,0.06);
      z-index: 10;
    }

    /* BURGER + DRAWER */
    .burgerBtn{
      position:absolute;
      left: 28px;
      top: 24px;
      width: 46px;
      height: 42px;
      border-radius: 16px;
      background: var(--backFill);
      border: 1px solid var(--backBorder);
      cursor:pointer;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap: 6px;
      transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
      z-index: 4;
    }
    .burgerBtn span{
      width: 20px;
      height: 2px;
      background: #111111b8;
      border-radius: 999px;
      display:block;
    }
    .burgerBtn:hover{
      background:#0000000c;
      border-color:#00000020;
      transform: translateY(-1px);
    }
    .burgerBtn:active{ transform: translateY(0) scale(.995); }
    .feedBurger{ position:relative !important; left:auto !important; top:auto !important; flex-shrink:0; }
    /* Feed/search/admin screens — proper sticky topbar layout */
    #screenCandidateFeed,
    #screenEmployerSearch,
    #screenAdminQueue {
      flex-direction: column !important;
      align-items: stretch !important;
      justify-content: flex-start !important;
      overflow-y: auto !important;
    }
    #screenCandidateFeed .wrap,
    #screenEmployerSearch .wrap,
    #screenAdminQueue .wrap,
    #screenChat .wrap {
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      padding: 0;
      height: auto;
      min-height: 100%;
      overflow: visible;
    }
    .stickyTop{
      position: sticky !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      transform: none !important;
      width: 100% !important;
      max-width: 100% !important;
      z-index: 50;
      background: #fff !important;
      border-bottom: 1px solid #f0f0f0;
      box-shadow: 0 1px 8px rgba(0,0,0,.05);
      box-sizing: border-box;
      flex-shrink: 0;
    }
    #screenCandidateFeed .centerBlock,
    #screenEmployerSearch .centerBlock{
      padding: 20px 16px 60px;
      width: 100%;
      max-width: 720px;
      margin: 0 auto;
      box-sizing: border-box;
    }
    #screenChat .centerBlock{
      padding: 20px 16px 60px;
      width: 100%;
      max-width: 1040px;
      margin: 0 auto;
      box-sizing: border-box;
    }
    #screenAdminQueue .centerBlock{
      padding: 16px 16px 60px;
      width: 100%;
      max-width: 860px;
      margin: 0 auto;
      box-sizing: border-box;
    }

    .drawerOverlay{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.28);
      opacity:0;
      pointer-events:none;
      transition: opacity 220ms ease;
      z-index: 40;
    }
    .drawer{
      position:fixed;
      top:0; left:0; bottom:0;
      width: 300px;
      max-width: 86vw;
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(10px);
      border-right: 1px solid rgba(0,0,0,.10);
      box-shadow: 0 18px 60px rgba(0,0,0,.12);
      transform: translateX(-102%);
      transition: transform 260ms cubic-bezier(.2,.9,.2,1);
      z-index: 41;
      display:flex;
      flex-direction:column;
    }
    .drawerHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 18px 18px 12px;
      border-bottom: 1px solid rgba(0,0,0,.08);
    }
    .drawerBrand{
      font-weight: 700;
      letter-spacing: .10em;
      font-size: 13px;
      opacity: .9;
    }
    .drawerClose{
      width: 34px;
      height: 34px;
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,.10);
      background: rgba(0,0,0,.04);
      cursor:pointer;
      font-size: 20px;
      line-height: 1;
      display:flex;
      align-items:center;
      justify-content:center;
      transition: transform 120ms ease, background 120ms ease;
    }
    .drawerClose:hover{ background: rgba(0,0,0,.06); transform: translateY(-1px); }
    .drawerClose:active{ transform: translateY(0) scale(.99); }

    .drawerNav{
      padding: 14px 12px;
      display:flex;
      flex-direction:column;
      gap: 10px;
    }
    .drawerItem{
      text-align:left;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid rgba(0,0,0,.10);
      background: rgba(255,255,255,.70);
      cursor:pointer;
      font-weight: 700;
      color: rgba(0,0,0,.82);
      transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
    }
    .drawerItem:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.06); background: rgba(255,255,255,.86); }
    .drawerItem:active{ transform: translateY(0) scale(.99); }

    .drawerFoot{
      margin-top:auto;
      padding: 12px 18px 18px;
      border-top: 1px solid rgba(0,0,0,.08);
    }
    .drawerHint{
      font-size: 12px;
      opacity: .7;
      font-weight: 700;
      line-height: 1.25;
    }

    .drawer.open{ transform: translateX(0); }
    .drawerOverlay.open{ opacity:1; pointer-events:auto; }

    /* MODAL */
    .modalOverlay{
      position:fixed;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 18px;
      background: rgba(0,0,0,.25);
      opacity:0;
      pointer-events:none;
      transition: opacity 220ms ease;
      z-index: 50;
    }
    .modalOverlay.open{ opacity:1; pointer-events:auto; }
    #adminCompanyModal.modalOverlay:not(.hidden){
      opacity: 1;
      pointer-events: auto;
      z-index: 1200;
      background: rgba(0,0,0,.5);
    }
    .modalCard{
      width: min(760px, 94vw);
      max-height: min(82vh, 760px);
      overflow:auto;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(0,0,0,.10);
      border-radius: 22px;
      box-shadow: 0 18px 70px rgba(0,0,0,.18);
      backdrop-filter: blur(10px);
      padding: 16px 16px 14px;
    }
    .modalTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(0,0,0,.08);
      margin-bottom: 12px;
    }
    .modalTitle{
      font-weight: 700;
      font-size: 14px;
      letter-spacing: .02em;
    }
    .modalClose{
      width: 34px;
      height: 34px;
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,.10);
      background: rgba(0,0,0,.04);
      cursor:pointer;
      font-size: 20px;
      line-height: 1;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .modalBody{
      font-size: 13px;
      line-height: 1.45;
      color: rgba(0,0,0,.78);
    }
    .modalParagraph{
      margin: 0 0 10px;
    }
    .modalParagraph:last-child{
      margin-bottom: 0;
    }
    .modalList{
      padding-left: 18px;
      margin: 0;
    }
    .modalListItem{
      margin-bottom: 8px;
    }
    .modalListItem:last-child{
      margin-bottom: 0;
    }
    .modalContactLabel,
    .modalContactValue{
      font-weight: 700;
    }
    .modalMeta{
      margin: 0;
      color: #888;
      font-size: 13px;
    }
    .modalBody h4{
      margin: 14px 0 8px;
      font-size: 13px;
    }
    .faqItem{
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 16px;
      padding: 12px 12px;
      background: rgba(255,255,255,.75);
      margin-bottom: 10px;
    }
    .faqItem:last-child{
      margin-bottom: 0;
    }
    .faqQ{ font-weight: 700; margin-bottom: 6px; }
    .faqA{ opacity: .88; }

    /* PASSWORD STRENGTH */
    .strengthBar{
      height: 3px;
      border-radius: 2px;
      background: #00000010;
      margin-top: 6px;
      width: var(--inW);
    }
    .strengthFill{
      height: 100%;
      border-radius: 2px;
      transition: width .2s ease, background .2s ease;
      width: 0;
    }
    .strengthLabel{
      font-size: 11px;
      margin-top: 4px;
      padding-left: 4px;
      width: var(--inW);
      letter-spacing: .02em;
    }

    /* TOAST */
    .toast{
      position: fixed;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      color: #fff;
      padding: 10px 20px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .02em;
      opacity: 0;
      pointer-events: none;
      transition: opacity .22s ease, transform .22s ease;
      z-index: 100;
      white-space: nowrap;
      box-shadow: 0 10px 28px rgba(0,0,0,.14);
    }
    .toast.info{
      background: rgba(14,15,15,.94);
      border-color: rgba(38,110,120,.24);
    }
    .toast.success{
      background: rgba(21,128,61,.95);
      border-color: rgba(187,247,208,.42);
    }
    .toast.error{
      background: rgba(185,28,28,.95);
      border-color: rgba(254,202,202,.42);
    }
    .toast.show{
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* REGISTRATION PROGRESS */
    .regProgress{
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 24px;
    }
    .regStep{
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1.5px solid rgba(0,0,0,.15);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      color: rgba(0,0,0,.35);
      transition: all .2s ease;
    }
    .regStep.active{
      background: #000;
      color: #fff;
      border-color: #000;
    }
    .regStep.done{
      background: rgba(34,197,94,.15);
      border-color: rgba(34,197,94,.4);
      color: rgba(0,100,40,.9);
    }
    .regLine{
      flex: 1;
      height: 1.5px;
      background: rgba(0,0,0,.10);
      min-width: 32px;
    }

    /* DROP ZONE */
    .dropZone{
      border: 1.5px dashed rgba(0,0,0,.18);
      border-radius: 14px;
      padding: 14px;
      text-align: center;
      cursor: pointer;
      transition: background .15s ease;
      margin-top: 10px;
      font-size: 13px;
      color: rgba(0,0,0,.45);
    }
    .dropZone:hover{
      background: rgba(0,0,0,.03);
    }
    .dropZone--over{
      background: rgba(38,110,120,.08) !important;
      border-color: rgba(38,110,120,.35) !important;
    }