[x-cloak] {
      display: none !important;
    }

    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background-color: #f8fafc;
    }

    .dark body {
      background-color: #060b18;
    }

    /* RICH TEXT WYSIWYG LIST FORMATTING OVERRIDES */
    .rich-text-content ul,
    div[contenteditable="true"] ul {
      list-style-type: disc !important;
      margin-left: 1.25rem !important;
      margin-top: 0.25rem !important;
      margin-bottom: 0.25rem !important;
      padding-left: 1rem !important;
    }

    .rich-text-content ol,
    div[contenteditable="true"] ol {
      list-style-type: decimal !important;
      margin-left: 1.25rem !important;
      margin-top: 0.25rem !important;
      margin-bottom: 0.25rem !important;
      padding-left: 1rem !important;
    }

    .rich-text-content li,
    div[contenteditable="true"] li {
      display: list-item !important;
      margin-bottom: 0.2rem !important;
    }

    .glass-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(226, 232, 240, 0.9);
      box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
    }

    .dark .glass-card {
      background: rgba(15, 23, 42, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(30, 58, 138, 0.35);
      box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3);
    }

    .glass-sidebar {
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .dark .glass-sidebar {
      background: rgba(11, 19, 41, 0.96);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .blue-gradient-bg {
      background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #0284c7 100%);
    }

    .blue-gradient-text {
      background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #0ea5e9 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .dark .blue-gradient-text {
      background: linear-gradient(135deg, #60a5fa 0%, #38bdf8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }


    /* PATCH 20 - Corporate HR Login / Talent Platform style */
    .public-auth-grid {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      min-height: 548px;
      padding: 2rem;
      border: 1px solid rgba(191, 219, 254, .78);
      border-radius: 30px;
      background:
        radial-gradient(circle at 14% 10%, rgba(255, 255, 255, .98) 0 21%, transparent 43%),
        linear-gradient(102deg, #eef8ff 0%, #eaf5ff 44%, #cfe8fb 72%, #b8dcf6 100%);
      box-shadow: 0 28px 70px -42px rgba(15, 53, 96, .35);
    }

    /* Architectural illustration: lightweight CSS, no external image dependency */
    .public-auth-grid::before {
      content: '';
      position: absolute;
      z-index: -2;
      right: -2%;
      top: 2%;
      width: 54%;
      height: 105%;
      opacity: .92;
      transform: skewX(-4deg);
      border-radius: 44px 0 0 0;
      background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 2px, transparent 2px 28px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .22) 0 2px, transparent 2px 30px),
        linear-gradient(145deg, rgba(61, 137, 194, .92), rgba(18, 83, 135, .88));
      clip-path: polygon(20% 4%, 95% 0, 100% 100%, 0 100%, 5% 20%);
      box-shadow: inset 28px 0 55px rgba(255, 255, 255, .16);
    }

    .public-auth-grid::after {
      content: 'Better People  •  Stronger Company';
      position: absolute;
      left: 2.1rem;
      bottom: 1.35rem;
      z-index: -1;
      color: #24476b;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .07em;
      text-transform: uppercase;
      opacity: .72;
    }

    .public-hero {
      position: relative;
      min-height: 100%;
      color: #0f2742;
      background: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;
      padding-left: .35rem !important;
      padding-right: 1.25rem !important;
    }

    .public-hero::after {
      content: '';
      position: absolute;
      width: 210px;
      height: 4px;
      left: .35rem;
      bottom: 1.3rem;
      border-radius: 999px;
      background: linear-gradient(90deg, #2087df, rgba(32, 135, 223, 0));
      opacity: .75;
    }

    .public-hero-orb {
      display: none;
    }

    .public-hero-badge {
      color: #164d77;
      background: rgba(255, 255, 255, .76);
      border-color: rgba(148, 196, 230, .82);
      box-shadow: 0 8px 20px -16px rgba(15, 79, 128, .55), inset 0 1px 0 rgba(255, 255, 255, .95);
      backdrop-filter: blur(10px);
    }

    .public-hero-title {
      max-width: 620px;
      color: #102a43;
      font-weight: 900;
      letter-spacing: -.035em;
      text-wrap: balance;
    }

    .public-hero-accent {
      background: linear-gradient(135deg, #1678d2 0%, #1769c2 58%, #0e5ca8 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .public-hero-copy {
      max-width: 570px;
      color: #41617c;
      font-size: .82rem !important;
      line-height: 1.7;
    }

    .public-feature-card {
      background: rgba(255, 255, 255, .74);
      border-color: rgba(167, 204, 232, .85);
      box-shadow: 0 16px 34px -28px rgba(9, 65, 108, .42);
      backdrop-filter: blur(12px);
      transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
    }

    .public-feature-card:hover {
      transform: translateY(-2px);
      background: rgba(255, 255, 255, .9);
      box-shadow: 0 18px 34px -25px rgba(9, 65, 108, .48);
    }

    .public-feature-copy {
      color: #59728a;
    }

    .public-login-card {
      position: relative;
      margin: 1rem .25rem 1rem auto;
      max-width: 445px;
      background: rgba(255, 255, 255, .965) !important;
      border-color: rgba(219, 231, 240, .96) !important;
      border-radius: 24px !important;
      box-shadow: 0 28px 65px -34px rgba(12, 48, 78, .42), 0 12px 28px -24px rgba(12, 48, 78, .25) !important;
      backdrop-filter: blur(18px);
    }

    .public-login-card::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98);
    }

    .public-login-card input,
    .public-login-card select {
      min-height: 44px;
      border-color: #d9e3ec;
      background: #fbfdff;
      box-shadow: inset 0 1px 2px rgba(15, 23, 42, .025);
    }

    .public-login-card input:focus,
    .public-login-card select:focus {
      border-color: #56a7e8;
      box-shadow: 0 0 0 3px rgba(39, 139, 219, .10);
      background: #fff;
    }

    .public-login-card button[type="submit"] {
      min-height: 44px;
      background: linear-gradient(135deg, #238be3, #1672ca) !important;
      box-shadow: 0 14px 24px -16px rgba(23, 114, 202, .65);
    }

    .dark .public-auth-grid {
      border-color: rgba(30, 64, 104, .82);
      background: linear-gradient(110deg, #0c192b 0%, #0e2238 48%, #103e60 100%);
    }

    .dark .public-auth-grid::after {
      color: #b7d5eb;
    }

    .dark .public-auth-grid::before {
      opacity: .55;
    }

    .dark .public-hero-title {
      color: #f8fbff;
    }

    .dark .public-hero-copy {
      color: #bdd0df;
    }

    .dark .public-hero-badge {
      color: #c8e7ff;
      background: rgba(15, 41, 64, .66);
      border-color: rgba(92, 151, 196, .45);
    }

    .dark .public-feature-card {
      background: rgba(11, 34, 54, .62);
      border-color: rgba(74, 127, 168, .38);
    }

    .dark .public-feature-copy {
      color: #b8cad9;
    }

    .dark .public-login-card {
      background: rgba(11, 24, 40, .965) !important;
      border-color: rgba(61, 91, 117, .58) !important;
    }

    .dark .public-login-card input,
    .dark .public-login-card select {
      background: #0d2034;
      border-color: #29445d;
    }

    @media (max-width: 1023px) {
      .public-auth-grid {
        min-height: auto;
        padding: 1.25rem;
        gap: 1rem;
        background: linear-gradient(160deg, #f7fbff, #e8f5ff);
      }

      .public-auth-grid::before {
        width: 100%;
        height: 42%;
        right: -12%;
        top: 1%;
        opacity: .20;
      }

      .public-auth-grid::after {
        display: none;
      }

      .public-hero {
        min-height: auto;
        padding: 1rem .4rem !important;
      }

      .public-hero::after {
        display: none;
      }

      .public-login-card {
        margin: 0;
        max-width: none;
      }
    }

    @media (max-width: 639px) {
      .public-auth-grid {
        padding: .75rem;
        border-radius: 22px;
      }

      .public-hero {
        padding: 1rem .65rem !important;
      }

      .public-hero-title {
        font-size: 2rem !important;
        line-height: 1.08 !important;
      }

      .public-hero-copy {
        font-size: .75rem !important;
      }

      .public-login-card {
        border-radius: 20px !important;
      }
    }


    /* PATCH 21 — GrowUp-inspired corporate login with Drive-managed hero photo */
    .public-auth-grid {
      position: relative;
      overflow: hidden;
      min-height: 610px;
      padding: 2rem !important;
      border: 1px solid #dce9f4;
      border-radius: 30px;
      background: linear-gradient(115deg, #f5fbff 0%, #edf8ff 46%, #ffffff 100%) !important;
      box-shadow: 0 28px 70px -45px rgba(15, 58, 91, .35);
    }

    .public-auth-grid::before,
    .public-auth-grid::after {
      display: none !important;
    }

    .public-hero {
      z-index: 2;
      padding: 1.25rem .65rem !important;
      display: flex;
      justify-content: center;
    }

    .public-hero::after {
      display: none !important;
    }

    .public-hero-title {
      max-width: 410px;
      font-size: clamp(2.15rem, 3.1vw, 3.55rem) !important;
      line-height: 1.02 !important;
    }

    .public-hero-copy {
      max-width: 400px;
      font-size: .79rem !important;
    }

    .public-feature-grid {
      max-width: 410px;
    }

    .public-feature-card {
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: .55rem .2rem !important;
      backdrop-filter: none !important;
    }

    .public-feature-card:hover {
      transform: none;
      box-shadow: none !important;
    }

    .public-login-wrap {
      z-index: 4;
      display: flex;
      align-items: center;
    }

    .public-login-card {
      margin: 0 !important;
      width: 100%;
      max-width: 410px !important;
      border-radius: 20px !important;
      box-shadow: 0 28px 60px -30px rgba(15, 55, 88, .38), 0 10px 25px -20px rgba(15, 55, 88, .25) !important;
    }

    .public-photo-panel {
      position: relative;
      min-height: 540px;
      overflow: hidden;
      border-radius: 24px;
      background:
        radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .65), transparent 26%),
        linear-gradient(150deg, #bfe8ff 0%, #7fc2e8 48%, #2d78a5 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 22px 55px -38px rgba(17, 61, 95, .48);
    }

    .public-photo-panel img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .public-photo-panel::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(5, 27, 45, .02), rgba(5, 27, 45, .12));
    }

    .public-photo-fallback {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: flex-end;
      padding: 2rem;
      color: white;
    }

    .public-photo-fallback::before {
      content: '';
      position: absolute;
      inset: 17% 11% 0 27%;
      opacity: .45;
      background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .32) 0 2px, transparent 2px 28px), linear-gradient(145deg, rgba(255, 255, 255, .24), rgba(7, 69, 108, .18));
      clip-path: polygon(12% 8%, 92% 0, 100% 100%, 0 100%);
    }

    .public-photo-fallback span {
      position: relative;
      z-index: 1;
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      opacity: .92;
    }

    .login-hero-setting-preview {
      width: 144px;
      height: 88px;
      flex: 0 0 144px;
      overflow: hidden;
      border-radius: 12px;
      border: 1px solid #dbe7f0;
      background: #f5f9fc;
      box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
    }

    .login-hero-setting-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    @media (max-width:640px) {
      .login-hero-setting-preview {
        width: 120px;
        height: 74px;
        flex-basis: 120px;
      }
    }

    @media (max-width:1023px) {
      .public-auth-grid {
        min-height: auto;
        padding: 1.2rem !important;
      }

      .public-hero {
        order: 1;
      }

      .public-login-wrap {
        order: 2;
      }

      .public-photo-panel-wrap {
        order: 3;
      }

      .public-photo-panel {
        min-height: 350px;
      }

      .public-login-card {
        max-width: none !important;
      }
    }

    @media (max-width:639px) {
      .public-auth-grid {
        padding: .8rem !important;
        border-radius: 22px;
      }

      .public-photo-panel {
        min-height: 260px;
        border-radius: 18px;
      }

      .public-feature-grid {
        grid-template-columns: 1fr !important;
        gap: .15rem !important;
      }
    }

    /* Custom Modern Scrollbars */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 9999px;
    }

    .dark ::-webkit-scrollbar-thumb {
      background: #1e293b;
      border-radius: 9999px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #94a3b8;
    }

    .dark ::-webkit-scrollbar-thumb:hover {
      background: #334155;
    }

    /* PATCH 24 — Corporate Professional Workspace */
    body.admin-shell-professional aside {
      background: linear-gradient(180deg, #06264a 0%, #031d38 100%) !important;
      border-right: 1px solid rgba(255, 255, 255, .08) !important
    }

    body.admin-shell-professional aside a,
    body.admin-shell-professional aside .text-slate-600,
    body.admin-shell-professional aside .dark\:text-slate-300 {
      color: #d8e7f7 !important
    }

    body.admin-shell-professional aside .text-slate-400 {
      color: #8eabc8 !important
    }

    .patch24-hero {
      background: linear-gradient(115deg, #f8fbff 0%, #edf6ff 60%, #e2efff 100%);
      border: 1px solid #d9e8f7;
      position: relative;
      overflow: hidden
    }

    .patch24-hero:after {
      content: "";
      position: absolute;
      right: -40px;
      bottom: -70px;
      width: 330px;
      height: 220px;
      background: radial-gradient(circle at 30% 30%, rgba(37, 99, 235, .22), transparent 60%);
      transform: rotate(-10deg)
    }

    .patch24-kpi {
      background: #fff;
      border: 1px solid #e3ebf4;
      box-shadow: 0 8px 24px rgba(15, 42, 75, .06)
    }

    .patch24-kpi:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(15, 42, 75, .1)
    }

    .patch24-folder {
      background: #fff;
      border: 1px solid #dfe8f2;
      box-shadow: 0 8px 25px rgba(15, 42, 75, .06);
      transition: .2s ease
    }

    .patch24-folder:hover {
      border-color: #93c5fd;
      transform: translateY(-3px);
      box-shadow: 0 15px 36px rgba(15, 42, 75, .11)
    }

    .patch24-folder-top {
      height: 5px;
      background: linear-gradient(90deg, #2563eb, #38bdf8);
      border-radius: 20px 20px 0 0
    }

    .patch24-question-shell {
      max-width: 1180px !important;
      margin-left: auto !important;
      margin-right: auto !important
    }

    .patch24-question-card {
      background: #fff !important;
      border: 1px solid #dfe8f2 !important;
      border-radius: 16px !important;
      box-shadow: 0 7px 22px rgba(15, 42, 75, .055) !important;
      padding: 22px !important
    }

    .patch24-question-card .patch24-qnum {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #eaf3ff;
      color: #1261d5;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      flex: none
    }

    .patch24-question-card label {
      border-radius: 10px !important;
      padding: 12px 14px !important
    }

    @media(max-width:767px) {
      .patch24-question-card {
        padding: 16px !important
      }

      .patch24-hero {
        padding: 20px !important
      }
    }

    /* PATCH 26 — Corporate Portal Professional / layout no.4 with original tab bar retained */
    .corp26-shell {
      max-width: 1440px;
      margin-inline: auto
    }

    .corp26-header {
      background: linear-gradient(180deg, #fff 0%, #fbfdff 100%)
    }

    .dark .corp26-header {
      background: linear-gradient(180deg, #071b31 0%, #06172a 100%)
    }

    .corp26-header:before {
      content: "";
      position: absolute;
      inset: 0 auto auto 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, #2563eb, #38bdf8, #10b981);
      opacity: .9
    }

    .corp26-header>.absolute {
      opacity: .55
    }

    .corp26-nav {
      margin-inline: -2px
    }

    .corp26-nav>div {
      gap: 10px !important
    }

    .corp26-nav-group {
      box-shadow: none !important;
      background: #f7f9fc !important
    }

    .dark .corp26-nav-group {
      background: #0b2037 !important
    }

    .corp26-nav-group button {
      min-height: 34px;
      border-radius: 9px !important;
      letter-spacing: -.01em
    }

    .corp26-nav-group button.bg-gradient-to-r {
      background: #2563eb !important;
      box-shadow: 0 5px 14px rgba(37, 99, 235, .2) !important;
      ring: 0 !important
    }

    .corp26-toolbar {
      background: #fff;
      box-shadow: 0 7px 22px rgba(15, 42, 75, .045) !important
    }

    .dark .corp26-toolbar {
      background: #071b31
    }

    .corp26-shell .glass-card {
      box-shadow: 0 7px 24px rgba(15, 42, 75, .05)
    }

    .corp26-shell .rounded-3xl {
      border-radius: 18px !important
    }

    .corp26-shell .rounded-2xl {
      border-radius: 14px !important
    }

    .corp26-shell table thead {
      background: #f7f9fc
    }

    .dark .corp26-shell table thead {
      background: #0b2037
    }

    .corp26-shell table tbody tr {
      transition: background-color .15s ease
    }

    .corp26-shell table tbody tr:hover {
      background: #f8fbff
    }

    .dark .corp26-shell table tbody tr:hover {
      background: #0a2038
    }

    .corp26-shell canvas {
      max-width: 100%
    }

    .corp26-shell .bg-gradient-to-r.from-amber-500.to-amber-600 {
      background: #f59e0b !important
    }

    .corp26-shell .bg-gradient-to-r.from-emerald-600.to-teal-600 {
      background: #059669 !important
    }

    @media(min-width:1024px) {
      .corp26-shell .corp26-header {
        padding-left: 28px;
        padding-right: 28px
      }

      .corp26-nav-group {
        flex-wrap: nowrap
      }
    }

    @media(max-width:767px) {
      .corp26-shell {
        padding-bottom: 18px
      }

      .corp26-nav>div {
        align-items: stretch
      }

      .corp26-nav-group {
        width: 100%;
        overflow-x: auto
      }

      .corp26-nav-group button {
        white-space: nowrap
      }

      .corp26-toolbar .flex-1 {
        min-width: 100%
      }
    }

    /* PATCH 27 — FULL CORPORATE PORTAL REDESIGN */
    .corp27-shell {
      --corp-border: #dfe8f3;
      --corp-muted: #64748b;
      --corp-navy: #08284b;
    }

    .corp27-company-head {
      background: transparent;
      padding: 4px 2px 14px;
      border-bottom: 1px solid var(--corp-border);
    }

    .dark .corp27-company-head {
      border-color: #20364d
    }

    .corp27-org-logo img {
      background: white;
      border-radius: 12px
    }

    .corp27-company-head h3 {
      letter-spacing: -.035em
    }

    .corp27-company-head button {
      border-radius: 12px !important
    }

    .corp27-nav {
      display: flex;
      gap: 14px;
      align-items: center;
      overflow-x: auto;
      padding: 0;
      scrollbar-width: none;
    }

    .corp27-nav::-webkit-scrollbar {
      display: none
    }

    .corp27-nav>div {
      flex-wrap: nowrap !important
    }

    .corp27-nav-group {
      background: #f4f7fb;
      border: 1px solid var(--corp-border);
      box-shadow: 0 2px 8px rgba(15, 42, 75, .025);
      white-space: nowrap;
    }

    .dark .corp27-nav-group {
      background: #0d2944;
      border-color: #20364d
    }

    .corp27-nav-group button {
      border-radius: 9px !important;
      min-height: 34px;
    }

    .corp27-nav-group button[class*="bg-gradient-to-r"] {
      background: #2563eb !important;
      box-shadow: 0 4px 12px rgba(37, 99, 235, .22) !important;
    }

    .corp27-toolbar {
      background: #fff;
      border: 1px solid var(--corp-border);
      box-shadow: 0 5px 18px rgba(15, 42, 75, .045);
    }

    .dark .corp27-toolbar {
      background: #0b2239;
      border-color: #20364d
    }

    .corp27-shell .glass-card {
      background: #fff !important;
      border-color: var(--corp-border) !important;
      box-shadow: 0 5px 18px rgba(15, 42, 75, .045) !important;
    }

    .dark .corp27-shell .glass-card {
      background: #0b2239 !important;
      border-color: #20364d !important;
    }

    .corp27-shell .rounded-3xl {
      border-radius: 18px !important
    }

    .corp27-shell .rounded-2xl {
      border-radius: 14px !important
    }

    .corp27-shell table {
      border-collapse: separate;
      border-spacing: 0;
    }

    .corp27-shell thead tr {
      background: #f7f9fc !important;
    }

    .dark .corp27-shell thead tr {
      background: #102b46 !important
    }

    .corp27-shell tbody tr:hover {
      background: #f8fbff !important
    }

    .dark .corp27-shell tbody tr:hover {
      background: #102b46 !important
    }

    .corp27-shell input,
    .corp27-shell select {
      min-height: 38px;
      border-radius: 10px !important;
    }

    .corp27-shell canvas {
      max-width: 100%
    }

    .corp27-shell .bg-gradient-to-r.from-amber-500,
    .corp27-shell .bg-gradient-to-r.from-emerald-600 {
      box-shadow: none !important;
    }

    .corp27-shell [class*="text-2xl"].font-black,
    .corp27-shell [class*="text-xl"].font-black {
      letter-spacing: -.025em;
    }

    /* KPI/card feel inspired by the selected No.4 layout */
    .corp27-shell .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-5>div,
    .corp27-shell .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4>div {
      border: 1px solid var(--corp-border) !important;
      box-shadow: 0 4px 14px rgba(15, 42, 75, .035) !important;
    }

    @media (min-width:1024px) {
      .corp27-company-head {
        padding-top: 2px
      }

      .corp27-toolbar {
        padding: 12px 14px !important
      }
    }

    @media (max-width:767px) {
      .corp27-nav {
        align-items: flex-start
      }

      .corp27-nav-group {
        width: max-content
      }

      .corp27-company-head {
        padding-bottom: 12px
      }
    }

    /* PATCH 28 — Design No.4 Corporate Primary Navigation */
    .corp28-primary-nav {
      display: flex;
      align-items: center;
      gap: 2px;
      width: 100%;
      overflow-x: auto;
      background: #f4f6f9;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 4px 7px;
      scrollbar-width: none;
      box-shadow: 0 2px 8px rgba(15, 42, 75, .025);
    }

    .corp28-primary-nav::-webkit-scrollbar {
      display: none
    }

    .corp28-primary-nav button {
      position: relative;
      flex: 0 0 auto;
      min-height: 40px;
      padding: 0 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border-radius: 8px;
      color: #53647a;
      font-size: 11px;
      font-weight: 700;
      transition: .18s ease;
      white-space: nowrap;
    }

    .corp28-primary-nav button .material-symbols-outlined {
      font-size: 15px
    }

    .corp28-primary-nav button:hover {
      color: #1d4ed8;
      background: #fff
    }

    .corp28-primary-nav button.corp28-primary-active {
      color: #1d4ed8;
      background: #fff;
      box-shadow: 0 2px 7px rgba(15, 42, 75, .08);
    }

    .corp28-primary-nav button.corp28-primary-active:after {
      content: "";
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: -5px;
      height: 2px;
      background: #2563eb;
      border-radius: 999px;
    }

    .dark .corp28-primary-nav {
      background: #0d2944;
      border-color: #20364d
    }

    .dark .corp28-primary-nav button {
      color: #b7c8dc
    }

    .dark .corp28-primary-nav button:hover,
    .dark .corp28-primary-nav button.corp28-primary-active {
      background: #143554;
      color: #7db5ff
    }

    .corp28-secondary-nav {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 2px 1px 0;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .corp28-secondary-nav::-webkit-scrollbar {
      display: none
    }

    .corp28-secondary-nav button {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 7px 11px;
      border-radius: 9px;
      border: 1px solid #e2e8f0;
      background: #fff;
      color: #64748b;
      font-size: 10px;
      font-weight: 700;
      white-space: nowrap;
    }

    .corp28-secondary-nav button .material-symbols-outlined {
      font-size: 14px
    }

    .corp28-secondary-nav button.active {
      color: #1d4ed8;
      border-color: #bfdbfe;
      background: #eff6ff;
    }

    .corp28-count {
      min-width: 17px;
      height: 17px;
      padding: 0 5px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #e8edf4;
      border-radius: 999px;
      font-size: 9px;
      color: #475569;
    }

    .corp28-secondary-nav button.active .corp28-count {
      background: #dbeafe;
      color: #1d4ed8
    }

    .dark .corp28-secondary-nav button {
      background: #0b2239;
      border-color: #20364d;
      color: #b7c8dc
    }

    .dark .corp28-secondary-nav button.active {
      background: #123b65;
      color: #8dc1ff;
      border-color: #285b89
    }

    @media(max-width:767px) {
      .corp28-primary-nav {
        justify-content: flex-start
      }

      .corp28-primary-nav button {
        padding: 0 12px;
        min-height: 38px
      }
    }

    /* PATCH 29 — pastel cards + readable contrast */
    .corp29-report-hero {
      background: linear-gradient(135deg, #f8fbff 0%, #fffdf7 55%, #f4fbf8 100%);
      border: 1px solid #dce7f2;
      box-shadow: 0 7px 22px rgba(15, 42, 75, .05)
    }

    .dark .corp29-report-hero {
      background: linear-gradient(135deg, #0b2239, #102a43);
      border-color: #24415d
    }

    .corp29-kpi {
      border: 1px solid transparent;
      box-shadow: 0 3px 12px rgba(15, 42, 75, .035)
    }

    .corp29-kpi-blue {
      background: #eef6ff;
      border-color: #cfe3fb
    }

    .corp29-kpi-violet {
      background: #f5f1ff;
      border-color: #e2d8fb
    }

    .corp29-kpi-green {
      background: #eefbf5;
      border-color: #cceedd
    }

    .corp29-kpi-rose {
      background: #fff1f3;
      border-color: #ffd5dc
    }

    .dark .corp29-kpi-blue,
    .dark .corp29-kpi-violet,
    .dark .corp29-kpi-green,
    .dark .corp29-kpi-rose {
      background: #102b46;
      border-color: #27445f
    }

    /* PATCH 30 — Corporate Portal readability & pastel design system */
    .corp30-summary {
      font-size: 12px
    }

    .corp30-batch-chip {
      display: inline-flex;
      align-items: center;
      padding: 7px 11px;
      border-radius: 999px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1d4ed8;
      font-size: 10px;
      font-weight: 800
    }

    .corp30-panel {
      background: #fff;
      border: 1px solid #dfe8f3;
      border-radius: 16px;
      padding: 18px;
      box-shadow: 0 4px 16px rgba(15, 42, 75, .04)
    }

    .dark .corp30-panel {
      background: #0b2239;
      border-color: #20364d
    }

    .corp30-panel-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 15px
    }

    .corp30-panel-head h4 {
      font-size: 13px;
      font-weight: 900;
      color: #172033
    }

    .dark .corp30-panel-head h4 {
      color: #fff
    }

    .corp30-panel-head p {
      font-size: 10px;
      color: #7b8aa0;
      margin-top: 2px
    }

    .corp30-metric {
      min-height: 100px;
      border-radius: 15px;
      padding: 14px;
      border: 1px solid transparent;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      box-shadow: 0 3px 12px rgba(15, 42, 75, .035)
    }

    .corp30-metric>.material-symbols-outlined {
      font-size: 20px;
      margin-top: 1px
    }

    .corp30-metric div {
      min-width: 0
    }

    .corp30-metric small {
      display: block;
      font-size: 9px;
      line-height: 1.25;
      text-transform: uppercase;
      letter-spacing: .04em;
      font-weight: 800;
      color: #53647a
    }

    .corp30-metric strong {
      display: block;
      font-size: 20px;
      line-height: 1.15;
      margin-top: 7px;
      color: #172033;
      font-weight: 900
    }

    .corp30-metric em {
      display: block;
      font-style: normal;
      font-size: 9px;
      color: #64748b;
      margin-top: 3px;
      font-weight: 700
    }

    .dark .corp30-metric small,
    .dark .corp30-metric em {
      color: #c1cedd
    }

    .dark .corp30-metric strong {
      color: #fff
    }

    .pastel-blue {
      background: #eef6ff !important;
      border-color: #cfe3fb !important
    }

    .pastel-green {
      background: #eefbf5 !important;
      border-color: #cceedd !important
    }

    .pastel-violet {
      background: #f5f1ff !important;
      border-color: #e2d8fb !important
    }

    .pastel-amber {
      background: #fff8e9 !important;
      border-color: #f7e4b5 !important
    }

    .pastel-mint {
      background: #edfbf8 !important;
      border-color: #c9eee5 !important
    }

    .pastel-rose {
      background: #fff1f3 !important;
      border-color: #ffd5dc !important
    }

    .dark .pastel-blue,
    .dark .pastel-green,
    .dark .pastel-violet,
    .dark .pastel-amber,
    .dark .pastel-mint,
    .dark .pastel-rose {
      background: #102b46 !important;
      border-color: #27445f !important
    }

    .corp30-mini {
      border: 1px solid transparent;
      border-radius: 13px;
      padding: 13px
    }

    .corp30-mini small {
      display: block;
      font-size: 9px;
      text-transform: uppercase;
      font-weight: 800;
      color: #64748b
    }

    .corp30-mini b {
      display: block;
      font-size: 20px;
      margin: 5px 0 2px;
      color: #172033
    }

    .corp30-mini span {
      font-size: 9px;
      color: #64748b
    }

    .dark .corp30-mini b {
      color: #fff
    }

    .dark .corp30-mini small,
    .dark .corp30-mini span {
      color: #c1cedd
    }

    .corp30-jump {
      display: flex;
      align-items: center;
      text-align: left;
      gap: 11px;
      border: 1px solid transparent;
      padding: 15px;
      border-radius: 14px;
      transition: .18s
    }

    .corp30-jump:hover {
      transform: translateY(-1px);
      box-shadow: 0 5px 15px rgba(15, 42, 75, .07)
    }

    .corp30-jump b {
      display: block;
      font-size: 12px;
      color: #172033
    }

    .corp30-jump small {
      display: block;
      font-size: 9px;
      color: #64748b;
      margin-top: 2px
    }

    .corp30-jump .arrow {
      margin-left: auto;
      font-size: 17px
    }

    .dark .corp30-jump b {
      color: #fff
    }

    .dark .corp30-jump small {
      color: #c1cedd
    }

    .corp30-insight {
      border: 1px solid transparent;
      border-radius: 14px;
      padding: 14px;
      min-height: 142px
    }

    .corp30-insight>.material-symbols-outlined {
      font-size: 20px
    }

    .corp30-insight>b {
      display: block;
      color: #172033;
      font-size: 11px;
      margin: 7px 0
    }

    .dark .corp30-insight>b {
      color: #fff
    }

    .corp30-clamp {
      font-size: 10px;
      line-height: 1.6;
      color: #596b81;
      text-align: justify;
      text-justify: inter-word;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden
    }

    .dark .corp30-clamp {
      color: #c1cedd
    }

    .corp30-feedback {
      border: 1px solid transparent;
      border-radius: 13px;
      padding: 13px
    }

    .corp30-feedback b {
      font-size: 11px;
      color: #172033
    }

    .corp30-feedback p {
      font-size: 10px;
      color: #64748b;
      margin-top: 6px;
      line-height: 1.5
    }

    .dark .corp30-feedback b {
      color: #fff
    }

    .dark .corp30-feedback p {
      color: #c1cedd
    }

    .corp30-assignment-hero {
      background: linear-gradient(135deg, #f3f7ff, #f5fbff 52%, #f6fbf7);
      border: 1px solid #dbe7f3;
      box-shadow: 0 5px 18px rgba(15, 42, 75, .04)
    }

    .dark .corp30-assignment-hero {
      background: #0d2944;
      border-color: #27445f
    }

    .corp30-btn {
      min-height: 36px;
      padding: 8px 12px;
      border-radius: 10px;
      border: 1px solid transparent;
      transition: .18s
    }

    .corp30-btn:hover {
      filter: brightness(.98);
      transform: translateY(-1px)
    }

    /* Softer action buttons inside Corporate Portal */
    .corp27-shell button.bg-blue-600,
    .corp27-shell button[class*="from-blue-600"],
    .corp27-shell button.bg-emerald-600,
    .corp27-shell button[class*="from-emerald-600"],
    .corp27-shell button.bg-amber-600,
    .corp27-shell button[class*="from-amber-500"],
    .corp27-shell button.bg-slate-900 {
      border-radius: 10px !important;
      box-shadow: none !important
    }

    .corp27-shell button.bg-blue-600 {
      background: #e8f2ff !important;
      color: #1d4ed8 !important;
      border: 1px solid #bfdbfe !important
    }

    .corp27-shell button.bg-emerald-600 {
      background: #eafaf3 !important;
      color: #047857 !important;
      border: 1px solid #bfe8d4 !important
    }

    .corp27-shell button.bg-amber-600 {
      background: #fff5dc !important;
      color: #92400e !important;
      border: 1px solid #f4ddb0 !important
    }

    .corp27-shell button.bg-slate-900 {
      background: #eef2f7 !important;
      color: #334155 !important;
      border: 1px solid #d7e0ea !important
    }

    .dark .corp27-shell button.bg-blue-600,
    .dark .corp27-shell button.bg-emerald-600,
    .dark .corp27-shell button.bg-amber-600,
    .dark .corp27-shell button.bg-slate-900 {
      background: #163652 !important;
      color: #d9eaff !important;
      border-color: #315572 !important
    }

    @media(max-width:767px) {
      .corp30-metric {
        min-height: 92px;
        padding: 12px
      }

      .corp30-metric strong {
        font-size: 18px
      }

      .corp30-panel {
        padding: 14px
      }
    }

    /* PATCH 33 — Builder / User / Access professional UI */
    .builder33-shell {
      --b33: #dfe8f3
    }

    .builder33-titlebar {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      padding: 3px 2px 0
    }

    .builder33-eyebrow {
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .12em;
      color: #2563eb;
      margin-bottom: 5px
    }

    .builder33-titlebar h3,
    .users33-hero h3 {
      font-size: 22px;
      line-height: 1.15;
      font-weight: 900;
      color: #172033;
      letter-spacing: -.03em
    }

    .builder33-titlebar p,
    .users33-hero p {
      font-size: 11px;
      color: #64748b;
      margin-top: 5px
    }

    .builder33-step {
      font-size: 9px;
      font-weight: 800;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 7px;
      background: #f4f7fb;
      border: 1px solid #dfe8f3;
      padding: 8px 11px;
      border-radius: 12px;
      white-space: nowrap
    }

    .builder33-step span {
      width: 20px;
      height: 20px;
      border-radius: 7px;
      background: #e8f2ff;
      color: #2563eb;
      display: inline-flex;
      align-items: center;
      justify-content: center
    }

    .builder33-head {
      background: linear-gradient(135deg, #fff 0%, #f8fbff 100%);
      border: 1px solid #d9e6f3;
      box-shadow: 0 8px 24px rgba(15, 42, 75, .055)
    }

    .builder33-head input[type="text"]:first-of-type {
      font-size: 21px !important;
      font-weight: 900 !important;
      letter-spacing: -.02em
    }

    .builder33-head select,
    .builder33-head textarea {
      border-radius: 10px !important
    }

    .builder33-question {
      background: #fff;
      border: 1px solid #dfe8f3;
      box-shadow: 0 5px 18px rgba(15, 42, 75, .04);
      position: relative
    }

    .builder33-question:before {
      content: "";
      position: absolute;
      left: 0;
      top: 15px;
      bottom: 15px;
      width: 3px;
      background: #bfdbfe;
      border-radius: 99px
    }

    .builder33-question:hover {
      border-color: #bfdbfe;
      box-shadow: 0 8px 22px rgba(37, 99, 235, .07)
    }

    .dark .builder33-titlebar h3,
    .dark .users33-hero h3 {
      color: #fff
    }

    .dark .builder33-step {
      background: #0f2b45;
      border-color: #25445f;
      color: #c1cedd
    }

    .dark .builder33-head,
    .dark .builder33-question {
      background: #0b2239;
      border-color: #20364d
    }

    .users33-hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 20px 22px;
      border-radius: 18px;
      background: linear-gradient(120deg, #f8fbff, #eef6ff);
      border: 1px solid #d8e8f8
    }

    .users33-add {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 10px 14px;
      border-radius: 11px;
      background: #e7f1ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap
    }

    .users33-kpi {
      min-height: 92px;
      border: 1px solid transparent;
      border-radius: 14px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      justify-content: center
    }

    .users33-kpi small {
      font-size: 9px;
      text-transform: uppercase;
      font-weight: 900;
      color: #64748b
    }

    .users33-kpi strong {
      font-size: 22px;
      line-height: 1.1;
      margin-top: 5px;
      color: #172033
    }

    .users33-kpi span {
      font-size: 9px;
      color: #7b8aa0;
      margin-top: 3px
    }

    .users33-shell .glass-card {
      border: 1px solid #dfe8f3 !important;
      box-shadow: 0 4px 16px rgba(15, 42, 75, .035) !important
    }

    .users33-shell table thead {
      background: #f6f8fb !important
    }

    .users33-shell table tbody tr:hover {
      background: #f8fbff !important
    }

    .dark .users33-hero {
      background: #0d2944;
      border-color: #24415d
    }

    .dark .users33-kpi strong {
      color: #fff
    }

    .dark .users33-kpi small,
    .dark .users33-kpi span {
      color: #c1cedd
    }

    .corp33-access {
      background: #fff;
      border: 1px solid #dfe8f3;
      border-radius: 18px;
      padding: 20px;
      box-shadow: 0 5px 18px rgba(15, 42, 75, .04)
    }

    .corp33-access-head {
      padding-bottom: 15px;
      border-bottom: 1px solid #e6edf5
    }

    .corp33-access table thead {
      background: #f6f8fb !important
    }

    .corp33-access table tbody tr:hover {
      background: #f8fbff !important
    }

    .dark .corp33-access {
      background: #0b2239;
      border-color: #20364d
    }

    .dark .corp33-access-head {
      border-color: #20364d
    }

    @media(max-width:767px) {
      .builder33-titlebar {
        align-items: flex-start;
        flex-direction: column
      }

      .builder33-step {
        width: 100%;
        overflow-x: auto
      }

      .users33-hero {
        align-items: flex-start;
        flex-direction: column
      }

      .users33-add {
        width: 100%;
        justify-content: center
      }
    }

    /* PATCH 34 — Participant Portal Professional */
    .participant34-shell {
      --p34-border: #dfe8f3
    }

    .participant34-hero {
      background: linear-gradient(125deg, #f8fbff 0%, #eef6ff 58%, #f6f3ff 100%);
      border: 1px solid #d8e7f6;
      box-shadow: 0 7px 22px rgba(15, 42, 75, .05)
    }

    .participant34-kpi {
      min-height: 94px;
      border: 1px solid transparent;
      border-radius: 15px;
      padding: 14px;
      display: flex;
      align-items: flex-start;
      gap: 10px
    }

    .participant34-kpi>.material-symbols-outlined {
      font-size: 19px;
      color: #2563eb
    }

    .participant34-kpi small {
      display: block;
      font-size: 9px;
      text-transform: uppercase;
      font-weight: 900;
      color: #64748b
    }

    .participant34-kpi strong {
      display: block;
      font-size: 19px;
      line-height: 1.2;
      margin-top: 5px;
      color: #172033;
      font-weight: 900;
      max-width: 150px
    }

    .participant34-kpi em {
      display: block;
      font-size: 9px;
      font-style: normal;
      color: #7b8aa0;
      margin-top: 3px
    }

    .participant34-tabs {
      display: flex;
      align-items: center;
      gap: 3px;
      padding: 4px;
      background: #f4f7fb;
      border: 1px solid #dfe8f3;
      border-radius: 12px;
      overflow-x: auto
    }

    .participant34-tabs button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 14px;
      border-radius: 9px;
      color: #64748b;
      font-size: 10px;
      font-weight: 800;
      white-space: nowrap
    }

    .participant34-tabs button .material-symbols-outlined {
      font-size: 15px
    }

    .participant34-tabs button.active {
      background: #fff;
      color: #1d4ed8;
      box-shadow: 0 2px 7px rgba(15, 42, 75, .08)
    }

    .participant34-panel {
      background: #fff;
      border: 1px solid #dfe8f3;
      box-shadow: 0 5px 18px rgba(15, 42, 75, .04)
    }

    .participant34-refresh {
      padding: 8px 11px;
      border-radius: 10px;
      background: #eef6ff;
      color: #1d4ed8;
      border: 1px solid #cfe3fb
    }

    .participant34-formcard {
      background: linear-gradient(180deg, #fff, #fbfdff);
      border: 1px solid #dfe8f3;
      box-shadow: 0 4px 14px rgba(15, 42, 75, .035);
      position: relative;
      overflow: hidden
    }

    .participant34-formcard:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: #93c5fd
    }

    .participant34-formcard:hover {
      transform: translateY(-2px);
      border-color: #bfdbfe;
      box-shadow: 0 9px 22px rgba(37, 99, 235, .07)
    }

    .participant34-action {
      background: #eaf3ff;
      color: #1d4ed8;
      border: 1px solid #cfe3fb
    }

    .participant34-action:hover {
      background: #deecff
    }

    .participant34-skeleton {
      background: linear-gradient(90deg, #f1f5f9 25%, #e8eef5 37%, #f1f5f9 63%);
      background-size: 400% 100%;
      animation: p34shimmer 1.4s ease infinite
    }

    @keyframes p34shimmer {
      0% {
        background-position: 100% 0
      }

      100% {
        background-position: 0 0
      }
    }

    .participant34-formloading {
      min-height: 360px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      background: #fff;
      border: 1px solid #dfe8f3;
      border-radius: 18px;
      box-shadow: 0 5px 18px rgba(15, 42, 75, .04)
    }

    .dark .participant34-hero,
    .dark .participant34-panel,
    .dark .participant34-formcard,
    .dark .participant34-formloading {
      background: #0b2239;
      border-color: #20364d
    }

    .dark .participant34-kpi strong {
      color: #fff
    }

    .dark .participant34-kpi small,
    .dark .participant34-kpi em {
      color: #c1cedd
    }

    .dark .participant34-tabs {
      background: #0d2944;
      border-color: #20364d
    }

    .dark .participant34-tabs button.active {
      background: #143554;
      color: #8dc1ff
    }

    .dark .participant34-action,
    .dark .participant34-refresh {
      background: #123b65;
      color: #9bc8ff;
      border-color: #285b89
    }

    @media(max-width:767px) {
      .participant34-kpi {
        min-height: 88px;
        padding: 12px
      }

      .participant34-hero {
        padding: 18px !important
      }

      .participant34-panel {
        padding: 16px !important
      }
    }

    /* PATCH 35 — Participant performance + Corporate logo */
    .participant35-loadbar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 12px;
      border-radius: 11px;
      background: #eef6ff;
      border: 1px solid #cfe3fb;
      color: #2563eb;
      font-size: 10px;
      font-weight: 800
    }

    .corp35-logo-upload {
      padding: 14px;
      border-radius: 15px;
      background: #f8fbff;
      border: 1px solid #dce8f4
    }

    .corp35-logo-preview {
      width: 72px;
      height: 72px;
      border-radius: 16px;
      background: #fff;
      border: 1px solid #dbe5ef;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      color: #94a3b8;
      box-shadow: 0 3px 10px rgba(15, 42, 75, .04);
      flex: none
    }

    .corp35-logo-preview img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 7px
    }

    .corp35-logo-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 12px;
      border-radius: 10px;
      background: #eaf3ff;
      border: 1px solid #cfe3fb;
      color: #1d4ed8;
      font-size: 10px;
      font-weight: 900;
      cursor: pointer
    }

    .dark .corp35-logo-upload {
      background: #0d2944;
      border-color: #25445f
    }

    .dark .corp35-logo-preview {
      background: #fff;
      border-color: #25445f
    }

    /* PATCH 39 / PATCH C — Final compact mobile UI */
    @media (max-width:767px) {

      html,
      body {
        overflow-x: hidden !important
      }

      .mobileC-main {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden
      }

      .mobileC-drawer {
        height: 100dvh;
        background: linear-gradient(180deg, #082b50 0%, #03213d 100%) !important;
        color: #fff !important
      }

      .mobileC-nav a,
      .mobileC-nav button {
        min-height: 40px !important;
        padding: 8px 11px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        line-height: 1.15 !important
      }

      .mobileC-nav .material-symbols-outlined {
        font-size: 20px !important
      }

      .mobileC-nav [class*="uppercase"] {
        font-size: 9px !important;
        padding-top: 7px !important;
        padding-bottom: 5px !important
      }

      .mobileC-topbar {
        position: sticky;
        top: 0;
        z-index: 45;
        background: rgba(248, 250, 252, .94);
        backdrop-filter: blur(14px);
        min-height: 52px
      }

      .dark .mobileC-topbar {
        background: rgba(5, 23, 40, .94)
      }

      .mobileC-menu-btn {
        width: 36px;
        height: 36px;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: #eaf3ff;
        color: #1d4ed8;
        border: 1px solid #cfe3fb
      }

      .dark .mobileC-menu-btn {
        background: #123b65;
        color: #9bc8ff;
        border-color: #285b89
      }

      .mobileC-title {
        line-height: 1.15 !important;
        white-space: nowrap !important;
        max-width: 52vw
      }

      .mobileC-actions>button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important
      }

      .mobileC-actions>template+button {
        width: 36px !important
      }

      .mobileC-actions [class*="px-4"],
      .mobileC-actions [class*="px-3"] {
        padding-left: 0 !important;
        padding-right: 0 !important
      }

      .mobileC-actions .hidden.sm\:inline {
        display: none !important
      }

      .mobileC-bottom {
        padding-bottom: max(4px, env(safe-area-inset-bottom)) !important
      }

      .mobileC-bottom .material-symbols-outlined {
        font-size: 19px !important
      }

      .mobileC-bottom span.text-\[10px\] {
        font-size: 9px !important;
        line-height: 1.1
      }

      /* Prevent long headings from creating tall vertical stacks */
      main h1,
      main h2,
      main h3,
      main h4 {
        word-break: normal !important;
        overflow-wrap: normal !important
      }

      main h2,
      main h3 {
        line-height: 1.2 !important
      }

      main .text-2xl,
      main .text-3xl {
        font-size: 1.2rem !important;
        line-height: 1.2 !important
      }

      main .text-xl {
        font-size: 1.05rem !important
      }

      main p {
        line-height: 1.45
      }

      /* Compact panels/cards */
      main .rounded-3xl {
        border-radius: 16px !important
      }

      main .rounded-2xl {
        border-radius: 13px !important
      }

      main .p-7,
      main .p-8 {
        padding: 16px !important
      }

      main .p-6 {
        padding: 14px !important
      }

      main .p-5 {
        padding: 12px !important
      }

      main .gap-6 {
        gap: 12px !important
      }

      main .gap-5 {
        gap: 10px !important
      }

      main .space-y-6>:not([hidden])~:not([hidden]) {
        margin-top: 12px !important
      }

      /* KPI grids become compact two-column cards */
      .corp30-metric,
      .participant34-kpi,
      .users33-kpi,
      .patch24-kpi {
        min-height: 82px !important;
        padding: 11px !important
      }

      .corp30-metric strong,
      .participant34-kpi strong,
      .users33-kpi strong {
        font-size: 17px !important
      }

      .corp30-metric small,
      .participant34-kpi small,
      .users33-kpi small {
        font-size: 8px !important;
        line-height: 1.2 !important
      }

      .corp30-metric em,
      .participant34-kpi em,
      .users33-kpi span {
        font-size: 8px !important
      }

      /* Horizontal controls instead of tall wrapping */
      .corp28-primary-nav,
      .corp28-secondary-nav,
      .participant34-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none
      }

      .corp28-primary-nav::-webkit-scrollbar,
      .corp28-secondary-nav::-webkit-scrollbar,
      .participant34-tabs::-webkit-scrollbar {
        display: none
      }

      .corp28-primary-nav button {
        min-height: 36px !important;
        padding: 0 11px !important;
        font-size: 10px !important
      }

      .corp28-primary-nav button span:not(.material-symbols-outlined) {
        white-space: nowrap !important
      }

      /* Toolbar fields/buttons remain compact and scroll instead of stacking endlessly */
      .corp27-toolbar>.flex,
      .corp30-summary>.flex {
        gap: 7px !important
      }

      .corp27-toolbar input,
      .corp27-toolbar select {
        min-height: 36px !important;
        font-size: 10px !important
      }

      /* Tables: keep readable columns and use horizontal scrolling */
      main .overflow-x-auto {
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch
      }

      main table {
        min-width: 720px;
        font-size: 10px !important
      }

      main table th,
      main table td {
        padding: 9px 10px !important;
        white-space: nowrap
      }

      main table td:nth-child(2) {
        white-space: normal;
        min-width: 170px
      }

      /* Builder */
      .builder33-titlebar {
        gap: 8px !important
      }

      .builder33-step {
        font-size: 8px !important;
        padding: 7px 9px !important;
        max-width: 100%;
        overflow-x: auto
      }

      .builder33-head {
        padding: 14px !important
      }

      .builder33-question {
        padding: 13px !important
      }

      .builder33-question input,
      .builder33-question select,
      .builder33-question textarea {
        font-size: 11px !important
      }

      /* Corporate company heading */
      .corp27-company-head {
        gap: 8px !important
      }

      .corp27-company-head h3 {
        font-size: 19px !important;
        line-height: 1.15 !important
      }

      .corp27-org-logo {
        width: 46px !important;
        height: 46px !important;
        border-radius: 13px !important
      }

      /* Charts not excessively tall on phones */
      main canvas {
        max-height: 260px !important
      }

      main .h-72 {
        height: 240px !important
      }

      /* Modals fit phone viewport */
      [class*="fixed"][class*="inset-0"]>div {
        max-width: calc(100vw - 20px)
      }

      [class*="max-h-\[90vh\]"] {
        max-height: 86dvh !important
      }
    }

    /* PATCH 40 — Mobile topbar touch-target collision fix */
    @media (max-width:767px) {
      .mobileC-topbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        column-gap: 8px !important;
        width: 100% !important;
      }

      .mobileC-topbar>div:first-child {
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
      }

      .mobileC-menu-safe {
        position: relative !important;
        z-index: 3 !important;
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
      }

      .mobileC-actions {
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        max-width: calc(100vw - 155px) !important;
        overflow: visible !important;
      }

      .mobileC-actions>button,
      .mobileC-refresh-safe {
        position: relative !important;
        z-index: 2 !important;
        flex: 0 0 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
      }

      .mobileC-actions [x-show][class*="rounded-full"],
      .mobileC-actions .rounded-full {
        max-width: 126px !important;
        overflow: hidden !important;
      }

      .mobileC-actions .rounded-full span {
        white-space: nowrap !important;
      }

      .mobileC-actions .rounded-full span:not(.material-symbols-outlined):not(.text-\[10px\]) {
        max-width: 72px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      /* On very narrow phones simplify the role chip so controls never overlap. */
      @media (max-width:420px) {
        .mobileC-actions .rounded-full {
          max-width: 92px !important;
          padding-left: 8px !important;
          padding-right: 8px !important;
        }

        .mobileC-actions .rounded-full .bg-blue-600,
        .mobileC-actions .rounded-full [class*="bg-blue-600"] {
          display: none !important;
        }

        .mobileC-title {
          max-width: 38vw !important
        }
      }
    }

    /* PATCH 41 — Mobile identity header refinement */
    @media(max-width:767px) {
      .mobileC-topbar {
        grid-template-columns: minmax(0, 1fr) auto !important;
        column-gap: 7px !important
      }

      .mobileC-title {
        max-width: none !important;
        min-width: 0 !important
      }

      .mobileC-appname {
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 13px !important;
        letter-spacing: -.01em !important;
        line-height: 1.15 !important
      }

      .mobileC-actions {
        max-width: none !important;
        gap: 6px !important
      }

      .mobile41-role-avatar {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        flex: 0 0 36px !important;
        border-radius: 50% !important;
        background: #2563eb !important;
        color: #fff !important;
        border: 1px solid #1d4ed8 !important;
        box-shadow: 0 3px 9px rgba(37, 99, 235, .22) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        letter-spacing: .02em !important;
        touch-action: manipulation !important
      }

      .dark .mobile41-role-avatar {
        background: #3b82f6 !important;
        border-color: #60a5fa !important
      }

      .mobileC-actions>button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important
      }

      .mobileC-menu-safe {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        flex-basis: 36px !important
      }
    }

    /* PATCH 42 — Corporate overview + clean logo + assessment experience */
    .patch42-corporate-overview {
      background: #fff;
      border: 1px solid #dfe8f3;
      border-radius: 18px;
      padding: 20px;
      box-shadow: 0 5px 18px rgba(15, 42, 75, .04)
    }

    .dark .patch42-corporate-overview {
      background: #0b2239;
      border-color: #20364d
    }

    .patch42-corp-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px
    }

    .patch42-corp-open {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 12px;
      border-radius: 10px;
      background: #eaf3ff;
      color: #1d4ed8;
      border: 1px solid #cfe3fb;
      font-size: 10px;
      font-weight: 900
    }

    .patch42-corp-kpi {
      padding: 13px;
      border-radius: 13px;
      border: 1px solid transparent
    }

    .patch42-corp-kpi small {
      display: block;
      font-size: 8px;
      text-transform: uppercase;
      font-weight: 900;
      color: #64748b
    }

    .patch42-corp-kpi strong {
      display: block;
      font-size: 21px;
      color: #172033;
      margin-top: 4px
    }

    .patch42-corp-kpi span {
      font-size: 8px;
      color: #7b8aa0
    }

    .dark .patch42-corp-kpi strong {
      color: #fff
    }

    .patch42-company-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px
    }

    .patch42-company-row {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 10px;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: #fbfdff
    }

    .patch42-company-row:hover {
      border-color: #bfdbfe;
      background: #f6faff
    }

    .patch42-company-logo {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      border: 1px solid #dbe5ef;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      color: #94a3b8;
      flex: none
    }

    .patch42-company-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 3px
    }

    .patch42-code {
      font-size: 8px;
      padding: 3px 6px;
      border-radius: 6px;
      background: #eaf3ff;
      color: #1d4ed8;
      font-weight: 900
    }

    /* corporate logo: no blue tile behind uploaded image */
    .corp27-org-logo {
      background: #fff !important;
      border-color: #dbe5ef !important;
      box-shadow: 0 3px 10px rgba(15, 42, 75, .05) !important
    }

    .corp27-org-logo>span {
      color: #2563eb !important
    }

    .dark .corp27-org-logo {
      background: #fff !important;
      border-color: #dbe5ef !important
    }

    .patch42-assessment-layout {
      display: grid;
      grid-template-columns: 190px minmax(0, 1fr) 210px;
      gap: 16px;
      align-items: start;
      max-width: 1180px;
      margin: 0 auto
    }

    .patch42-assessment-steps,
    .patch42-assessment-visual {
      position: sticky;
      top: 78px;
      background: #f8fbff;
      border: 1px solid #dfe8f3;
      border-radius: 16px;
      padding: 16px;
      min-height: 420px
    }

    .patch42-assessment-center {
      min-width: 0
    }

    .patch42-side-title {
      font-size: 12px;
      font-weight: 900;
      color: #172033;
      line-height: 1.3
    }

    .patch42-side-progress {
      height: 6px;
      background: #dfe8f3;
      border-radius: 999px;
      overflow: hidden;
      margin-top: 10px
    }

    .patch42-side-progress>div {
      height: 100%;
      background: #2563eb;
      border-radius: 999px
    }

    .patch42-step-list {
      margin-top: 20px;
      display: grid;
      gap: 9px
    }

    .patch42-step {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #94a3b8;
      font-size: 10px;
      font-weight: 800
    }

    .patch42-step span {
      width: 23px;
      height: 23px;
      border-radius: 50%;
      background: #dbe4ee;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px
    }

    .patch42-step.active {
      color: #1d4ed8
    }

    .patch42-step.active span,
    .patch42-step.done span {
      background: #2563eb;
      color: #fff
    }

    .patch42-step.done {
      color: #475569
    }

    .patch42-side-quote {
      margin-top: 30px;
      padding-top: 15px;
      border-top: 1px solid #e2e8f0;
      font-size: 10px;
      font-style: italic;
      line-height: 1.55;
      color: #64748b
    }

    .patch42-assessment-visual {
      background: linear-gradient(180deg, #f8fbff, #eef6ff);
      display: flex;
      flex-direction: column;
      justify-content: space-between
    }

    .patch42-visual-quote {
      font-size: 17px;
      line-height: 1.35;
      color: #334155;
      font-style: italic
    }

    .patch42-visual-quote b {
      color: #1d4ed8
    }

    .patch42-visual-art {
      height: 220px;
      border-radius: 14px;
      background: linear-gradient(180deg, #dbeafe, #bfdbfe);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: center
    }

    .patch42-visual-art .material-symbols-outlined {
      font-size: 110px;
      color: #6b9bd1;
      transform: translateY(18px)
    }

    .patch42-visual-art div {
      position: absolute;
      width: 26px;
      height: 70px;
      background: #172033;
      border-radius: 16px 16px 5px 5px;
      bottom: 34px;
      left: 50%;
      transform: translateX(-50%)
    }

    .patch42-question-focus {
      scroll-margin-top: 90px
    }

    .patch42-question-nav {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 10px;
      padding: 12px 0
    }

    .patch42-prev,
    .patch42-next,
    .patch42-submit {
      min-height: 40px;
      padding: 9px 14px;
      border-radius: 10px;
      font-size: 10px;
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px
    }

    .patch42-prev {
      justify-self: start;
      background: #fff;
      border: 1px solid #dbe5ef;
      color: #475569
    }

    .patch42-next,
    .patch42-submit {
      justify-self: end;
      background: #2563eb;
      color: #fff;
      border: 1px solid #1d4ed8
    }

    .patch42-prev:disabled {
      opacity: .35
    }

    .patch42-qposition {
      font-size: 10px;
      color: #64748b;
      display: flex;
      gap: 4px
    }

    .patch42-qposition b {
      color: #1d4ed8
    }

    .dark .patch42-assessment-steps,
    .dark .patch42-assessment-visual {
      background: #0d2944;
      border-color: #20364d
    }

    .dark .patch42-side-title,
    .dark .patch42-visual-quote {
      color: #fff
    }

    @media(max-width:1023px) {
      .patch42-assessment-layout {
        grid-template-columns: 150px minmax(0, 1fr)
      }

      .patch42-assessment-visual {
        display: none
      }
    }

    @media(max-width:767px) {
      .patch42-company-list {
        grid-template-columns: 1fr
      }

      .patch42-corp-head {
        align-items: flex-start;
        flex-direction: column
      }

      .patch42-corporate-overview {
        padding: 14px
      }

      .patch42-assessment-layout {
        display: block
      }

      .patch42-assessment-steps {
        position: static;
        min-height: 0;
        padding: 10px 12px;
        margin-bottom: 10px
      }

      .patch42-assessment-steps .patch42-side-title,
      .patch42-side-quote {
        display: none
      }

      .patch42-step-list {
        display: flex;
        margin-top: 9px;
        gap: 5px;
        overflow-x: auto
      }

      .patch42-step {
        flex: 1;
        min-width: max-content;
        font-size: 8px
      }

      .patch42-step span {
        width: 19px;
        height: 19px
      }

      .patch42-assessment-visual {
        display: none
      }

      .patch42-question-nav {
        position: sticky;
        bottom: 8px;
        z-index: 35;
        background: rgba(248, 250, 252, .98);
        padding: 10px 14px;
        border: 1px solid #dfe8f3;
        border-radius: 14px;
        backdrop-filter: blur(10px);
        box-shadow: 0 -4px 16px rgba(15, 23, 42, .08)
      }

      .dark .patch42-question-nav {
        background: rgba(5, 23, 40, .98);
        border-color: #20364d;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .3)
      }

      .patch42-prev,
      .patch42-next,
      .patch42-submit {
        min-height: 38px;
        padding: 8px 10px
      }

      .patch42-qposition {
        font-size: 9px
      }

      .patch42-question-focus {
        padding: 13px !important
      }

      .patch42-question-focus label {
        padding: 10px !important
      }

      .patch42-question-focus .text-sm {
        font-size: 12px !important
      }

      .patch42-question-focus .text-xs {
        font-size: 10px !important
      }
    }

    @media(min-width:768px) {
      .patch42-old-progress {
        display: none !important
      }
    }

    /* PATCH 43 — Batch package sharing + assessment polish */
    .batch43-share,
    .batch43-wa {
      min-height: 34px;
      padding: 7px 10px;
      border-radius: 9px;
      font-size: 10px;
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      gap: 5px
    }

    .batch43-share {
      background: #eaf3ff;
      color: #1d4ed8;
      border: 1px solid #cfe3fb
    }

    .batch43-wa {
      background: #eafaf3;
      color: #047857;
      border: 1px solid #c7ecd9
    }

    .batch43-package-summary {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px
    }

    .batch43-package-summary>div {
      padding: 10px;
      border-radius: 11px;
      background: #f8fafc;
      border: 1px solid #e2e8f0
    }

    .batch43-package-summary small {
      display: block;
      font-size: 8px;
      text-transform: uppercase;
      font-weight: 900;
      color: #64748b
    }

    .batch43-package-summary b {
      display: block;
      font-size: 11px;
      margin-top: 3px;
      color: #172033
    }

    .batch43-formline {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 7px 9px;
      border-radius: 9px;
      background: #eef6ff;
      border: 1px solid #d9eafb;
      color: #334155;
      font-size: 10px;
      font-weight: 700
    }

    .batch43-formline .material-symbols-outlined {
      font-size: 14px;
      color: #2563eb
    }

    .batch43-package-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      margin-bottom: 12px;
      border-radius: 13px;
      background: linear-gradient(90deg, #eef6ff, #f5f1ff);
      border: 1px solid #d8e6f5
    }

    .batch43-package-banner>.material-symbols-outlined {
      color: #2563eb
    }

    .patch42-assessment-steps {
      background: #f3f7fb !important;
      color: #334155 !important;
      border-color: #dbe5ef !important
    }

    .patch42-assessment-visual {
      background: linear-gradient(180deg, #f7fbff, #eef8f4) !important;
      color: #334155 !important;
      border-color: #dbe8e1 !important
    }

    .patch42-visual-art {
      background: linear-gradient(180deg, #e8f1fb, #dcece6) !important
    }

    .patch42-visual-art .material-symbols-outlined {
      color: #89a9bd !important
    }

    .patch42-visual-art div {
      background: #475569 !important
    }

    .patch42-side-title,
    .patch42-visual-quote {
      color: #334155 !important
    }

    .patch42-side-quote {
      color: #64748b !important
    }

    /* Compact form header */
    .patch42-assessment-center>.glass-card.rounded-2xl.p-6 {
      padding: 13px 16px !important;
      border-top-width: 2px !important;
      box-shadow: 0 3px 12px rgba(15, 42, 75, .035) !important
    }

    .patch42-assessment-center>.glass-card.rounded-2xl.p-6 h3 {
      font-size: 16px !important;
      line-height: 1.25 !important
    }

    .patch42-assessment-center>.glass-card.rounded-2xl.p-6 p {
      font-size: 10px !important;
      line-height: 1.45 !important
    }

    .patch42-assessment-center>.glass-card.rounded-2xl.p-6 .text-4xl {
      font-size: 25px !important
    }

    /* Question becomes the visual focus */
    .patch42-question-focus .text-sm.font-bold {
      font-size: 16px !important;
      line-height: 1.45 !important
    }

    .patch42-question-focus .patch24-qnum {
      font-size: 11px !important
    }

    .patch42-question-focus label span.text-xs {
      font-size: 12px !important;
      line-height: 1.45 !important
    }

    @media(max-width:767px) {
      .patch42-question-focus .text-sm.font-bold {
        font-size: 14px !important
      }

      .patch42-question-focus label span.text-xs {
        font-size: 11px !important
      }

      .batch43-package-banner {
        padding: 10px 12px
      }

      .batch43-package-summary {
        grid-template-columns: 1fr
      }

      .patch42-assessment-center>.glass-card.rounded-2xl.p-6 {
        padding: 11px 12px !important
      }

      .patch42-assessment-center>.glass-card.rounded-2xl.p-6 h3 {
        font-size: 14px !important
      }
    }

    /* PATCH 46 — Guaranteed pastel assessment side panels */
    .patch42-assessment-steps {
      background: #f6f8fc !important;
      color: #334155 !important;
      border: 1px solid #dbe5ef !important;
      box-shadow: 0 5px 16px rgba(15, 42, 75, .04) !important;
    }

    .patch42-assessment-visual {
      background: linear-gradient(180deg, #f8fbff 0%, #f1f8f5 100%) !important;
      color: #334155 !important;
      border: 1px solid #dce9e4 !important;
      box-shadow: 0 5px 16px rgba(15, 42, 75, .04) !important;
    }

    .patch42-assessment-steps *,
    .patch42-assessment-visual * {
      text-shadow: none !important;
    }

    .patch42-side-title {
      color: #1e293b !important
    }

    .patch42-side-quote {
      color: #64748b !important;
      border-color: #d9e2ec !important
    }

    .patch42-step {
      color: #64748b !important
    }

    .patch42-step.active {
      color: #1d4ed8 !important
    }

    .patch42-step.done {
      color: #475569 !important
    }

    .patch42-step span {
      background: #e3eaf2 !important;
      color: #64748b !important
    }

    .patch42-step.active span,
    .patch42-step.done span {
      background: #dbeafe !important;
      color: #1d4ed8 !important
    }

    .patch42-side-progress {
      background: #e2e8f0 !important
    }

    .patch42-side-progress>div {
      background: #60a5fa !important
    }

    .patch42-visual-quote {
      color: #334155 !important
    }

    .patch42-visual-quote b {
      color: #2563eb !important
    }

    .patch42-visual-art {
      background: linear-gradient(180deg, #eaf3fb, #e0eee9) !important;
      border: 1px solid #d7e6e1 !important;
    }

    .patch42-visual-art .material-symbols-outlined {
      color: #8aa7b9 !important
    }

    .patch42-visual-art div {
      background: #64748b !important
    }

    .dark .patch42-assessment-steps,
    .dark .patch42-assessment-visual {
      background: #f6f8fc !important;
      color: #334155 !important;
      border-color: #dbe5ef !important;
    }

    .dark .patch42-side-title,
    .dark .patch42-visual-quote {
      color: #334155 !important
    }

    @media(max-width:767px) {
      .patch42-assessment-steps {
        background: #f7f9fc !important;
        border-color: #dbe5ef !important;
      }
    }

    /* PATCH 49 — URL context anti-flash */
    [x-cloak] {
      display: none !important
    }

    /* PATCH 50 — Full-screen bootstrap gate */
    body:has([x-show="!urlContextReady || batchPackageContext.loading"][style*="display: block"]) {
      overflow: hidden !important;
    }

    /* PATCH 53 — Registration modal scroll-safe on PC + mobile */
    .auth53-overlay {
      overflow-y: auto !important;
      overflow-x: hidden !important;
      align-items: flex-start !important;
      justify-content: center !important;
      padding-top: max(16px, 2vh) !important;
      padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    .auth53-card {
      margin: auto !important;
      max-height: none !important;
      overflow: visible !important;
      flex-shrink: 0 !important;
    }

    @media (min-width:768px) {
      .auth53-overlay {
        padding-top: 24px !important;
        padding-bottom: 32px !important;
      }

      .auth53-card {
        width: min(100%, 760px) !important;
      }
    }

    @media (max-height:760px) {
      .auth53-overlay {
        align-items: flex-start !important;
        padding-top: 10px !important;
      }
    }

    @media (max-width:767px) {
      .auth53-overlay {
        padding: 10px 8px max(24px, env(safe-area-inset-bottom)) !important;
      }

      .auth53-card {
        width: 100% !important;
        max-width: 100% !important;
      }
    }

    /* If a nested modal section had an old height lock, release it for auth only */
    .auth53-card [class*="max-h-"] {
      max-height: none !important;
    }

    .auth53-card [class*="overflow-y-auto"] {
      max-height: none !important;
      overflow: visible !important;
    }