*,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    :root {
      --bg: #0d1117;
      --surface: #161b22;
      --surface2: #21262d;
      --border: #30363d;
      --accent: #4f8eff;
      --accent2: #3ecf8e;
      --text: #e6edf3;
      --text2: #8b949e;
      --danger: #ff5f57;
      --warn: #ffc53d;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: "Segoe UI", Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--text)
    }

    canvas#c {
      position: fixed;
      inset: 0;
      display: block;
      width: 100% !important;
      height: 100% !important
    }

    /* LOADING */
    #loading {
      position: fixed;
      inset: 0;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      transition: opacity .6s
    }

    #loading.fade {
      opacity: 0;
      pointer-events: none
    }

    .logo-3d {
      font-size: 2.8rem;
      font-weight: 700;
      background: linear-gradient(135deg, #4f8eff, #3ecf8e);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: -1px;
      margin-bottom: .4rem
    }

    .logo-sub {
      color: var(--text2);
      font-size: .95rem;
      margin-bottom: 2rem;
      letter-spacing: .08em
    }

    .load-bar {
      width: 260px;
      height: 4px;
      background: var(--surface2);
      border-radius: 4px;
      overflow: hidden
    }

    .load-fill {
      height: 100%;
      background: linear-gradient(90deg, #4f8eff, #3ecf8e);
      border-radius: 4px;
      animation: loadAnim 2s ease-in-out forwards
    }

    @keyframes loadAnim {
      from {
        width: 0
      }

      to {
        width: 100%
      }
    }

    .load-text {
      color: var(--text2);
      font-size: .8rem;
      margin-top: 1rem;
      animation: pulse2 1.4s ease-in-out infinite
    }

    @keyframes pulse2 {

      0%,
      100% {
        opacity: .5
      }

      50% {
        opacity: 1
      }
    }

    /* AUTH — PIXEL-PERFECT */
    #auth {
      position: fixed;
      inset: 0;
      display: none;
      z-index: 999;
      overflow-y: hidden;
      overflow-x: hidden;
      background: url('../assets/auth-login-reference.jpg') left center / cover no-repeat;
    }

    #auth[data-screen="login"],
    #auth[data-screen="register-account"],
    #auth[data-screen="register-profile"] {
      background-image: url('../assets/auth-login-reference.jpg');
      background-position: left center;
      background-size: cover;
    }

    /* Overlay: keep left 55% clear to show the office, darken right side for the card */
    #auth::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        linear-gradient(100deg,
          rgba(1, 4, 16, 0.02) 0%,
          rgba(1, 4, 16, 0.08) 40%,
          rgba(1, 4, 16, 0.18) 60%,
          rgba(1, 4, 16, 0.35) 75%,
          rgba(1, 4, 16, 0.50) 100%);
      pointer-events: none;
    }

    #auth.show {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      /* /* padding: 1.5rem 4.5vw 1.5rem 1rem; */
            padding: 1.5rem 10vw 1.5rem 1rem;
 
    }

    #auth[data-screen="register-account"].show,
    #auth[data-screen="register-profile"].show {
      align-items: center;
      padding-top: 1.5rem;
    }

    /* Floating card on right */
    .auth-panel {
      position: relative;
      z-index: 1;
      width: 480px;
      max-width: calc(100vw - 2.5rem);
      margin: 0;
      background: rgba(18, 22, 50, 0.45);
      border: 1px solid rgba(130, 120, 230, 0.3);
      border-radius: 24px;
      padding: 2rem 2.2rem 1.8rem;
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
      overflow-y: auto;
      max-height: calc(100vh - 2.5rem);
      scrollbar-width: none;
    }

.auth-panel::-webkit-scrollbar {
  width: 0;
  display: none;
}

    /* Centered icon at top */
    .auth-icon-top {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      background: linear-gradient(135deg, #5b3fcf 0%, #7c5cff 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.4rem;
      box-shadow: 0 6px 24px rgba(100, 70, 255, 0.4);
    }

    #auth[data-screen="login"] .auth-panel { min-height: unset; }
    #auth[data-screen="register-account"] .auth-panel,
    #auth[data-screen="register-profile"] .auth-panel { min-height: unset; }

    /* ── Top row: logo + link ── */
    .auth-toprow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
    }

    .auth-toplink {
      font-size: 0.82rem;
      /* color: #8b93b1; */
          color:#d7def8;

    }

    .auth-toplink a {
      /* color: #a87cff;

    color:#d7def8; */

     color:#c69cff;
 
      cursor: pointer;
      text-decoration: none;
      font-weight: 600;
    }

    .auth-toplink a:hover { text-decoration: underline; }

    /* ── Headings ── */
    .auth-h {
      font-size: 1.85rem;
      font-weight: 800;
      color: #ffffff;
      margin: 0 0 0.35rem;
      letter-spacing: 0;
      line-height: 1.15;
      display: flex;
      align-items: center;
      gap: 0.4rem;

      text-shadow:0 2px 10px rgba(255,255,255,.15);

    }

    .auth-hsub {
      margin: 0 0 1.4rem;
      display: flex;
      align-items: center;
      gap: 0.45rem;

       color:#e1e2e6;
    font-size:1rem;
    font-weight:500;
    }

    /* ── Secure login divider ── */
    .secure-label {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      font-size: 0.72rem;
      font-weight: 700;
      color: #916cff;
      letter-spacing: 0.12em;
      margin-bottom: 1.15rem;
      padding: 0.6rem 0;
      border-top: 1px solid rgba(112,100,220,0.22);
      border-bottom: 1px solid rgba(112,100,220,0.22);
    }

    .secure-label::before,
    .secure-label::after {
      content: '';
      height: 1px;
      flex: 1;
      background: rgba(112,100,220,0.24);
    }

    /* ── Stepper ── */
    .auth-stepper {
      display: flex;
      align-items: center;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(100,120,200,0.18);
      border-radius: 12px;
      padding: 0.7rem 1rem;
      margin-bottom: 1.2rem;
      color: #ffffff;
    }

    .step-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.88rem;
      color: #edeef4;
      font-weight: 500;
      flex: 1;
      white-space: nowrap;
    }

    .step-item.active { color: #9b78ff; }

    .step-num {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1.5px solid #3d4668;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      font-weight: 700;
      color: #dfdfe0;
      flex-shrink: 0;
      transition: all 0.25s;
    }

    .step-item.active .step-num {
      background: linear-gradient(135deg, #5b8fff, #9b5cff);
      border-color: transparent;
      color: #fff;
    }

    .step-item.done .step-num {
      background: transparent;
      border-color: #7c5cff;
      color: #9b78ff;
    }

    .step-line {
      flex: 1;
      height: 1px;
      background: rgba(100,90,200,0.25);
      margin: 0 0.7rem;
    }

    /* ── Field components ── */
    .auth-form {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .auth-field {
      display: flex;
      flex-direction: column;
      gap: 7px;
      margin-bottom: 1.1rem;
    }

    #rg-fields-jobseeker,
    #rg-fields-employee,
    #rg-profile-jobseeker,
    #rg-profile-employee,
    #rg-emp-company-custom-wrap {
      margin-bottom: 1.1rem;
    }

    .auth-label {
      font-size: 0.72rem;
      font-weight: 700;
      color: #f4f5f8;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      line-height: 1.2;
    }

    .auth-input {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0.65rem;
      background: rgba(255,255,255,0.045);
      border: 1px solid rgba(126,138,203,0.18);
      border-radius: 12px;
      padding: 0 1.05rem;
      transition: border-color 0.2s, box-shadow 0.2s;
      min-height: 52px;
    }

    .auth-input:focus-within {
      border-color: rgba(150,100,255,0.55);
      box-shadow: 0 0 0 3px rgba(120,80,255,0.12);
    }

    .auth-input .ai-ico {
      color: #606880;
      font-size: 0.95rem;
      opacity: 1;
      flex-shrink: 0;
      line-height: 1;
    }

    .auth-input input,
    .auth-input select {
      flex: 1;
      min-width: 0;
      background: transparent;
      border: none;
      outline: none;
      color: #ffffff;
      padding: 0.78rem 0;
      font-family: inherit;
      font-size: 0.94rem;
    }

    .auth-input input:-webkit-autofill,
    .auth-input input:-webkit-autofill:hover,
    .auth-input input:-webkit-autofill:focus,
    .auth-input input:-webkit-autofill:active {
      -webkit-text-fill-color: #ffffff !important;
      -webkit-box-shadow: 0 0 0px 1000px rgba(25, 30, 65, 0.95) inset !important;
      border-radius: 10px;
      transition: background-color 5000s ease-in-out 0s;
    }

    .auth-input input::placeholder {
      /* color: #99a0b6; */
          color:#d6dcf8;

    }

    .auth-input.sel select {
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
      color: #a0a7bd;
    }

    .auth-input.sel select:focus,
    .auth-input.sel select option { color: #e0e4f4; }

    .auth-input.sel select option {
      background: #141525;
    }

    .auth-input.sel::after {
      content: '▾';
      position: absolute;
      right: 0.9rem;
      color: #505878;
      pointer-events: none;
      font-size: 0.78rem;
    }

    .ai-eye {
      background: none;
      border: none;
      color: #606888;
      cursor: pointer;
      font-size: 0.95rem;
      padding: 0;
      line-height: 1;
      flex-shrink: 0;
      display: flex;
      align-items: center;
    }

    .ai-eye svg { width: 17px; height: 17px; }

    .ai-check {
      color: #2fb750;
      opacity: 0;
      font-weight: 800;
      font-size: 0.9rem;
      transition: opacity 0.2s;
      flex-shrink: 0;
    }

    .ai-check.ok { opacity: 1; }

    /* password hint text */
    .auth-hint {
      font-size: 0.78rem;
      color: #9aa2bd;
      margin-top: 0.15rem;
    }

    /* ── Two-column row ── */
    .auth-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    /* Profile setup label */
    .auth-section-label {
      font-size: 0.78rem;
      font-weight: 700;
      color: rgb(232, 234, 242);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 0.15rem;
    }

    .auth-section-sub {
      font-size: 0.85rem;
      color: #dfe1e9;
      margin-bottom: 0.85rem;
    }

    /* ── Emoji picker ── */
    .emoji-picker {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      padding: 0.05rem 0;
    }

    .ep-btn {
      position: relative;
      width: 3.05rem;
      height: 3.05rem;
      background: rgba(255,255,255,0.05);
      border: 1.5px solid rgba(130,145,210,0.18);
      border-radius: 9px;
      cursor: pointer;
      font-size: 1.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.18s;
      flex-shrink: 0;
      padding: 0;
    }

    .ep-btn:hover { border-color: rgba(100,130,255,0.4); }

    .ep-btn.sel {
      border-color: #7c5cff;
      background: rgba(90,100,255,0.14);
    }

    .ep-btn.sel::after {
      content: '✓';
      position: absolute;
      right: -5px;
      bottom: -5px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: linear-gradient(135deg, #5b8fff, #9b5cff);
      color: #fff;
      font-size: 0.58rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 0 2px rgba(10,11,26,0.93);
    }

    /* ── Color picker ── */
    .color-picker {
      display: flex;
      flex-wrap: wrap;
      gap: 0.7rem;
      padding: 0.1rem 0;
    }

    .cp-swatch {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      cursor: pointer;
      border: none;
      transition: box-shadow 0.18s;
      flex-shrink: 0;
    }

    .cp-swatch.sel {
      box-shadow: 0 0 0 2px rgba(10,11,26,0.93), 0 0 0 4px #5b8fff;
    }

    /* ── Primary button ── */
    .auth-btn {
      background: linear-gradient(90deg, #7c5cff 0%, #a87cff 100%);
      border: none;
      border-radius: 12px;
      color: #fff;
      padding: 1.05rem 1.2rem;
      font-family: inherit;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.14s, box-shadow 0.2s, filter 0.2s;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      box-shadow: 0 6px 30px rgba(120,80,255,0.45);
    }

    .auth-btn:hover {
      transform: translateY(-1px);
      filter: brightness(1.06);
      box-shadow: 0 10px 36px rgba(70,90,220,0.5);
    }

    .auth-btn .btn-arrow { font-size: 1rem; }

    /* Back + create row */
    .auth-btn-row {
      display: flex;
      gap: 0.75rem;
      margin-top: 0.6rem;
    }

    .auth-btn-back {
      background: rgba(255,255,255,0.055);
      border: 1px solid rgba(120,130,200,0.2);
      border-radius: 9px;
      color: #c0c8e4;
      padding: 1.05rem 1.4rem;
      font-family: inherit;
      font-size: 0.96rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s;
      display: flex;
      align-items: center;
      gap: 0.45rem;
      white-space: nowrap;
    }

    .auth-btn-back:hover { background: rgba(255,255,255,0.09); }

    .auth-btn.flex1 { flex: 1; }

    /* ── OR divider ── */
    .auth-divider {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin: 1rem 0 0.85rem;
      color: #414868;
      font-size: 0.74rem;
      letter-spacing: 0.06em;
      font-weight: 500;
    }

    .auth-divider::before,
    .auth-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(120,130,200,0.14);
    }

    /* ── Social buttons — stacked full width ── */
    .auth-social {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
    }

    .social-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.65rem;
      padding: 0.82rem 1rem;
      background: rgba(255,255,255,0.055);
      border: 1px solid rgba(150,150,220,0.2);
      border-radius: 12px;
      /* color: #d0d4f0; */
      
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;

      font-family: inherit;
      /* font-size: 0.95rem; */
      /* font-weight: 600; */
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
      width: 100%;
    }

    .social-btn:hover {
      background: rgba(255,255,255,0.09);
      border-color: rgba(150,150,220,0.35);
    }

    /* ── Security badges ── */
    .auth-badges {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-top: 0.9rem;
      padding: 0.75rem 0.7rem;
      border: 1px solid rgba(120,130,200,0.12);
      border-radius: 9px;
      background: rgba(255,255,255,0.035);
    }

    .badge-item {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.73rem;
      color: #a0a8bd;
      line-height: 1.35;
    }

    .badge-ico {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      border: 1px solid rgba(100,120,200,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      flex-shrink: 0;
      background: rgba(255,255,255,0.03);
    }

    .auth-copy {
      text-align: center;
      font-size: 0.72rem;
      color: #5f6680;
      margin-top: 1.1rem;
    }

    .auth-err {
      color: #ff5566;
      font-size: 0.8rem;
      min-height: 0.9rem;
      line-height: 1.4;
      margin-top: -0.3rem;
    }

    /* pw strength */
    .pw-meterwrap {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      margin-top: 0.4rem;
    }

    .pw-meter {
      flex: 1;
      display: flex;
      gap: 0.35rem;
    }

    .pw-meter span {
      flex: 1;
      height: 4px;
      border-radius: 2px;
      background: rgba(255,255,255,0.06);
      transition: background 0.28s;
    }

    .pw-strength {
      font-size: 0.72rem;
      font-weight: 600;
      min-width: 42px;
      text-align: right;
    }

    @media (max-width: 600px) {
      #auth.show,
      #auth[data-screen="register-account"].show,
      #auth[data-screen="register-profile"].show {
        justify-content: center;
        padding: 1rem;
      }

      .auth-panel {
        width: calc(100% - 2rem);
        padding: 1.8rem 1.4rem;
        min-height: auto !important;
      }
      .auth-row { grid-template-columns: 1fr; }
    }

    /* HUD */
    #hud {
      position: fixed;
      inset: 0;
      pointer-events: none;
      display: none;
      z-index: 100
    }

    #hud.show {
      display: block
    }

    /* Top bar */
    #topbar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 52px;
      background: rgba(13, 17, 23, .88);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 1rem;
      gap: 1rem;
      pointer-events: all
    }

    #tb-logo {
      font-size: 1.1rem;
      font-weight: 700;
      background: linear-gradient(135deg, #4f8eff, #3ecf8e);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      flex-shrink: 0
    }

    #loc-badge {
      background: rgba(79, 142, 255, .15);
      border: 1px solid rgba(79, 142, 255, .3);
      border-radius: 20px;
      padding: .3rem .8rem;
      font-size: .8rem;
      color: var(--accent);
      display: flex;
      align-items: center;
      gap: .4rem;
      flex-shrink: 0
    }

    .tb-sep {
      flex: 1
    }

    #online-pill {
      background: rgba(62, 207, 142, .12);
      border: 1px solid rgba(62, 207, 142, .3);
      border-radius: 20px;
      padding: .3rem .7rem;
      font-size: .78rem;
      color: var(--accent2);
      display: flex;
      align-items: center;
      gap: .4rem;
      flex-shrink: 0
    }

    .online-dot {
      width: 6px;
      height: 6px;
      background: var(--accent2);
      border-radius: 50%;
      animation: pulse2 1.5s infinite
    }

    #status-btn {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: .35rem .7rem;
      font-size: .8rem;
      color: var(--text);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: .5rem;
      transition: border-color .2s;
      flex-shrink: 0
    }

    #status-btn:hover {
      border-color: var(--accent)
    }

    #logout-btn {
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: .35rem .7rem;
      font-size: .8rem;
      color: var(--text2);
      cursor: pointer;
      transition: all .2s;
      flex-shrink: 0
    }

    #logout-btn:hover {
      border-color: var(--danger);
      color: var(--danger)
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%
    }

    /* ── Profile button + dropdown ── */
    #profile-btn {
      display: flex;
      align-items: center;
      gap: .4rem;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: .25rem .6rem .25rem .25rem;
      cursor: pointer;
      transition: border-color .2s;
      flex-shrink: 0;
      position: relative
    }

    #profile-btn:hover, #profile-btn.active {
      border-color: var(--accent)
    }

    #profile-btn-avatar {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .95rem;
      flex-shrink: 0
    }

    #profile-btn-name {
      font-size: .8rem;
      color: var(--text);
      max-width: 110px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    #profile-btn-chevron {
      width: 12px;
      height: 12px;
      color: var(--text2);
      transition: transform .2s;
      flex-shrink: 0
    }

    #profile-btn.active #profile-btn-chevron {
      transform: rotate(180deg)
    }

    #profile-dropdown {
      position: absolute;
      top: 42px;
      right: 0;
      width: 210px;
      background: rgba(22, 27, 34, .96);
      border: 1px solid var(--border);
      border-radius: 12px;
      backdrop-filter: blur(14px);
      box-shadow: 0 10px 30px rgba(0,0,0,.4);
      padding: .4rem;
      display: none;
      flex-direction: column;
      gap: .15rem;
      z-index: 210
    }

    #profile-dropdown.show { display: flex }

    .pd-item {
      display: flex;
      align-items: center;
      gap: .6rem;
      padding: .55rem .6rem;
      border-radius: 8px;
      cursor: pointer;
      font-size: .84rem;
      color: var(--text);
      background: transparent;
      border: none;
      text-align: left;
      transition: background .15s
    }

    .pd-item:hover { background: var(--surface2) }
    .pd-item svg { width: 16px; height: 16px; stroke: currentColor; flex-shrink: 0; color: var(--text2) }
    .pd-item.pd-danger { color: #ff8a85 }
    .pd-item.pd-danger svg { color: #ff8a85 }
    .pd-divider { height: 1px; background: var(--border); margin: .3rem .2rem }

    /* ── Profile modals (shared glass overlay) ── */
    .profile-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(4px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 520;
      padding: 1.2rem;
      pointer-events: all
    }

    .profile-overlay.show { display: flex }

    .profile-panel {
      width: 100%;
      max-width: 560px;
      max-height: 88vh;
      overflow-y: auto;
      position: relative;
      background:
        linear-gradient(160deg, rgba(139,92,246,.10), rgba(59,130,246,.03) 40%),
        #0b0e22;
      border: 1px solid rgba(150,140,230,.28);
      border-radius: 22px;
      backdrop-filter: blur(35px);
      -webkit-backdrop-filter: blur(35px);
      box-shadow:
        0 30px 90px rgba(0,0,0,.6),
        0 0 0 1px rgba(139,92,246,.12),
        0 0 40px rgba(90,70,200,.18),
        inset 0 1px 0 rgba(255,255,255,.14);
      padding: 1.5rem;
      animation: gateCardPop .42s cubic-bezier(.22,1,.36,1);
    }

    .profile-panel::-webkit-scrollbar { width: 8px }
    .profile-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px }

    .pp-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin: -1.5rem -1.5rem 1.2rem;
      padding: 1.15rem 1.5rem 1.05rem;
      background: var(--cp-header-bg, linear-gradient(135deg,#0b0e26,#0f1230));
      border-radius: 22px 22px 0 0;
      border-bottom: 1px solid rgba(139,92,246,.14);
      position: relative;
      overflow: hidden;
    }
    .pp-header::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 85% -10%, rgba(90,80,190,.08), transparent 60%);
      pointer-events: none;
    }
    .pp-header > * { position: relative; z-index: 1 }

    .pp-avatar {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.2rem;
      flex-shrink: 0;
      border: 3px solid var(--cp-accent2, #8b5cf6);
      box-shadow: 0 0 0 3px var(--cp-accent-bg, rgba(139,92,246,.1)), 0 8px 20px rgba(0,0,0,.35)
    }

    .pp-header-info { flex: 1; min-width: 0 }
    .pp-name { font-size: 1.25rem; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
    .pp-subtitle { font-size: .88rem; color: var(--cp-accent-text, var(--text2)); margin-top: .2rem; font-weight: 600; letter-spacing: .02em }
    .pp-close {
      background: rgba(20,22,50,.9);
      border: 1px solid var(--cp-accent-soft, var(--border));
      color: var(--text);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      cursor: pointer;
      flex-shrink: 0;
      transition: all .2s;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pp-close:hover { border-color: var(--danger); color: var(--danger) }

    .pp-section-title {
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--text);
      margin: 1.3rem 0 .8rem;
      display: flex;
      align-items: center;
      gap: .55rem;
    }
    .pp-section-title svg { flex-shrink: 0; color: var(--cp-accent2, var(--accent)); width: 19px; height: 19px }
    .pp-title-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--cp-accent-soft, rgba(139,92,246,.35)), transparent) }
    .pp-section-title:first-of-type { margin-top: 0 }

    /* Completion card */
    .pc-card {
      display: flex;
      align-items: center;
      gap: 1.1rem;
      background: var(--pf-card-bg, rgba(255,255,255,.02));
      border: 1px solid var(--pf-card-border, var(--border));
      border-radius: 16px;
      padding: 1.1rem 1.2rem;
      margin-bottom: 1.1rem;
    }
    .pc-wrap { flex: 1; min-width: 0 }
    .pc-toprow { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem }
    .pc-label { font-size: .92rem; color: var(--text); font-weight: 500 }
    .pc-pct { font-size: 1.05rem; font-weight: 700; color: var(--cp-accent2, #9b6bff) }
    .pc-bar { height: 12px; background: rgba(255,255,255,.06); border-radius: 20px; overflow: hidden; border: 1px solid var(--cp-accent-soft, var(--border)) }
    .pc-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--cp-accent,#4f7ff0), var(--cp-accent2,#9b6bff)); box-shadow: 0 0 12px rgba(139,92,246,.55); transition: width .4s ease }
    .pc-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      flex-shrink: 0;
      background: radial-gradient(circle at 35% 30%, rgba(155,107,255,.4), rgba(79,70,229,.18));
      border: 1.5px solid var(--cp-accent-soft, rgba(139,92,246,.4));
      box-shadow: 0 0 0 5px rgba(139,92,246,.08), 0 6px 16px rgba(90,60,200,.35);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #c4b5fd;
    }

    /* Field grid (view mode) — icon-chip cards matching the reference profile design */
    .pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .9rem }
    .pf-grid.pf-single { grid-template-columns: 1fr }
    .pf-item {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: .8rem;
      background: var(--pf-card-bg, rgba(255,255,255,.02));
      border: 1px solid var(--pf-card-border, var(--border));
      border-radius: 12px;
      padding: .75rem .85rem;
      transition: background .15s, border-color .15s;
    }
    .pf-item:hover { background: var(--pf-card-bg-hover, rgba(255,255,255,.04)) }
    .pf-item.pf-full { grid-column: 1 / -1 }
    .pf-item-body { min-width: 0; flex: 1 }
    .pf-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--pf-icon-bg, rgba(255,255,255,.06));
      border: 1px solid var(--pf-icon-border, var(--border));
      color: var(--pf-icon-color, var(--accent));
      box-shadow: 0 4px 12px rgba(80,60,180,.3);
    }
    .pf-icon svg { width: 19px; height: 19px }
    .pf-icon.pf-icon-round { border-radius: 50%; width: 46px; height: 46px }
    .pf-label { font-size: .7rem; color: var(--cp-accent-text, var(--text2)); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .25rem; font-weight: 600 }
    .pf-value { font-size: .95rem; color: var(--text); word-break: break-word; line-height: 1.4; font-weight: 600 }
    .pf-value.pf-empty { color: var(--text2); font-style: italic; font-weight: 400 }
    .pf-value a { color: var(--cp-accent-text, var(--accent)); text-decoration: none }
    .pf-value a:hover { text-decoration: underline }

    /* Approval badge */
    .appr-badge {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .25rem .65rem;
      border-radius: 20px;
      font-size: .74rem;
      font-weight: 700;
      letter-spacing: .02em
    }
    .appr-badge .appr-dot { width: 7px; height: 7px; border-radius: 50% }
    .appr-badge.pending { background: rgba(255,197,61,.12); color: var(--warn); border: 1px solid rgba(255,197,61,.35) }
    .appr-badge.pending .appr-dot { background: var(--warn) }
    .appr-badge.approved { background: rgba(62,207,142,.12); color: var(--accent2); border: 1px solid rgba(62,207,142,.35) }
    .appr-badge.approved .appr-dot { background: var(--accent2) }
    .appr-badge.rejected { background: rgba(255,95,87,.12); color: var(--danger); border: 1px solid rgba(255,95,87,.35) }
    .appr-badge.rejected .appr-dot { background: var(--danger) }
    .appr-badge.blocked { background: rgba(139,148,158,.15); color: var(--text2); border: 1px solid rgba(139,148,158,.35) }
    .appr-badge.blocked .appr-dot { background: var(--text2) }

    /* Areas chips (view) */
    .pf-chip-wrap { display: flex; flex-wrap: wrap; gap: .4rem }

    /* Skills chips */
    .skill-chip {
      background: var(--cp-accent-bg, rgba(79,142,255,.12));
      border: 1px solid var(--cp-accent-soft, rgba(79,142,255,.3));
      color: var(--cp-accent-text, var(--accent));
      border-radius: 14px;
      padding: .22rem .65rem;
      font-size: .76rem
    }

    /* Edit form */
    .pf-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem .9rem }
    .pf-form-item { min-width: 0 }
    .pf-form-item.pf-full { grid-column: 1 / -1 }
    .pf-form-body { flex: 1; min-width: 0 }
    .pf-input-wrap { position: relative; display: flex; align-items: center }
    .pf-input-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--pf-icon-color, var(--accent));
      pointer-events: none;
      z-index: 1;
    }
    .pf-input-icon svg { width: 16px; height: 16px }
    .pf-input-wrap.pf-textarea-wrap .pf-input-icon { top: 12px; transform: none }
    .pf-input-wrap .pf-input,
    .pf-input-wrap .pf-select,
    .pf-input-wrap .pf-textarea { padding-left: 2.35rem }
    .pp-avatar.pp-avatar-lg { width: 72px; height: 72px; font-size: 2.2rem }
    .pf-form-label { display: block; font-size: .72rem; color: var(--cp-accent-text, var(--text2)); margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .04em }
    .pf-form-label .pf-locked-tag { text-transform: none; letter-spacing: 0; color: var(--text2); font-size: .68rem; opacity: .7 }
    .pf-input, .pf-select, .pf-textarea {
      width: 100%;
      background: rgba(255,255,255,.03);
      border: 1px solid var(--cp-accent-soft, var(--border));
      border-radius: 8px;
      padding: .55rem .7rem;
      font-size: .84rem;
      color: var(--text);
      font-family: inherit;
      transition: border-color .15s, box-shadow .15s
    }
    .pf-input:focus, .pf-select:focus, .pf-textarea:focus { outline: none; border-color: var(--cp-accent, var(--accent)); box-shadow: 0 0 0 3px var(--cp-accent-bg, transparent) }
    .pf-textarea { resize: vertical; min-height: 64px }
    .pf-input:disabled, .pf-locked {
      background: rgba(255,255,255,.02);
      color: var(--text2);
      cursor: not-allowed;
      border-style: dashed
    }

    .pf-avatar-edit { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap }
    .pf-avatar-preview {
      width: 52px; height: 52px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.6rem; flex-shrink: 0;
      border: 1.5px solid var(--cp-accent-soft, rgba(255,255,255,.12));
      box-shadow: 0 0 0 3px var(--cp-accent-bg, rgba(255,255,255,.06))
    }
    .pf-emoji-row { display: flex; flex-wrap: wrap; gap: .4rem }
    .pf-emoji-opt {
      width: 44px; height: 44px; border-radius: 9px; border: 1.5px solid var(--cp-accent-soft, var(--border));
      background: var(--surface2); cursor: pointer; font-size: 1.4rem;
      display: flex; align-items: center; justify-content: center; transition: border-color .15s
    }
    .pf-emoji-opt.sel { border-color: var(--cp-accent, var(--accent)); background: var(--cp-accent-bg, rgba(79,142,255,.14)) }
    .pf-color-row { display: flex; flex-wrap: wrap; gap: .5rem }
    .pf-color-opt {
      width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent
    }
    .pf-color-opt.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--cp-accent, var(--accent)) }

    .pp-actions { display: flex; gap: .7rem; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--cp-accent-soft, var(--border)) }
    .pp-btn { flex: 1; padding: .7rem 1rem; border-radius: 9px; font-size: .86rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border); transition: all .2s }
    .pp-btn-primary { background: linear-gradient(90deg, var(--cp-accent,#3b82f6), var(--cp-accent2,#8b5cf6)); color: #fff; border: none; box-shadow: 0 12px 30px var(--cp-accent-soft, transparent) }
    .pp-btn-primary:hover { filter: brightness(1.1); box-shadow: 0 14px 36px var(--cp-accent-soft, transparent) }
    .pp-btn-secondary { background: var(--cp-accent-bg, var(--surface2)); color: var(--text); border-color: var(--cp-accent-soft, var(--border)) }
    .pp-btn-secondary:hover { border-color: var(--cp-accent, var(--text2)) }

    .pf-resume-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap }
    .pf-resume-name { font-size: .8rem; color: var(--text2) }
    .pf-file-btn { background: var(--cp-accent-bg, var(--surface2)); border: 1px solid var(--cp-accent-soft, var(--border)); color: var(--text); padding: .5rem .8rem; border-radius: 8px; font-size: .8rem; cursor: pointer; transition: border-color .15s }
    .pf-file-btn:hover { border-color: var(--cp-accent, var(--accent)) }

    .pf-lock-note { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--text2); margin-top: .3rem }
    .pf-lock-note svg { width: 12px; height: 12px }

    @media (max-width: 640px) {
      #profile-btn-name { display: none }
      .profile-panel { padding: 1.1rem; max-height: 92vh }
      .pp-header { margin: -1.1rem -1.1rem 1.2rem; padding: 1rem 1.1rem .9rem }
      .pf-grid, .pf-form-grid { grid-template-columns: 1fr }
      #profile-dropdown { width: 190px }
      #topbar { gap: .5rem; padding: 0 .6rem }
      #online-pill { display: none }
      #my-slabel { display: none }
    }

    /* Entry prompt */
    #entry-prompt {
      position: absolute;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(13, 17, 23, .92);
      border: 1px solid var(--accent);
      border-radius: 12px;
      padding: .7rem 1.4rem;
      font-size: .9rem;
      color: var(--text);
      display: none;
      flex-direction: column;
      align-items: center;
      gap: .25rem;
      pointer-events: none;
      backdrop-filter: blur(8px);
      white-space: nowrap
    }

    #entry-prompt.show {
      display: flex
    }

    .ep-key {
      background: var(--accent);
      border-radius: 6px;
      padding: .15rem .5rem;
      font-weight: 700;
      font-size: .8rem;
      margin: 0 .3rem
    }

    #exit-prompt {
      position: absolute;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(13, 17, 23, .92);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: .6rem 1.2rem;
      font-size: .82rem;
      color: var(--text2);
      display: none;
      pointer-events: none;
      backdrop-filter: blur(8px);
      white-space: nowrap
    }

    #exit-prompt.show {
      display: block
    }

    #seat-prompt {
      position: absolute;
      bottom: 138px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(13, 17, 23, .92);
      border: 1px solid rgba(62, 207, 142, .55);
      border-radius: 12px;
      padding: .55rem 1rem;
      font-size: .82rem;
      color: var(--text);
      display: none;
      pointer-events: none;
      backdrop-filter: blur(8px);
      white-space: nowrap
    }

    #seat-prompt.show {
      display: block
    }

    #access-prompt {
      position: absolute;
      bottom: 178px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(13, 17, 23, .94);
      border: 1px solid rgba(255, 197, 61, .65);
      border-radius: 12px;
      padding: .6rem 1.1rem;
      font-size: .84rem;
      color: var(--text);
      display: none;
      pointer-events: none;
      backdrop-filter: blur(8px);
      white-space: nowrap
    }

    #access-prompt.show {
      display: block
    }

    /* Controls hint */
    #controls-hint {
      position: absolute;
      bottom: 14px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(13, 17, 23, .72);
      border-radius: 10px;
      padding: .4rem 1rem;
      font-size: .7rem;
      color: var(--text2);
      display: flex;
      gap: .8rem;
      pointer-events: none
    }

    .ch-key {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: .02rem .3rem;
      font-size: .68rem;
      color: var(--text);
      margin-right: .2rem
    }

    /* HUD Toggle Buttons Stack */
    .hud-toggle {
      position: absolute;
      right: 16px;
      width: 44px;
      height: 44px;
      background: rgba(22, 27, 34, 0.85);
      border: 1px solid var(--border);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--text2);
      pointer-events: all;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 99;
      backdrop-filter: blur(8px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }
    .hud-toggle-icon {
      width: 20px;
      height: 20px;
      stroke-width: 2.2px;
      transition: transform 0.2s;
    }
    .hud-toggle:hover {
      background: var(--surface2);
      color: var(--text);
      transform: scale(1.08);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    }
    .hud-toggle:active {
      transform: scale(0.95);
    }

    #chat-toggle {
      bottom: 16px;
    }
    #chat-toggle:hover, #chat-toggle.active {
      border-color: var(--accent);
      color: var(--accent);
    }
    #chat-toggle.active {
      background: rgba(79, 142, 255, 0.15);
      box-shadow: 0 0 12px rgba(79, 142, 255, 0.25);
    }

    #people-toggle {
      bottom: 70px;
    }
    #people-toggle:hover, #people-toggle.active {
      border-color: var(--accent2);
      color: var(--accent2);
    }
    #people-toggle.active {
      background: rgba(62, 207, 142, 0.15);
      box-shadow: 0 0 12px rgba(62, 207, 142, 0.25);
    }

    #video-call-toggle {
      bottom: 124px;
    }
    #video-call-toggle:hover, #video-call-toggle.active {
      border-color: var(--accent);
      color: var(--accent);
    }
    #video-call-toggle.active {
      background: rgba(79, 142, 255, 0.15);
      box-shadow: 0 0 12px rgba(79, 142, 255, 0.25);
    }

    #chat-panel {
      position: absolute;
      bottom: 70px;
      right: 16px;
      width: 300px;
      background: rgba(13, 17, 23, .94);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      pointer-events: all;
      backdrop-filter: blur(14px);
      transform: translateX(340px);
      transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
      max-height: 380px
    }

    #chat-panel.open {
      transform: translateX(0)
    }

    .cp-header {
      padding: .7rem 1rem;
      font-size: .85rem;
      font-weight: 600;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    #cp-channel {
      font-size: .72rem;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: .15rem .4rem;
      color: var(--text2);
      cursor: pointer;
      outline: none
    }

    #cp-msgs {
      flex: 1;
      overflow-y: auto;
      padding: .7rem;
      display: flex;
      flex-direction: column;
      gap: .5rem;
      min-height: 160px;
      max-height: 260px
    }

    #cp-msgs::-webkit-scrollbar {
      width: 3px
    }

    #cp-msgs::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 3px
    }

    .chat-msg {
      display: flex;
      gap: .5rem;
      align-items: flex-start
    }

    .cm-avi {
      font-size: 1rem;
      line-height: 1;
      flex-shrink: 0
    }

    .cm-body {
      flex: 1;
      min-width: 0
    }

    .cm-name {
      font-size: .72rem;
      font-weight: 600;
      margin-bottom: .1rem
    }

    .cm-text {
      font-size: .82rem;
      color: var(--text2);
      word-break: break-word;
      line-height: 1.4
    }

    .cm-time {
      font-size: .65rem;
      color: var(--text2);
      opacity: .6;
      margin-top: .1rem
    }

    .cp-input-row {
      display: flex;
      gap: .5rem;
      padding: .6rem;
      border-top: 1px solid var(--border)
    }

    #cp-input {
      flex: 1;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      padding: .5rem .7rem;
      font-family: inherit;
      font-size: .82rem;
      outline: none;
      transition: border-color .2s
    }

    #cp-input:focus {
      border-color: var(--accent)
    }

    #cp-send {
      background: var(--accent);
      border: none;
      border-radius: 8px;
      color: #fff;
      padding: .5rem .7rem;
      cursor: pointer;
      font-size: .85rem
    }

    /* People styling moved to unified HUD stack */

    #people-panel {
      position: absolute;
      top: 62px;
      left: 16px;
      /* 230px was sized for [avatar][name][dot]. The rows now also carry a search
         box and Find / Invite actions, so the panel needs room to stay readable. */
      width: 268px;
      background: rgba(13, 17, 23, .94);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      pointer-events: all;
      backdrop-filter: blur(14px);
      /* Slide fully clear of the viewport when closed. -260px was 24px short:
         the panel sits at left:16 and is 268 wide (border-box), so 16-260 = -244
         put its right edge at +24 — a dark sliver with a player's status dot
         parked against the left edge, still eating clicks on pointer-events:all.
         calc(-100% - 20px) clears the panel's own width plus the left offset, so
         it stays correct if the 268px ever changes. */
      transform: translateX(calc(-100% - 20px));
      transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
      max-height: 70vh
    }

    #people-panel.open {
      transform: translateX(0)
    }

    /* SCOPED + RESET, deliberately.
       The profile panel also uses .pp-header (see ~line 1040) and bleeds it to
       the panel edge with `margin: -1.5rem -1.5rem 1.2rem`. This rule used to
       override only padding/font, so that negative margin still applied here and
       dragged the header 24px ABOVE its own panel — where overflow:hidden clipped
       it, rendering "People Online" as "ple Online". The profile rule's flex,
       gradient background, radius and ::after glow were leaking in too.
       Scoping by #people-panel and resetting is safer than renaming a class both
       panels share. */
    #people-panel .pp-header {
      display: block;
      margin: 0;
      padding: .7rem 1rem;
      font-size: .85rem;
      font-weight: 600;
      background: none;
      border-radius: 0;
      border-bottom: 1px solid var(--border)
    }
    #people-panel .pp-header::after { content: none }

    #pp-list {
      overflow-y: auto;
      max-height: calc(70vh - 48px)
    }

    #pp-list::-webkit-scrollbar {
      width: 3px
    }

    #pp-list::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 3px
    }

    /* Top-aligned, because the row is now two lines tall: identity, then the
       Find/Invite actions underneath. Centring would float the avatar and status
       dot against the middle of a taller row. */
    .pp-player {
      display: flex;
      align-items: flex-start;
      gap: .6rem;
      padding: .55rem 1rem
    }

    .pp-player+.pp-player { border-top: 1px solid rgba(255, 255, 255, .05) }

    .pp-avi {
      font-size: 1.2rem;
      flex-shrink: 0
    }

    .pp-info {
      flex: 1;
      min-width: 0
    }

    .pp-name {
      font-size: .82rem;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .pp-role {
      font-size: .7rem;
      color: var(--text2);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .pp-loc {
      font-size: .65rem;
      color: var(--text2);
      margin-top: .05rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .pp-status {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: .3rem      /* line up with the name, not the middle of a 2-line row */
    }

    /* Emotes */
    #emote-bar {
      position: absolute;
      bottom: 260px;
      left: 16px;
      display: flex;
      gap: .4rem;
      pointer-events: all
    }

    .eb-btn {
      width: 38px;
      height: 38px;
      background: rgba(13, 17, 23, .82);
      border: 1px solid var(--border);
      border-radius: 10px;
      cursor: pointer;
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .2s;
      backdrop-filter: blur(8px)
    }

    .eb-btn:hover {
      border-color: var(--accent);
      transform: scale(1.12)
    }

    /* Status modal */
    #status-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 500;
      backdrop-filter: blur(4px)
    }

    #status-modal.show {
      display: flex
    }

    .sm-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 1.5rem;
      width: 280px
    }

    .sm-title {
      font-weight: 600;
      margin-bottom: 1rem
    }

    .sm-options {
      display: flex;
      flex-direction: column;
      gap: .5rem
    }

    .sm-opt {
      display: flex;
      align-items: center;
      gap: .8rem;
      padding: .6rem .8rem;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      transition: all .2s
    }

    .sm-opt:hover,
    .sm-opt.active {
      border-color: var(--accent);
      background: rgba(79, 142, 255, .1)
    }

    .sm-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%
    }

    /* Meet prompt */
    #meet-prompt {
      position: absolute;
      bottom: 155px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(13, 17, 23, .92);
      border: 1px solid rgba(79, 142, 255, .55);
      border-radius: 12px;
      padding: .55rem 1.1rem;
      font-size: .85rem;
      color: var(--text);
      display: none;
      align-items: center;
      gap: .6rem;
      pointer-events: all;
      backdrop-filter: blur(8px);
      white-space: nowrap;
      cursor: pointer;
      transition: border-color .2s;
      z-index: 110
    }

    #meet-prompt:hover {
      border-color: var(--accent)
    }

    #meet-prompt.show {
      display: flex
    }

    .mp-key {
      background: var(--accent);
      border-radius: 5px;
      padding: .1rem .4rem;
      font-weight: 700;
      font-size: .75rem
    }

    /* Proximity Chit Chat Card */
    #chit-chat-card {
      position: fixed;
      width: 320px;
      max-height: 420px;
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.96));
      border: 1px solid rgba(138, 180, 255, 0.35);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(59, 130, 246, 0.15);
      border-radius: 16px;
      display: none;
      flex-direction: column;
      z-index: 220;
      backdrop-filter: blur(12px);
      overflow: hidden;
      transition: opacity 0.2s ease, transform 0.2s ease, left 0.1s ease-out, top 0.1s ease-out;
      transform: scale(0.96);
      opacity: 0;
      pointer-events: auto;
    }
    #chit-chat-card.show {
      display: flex;
      transform: translateY(0) scale(1);
      opacity: 1;
    }
    .ccc-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      background: rgba(15, 23, 42, 0.85);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .ccc-user-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .ccc-avatar-ring {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
    }
    .ccc-user-details {
      display: flex;
      flex-direction: column;
    }
    #ccc-user-name {
      font-size: 0.88rem;
      font-weight: 700;
      color: #f8fafc;
    }
    .ccc-status-badge {
      font-size: 0.68rem;
      color: #4ade80;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .ccc-status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #4ade80;
      box-shadow: 0 0 6px #4ade80;
    }
    .ccc-header-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .ccc-call-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      color: #ffffff;
      border: none;
      border-radius: 8px;
      padding: 5px 10px;
      font-size: 0.74rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s;
    }
    .ccc-call-btn:hover {
      background: linear-gradient(135deg, #3b82f6, #2563eb);
      transform: scale(1.03);
    }
    .ccc-call-btn svg {
      width: 13px;
      height: 13px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
    }
    .ccc-close-btn {
      background: transparent;
      border: none;
      color: #94a3b8;
      font-size: 1.1rem;
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 6px;
    }
    .ccc-close-btn:hover {
      color: #f8fafc;
      background: rgba(255, 255, 255, 0.1);
    }
    .ccc-quick-reacts {
      display: flex;
      gap: 6px;
      padding: 8px 12px;
      background: rgba(30, 41, 59, 0.5);
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      overflow-x: auto;
    }
    .ccc-qr-btn {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 4px 8px;
      font-size: 0.95rem;
      cursor: pointer;
      transition: transform 0.15s, background 0.15s;
    }
    .ccc-qr-btn:hover {
      transform: scale(1.18);
      background: rgba(255, 255, 255, 0.18);
    }
    .ccc-messages {
      flex: 1;
      height: 220px;
      overflow-y: auto;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .ccc-empty {
      color: #64748b;
      font-size: 0.78rem;
      text-align: center;
      margin: auto;
    }
    .ccc-msg {
      display: flex;
      gap: 8px;
      max-width: 86%;
      align-self: flex-start;
    }
    .ccc-msg.mine {
      align-self: flex-end;
      flex-direction: row-reverse;
    }
    .ccc-msg-body {
      background: rgba(30, 41, 59, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      padding: 7px 11px;
      font-size: 0.82rem;
      color: #e2e8f0;
      word-break: break-word;
    }
    .ccc-msg.mine .ccc-msg-body {
      background: linear-gradient(135deg, #1e40af, #2563eb);
      color: #ffffff;
      border: none;
    }
    .ccc-msg-name {
      font-size: 0.68rem;
      font-weight: 600;
      margin-bottom: 2px;
      color: #94a3b8;
    }
    .ccc-msg.mine .ccc-msg-name {
      display: none;
    }
    .ccc-input-row {
      display: flex;
      padding: 8px 12px;
      background: rgba(15, 23, 42, 0.9);
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      gap: 8px;
    }
    #ccc-input {
      flex: 1;
      background: rgba(30, 41, 59, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      padding: 6px 10px;
      color: #f8fafc;
      font-size: 0.82rem;
      outline: none;
    }
    #ccc-input:focus {
      border-color: #3b82f6;
    }
    #ccc-send-btn {
      background: #2563eb;
      border: none;
      border-radius: 8px;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      cursor: pointer;
    }
    #ccc-send-btn:hover {
      background: #3b82f6;
    }
    #ccc-send-btn svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
    }

    /* ── Meeting Room HUD ── */
    #meeting-room-hud {
      display: none;
      position: fixed;
      bottom: 2.2rem;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(10, 15, 28, 0.88);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(167, 139, 250, 0.35);
      border-radius: 16px;
      padding: 1rem 1.4rem 1.1rem;
      width: 420px;
      max-width: calc(100vw - 2rem);
      z-index: 120;
      box-shadow: 0 8px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(167,139,250,0.08);
      pointer-events: all;
    }
    #meeting-room-hud.show { display: block }
    .mrh-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: .85rem;
    }
    .mrh-title {
      display: flex;
      align-items: center;
      gap: .5rem;
      font-size: .95rem;
      font-weight: 700;
      color: #e2d9f3;
    }
    .mrh-room-badge {
      font-size: .7rem;
      background: rgba(167,139,250,0.18);
      color: #a78bfa;
      border: 1px solid rgba(167,139,250,0.3);
      border-radius: 20px;
      padding: .15rem .5rem;
      font-weight: 600;
    }
    .mrh-close {
      background: none;
      border: none;
      color: #7b7f8a;
      font-size: 1rem;
      cursor: pointer;
      padding: .1rem .3rem;
      border-radius: 6px;
      transition: color .15s;
    }
    .mrh-close:hover { color: #e2d9f3 }
    .mrh-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .6rem;
    }
    .mrh-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .3rem;
      padding: .7rem .5rem;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
      color: #d1d5db;
      cursor: pointer;
      font-size: .78rem;
      font-weight: 600;
      transition: background .15s, border-color .15s, color .15s;
    }
    .mrh-btn:hover {
      background: rgba(167,139,250,0.14);
      border-color: rgba(167,139,250,0.4);
      color: #e2d9f3;
    }
    .mrh-btn .mrh-icon { font-size: 1.3rem; line-height: 1 }
    .mrh-btn.primary {
      background: rgba(99,102,241,0.22);
      border-color: rgba(99,102,241,0.45);
      color: #c7d2fe;
    }
    .mrh-btn.primary:hover {
      background: rgba(99,102,241,0.38);
    }
    .mrh-who {
      margin-top: .75rem;
      font-size: .72rem;
      color: #6b7280;
      text-align: center;
      min-height: 1rem;
    }

    /* Redesigned Meet Panel (Teams View) */
    #meet-panel {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.9);
      width: 90%;
      max-width: 960px;
      height: 80vh;
      max-height: 560px;
      background: rgba(15, 23, 42, 0.85); /* Slate 900 with high opacity */
      backdrop-filter: blur(24px) saturate(160%);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 16px;
      display: none;
      flex-direction: column;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 
                  0 0 40px rgba(79, 142, 255, 0.15); /* Indigo glow */
      z-index: 1000;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      color: #f8fafc;
    }

    #meet-panel.show {
      display: flex;
      transform: translate(-50%, -50%) scale(1);
    }

    .meet-header {
      padding: 0.85rem 1.25rem;
      background: rgba(15, 23, 42, 0.95);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }

    .meet-header-title {
      font-size: 0.95rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: #f1f5f9;
    }

    .meet-close-btn {
      background: transparent;
      border: none;
      color: #94a3b8;
      cursor: pointer;
      font-size: 1.1rem;
      padding: 0.2rem 0.5rem;
      border-radius: 6px;
      line-height: 1;
      transition: all 0.15s;
    }

    .meet-close-btn:hover {
      color: #ff5f57;
      background: rgba(255, 95, 87, 0.1);
    }

    .meet-content-split {
      display: flex;
      flex: 1;
      height: calc(100% - 50px);
      overflow: hidden;
    }

    /* Video area on the left */
    .meet-video-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: #0b0f17; /* Solid slate 950 background */
      position: relative;
      padding: 1rem;
    }

    .meet-video-grid {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      align-items: center;
      justify-content: center;
      margin-bottom: 4.5rem; /* Space for controls bar */
    }

    /* Tile count is dynamic: 1 (alone) up to 10 (you + the 9 video slots on an
       SFU call). data-count is stamped by layoutMeetingGrid(). Beyond 10 people
       the extras are avatar chips in #meet-overflow, not tiles — same as Teams. */
    .meet-video-grid[data-count="1"] { grid-template-columns: 1fr; }
    .meet-video-grid[data-count="2"] { grid-template-columns: 1fr 1fr; }
    .meet-video-grid[data-count="3"],
    .meet-video-grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }
    .meet-video-grid[data-count="5"],
    .meet-video-grid[data-count="6"] { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
    .meet-video-grid[data-count="7"],
    .meet-video-grid[data-count="8"],
    .meet-video-grid[data-count="9"] { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
    .meet-video-grid[data-count="10"] { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
    /* Tiles get small fast; keep the name legible rather than letting it wrap. */
    .meet-video-grid[data-count="7"] .mv-avatar-name,
    .meet-video-grid[data-count="8"] .mv-avatar-name,
    .meet-video-grid[data-count="9"] .mv-avatar-name,
    .meet-video-grid[data-count="10"] .mv-avatar-name { font-size: .7rem; }

    /* ── Overflow strip: everyone past the 9 video slots ── */
    #meet-overflow {
      position: absolute; bottom: 5.2rem; left: 50%; transform: translateX(-50%);
      display: none; align-items: center; gap: .4rem; max-width: 92%;
      overflow-x: auto; padding: .35rem .5rem; z-index: 20;
      background: rgba(15, 23, 42, .82); border: 1px solid rgba(255,255,255,.1);
      border-radius: 999px; backdrop-filter: blur(8px);
    }
    #meet-overflow.show { display: flex; }
    .mo-label { color: #94a3b8; font-size: .72rem; font-weight: 700; padding: 0 .3rem; white-space: nowrap; }
    .mo-chip {
      display: flex; align-items: center; gap: .3rem; flex-shrink: 0;
      background: #1e293b; border-radius: 999px; padding: .22rem .55rem .22rem .3rem;
    }
    .mo-emoji { width: 18px; height: 18px; display: grid; place-items: center; font-size: .72rem; }
    .mo-name { color: #cbd5e1; font-size: .72rem; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* ── People panel: search + find/invite actions ── */
    .pp-search { padding: .5rem .6rem 0; }
    .pp-search input {
      width: 100%; box-sizing: border-box; background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12); color: #e2e8f0; border-radius: 8px;
      padding: .4rem .55rem; font-size: .78rem; outline: none;
    }
    .pp-search input:focus { border-color: #3b82f6; }
    /* Actions sit on their OWN line under the person's details, not beside them.
       Inline, these two buttons ate 83px of a 230px panel and crushed the name /
       role / location into a 49px column. */
    .pp-actions { display: flex; gap: .3rem; margin-top: .4rem; }
    .pp-act {
      flex: 1; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
      color: #cbd5e1; border-radius: 6px; padding: .26rem .3rem; cursor: pointer;
      font-size: .66rem; font-weight: 600; white-space: nowrap; text-align: center;
    }
    .pp-act:hover { background: #3b82f6; border-color: #3b82f6; color: #fff; }
    .pp-act[disabled] { opacity: .4; cursor: default; }
    .pp-act[disabled]:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); color: #cbd5e1; }
    .pp-act.waiting { color: #fbbf24; border-color: rgba(251,191,36,.4); }
    .pp-empty { padding: 1rem .6rem; text-align: center; color: #64748b; font-size: .78rem; }

    /* ── Navigation compass ── */
    #nav-compass {
      position: fixed; top: 4.2rem; left: 50%; transform: translateX(-50%);
      display: none; align-items: center; gap: .6rem; z-index: 60;
      background: rgba(15,23,42,.9); border: 1px solid rgba(59,130,246,.45);
      border-radius: 999px; padding: .4rem .5rem .4rem .55rem;
      backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0,0,0,.45);
    }
    #nav-compass.show { display: flex; }
    .nc-arrow { width: 26px; height: 26px; flex-shrink: 0; transition: transform .12s linear; }
    .nc-arrow svg { width: 26px; height: 26px; fill: #3b82f6; stroke: none; }
    #nav-compass.arrived .nc-arrow svg { fill: #4ade80; }
    .nc-body { display: flex; flex-direction: column; line-height: 1.15; }
    .nc-name { color: #e2e8f0; font-size: .78rem; font-weight: 700; }
    .nc-dist { color: #94a3b8; font-size: .68rem; font-variant-numeric: tabular-nums; }
    #nav-compass.arrived .nc-dist { color: #4ade80; }
    .nc-stop {
      background: transparent; border: 0; color: #64748b; cursor: pointer;
      font-size: .8rem; padding: .1rem .3rem; border-radius: 4px;
    }
    .nc-stop:hover { color: #f87171; background: rgba(248,113,113,.12); }
    @media (prefers-reduced-motion: reduce) { .nc-arrow { transition: none; } }

    /* ── Add-participant picker ── */
    #meet-invite-pop {
      position: absolute; bottom: 5.2rem; left: 50%; transform: translateX(-50%) translateY(8px);
      width: min(320px, 90%); background: #0f172a; border: 1px solid rgba(255,255,255,.12);
      border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.55);
      padding: .75rem; z-index: 30; display: none; opacity: 0; transition: opacity .14s ease, transform .14s ease;
    }
    #meet-invite-pop.show { display: block; opacity: 1; transform: translateX(-50%) translateY(0); }
    .mip-head { display: flex; justify-content: space-between; align-items: center; color: #e2e8f0; font-size: .82rem; font-weight: 700; margin-bottom: .5rem; }
    .mip-count { color: #94a3b8; font-weight: 500; font-size: .72rem; }
    .mip-search {
      width: 100%; box-sizing: border-box; background: #1e293b; border: 1px solid rgba(255,255,255,.1);
      color: #e2e8f0; border-radius: 8px; padding: .45rem .6rem; font-size: .8rem; outline: none; margin-bottom: .5rem;
    }
    .mip-search:focus { border-color: #3b82f6; }
    .mip-list { max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: .25rem; }
    .mip-row { display: flex; align-items: center; gap: .5rem; padding: .4rem .45rem; border-radius: 8px; }
    .mip-row:hover { background: rgba(255,255,255,.05); }
    .mip-avi { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #1e293b; font-size: .85rem; flex-shrink: 0; }
    .mip-name { flex: 1; color: #e2e8f0; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mip-invite {
      background: #3b82f6; color: #fff; border: 0; border-radius: 6px; padding: .28rem .6rem;
      font-size: .72rem; font-weight: 700; cursor: pointer; flex-shrink: 0;
    }
    .mip-invite:hover { background: #2563eb; }
    .mip-invite[disabled] { background: #334155; color: #94a3b8; cursor: default; }
    .mip-empty { color: #64748b; font-size: .78rem; text-align: center; padding: .9rem .4rem; }

    @media (max-width: 640px) {
      .meet-video-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
      }
    }

    .meet-video-box {
      width: 100%;
      height: 100%;
      background: #1e293b; /* Slate 800 */
      border-radius: 12px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255, 255, 255, 0.05);
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .meet-video-box.active-speaker {
      border: 2px solid #3b82f6; /* Glowing border for active speaker */
      box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
    }

    .meet-video-element {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: none; /* Shown when stream is active */
    }

    #local-video {
      transform: scaleX(-1); /* Mirror local video */
    }

    /* Fallback avatar */
    .meet-video-fallback {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      z-index: 1;
    }

    .mv-avatar-ring {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: linear-gradient(135deg, #4f8eff, #6366f1);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 25px -5px rgba(79, 142, 255, 0.4);
      transition: all 0.3s ease;
    }

    /* Pulse animation for speaking/connecting state */
    .mv-avatar-ring.speaking {
      animation: pulse-ring 1.5s infinite;
    }

    @keyframes pulse-ring {
      0% {
        box-shadow: 0 0 0 0 rgba(79, 142, 255, 0.6);
      }
      70% {
        box-shadow: 0 0 0 15px rgba(79, 142, 255, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(79, 142, 255, 0);
      }
    }

    .mv-avatar-emoji {
      font-size: 2.2rem;
      line-height: 1;
    }

    .mv-avatar-name {
      font-size: 0.9rem;
      font-weight: 500;
      color: #e2e8f0;
    }

    /* Video overlay details */
    .meet-video-overlay-bottom {
      position: absolute;
      bottom: 12px;
      left: 12px;
      background: rgba(15, 23, 42, 0.75);
      backdrop-filter: blur(6px);
      padding: 0.3rem 0.65rem;
      border-radius: 6px;
      font-size: 0.75rem;
      font-weight: 500;
      color: #f1f5f9;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      border: 1px solid rgba(255, 255, 255, 0.08);
      z-index: 2;
    }

    .mv-overlay-status {
      font-size: 0.8rem;
    }

    .meet-hand-overlay {
      position: absolute;
      top: 12px;
      right: 12px;
      background: #eab308; /* Yellow 500 */
      color: #0f172a;
      font-size: 0.72rem;
      font-weight: 700;
      padding: 0.25rem 0.55rem;
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 0.2rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      z-index: 2;
      animation: bounce 1s infinite alternate;
    }

    @keyframes bounce {
      from { transform: translateY(0); }
      to { transform: translateY(-4px); }
    }

    /* Floating control bar */
    .meet-controls-bar {
      position: absolute;
      bottom: 1rem;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(30, 41, 59, 0.85); /* Slate 800 */
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 0.4rem 0.8rem;
      border-radius: 50px;
      display: flex;
      gap: 0.6rem;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
      z-index: 10;
    }

    .mcb-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(15, 23, 42, 0.5);
      color: #f1f5f9;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      transition: all 0.2s ease;
    }

    .mcb-btn:hover {
      background: rgba(255, 255, 255, 0.15);
      transform: scale(1.08);
    }

    .mcb-btn.active-off {
      background: #ef4444 !important; /* Red 500 */
      color: #ffffff;
      border-color: #ef4444;
    }

    .mcb-btn.active-on {
      background: #3b82f6 !important; /* Blue 500 */
      color: #ffffff;
      border-color: #3b82f6;
    }
    
    .mcb-btn-bot {
      border-radius: 20px;
      width: auto;
      padding: 0 0.75rem;
      font-size: 0.78rem;
      font-weight: 600;
      color: #3b82f6;
      border-color: rgba(59, 130, 246, 0.3);
      background: rgba(59, 130, 246, 0.1);
    }
    
    .mcb-btn-bot.active {
      background: #3b82f6 !important;
      color: #fff;
    }

    .mcb-btn-danger {
      background: #ef4444 !important;
      color: #ffffff;
      border-color: #ef4444;
      border-radius: 20px;
      width: auto;
      padding: 0 1rem;
      font-size: 0.8rem;
      font-weight: 600;
    }

    /* SVG icons inside control buttons */
    .mcb-icon {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      display: block;
      flex-shrink: 0;
    }
    .mcb-btn-danger .mcb-icon,
    .mcb-btn-bot .mcb-icon { width: 15px; height: 15px }
    .call-popup-icon svg {
      width: 32px;
      height: 32px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .mv-overlay-status svg {
      width: 13px;
      height: 13px;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      vertical-align: middle;
    }
    .mrh-icon svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .mcb-btn-danger:hover {
      background: #dc2626 !important;
      box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
    }

    /* Sidebar Chat Panel on the right */
    .meet-sidebar {
      width: 300px;
      border-left: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(15, 23, 42, 0.4); /* Glassmorphic sidebar */
      display: flex;
      flex-direction: column;
      height: 100%;
      transition: width 0.3s ease;
      flex-shrink: 0;
    }

    .meet-sidebar.collapsed {
      width: 0;
      overflow: hidden;
      border-left: none;
    }

    .meet-sidebar-header {
      padding: 0.85rem 1rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 0.88rem;
      font-weight: 600;
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
    }

    .meet-sidebar-subtitle {
      font-size: 0.7rem;
      color: #94a3b8;
      font-weight: 400;
    }

    .meet-quick-row {
      display: flex;
      gap: 0.3rem;
      padding: 0.5rem 0.75rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      justify-content: center;
      flex-shrink: 0;
    }

    .mq-btn {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      padding: 0.25rem 0.45rem;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.15s;
      line-height: 1;
    }

    .mq-btn:hover {
      border-color: #3b82f6;
      transform: scale(1.1);
    }

    .meet-msgs {
      flex: 1;
      overflow-y: auto;
      padding: 0.75rem;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      min-height: 120px;
    }

    .meet-msgs::-webkit-scrollbar {
      width: 4px;
    }

    .meet-msgs::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px;
    }

    .meet-msg {
      display: flex;
      gap: 0.4rem;
      align-items: flex-start;
    }

    .meet-msg.mine {
      flex-direction: row-reverse;
    }

    .mm-avi {
      font-size: 0.95rem;
      flex-shrink: 0;
    }

    .mm-body {
      max-width: 80%;
      display: flex;
      flex-direction: column;
    }

    .mm-name {
      font-size: 0.65rem;
      font-weight: 600;
      margin-bottom: 0.1rem;
      color: #94a3b8;
    }

    .meet-msg.mine .mm-name {
      text-align: right;
    }

    .mm-text {
      font-size: 0.78rem;
      color: #f1f5f9;
      background: rgba(255, 255, 255, 0.06);
      border-radius: 8px;
      border-top-left-radius: 2px;
      padding: 0.35rem 0.6rem;
      line-height: 1.4;
      word-break: break-word;
    }

    .meet-msg.mine .mm-text {
      background: rgba(59, 130, 246, 0.25);
      border-top-left-radius: 8px;
      border-top-right-radius: 2px;
    }

    .meet-empty {
      text-align: center;
      color: #94a3b8;
      font-size: 0.75rem;
      margin: auto;
      padding: 1rem;
    }

    .meet-input-row {
      display: flex;
      gap: 0.4rem;
      padding: 0.6rem 0.75rem;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      flex-shrink: 0;
    }

    #meet-input {
      flex: 1;
      background: rgba(15, 23, 42, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      color: #f8fafc;
      padding: 0.45rem 0.65rem;
      font-family: inherit;
      font-size: 0.8rem;
      outline: none;
      transition: border-color 0.2s;
    }

    #meet-input:focus {
      border-color: #3b82f6;
    }

    #meet-input::placeholder {
      color: #64748b;
    }

    #meet-send-btn {
      background: #3b82f6;
      border: none;
      border-radius: 8px;
      color: #fff;
      padding: 0.45rem 0.75rem;
      cursor: pointer;
      font-size: 0.8rem;
      transition: opacity 0.15s;
    }

    #meet-send-btn:hover {
      opacity: .85
    }

    /* ── Account Type Selection ── */
    .actype-grid {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
    }
    .actype-card {
      background: rgba(255, 255, 255, 0.04);
      border: 1.5px solid rgba(130, 140, 210, 0.2);
      border-radius: 14px;
      padding: 0.95rem 1.15rem;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.85rem;
    }
    .actype-card:hover {
      border-color: #a87cff;
      background: rgba(124, 92, 255, 0.08);
      transform: translateY(-1px);
    }
    .actype-card.selected {
      border-color: #a87cff;
      background: rgba(124, 92, 255, 0.14);
      box-shadow: 0 0 20px rgba(124, 92, 255, 0.2);
    }
    .actype-left {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      flex: 1;
      min-width: 0;
    }
    .actype-icon {
      font-size: 1.5rem;
      line-height: 1;
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .actype-info {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      min-width: 0;
    }
    .actype-title {
      font-size: 0.95rem;
      font-weight: 700;
      color: #ffffff;
    }
    .actype-desc {
      font-size: 0.74rem;
      color: #a0a8c2;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .actype-btn {
      background: rgba(124, 92, 255, 0.15);
      border: 1px solid rgba(124, 92, 255, 0.35);
      border-radius: 8px;
      color: #c69cff;
      padding: 0.4rem 0.85rem;
      font-family: inherit;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }
    .actype-card:hover .actype-btn,
    .actype-card.selected .actype-btn {
      background: linear-gradient(90deg, #7c5cff, #a87cff);
      color: #ffffff;
      border-color: transparent;
      box-shadow: 0 4px 12px rgba(124, 92, 255, 0.3);
    }
    /* Gate area chips */
    .gate-area-chip{
      border-radius: 8px;
      padding: 5px 11px 5px 9px;
      font-size: .72rem;
      font-weight: 600;
      border: 1px solid var(--cp-accent-soft, rgba(168,85,247,.4));
      color: var(--cp-accent-text, #a855f7);
      background: var(--cp-accent-bg, rgba(168,85,247,.07));
      display: inline-flex;
      align-items: center;
      gap: 5px;
      letter-spacing: .01em;
      transition: transform .15s, background .2s, border-color .2s;
    }
    .gate-area-chip::before{
      content: '';
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--cp-accent, #a855f7);
      flex-shrink: 0;
      box-shadow: 0 0 6px var(--cp-accent, #a855f7);
    }
    .gate-area-chip:hover{
      transform: translateY(-1px);
      background: var(--cp-accent-bg-hover, rgba(168,85,247,.14));
      border-color: var(--cp-accent, #a855f7);
    }
    .gate-status.pending { color: #ffc53d; font-weight: 600 }
    .gate-status.rejected { color: #ff5f57; font-weight: 600 }
    .gate-status.blocked { color: #ff5f57; font-weight: 600 }

    /* Gate checkpoint */
    #gate-prompt {
      position: absolute;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(13, 17, 23, .92);
      border: 1px solid #ffc53d;
      border-radius: 12px;
      padding: .7rem 1.4rem;
      font-size: .9rem;
      color: var(--text);
      display: none;
      flex-direction: column;
      align-items: center;
      gap: .2rem;
      pointer-events: none;
      backdrop-filter: blur(8px);
      white-space: nowrap
    }

    #gate-prompt.show {
      display: flex
    }

    #gate-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .35);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 600;
      backdrop-filter: blur(12px);
      padding: 1rem
    }

    #gate-modal.show {
      display: flex
    }

    .gate-card{
  position: relative;
  background:
    linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 40%),
    rgba(18,20,28,.78);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  padding:24px;
  width:450px;
  max-width:450px;

  backdrop-filter:blur(35px);
  -webkit-backdrop-filter:blur(35px);

  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.03),
    inset 0 1px 0 rgba(255,255,255,.18);
  animation: gateCardPop .42s cubic-bezier(.22,1,.36,1);
}
@keyframes gateCardPop{
  from{ opacity:0; transform: translateY(14px) scale(.96); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

    .gate-header {
      text-align: center;
      margin-bottom: 1rem
    }

    .gate-logo {
      font-size: .72rem;
      color: rgba(242, 240, 240, 0.89);
      margin-bottom: .45rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .4rem
    }

    .gate-title {
      font-size: 1.45rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: -.01em;
      line-height: 1.2;
      text-align : center;
    }

    .id-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .5rem;
      background: rgba(255,255,255,.025);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 14px;
      padding: 10px;
      margin-bottom: 1rem
    }

   .id-avatar{
  width:72px;
  height:72px;
  font-size:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  position: relative;

  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(255,255,255,.22),
      transparent 55%
    ),
    var(--cp-avatar-bg, radial-gradient(circle at top, rgba(130,170,255,.45), rgba(90,130,200,.18)));

  border:1.5px solid var(--cp-accent, rgba(255,255,255,.15));
  box-shadow: 0 0 0 5px var(--cp-accent-bg, rgba(130,170,255,.08)), 0 8px 18px rgba(0,0,0,.35);
}

    .id-info {
      flex: 1;
      min-width: 0
    }

    .id-name {
      font-size: 1.5rem;
      font-weight: 800;
      color: #fff;
      line-height: 1.15;
      letter-spacing: -.01em;
    }

    .id-role {
      font-size:.95rem;
      color: var(--cp-accent-text, #a855f7);
      margin-bottom: .1rem;
      font-weight: 500
    }

    .id-dept {
      font-size: .72rem;
      color: rgb(241, 233, 233);
      margin-bottom: .38rem
    }

    .id-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: .64rem;
      color: var(--cp-accent-text, #8B5CF6);
      background: var(--cp-accent-bg, rgba(139,92,246,.12));
      border: 1px solid var(--cp-accent-soft, rgba(139,92,246,.3));
      border-radius: 20px;
      padding: 3px 10px 3px 8px;
      font-weight: 800;
      letter-spacing: .08em;
      margin-top: .4rem;
    }
    .id-badge::before{
      content:'';
      width:6px; height:6px;
      border-radius:50%;
      background: var(--cp-accent, #8B5CF6);
      box-shadow: 0 0 6px var(--cp-accent, #8B5CF6);
      animation: cpBadgeBlink 1.8s ease-in-out infinite;
    }
    @keyframes cpBadgeBlink{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }


    .gate-status {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      font-size: .85rem;
      color: rgba(255,255,255,.55);
      margin-bottom: 1rem;
      min-height: 1.4rem;
      transition: color .3s
    }

    .gate-status::before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
      background: var(--cp-accent, #2e97d4);
      box-shadow: 0 0 8px var(--cp-accent, #2e97d4);
      animation: cpScanDot 1s ease-in-out infinite;
    }
    @keyframes cpScanDot{ 0%,100%{ opacity:.35; transform:scale(.85) } 50%{ opacity:1; transform:scale(1.15) } }

.gate-status.granted{
  font-size:1.05rem;
  font-weight:700;
  color: #fff;
  text-shadow: 0 0 18px var(--cp-accent-soft, rgba(168,85,247,.55));
}

    .gate-status.granted::before {
      animation: none;
      opacity: 1;
      transform: scale(1);
      background: var(--cp-accent, #3b82f6);
      box-shadow: 0 0 10px var(--cp-accent, #3b82f6), 0 0 0 4px var(--cp-accent-bg, rgba(59,130,246,.15));
    }

    .gate-btn-row {
      display: flex;
      justify-content: center
    }

    .gate-enter-btn {
        background:linear-gradient(90deg,#3b82f6,#a855f7);
      position: relative;
      overflow: hidden;
      border: none;
      border-radius: 13px;
      color: #fff;
      padding: 14px;
      font-family: inherit;
      font-size: .95rem;
      font-weight: 700;
      cursor: pointer;
      transition: opacity .2s, transform .15s, box-shadow .2s;
      width: 100%;
      letter-spacing: .01em;
      box-shadow:
    0 15px 40px rgba(67, 183, 229, 0.35),
    inset 0 1px 0 rgba(255,255,255,.25);
    }

    .gate-enter-btn::after{
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
      background-size: 220% 100%;
      background-position: 120% 0;
      transition: background-position .6s ease;
      pointer-events: none;
    }

    .gate-enter-btn:hover {
      opacity: 1;
      transform: translateY(-2px);
      box-shadow:
    0 18px 46px rgba(67, 183, 229, 0.48),
    inset 0 1px 0 rgba(255,255,255,.3);
    }
    .gate-enter-btn:hover::after{
      background-position: -20% 0;
    }

    .gate-enter-btn:active {
      transform: translateY(0);
      opacity: 1
    }


    /* ── Forgot Password Modal & OTP Modal ── */
    #forgot-pw-modal {
      position: fixed;
      inset: 0;
      background: rgba(8, 12, 22, 0.88);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1100;
      backdrop-filter: blur(14px);
      padding: 1rem;
    }
    #forgot-pw-modal.show { display: flex }

    #otp-modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.38);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 650;
      backdrop-filter: blur(14px);
      padding: 1rem
    }
    #otp-modal.show { display: flex }
    .otp-card-wrap {
      max-width: 460px;
      width: 100%;
      padding: 0 0 1.8rem;
      overflow: hidden;
    }
    .otp-topbar {
      display: flex;
      align-items: center;
      gap: .65rem;
      padding: 1.2rem 1.7rem 1.05rem;
      position: relative;
    }
    .otp-topbar::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(79,142,255,.7) 50%, transparent);
      box-shadow: 0 0 12px 1px rgba(79,142,255,.6);
    }
    .otp-topbar-icon {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      background: linear-gradient(135deg,#3b82f6,#8b5cf6);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      flex-shrink: 0;
      box-shadow: 0 4px 14px rgba(79,142,255,.4);
    }
    .otp-topbar-label {
      font-size: .74rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(220,228,255,.85);
    }
    .otp-card-wrap .gate-header { padding: 0 1.7rem; text-align: center }
    .otp-card-wrap .gate-title { font-size: 1.55rem }
    .otp-subtitle {
      font-size: .82rem;
      color: rgba(255,255,255,.55);
      text-align: center;
      margin-top: .55rem;
      line-height: 1.55;
      letter-spacing: .01em
    }
    .otp-inputs-row {
      display: flex;
      gap: .65rem;
      justify-content: center;
      margin: 1.6rem 0 .5rem;
      padding: 0 1.7rem;
    }
    .otp-digit {
      width: 52px;
      height: 62px;
      border-radius: 12px;
      border: 1.5px solid rgba(79,142,255,.35);
      background: rgba(79,142,255,.06);
      color: #fff;
      font-size: 1.6rem;
      font-weight: 700;
      text-align: center;
      font-family: inherit;
      outline: none;
      transition: border-color .2s, box-shadow .2s, background .2s;
      caret-color: #8b5cf6
    }
    .otp-digit:focus {
      border-color: #4f8eff;
      background: rgba(79,142,255,.1);
      box-shadow: 0 0 0 4px rgba(79,142,255,.18), 0 0 16px rgba(139,92,246,.35)
    }
    .otp-digit.filled {
      border-color: rgba(139,92,246,.6);
      background: rgba(139,92,246,.12);
    }
    @keyframes shake {
      0%,100% { transform: translateX(0); }
      20%      { transform: translateX(-6px); }
      40%      { transform: translateX(6px); }
      60%      { transform: translateX(-4px); }
      80%      { transform: translateX(4px); }
    }
    .otp-err {
      font-size: .8rem;
      color: #ff5f57;
      text-align: center;
      min-height: 1.2rem
    }
    .otp-card-wrap .gate-btn-row { padding: 0 1.7rem }
    .otp-verify-btn { display: flex; align-items: center; justify-content: center; gap: .5rem }
    .otp-resend-row {
      display: flex;
      align-items: center;
      gap: .7rem;
      margin: 1.2rem 1.7rem 0;
    }
    .otp-divider-line { flex: 1; height: 1px; background: rgba(255,255,255,.12) }
    .otp-resend {
      display: flex;
      align-items: center;
      gap: .35rem;
      font-size: .78rem;
      color: #8ab4ff;
      font-weight: 600;
      white-space: nowrap;
      cursor: pointer;
    }
    #otp-timer {
      font-size: .78rem;
      color: #8b5cf6;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    @media (max-width: 400px) {
      .otp-inputs-row, .otp-card-wrap .gate-header, .otp-card-wrap .gate-btn-row, .otp-resend-row { padding-left: 1rem; padding-right: 1rem }
      .otp-digit { width: 42px; height: 52px; font-size: 1.3rem }
      .otp-inputs-row { gap: .4rem }
    }
    .otp-secure-note {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .4rem;
      font-size: .74rem;
      color: rgba(255,255,255,.4);
      margin-top: 1.1rem;
    }
    .otp-resend span {
      color: #a855f7;
      cursor: pointer;
      text-decoration: underline
    }

    /* ── Checkpoint card theming (CSS variables cascade to all children) ── */
    .emp-theme {
      --cp-accent: #3b82f6;
      --cp-accent2: #8b5cf6;
      --cp-accent-text: #93b8f0;
      --cp-accent-soft: rgba(59,130,246,.35);
      --cp-accent-bg: rgba(59,130,246,.1);
      --cp-accent-bg-hover: rgba(59,130,246,.18);
      --cp-avatar-bg: radial-gradient(circle at top, rgba(59,130,246,.42), rgba(15,31,77,.25));
      --cp-header-bg: linear-gradient(135deg, #0f1f3d 0%, #162952 100%);
    }
    .js-theme {
      --cp-accent: #3b82f6;
      --cp-accent2: #8b5cf6;
      --cp-accent-text: #a9bdf5;
      --cp-accent-soft: rgba(139,92,246,.35);
      --cp-accent-bg: rgba(59,130,246,.1);
      --cp-accent-bg-hover: rgba(139,92,246,.18);
      --cp-avatar-bg: radial-gradient(circle at top, rgba(139,92,246,.4), rgba(15,31,77,.25));
      --cp-header-bg: linear-gradient(135deg, #131a3d 0%, #241854 100%);
    }

    /* ── Profile modal theme (blue + purple glass, same recipe as the
         security checkpoint card above) — used for both Employee & Job
         Seeker "My Profile" / "Edit Profile" panels ── */
    .pp-theme {
      --cp-accent: #4f7ff0;
      --cp-accent2: #9b6bff;
      --cp-accent-text: #a9bdf5;
      --cp-accent-soft: rgba(139,92,246,.4);
      --cp-accent-bg: rgba(59,130,246,.1);
      --cp-accent-bg-hover: rgba(139,92,246,.18);
      --cp-avatar-bg: radial-gradient(circle at top, rgba(139,92,246,.45), rgba(15,31,77,.25));
      --cp-header-bg: linear-gradient(135deg, #0b0e26 0%, #0f1230 100%);
      --pf-card-bg: #10142c;
      --pf-card-bg-hover: #161a38;
      --pf-card-border: rgba(130,120,220,.3);
      --pf-icon-bg: linear-gradient(145deg, #6e5cd8, #4a3aa8);
      --pf-icon-border: rgba(180,170,255,.3);
      --pf-icon-color: #ffffff;
    }

    .emp-theme .gate-enter-btn, .js-theme .gate-enter-btn {
      background: linear-gradient(90deg, var(--cp-accent), var(--cp-accent2)) !important;
      box-shadow: 0 15px 38px var(--cp-accent-soft), inset 0 1px 0 rgba(255,255,255,.25) !important;
    }
    .emp-theme .gate-enter-btn:hover, .js-theme .gate-enter-btn:hover {
      box-shadow: 0 18px 46px var(--cp-accent-soft), inset 0 1px 0 rgba(255,255,255,.3) !important;
    }

    .id-card { background: var(--cp-accent-bg); border-color: var(--cp-accent-soft) }
    .id-avatar { border-color: var(--cp-accent-soft); box-shadow: 0 0 0 5px var(--cp-accent-bg), 0 8px 18px rgba(0,0,0,.35) }

    .emp-field-row {
      display: flex;
      flex-direction: column;
      gap: .15rem;
      padding: .5rem .6rem;
      border-radius: 10px;
      background: var(--cp-accent-bg);
      border: 1px solid var(--cp-accent-soft);
    }
    .emp-field-label {
      font-size: .6rem;
      color: var(--cp-accent-text);
      text-transform: uppercase;
      letter-spacing: .09em;
      opacity: .85
    }
    .emp-field-val {
      font-size: .84rem;
      color: rgba(255,255,255,.94);
      font-weight: 600
    }
    .emp-access-level, .js-access-level {
      color: #fff;
      font-weight: 700;
      background: linear-gradient(90deg, var(--cp-accent), var(--cp-accent2));
      border: none;
      border-radius: 20px;
      padding: 2px 11px;
      font-size: .72rem;
      letter-spacing: .03em;
      display: inline-block
    }

    /* ── Checkpoint card header strip ── */
    .emp-card-header-strip, .js-card-header-strip {
      background: var(--cp-header-bg);
      border-radius: 16px 16px 0 0;
      padding: 16px 20px 14px;
      margin: -24px -24px 18px -24px;
      border-bottom: 1px solid var(--cp-accent-soft);
      position: relative;
      overflow: hidden;
    }
    .emp-card-header-strip::after, .js-card-header-strip::after{
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 85% -10%, var(--cp-accent-bg-hover), transparent 60%);
      pointer-events: none;
    }
    .cp-header-icon {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      background: var(--cp-accent-bg);
      border: 1px solid var(--cp-accent-soft);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: .8rem;
      flex-shrink: 0;
      box-shadow: 0 0 10px var(--cp-accent-bg-hover);
    }
    .emp-portal-label, .js-portal-label {
      font-size: .6rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--cp-accent-text);
      font-weight: 600;
      margin-bottom: 3px;
      display: flex;
      align-items: center;
      gap: 6px;
      position: relative;
      z-index: 1;
    }
    .emp-card-title, .js-card-title {
      font-size: 1.1rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: -.01em;
      line-height: 1.2;
      position: relative;
      z-index: 1;
    }
    .emp-hologram, .js-hologram {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1.5px dashed var(--cp-accent-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      flex-shrink: 0;
      background: var(--cp-accent-bg);
      animation: cpHoloSpin 6s linear infinite;
    }
    @keyframes cpHoloSpin{ to{ transform: rotate(360deg) } }

    .js-logo-color { color: var(--cp-accent-text) !important }
    .js-title-color { color: #fff }
    .js-label { color: var(--cp-accent-text) }
    .js-badge-color { color: var(--cp-accent-text) !important }

    /* ── Shared card profile row ── */
    .card-profile-row {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: .9rem
    }
    .card-name-block { flex: 1; min-width: 0 }


    /* Fade */
    #fade {
      position: fixed;
      inset: 0;
      background: #000;
      opacity: 0;
      pointer-events: none;
      z-index: 200;
      transition: opacity .5s
    }

    #fade.in {
      opacity: 1;
      pointer-events: all
    }

    /* Name labels */
    #labels {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 50;
      overflow: hidden
    }

    .name-label {
      position: absolute;
      transform: translate(-50%, -100%);
      background: rgba(13, 17, 23, .88);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 20px;
      padding: .2rem .6rem;
      font-size: .7rem;
      font-weight: 500;
      color: #fff;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: .3rem;
      backdrop-filter: blur(6px)
    }

    .nl-status {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0
    }

    .nl-emoji {
      font-size: .8rem
    }

    /* Toast */
    #toast-wrap {
      position: fixed;
      bottom: 90px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      gap: .4rem;
      align-items: center;
      z-index: 300;
      pointer-events: none
    }

    .toast {
      background: rgba(13, 17, 23, .96);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: .55rem 1rem;
      font-size: .82rem;
      color: var(--text);
      animation: tIn .3s ease, tOut .3s ease 2.5s forwards
    }

    @keyframes tIn {
      from {
        opacity: 0;
        transform: translateY(10px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes tOut {
      to {
        opacity: 0
      }
    }

    /* Status colours */
    .s-available {
      background: #3ecf8e
    }

    .s-busy,
    .s-dnd {
      background: #ff5f57
    }

    .s-away {
      background: #ffc53d
    }

    /* Mobile */
    #mc {
      position: absolute;
      bottom: 90px;
      left: 16px;
      display: none;
      flex-direction: column;
      gap: .3rem;
      pointer-events: all
    }

    @media(max-width:768px) {
      #mc {
        display: flex
      }

      #controls-hint {
        display: none
      }
    }

    .mc-row {
      display: flex;
      justify-content: center;
      gap: .3rem
    }

    .mc-btn {
      width: 46px;
      height: 46px;
      background: rgba(13, 17, 23, .82);
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--text);
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
      touch-action: manipulation
    }

    .mc-btn:active {
      background: rgba(79, 142, 255, .3);
      border-color: var(--accent)
    }

    /* MINIMAP */
    #minimap-wrap {
      position: absolute;
      bottom: 16px;
      left: 16px;
      background: rgba(13, 17, 23, .88);
      border: 1px solid rgba(79, 142, 255, .35);
      border-radius: 12px;
      overflow: hidden;
      pointer-events: all;
      backdrop-filter: blur(12px);
      transition: all .25s;
      box-shadow: 0 4px 20px rgba(0, 0, 0, .4);
      z-index: 10
    }

    #minimap-wrap:hover {
      border-color: rgba(79, 142, 255, .7)
    }

    #minimap-title {
      font-size: .7rem;
      font-weight: 600;
      color: var(--text2);
      padding: .35rem .6rem .1rem;
      letter-spacing: .04em;
      display: flex;
      align-items: center;
      gap: .3rem
    }

    #minimap {
      display: block;
      cursor: default
    }

    #minimap-legend {
      display: flex;
      flex-wrap: wrap;
      gap: .18rem .55rem;
      padding: .25rem .6rem .4rem;
      border-top: 1px solid var(--border)
    }

    .ml-row {
      display: flex;
      align-items: center;
      gap: .28rem;
      font-size: .62rem;
      color: var(--text2)
    }

    .ml-dot {
      width: 7px;
      height: 7px;
      border-radius: 2px;
      flex-shrink: 0
    }

    @media(max-width:768px) {
      #minimap-wrap {
        bottom: 200px
      }
    }

    /* Video call styling moved to unified HUD stack */

    #video-call-panel {
      position: absolute;
      bottom: 178px;
      right: 16px;
      width: 300px;
      background: rgba(13, 17, 23, .96);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      pointer-events: all;
      backdrop-filter: blur(14px);
      transform: translateX(340px);
      transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
      max-height: 380px;
      z-index: 100;
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    }
    #video-call-panel.open {
      transform: translateX(0);
    }

    .vcp-header {
      padding: .8rem 1.2rem;
      font-size: .9rem;
      font-weight: 600;
      color: var(--text);
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    #vcp-list {
      max-height: 300px;
      overflow-y: auto;
      padding: 0.5rem 0;
    }
    
    .vcp-player {
      display: flex;
      align-items: center;
      padding: 0.6rem 1rem;
      border-bottom: 1px solid rgba(255,255,255,0.02);
      transition: background 0.2s;
    }
    .vcp-player:hover {
      background: rgba(255,255,255,0.04);
    }
    
    .vcp-avi {
      font-size: 1.3rem;
      margin-right: 0.8rem;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--surface2);
      border-radius: 50%;
    }
    
    .vcp-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    
    .vcp-name {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .vcp-role {
      font-size: 0.72rem;
      color: var(--text2);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .vcp-call-btn {
      background: #4f8eff;
      color: #fff;
      border: none;
      padding: 0.35rem 0.7rem;
      border-radius: 6px;
      font-size: 0.75rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
    }
    .vcp-call-btn:hover {
      background: #3b7ae6;
    }
    
    .vcp-empty {
      padding: 2rem 1rem;
      text-align: center;
      color: var(--text2);
      font-size: 0.8rem;
    }

    /* Call Dialog Popups */
    .call-popup {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translate(-50%, 150%);
      width: 320px;
      background: rgba(22, 27, 34, 0.98);
      border: 1.5px solid #4f8eff;
      border-radius: 16px;
      padding: 1.2rem;
      box-shadow: 0 12px 40px rgba(0,0,0,0.6);
      z-index: 2000;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      pointer-events: all;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .call-popup.show {
      transform: translate(-50%, 0);
    }
    
    .call-popup-content {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    
    .call-popup-icon {
      font-size: 1.8rem;
      width: 48px;
      height: 48px;
      background: rgba(79, 142, 255, 0.15);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .call-popup-icon.ring-animate {
      animation: callPulse 1.2s infinite;
    }
    
    .call-popup-details {
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
      color: var(--text);
    }
    
    .call-popup-details strong {
      font-size: 0.95rem;
      font-weight: 600;
    }
    
    .call-popup-details span {
      font-size: 0.78rem;
      color: var(--text2);
    }
    
    .call-popup-actions {
      display: flex;
      gap: 0.75rem;
    }
    
    .call-btn {
      flex: 1;
      padding: 0.6rem;
      border: none;
      border-radius: 8px;
      font-size: 0.82rem;
      font-weight: 600;
      cursor: pointer;
      transition: filter 0.2s;
    }
    .call-btn:hover {
      filter: brightness(1.1);
    }
    
    .call-btn.accept {
      background: #10b981;
      color: white;
    }
    
    .call-btn.decline {
      background: #ef4444;
      color: white;
    }
    
    @keyframes callPulse {
      0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(79, 142, 255, 0.4); }
      70% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(79, 142, 255, 0); }
      100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(79, 142, 255, 0); }
    }

    /* ── RECRUITMENT PANELS ─────────────────────────── */
    .recruit-panel {
      position: fixed; top: 50%;
      width: 248px; max-height: 66vh; overflow: hidden;
      background: linear-gradient(160deg, rgba(15,23,42,0.62), rgba(8,14,26,0.72));
      backdrop-filter: blur(22px) saturate(115%);
      border: 1px solid rgba(120,190,225,0.16); border-radius: 18px;
      display: flex; flex-direction: column;
      color: #f8fafc; font-family: inherit;
      box-shadow: 0 8px 26px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,.05);
      z-index: 70;
      opacity: 0; pointer-events: none;
      transition: opacity .38s ease, transform .38s cubic-bezier(.2,.8,.2,1);
    }
    .recruit-panel.show { opacity: 1; pointer-events: all; }
    .recruit-panel-left  { left: 14px;  transform: translateY(-50%) translateX(-16px); }
    .recruit-panel-right { right: 14px; transform: translateY(-50%) translateX(16px); }
    .recruit-panel-left.show, .recruit-panel-right.show { transform: translateY(-50%) translateX(0); }
    .rp-header {
      padding: 13px 15px 10px; font-size: .82rem; font-weight: 700;
      letter-spacing: .05em; border-bottom: 1px solid rgba(34,211,238,0.18);
      color: #7dd3fc; display: flex; align-items: center; gap: 8px; flex-shrink: 0;
      background: linear-gradient(90deg, rgba(34,211,238,.08), transparent 70%);
      border-radius: 16px 16px 0 0;
    }
    .rp-search { padding: 9px 11px 5px; flex-shrink: 0; }
    .rp-search input {
      width: 100%; box-sizing: border-box; padding: 7px 10px;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(37,99,235,0.28);
      border-radius: 8px; color: #f8fafc; font-size: .77rem;
      outline: none; transition: border-color .2s;
    }
    .rp-search input:focus { border-color: #2563eb; }
    .rp-search input::placeholder { color: #475569; }
    .rp-filters { padding: 0 11px 7px; display: flex; gap: 5px; flex-wrap: wrap; flex-shrink: 0; }
    .rf-btn {
      padding: 3px 9px; border-radius: 20px; font-size: .7rem; font-weight: 600;
      border: 1px solid rgba(37,99,235,0.35); background: transparent;
      color: #94a3b8; cursor: pointer; transition: all .2s;
    }
    .rf-btn.active, .rf-btn:hover { background: #2563eb; color: #fff; border-color: #2563eb; }
    .rp-list { overflow-y: auto; padding: 3px 7px 7px; flex: 1; min-height: 0; }
    .rp-list::-webkit-scrollbar { width: 3px; }
    .rp-list::-webkit-scrollbar-thumb { background: rgba(37,99,235,0.38); border-radius: 4px; }
    .rec-company-card {
      padding: 9px 11px; border-radius: 9px; margin-bottom: 5px;
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
      cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 9px;
    }
    .rec-company-card:hover { background: rgba(37,99,235,0.16); border-color: rgba(37,99,235,0.45); }
    .rec-company-logo {
      width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: .72rem; font-weight: 800; color: #fff;
    }
    .rec-company-info { flex: 1; min-width: 0; }
    .rec-company-name { font-size: .8rem; font-weight: 600; color: #f1f5f9; }
    .rec-company-meta { font-size: .68rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rec-company-badge {
      font-size: .63rem; background: rgba(37,99,235,0.28); color: #93c5fd;
      padding: 2px 6px; border-radius: 9px; white-space: nowrap; flex-shrink: 0;
    }
    .rh-tabs { display: flex; padding: 7px 11px 0; gap: 3px; flex-shrink: 0; }
    .rh-tab {
      flex: 1; padding: 5px 3px; font-size: .7rem; font-weight: 600;
      border: none; background: transparent; color: #64748b; cursor: pointer;
      border-bottom: 2px solid transparent; transition: all .2s;
    }
    .rh-tab.active { color: #3b82f6; border-bottom-color: #3b82f6; }
    #rh-content { padding: 11px; overflow-y: auto; flex: 1; min-height: 0; }
    #rh-content::-webkit-scrollbar { width: 3px; }
    #rh-content::-webkit-scrollbar-thumb { background: rgba(37,99,235,0.38); border-radius: 4px; }
    .rh-upload-zone {
      border: 2px dashed rgba(37,99,235,0.38); border-radius: 11px;
      padding: 18px 10px; text-align: center; cursor: pointer;
      transition: all .2s; margin-bottom: 10px;
    }
    .rh-upload-zone:hover { border-color: #2563eb; background: rgba(37,99,235,0.07); }
    .rh-upload-icon { font-size: 1.6rem; margin-bottom: 5px; }
    .rh-upload-text { font-size: .73rem; color: #94a3b8; }
    .rh-upload-text strong { color: #3b82f6; }
    .rh-resume-name {
      padding: 7px 9px; background: rgba(34,197,94,0.11);
      border: 1px solid rgba(34,197,94,0.28); border-radius: 7px;
      font-size: .73rem; color: #86efac; margin-bottom: 9px;
      display: flex; align-items: center; gap: 5px;
    }
    .rh-app-row {
      padding: 8px 9px; border-radius: 8px; margin-bottom: 5px;
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    }
    .rh-app-title { font-size: .77rem; font-weight: 600; color: #f1f5f9; }
    .rh-app-company { font-size: .68rem; color: #94a3b8; }
    .rh-app-status {
      display: inline-block; margin-top: 3px; font-size: .64rem; font-weight: 700;
      padding: 2px 7px; border-radius: 9px;
    }
    .rh-app-status.pending { background: rgba(245,158,11,0.18); color: #fbbf24; }
    .rh-app-status.reviewed { background: rgba(59,130,246,0.18); color: #93c5fd; }
    .rh-app-status.interview { background: rgba(20,184,166,0.18); color: #2dd4bf; }

    /* ── Company Explorer & Candidate Hub — refined cards + entrance animation ── */
    @keyframes cardIn { from { opacity: 0; transform: translateY(9px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
    .rec-company-card { animation: cardIn .42s cubic-bezier(.16,1,.3,1) backwards; position: relative; overflow: hidden; }
    .rec-company-card::before {
      content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
      background: linear-gradient(#3b82f6, #14b8a6); opacity: 0; transform: scaleY(.3);
      transition: opacity .22s, transform .22s; border-radius: 3px;
    }
    .rec-company-card:hover::before { opacity: 1; transform: scaleY(1); }
    .rec-company-card:nth-child(1){animation-delay:.02s} .rec-company-card:nth-child(2){animation-delay:.06s}
    .rec-company-card:nth-child(3){animation-delay:.10s} .rec-company-card:nth-child(4){animation-delay:.14s}
    .rec-company-card:nth-child(5){animation-delay:.18s} .rec-company-card:nth-child(6){animation-delay:.22s}
    .rec-company-card:nth-child(7){animation-delay:.26s} .rec-company-card:nth-child(8){animation-delay:.30s}
    .rec-company-logo { position: relative; box-shadow: 0 2px 8px rgba(0,0,0,.35); overflow: hidden; }
    .rec-company-logo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.30), transparent 55%); }
    .rec-company-badge {
      background: rgba(34,197,94,0.16); color: #6ee7a8; border: 1px solid rgba(34,197,94,0.32);
      font-weight: 700; display: inline-flex; align-items: center; gap: 4px;
    }
    .rec-company-badge::before {
      content: ''; width: 5px; height: 5px; border-radius: 50%; background: #22c55e;
      box-shadow: 0 0 6px #22c55e; animation: badgePulse 1.8s ease-in-out infinite;
    }
    @keyframes badgePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
    .rp-header svg { filter: drop-shadow(0 0 4px rgba(59,130,246,.5)); }
    /* Candidate Hub — tab + upload animation */
    .rh-tab { position: relative; border-radius: 7px 7px 0 0; }
    .rh-tab:hover { color: #93c5fd; background: rgba(59,130,246,.07); }
    .rh-upload-zone { animation: cardIn .35s cubic-bezier(.16,1,.3,1) backwards; }
    .rh-upload-zone:hover .rh-upload-icon { transform: translateY(-3px) scale(1.05); }
    .rh-upload-icon { transition: transform .25s cubic-bezier(.16,1,.3,1); display: inline-block; }
    .rh-resume-name { animation: cardIn .35s cubic-bezier(.16,1,.3,1) backwards; }
    .rh-app-row { animation: cardIn .35s cubic-bezier(.16,1,.3,1) backwards; }
    .rh-app-row:nth-child(2){animation-delay:.05s} .rh-app-row:nth-child(3){animation-delay:.1s}
    .rh-app-row:nth-child(4){animation-delay:.15s} .rh-app-row:nth-child(5){animation-delay:.2s}

    /* ── REGISTERED COMPANY JOB BOARD (full-board UI, matches reference) ── */
    .jb-overlay {
      position: fixed; inset: 0; background: rgba(2,8,20,0.74); backdrop-filter: blur(6px);
      z-index: 240; display: none; align-items: center; justify-content: center; pointer-events: none;
    }
    .jb-overlay.show { display: flex; pointer-events: all; }
    .jb-panel {
      position: relative; width: min(1120px, 95vw); height: min(700px, 90vh);
      background: linear-gradient(160deg, #17284c 0%, #0e1b38 100%);
      border: 2px solid #22d3ee; border-radius: 22px;
      box-shadow: 0 0 44px rgba(34,211,238,0.5), inset 0 0 70px rgba(8,145,178,0.16);
      padding: 64px 24px 24px; display: flex; flex-direction: column;
      animation: jbIn .32s cubic-bezier(.16,1,.3,1);
    }
    @keyframes jbIn { from { opacity: 0; transform: scale(.94) translateY(14px); } to { opacity: 1; transform: none; } }
    .jb-titlebar {
      position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
      width: 80%; padding: 13px 30px 16px; border-radius: 16px;
      background: linear-gradient(180deg, #34e7f0, #0891b2);
      box-shadow: 0 10px 34px rgba(34,211,238,0.55); text-align: center;
      animation: jbTitleGlow 3.5s ease-in-out infinite;
    }
    @keyframes jbTitleGlow { 0%,100% { box-shadow: 0 10px 34px rgba(34,211,238,0.45); } 50% { box-shadow: 0 10px 46px rgba(34,211,238,0.8); } }
    .jb-title { font-size: 1.55rem; font-weight: 900; letter-spacing: .04em; color: #fff; line-height: 1.06; text-shadow: 0 2px 6px rgba(0,0,0,.35); }
    .jb-subtitle { display: block; font-size: 1.12rem; }
    .jb-clock { position: absolute; right: 24px; bottom: 9px; font-weight: 800; color: #e6fbff; font-size: .82rem; letter-spacing: .03em; }
    .jb-body { flex: 1; display: flex; gap: 22px; min-height: 0; }
    .jb-companies { width: 300px; flex-shrink: 0; overflow-y: auto; padding: 4px 8px 4px 2px; display: flex; flex-direction: column; gap: 12px; }
    .jb-company {
      display: flex; align-items: center; gap: 14px; padding: 12px 16px;
      border-radius: 12px; border: 2px solid rgba(255,255,255,.14);
      cursor: pointer; color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: .03em;
      transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s, border-color .2s; text-align: left;
      animation: jbCoIn .4s cubic-bezier(.16,1,.3,1) backwards;
    }
    @keyframes jbCoIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
    .jb-company:nth-child(1){animation-delay:.04s} .jb-company:nth-child(2){animation-delay:.10s}
    .jb-company:nth-child(3){animation-delay:.16s} .jb-company:nth-child(4){animation-delay:.22s}
    .jb-company:nth-child(5){animation-delay:.28s} .jb-company:nth-child(6){animation-delay:.34s}
    .jb-company:hover { transform: translateX(4px); border-color: rgba(255,255,255,.4); }
    .jb-company.active { border-color: #f5c451 !important; background: rgba(245,196,81,.14) !important; animation: jbActiveGlow 1.8s ease-in-out infinite; }
    @keyframes jbActiveGlow { 0%,100% { box-shadow: 0 0 14px rgba(245,196,81,.5); } 50% { box-shadow: 0 0 28px rgba(245,196,81,.9); } }
    .jb-company-logo { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .82rem; color: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.45); }
    .jb-openings {
      flex: 1; min-width: 0; border: 2px solid rgba(34,211,238,.55); border-radius: 16px;
      background: rgba(10,22,45,.55); box-shadow: inset 0 0 28px rgba(34,211,238,.16);
      padding: 18px 20px; display: flex; flex-direction: column; min-height: 0;
    }
    .jb-openings-title { text-align: center; font-weight: 800; font-size: 1.25rem; color: #fff; letter-spacing: .05em; margin-bottom: 14px; flex-shrink: 0; }
    .jb-openings-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 6px; }
    .jb-job {
      display: flex; align-items: center; gap: 14px; padding: 11px 14px;
      background: rgba(255,255,255,.96); border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.3);
      animation: jbJobIn .42s cubic-bezier(.16,1,.3,1) backwards;
    }
    @keyframes jbJobIn { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
    .jb-job-logo { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: .78rem; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
    .jb-job-info { flex: 1; min-width: 0; }
    .jb-job-title { font-weight: 800; color: #0f172a; font-size: .98rem; }
    .jb-job-meta { color: #475569; font-size: .76rem; margin-top: 2px; }
    .jb-apply {
      flex-shrink: 0; padding: 8px 20px; border-radius: 8px; border: none;
      background: linear-gradient(180deg, #3b82f6, #2563eb); color: #fff; font-weight: 800; font-size: .82rem;
      cursor: pointer; letter-spacing: .06em; transition: transform .18s, box-shadow .18s;
    }
    .jb-apply:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(37,99,235,.55); }
    .jb-loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: #cbd5e1; }
    .jb-orb { width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #7dd3fc, #2563eb 72%); box-shadow: 0 0 26px rgba(59,130,246,.75); animation: jbOrb 1s ease-in-out infinite; }
    @keyframes jbOrb { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-12px) scale(1.08); } }
    .jb-loading-text { font-size: .95rem; font-weight: 600; letter-spacing: .02em; }
    .jb-close { position: absolute; top: 14px; right: 18px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,.1); color: #cbd5e1; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; z-index: 3; }
    .jb-close:hover { background: rgba(255,255,255,.2); color: #fff; }
    .jb-companies::-webkit-scrollbar, .jb-openings-list::-webkit-scrollbar { width: 5px; }
    .jb-companies::-webkit-scrollbar-thumb, .jb-openings-list::-webkit-scrollbar-thumb { background: rgba(34,211,238,.5); border-radius: 6px; }
    /* ── job board — professional refinements ── */
    .jb-company-name { flex: 1; }
    .jb-company-count {
      flex-shrink: 0; font-size: .76rem; font-weight: 800; color: #0b1220;
      background: #e2e8f0; border-radius: 7px; min-width: 24px; text-align: center; padding: 2px 8px;
    }
    .jb-company.active .jb-company-count { background: #f5c451; }
    .jb-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #22c55e; display: inline-block; margin-right: 6px; vertical-align: middle; animation: badgePulse 1.4s ease-in-out infinite; }
    .jb-job { position: relative; overflow: hidden; padding: 11px 14px 11px 20px; align-items: stretch; transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s; }
    .jb-job::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--cc, #3b82f6); }
    .jb-job:hover { transform: translateY(-2px); box-shadow: 0 11px 28px rgba(0,0,0,.42); }
    .jb-job-logo { align-self: center; }
    .jb-job-meta { display: flex; flex-wrap: wrap; gap: 3px 13px; align-items: center; }
    .jb-job-sal { color: #16a34a; font-weight: 800; }
    .jb-skills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
    .jb-skill { font-size: .65rem; font-weight: 600; color: #1e3a8a; background: #dbeafe; border-radius: 5px; padding: 2px 7px; }
    .jb-job-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 7px; flex-shrink: 0; }
    .jb-deadline { font-size: .64rem; color: #b45309; font-weight: 700; white-space: nowrap; }
    .jb-foot { flex-shrink: 0; text-align: center; padding-top: 12px; margin-top: 6px; font-size: .74rem; color: #7d93b8; letter-spacing: .03em; border-top: 1px solid rgba(34,211,238,.16); }

    .cdm-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(5px);
      z-index: 250; display: none; align-items: center; justify-content: center;
      pointer-events: none;
    }
    .cdm-overlay.show { display: flex; pointer-events: all; }
    .cdm-panel-wrap { position: relative; }
    .cdm-panel {
      width: 540px; max-height: 78vh; overflow-y: auto; overflow-x: hidden;
      background: #0f172a; border: 1px solid rgba(37,99,235,0.38); border-radius: 16px;
      color: #f8fafc; box-shadow: 0 20px 60px rgba(0,0,0,0.7);
      animation: cdmIn .22s ease;
    }
    .cdm-panel::-webkit-scrollbar { width: 4px; }
    .cdm-panel::-webkit-scrollbar-thumb { background: rgba(37,99,235,0.38); border-radius: 4px; }
    @keyframes cdmIn {
      from { opacity: 0; transform: scale(.93) translateY(14px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }
    .cdm-hero {
      padding: 26px 26px 18px; border-bottom: 1px solid rgba(255,255,255,0.07);
      display: flex; align-items: flex-start; gap: 14px;
    }
    .cdm-logo {
      width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; font-weight: 900; color: #fff;
    }
    .cdm-company-name { font-size: 1.2rem; font-weight: 700; color: #f1f5f9; margin: 0 0 3px; }
    .cdm-tagline { font-size: .76rem; color: #64748b; margin: 0 0 9px; line-height: 1.4; }
    .cdm-meta { display: flex; gap: 8px; flex-wrap: wrap; }
    .cdm-meta-chip { font-size: .68rem; padding: 3px 9px; border-radius: 20px; background: rgba(255,255,255,0.06); color: #cbd5e1; }
    .cdm-body { padding: 18px 26px; }
    .cdm-section-title {
      font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: #64748b;
      text-transform: uppercase; margin: 0 0 11px;
    }
    .cdm-role-card {
      padding: 13px 14px; border-radius: 11px; margin-bottom: 9px;
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
      transition: border-color .2s;
    }
    .cdm-role-card:hover { border-color: rgba(37,99,235,0.45); }
    .cdm-role-title { font-size: .88rem; font-weight: 600; color: #f1f5f9; margin: 0 0 5px; }
    .cdm-role-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
    .cdm-role-salary { font-size: .76rem; color: #22c55e; font-weight: 600; }
    .cdm-role-exp { font-size: .76rem; color: #94a3b8; }
    .cdm-role-deadline { font-size: .7rem; color: #f59e0b; }
    .cdm-skills { display: flex; gap: 5px; flex-wrap: wrap; }
    .cdm-skill-tag { font-size: .66rem; padding: 2px 8px; border-radius: 5px; background: rgba(37,99,235,0.18); color: #93c5fd; }
    .cdm-role-actions { display: flex; gap: 7px; margin-top: 11px; }
    .cdm-btn-apply {
      flex: 1; padding: 8px; border-radius: 8px; border: none;
      background: #2563eb; color: #fff; font-weight: 600; font-size: .78rem;
      cursor: pointer; transition: background .2s;
    }
    .cdm-btn-apply:hover { background: #1d4ed8; }
    .cdm-btn-schedule {
      padding: 8px 13px; border-radius: 8px; border: 1px solid rgba(20,184,166,0.38);
      background: transparent; color: #2dd4bf; font-size: .78rem; cursor: pointer; transition: all .2s;
    }
    .cdm-btn-schedule:hover { background: rgba(20,184,166,0.1); }
    .cdm-close {
      position: absolute; top: 14px; right: 16px;
      background: rgba(255,255,255,0.06); border: none; color: #94a3b8;
      width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
      display: flex; align-items: center; justify-content: center; font-size: .9rem;
      transition: all .2s; z-index: 5;
    }
    .cdm-close:hover { background: rgba(255,255,255,0.12); color: #f1f5f9; }
    .apply-panel {
      width: 460px; background: #0f172a; border: 1px solid rgba(37,99,235,0.38);
      border-radius: 16px; color: #f8fafc; padding: 26px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.7); animation: cdmIn .22s ease; position: relative;
    }
    .apply-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 3px; }
    .apply-subtitle { font-size: .75rem; color: #64748b; margin: 0 0 18px; }
    .apply-field { margin-bottom: 13px; }
    .apply-label { font-size: .73rem; color: #94a3b8; margin-bottom: 4px; display: block; }
    .apply-input {
      width: 100%; box-sizing: border-box; padding: 8px 11px;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(37,99,235,0.22);
      border-radius: 8px; color: #f8fafc; font-size: .8rem; outline: none;
      transition: border-color .2s; font-family: inherit;
    }
    .apply-input:focus { border-color: #2563eb; }
    .apply-textarea { min-height: 72px; resize: vertical; }
    .apply-actions { display: flex; gap: 9px; margin-top: 18px; }
    .apply-btn-submit {
      flex: 1; padding: 10px; border-radius: 9px; border: none;
      background: linear-gradient(135deg, #2563eb, #0ea5e9); color: #fff;
      font-weight: 700; font-size: .82rem; cursor: pointer; transition: opacity .2s;
    }
    .apply-btn-submit:hover { opacity: .88; }
    .apply-btn-cancel {
      padding: 10px 16px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.1);
      background: transparent; color: #94a3b8; font-size: .82rem; cursor: pointer;
    }
    .apply-btn-cancel:hover { color: #f1f5f9; }
    /* ── Premium polish: smooth hover & motion easing ── */
    .recruit-panel-left  { transform: translate(-14px, -50%); }
    .recruit-panel-right { transform: translate(14px, -50%); }
    .recruit-panel-left.show, .recruit-panel-right.show { transform: translate(0, -50%); }
    .recruit-panel { transition: opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1); }
    .rec-company-card { transition: transform .22s cubic-bezier(.16,1,.3,1), background .22s, border-color .22s, box-shadow .22s; }
    .rec-company-card:hover { transform: translateX(4px); box-shadow: 0 6px 20px rgba(37,99,235,.22); }
    .rec-company-logo { transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s; }
    .rec-company-card:hover .rec-company-logo { transform: scale(1.08); box-shadow: 0 0 14px rgba(37,99,235,.55); }
    .cdm-role-card { transition: transform .2s cubic-bezier(.16,1,.3,1), border-color .2s, box-shadow .2s; }
    .cdm-role-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
    .cdm-btn-apply, .cdm-btn-schedule, .apply-btn-submit, .rf-btn, .rh-tab, .rh-upload-zone, .rh-app-row { transition: all .2s cubic-bezier(.16,1,.3,1); }
    .cdm-btn-apply:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37,99,235,.45); }
    .apply-btn-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37,99,235,.4); }
    .rh-upload-zone:hover { transform: translateY(-1px); }
    .rh-app-row:hover { transform: translateX(3px); border-color: rgba(37,99,235,.4); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
    @keyframes uiShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
    .rp-header { background-image: linear-gradient(100deg, transparent 30%, rgba(59,130,246,.12) 50%, transparent 70%); background-size: 200% 100%; animation: uiShimmer 6s linear infinite; }

    /* ── TCS Experience Center — in-world interaction panel ── */
    #tcs-panel {
      --tcs-blue:#0a2c6e; --tcs-blue2:#1664c0; --tcs-cyan:#19b9e8; --tcs-dark:#06183d; --ok:#19c37d;
      position: fixed; inset: 0; z-index: 260; display: none; align-items: center; justify-content: center;
      background: rgba(3,12,32,.72); backdrop-filter: blur(6px);
    }
    #tcs-panel.show { display: flex; }
    #tcs-panel .card { width: min(740px,92vw); max-height: 85vh; overflow: auto; background: #fff; border-radius: 20px;
      box-shadow: 0 40px 100px rgba(2,10,30,.6); animation: tcsPop .28s cubic-bezier(.2,.8,.2,1); border: 1px solid rgba(255,255,255,.6); }
    @keyframes tcsPop { from { transform: scale(.93) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
    #tcs-panel .head { background: linear-gradient(125deg,var(--tcs-dark),var(--tcs-blue) 45%,var(--tcs-blue2)); color: #fff; padding: 24px 28px; border-radius: 20px 20px 0 0; position: relative; overflow: hidden; }
    #tcs-panel .head:after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle,rgba(25,185,232,.45),transparent 70%); }
    #tcs-panel .head h2 { font-size: 23px; font-weight: 800; position: relative; }
    #tcs-panel .head p { opacity: .9; font-size: 13px; margin-top: 5px; position: relative; }
    #tcs-panel .x { position: absolute; top: 18px; right: 20px; cursor: pointer; font-size: 20px; z-index: 2; background: rgba(255,255,255,.18); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: .15s; }
    #tcs-panel .x:hover { background: rgba(255,255,255,.35); transform: rotate(90deg); }
    #tcs-panel .body { padding: 26px 28px; color: #16294a; font-size: 14px; line-height: 1.65; }
    #tcs-panel .body h3 { color: var(--tcs-blue); margin: 18px 0 8px; font-size: 15px; }
    #tcs-panel .grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 14px; margin-top: 6px; }
    #tcs-panel .jobcard { border: 1px solid #e6ebf5; border-radius: 14px; padding: 16px; transition: .18s ease; cursor: pointer; background: linear-gradient(180deg,#fff,#f7faff); position: relative; overflow: hidden; }
    #tcs-panel .jobcard:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tcs-cyan); opacity: 0; transition: .18s; }
    #tcs-panel .jobcard:hover { border-color: var(--tcs-blue2); box-shadow: 0 12px 30px rgba(22,100,192,.20); transform: translateY(-3px); }
    #tcs-panel .jobcard:hover:before { opacity: 1; }
    #tcs-panel .jobcard h4 { color: var(--tcs-blue); font-size: 15px; font-weight: 700; }
    #tcs-panel .jobcard .meta { font-size: 12px; color: #5a6b88; margin-top: 7px; line-height: 1.75; }
    #tcs-panel .tag { display: inline-block; background: #eaf1fb; color: var(--tcs-blue2); border-radius: 6px; padding: 3px 9px; font-size: 11px; margin: 7px 6px 0 0; font-weight: 600; }
    #tcs-panel .open { color: var(--ok); font-weight: 700; }
    #tcs-panel .stat { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed #e3e9f4; }
    #tcs-panel .stat b { color: var(--tcs-blue); }
    #tcs-panel .bar { height: 8px; border-radius: 6px; background: #e9eef7; overflow: hidden; margin-top: 4px; }
    #tcs-panel .bar>i { display: block; height: 100%; background: linear-gradient(90deg,var(--tcs-blue2),var(--tcs-cyan)); }
    #tcs-panel .btn { display: inline-block; background: linear-gradient(135deg,var(--tcs-blue2),var(--tcs-blue)); color: #fff; border: none; border-radius: 10px; padding: 12px 22px; font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 14px; margin-right: 8px; transition: .16s; box-shadow: 0 6px 18px rgba(22,100,192,.28); }
    #tcs-panel .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(22,100,192,.4); }
    #tcs-panel .btn.ghost { background: #fff; color: var(--tcs-blue2); border: 1.5px solid var(--tcs-blue2); box-shadow: none; }
    #tcs-panel .btn.ghost:hover { background: #f3f8ff; }
    #tcs-panel .field { margin-top: 12px; }
    #tcs-panel .field label { display: block; font-size: 12px; color: #5a6b88; margin-bottom: 4px; }
    #tcs-panel .field input, #tcs-panel .field select, #tcs-panel .field textarea { width: 100%; padding: 10px 12px; border: 1px solid #d6deec; border-radius: 8px; font-size: 14px; }
    #tcs-panel .steps { display: flex; gap: 6px; margin: 6px 0 16px; }
    #tcs-panel .steps .s { flex: 1; height: 6px; border-radius: 6px; background: #e9eef7; }
    #tcs-panel .steps .s.on { background: var(--tcs-blue2); }
    #tcs-panel .success { text-align: center; padding: 20px; }
    #tcs-panel .success .check { width: 74px; height: 74px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 40px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; animation: tcsPop .4s; }
    #tcs-panel .chat { background: #f4f7fc; border-radius: 10px; padding: 14px; font-size: 13px; }
    #tcs-panel .chat .npc span { background: #fff; border: 1px solid #e3e9f4; padding: 8px 12px; border-radius: 12px 12px 12px 2px; display: inline-block; }
    #tcs-panel .qbtn { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid #dce3f0; border-radius: 10px; padding: 13px 15px; font-size: 13.5px; margin-top: 9px; cursor: pointer; color: var(--tcs-blue); font-weight: 600; transition: .15s; }
    #tcs-panel .qbtn:hover { border-color: var(--tcs-blue2); background: #f3f8ff; transform: translateX(3px); box-shadow: 0 4px 14px rgba(22,100,192,.12); }

    #rec-booth-prompt {
      position: fixed; bottom: 128px; left: 50%;
      background: linear-gradient(135deg, rgba(13,22,38,.9), rgba(8,14,26,.94));
      backdrop-filter: blur(12px);
      border: 1px solid rgba(34,211,238,0.4); border-radius: 12px;
      padding: 9px 18px; color: #f1f5f9; font-size: .82rem;
      display: flex; align-items: center; gap: 8px; z-index: 80; white-space: nowrap;
      box-shadow: 0 10px 34px rgba(0,0,0,.5), 0 0 18px rgba(34,211,238,.12);
      opacity: 0; pointer-events: none;
      transform: translateX(-50%) translateY(8px);
      transition: opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1);
    }
    #rec-booth-prompt.show { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); }
    #rec-booth-prompt .ep-key {
      background: rgba(34,211,238,0.16); border: 1px solid rgba(34,211,238,0.55);
      border-radius: 6px; padding: 1px 8px; font-weight: 800; color: #67e8f9;
      box-shadow: 0 0 10px rgba(34,211,238,.25), inset 0 -2px 0 rgba(34,211,238,.3);
      animation: epKeyPulse 1.6s ease-in-out infinite;
    }
    @keyframes epKeyPulse {
      0%, 100% { box-shadow: 0 0 8px rgba(34,211,238,.2), inset 0 -2px 0 rgba(34,211,238,.3); }
      50% { box-shadow: 0 0 16px rgba(34,211,238,.45), inset 0 -2px 0 rgba(34,211,238,.3); }
    }

    /* ── Grand Reception — proximity welcome popup (fades in near the desk) ── */
    #case-welcome {
      position: fixed; top: 84px; left: 50%; transform: translateX(-50%) translateY(-8px);
      display: flex; align-items: center; gap: 12px; z-index: 81; pointer-events: none;
      background: linear-gradient(135deg, rgba(13,22,38,.94), rgba(8,14,26,.96));
      border: 1px solid rgba(229,57,53,.45); border-radius: 14px; padding: 12px 20px;
      box-shadow: 0 14px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(93,183,255,.12) inset;
      opacity: 0; transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
      backdrop-filter: blur(10px);
    }
    #case-welcome.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    #case-welcome .cw-icon { font-size: 26px; filter: drop-shadow(0 0 6px rgba(229,57,53,.6)); }
    #case-welcome .cw-txt { display: flex; flex-direction: column; line-height: 1.3; }
    #case-welcome .cw-txt strong { color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .3px; }
    #case-welcome .cw-txt span { color: #9fc4e6; font-size: 11.5px; margin-top: 2px; }

    /* ── Case Studies & Client Experience Center — in-world panel ── */
    #case-panel {
      position: fixed; inset: 0; z-index: 260; display: none;
      align-items: center; justify-content: center;
      background: rgba(4, 8, 16, 0.62); backdrop-filter: blur(6px);
      font-family: 'Segoe UI', system-ui, sans-serif;
    }
    #case-panel.show { display: flex; animation: caseFade .2s ease; }
    @keyframes caseFade { from { opacity: 0; } to { opacity: 1; } }
    #case-panel .card {
      width: min(760px, 93vw); max-height: 86vh; overflow: auto;
      background: linear-gradient(160deg, rgba(13, 22, 38, 0.97), rgba(8, 14, 26, 0.98));
      border: 1px solid rgba(229, 57, 53, 0.4); border-radius: 18px;
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(229, 57, 53, 0.12) inset;
      animation: caseRise .26s cubic-bezier(.2,.8,.2,1);
    }
    @keyframes caseRise { from { transform: translateY(18px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
    #case-panel .head {
      position: relative; padding: 22px 26px;
      background: linear-gradient(120deg, #0b1430, #103a63 55%, #c62828);
      border-radius: 18px 18px 0 0; color: #fff;
    }
    #case-panel .head:after { content: ""; position: absolute; right: -30px; top: -30px; width: 150px; height: 150px; background: radial-gradient(circle, rgba(229,57,53,.4), transparent 70%); }
    #case-panel .head h2 { font-size: 22px; font-weight: 800; position: relative; letter-spacing: .3px; }
    #case-panel .head p { opacity: .9; font-size: 13px; margin-top: 5px; position: relative; }
    #case-panel .x { position: absolute; top: 16px; right: 18px; cursor: pointer; font-size: 20px; z-index: 2; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; background: rgba(255,255,255,.18); transition: .2s; }
    #case-panel .x:hover { background: rgba(255,255,255,.34); transform: rotate(90deg); }
    #case-panel .body { padding: 22px 26px; color: #cfe1f0; font-size: 14px; line-height: 1.65; }
    #case-panel .body h3 { color: #ff6b6b; margin: 18px 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .6px; }
    #case-panel .body b { color: #eaf4ff; }
    #case-panel .body ul { margin: 6px 0 6px 18px; } #case-panel .body li { margin: 3px 0; }
    #case-panel .case-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
    #case-panel .case-actions button {
      background: rgba(93, 183, 255, .1); color: #cfe7ff; border: 1px solid rgba(93, 183, 255, .4);
      border-radius: 99px; padding: 8px 16px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: .18s;
    }
    #case-panel .case-actions button:hover { background: linear-gradient(120deg, #103a63, #c62828); color: #fff; border-color: transparent; transform: translateY(-1px); }
    #case-panel .case-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 14px 0; }
    #case-panel .case-kpi { background: rgba(8, 20, 33, .7); border: 1px solid rgba(229, 57, 53, .3); border-radius: 12px; padding: 14px; text-align: center; }
    #case-panel .case-kpi strong { display: block; color: #ff6b6b; font-size: 24px; line-height: 1; }
    #case-panel .case-kpi span { display: block; color: #9fb6c7; font-size: 11px; margin-top: 7px; }
    #case-panel .case-diagram { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; }
    #case-panel .case-node { flex: 1; min-width: 90px; border: 1px solid rgba(93, 183, 255, .35); background: rgba(20, 45, 70, .7); border-radius: 10px; padding: 10px; text-align: center; font-size: 12px; color: #e7f6ff; }
    #case-panel .case-arrow { color: #ff6b6b; font-weight: 800; }
    #case-panel .case-chip { display: inline-block; background: rgba(53, 201, 230, .12); border: 1px solid rgba(53, 201, 230, .35); color: #bdeef7; border-radius: 99px; padding: 3px 11px; font-size: 12px; margin: 3px 4px 3px 0; }
    #case-panel .case-media { border: 1px solid rgba(229, 57, 53, .4); border-radius: 12px; padding: 16px; background: rgba(8, 17, 29, .8); margin: 14px 0; }
    #case-panel .case-progress { height: 8px; border-radius: 99px; background: rgba(148, 163, 184, .2); overflow: hidden; margin-top: 10px; }
    #case-panel .case-progress i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, #5db7ff, #e53935); animation: caseBar 2.2s linear infinite; }
    @keyframes caseBar { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
    /* ── Premium Vision & Mission popup (sidebar tabs + main + highlight cards + globe) ── */
    #case-panel.vm .card { width: min(1180px, 95vw); max-height: 90vh; padding: 0; overflow: hidden;
      border: 1px solid rgba(120, 180, 235, 0.35);
      background: linear-gradient(160deg, rgba(10, 18, 34, 0.985), rgba(6, 12, 24, 0.99));
      box-shadow: 0 36px 100px rgba(0,0,0,0.65), 0 0 70px rgba(229,57,53,0.14), 0 0 0 1px rgba(120,180,235,0.12) inset; }
    #case-panel.vm .head { display: none; }
    #case-panel.vm .body { padding: 0; }
    .case-vm { display: grid; grid-template-columns: 272px 1fr; min-height: 560px; position: relative; }
    .case-vm .vm-side { padding: 28px 22px; border-right: 1px solid rgba(120,180,235,0.14); display: flex; flex-direction: column; gap: 10px;
      background: linear-gradient(180deg, rgba(13,24,44,0.6), rgba(8,14,28,0.55)); }
    .case-vm .vm-tab { display: flex; align-items: center; gap: 14px; padding: 13px 15px; border-radius: 14px; cursor: pointer;
      color: #9fb6d0; border: 1px solid transparent; transition: .18s; font-size: 15px; font-weight: 600; }
    .case-vm .vm-tab .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; flex: 0 0 auto;
      background: rgba(53,150,230,0.10); border: 1px solid rgba(90,170,235,0.30); color: #7fd0ff; }
    .case-vm .vm-tab:hover { color: #dfeefc; }
    .case-vm .vm-tab.on { color: #eaf6ff; background: linear-gradient(120deg, rgba(20,60,110,0.55), rgba(40,90,150,0.28));
      border-color: rgba(120,200,255,0.5); box-shadow: 0 0 24px rgba(60,150,235,0.22), inset 0 0 0 1px rgba(120,200,255,0.18); }
    .case-vm .vm-tab.on .ic { background: rgba(60,170,255,0.20); color: #bfe6ff; border-color: rgba(120,200,255,0.5); }
    .case-vm .vm-quote { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(120,180,235,0.12); color: #9fb6d0; font-size: 13.5px; line-height: 1.5; }
    .case-vm .vm-quote b { display: block; color: #5db7ff; font-size: 30px; line-height: .4; }
    .case-vm .vm-main { padding: 38px 44px; position: relative; overflow: hidden; }
    .case-vm .vm-eye { color: #5db7ff; letter-spacing: 4px; font-size: 12px; font-weight: 700; position: relative; z-index: 2; }
    .case-vm .vm-eye:after { content: ""; display: block; width: 46px; height: 3px; background: linear-gradient(90deg, #e53935, #5db7ff); margin-top: 9px; border-radius: 2px; }
    .case-vm h1.vm-title { font-size: 52px; font-weight: 800; margin: 16px 0 8px; color: #eaf6ff; letter-spacing: .5px; position: relative; z-index: 2; }
    .case-vm .vm-sub { color: #b9cfe4; font-size: 18px; position: relative; z-index: 2; }
    .case-vm .vm-div { height: 1px; background: linear-gradient(90deg, rgba(120,180,235,0.45), rgba(120,180,235,0.04)); margin: 22px 0; position: relative; z-index: 2; }
    .case-vm .vm-div:after { content: ""; position: absolute; right: 32%; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: #7fd0ff; box-shadow: 0 0 10px #7fd0ff; }
    .case-vm .vm-body { color: #c4d6e8; font-size: 15.5px; line-height: 1.72; max-width: 760px; position: relative; z-index: 2; }
    .case-vm .vm-body b { color: #5db7ff; font-weight: 700; }
    .case-vm .vm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; max-width: 840px; position: relative; z-index: 2; }
    .case-vm .vm-card { border: 1px solid rgba(120,180,235,0.25); border-radius: 16px; padding: 24px 16px 22px; text-align: center;
      background: linear-gradient(180deg, rgba(22,44,76,0.42), rgba(12,24,44,0.5)); box-shadow: inset 0 1px 0 rgba(120,200,255,0.15); transition: .2s; }
    .case-vm .vm-card:hover { border-color: rgba(120,200,255,0.5); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.4), inset 0 1px 0 rgba(120,200,255,0.25); }
    .case-vm .vm-card .ci { font-size: 34px; }
    .case-vm .vm-card .cn { font-size: 22px; font-weight: 800; margin: 12px 0 6px; color: #ff5a4d; }
    .case-vm .vm-card .cs { font-size: 13px; color: #9fb6d0; line-height: 1.4; }
    .case-vm .vm-globe { position: absolute; right: -70px; top: -50px; width: 430px; height: 430px; opacity: .8; pointer-events: none; z-index: 1; }
    .case-vm .vm-x { position: absolute; top: 18px; right: 20px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(160,200,235,0.4);
      color: #cfe2f4; display: grid; place-items: center; cursor: pointer; background: rgba(255,255,255,0.05); z-index: 4; font-size: 17px; transition: .2s; }
    .case-vm .vm-x:hover { background: rgba(255,255,255,0.16); transform: rotate(90deg); }
    @media (max-width: 720px) { .case-vm { grid-template-columns: 1fr; } .case-vm .vm-side { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid rgba(120,180,235,0.14); } .case-vm .vm-quote { display: none; } .case-vm h1.vm-title { font-size: 40px; } .case-vm .vm-cards { grid-template-columns: 1fr; } }
    /* shared body components for the unified premium modal */
    .case-vm .vm-main { overflow-y: auto; max-height: 90vh; }
    .case-vm .vm-main::-webkit-scrollbar { width: 10px; }
    .case-vm .vm-main::-webkit-scrollbar-thumb { background: rgba(90,170,235,0.32); border-radius: 8px; }
    .case-vm .vm-main::-webkit-scrollbar-track { background: transparent; }
    .case-vm .vm-h3 { color: #55d6ff; font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase; margin: 22px 0 10px; font-weight: 700; position: relative; z-index: 2; }
    .case-vm .vm-body ul { margin: 4px 0 6px 2px; list-style: none; padding: 0; }
    .case-vm .vm-body li { position: relative; padding: 5px 0 5px 22px; color: #c4d6e8; font-size: 15px; }
    .case-vm .vm-body li:before { content: "▸"; position: absolute; left: 2px; color: #29b6f6; }
    .case-vm .vm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin: 10px 0; position: relative; z-index: 2; }
    .case-vm .vm-stat { border: 1px solid rgba(120,180,235,0.25); border-radius: 14px; padding: 16px; text-align: center; background: linear-gradient(180deg, rgba(22,44,76,0.4), rgba(12,24,44,0.5)); }
    .case-vm .vm-stat strong { display: block; font-size: 30px; font-weight: 800; color: #55d6ff; line-height: 1; }
    .case-vm .vm-stat span { display: block; font-size: 12px; color: #9fb6d0; margin-top: 8px; }
    .case-vm .vm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 8px 0; position: relative; z-index: 2; }
    .case-vm .vm-item { display: flex; gap: 14px; align-items: flex-start; border: 1px solid rgba(120,180,235,0.2); border-radius: 14px; padding: 15px 16px; background: linear-gradient(180deg, rgba(20,40,70,0.35), rgba(12,24,44,0.45)); transition: .18s; }
    .case-vm .vm-item:hover { border-color: rgba(120,200,255,0.45); transform: translateY(-1px); }
    .case-vm .vm-item .ii { font-size: 26px; flex: 0 0 auto; line-height: 1.2; }
    .case-vm .vm-item .it { font-size: 16px; font-weight: 700; color: #eaf6ff; }
    .case-vm .vm-item .id { font-size: 13px; color: #a7c0d8; margin-top: 3px; line-height: 1.5; }
    .case-vm .vm-chip { display: inline-block; background: rgba(53,201,230,0.12); border: 1px solid rgba(53,201,230,0.35); color: #bdeef7; border-radius: 99px; padding: 5px 13px; font-size: 12.5px; margin: 3px 6px 3px 0; }
    .case-vm .vm-flow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; position: relative; z-index: 2; }
    .case-vm .vm-step { border: 1px solid rgba(120,180,235,0.3); background: rgba(20,45,70,0.5); border-radius: 10px; padding: 9px 14px; font-size: 13px; color: #dbeeff; }
    .case-vm .vm-arrow { color: #e14b5a; font-weight: 800; }
    .case-vm .case-media { border: 1px solid rgba(120,180,235,0.3); border-radius: 14px; padding: 18px; background: rgba(10,22,40,0.7); margin: 12px 0; color: #cfe1f0; font-style: italic; position: relative; z-index: 2; }
    .case-vm .vm-body img.cs-hero { display: block; width: 100%; max-height: 300px; object-fit: cover; border-radius: 16px; border: 1px solid rgba(120,180,235,0.35); box-shadow: 0 14px 34px rgba(0,0,0,0.45); margin: 4px 0 6px; position: relative; z-index: 2; }
    .case-vm .vm-foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; position: relative; z-index: 2; }
    .case-vm .vm-btn { background: rgba(53,150,230,0.12); border: 1px solid rgba(90,170,235,0.45); color: #cfe7ff; border-radius: 99px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; transition: .18s; }
    .case-vm .vm-btn:hover { background: linear-gradient(120deg, #103a63, #29b6f6); color: #fff; border-color: transparent; transform: translateY(-1px); }
    .case-vm .vm-btn.red:hover { background: linear-gradient(120deg, #5a1622, #e14b5a); }

    /* ══════════ INTERACTIVE CAREER HUB / JOB BOARD ══════════ */
    /* Focused wall board — NOT a fullscreen page: the zoomed lobby stays visible around it. */
    .ch-overlay {
      position: fixed; inset: 0; z-index: 120; display: none;
      align-items: flex-start; justify-content: center; padding: 6vh 3vw 3vh;
      background: radial-gradient(135% 120% at 50% 30%, rgba(3,8,18,.10), rgba(2,5,12,.40));
      backdrop-filter: blur(1.5px);
      opacity: 0; transition: opacity .35s ease;
    }
    .ch-overlay.show { display: flex; opacity: 1; }
    .ch-frame {
      position: relative; width: min(1080px, 94vw); max-height: 84vh; overflow: hidden;
      display: flex; flex-direction: column;
      background: linear-gradient(165deg, rgba(9,17,34,.97) 0%, rgba(6,11,22,.97) 60%, rgba(4,8,16,.98) 100%);
      border: 1.5px solid rgba(34,211,238,.5); border-radius: 20px;
      box-shadow: 0 0 0 1px rgba(34,211,238,.14) inset, 0 30px 80px rgba(0,0,0,.62), 0 0 46px rgba(34,211,238,.26);
      color: #e6eefc; font-family: inherit;
      animation: ch-open .4s cubic-bezier(.16,1,.3,1), ch-border 4.5s ease-in-out infinite;
      padding: 20px 24px 14px;
    }
    @keyframes ch-open { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
    @keyframes ch-border {
      0%,100% { box-shadow: 0 0 0 1px rgba(34,211,238,.10) inset, 0 24px 70px rgba(0,0,0,.6), 0 0 26px rgba(34,211,238,.12); }
      50%     { box-shadow: 0 0 0 1px rgba(34,211,238,.18) inset, 0 24px 70px rgba(0,0,0,.6), 0 0 40px rgba(34,211,238,.22); }
    }
    .ch-scan { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; pointer-events: none;
      background: linear-gradient(100deg, transparent, rgba(34,211,238,.06) 45%, rgba(34,211,238,.10) 50%, transparent);
      animation: ch-scanmove 6.5s linear infinite; }
    @keyframes ch-scanmove { 0% { left: -45%; } 100% { left: 105%; } }

    .ch-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
    .ch-title-wrap { flex: 1; text-align: center; }
    .ch-title { font-size: 40px; font-weight: 800; letter-spacing: .06em; margin: 0; color: #fff;
      text-shadow: 0 0 18px rgba(120,200,255,.28); }
    .ch-sub { margin: 4px 0 0; font-size: 14px; color: #9fb4d4; letter-spacing: .02em; }
    .ch-live { display: flex; align-items: center; gap: 7px; color: #34d399; font-weight: 700; font-size: 15px;
      position: absolute; right: 26px; top: 22px; }
    .ch-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399;
      animation: ch-blink 1.4s ease-in-out infinite; }
    @keyframes ch-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

    .ch-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
    .ch-tab { display: flex; align-items: center; justify-content: center; gap: 10px;
      padding: 13px 10px; border-radius: 11px; cursor: pointer; font-size: 16px; font-weight: 600;
      color: #b7c7de; background: rgba(255,255,255,.02); border: 1.5px solid rgba(120,160,200,.14);
      transition: transform .28s cubic-bezier(.16,1,.3,1), background .2s, border-color .2s, color .2s, box-shadow .3s; }
    .ch-tab-ico { font-size: 17px; opacity: .9; font-style: normal; }
    .ch-tab:hover { border-color: rgba(34,211,238,.4); color: #dceaff; }
    .ch-tab.active { color: #eafaff; background: linear-gradient(160deg, rgba(34,211,238,.16), rgba(34,211,238,.05));
      border-color: rgba(34,211,238,.7); box-shadow: 0 0 20px rgba(34,211,238,.22), inset 0 0 14px rgba(34,211,238,.10);
      transform: translateY(-2px); }

    .ch-body { display: grid; grid-template-columns: 1.35fr 1.05fr .82fr; gap: 16px; min-height: 0; flex: 1; }
    .ch-body.ch-swipe > section { animation: ch-swipe .4s cubic-bezier(.16,1,.3,1); }
    @keyframes ch-swipe { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
    .ch-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .ch-col-head, .ch-col-head-t { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; color: #7f97b8; }
    .ch-viewall { color: #38bdf8; font-weight: 600; letter-spacing: normal; cursor: pointer; }

    .ch-featured { display: flex; flex-direction: column; }
    .ch-feat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .ch-hot { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #fbbf24;
      background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.4); padding: 4px 11px; border-radius: 8px; }
    .ch-feat-card { position: relative; flex: 1; border-radius: 14px; padding: 20px;
      background: linear-gradient(160deg, rgba(34,211,238,.05), rgba(255,255,255,.015));
      border: 1.5px solid rgba(34,211,238,.28); box-shadow: inset 0 0 26px rgba(34,211,238,.05); overflow: hidden; }
    .ch-fade { animation: ch-fadein .34s ease; }
    @keyframes ch-fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    .ch-feat-title { font-size: 28px; font-weight: 800; margin: 0 0 14px; color: #fff; line-height: 1.15; }
    .ch-feat-row { display: flex; align-items: center; gap: 9px; font-size: 15.5px; color: #c4d3ea; margin-bottom: 9px; }
    .ch-feat-company { color: #45c6f0; font-weight: 600; }
    .ch-feat-skills-label { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: #7f97b8; margin: 14px 0 9px; }
    .ch-feat-skills { display: flex; flex-wrap: wrap; gap: 8px; }
    .ch-chip { font-size: 13px; color: #cfe0f5; background: rgba(255,255,255,.04);
      border: 1px solid rgba(120,160,200,.28); padding: 6px 12px; border-radius: 8px; }
    .ch-view-btn { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px;
      font-size: 15px; font-weight: 700; color: #d7f4ff; cursor: pointer;
      background: linear-gradient(120deg, rgba(34,211,238,.14), rgba(18,100,214,.20));
      border: 1.5px solid rgba(34,211,238,.5); border-radius: 10px; padding: 11px 22px;
      box-shadow: 0 0 16px rgba(34,211,238,.14); transition: .2s; }
    .ch-view-btn:hover { background: linear-gradient(120deg, rgba(34,211,238,.28), rgba(18,100,214,.34)); transform: translateY(-1px); }

    .ch-openings { display: flex; flex-direction: column; min-height: 0; }
    .ch-openings-list { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding-right: 4px; }
    .ch-openings-list::-webkit-scrollbar { width: 5px; }
    .ch-openings-list::-webkit-scrollbar-thumb { background: rgba(34,211,238,.25); border-radius: 3px; }
    .ch-job { display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
      padding: 13px 14px; border-radius: 12px; background: rgba(255,255,255,.02);
      border: 1.5px solid rgba(120,160,200,.14); color: #dbe6f6;
      transition: transform .2s cubic-bezier(.16,1,.3,1), border-color .2s, box-shadow .25s, background .2s;
      animation: ch-jobin .34s ease both; }
    @keyframes ch-jobin { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
    .ch-job-ico { font-size: 15px; width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center;
      border-radius: 9px; background: rgba(34,211,238,.10); border: 1px solid rgba(34,211,238,.28); color: #7dd3fc; font-style: normal; }
    .ch-job-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .ch-job-title { font-size: 15.5px; font-weight: 700; color: #eef4fd; }
    .ch-job-meta { font-size: 12.5px; color: #8ba1c0; }
    .ch-job-badge { font-size: 11px; font-weight: 700; color: #34d399; background: rgba(16,185,129,.14);
      border: 1px solid rgba(16,185,129,.32); border-radius: 7px; padding: 3px 8px; flex: none; }
    .ch-job-arrow { color: #5b7396; font-size: 20px; flex: none; transition: .2s; opacity: .6; }
    .ch-job.sel { border-color: rgba(34,211,238,.75); background: linear-gradient(120deg, rgba(34,211,238,.12), rgba(34,211,238,.04));
      box-shadow: 0 0 22px rgba(34,211,238,.26), inset 0 0 12px rgba(34,211,238,.08); transform: scale(1.025); }
    .ch-job.sel .ch-job-arrow { color: #22d3ee; opacity: 1; transform: translateX(3px); }
    .ch-job.sel .ch-job-title { color: #fff; }

    .ch-stats { display: flex; flex-direction: column; gap: 4px; }
    .ch-stats-head { margin-bottom: 12px; }
    .ch-stat { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid rgba(120,160,200,.10); }
    .ch-stat:last-child { border-bottom: none; }
    .ch-stat-ico { font-size: 22px; width: 46px; height: 46px; flex: none; display: flex; align-items: center; justify-content: center;
      border-radius: 12px; background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.22); }
    .ch-stat-num { font-size: 30px; font-weight: 800; color: #fff; line-height: 1; }
    .ch-stat-label { font-size: 13.5px; color: #a9bcd8; margin-top: 3px; }
    .ch-stat-delta { font-size: 12px; color: #34d399; margin-top: 3px; }

    .ch-foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 13px 18px; border-radius: 12px;
      background: rgba(255,255,255,.015); border: 1px solid rgba(120,160,200,.12); font-size: 14px; }
    .ch-foot-label { color: #90a5c4; }
    .ch-foot-teams { color: #c0d0e8; flex: 1; }
    .ch-foot-teams i { color: #34d399; font-style: normal; margin: 0 6px; }
    .ch-foot-cta { color: #45c6f0; font-weight: 700; cursor: pointer; }
    .ch-hint { text-align: center; margin-top: 12px; font-size: 12.5px; color: #7f97b8; letter-spacing: .02em; }
    .ch-hint b { color: #d7f4ff; background: rgba(34,211,238,.10); border: 1px solid rgba(34,211,238,.28);
      border-radius: 6px; padding: 2px 7px; margin: 0 2px; font-weight: 700; }
    .ch-hint i { color: #3c4d68; font-style: normal; margin: 0 8px; }

    .ch-details { position: absolute; inset: 0; z-index: 5; display: none; align-items: center; justify-content: center;
      padding: 4vh 4vw; background: rgba(3,7,16,.72); backdrop-filter: blur(6px); }
    .ch-details.show { display: flex; animation: ch-fadein .26s ease; }
    .ch-det-card { width: min(680px, 94%); max-height: 90%; overflow-y: auto; border-radius: 18px; padding: 26px 28px;
      background: linear-gradient(165deg, #0a1224 0%, #060c18 100%);
      border: 1.5px solid rgba(34,211,238,.4); box-shadow: 0 0 40px rgba(34,211,238,.16), 0 22px 60px rgba(0,0,0,.6); }
    .ch-det-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
    .ch-det-title { font-size: 27px; font-weight: 800; margin: 0 0 6px; color: #fff; }
    .ch-det-company { font-size: 16px; color: #45c6f0; font-weight: 600; }
    .ch-det-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
    .ch-det-grid > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 11px;
      background: rgba(255,255,255,.02); border: 1px solid rgba(120,160,200,.14); }
    .ch-det-k { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: #7f97b8; text-transform: uppercase; }
    .ch-det-v { font-size: 15.5px; color: #e6eefc; font-weight: 600; }
    .ch-det-sec { margin-bottom: 16px; }
    .ch-det-sec .ch-det-k { margin-bottom: 8px; display: block; }
    .ch-det-p { font-size: 14.5px; color: #c4d3ea; line-height: 1.55; margin: 0; }
    .ch-det-ul { margin: 0; padding-left: 20px; color: #c4d3ea; font-size: 14.5px; line-height: 1.7; }
    .ch-det-actions { display: flex; gap: 12px; margin-top: 22px; }
    .ch-btn { font-size: 15px; font-weight: 700; border-radius: 10px; padding: 12px 22px; cursor: pointer; transition: .2s; border: 1.5px solid transparent; }
    .ch-btn-apply { color: #041018; background: linear-gradient(120deg, #22d3ee, #38bdf8); box-shadow: 0 0 18px rgba(34,211,238,.3); flex: 1; }
    .ch-btn-apply:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .ch-btn-save { color: #d7f4ff; background: rgba(34,211,238,.10); border-color: rgba(34,211,238,.4); }
    .ch-btn-save:hover { background: rgba(34,211,238,.2); }
    .ch-btn-back { color: #b7c7de; background: rgba(255,255,255,.03); border-color: rgba(120,160,200,.24); }
    .ch-btn-back:hover { background: rgba(255,255,255,.07); }
    .ch-det-hint { text-align: center; margin-top: 16px; font-size: 12.5px; color: #7f97b8; }
    .ch-det-hint b { color: #d7f4ff; background: rgba(34,211,238,.10); border: 1px solid rgba(34,211,238,.28); border-radius: 6px; padding: 2px 7px; font-weight: 700; }
    .ch-det-hint i { color: #3c4d68; font-style: normal; margin: 0 8px; }

    @media (max-height: 720px) {
      .ch-title { font-size: 32px; } .ch-feat-title { font-size: 23px; } .ch-stat-num { font-size: 25px; }
      .ch-frame { padding: 16px 20px 12px; }
    }

    /* ── Career Hub v2 (wall-board reference) additions ── */
    .ch-sub { color: #7f93b4; }
    .ch-body { grid-template-columns: 1.28fr 1.18fr .92fr; }

    /* category tabs row with side arrows */
    .ch-tabsrow { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
    .ch-tabsrow .ch-tabs { flex: 1; margin-bottom: 0; }
    .ch-navbtn { width: 38px; height: 44px; flex: none; border-radius: 10px; cursor: pointer; font-size: 22px; line-height: 1;
      color: #7dd3fc; background: rgba(34,211,238,.06); border: 1.5px solid rgba(34,211,238,.28);
      transition: .18s; }
    .ch-navbtn:hover { background: rgba(34,211,238,.16); color: #eafaff; transform: translateY(-1px); }

    /* work-mode badges */
    .ch-mode { font-size: 11.5px; font-weight: 700; border-radius: 7px; padding: 3px 9px; white-space: nowrap; }
    .ch-mode-hybrid { color: #67e8f9; background: rgba(34,211,238,.14); border: 1px solid rgba(34,211,238,.34); }
    .ch-mode-full   { color: #fbbf24; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.34); }
    .ch-mode-remote { color: #93c5fd; background: rgba(59,130,246,.14); border: 1px solid rgba(59,130,246,.36); }
    .ch-mode-other  { color: #c4b5fd; background: rgba(139,92,246,.14); border: 1px solid rgba(139,92,246,.36); }

    /* featured card (reference) */
    .ch-feat-card { background: linear-gradient(150deg, rgba(56,60,160,.14), rgba(34,211,238,.05) 60%, rgba(255,255,255,.012));
      border-color: rgba(90,120,220,.34); }
    .ch-feat-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: #fbbf24;
      background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.4); padding: 4px 10px; border-radius: 8px; margin-bottom: 12px; }
    .ch-feat-title { font-size: 25px; margin-bottom: 12px; }
    .ch-feat-company { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #7cc4f5; font-weight: 600; margin-bottom: 9px; }
    .ch-feat-loc { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: #c4d3ea; margin-bottom: 13px; }
    .ch-feat-desc { font-size: 14px; color: #9fb3d0; line-height: 1.5; margin: 0 0 14px; }
    .ch-feat-deco { position: absolute; right: -30px; top: 40px; width: 190px; height: 190px; pointer-events: none; opacity: .5;
      background: radial-gradient(circle at 50% 50%, rgba(99,102,241,.28), transparent 62%); filter: blur(2px);
      animation: ch-deco 6s ease-in-out infinite; }
    @keyframes ch-deco { 0%,100% { transform: translateY(0) scale(1); opacity: .5; } 50% { transform: translateY(-8px) scale(1.05); opacity: .7; } }

    /* top openings (reference) */
    .ch-openings-list { gap: 9px; }
    .ch-job { padding: 12px 13px; }
    .ch-job-open { display: flex; flex-direction: column; align-items: flex-end; font-size: 11px; color: #8ba1c0; flex: none; line-height: 1.15; }
    .ch-job-open b { font-size: 17px; color: #eef4fd; font-weight: 800; }
    .ch-job.sel .ch-job-open b { color: #67e8f9; }

    /* today's overview: stat tiles + skills */
    .ch-stats { gap: 0; }
    .ch-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
    .ch-stat-tile { position: relative; border-radius: 12px; padding: 13px 14px; background: rgba(255,255,255,.02);
      border: 1px solid rgba(34,211,238,.16); }
    .ch-stat-tile .ch-stat-ico { font-size: 16px; margin-bottom: 8px; width: auto; height: auto; background: none; border: none; display: block; }
    .ch-stat-num { font-size: 28px; font-weight: 800; color: #fff; line-height: 1; }
    .ch-stat-label { font-size: 12px; color: #93a8c6; margin-top: 5px; }
    .ch-stat-new { position: absolute; top: 11px; right: 11px; font-size: 10px; font-weight: 700; color: #c4b5fd;
      background: rgba(139,92,246,.16); border: 1px solid rgba(139,92,246,.4); border-radius: 6px; padding: 2px 7px; }
    .ch-skills-label { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: #6fa8d8; margin-bottom: 11px; }
    .ch-skill { display: grid; grid-template-columns: 82px 1fr 38px; align-items: center; gap: 9px; margin-bottom: 10px; }
    .ch-skill-name { font-size: 13px; color: #cdddf2; }
    .ch-skill-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
    .ch-skill-bar i { display: block; height: 100%; border-radius: 4px; width: 0;
      background: linear-gradient(90deg, #22d3ee, #3b82f6); box-shadow: 0 0 8px rgba(34,211,238,.4);
      animation: ch-skillfill 1.1s cubic-bezier(.16,1,.3,1) forwards; }
    @keyframes ch-skillfill { from { width: 0 !important; } }
    .ch-skill-pct { font-size: 12.5px; color: #8fbfe6; text-align: right; font-weight: 600; }

    /* bottom live-updates strip */
    .ch-livestrip { display: flex; align-items: center; gap: 16px; margin-top: 13px; padding: 10px 16px; border-radius: 11px;
      background: rgba(255,255,255,.015); border: 1px solid rgba(34,211,238,.14); font-size: 13px; overflow: hidden; }
    .ch-ls-live { display: flex; align-items: center; gap: 7px; color: #34d399; font-weight: 700; flex: none; }
    .ch-ls-scroll { flex: 1; overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
    .ch-ls-track { display: inline-block; padding-left: 100%; color: #a9bcd8; animation: ch-marquee 18s linear infinite; }
    @keyframes ch-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
    .ch-ls-total { flex: none; color: #c0d0e8; }
    .ch-ls-total b { color: #67e8f9; }

    /* in-board toast (shows on Apply/Save, inside the board) */
    .ch-toast { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%) translateY(10px);
      z-index: 8; opacity: 0; pointer-events: none; max-width: 80%;
      padding: 11px 20px; border-radius: 11px; font-size: 14px; font-weight: 600; color: #eafaff; text-align: center;
      background: linear-gradient(120deg, rgba(12,74,110,.94), rgba(8,47,73,.94));
      border: 1px solid rgba(34,211,238,.5); box-shadow: 0 0 24px rgba(34,211,238,.28);
      transition: opacity .25s ease, transform .25s ease; }
    .ch-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* details view — slides in INSIDE the board frame */
    .ch-details { border-radius: 20px; }
    .ch-details.show { animation: ch-det-slide .34s cubic-bezier(.16,1,.3,1); }
    @keyframes ch-det-slide { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }

    /* ══════════ Career Hub v3 — premium blue-purple redesign (overrides) ══════════ */
    .ch-frame {
      width: min(1180px, 95vw); max-height: 86vh; padding: 26px 30px 16px;
      background:
        radial-gradient(120% 90% at 15% 0%, rgba(37,63,180,.16), transparent 55%),
        radial-gradient(120% 90% at 90% 10%, rgba(168,85,247,.14), transparent 55%),
        linear-gradient(165deg, rgba(8,13,32,.98), rgba(5,8,20,.99));
      border: 1.5px solid rgba(90,140,255,.42); border-radius: 24px;
      box-shadow: 0 0 0 1px rgba(120,90,255,.12) inset, 0 34px 90px rgba(0,0,0,.66),
                  0 0 52px rgba(70,110,255,.24), 0 0 40px rgba(168,85,247,.14);
      animation: ch-open .42s cubic-bezier(.16,1,.3,1), ch-borderBP 5s ease-in-out infinite;
    }
    @keyframes ch-borderBP {
      0%,100% { border-color: rgba(90,140,255,.42); box-shadow: 0 0 0 1px rgba(120,90,255,.12) inset, 0 34px 90px rgba(0,0,0,.66), 0 0 40px rgba(70,110,255,.20), 0 0 30px rgba(168,85,247,.12); }
      50%     { border-color: rgba(150,120,255,.6);  box-shadow: 0 0 0 1px rgba(120,90,255,.20) inset, 0 34px 90px rgba(0,0,0,.66), 0 0 60px rgba(90,130,255,.32), 0 0 48px rgba(168,85,247,.22); }
    }
    .ch-scan { background: linear-gradient(100deg, transparent, rgba(120,150,255,.05) 45%, rgba(168,85,247,.08) 50%, transparent); }

    /* header */
    .ch-title { font-size: 44px; letter-spacing: .1em;
      background: linear-gradient(92deg, #67b0ff 0%, #a9c6ff 40%, #c9a4ff 100%);
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
      text-shadow: 0 0 26px rgba(120,150,255,.25); }
    .ch-sub { color: #96a8cf; font-size: 15px; }
    .ch-live { color: #34d399; font-size: 16px; }

    /* tabs + arrows */
    .ch-tabsrow { gap: 12px; margin-bottom: 20px; }
    .ch-tabs { gap: 14px; }
    .ch-navbtn { width: 46px; height: 50px; border-radius: 13px; font-size: 22px; color: #9fc0ff;
      background: rgba(90,120,255,.06); border: 1.5px solid rgba(120,150,255,.24); }
    .ch-navbtn:hover { background: rgba(120,120,255,.18); color: #eaf0ff; box-shadow: 0 0 16px rgba(120,130,255,.3); }
    .ch-tab { padding: 15px 12px; border-radius: 13px; font-size: 16.5px; color: #aebede;
      background: rgba(255,255,255,.02); border: 1.5px solid rgba(120,150,210,.16); }
    .ch-tab-ico { color: #7fb0ff; }
    .ch-tab:hover { border-color: rgba(120,150,255,.4); color: #e6eeff; box-shadow: 0 0 14px rgba(100,120,255,.16); }
    .ch-tab.active { color: #f0f4ff; transform: translateY(-2px) scale(1.015);
      background: linear-gradient(120deg, rgba(56,90,240,.4), rgba(150,80,240,.34));
      border-color: rgba(150,150,255,.7);
      box-shadow: 0 0 26px rgba(110,110,255,.34), inset 0 0 16px rgba(150,120,255,.14); }
    .ch-tab.active .ch-tab-ico { color: #cfe0ff; filter: drop-shadow(0 0 6px rgba(150,150,255,.7)); }

    /* body spacing */
    .ch-body { grid-template-columns: 1.24fr 1.16fr .9fr; gap: 20px; }
    .ch-col-head, .ch-col-head-t { color: #7fa0d8; letter-spacing: .1em; }
    .ch-viewall { color: #8fb4ff; }

    /* featured card — blue-purple gradient + holo cube */
    .ch-featured .ch-feat-card { padding: 24px; border-radius: 18px;
      background: linear-gradient(150deg, rgba(56,80,220,.20), rgba(150,80,240,.12) 55%, rgba(10,16,40,.4));
      border: 1.5px solid rgba(120,140,255,.3); box-shadow: inset 0 0 40px rgba(90,110,255,.06); }
    .ch-feat-badge { color: #ffd264; background: rgba(255,200,80,.12); border-color: rgba(255,200,80,.42); }
    .ch-feat-title { font-size: 30px; }
    .ch-feat-company { color: #8fc0ff; }
    .ch-feat-desc { color: #a9b8d8; }
    .ch-chip { background: rgba(120,140,255,.08); border: 1px solid rgba(120,150,255,.3); color: #d3ddf7; border-radius: 9px; }
    .ch-mode-hybrid { color: #a9c2ff; background: rgba(80,120,255,.16); border: 1px solid rgba(120,150,255,.4); }
    .ch-view-btn { margin-top: 20px; padding: 13px 26px; border-radius: 12px; font-size: 15.5px; color: #fff; border: none;
      background: linear-gradient(100deg, #3b6ff0, #8b4ff0 90%);
      box-shadow: 0 0 22px rgba(90,110,255,.34); }
    .ch-view-btn:hover { filter: brightness(1.1); box-shadow: 0 0 30px rgba(120,110,255,.5); transform: translateY(-1px); }
    .ch-feat-deco { right: -20px; top: 66px; width: 210px; height: 210px; opacity: .8;
      background:
        radial-gradient(circle at 55% 45%, rgba(150,110,255,.5), transparent 58%),
        radial-gradient(circle at 45% 62%, rgba(60,120,255,.42), transparent 60%);
      filter: blur(1px); }
    .ch-feat-deco::after { content: ''; position: absolute; left: 58px; top: 46px; width: 92px; height: 92px;
      border: 2px solid rgba(160,150,255,.7); border-radius: 12px; transform: rotate(45deg);
      box-shadow: 0 0 26px rgba(150,120,255,.6), inset 0 0 20px rgba(120,150,255,.4);
      animation: ch-cube 5s ease-in-out infinite; }
    @keyframes ch-cube { 0%,100% { transform: rotate(45deg) translateY(0); } 50% { transform: rotate(52deg) translateY(-10px); } }

    /* top openings — numbered rows */
    .ch-openings-list { gap: 12px; }
    .ch-job { padding: 14px 16px; gap: 14px; border-radius: 14px; border: 1.5px solid rgba(120,150,210,.14);
      background: rgba(255,255,255,.02); }
    .ch-job-num { flex: none; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
      border-radius: 11px; font-size: 17px; font-weight: 800; color: #8fb4ff;
      background: rgba(90,120,255,.10); border: 1px solid rgba(120,150,255,.3); }
    .ch-job-title { font-size: 16px; }
    .ch-job.sel { transform: scale(1.02); border-color: rgba(120,180,255,.85);
      background: linear-gradient(120deg, rgba(56,90,240,.18), rgba(150,80,240,.12));
      box-shadow: 0 0 26px rgba(90,150,255,.32), inset 0 0 14px rgba(120,150,255,.1); }
    .ch-job.sel .ch-job-num { color: #eaf0ff; background: linear-gradient(120deg, #3b6ff0, #8b4ff0);
      border-color: transparent; box-shadow: 0 0 16px rgba(120,120,255,.5); }
    .ch-job.sel .ch-job-arrow { color: #a9c2ff; }
    .ch-job-open b { color: #eef4fd; } .ch-job.sel .ch-job-open b { color: #bcd4ff; }

    /* today's overview — gradient stat cards */
    .ch-stat-grid { gap: 12px; margin-bottom: 18px; }
    .ch-stat-tile { padding: 16px 16px 14px; border-radius: 14px;
      background: linear-gradient(155deg, rgba(56,90,240,.14), rgba(30,50,130,.06));
      border: 1px solid rgba(120,150,255,.24); }
    .ch-stat-tile.ch-stat-purple { background: linear-gradient(155deg, rgba(150,80,240,.16), rgba(80,40,140,.06)); border-color: rgba(168,120,255,.3); }
    .ch-stat-tile .ch-stat-ico { font-size: 20px; margin-bottom: 10px; color: #a9c2ff; filter: drop-shadow(0 0 6px rgba(120,150,255,.5)); }
    .ch-stat-num { font-size: 32px; }
    .ch-stat-new { color: #d9c2ff; background: rgba(168,120,255,.18); border-color: rgba(168,120,255,.5); }

    /* popular skills — blue→purple bars */
    .ch-skills-label { color: #7fa0d8; }
    .ch-skill-bar i { background: linear-gradient(90deg, #38bdf8, #6d7bf5 55%, #a855f7);
      box-shadow: 0 0 10px rgba(130,120,255,.45); }
    .ch-skill-pct { color: #a9bfe6; }

    /* bottom strip — 3 sections */
    .ch-livestrip { gap: 20px; padding: 12px 20px; border-radius: 14px;
      border: 1px solid rgba(120,150,255,.16);
      background: linear-gradient(120deg, rgba(56,90,240,.06), rgba(150,80,240,.05)); }
    .ch-ls-left { display: flex; align-items: center; gap: 12px; flex: none; }
    .ch-ls-wifi { font-size: 20px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
      border-radius: 11px; background: rgba(90,120,255,.12); border: 1px solid rgba(120,150,255,.3); }
    .ch-ls-live { display: flex; align-items: center; gap: 7px; color: #7fb0ff; font-weight: 700; font-size: 12.5px; letter-spacing: .08em; }
    .ch-ls-sub { display: flex; align-items: center; gap: 7px; color: #93a8c6; font-size: 13px; margin-top: 3px; }
    .ch-dot-purple { background: #a855f7 !important; box-shadow: 0 0 8px #a855f7 !important; }
    .ch-ls-center { flex: 1; text-align: center; }
    .ch-ls-explore { color: #b9c8e8; font-size: 14px; margin-bottom: 6px; }
    .ch-ls-teams { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
    .ch-ls-teams i { color: #6d7bf5; font-style: normal; margin: 0 3px; }
    .ch-team-chip { font-size: 12.5px; color: #cdd8f2; padding: 3px 11px; border-radius: 8px;
      background: rgba(120,140,255,.07); border: 1px solid rgba(120,150,255,.24); }
    .ch-ls-right { display: flex; align-items: center; gap: 14px; flex: none; }
    .ch-ls-tot-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: #7fa0d8; }
    .ch-ls-tot-num { font-size: 30px; font-weight: 800; color: #fff; line-height: 1; }
    .ch-ls-chart { width: 108px; height: 38px; }

    /* keyboard help bar */
    .ch-hint { margin-top: 14px; }
    .ch-hint b { color: #d8e4ff; background: linear-gradient(120deg, rgba(56,90,240,.28), rgba(150,80,240,.24));
      border: 1px solid rgba(140,150,255,.4); border-radius: 7px; padding: 3px 9px; box-shadow: 0 0 10px rgba(110,120,255,.2); }
    .ch-hint i { color: #3d4a6d; }

    /* details view — blue-purple */
    .ch-det-card { background: linear-gradient(165deg, rgba(12,18,44,.99), rgba(6,10,24,.99));
      border: 1.5px solid rgba(120,140,255,.45); box-shadow: 0 0 46px rgba(90,110,255,.2), 0 22px 60px rgba(0,0,0,.6); }
    .ch-btn-apply { background: linear-gradient(100deg, #3b6ff0, #8b4ff0); color: #fff; box-shadow: 0 0 20px rgba(100,110,255,.34); }
    .ch-btn-save { color: #d8e4ff; background: rgba(120,140,255,.10); border-color: rgba(120,150,255,.42); }

    /* ── Career Hub v4 — tighter, neater type scale ── */
    .ch-frame { width: min(1080px, 92vw); max-height: 84vh; padding: 20px 26px 13px; }
    .ch-title { font-size: 33px; letter-spacing: .09em; }
    .ch-sub { font-size: 13px; margin-top: 3px; }
    .ch-live { font-size: 14px; }
    .ch-tabsrow { margin-bottom: 16px; gap: 10px; }
    .ch-tabs { gap: 11px; }
    .ch-navbtn { width: 40px; height: 44px; font-size: 19px; border-radius: 11px; }
    .ch-tab { padding: 12px 10px; font-size: 15px; border-radius: 11px; }
    .ch-tab-ico { font-size: 15px; }
    .ch-body { gap: 16px; }
    .ch-col-head, .ch-col-head-t { font-size: 11.5px; }

    .ch-featured .ch-feat-card { padding: 18px; border-radius: 15px; }
    .ch-feat-badge { font-size: 11px; padding: 3px 9px; margin-bottom: 10px; }
    .ch-feat-title { font-size: 22px; margin-bottom: 10px; }
    .ch-feat-company { font-size: 14px; gap: 7px; margin-bottom: 7px; }
    .ch-feat-loc { font-size: 13px; margin-bottom: 10px; }
    .ch-feat-desc { font-size: 12.5px; line-height: 1.45; margin-bottom: 11px; }
    .ch-feat-skills-label, .ch-skills-label { font-size: 10.5px; margin-bottom: 8px; }
    .ch-chip { font-size: 12px; padding: 5px 10px; }
    .ch-view-btn { margin-top: 14px; padding: 10px 20px; font-size: 14px; }
    .ch-feat-deco { width: 165px; height: 165px; top: 60px; right: -14px; }
    .ch-feat-deco::after { width: 74px; height: 74px; left: 46px; top: 38px; }

    .ch-openings-list { gap: 9px; }
    .ch-job { padding: 11px 13px; gap: 12px; border-radius: 12px; }
    .ch-job-num { width: 36px; height: 36px; font-size: 14px; border-radius: 9px; }
    .ch-job-title { font-size: 14px; }
    .ch-job-meta { font-size: 11.5px; }
    .ch-mode { font-size: 10.5px; padding: 3px 8px; }
    .ch-job-open b { font-size: 15px; } .ch-job-open { font-size: 10px; }

    .ch-stat-grid { gap: 10px; margin-bottom: 14px; }
    .ch-stat-tile { padding: 12px 13px 11px; border-radius: 12px; }
    .ch-stat-tile .ch-stat-ico { font-size: 16px; margin-bottom: 7px; }
    .ch-stat-num { font-size: 25px; }
    .ch-stat-label { font-size: 11px; margin-top: 3px; }
    .ch-stat-new { font-size: 9px; padding: 2px 6px; }
    .ch-skill { grid-template-columns: 74px 1fr 34px; margin-bottom: 8px; }
    .ch-skill-name { font-size: 12px; } .ch-skill-pct { font-size: 11.5px; }

    .ch-livestrip { gap: 16px; padding: 9px 16px; margin-top: 11px; }
    .ch-ls-wifi { width: 36px; height: 36px; font-size: 17px; }
    .ch-ls-live { font-size: 11px; } .ch-ls-sub { font-size: 11.5px; }
    .ch-ls-explore { font-size: 12.5px; margin-bottom: 5px; }
    .ch-team-chip { font-size: 11px; padding: 3px 9px; }
    .ch-ls-tot-label { font-size: 9.5px; } .ch-ls-tot-num { font-size: 25px; }
    .ch-ls-chart { width: 92px; height: 32px; }
    .ch-hint { font-size: 11.5px; margin-top: 10px; }
    .ch-hint b { padding: 2px 7px; }

    /* details view type */
    .ch-det-card { padding: 22px 24px; }
    .ch-det-title { font-size: 22px; } .ch-det-company { font-size: 14px; }
    .ch-det-k { font-size: 10.5px; } .ch-det-v { font-size: 14px; }
    .ch-det-p, .ch-det-ul { font-size: 13px; }
    .ch-btn { font-size: 14px; padding: 10px 20px; }

    /* ── Career Hub v5 — de-clutter the featured card ── */
    .ch-feat-card { display: flex; flex-direction: column; }
    /* keep all copy above the holo decoration and in a clean left column */
    .ch-feat-head, .ch-feat-title, .ch-feat-company, .ch-feat-loc, .ch-feat-desc,
    .ch-feat-skills-label, .ch-feat-skills, .ch-view-btn { position: relative; z-index: 2; }
    .ch-feat-title { max-width: 60%; }
    .ch-feat-company, .ch-feat-loc { max-width: 62%; }
    .ch-feat-desc { max-width: 63%; }
    .ch-view-btn { margin-top: auto; align-self: flex-start; }
    /* subtle holographic cube tucked to the right, no longer over the text */
    .ch-feat-deco { z-index: 0; top: 92px; right: 16px; width: 138px; height: 138px; opacity: .5; }
    .ch-feat-deco::after { width: 68px; height: 68px; left: 36px; top: 34px; }

    /* ── Career Hub v6 — stop flex-column from stretching the badge/chips ── */
    .ch-feat-card { align-items: flex-start; }
    .ch-feat-badge { align-self: flex-start; }

    /* View Details button — inline Enter-key hint */
    .ch-btn-key { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 6px;
      font-size: 11px; font-weight: 700; color: #eaf0ff; background: rgba(255,255,255,.14);
      border: 1px solid rgba(255,255,255,.28); vertical-align: middle; }

    /* ══════════════════════════════════════════════════════════════════════
       MEETING PANEL — REDESIGN
       Futuristic glass modal: navy ground, cyan/violet neon, glowing tiles.

       This block sits at the END of the stylesheet on purpose. The panel's
       original rules (~line 1972 onward) stay put and this overrides them by
       source order at matching specificity. Restyling in place would have meant
       surgically rewriting ~40 interlocking rules — the exact way classes end up
       silently cancelling each other out.

       Structure and hooks are UNCHANGED: every id and class the meeting logic
       touches (#mcb-mic, .mcb-btn, .active-on / .active-off, .mv-video,
       .mv-fallback, .meet-video-box.active-speaker, #meet-msgs …) still means
       what it meant. This is paint, not plumbing.
       ══════════════════════════════════════════════════════════════════════ */
    :root {
      --mt-navy:   #070c1a;
      --mt-navy-2: #0c1428;
      --mt-cyan:   #22d3ee;
      --mt-violet: #8b5cf6;
      --mt-edge:   rgba(34, 211, 238, .38);
      --mt-text:   #e8f2ff;
      --mt-dim:    #8ba0bf;
    }

    /* ── Backdrop ── */
    #meet-backdrop {
      position: fixed; inset: 0; z-index: 999;
      background: radial-gradient(ellipse at 50% 45%, rgba(6,12,28,.55), rgba(2,5,12,.86));
      backdrop-filter: blur(7px) saturate(120%);
      opacity: 0; pointer-events: none;
      transition: opacity .28s ease;
    }
    #meet-backdrop.show { opacity: 1; pointer-events: auto; }

    /* ── Modal shell ── */
    #meet-panel {
      width: min(94vw, 1100px);
      max-width: 1100px;
      height: min(84vh, 640px);
      max-height: 640px;
      background:
        radial-gradient(120% 90% at 50% -20%, rgba(34,211,238,.10), transparent 60%),
        radial-gradient(90% 70% at 110% 110%, rgba(139,92,246,.12), transparent 60%),
        linear-gradient(180deg, var(--mt-navy-2), var(--mt-navy));
      border: 1px solid var(--mt-edge);
      border-radius: 20px;
      backdrop-filter: blur(22px) saturate(150%);
      color: var(--mt-text);
      /* The neon read: tight cyan rim, wide cool halo, real depth beneath. */
      box-shadow:
        0 0 0 1px rgba(34,211,238,.10) inset,
        0 0 28px rgba(34,211,238,.20),
        0 0 90px rgba(59,130,246,.14),
        0 34px 70px -20px rgba(0,0,0,.85);
      transform: translate(-50%, -50%) scale(.96);
      opacity: 0;
      transition: opacity .26s ease, transform .26s cubic-bezier(.22,1,.36,1);
    }
    #meet-panel.show { display: flex; opacity: 1; transform: translate(-50%, -50%) scale(1); }

    /* ── Header ── */
    .meet-header {
      padding: .8rem 1.1rem;
      background: linear-gradient(180deg, rgba(12,20,40,.96), rgba(9,15,32,.72));
      border-bottom: 1px solid rgba(34,211,238,.16);
    }
    .meet-header-title { color: var(--mt-text); font-weight: 700; letter-spacing: .01em; }
    .meet-header-title svg { color: var(--mt-cyan); filter: drop-shadow(0 0 6px rgba(34,211,238,.55)); }
    .meet-header-actions { display: flex; align-items: center; gap: .8rem; }

    .meet-secure {
      display: flex; align-items: center; gap: .45rem;
      font-size: .74rem; font-weight: 600; color: #9fb4d4;
      padding: .28rem .6rem; border-radius: 999px;
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    }
    .meet-secure svg { width: 13px; height: 13px; fill: none; stroke: #4ade80; stroke-width: 2; }
    /* Signal bars: staggered so they read as live, not as a static icon. */
    .meet-signal { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
    .meet-signal i {
      width: 3px; border-radius: 1px; background: #4ade80;
      animation: mtSignal 2.4s ease-in-out infinite;
    }
    .meet-signal i:nth-child(1) { height: 4px;  animation-delay: 0s; }
    .meet-signal i:nth-child(2) { height: 6px;  animation-delay: .18s; }
    .meet-signal i:nth-child(3) { height: 8px;  animation-delay: .36s; }
    .meet-signal i:nth-child(4) { height: 11px; animation-delay: .54s; }
    @keyframes mtSignal { 0%,100% { opacity: .35 } 45% { opacity: 1 } }

    .meet-close-btn {
      width: 30px; height: 30px; border-radius: 8px;
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
      color: var(--mt-dim); cursor: pointer; font-size: .9rem; line-height: 1;
      transition: background .18s, color .18s, border-color .18s;
    }
    .meet-close-btn:hover { background: rgba(244,63,94,.16); border-color: rgba(244,63,94,.5); color: #fff; }

    /* ── Participant tiles ── */
    .meet-video-grid { gap: 1rem; padding: 1rem 1rem 0; margin-bottom: 5.8rem; }
    .meet-video-box {
      background: linear-gradient(160deg, #0b1226, #060b18);
      border: 1px solid rgba(34,211,238,.28);
      border-radius: 16px;
      transition: border-color .25s;
    }
    /* Idle breathing, so a quiet call still feels live rather than frozen. */
    #meet-local-video-box, .mv-remote-tile { animation: mtTileIdle 5.5s ease-in-out infinite; }
    @keyframes mtTileIdle {
      0%,100% { box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset, 0 0 14px rgba(34,211,238,.08), 0 14px 30px -14px rgba(0,0,0,.9); }
      50%     { box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset, 0 0 26px rgba(34,211,238,.18), 0 14px 30px -14px rgba(0,0,0,.9); }
    }
    /* Active speaker — the one state that must be unmistakable at a glance. */
    .meet-video-box.active-speaker {
      border-color: rgba(139,92,246,.85);
      animation: mtSpeaking 1.5s ease-in-out infinite;
    }
    @keyframes mtSpeaking {
      0%,100% { box-shadow: 0 0 20px rgba(139,92,246,.35), 0 0 0 1px rgba(139,92,246,.5) inset; }
      50%     { box-shadow: 0 0 40px rgba(139,92,246,.65), 0 0 0 1px rgba(139,92,246,.8) inset; }
    }

    .mv-menu {
      position: absolute; top: .55rem; right: .55rem; z-index: 3;
      width: 28px; height: 28px; border-radius: 50%;
      background: rgba(6,12,26,.7); border: 1px solid rgba(255,255,255,.12);
      color: #cfe4ff; cursor: pointer; font-size: .95rem; line-height: 1;
      display: grid; place-items: center; opacity: 0; transition: opacity .18s, background .18s;
    }
    .meet-video-box:hover .mv-menu { opacity: 1; }
    .mv-menu:hover { background: rgba(34,211,238,.22); }

    /* Name badge, bottom-left, mic inside it */
    .meet-video-overlay-bottom {
      position: absolute; bottom: .6rem; left: .6rem; right: auto; z-index: 3;
      display: flex; align-items: center; gap: .45rem;
      padding: .3rem .6rem; border-radius: 999px;
      background: rgba(5,10,22,.78); border: 1px solid rgba(255,255,255,.1);
      backdrop-filter: blur(8px);
    }
    .mv-overlay-name { font-size: .78rem; font-weight: 600; color: var(--mt-text); }
    .mv-overlay-status svg { width: 13px; height: 13px; fill: none; stroke-width: 2; }

    /* Audio waveform. DECORATIVE — it is not wired to real audio levels, so it
       must never be read as a live mic meter. It exists to keep the tile alive. */
    .mv-wave {
      position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%);
      display: flex; align-items: center; gap: 2px; height: 16px; z-index: 2;
      pointer-events: none;
    }
    .mv-wave i {
      width: 2px; height: 3px; border-radius: 1px;
      background: linear-gradient(180deg, var(--mt-cyan), #3b82f6);
      box-shadow: 0 0 5px rgba(34,211,238,.7);
      animation: mtWave 1.1s ease-in-out infinite;
    }
    .mv-wave i:nth-child(2n) { animation-duration: 1.35s; }
    .mv-wave i:nth-child(3n) { animation-duration: .85s; }
    .mv-wave i:nth-child(1)  { animation-delay: 0s }    .mv-wave i:nth-child(2)  { animation-delay: .07s }
    .mv-wave i:nth-child(3)  { animation-delay: .14s }  .mv-wave i:nth-child(4)  { animation-delay: .21s }
    .mv-wave i:nth-child(5)  { animation-delay: .28s }  .mv-wave i:nth-child(6)  { animation-delay: .35s }
    .mv-wave i:nth-child(7)  { animation-delay: .42s }  .mv-wave i:nth-child(8)  { animation-delay: .49s }
    .mv-wave i:nth-child(9)  { animation-delay: .56s }  .mv-wave i:nth-child(10) { animation-delay: .63s }
    .mv-wave i:nth-child(11) { animation-delay: .70s }  .mv-wave i:nth-child(12) { animation-delay: .77s }
    .mv-wave i:nth-child(13) { animation-delay: .84s }  .mv-wave i:nth-child(14) { animation-delay: .91s }
    .mv-wave i:nth-child(15) { animation-delay: .98s }  .mv-wave i:nth-child(16) { animation-delay: 1.05s }
    @keyframes mtWave { 0%,100% { height: 3px; opacity: .5 } 50% { height: 15px; opacity: 1 } }

    /* ── Camera-off placeholder: sphere over a wave grid ──
       Pure CSS gradients. A canvas would mean a second render loop per tile for
       something nobody looks at directly. */
    /* Must FILL the tile, not sit in it. The base rule (~line 2211) leaves this a
       plain centered flex child, so it shrank to its content (~72×104) and the
       scene below rendered as a postage stamp behind the emoji — the "dull black
       tile" bug. inset:0 is load-bearing, not decoration. */
    .meet-video-fallback {
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 50% 120%, #12204a 0%, #060b18 70%);
      overflow: hidden;
    }
    .vp-scene { position: absolute; inset: 0; overflow: hidden; }
    /* The receding floor plane. perspective() must stay LOOSE relative to the
       rotation — at 320px the 68° tilt collapsed the plane into a ~50px strip
       pinned under the tile's bottom edge, where overflow:hidden ate it. */
    .vp-grid {
      position: absolute; left: -60%; right: -60%; bottom: 0; height: 80%;
      background-image:
        linear-gradient(rgba(59,130,246,.75) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139,92,246,.6) 1px, transparent 1px);
      background-size: 40px 26px;
      transform: perspective(700px) rotateX(64deg);
      transform-origin: 50% 100%;
      animation: mtGrid 7s linear infinite;
      mask-image: linear-gradient(to top, #000 25%, transparent 88%);
      -webkit-mask-image: linear-gradient(to top, #000 25%, transparent 88%);
    }
    @keyframes mtGrid { to { background-position: 0 22px, 0 0; } }
    .vp-sphere {
      position: absolute; top: 26%; left: 50%; width: 40%; aspect-ratio: 1;
      transform: translate(-50%, 0); border-radius: 50%;
      background:
        radial-gradient(circle at 34% 30%, rgba(255,255,255,.45), transparent 45%),
        radial-gradient(circle at 50% 50%, #3b82f6 0%, #4f46e5 46%, #1e1b4b 78%, #0b1030 100%);
      box-shadow: 0 0 60px rgba(79,70,229,.75), 0 0 120px rgba(139,92,246,.4);
      animation: mtFloat 6s ease-in-out infinite;
    }
    @keyframes mtFloat { 0%,100% { transform: translate(-50%, 0) } 50% { transform: translate(-50%, -7%) } }
    .vp-particles i {
      position: absolute; width: 3px; height: 3px; border-radius: 50%;
      background: var(--mt-cyan); box-shadow: 0 0 7px rgba(34,211,238,.95);
      animation: mtRise 7s linear infinite; opacity: 0;
    }
    .vp-particles i:nth-child(1) { left: 14%; animation-delay: 0s }
    .vp-particles i:nth-child(2) { left: 27%; animation-delay: .9s }
    .vp-particles i:nth-child(3) { left: 38%; animation-delay: 1.9s }
    .vp-particles i:nth-child(4) { left: 52%; animation-delay: 2.7s }
    .vp-particles i:nth-child(5) { left: 63%; animation-delay: 3.6s }
    .vp-particles i:nth-child(6) { left: 75%; animation-delay: 4.4s }
    .vp-particles i:nth-child(7) { left: 86%; animation-delay: 5.3s }
    .vp-particles i:nth-child(8) { left: 93%; animation-delay: 6.1s }
    @keyframes mtRise {
      0%   { bottom: 4%;  opacity: 0 }
      18%  { opacity: .95 }
      82%  { opacity: .5 }
      100% { bottom: 86%; opacity: 0 }
    }
    /* The avatar ring reads ON TOP of the scene, not behind it. */
    .meet-video-fallback .mv-avatar-ring,
    .meet-video-fallback .mv-avatar-name { position: relative; z-index: 2; }

    /* Human tiles: the sphere IS the subject. A small emoji chip floating over
       its middle just muddies it, and identity already lives in the bottom-left
       badge — so the ring stands down here rather than competing. */
    .meet-video-fallback .mv-avatar-ring,
    .meet-video-fallback .mv-avatar-name { display: none; }

    /* ── Bot tile: glowing robot over the grid, no sphere ──
       Keyed off the reserved pseudo-peer id that game-loop.js already sets, so
       this is pure CSS — no tile markup or JS branch to keep in sync. */
    .mv-remote-tile[data-peer-id="__bot__"] .vp-sphere { display: none; }
    .mv-remote-tile[data-peer-id="__bot__"] .mv-avatar-ring {
      display: grid; place-items: center;
      width: 44%; aspect-ratio: 1; height: auto; border-radius: 50%;
      background: radial-gradient(circle at 50% 38%, rgba(34,211,238,.22), rgba(6,12,26,.92) 72%);
      border: 1px solid rgba(34,211,238,.55);
      box-shadow: 0 0 46px rgba(34,211,238,.5), inset 0 0 34px rgba(34,211,238,.16);
      animation: mtFloat 6s ease-in-out infinite;
    }
    /* mtFloat carries a translate(-50%,…) for the sphere; the ring is centred by
       flex, so it needs its own loop without the horizontal offset. */
    .mv-remote-tile[data-peer-id="__bot__"] .mv-avatar-ring { animation-name: mtBotFloat; }
    @keyframes mtBotFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6%) } }
    .mv-remote-tile[data-peer-id="__bot__"] .mv-avatar-emoji {
      font-size: clamp(1.8rem, 6.5vw, 3.6rem); line-height: 1;
      filter: drop-shadow(0 0 16px rgba(34,211,238,.85));
    }
    .mv-avatar-ring {
      background: rgba(8,14,32,.72);
      border: 1px solid rgba(34,211,238,.45);
      box-shadow: 0 0 22px rgba(34,211,238,.28);
    }
    .mv-avatar-ring.speaking { box-shadow: 0 0 30px rgba(139,92,246,.8); border-color: rgba(139,92,246,.9); }
    .mv-avatar-name { color: var(--mt-dim); }

    /* ── Chat panel ── */
    .meet-sidebar {
      background: linear-gradient(180deg, rgba(10,17,36,.94), rgba(6,11,24,.94));
      border-left: 1px solid rgba(34,211,238,.18);
    }
    .meet-sidebar-header {
      padding: .9rem 1rem .7rem;
      border-bottom: 1px solid rgba(255,255,255,.06);
      display: flex; flex-direction: column; gap: .1rem;
    }
    .meet-sidebar-header > span:first-child { font-size: 1rem; font-weight: 700; color: var(--mt-text); }
    .meet-sidebar-subtitle { font-size: .72rem; color: var(--mt-dim); font-weight: 500; }

    .meet-quick-row {
      padding: .7rem 1rem; gap: .35rem; display: flex; flex-wrap: wrap;
      border-bottom: 1px solid rgba(255,255,255,.05);
    }
    .mq-btn {
      width: 34px; height: 34px; border-radius: 9px;
      background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
      font-size: .95rem; cursor: pointer; display: grid; place-items: center;
      transition: transform .12s, border-color .18s, box-shadow .18s, background .18s;
    }
    .mq-btn:hover {
      background: rgba(34,211,238,.14); border-color: rgba(34,211,238,.6);
      box-shadow: 0 0 14px rgba(34,211,238,.35); transform: translateY(-2px);
    }
    .mq-btn:active { transform: scale(.88); }

    #meet-msgs { padding: .8rem 1rem; display: flex; flex-direction: column; gap: .7rem; }
    /* Messages arrive — they should not just appear. */
    .meet-msg { animation: mtMsgIn .26s cubic-bezier(.22,1,.36,1) both; }
    @keyframes mtMsgIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
    .meet-empty { color: var(--mt-dim); font-size: .8rem; text-align: center; padding: 1.2rem 0; }

    .meet-input-row {
      padding: .7rem .8rem; gap: .5rem; display: flex; align-items: center;
      border-top: 1px solid rgba(255,255,255,.06);
    }
    #meet-input {
      flex: 1; background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.1); border-radius: 999px;
      padding: .5rem .9rem; color: var(--mt-text); font-size: .82rem; outline: none;
      transition: border-color .18s, box-shadow .18s;
    }
    #meet-input::placeholder { color: #64789a; }
    #meet-input:focus { border-color: rgba(34,211,238,.7); box-shadow: 0 0 0 3px rgba(34,211,238,.12); }

    /* ── Control bar ── */
    .meet-controls-bar {
      bottom: 1rem;
      padding: .5rem .7rem;
      gap: .35rem;
      align-items: flex-start;
      background: linear-gradient(180deg, rgba(14,22,44,.92), rgba(8,13,28,.92));
      border: 1px solid rgba(34,211,238,.2);
      border-radius: 22px;
      box-shadow: 0 0 26px rgba(34,211,238,.12), 0 16px 34px -12px rgba(0,0,0,.8);
    }
    .mcb-item { display: flex; flex-direction: column; align-items: center; gap: .22rem; }
    .mcb-label { font-size: .62rem; color: var(--mt-dim); font-weight: 600; letter-spacing: .02em; }

    .mcb-btn {
      position: relative;
      width: 42px; height: 42px; border-radius: 50%;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.1);
      color: #dceaff;
      transition: transform .14s, background .18s, border-color .18s, box-shadow .18s;
    }
    .mcb-btn .mcb-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .mcb-btn:hover { transform: translateY(-2px) scale(1.06); background: rgba(34,211,238,.14); border-color: rgba(34,211,238,.55); }
    .mcb-btn:active { transform: scale(.92); }

    /* ON = cyan. The mic idles ON, so this is the resting look, not an alarm. */
    .mcb-btn.active-on, #mcb-mic:not(.active-off) {
      background: rgba(34,211,238,.18); border-color: rgba(34,211,238,.75); color: #b8f6ff;
      box-shadow: 0 0 16px rgba(34,211,238,.4);
    }
    /* Muted / camera off — red, because it is a state you must notice. */
    .mcb-btn.active-off {
      background: rgba(244,63,94,.2); border-color: rgba(244,63,94,.75); color: #ffd9df;
      box-shadow: 0 0 16px rgba(244,63,94,.35);
    }
    /* Live green dot while the mic is open. */
    #mcb-mic:not(.active-off)::after {
      content: ''; position: absolute; right: 1px; bottom: 1px;
      width: 9px; height: 9px; border-radius: 50%;
      background: #4ade80; border: 2px solid #0a1226;
      animation: mtDot 2s ease-in-out infinite;
    }
    @keyframes mtDot { 0%,100% { opacity: .55 } 50% { opacity: 1 } }

    .mcb-btn-bot.active {
      background: rgba(52,211,153,.18); border-color: rgba(52,211,153,.75); color: #b6ffe3;
      box-shadow: 0 0 16px rgba(52,211,153,.4);
    }

    /* Leave — the only pill, the only red. */
    .mcb-item-leave { margin-left: .3rem; }
    .mcb-leave {
      display: flex; align-items: center; gap: .45rem;
      height: 42px; padding: 0 1.05rem; border-radius: 999px;
      background: linear-gradient(135deg, #f43f5e, #be185d);
      border: 1px solid rgba(255,255,255,.18);
      color: #fff; font-weight: 700; font-size: .8rem; cursor: pointer;
      animation: mtLeave 3s ease-in-out infinite;
      transition: transform .14s, box-shadow .18s;
    }
    .mcb-leave .mcb-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .mcb-leave:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 0 30px rgba(244,63,94,.75); }
    .mcb-leave:active { transform: scale(.95); }
    @keyframes mtLeave {
      0%,100% { box-shadow: 0 0 16px rgba(244,63,94,.38) }
      50%     { box-shadow: 0 0 28px rgba(244,63,94,.6) }
    }
    /* The old danger button is gone — Leave is .mcb-leave now. */
    .mcb-btn-danger { display: none !important; }

    /* ── Responsive: chat drops below the tiles on a narrow window ── */
    @media (max-width: 900px) {
      #meet-panel { width: 96vw; height: 88vh; max-height: none; }
      .meet-content-split { flex-direction: column; }
      .meet-sidebar { border-left: 0; border-top: 1px solid rgba(34,211,238,.18); max-height: 40%; }
      .mcb-label { display: none; }
      .mcb-btn { width: 38px; height: 38px; }
    }

    /* Respect the OS setting — every loop above is decorative. */
    @media (prefers-reduced-motion: reduce) {
      #meet-panel, #meet-backdrop, .mcb-btn, .mcb-leave, .mq-btn { transition: none !important; }
      .mv-wave i, .vp-sphere, .vp-grid, .vp-particles i, .meet-signal i,
      .mcb-leave, #meet-local-video-box, .mv-remote-tile,
      .meet-video-box.active-speaker, .meet-msg,
      #mcb-mic::after { animation: none !important; }
    }