* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    }

    .material-symbols-outlined {
      font-family: 'Material Symbols Outlined';
      font-weight: normal;
      font-style: normal;
      font-size: 22px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      font-feature-settings: 'liga';
      -webkit-font-smoothing: antialiased;
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    .filled-icon {
      font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    :root {
      /* Kanvas app + Stitch: satu warna agar section tidak “nyangkut” beda dari body */
      --bg: #f7f9fc;
      --sidebar-w: 260px;
      --st-muted: #f2f4f7;
      --st-outline: rgba(195, 197, 215, .35);
      --sf: #fff;
      --pr: #1a56db;
      --pl: #3b82f6;
      --pb: #eff6ff;
      --ok: #059669;
      --ob: #ecfdf5;
      --wn: #d97706;
      --wb: #fffbeb;
      --er: #dc2626;
      --eb: #fef2f2;
      --tx: #111827;
      --ts: #4b5563;
      --tm: #9ca3af;
      --bd: #e5e7eb;
      --sh: 0 1px 3px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .04);
      --hsh: 0 4px 16px rgba(0, 0, 0, .1);
      --mg: #7c3aed;
      --mb: #f5f3ff;
    }

    html {
      /* Cegah lebar viewport “lompat” saat scrollbar muncul/hilang → tidak memicu redraw canvas */
      scrollbar-gutter: stable;
    }

    html,
    body {
      height: 100%;
      overflow-x: hidden;
    }

    body {
      background: var(--bg);
      color: var(--tx);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
    }

    .loverlay {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      padding: 1.25rem;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      background:
        radial-gradient(1200px 600px at 15% -10%, rgba(59, 130, 246, .35), transparent 55%),
        radial-gradient(900px 500px at 95% 110%, rgba(124, 58, 237, .22), transparent 50%),
        linear-gradient(160deg, #0b1220 0%, #111827 45%, #0f172a 100%);
    }

    .loverlay::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url('bg-login.jpeg') center/cover no-repeat;
      opacity: .22;
      pointer-events: none;
    }

    /* Satu kolom di semua lebar layar — sama dengan tampilan mobile */
    .login-shell {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: min(480px, calc(100% - 2rem));
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      border-radius: 28px;
      overflow: hidden;
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, .08),
        0 25px 80px rgba(0, 0, 0, .45);
    }

    .login-form-col {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      background: rgba(255, 255, 255, .04);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      padding: 1.5rem;
    }

    .login-mobile-hero {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.35rem;
      color: #fff;
    }

    .login-foot-copy {
      margin: 1.25rem 0 0;
      text-align: center;
      font-size: .72rem;
      color: rgba(255, 255, 255, .55);
      letter-spacing: .02em;
    }

    .login-mobile-hero .ico {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .2);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
    }

    .login-mobile-hero .ico img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 8px;
    }

    .login-mobile-hero .tx strong {
      display: block;
      font-size: 1.05rem;
      font-weight: 800;
      letter-spacing: -.02em;
    }

    .login-mobile-hero .tx span {
      font-size: .82rem;
      opacity: .75;
    }

    .lcard {
      background: rgba(255, 255, 255, .97);
      border-radius: 22px;
      padding: 1.65rem 1.5rem 1.75rem;
      box-shadow: 0 16px 48px rgba(0, 0, 0, .12);
      border: 1px solid rgba(255, 255, 255, .65);
    }

    .lcard-hd {
      margin-bottom: 1.25rem;
    }

    .lcard-hd h3 {
      font-size: 1.15rem;
      font-weight: 800;
      color: var(--tx);
      letter-spacing: -.02em;
    }

    .lcard-hd p {
      font-size: .82rem;
      color: var(--tm);
      margin-top: .25rem;
    }

    .ltabs {
      display: flex;
      background: #f1f5f9;
      border-radius: 14px;
      padding: 4px;
      margin-bottom: 1.35rem;
      gap: 2px;
    }

    .ltab {
      flex: 1;
      padding: .58rem .4rem;
      text-align: center;
      border-radius: 11px;
      font-weight: 600;
      font-size: .72rem;
      cursor: pointer;
      color: var(--ts);
      transition: color .2s, background .2s, box-shadow .2s;
      border: none;
      background: transparent;
      font-family: inherit;
    }

    @media (min-width: 400px) {
      .ltab {
        font-size: .78rem;
        padding: .62rem .5rem;
      }
    }

    .ltab.active {
      background: #fff;
      color: var(--pr);
      box-shadow: 0 2px 10px rgba(15, 23, 42, .08);
    }

    .ltab:hover:not(.active) {
      color: var(--tx);
    }

    .lsec {
      display: none;
    }

    .lsec.active {
      display: block;
    }

    .lf {
      margin-bottom: 1.05rem;
    }

    .lf label {
      display: block;
      font-weight: 600;
      font-size: .8rem;
      color: var(--ts);
      margin-bottom: .35rem;
    }

    .lf input {
      width: 100%;
      padding: .82rem 1rem;
      border-radius: 12px;
      border: 1.5px solid #e2e8f0;
      font-size: .94rem;
      transition: border-color .2s, box-shadow .2s;
      background: #f8fafc;
    }

    .lf input:focus {
      outline: none;
      border-color: var(--pr);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(26, 86, 219, .12);
    }

    .lbtn {
      width: 100%;
      padding: .92rem 1rem;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--pr) 0%, #1e40af 100%);
      color: #fff;
      border: none;
      font-weight: 700;
      font-size: .95rem;
      cursor: pointer;
      transition: transform .15s, box-shadow .2s, filter .2s;
      margin-top: .35rem;
      box-shadow: 0 4px 14px rgba(26, 86, 219, .35);
    }

    .lbtn:hover {
      filter: brightness(1.05);
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(26, 86, 219, .4);
    }

    .lbtn:active {
      transform: translateY(0);
    }

    .lerr {
      color: var(--er);
      text-align: center;
      margin-top: .75rem;
      font-size: .85rem;
      font-weight: 500;
    }

    .linfo {
      background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
      border: 1px solid #bfdbfe;
      border-radius: 12px;
      padding: .75rem .9rem;
      margin-bottom: 1.1rem;
      font-size: .8rem;
      color: #1e40af;
      line-height: 1.5;
    }

    .pww {
      position: relative;
    }

    .pww input {
      padding-right: 3rem;
    }

    .pwtog {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      font-size: 1rem;
      color: var(--tm);
      padding: 6px;
      border-radius: 8px;
      transition: background .15s, color .15s;
    }

    .pwtog:hover {
      background: #f1f5f9;
      color: var(--ts);
    }

    .topbar {
      background: #fff;
      min-height: 60px;
      padding: 0.55rem 1.15rem;
      box-shadow: 0 1px 0 rgba(15, 23, 42, .06);
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem 1rem;
      border-bottom: 1px solid var(--bd);
    }

    .tlogo {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .tlogo img {
      width: 42px;
      height: 42px;
      object-fit: contain;
    }

    .tbl h1 {
      font-size: 1.25rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: #0f172a;
    }

    .tbl p,
    .tb-sub {
      color: #64748b;
      font-size: .8rem;
      font-weight: 500;
      margin-top: 1px;
      line-height: 1.35;
    }

    .tbr {
      display: flex;
      gap: .65rem;
      align-items: center;
      flex-wrap: nowrap;
      min-width: 0;
    }

    .tbr-stitch {
      flex: 1;
      justify-content: flex-end;
      gap: .75rem;
      min-width: 0;
    }

    .tb-meta {
      display: flex;
      align-items: center;
      gap: .5rem;
      flex-wrap: nowrap;
      min-width: 0;
    }

    .tb-meta-pro {
      gap: .45rem;
    }

    .tb-clock-wrap {
      display: flex;
      align-items: center;
      gap: .4rem;
      padding: .32rem .55rem .32rem .45rem;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      flex-shrink: 0;
    }

    .tb-clock-ico {
      font-size: 18px !important;
      color: #94a3b8;
    }

    .tb-clock-text {
      display: flex;
      flex-direction: column;
      gap: 0;
      min-width: 0;
    }

    .tb-clock-time {
      font-size: .8125rem;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: #0f172a;
      letter-spacing: -0.02em;
      line-height: 1.2;
    }

    .tb-clock-date {
      display: block;
      font-size: .62rem;
      font-weight: 600;
      color: #64748b;
      line-height: 1.25;
      max-width: 9.5rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .tb-actions {
      display: flex;
      align-items: center;
      gap: .15rem;
      flex-shrink: 0;
    }

    .tb-user-block {
      display: none;
      align-items: center;
      gap: .55rem;
      min-width: 0;
      padding-left: .35rem;
    }

    .tb-avatar-pro {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: #f1f5f9;
      color: #475569;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      flex-shrink: 0;
    }

    .tb-user-block.is-admin .tb-avatar-pro {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .tb-user-block.is-manager .tb-avatar-pro {
      background: #ede9fe;
      color: #5b21b6;
    }

    .tb-user-text {
      display: flex;
      flex-direction: column;
      gap: 0;
      min-width: 0;
      max-width: 11rem;
    }

    .tb-user-name {
      font-size: .8rem;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .tb-user-role {
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: #94a3b8;
      line-height: 1.2;
    }

    .tb-logout {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .25rem;
      margin-left: .15rem;
      padding: .4rem .55rem;
      border: none;
      border-radius: 10px;
      background: transparent;
      color: #64748b;
      font-size: .72rem;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: background .15s ease, color .15s ease;
      flex-shrink: 0;
    }

    .tb-logout:hover {
      background: #f1f5f9;
      color: #0f172a;
    }

    .tb-logout .material-symbols-outlined {
      font-size: 18px;
    }

    .tb-logout-label {
      display: inline;
    }

    .tb-icon-round {
      width: 40px;
      height: 40px;
      border: none;
      border-radius: 50%;
      background: transparent;
      color: #64748b;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .2s ease, color .2s ease;
    }

    .tb-icon-round:hover {
      background: rgba(241, 245, 249, .85);
      color: #334155;
    }

    .tb-icon-round .material-symbols-outlined {
      font-size: 22px;
    }

    .tb-divider-v {
      width: 1px;
      height: 28px;
      background: #e2e8f0;
      flex-shrink: 0;
    }

    .tbl-txt {
      min-width: 0;
    }

    .mobmenubtn {
      display: none;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1d4ed8;
      padding: .35rem .7rem;
      border-radius: 10px;
      font-size: .8rem;
      font-weight: 700;
      cursor: pointer;
    }

    .mobmenubtn:hover {
      background: #dbeafe;
    }

    .navbar {
      background: #fff;
      padding: .6rem 1.2rem;
      display: flex;
      gap: .5rem;
      border-bottom: 1px solid var(--bd);
      overflow-x: auto;
    }

    .navbar::-webkit-scrollbar {
      display: none;
    }

    .side-brand,
    .side-link,
    .side-foot {
      display: none;
    }

    .ni {
      padding: .48rem .72rem;
      font-weight: 700;
      color: #6b7280;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      background: #f8fafc;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: .83rem;
      white-space: nowrap;
      transition: .2s ease;
    }

    .ni:hover {
      color: #334155;
      border-color: #d1d5db;
      background: #f1f5f9;
    }

    .ni.active {
      color: #fff;
      border-color: #2563eb;
      background: linear-gradient(135deg, #1d4ed8, #3b82f6);
      box-shadow: 0 4px 12px rgba(37, 99, 235, .28);
    }

    .ni .ni-ico {
      width: 24px;
      text-align: center;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .ni .ni-ico .material-symbols-outlined {
      font-size: 22px;
    }

    .side-link .ni-ico {
      width: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .side-link .ni-ico .material-symbols-outlined {
      font-size: 22px;
    }

    .ni .ni-lbl {
      line-height: 1;
    }

    .ni.active .material-symbols-outlined {
      font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    }

    .nbdg {
      background: var(--pl);
      color: #fff;
      font-size: .7rem;
      padding: 2px 8px;
      border-radius: 30px;
    }

    @media (min-width: 992px) {
      body {
        padding-left: var(--sidebar-w);
      }

      .navbar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--sidebar-w);
        z-index: 980;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .35rem;
        overflow-y: auto;
        overflow-x: hidden;
        border-bottom: none;
        border-right: 1px solid #e6e8eb;
        background: #f8fafc;
        padding: 1.1rem .9rem .95rem;
      }

      .side-brand,
      .side-foot {
        display: flex;
      }

      .side-brand {
        align-items: center;
        gap: .7rem;
        padding: .45rem .4rem .85rem;
        margin-bottom: .35rem;
      }

      .side-brand-ico {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: var(--pr);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 20px rgba(19, 83, 216, .22);
      }

      .side-brand h2 {
        font-size: 1.02rem;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: -.02em;
      }

      .side-brand p {
        font-size: .62rem;
        text-transform: uppercase;
        letter-spacing: .11em;
        color: #6b7280;
        margin-top: 2px;
        font-weight: 800;
      }

      .ni {
        position: relative;
        width: 100%;
        border: none;
        border-radius: 14px;
        background: transparent;
        box-shadow: none;
        padding: .78rem .85rem .78rem 1rem;
        font-size: .84rem;
        font-weight: 600;
        color: #64748b;
        transition: transform .22s ease, background .2s ease, color .2s ease, box-shadow .22s ease;
      }

      .ni::before {
        content: '';
        position: absolute;
        left: 2px;
        top: 50%;
        transform: translateY(-50%) scaleY(0);
        width: 3px;
        height: 0;
        border-radius: 0 4px 4px 0;
        background: linear-gradient(180deg, #1d4ed8 0%, #3b82f6 100%);
        opacity: 0;
        transition: opacity .22s ease, transform .22s ease, height .22s ease;
      }

      .ni:hover {
        background: rgba(238, 242, 248, .85);
        border-color: transparent;
        transform: translateX(3px);
      }

      .ni.active {
        background: #fff;
        color: #1d4ed8;
        border: 1px solid rgba(219, 230, 255, .95);
        box-shadow: 0 4px 18px rgba(19, 83, 216, .09), 0 1px 2px rgba(15, 23, 42, .04);
        transform: translateX(2px);
      }

      .ni.active::before {
        opacity: 1;
        transform: translateY(-50%) scaleY(1);
        height: 56%;
        min-height: 22px;
        max-height: 32px;
      }

      .ni.active .material-symbols-outlined {
        color: #1d4ed8;
      }

      .ni.active .nbdg {
        background: #1d4ed8;
      }

      .side-foot {
        margin-top: auto;
        border-top: 1px solid #e2e8f0;
        padding-top: .65rem;
        flex-direction: column;
        gap: .3rem;
      }

      .side-link {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        border-radius: 14px;
        padding: .78rem .85rem;
        color: #64748b;
        font-size: .84rem;
        font-weight: 600;
        cursor: pointer;
        transition: transform .22s ease, background .2s ease, color .2s ease;
      }

      .side-link:hover {
        background: rgba(238, 242, 248, .85);
        color: #334155;
        transform: translateX(3px);
      }

      .side-brand-ico .material-symbols-outlined {
        font-size: 22px;
      }

      .topbar {
        margin-left: 0;
        width: 100%;
        position: sticky;
        top: 0;
        z-index: 970;
        padding: 0 2rem;
        background: rgba(255, 255, 255, .78);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 8px 28px rgba(19, 83, 216, .06);
        border-bottom: 1px solid rgba(226, 232, 240, .88);
      }

      .tbr-stitch {
        gap: 1.5rem;
      }

      .topbar .tbl {
        flex-shrink: 0;
        max-width: min(52%, 520px);
      }

      .main {
        margin-left: 0;
        width: 100%;
        max-width: none;
      }
    }

    @media (max-width: 991px) {
      .ni.active .material-symbols-outlined {
        color: #fff;
      }
    }

    @media (max-width: 768px) {

      .topbar.topbar-pro {
        flex-wrap: wrap;
        row-gap: 0.5rem;
      }

      .tbr-stitch {
        flex: 1 1 100%;
        justify-content: space-between;
      }

      .tb-meta-pro {
        flex: 1;
        justify-content: flex-end;
        flex-wrap: wrap;
        row-gap: 0.35rem;
      }

      .tb-user-text {
        max-width: 8.5rem;
      }

      .tb-clock-date {
        max-width: 7rem;
      }

      .tb-icon-round {
        width: 38px;
        height: 38px;
      }
    }

    .mobnav {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 900;
      background: transparent;
      padding: .45rem .8rem calc(.45rem + env(safe-area-inset-bottom));
      pointer-events: none;
    }

    .mobgd {
      display: grid;
      background: #fff;
      border: 1px solid #e7ebf1;
      border-radius: 22px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .1);
      padding: .35rem .4rem;
      pointer-events: auto;
    }

    .mobit {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: .35rem .2rem;
      cursor: pointer;
      border-radius: 14px;
      transition: background-color .2s ease, color .2s ease;
      min-height: 52px;
      position: relative;
    }

    .mobit .ico2 {
      font-size: 1.2rem;
      line-height: 1;
      filter: grayscale(.1);
      transition: transform .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
      will-change: transform;
      backface-visibility: hidden;
    }

    .mobit .lbl {
      font-size: .65rem;
      font-weight: 600;
      color: var(--tm);
      margin-top: 3px;
    }

    .mobit.active .lbl {
      color: var(--pr);
    }

    .mobit.active .ico2 {
      transform: scale(1.08);
      color: var(--pr);
    }

    .mobit.active::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 32px;
      height: 3px;
      background: var(--pr);
      border-radius: 0 0 4px 4px;
    }

    /* Floating center style inspired by premium app nav */
    .mobit.is-primary .ico2 {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: linear-gradient(145deg, #015183, #2f94d7);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 20px rgba(47, 148, 215, .38);
      transform: translateY(-25px);
      border: 3px solid #eef7ff;
      font-size: 1.35rem;
    }

    .mobit.is-primary .lbl {
      margin-top: -5px;
    }

    .mobit.is-primary.active .ico2 {
      transform: translateY(-25px);
    }

    .mobbdg {
      position: absolute;
      top: 4px;
      right: 22%;
      background: var(--er);
      color: #fff;
      font-size: .6rem;
      font-weight: 700;
      padding: 2px 5px;
      border-radius: 10px;
      min-width: 16px;
      text-align: center;
    }

    /* ── Mobile karyawan: layout Stitch (top bar + konten + bottom nav) ── */
    #empMobAppBar {
      display: none;
    }

    .emp-dash-mobile {
      display: none;
    }

    .mob-ms {
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mob-ms .material-symbols-outlined {
      font-size: 22px;
    }

    .mobnav-dot {
      position: absolute;
      top: 6px;
      right: 18%;
      width: 7px;
      height: 7px;
      background: #ba1a1a;
      border-radius: 50%;
    }

    /* Tampilan karyawan: pakai layout mobile di semua lebar layar */
    body.employee-logged-in .topbar {
      display: none !important;
    }

      body.employee-logged-in #empMobAppBar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 980;
        background: rgba(247, 249, 252, .92);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(226, 232, 240, .9);
        padding: 0.85rem 1.25rem;
        padding-top: calc(0.85rem + env(safe-area-inset-top));
        align-items: center;
        justify-content: space-between;
      }

      body.employee-logged-in .emp-mob-appbar-inner {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        gap: 0.75rem;
      }

      body.employee-logged-in .emp-mob-appbar-user {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-width: 0;
      }

      body.employee-logged-in .emp-mob-appbar-hit {
        flex: 1;
        min-width: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        border-radius: 14px;
        margin: -0.35rem -0.25rem;
        padding: 0.35rem 0.25rem;
        transition: background 0.15s ease;
        text-align: left;
        border: none;
        background: transparent;
        font: inherit;
        color: inherit;
      }

      body.employee-logged-in .emp-mob-appbar-hit:hover {
        background: rgba(15, 23, 42, 0.04);
      }

      body.employee-logged-in .emp-mob-appbar-hit:focus {
        outline: none;
      }

      body.employee-logged-in .emp-mob-appbar-hit:focus-visible {
        outline: 2px solid #1a56db;
        outline-offset: 2px;
      }

      body.employee-logged-in .emp-mob-appbar-mid {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.55rem;
        flex: 1;
        min-width: 0;
      }

      body.employee-logged-in .emp-mob-appbar-text {
        min-width: 0;
        flex: 1;
      }

      body.employee-logged-in .emp-mob-kpi-pill {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        padding: 0.32rem 0.48rem;
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        line-height: 1.15;
      }

      body.employee-logged-in .emp-mob-kpi-pill-lbl {
        font-size: 0.5rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: #94a3b8;
        text-transform: uppercase;
      }

      body.employee-logged-in .emp-mob-kpi-pill-val {
        display: flex;
        align-items: baseline;
        gap: 1px;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }

      body.employee-logged-in .emp-mob-kpi-pill .emp-mob-kpi-num {
        font-size: 0.88rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: #0f172a;
      }

      body.employee-logged-in .emp-mob-kpi-pill .emp-mob-kpi-den {
        font-size: 0.58rem;
        font-weight: 600;
        color: #94a3b8;
      }

      body.employee-logged-in .emp-mob-kpi-pill .emp-mob-kpi-sep {
        color: #cbd5e1;
        font-size: 0.62rem;
        font-weight: 400;
        margin: 0 1px;
        user-select: none;
      }

      body.employee-logged-in .emp-mob-kpi-pill .emp-mob-kpi-grade {
        font-size: 0.78rem;
        font-weight: 800;
        min-width: 1ch;
      }

      body.employee-logged-in .emp-mob-av {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #e2e8f0;
        color: #475569;
        font-size: 1.45rem;
        font-weight: 400;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border: 2px solid #1a56db;
        overflow: hidden;
      }

      body.employee-logged-in .emp-mob-greet {
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #64748b;
        margin: 0 0 2px;
      }

      body.employee-logged-in .emp-mob-name {
        font-size: 1.05rem;
        font-weight: 800;
        color: #0f172a;
        margin: 0;
        letter-spacing: -0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }

      body.employee-logged-in #section-dashboard.active .emp-dash-desktop {
        display: none;
      }

      body.employee-logged-in #section-dashboard.active .emp-dash-mobile {
        display: block;
        padding-bottom: 0.5rem;
      }

      body.employee-logged-in .emp-mob-stack {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }

      body.employee-logged-in .emp-mob-hero {
        background: linear-gradient(135deg, #1a56db 0%, #1353d8 100%);
        border-radius: 16px;
        padding: 1.35rem 1.25rem;
        color: #fff;
        position: relative;
        overflow: hidden;
        box-shadow: 0 12px 32px rgba(26, 86, 219, .28);
      }

      body.employee-logged-in .emp-mob-hero::after {
        content: '';
        position: absolute;
        top: -20%;
        right: -10%;
        width: 160px;
        height: 160px;
        background: rgba(255, 255, 255, .1);
        border-radius: 50%;
        filter: blur(40px);
        pointer-events: none;
      }

      body.employee-logged-in .emp-mob-hero-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1rem;
        position: relative;
        z-index: 1;
      }

      body.employee-logged-in .emp-mob-hero-lbl {
        font-size: 0.62rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        opacity: .85;
        display: block;
        margin-bottom: 0.2rem;
      }

      body.employee-logged-in .emp-mob-hero-shift {
        font-size: 1.35rem;
        font-weight: 900;
        letter-spacing: -0.03em;
        margin: 0;
        line-height: 1.15;
      }

      body.employee-logged-in .emp-mob-hero-tenure {
        font-size: 1rem;
        font-weight: 700;
        margin: 0.15rem 0 0;
        text-align: right;
      }

      body.employee-logged-in .emp-mob-hero-mid {
        position: relative;
        z-index: 1;
        text-align: center;
        padding: 1rem 0.75rem;
        background: rgba(255, 255, 255, .12);
        border-radius: 14px;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, .12);
      }

      body.employee-logged-in .emp-mob-hero-date {
        font-size: 0.82rem;
        font-weight: 600;
        opacity: .92;
        margin: 0;
      }

      body.employee-logged-in .emp-mob-hero-time {
        font-size: 2.75rem;
        font-weight: 900;
        letter-spacing: -0.04em;
        line-height: 1;
        margin: 0.25rem 0 0;
        font-variant-numeric: tabular-nums;
      }

      body.employee-logged-in .emp-mob-status-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        margin-top: 0.65rem;
        padding: 0.35rem 0.85rem;
        background: #ad3b00;
        border-radius: 999px;
        font-size: 0.58rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }

      body.employee-logged-in .emp-mob-status-pill .material-symbols-outlined {
        font-size: 14px;
      }

      body.employee-logged-in .emp-mob-status-pill.emp-mob-pill-ok {
        background: #059669 !important;
      }

      body.employee-logged-in .emp-mob-status-pill.emp-mob-pill-warn {
        background: #d97706 !important;
      }

      body.employee-logged-in .emp-mob-status-pill.emp-mob-pill-muted {
        background: #64748b !important;
      }

      body.employee-logged-in .emp-mob-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.85rem;
      }

      body.employee-logged-in .emp-mob-act {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.65rem;
        padding: 1.25rem 0.75rem;
        border-radius: 16px;
        border: 1px solid rgba(195, 197, 215, .25);
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
        cursor: pointer;
        font-family: inherit;
        transition: transform 0.15s, background 0.2s, border-color 0.2s;
      }

      body.employee-logged-in .emp-mob-act:active {
        transform: scale(0.97);
      }

      body.employee-logged-in .emp-mob-act-in:hover {
        background: #dbe1ff;
        border-color: rgba(26, 86, 219, .2);
      }

      body.employee-logged-in .emp-mob-act-out:hover {
        background: #ffdad6;
        border-color: rgba(186, 26, 26, .2);
      }

      body.employee-logged-in .emp-mob-act-ico {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      body.employee-logged-in .emp-mob-act-in .emp-mob-act-ico {
        background: rgba(0, 63, 177, .1);
        color: #003fb1;
      }

      body.employee-logged-in .emp-mob-act-out .emp-mob-act-ico {
        background: rgba(186, 26, 26, .1);
        color: #ba1a1a;
      }

      body.employee-logged-in .emp-mob-act-ico .material-symbols-outlined {
        font-size: 28px;
      }

      body.employee-logged-in .emp-mob-act-lbl {
        font-size: 0.88rem;
        font-weight: 800;
        color: #191c1e;
      }

      body.employee-logged-in .emp-mob-bento {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
      }

      body.employee-logged-in .emp-mob-bcell {
        background: #f2f4f7;
        border-radius: 14px;
        padding: 1rem;
        min-height: 118px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border: 1px solid rgba(195, 197, 215, .12);
      }

      body.employee-logged-in .emp-mob-bcell .material-symbols-outlined {
        font-size: 22px;
      }

      body.employee-logged-in .emp-mob-bl {
        font-size: 0.58rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #64748b;
        margin: 0.35rem 0 0;
      }

      body.employee-logged-in .emp-mob-bv {
        font-size: 1.15rem;
        font-weight: 800;
        color: #191c1e;
        margin: 0;
        font-variant-numeric: tabular-nums;
      }

      body.employee-logged-in .emp-mob-bv.muted {
        color: #cbd5e1;
      }

      body.employee-logged-in .emp-mob-bcell-hd {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
      }

      body.employee-logged-in .emp-mob-pres-pill {
        font-size: 0.55rem;
        font-weight: 800;
        text-transform: uppercase;
        padding: 0.2rem 0.45rem;
        border-radius: 999px;
        background: #ffdbcf;
        color: #802a00;
      }

      body.employee-logged-in .emp-mob-chart-card {
        background: #fff;
        border-radius: 16px;
        padding: 1.25rem;
        border: 1px solid rgba(195, 197, 215, .2);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
      }

      body.employee-logged-in .emp-mob-chart-hd {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
      }

      body.employee-logged-in .emp-mob-chart-hd h3 {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 800;
        color: #191c1e;
      }

      body.employee-logged-in .emp-mob-chart-link {
        background: none;
        border: none;
        font-size: 0.72rem;
        font-weight: 700;
        color: #003fb1;
        cursor: pointer;
        font-family: inherit;
      }

      body.employee-logged-in .emp-mob-bars {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        gap: 0.35rem;
        height: 132px;
      }

      body.employee-logged-in .emp-mob-bar-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.2rem;
        min-width: 0;
        min-height: 0;
        height: 100%;
      }

      body.employee-logged-in .emp-mob-bar-track {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
      }

      body.employee-logged-in .emp-mob-bar-cap {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 0.15rem;
        width: 100%;
        flex-shrink: 0;
      }

      body.employee-logged-in .emp-mob-bar-time {
        font-size: 0.55rem;
        font-weight: 800;
        color: #64748b;
        text-align: center;
        line-height: 1.1;
        font-variant-numeric: tabular-nums;
        flex-shrink: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }

      body.employee-logged-in .emp-mob-bar-col.is-today .emp-mob-bar-time {
        color: #1a56db;
      }

      body.employee-logged-in .emp-mob-bar-fill {
        width: 100%;
        border-radius: 6px 6px 0 0;
        background: rgba(0, 63, 177, .22);
        min-height: 6px;
        flex-shrink: 0;
        transition: height 0.25s ease;
        align-self: stretch;
      }

      body.employee-logged-in .emp-mob-bar-col.is-today .emp-mob-bar-fill {
        background: #1a56db;
      }

      body.employee-logged-in .emp-mob-bar-lbl {
        font-size: 0.58rem;
        font-weight: 800;
        color: #94a3b8;
        text-transform: uppercase;
        text-align: center;
        line-height: 1.15;
        flex-shrink: 0;
      }

      body.employee-logged-in .emp-mob-bar-col.is-today .emp-mob-bar-lbl {
        color: #003fb1;
      }

      body.employee-logged-in .emp-mob-reimb-card {
        background: #f2f4f7;
        border-radius: 16px;
        padding: 1.15rem;
        border: 1px solid rgba(195, 197, 215, .15);
      }

      body.employee-logged-in .emp-mob-reimb-hd {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.85rem;
      }

      body.employee-logged-in .emp-mob-reimb-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
      }

      body.employee-logged-in .emp-mob-reimb-row h3 {
        margin: 0;
        font-size: 0.92rem;
        font-weight: 800;
      }

      body.employee-logged-in .emp-mob-reimb-hist {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        background: none;
        border: none;
        font-size: 0.72rem;
        font-weight: 700;
        color: #003fb1;
        cursor: pointer;
        font-family: inherit;
      }

      body.employee-logged-in .emp-mob-reimb-amt {
        font-size: 1.35rem;
        font-weight: 900;
        color: #191c1e;
        margin: 0.15rem 0 0;
      }

      body.employee-logged-in .emp-mob-reimb-cta {
        width: 100%;
        margin-top: 0.5rem;
        padding: 0.75rem;
        border: none;
        border-radius: 12px;
        background: #003fb1;
        color: #fff;
        font-size: 0.82rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        cursor: pointer;
        font-family: inherit;
      }

      body.employee-logged-in .emp-mob-loc {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.85rem 1rem;
        background: rgba(230, 232, 235, .55);
        border-radius: 14px;
        border: 1px solid rgba(195, 197, 215, .2);
      }

      body.employee-logged-in .emp-mob-loc-ico {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1a56db;
        flex-shrink: 0;
      }

      body.employee-logged-in .emp-mob-loc-txt {
        flex: 1;
        min-width: 0;
      }

      body.employee-logged-in .emp-mob-loc-txt p {
        margin: 0;
      }

      body.employee-logged-in .emp-mob-loc-name {
        font-size: 0.88rem;
        font-weight: 700;
        color: #191c1e;
      }

      body.employee-logged-in .mobnav.emp-mob-nav-wrap .mobgd {
        background: rgba(255, 255, 255, .78);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        border: 1px solid rgba(226, 232, 240, .65);
        border-radius: 999px;
        box-shadow: 0 -8px 28px rgba(15, 23, 42, .08);
        padding: 0.35rem 0.5rem 0.45rem;
        justify-content: space-around;
      }

      body.employee-logged-in .mobnav.emp-mob-nav-wrap .mobit {
        border-radius: 999px;
        padding: 0.4rem 0.55rem;
        min-height: auto;
      }

      body.employee-logged-in .mobnav.emp-mob-nav-wrap .mobit.active {
        background: #f2f4f7;
      }

      body.employee-logged-in .mobnav.emp-mob-nav-wrap .mobit.active::before {
        display: none;
      }

      body.employee-logged-in .mobnav.emp-mob-nav-wrap .mobit .lbl {
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-top: 2px;
      }

      body.employee-logged-in .mobnav.emp-mob-nav-wrap .mobit.active .lbl,
      body.employee-logged-in .mobnav.emp-mob-nav-wrap .mobit.active .material-symbols-outlined {
        color: #1a56db;
      }

      body.employee-logged-in .mobnav.emp-mob-nav-wrap .mobit.is-primary .ico2 {
        width: auto;
        height: auto;
        border-radius: 0;
        background: transparent;
        color: inherit;
        box-shadow: none;
        border: none;
        transform: none;
        font-size: 1.2rem;
      }

      body.employee-logged-in .mobnav.emp-mob-nav-wrap .mobit.is-primary .lbl {
        margin-top: 3px;
      }

    /* Desktop & tablet: shell sama mobile (tanpa sidebar kiri, ada bottom nav) */
    @media (min-width: 769px) {
      body.employee-logged-in {
        padding-left: 0;
      }

      body.employee-logged-in .navbar {
        display: none !important;
      }

      body.employee-logged-in .mobnav {
        display: block;
      }

      body.employee-logged-in .main {
        max-width: min(520px, 100%);
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding: 0.85rem;
        padding-top: calc(4.5rem + env(safe-area-inset-top));
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
      }
    }

    .mobside-overlay {
      position: fixed;
      inset: 0;
      background: rgba(2, 6, 23, .4);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease;
      z-index: 1200;
    }

    .mobside-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }

    .mobside {
      position: fixed;
      top: 0;
      right: 0;
      height: 100vh;
      width: min(84vw, 320px);
      background: #fff;
      border-left: 1px solid var(--bd);
      box-shadow: -8px 0 24px rgba(0, 0, 0, .12);
      transform: translateX(100%);
      transition: transform .22s ease;
      z-index: 1210;
      display: flex;
      flex-direction: column;
    }

    .mobside.open {
      transform: translateX(0);
    }

    .ms-hd {
      padding: .9rem 1rem;
      border-bottom: 1px solid var(--bd);
      font-weight: 800;
      color: #0f172a;
    }

    .ms-list {
      padding: .7rem;
      overflow: auto;
      display: grid;
      gap: .45rem;
    }

    .ms-item {
      display: flex;
      align-items: center;
      gap: .65rem;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: .62rem .7rem;
      background: #f8fafc;
      color: #334155;
      font-size: .88rem;
      font-weight: 600;
      cursor: pointer;
    }

    .ms-item.active {
      background: linear-gradient(135deg, #1d4ed8, #3b82f6);
      border-color: #2563eb;
      color: #fff;
    }

    .ms-ico {
      width: 20px;
      text-align: center;
    }

    .main {
      flex: 1;
      padding: 1.5rem;
      max-width: 1400px;
      margin: 0 auto;
      width: 100%;
      min-height: 0;
      overflow-anchor: none;
    }

    .sec {
      display: none;
      animation: fi .25s ease;
    }

    .sec.active {
      display: block;
    }

    @keyframes fi {
      from {
        opacity: .5;
        transform: translateY(4px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .sgrid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .scrd {
      background: #fff;
      padding: 1.2rem;
      border-radius: 18px;
      border: 1px solid var(--bd);
      transition: .2s;
    }

    .scrd:hover {
      box-shadow: var(--hsh);
    }

    .slbl {
      font-size: .82rem;
      color: var(--ts);
      margin-bottom: 6px;
    }

    .snum {
      font-size: 2.2rem;
      font-weight: 800;
      letter-spacing: -1px;
    }

    .dchrt {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    /* Kurangi reflow/repaint saat scroll di area grafik dashboard */
    #section-dashboard .dchrt .ccrd {
      contain: layout style;
    }

    .ccrd {
      background: #fff;
      border-radius: 18px;
      border: 1px solid var(--bd);
      padding: 1.2rem;
    }

    .ccrd h4 {
      font-size: .9rem;
      font-weight: 700;
      color: var(--ts);
      margin-bottom: 1rem;
    }

    .cwrp {
      position: relative;
      width: 100%;
      height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cwrp canvas {
      display: block;
    }

    .twrp {
      overflow-x: auto;
      background: #fff;
      border-radius: 18px;
      border: 1px solid var(--bd);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: .88rem;
    }

    th {
      text-align: left;
      padding: .9rem 1rem;
      color: var(--tm);
      font-weight: 500;
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: .5px;
      border-bottom: 1px solid var(--bd);
    }

    td {
      padding: .9rem 1rem;
      border-bottom: 1px solid var(--bd);
      vertical-align: middle;
    }

    .tdm {
      color: var(--tm);
      font-size: .82rem;
    }

    .av {
      width: 40px;
      height: 40px;
      background: linear-gradient(145deg, #dbeafe, #c7d2fe);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: #1e40af;
      flex-shrink: 0;
      font-size: .85rem;
    }

    .av.mgr {
      background: linear-gradient(145deg, #ede9fe, #c4b5fd);
      color: #5b21b6;
    }

    .sth {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      object-fit: cover;
      flex-shrink: 0;
      border: 2px solid var(--bd);
      cursor: pointer;
    }

    .badge {
      padding: 4px 12px;
      border-radius: 30px;
      font-size: .75rem;
      font-weight: 600;
      display: inline-block;
    }

    .bgs {
      background: #dcfce7;
      color: #166534;
    }

    .bgw {
      background: #fef3c7;
      color: #92400e;
    }

    .bgm {
      background: #f1f5f9;
      color: #334155;
    }

    .bgmg {
      background: var(--mb);
      color: var(--mg);
    }

    .bgp {
      background: var(--pb);
      color: var(--pr);
    }

    .bgd {
      background: #fee2e2;
      color: #991b1b;
    }

    .pulse {
      animation: pu 1.8s infinite;
    }

    @keyframes pu {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .5
      }
    }

    /* ── Absensi (Stitch “Absensi View”) ── */
    .abs-stitch {
      background: var(--bg);
    }

    .abs-stitch-hero {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      margin-bottom: 1.25rem;
    }

    @media (min-width: 768px) {
      .abs-stitch-hero {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1.5rem;
      }
    }

    .abs-kicker {
      display: block;
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--pr);
      margin-bottom: .35rem;
    }

    .abs-title {
      font-size: clamp(1.55rem, 3.5vw, 2.1rem);
      font-weight: 800;
      letter-spacing: -.03em;
      color: #191c1e;
      line-height: 1.15;
    }

    .abs-desc {
      font-size: .88rem;
      color: var(--ts);
      max-width: 28rem;
      margin-top: .4rem;
      line-height: 1.5;
    }

    .abs-stat-wrap {
      display: flex;
      gap: 1rem;
      flex-shrink: 0;
    }

    .abs-stat {
      min-width: 112px;
      padding: .85rem 1.1rem;
      border-radius: 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .abs-stat span:first-child {
      font-size: 1.65rem;
      font-weight: 900;
      line-height: 1;
    }

    .abs-stat span:last-child {
      font-size: .62rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-top: .35rem;
      opacity: .85;
    }

    .abs-stat-ok {
      background: var(--st-muted);
      color: #003fb1;
    }

    .abs-stat-miss {
      background: rgba(255, 218, 214, .45);
      color: #ba1a1a;
    }

    .abs-toolbar {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 1.1rem;
    }

    .abs-toolbar .btn {
      border-radius: 14px;
      font-weight: 700;
    }

    .agrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
      gap: 1.2rem;
    }

    .agrid.abs-bento {
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      gap: 1.5rem;
    }

    .acrd {
      background: #fff;
      border-radius: 18px;
      padding: 1.5rem;
      transition: box-shadow .25s, transform .2s;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
      border: 1px solid var(--st-outline);
    }

    .acrd:hover {
      box-shadow: 0 16px 48px rgba(19, 83, 216, .08);
    }

    .ahdr {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 1rem;
    }

    .ahdr-main {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      flex: 1;
      min-width: 0;
    }

    .ahdr .av {
      width: 64px;
      height: 64px;
      font-size: 1.15rem;
      border-radius: 18px;
      flex-shrink: 0;
    }

    .abs-presence {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: .2rem;
      flex-shrink: 0;
    }

    .abs-presence-dot {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      font-size: .58rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .abs-presence-dot .abs-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .abs-presence-in .abs-dot {
      background: #ad3b00;
    }

    .abs-presence-out .abs-dot {
      background: #ba1a1a;
      animation: absPulse 1.8s ease-in-out infinite;
    }

    @keyframes absPulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .45
      }
    }

    .abs-presence-in {
      color: #802a00;
    }

    .abs-presence-out {
      color: #ba1a1a;
    }

    .abs-presence-time {
      font-size: .68rem;
      color: var(--tm);
      font-weight: 600;
      font-style: italic;
    }

    .abs-role-pill {
      display: inline-block;
      margin-top: .35rem;
      padding: .28rem .65rem;
      border-radius: 999px;
      font-size: .58rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .06em;
      background: rgba(177, 194, 255, .55);
      color: #3d4e84;
    }

    .abs-role-pill.mgr {
      background: rgba(255, 219, 207, .75);
      color: #334479;
    }

    .abs-meta {
      display: flex;
      flex-direction: column;
      gap: .55rem;
      margin: .5rem 0 1rem;
    }

    .abs-meta-row {
      display: flex;
      align-items: center;
      gap: .65rem;
      font-size: .86rem;
      color: var(--ts);
    }

    .abs-meta-row i {
      width: 1.15rem;
      text-align: center;
      color: #737686;
      font-size: .95rem;
    }

    .abs-act-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .65rem;
      margin-top: .25rem;
    }

    .abs-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .4rem;
      padding: .75rem .65rem;
      border-radius: 14px;
      font-size: .78rem;
      font-weight: 800;
      border: none;
      cursor: pointer;
      transition: transform .12s, box-shadow .2s, opacity .2s;
      font-family: inherit;
      text-align: center;
      line-height: 1.2;
    }

    .abs-btn:active:not(:disabled) {
      transform: scale(.98);
    }

    .abs-btn-in-primary {
      background: linear-gradient(135deg, #003fb1 0%, var(--pr) 100%);
      color: #fff;
      box-shadow: 0 4px 16px rgba(26, 86, 219, .28);
    }

    .abs-btn-in-primary:hover:not(:disabled) {
      filter: brightness(1.05);
    }

    .abs-btn-out-live {
      background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
      color: #fff;
      box-shadow: 0 4px 16px rgba(220, 38, 38, .25);
    }

    .abs-btn-out-live:hover:not(:disabled) {
      filter: brightness(1.05);
    }

    .abs-btn-muted {
      background: #e0e3e6;
      color: rgba(25, 28, 30, .35);
      cursor: not-allowed;
      box-shadow: none;
    }

    .abs-btn-done {
      background: #e6e8eb;
      color: #434654;
      cursor: default;
    }

    .abs-act-full {
      margin-top: .25rem;
    }

    .abs-act-full .btn {
      width: 100%;
      border-radius: 14px;
      font-weight: 700;
    }

    .anm {
      font-weight: 700;
      font-size: 1.05rem;
    }

    .asb {
      font-size: .78rem;
      color: var(--ts);
    }

    .atm {
      display: flex;
      gap: .8rem;
      margin: 1rem 0;
    }

    .tbx {
      background: var(--bg);
      flex: 1;
      padding: .7rem;
      border-radius: 14px;
      text-align: center;
    }

    .tlbl {
      font-size: .7rem;
      color: var(--tm);
      font-weight: 500;
    }

    .tvl {
      font-weight: 700;
      font-size: 1.1rem;
    }

    .tvl.e {
      color: var(--tm);
      font-weight: 400;
    }

    .aloc,
    .ajob {
      background: var(--bg);
      border-radius: 14px;
      padding: .6rem .8rem;
      margin: .5rem 0;
      font-size: .82rem;
      color: var(--ts);
      word-break: break-word;
    }

    .ajlb {
      font-weight: 600;
      color: var(--tx);
      margin-bottom: 4px;
    }

    .asch {
      background: var(--pb);
      border-radius: 14px;
      padding: .5rem .8rem;
      margin: .5rem 0;
      font-size: .78rem;
      color: var(--pr);
      font-weight: 500;
    }

    .gpsbdg {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: .75rem;
      padding: 4px 10px;
      border-radius: 20px;
      font-weight: 600;
      margin-top: 4px;
    }

    .gok {
      background: #dcfce7;
      color: #166534;
    }

    .gno {
      background: #fee2e2;
      color: #991b1b;
    }

    .gna {
      background: #fef3c7;
      color: #92400e;
    }

    .stpv {
      width: 100%;
      max-height: 160px;
      object-fit: cover;
      border-radius: 14px;
      margin: .5rem 0;
      border: 3px solid var(--ok);
      cursor: pointer;
    }

    .btn {
      padding: .75rem 1.2rem;
      min-height: 44px;
      border-radius: 14px;
      border: 1px solid var(--bd);
      font-weight: 600;
      font-size: .9rem;
      background: #fff;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: .2s;
    }

    .btn:hover {
      box-shadow: var(--hsh);
    }

    .bts {
      background: var(--ok);
      color: #fff;
      border: none;
    }

    .bts:hover {
      background: #047857;
    }

    .btd {
      background: var(--er);
      color: #fff;
      border: none;
    }

    .btd:hover {
      background: #b91c1c;
    }

    .btp {
      background: var(--pr);
      color: #fff;
      border: none;
    }

    .btp:hover {
      background: #1e40af;
    }

    .btm {
      background: var(--mg);
      color: #fff;
      border: none;
    }

    .bto {
      background: transparent;
      border: 1px solid var(--bd);
    }

    .btsm {
      padding: .5rem 1rem;
      min-height: 38px;
      font-size: .85rem;
    }

    .btn:disabled {
      opacity: .5;
      cursor: not-allowed;
    }

    .egrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 1rem;
    }

    .ecrd {
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 18px;
      padding: 1.2rem;
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      transition: .2s;
    }

    .ecrd:hover {
      box-shadow: var(--hsh);
    }

    .ei {
      flex: 1;
    }

    .en {
      font-weight: 700;
    }

    .ep {
      font-size: .8rem;
      color: var(--ts);
    }

    .em {
      font-size: .7rem;
      color: var(--tm);
      margin-top: 2px;
    }

    .elt {
      font-size: .72rem;
      background: var(--pb);
      color: var(--pr);
      padding: 3px 8px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 5px;
      font-weight: 600;
    }

    .rdot {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      border-radius: 8px;
      font-size: .7rem;
      font-weight: 600;
      margin-top: 4px;
    }

    .rdot.manager {
      background: #ede9fe;
      color: #5b21b6;
    }

    .rdot.employee {
      background: #dcfce7;
      color: #166534;
    }

    .swrp {
      max-width: 820px;
      margin: 0 auto;
    }

    .scrd2 {
      background: #fff;
      border-radius: 20px;
      border: 1px solid var(--bd);
      padding: 1.8rem;
      margin-bottom: 1.5rem;
    }

    .scrd2 h3 {
      margin-bottom: 1.2rem;
      font-size: 1.1rem;
    }

    .scrd2 h3 span {
      color: var(--pr);
    }

    .ri {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.2rem;
      flex-wrap: wrap;
    }

    .ri label {
      min-width: 130px;
      font-weight: 500;
      font-size: .9rem;
    }

    .ri input,
    .ri select {
      padding: .65rem 1rem;
      border-radius: 12px;
      border: 1px solid var(--bd);
      font-size: .95rem;
      flex: 1;
      min-width: 100px;
    }

    .esls {
      display: flex;
      flex-direction: column;
      gap: .8rem;
    }

    .esit {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      background: var(--bg);
      border-radius: 14px;
      flex-wrap: wrap;
    }

    .esit .av {
      width: 36px;
      height: 36px;
      font-size: .75rem;
    }

    .esii {
      flex: 1;
      min-width: 120px;
    }

    .esii .n {
      font-weight: 600;
      font-size: .9rem;
    }

    .esii .p {
      font-size: .75rem;
      color: var(--tm);
    }

    .esip {
      display: flex;
      gap: .5rem;
      align-items: center;
      flex-wrap: wrap;
    }

    .esip input,
    .esip select {
      padding: .5rem .6rem;
      border-radius: 10px;
      border: 1px solid var(--bd);
      font-size: .85rem;
      width: 90px;
    }

    .esip select {
      width: auto;
      min-width: 120px;
    }

    .esip label {
      font-size: .75rem;
      color: var(--tm);
      font-weight: 500;
    }

    .loclst {
      display: flex;
      flex-direction: column;
      gap: .8rem;
      margin-bottom: 1.2rem;
    }

    .locit {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: .9rem 1rem;
      background: var(--bg);
      border-radius: 14px;
    }

    .locii {
      flex: 1;
    }

    .locnm {
      font-weight: 600;
    }

    .locco {
      font-size: .75rem;
      color: var(--tm);
    }

    .locr {
      font-size: .75rem;
      color: var(--pr);
      font-weight: 600;
    }

    .alfm {
      background: var(--bg);
      border-radius: 14px;
      padding: 1rem;
      margin-top: .8rem;
    }

    .alfm h4 {
      font-size: .9rem;
      font-weight: 600;
      margin-bottom: .8rem;
    }

    .lgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .8rem;
      margin-bottom: .8rem;
    }

    .lgrid input {
      padding: .65rem .9rem;
      border-radius: 12px;
      border: 1px solid var(--bd);
      font-size: .9rem;
      width: 100%;
    }

    .fbar {
      display: flex;
      flex-wrap: wrap;
      gap: .8rem;
      align-items: center;
      background: #fff;
      padding: 1rem 1.2rem;
      border-radius: 16px;
      margin-bottom: 1.2rem;
      border: 1px solid var(--bd);
    }

    .fg {
      display: flex;
      align-items: center;
      gap: .4rem;
      flex-wrap: wrap;
    }

    .fg label {
      font-size: .82rem;
      font-weight: 600;
      color: var(--ts);
    }

    .fg select,
    .fg input {
      padding: .6rem .8rem;
      border-radius: 12px;
      border: 1px solid var(--bd);
      background: var(--bg);
      font-size: .88rem;
      min-height: 40px;
    }

    .rcnt {
      margin-left: auto;
      font-size: .85rem;
      color: var(--tm);
      font-weight: 500;
    }

    .empty {
      text-align: center;
      padding: 3rem 1rem;
      background: #fff;
      border-radius: 20px;
      border: 1px dashed var(--bd);
    }

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

    .modal.open {
      display: flex;
    }

    .mbox {
      background: #fff;
      max-width: 520px;
      width: 100%;
      border-radius: 24px;
      padding: 2rem;
      box-shadow: 0 30px 50px rgba(0, 0, 0, .2);
      animation: su .25s;
      max-height: 92vh;
      overflow-y: auto;
    }

    @keyframes su {
      from {
        transform: scale(.96) translateY(15px);
        opacity: 0
      }

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

    .mhdr {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .mhdr h2 {
      font-size: 1.2rem;
      font-weight: 700;
    }

    .fg2 {
      margin-bottom: 1.2rem;
    }

    .fg2 label {
      display: block;
      margin-bottom: .3rem;
      font-weight: 600;
      color: var(--ts);
      font-size: .85rem;
    }

    .fg2 input,
    .fg2 textarea,
    .fg2 select {
      width: 100%;
      padding: .75rem 1rem;
      border-radius: 14px;
      border: 2px solid var(--bd);
      font-size: .95rem;
      transition: .2s;
    }

    .fg2 input:focus,
    .fg2 textarea:focus,
    .fg2 select:focus {
      outline: none;
      border-color: var(--pr);
    }

    .locst {
      background: #f0f9ff;
      border-radius: 14px;
      padding: .8rem 1rem;
      margin: .8rem 0;
      font-size: .88rem;
      border-left: 4px solid var(--pr);
    }

    .locst.ok {
      border-left-color: var(--ok);
      background: var(--ob);
    }

    .locst.err {
      border-left-color: var(--er);
      background: var(--eb);
    }

    .locst.wn {
      border-left-color: var(--wn);
      background: var(--wb);
    }

    .mftr {
      display: flex;
      justify-content: flex-end;
      gap: .8rem;
      margin-top: 1.5rem;
    }

    .camwrp {
      position: relative;
      width: 100%;
      border-radius: 18px;
      overflow: hidden;
      background: #000;
      aspect-ratio: 4/3;
      margin: .8rem 0;
    }

    #camvid {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scaleX(-1);
      display: block;
    }

    #camcvs {
      display: none;
    }

    .camov {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .camovl {
      width: 150px;
      height: 190px;
      border: 3px solid rgba(255, 255, 255, .7);
      border-radius: 50%;
      box-shadow: 0 0 0 2000px rgba(0, 0, 0, .35);
    }

    /* Daftar wajah: preview portrait, terpusat, oval lebih besar & mudah dipasang */
    #modalFaceEnroll .mbox {
      max-width: min(440px, 96vw);
    }

    .face-enroll-hint {
      text-align: center;
      font-size: .84rem;
      color: var(--ts);
      line-height: 1.45;
      margin: 0 0 .6rem;
      padding: 0 .25rem;
    }

    .face-enroll-wait-info {
      font-size: .8rem;
      line-height: 1.45;
      color: var(--ts);
      margin: 0 0 .75rem;
      padding: .55rem .7rem;
      border-radius: 10px;
      background: rgba(59, 130, 246, .12);
      border: 1px solid rgba(59, 130, 246, .28);
      text-align: center;
    }

    #modalFaceEnroll .face-enroll-wrp {
      max-width: min(340px, 88vw);
      margin-left: auto;
      margin-right: auto;
      aspect-ratio: 3 / 4;
    }

    #faceVid {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      transform: scaleX(-1);
      display: block;
    }

    #modalFaceEnroll .face-enroll-oval {
      width: min(76%, 280px);
      aspect-ratio: 3 / 3.85;
      height: auto;
      max-height: 78%;
      border: 3px solid rgba(255, 255, 255, .9);
      border-radius: 50%;
      box-shadow: 0 0 0 2000px rgba(0, 0, 0, .42);
      animation: faceOvalPulse 2.2s ease-in-out infinite;
    }

    @keyframes faceOvalPulse {

      0%,
      100% {
        border-color: rgba(255, 255, 255, .75);
        box-shadow: 0 0 0 2000px rgba(0, 0, 0, .4);
      }

      50% {
        border-color: rgba(147, 197, 253, .95);
        box-shadow: 0 0 0 2000px rgba(0, 0, 0, .38);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #modalFaceEnroll .face-enroll-oval {
        animation: none;
      }
    }

    .camctl {
      display: flex;
      gap: .8rem;
      justify-content: center;
      margin-top: .8rem;
    }

    .sres {
      width: 100%;
      border-radius: 18px;
      object-fit: cover;
      aspect-ratio: 4/3;
      display: none;
      border: 3px solid var(--ok);
    }

    .camst {
      text-align: center;
      font-size: .85rem;
      color: var(--ts);
      margin-top: .5rem;
      min-height: 20px;
    }

    /* ===== LEAVE REQUEST MODAL ===== */
    .leave-type-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: .8rem;
      margin-bottom: 1.2rem;
    }

    .leave-type-card {
      border: 2px solid var(--bd);
      border-radius: 16px;
      padding: 1rem .8rem;
      text-align: center;
      cursor: pointer;
      transition: .2s;
      background: #fff;
    }

    .leave-type-card:hover {
      border-color: var(--pr);
      background: var(--pb);
      transform: translateY(-2px);
      box-shadow: var(--hsh);
    }

    .leave-type-card.selected-sakit {
      border-color: var(--er) !important;
      background: var(--eb) !important;
    }

    .leave-type-card.selected-izin {
      border-color: var(--wn) !important;
      background: var(--wb) !important;
    }

    .leave-type-card.selected-cuti {
      border-color: var(--mg) !important;
      background: var(--mb) !important;
    }

    .leave-type-card .ltc-ico {
      font-size: 1.8rem;
      margin-bottom: .4rem;
      line-height: 1;
    }

    .leave-type-card .ltc-lbl {
      font-size: .8rem;
      font-weight: 700;
      color: var(--tx);
    }

    .leave-form-section {
      background: var(--bg);
      border-radius: 16px;
      padding: 1.2rem;
      animation: fi .2s ease;
    }

    .leave-form-section h4 {
      font-size: .9rem;
      font-weight: 700;
      margin-bottom: .9rem;
    }

    .lf2 {
      margin-bottom: .9rem;
    }

    .lf2 label {
      display: block;
      font-weight: 600;
      font-size: .83rem;
      color: var(--ts);
      margin-bottom: .35rem;
    }

    .lf2 input,
    .lf2 textarea {
      width: 100%;
      padding: .7rem .9rem;
      border-radius: 12px;
      border: 2px solid var(--bd);
      font-size: .9rem;
      transition: .2s;
      background: #fff;
    }

    .lf2 input[type="date"] {
      -webkit-appearance: none;
      appearance: none;
      min-height: 44px;
    }

    .lf2 input:focus,
    .lf2 textarea:focus {
      outline: none;
      border-color: var(--pr);
    }

    .date-range-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .8rem;
    }

    .leave-detail-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      border-radius: 10px;
      font-size: .75rem;
      font-weight: 600;
    }

    .ldb-sakit {
      background: #fee2e2;
      color: #991b1b;
    }

    .ldb-izin {
      background: #fef3c7;
      color: #92400e;
    }

    .ldb-cuti {
      background: #ede9fe;
      color: #5b21b6;
    }

    .cuti-dur-info {
      background: var(--pb);
      border-radius: 10px;
      padding: .5rem .9rem;
      font-size: .82rem;
      color: var(--pr);
      font-weight: 600;
      margin-top: .5rem;
    }

    /* CALENDAR */
    .calhd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .calnv {
      display: flex;
      align-items: center;
      gap: .8rem;
    }

    .caltt {
      font-size: 1.3rem;
      font-weight: 800;
      letter-spacing: -.5px;
    }

    .calbt {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      background: #fff;
      border: 1px solid var(--bd);
      cursor: pointer;
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: .2s;
    }

    .calbt:hover {
      background: var(--bg);
      box-shadow: var(--hsh);
    }

    .calgd {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
    }

    .caldw {
      text-align: center;
      font-size: .75rem;
      font-weight: 700;
      color: var(--tm);
      padding: .5rem 0;
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .caldy {
      min-height: 80px;
      background: #fff;
      border-radius: 14px;
      border: 1px solid var(--bd);
      padding: .5rem;
      cursor: pointer;
      transition: .2s;
      position: relative;
      overflow: hidden;
    }

    .caldy:hover {
      border-color: var(--pl);
      box-shadow: var(--hsh);
    }

    .caldy.ot {
      opacity: .4;
      cursor: default;
    }

    .caldy.td {
      border-color: var(--pr);
      border-width: 2px;
    }

    .caldy.td .dn {
      background: var(--pr);
      color: #fff;
      border-radius: 8px;
    }

    .caldy.wk {
      background: #fafafa;
    }

    .dn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      font-size: .85rem;
      font-weight: 700;
      color: var(--tx);
    }

    .calchp {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-top: 4px;
    }

    .cchp {
      font-size: .63rem;
      font-weight: 600;
      padding: 2px 5px;
      border-radius: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cchp.tepat {
      background: #dcfce7;
      color: #166534;
    }

    .cchp.telat {
      background: #fef3c7;
      color: #92400e;
    }

    .cchp.sakit {
      background: #fee2e2;
      color: #991b1b;
    }

    .cchp.izin {
      background: #dbeafe;
      color: #1e40af;
    }

    .cchp.cuti {
      background: #ede9fe;
      color: #5b21b6;
    }

    .callg {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      background: #fff;
      padding: .8rem 1.2rem;
      border-radius: 14px;
      border: 1px solid var(--bd);
      margin-bottom: 1rem;
    }

    .cli {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: .78rem;
      font-weight: 600;
    }

    .cld {
      width: 12px;
      height: 12px;
      border-radius: 4px;
    }

    .calfil {
      display: flex;
      gap: .8rem;
      flex-wrap: wrap;
      margin-bottom: 1rem;
    }

    .calfil select {
      padding: .55rem .9rem;
      border-radius: 12px;
      border: 1px solid var(--bd);
      background: #fff;
      font-size: .88rem;
    }

    .ddls {
      display: flex;
      flex-direction: column;
      gap: .8rem;
      max-height: 400px;
      overflow-y: auto;
    }

    .ddi {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: .8rem 1rem;
      background: var(--bg);
      border-radius: 14px;
    }

    .ddi .av {
      width: 34px;
      height: 34px;
      font-size: .75rem;
      flex-shrink: 0;
    }

    .ddii {
      flex: 1;
    }

    .ddin {
      font-weight: 600;
      font-size: .9rem;
    }

    .ddit {
      font-size: .78rem;
      color: var(--ts);
    }

    .ddis {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      object-fit: cover;
      border: 2px solid var(--bd);
      flex-shrink: 0;
      cursor: pointer;
    }

    .lvsec {
      background: #fff;
      border-radius: 18px;
      border: 1px solid var(--bd);
      padding: 1.2rem;
      margin-bottom: 1.5rem;
    }

    .lvsec h4 {
      font-size: .95rem;
      font-weight: 700;
      margin-bottom: 1rem;
    }

    .lvrow {
      display: flex;
      align-items: flex-start;
      gap: .8rem;
      padding: .8rem;
      background: var(--bg);
      border-radius: 12px;
      margin-bottom: .5rem;
      flex-wrap: wrap;
    }

    .lvrow .lvnm {
      font-weight: 600;
      font-size: .9rem;
    }

    .lvtp {
      font-size: .75rem;
      padding: 3px 10px;
      border-radius: 20px;
      background: var(--wb);
      color: var(--wn);
      font-weight: 600;
      white-space: nowrap;
    }

    /* INTERNAL MEMO BANNER */
    .memo-banner {
      background: linear-gradient(135deg, #eff6ff, #dbeafe);
      border-left: 5px solid var(--pr);
      border-radius: 16px;
      padding: 1.2rem;
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: 1.2rem;
      box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.1);
      animation: slideIn .5s ease-out;
    }

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

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

    .memo-ico {
      width: 48px;
      height: 48px;
      background: #fff;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      flex-shrink: 0;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    .memo-txt {
      flex: 1;
    }

    .memo-txt h4 {
      font-size: .95rem;
      font-weight: 800;
      color: #1e40af;
      margin-bottom: .2rem;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .memo-txt p {
      font-size: .88rem;
      color: #374151;
      line-height: 1.5;
      font-weight: 500;
    }

    .lvdt {
      font-size: .75rem;
      color: var(--tm);
    }

    .lvac {
      display: flex;
      gap: 5px;
      flex-shrink: 0;
    }

    .sechd {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .sechd h3 {
      font-size: 1.1rem;
      font-weight: 700;
    }

    .toastwrp {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 3000;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .toast {
      background: #fff;
      border-radius: 14px;
      padding: .8rem 1.2rem;
      box-shadow: 0 8px 25px rgba(0, 0, 0, .15);
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 500;
      border-left: 4px solid;
      animation: si .2s;
      max-width: 350px;
      font-size: .9rem;
    }

    .toast.success {
      border-left-color: var(--ok);
    }

    .toast.error {
      border-left-color: var(--er);
    }

    .toast.warning {
      border-left-color: var(--wn);
    }

    .toast.info {
      border-left-color: var(--pr);
    }

    @keyframes si {
      from {
        transform: translateX(40px);
        opacity: 0
      }

      to {
        transform: none;
        opacity: 1
      }
    }

    @keyframes fo {
      to {
        opacity: 0;
        transform: translateX(20px)
      }
    }

    body:not(.admin-logged-in):not(.manager-logged-in) .adminonly {
      display: none !important;
    }

    body:not(.admin-logged-in) .superadmin {
      display: none !important;
    }

    @media(min-width:769px) {
      .mobnav {
        display: none !important;
      }
    }

    .pay-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .pay-card {
      background: #fff;
      padding: 1.2rem;
      border-radius: 18px;
      border: 1px solid var(--bd);
      transition: .2s;
      position: relative;
      overflow: hidden;
    }

    .pay-card:hover {
      box-shadow: var(--hsh);
    }

    .pay-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      border-radius: 18px 18px 0 0;
    }

    .pay-card.green::before {
      background: linear-gradient(90deg, #059669, #34d399);
    }

    .pay-card.red::before {
      background: linear-gradient(90deg, #dc2626, #f87171);
    }

    .pay-card.blue::before {
      background: linear-gradient(90deg, #1a56db, #3b82f6);
    }

    .pay-card.purple::before {
      background: linear-gradient(90deg, #7c3aed, #a78bfa);
    }

    .pay-card .pc-lbl {
      font-size: .82rem;
      color: var(--ts);
      margin-bottom: 6px;
    }

    .pay-card .pc-val {
      font-size: 1.6rem;
      font-weight: 800;
      letter-spacing: -.5px;
    }

    .pay-card .pc-sub {
      font-size: .75rem;
      color: var(--tm);
      margin-top: 4px;
    }

    .pay-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: .72rem;
      font-weight: 600;
    }

    .pay-pill.earn {
      background: #dcfce7;
      color: #166534;
    }

    .pay-pill.cut {
      background: #fee2e2;
      color: #991b1b;
    }

    .pay-pill.net {
      background: #dbeafe;
      color: #1e40af;
    }

    .rp {
      font-family: 'Plus Jakarta Sans', monospace;
      font-variant-numeric: tabular-nums;
    }

    .pay-summary-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: center;
      background: #fff;
      padding: 1rem 1.2rem;
      border-radius: 16px;
      margin-bottom: 1rem;
      border: 1px solid var(--bd);
    }

    .psb-item {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 140px;
    }

    .psb-item .psb-lbl {
      font-size: .72rem;
      color: var(--tm);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .3px;
    }

    .psb-item .psb-val {
      font-size: 1.1rem;
      font-weight: 800;
    }

    .pay-month-sel {
      display: flex;
      gap: .8rem;
      flex-wrap: wrap;
      align-items: center;
    }

    .pay-month-sel select {
      padding: .55rem .9rem;
      border-radius: 12px;
      border: 1px solid var(--bd);
      font-size: .88rem;
    }

    /* ===== NOTIFIKASI KARYAWAN ===== */
    .notif-wrap {
      display: flex;
      flex-direction: column;
      gap: .7rem;
      margin-bottom: 1.2rem;
    }

    .notif-item {
      border-radius: 16px;
      padding: 1rem 1.2rem;
      display: flex;
      align-items: flex-start;
      gap: .9rem;
      border: 1.5px solid;
      position: relative;
      animation: fi .3s ease;
    }

    .notif-item.notif-approved {
      background: #ecfdf5;
      border-color: #6ee7b7;
    }

    .notif-item.notif-rejected {
      background: #fef2f2;
      border-color: #fca5a5;
    }

    .notif-item.notif-pending {
      background: #fffbeb;
      border-color: #fcd34d;
    }

    .notif-ico {
      font-size: 1.5rem;
      flex-shrink: 0;
      line-height: 1;
      margin-top: 2px;
    }

    .notif-body {
      flex: 1;
    }

    .notif-title {
      font-weight: 700;
      font-size: .95rem;
      margin-bottom: 3px;
    }

    .notif-approved .notif-title {
      color: #065f46;
    }

    .notif-rejected .notif-title {
      color: #991b1b;
    }

    .notif-pending .notif-title {
      color: #92400e;
    }

    .notif-sub {
      font-size: .82rem;
      line-height: 1.5;
    }

    .notif-approved .notif-sub {
      color: #047857;
    }

    .notif-rejected .notif-sub {
      color: #b91c1c;
    }

    .notif-pending .notif-sub {
      color: #b45309;
    }

    .notif-meta {
      font-size: .74rem;
      color: var(--tm);
      margin-top: 4px;
    }

    .notif-dismiss {
      position: absolute;
      top: .6rem;
      right: .7rem;
      background: transparent;
      border: none;
      cursor: pointer;
      font-size: 1rem;
      color: var(--tm);
      padding: 4px;
      border-radius: 8px;
      transition: .2s;
      line-height: 1;
    }

    .notif-dismiss:hover {
      background: rgba(0, 0, 0, .06);
    }

    .notif-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--er);
      color: #fff;
      font-size: .65rem;
      font-weight: 800;
      min-width: 17px;
      height: 17px;
      border-radius: 9px;
      padding: 0 4px;
      margin-left: 4px;
      vertical-align: middle;
    }

    .notif-empty {
      background: #fff;
      border-radius: 14px;
      border: 1px dashed var(--bd);
      padding: 1.2rem;
      text-align: center;
      color: var(--tm);
      font-size: .85rem;
    }

    /* ===== NOTIFIKASI KARYAWAN ===== */
    .notif-banner {
      background: linear-gradient(135deg, #fef3c7, #fffbeb);
      border: 2px solid #fbbf24;
      border-radius: 18px;
      padding: 1.2rem 1.4rem;
      margin-bottom: 1.2rem;
      position: relative;
      animation: fi .3s ease;
    }

    .notif-banner.rejected {
      background: linear-gradient(135deg, #fee2e2, #fff1f2);
      border-color: #f87171;
    }

    .notif-banner.approved {
      background: linear-gradient(135deg, #dcfce7, #f0fdf4);
      border-color: #4ade80;
    }

    .notif-banner .nb-hd {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: .5rem;
    }

    .notif-banner .nb-ico {
      font-size: 1.6rem;
      line-height: 1;
    }

    .notif-banner .nb-tt {
      font-weight: 700;
      font-size: .95rem;
    }

    .notif-banner .nb-sub {
      font-size: .82rem;
      color: var(--ts);
      line-height: 1.5;
    }

    .notif-banner .nb-det {
      background: rgba(0, 0, 0, .04);
      border-radius: 10px;
      padding: .5rem .8rem;
      margin-top: .6rem;
      font-size: .8rem;
      color: var(--ts);
    }

    .notif-banner .nb-close {
      position: absolute;
      top: 10px;
      right: 12px;
      background: none;
      border: none;
      font-size: 1.1rem;
      cursor: pointer;
      color: var(--tm);
      padding: 4px;
    }

    .notif-banner .nb-close:hover {
      color: var(--tx);
    }

    /* ===== KPI STYLES ===== */
    .kpi-toolbar {
      background: #fff;
      border-radius: 16px;
      border: 1px solid var(--bd);
      padding: 1rem 1.2rem;
      margin-bottom: 1.2rem;
    }

    .kpi-filters {
      display: flex;
      flex-wrap: wrap;
      gap: .8rem;
      align-items: center;
    }

    .kpi-filters-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 1rem;
      width: 100%;
      align-items: start;
    }

    .kpi-main-controls {
      display: flex;
      flex-wrap: wrap;
      gap: .7rem;
      align-items: end;
    }

    .kpi-print-panel {
      border: 1px solid var(--bd);
      border-radius: 12px;
      padding: .75rem;
      background: #f8fafc;
      min-height: 100%;
    }

    .kpi-pick-brief {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .6rem;
      flex-wrap: wrap;
      margin-bottom: .5rem;
    }

    .kpi-print-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      margin-top: .6rem;
    }

    .kpi-multi-tools {
      display: flex;
      gap: .45rem;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: .4rem;
    }

    .kpi-multi-count {
      font-size: .75rem;
      color: var(--ts);
      font-weight: 600;
    }

    .kpi-multi-search {
      width: 100%;
      margin-bottom: .4rem;
    }

    .kpi-multi-list {
      max-height: 190px;
      overflow: auto;
      border: 1px solid var(--bd);
      border-radius: 10px;
      background: #fff;
      padding: .35rem .5rem;
      min-width: 260px;
    }

    .kpi-multi-item {
      display: flex;
      align-items: center;
      gap: .45rem;
      padding: .2rem 0;
      font-size: .84rem;
      color: var(--tx);
    }

    #modalKpiEmp .mbox {
      width: min(560px, 92vw);
      max-height: 84vh;
      display: flex;
      flex-direction: column;
    }

    #modalKpiEmp .mbd {
      overflow: auto;
      padding-right: 2px;
    }

    @media(max-width:1024px) {
      .kpi-filters-grid {
        grid-template-columns: 1fr;
      }

      .kpi-print-panel {
        background: #fff;
      }
    }

    .kpi-sum-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 1rem;
      margin-bottom: 1.2rem;
    }

    .kpi-card {
      background: #fff;
      border-radius: 18px;
      border: 1px solid var(--bd);
      padding: 1.2rem;
      position: relative;
      overflow: hidden;
      transition: .2s;
    }

    .kpi-card:hover {
      box-shadow: var(--hsh);
    }

    .kpi-card::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 4px;
      border-radius: 0 0 18px 18px;
    }

    .kpi-card.kc-blue::after {
      background: linear-gradient(90deg, #1a56db, #60a5fa);
    }

    .kpi-card.kc-green::after {
      background: linear-gradient(90deg, #059669, #34d399);
    }

    .kpi-card.kc-yellow::after {
      background: linear-gradient(90deg, #d97706, #fbbf24);
    }

    .kpi-card.kc-red::after {
      background: linear-gradient(90deg, #dc2626, #f87171);
    }

    .kpi-card.kc-purple::after {
      background: linear-gradient(90deg, #7c3aed, #a78bfa);
    }

    .kpi-card .kc-lbl {
      font-size: .78rem;
      color: var(--ts);
      font-weight: 500;
      margin-bottom: 5px;
    }

    .kpi-card .kc-val {
      font-size: 1.9rem;
      font-weight: 800;
      letter-spacing: -1px;
      line-height: 1;
    }

    .kpi-card .kc-sub {
      font-size: .73rem;
      color: var(--tm);
      margin-top: 5px;
    }

    .kpi-chart-row {
      display: flex;
      gap: 1rem;
      margin-bottom: 1.2rem;
      flex-wrap: wrap;
    }

    .kpi-grade {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      font-weight: 800;
      font-size: 1rem;
    }

    .kpi-grade.A {
      background: #dcfce7;
      color: #166534;
    }

    .kpi-grade.B {
      background: #dbeafe;
      color: #1e40af;
    }

    .kpi-grade.C {
      background: #fef3c7;
      color: #92400e;
    }

    .kpi-grade.D {
      background: #fee2e2;
      color: #991b1b;
    }

    .kpi-score-bar {
      width: 100%;
      height: 8px;
      background: #f1f5f9;
      border-radius: 4px;
      margin-top: 5px;
      overflow: hidden;
    }

    .kpi-score-fill {
      height: 100%;
      border-radius: 4px;
      transition: width .5s ease;
    }

    .kpi-top-item {
      display: flex;
      align-items: center;
      gap: .8rem;
      padding: .7rem;
      background: var(--bg);
      border-radius: 14px;
      margin-bottom: .5rem;
    }

    .kpi-top-rank {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: .85rem;
      flex-shrink: 0;
    }

    .kpi-top-rank.r1 {
      background: linear-gradient(145deg, #fde68a, #f59e0b);
      color: #92400e;
    }

    .kpi-top-rank.r2 {
      background: linear-gradient(145deg, #e5e7eb, #d1d5db);
      color: #374151;
    }

    .kpi-top-rank.r3 {
      background: linear-gradient(145deg, #fed7aa, #f97316);
      color: #7c2d12;
    }

    .kpi-top-rank.rn {
      background: var(--bd);
      color: var(--tm);
    }

    .kpi-note {
      font-size: .75rem;
      color: var(--ts);
      max-width: 140px;
    }

    /* PRINT KPI */
    @media screen {
      #kpiPrintArea {
        display: none !important;
      }
    }

    @media print {
      body {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        background: #fff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
      }

      body>*:not(#kpiPrintArea) {
        display: none !important;
      }

      #kpiPrintArea {
        display: block !important;
        width: 100% !important;
        padding: 0;
        margin: 0;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
      }

      .no-print {
        display: none !important;
      }
    }

    /* ===== EMPLOYEE PERSONAL DASHBOARD ===== */
    .emp-greeting {
      background: linear-gradient(135deg, #1a56db, #3b82f6);
      border-radius: 20px;
      padding: 1.5rem 1.8rem;
      color: #fff;
      margin-bottom: 1.2rem;
      position: relative;
      overflow: hidden;
      animation: greetFade .45s ease-out;
    }

    .emp-greeting::after {
      content: '';
      position: absolute;
      right: -30px;
      top: -30px;
      width: 160px;
      height: 160px;
      background: rgba(255, 255, 255, .07);
      border-radius: 50%;
      animation: greetFloatA 7s ease-in-out infinite;
    }

    .emp-greeting::before {
      content: '';
      position: absolute;
      right: 60px;
      bottom: -40px;
      width: 100px;
      height: 100px;
      background: rgba(255, 255, 255, .05);
      border-radius: 50%;
      animation: greetFloatB 9s ease-in-out infinite;
    }

    .emp-greeting:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 26px rgba(26, 86, 219, .22);
      transition: transform .25s ease, box-shadow .25s ease;
    }

    @keyframes greetFade {
      from {
        opacity: .75;
        transform: translateY(4px) scale(.995);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    @keyframes greetFloatA {
      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }

      50% {
        transform: translate(-6px, 5px) scale(1.03);
      }
    }

    @keyframes greetFloatB {
      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }

      50% {
        transform: translate(5px, -4px) scale(1.04);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .emp-greeting,
      .emp-greeting::before,
      .emp-greeting::after {
        animation: none !important;
        transition: none !important;
      }
    }

    .emp-greeting .eg-hi {
      font-size: 1rem;
      opacity: .85;
      font-weight: 500;
    }

    .emp-greeting .eg-name {
      font-size: 1.6rem;
      font-weight: 800;
      letter-spacing: -.5px;
      margin: .2rem 0;
    }

    .emp-greeting .eg-sub {
      font-size: .83rem;
      opacity: .8;
    }

    .emp-greeting .eg-date {
      font-size: .8rem;
      opacity: .7;
      margin-top: .5rem;
    }

    .emp-today-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: .8rem;
      margin-bottom: 1rem;
    }

    .emp-today-card {
      background: #fff;
      border-radius: 16px;
      border: 1px solid var(--bd);
      padding: 1rem;
      text-align: center;
      transition: .2s;
    }

    .emp-today-card:hover {
      box-shadow: var(--hsh);
    }

    .emp-today-card .etc-ico {
      font-size: 1.5rem;
      margin-bottom: .4rem;
    }

    .emp-today-card .etc-lbl {
      font-size: .72rem;
      color: var(--ts);
      font-weight: 500;
    }

    .emp-today-card .etc-val {
      font-size: 1.1rem;
      font-weight: 800;
      margin-top: 2px;
    }

    .emp-today-card.etc-ok {
      border-color: #4ade80;
      background: linear-gradient(135deg, #f0fdf4, #fff);
    }

    .emp-today-card.etc-warn {
      border-color: #fbbf24;
      background: linear-gradient(135deg, #fffbeb, #fff);
    }

    .emp-today-card.etc-red {
      border-color: #f87171;
      background: linear-gradient(135deg, #fff1f2, #fff);
    }

    .emp-today-card.etc-blue {
      border-color: #60a5fa;
      background: linear-gradient(135deg, #eff6ff, #fff);
    }

    .emp-kpi-snap {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: .8rem;
    }

    .emp-kpi-item {
      text-align: center;
      padding: .8rem .5rem;
      background: var(--bg);
      border-radius: 14px;
    }

    .emp-kpi-item .eki-lbl {
      font-size: .72rem;
      color: var(--tm);
      margin-bottom: 4px;
    }

    .emp-kpi-item .eki-val {
      font-size: 1.3rem;
      font-weight: 800;
    }

    .emp-kpi-item.kpi-wide {
      grid-column: 1 / -1;
      padding: .95rem .7rem;
    }

    /* ===== PROFILE (EMPLOYEE) ===== */
    .pf-wrap {
      display: grid;
      gap: 1rem;
    }

    .pf-hero {
      background: linear-gradient(135deg, #1d4ed8, #3b82f6);
      border-radius: 18px;
      color: #fff;
      padding: 1rem 1.1rem;
      position: relative;
      overflow: hidden;
      box-shadow: 0 10px 24px rgba(37, 99, 235, .22);
    }

    .pf-hero::after {
      content: '';
      position: absolute;
      right: -28px;
      top: -28px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .12);
    }

    .pf-name {
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: -.2px;
      margin-bottom: 2px;
      position: relative;
      z-index: 1;
    }

    .pf-sub {
      font-size: .8rem;
      opacity: .9;
      position: relative;
      z-index: 1;
    }

    .pf-card {
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 16px;
      padding: .95rem 1rem;
    }

    .pf-title {
      font-size: .86rem;
      font-weight: 700;
      color: var(--ts);
      margin-bottom: .7rem;
    }

    .pf-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .7rem;
    }

    .pf-fi label {
      display: block;
      font-size: .73rem;
      font-weight: 600;
      color: var(--tm);
      margin-bottom: .3rem;
    }

    .pf-fi input,
    .pf-fi .pf-ro {
      width: 100%;
      min-height: 40px;
      border-radius: 12px;
      border: 1px solid var(--bd);
      background: #f8fafc;
      padding: .55rem .75rem;
      font-size: .83rem;
      color: var(--tx);
    }

    .pf-fi input:focus {
      outline: none;
      border-color: #93c5fd;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
      background: #fff;
    }

    .pf-full {
      grid-column: 1 / -1;
    }

    .pf-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: .75rem;
    }

    .pf-logout-section {
      margin-top: .35rem;
      padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .pf-logout-btn {
      width: 100%;
      min-height: 48px;
      padding: .85rem 1rem;
      border-radius: 14px;
      border: 2px solid var(--er);
      background: #fff;
      color: var(--er);
      font-weight: 700;
      font-size: .95rem;
      font-family: inherit;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      transition: background .2s ease, color .2s ease, box-shadow .2s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .pf-logout-btn:hover {
      background: var(--er);
      color: #fff;
    }

    .pf-logout-btn:active {
      transform: scale(0.99);
    }

    .pf-logout-btn .material-symbols-outlined {
      font-size: 1.25rem;
    }

    .pf-logout-hint {
      text-align: center;
      font-size: .72rem;
      color: var(--tm);
      margin: .55rem 0 0;
      line-height: 1.45;
    }

    .pf-fi select,
    .pf-fi textarea {
      width: 100%;
      min-height: 40px;
      border-radius: 12px;
      border: 1px solid var(--bd);
      background: #f8fafc;
      padding: .55rem .75rem;
      font-size: .83rem;
      color: var(--tx);
      font-family: inherit;
    }

    .pf-fi textarea {
      min-height: 120px;
      resize: vertical;
    }

    .pf-fi select:focus,
    .pf-fi textarea:focus {
      outline: none;
      border-color: #93c5fd;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
      background: #fff;
    }

    .pf-kel-intro {
      font-size: .8rem;
      color: var(--ts);
      margin: 0 0 1rem;
      line-height: 1.45;
    }

    .pf-actions-kel {
      justify-content: flex-start;
    }

    .pf-kel-history {
      margin-top: 1.15rem;
      padding-top: 1rem;
      border-top: 1px solid var(--bd);
    }

    .pf-kel-history-ttl {
      font-size: .78rem;
      font-weight: 800;
      color: var(--ts);
      margin: 0 0 .65rem;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .pf-kel-empty {
      font-size: .82rem;
      color: var(--tm);
      margin: 0;
    }

    .pf-kel-row {
      background: #f8fafc;
      border: 1px solid var(--bd);
      border-radius: 12px;
      padding: .65rem .75rem;
      margin-bottom: .5rem;
    }

    .pf-kel-row-hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
      margin-bottom: .35rem;
    }

    .pf-kel-date {
      font-size: .68rem;
      color: var(--tm);
      white-space: nowrap;
    }

    .pf-kel-cat {
      font-size: .72rem;
      font-weight: 700;
      color: var(--pr);
      margin-bottom: .25rem;
    }

    .pf-kel-snippet {
      font-size: .8rem;
      color: var(--tx);
      line-height: 1.45;
    }

    .pf-kel-noteback {
      margin-top: .5rem;
      padding-top: .5rem;
      border-top: 1px dashed var(--bd);
      font-size: .76rem;
      color: var(--ts);
      line-height: 1.4;
    }

    .pf-kel-pill {
      display: inline-flex;
      align-items: center;
      font-size: .62rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .04em;
      padding: .2rem .45rem;
      border-radius: 8px;
    }

    .pf-kel-st-open {
      background: #fef3c7;
      color: #92400e;
    }

    .pf-kel-st-read {
      background: #e0e7ff;
      color: #3730a3;
    }

    .pf-kel-st-in_review {
      background: #dbeafe;
      color: #1e40af;
    }

    .pf-kel-st-resolved {
      background: #dcfce7;
      color: #166534;
    }

    tr.kel-tr {
      cursor: pointer;
      transition: background .12s ease;
    }

    tr.kel-tr:hover {
      background: #f1f5f9;
    }

    .emp-hist-item {
      display: flex;
      align-items: center;
      gap: .8rem;
      padding: .65rem .8rem;
      border-radius: 12px;
      margin-bottom: .4rem;
      background: var(--bg);
    }

    .emp-hist-item .ehi-date {
      font-size: .8rem;
      font-weight: 600;
      min-width: 80px;
    }

    .emp-hist-item .ehi-times {
      font-size: .78rem;
      color: var(--ts);
      flex: 1;
      min-width: 0;
    }

    .emp-hist-item .ehi-dur {
      font-size: .75rem;
      color: var(--tm);
      width: 62px;
      text-align: right;
    }

    .emp-hist-item .badge {
      margin-left: auto;
      min-width: 108px;
      justify-content: center;
      text-align: center;
      flex-shrink: 0;
    }

    /* ===== DASHBOARD — gaya Stitch (Absensi View / HR SPA) ===== */
    #section-dashboard.dash-stitch {
      background: var(--bg);
    }

    #section-dashboard.dash-stitch .dash-stitch-hero {
      display: flex;
      flex-direction: column;
      gap: .75rem;
      margin-bottom: 1.35rem;
    }

    @media (min-width: 768px) {
      #section-dashboard.dash-stitch .dash-stitch-hero {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
      }
    }

    #section-dashboard.dash-stitch .dash-kicker {
      display: block;
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--pr);
      margin-bottom: .35rem;
    }

    #section-dashboard.dash-stitch .dash-title {
      font-size: clamp(1.5rem, 3.2vw, 2rem);
      font-weight: 800;
      letter-spacing: -.03em;
      color: #191c1e;
      line-height: 1.15;
    }

    #section-dashboard.dash-stitch .dash-desc {
      font-size: .88rem;
      color: var(--ts);
      max-width: 32rem;
      margin-top: .35rem;
      line-height: 1.5;
    }

    #section-dashboard.dash-stitch #dashAdmin .sgrid.dash-stitch-kpi {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
      margin-bottom: 1.35rem;
    }

    @media (min-width: 720px) {
      #section-dashboard.dash-stitch #dashAdmin .sgrid.dash-stitch-kpi {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (min-width: 1100px) {
      #section-dashboard.dash-stitch #dashAdmin .sgrid.dash-stitch-kpi {
        grid-template-columns: repeat(5, 1fr);
      }
    }

    #section-dashboard.dash-stitch .scrd.dash-kpi-wide {
      grid-column: span 2;
    }

    @media (min-width: 1100px) {
      #section-dashboard.dash-stitch .scrd.dash-kpi-wide {
        grid-column: span 1;
      }
    }

    #section-dashboard.dash-stitch .dash-dash-head {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    @media (min-width: 768px) {
      #section-dashboard.dash-stitch .dash-dash-head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
      }
    }

    #section-dashboard.dash-stitch .dash-overview-title {
      margin-bottom: .25rem;
    }

    #section-dashboard.dash-stitch .dash-date-line {
      font-size: .88rem;
      color: var(--ts);
      display: flex;
      align-items: center;
      gap: .5rem;
      margin: 0;
    }

    #section-dashboard.dash-stitch .dash-date-line i {
      color: var(--pr);
      font-size: .85rem;
    }

    #section-dashboard.dash-stitch .dash-head-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .65rem;
      width: 100%;
    }

    @media (min-width: 768px) {
      #section-dashboard.dash-stitch .dash-head-actions {
        width: auto;
        justify-content: flex-end;
      }
    }

    #section-dashboard.dash-stitch .dash-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      padding: .72rem 1.15rem;
      border-radius: 14px;
      font-size: .82rem;
      font-weight: 700;
      border: none;
      cursor: pointer;
      font-family: inherit;
      transition: transform .12s, box-shadow .2s, filter .2s;
      white-space: nowrap;
    }

    #section-dashboard.dash-stitch .dash-btn:active {
      transform: scale(.98);
    }

    #section-dashboard.dash-stitch .dash-btn-primary {
      background: linear-gradient(135deg, #003fb1 0%, var(--pr) 100%);
      color: #fff;
      box-shadow: 0 4px 18px rgba(26, 86, 219, .3);
    }

    #section-dashboard.dash-stitch .dash-btn-primary:hover {
      filter: brightness(1.05);
    }

    #section-dashboard.dash-stitch .dash-btn-secondary {
      background: #fff;
      color: var(--pr);
      border: 1px solid rgba(195, 197, 215, .45);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    }

    #section-dashboard.dash-stitch .dash-btn-secondary:hover {
      background: #f2f4f7;
    }

    #section-dashboard.dash-stitch #dashAdmin .scrd {
      background: #fff;
      border-radius: 18px;
      padding: 1.25rem 1.1rem 1.2rem;
      border: 1px solid rgba(195, 197, 215, .35);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
      transition: box-shadow .25s, transform .2s;
    }

    #section-dashboard.dash-stitch #dashAdmin .scrd:hover {
      box-shadow: 0 14px 44px rgba(19, 83, 216, .1);
      transform: translateY(-2px);
    }

    #section-dashboard.dash-stitch .dash-kpi-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: .85rem;
    }

    #section-dashboard.dash-stitch .dash-kpi-ico {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      transition: transform .2s;
    }

    #section-dashboard.dash-stitch .scrd:hover .dash-kpi-ico {
      transform: scale(1.06);
    }

    #section-dashboard.dash-stitch .dash-kpi-ico-blue {
      background: #dbe1ff;
      color: #003fb1;
    }

    #section-dashboard.dash-stitch .dash-kpi-ico-coral {
      background: #ffdbcf;
      color: #852b00;
    }

    #section-dashboard.dash-stitch .dash-kpi-ico-indigo {
      background: #dbe1ff;
      color: #4b5c92;
    }

    #section-dashboard.dash-stitch .dash-kpi-ico-red {
      background: #ffdad6;
      color: #ba1a1a;
    }

    #section-dashboard.dash-stitch .dash-kpi-ico-muted {
      background: #e6e8eb;
      color: #434654;
    }

    #section-dashboard.dash-stitch .dash-kpi-pct {
      font-size: .62rem;
      font-weight: 800;
      color: #852b00;
      background: rgba(255, 219, 207, .55);
      padding: .25rem .45rem;
      border-radius: 8px;
    }

    #section-dashboard.dash-stitch #dashAdmin .slbl {
      font-size: .62rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: #737686;
      margin-bottom: .35rem;
    }

    #section-dashboard.dash-stitch .snum {
      font-size: 1.72rem;
      font-weight: 900;
      letter-spacing: -.03em;
      line-height: 1.1;
    }

    #section-dashboard.dash-stitch .scrd:nth-child(1) .snum {
      color: #003fb1;
    }

    #section-dashboard.dash-stitch .scrd:nth-child(2) .snum {
      color: #059669;
    }

    #section-dashboard.dash-stitch .scrd:nth-child(3) .snum {
      color: #2563eb;
    }

    #section-dashboard.dash-stitch .scrd:nth-child(4) .snum {
      color: #d97706;
    }

    #section-dashboard.dash-stitch .scrd:nth-child(5) .snum {
      color: #e11d48;
    }

    #section-dashboard.dash-stitch #dashAdmin .dchrt.dash-charts-stitch {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.25rem;
      margin-bottom: 1.5rem;
    }

    @media (min-width: 1024px) {
      #section-dashboard.dash-stitch #dashAdmin .dchrt.dash-charts-stitch {
        grid-template-columns: minmax(260px, 1fr) minmax(0, 2.1fr);
        align-items: stretch;
      }

      #section-dashboard.dash-stitch #dashAdmin .dchrt.dash-charts-stitch.dash-charts-v2 {
        grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1fr);
      }
    }

    #section-dashboard.dash-stitch #dashAdmin .dash-charts-stitch .ccrd {
      background: #fff;
      border-radius: 24px;
      border: 1px solid rgba(195, 197, 215, .35);
      padding: 1.5rem 1.35rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
      transition: box-shadow .25s;
    }

    #section-dashboard.dash-stitch #dashAdmin .dash-charts-stitch .ccrd:hover {
      box-shadow: 0 12px 40px rgba(19, 83, 216, .08);
    }

    #section-dashboard.dash-stitch .dash-chart-hd {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.1rem;
    }

    #section-dashboard.dash-stitch .dash-chart-hd h4 {
      font-size: 1.02rem;
      font-weight: 800;
      letter-spacing: -.02em;
      color: #191c1e;
      margin: 0;
    }

    #section-dashboard.dash-stitch .dash-chart-hd-bar {
      flex-wrap: wrap;
      gap: .5rem;
    }

    #section-dashboard.dash-stitch .dash-bar-legend {
      font-size: .65rem;
      font-weight: 700;
      color: #737686;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    #section-dashboard.dash-stitch .dash-bar-legend span {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
    }

    #section-dashboard.dash-stitch .dash-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      display: inline-block;
    }

    #section-dashboard.dash-stitch .dash-dot-p {
      background: var(--pr);
    }

    #section-dashboard.dash-stitch .dash-donut-cwrp {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      min-height: auto;
      height: auto;
      position: relative;
    }

    #section-dashboard.dash-stitch .dash-donut-legend {
      position: static !important;
      transform: none !important;
      display: flex;
      flex-direction: column;
      gap: .55rem;
      width: 100%;
      max-width: 240px;
      font-size: .8rem;
    }

    #section-dashboard.dash-stitch .dash-bar-cwrp {
      height: 300px !important;
    }

    #section-dashboard.dash-stitch .dash-table-shell {
      background: #fff;
      border-radius: 24px;
      border: 1px solid rgba(195, 197, 215, .35);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
      overflow: hidden;
      margin-bottom: .5rem;
    }

    #section-dashboard.dash-stitch .dash-table-toolbar {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding: 1.35rem 1.35rem 1rem;
      border-bottom: 1px solid var(--bd);
    }

    @media (min-width: 640px) {
      #section-dashboard.dash-stitch .dash-table-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
    }

    #section-dashboard.dash-stitch .dash-table-ttl {
      font-size: 1.05rem;
      font-weight: 800;
      color: #191c1e;
      margin: 0 0 .2rem;
      letter-spacing: -.02em;
    }

    #section-dashboard.dash-stitch .dash-table-sub {
      font-size: .82rem;
      color: var(--ts);
      margin: 0;
    }

    #section-dashboard.dash-stitch .dash-search-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }

    #section-dashboard.dash-stitch .dash-search-wrap i {
      position: absolute;
      left: 12px;
      color: #737686;
      font-size: .85rem;
      pointer-events: none;
    }

    #section-dashboard.dash-stitch .dash-search-wrap input {
      width: 100%;
      min-width: 200px;
      padding: .6rem .85rem .6rem 2.35rem;
      border: none;
      border-radius: 14px;
      background: #f2f4f7;
      font-size: .85rem;
      font-family: inherit;
      color: var(--tx);
    }

    #section-dashboard.dash-stitch .dash-search-wrap input:focus {
      outline: 2px solid rgba(26, 86, 219, .2);
      background: #fff;
    }

    #section-dashboard.dash-stitch .dash-twrp-shell {
      border-radius: 0;
      border: none;
      box-shadow: none;
    }

    #section-dashboard.dash-stitch .dash-table-foot {
      padding: 1rem 1.35rem;
      background: rgba(242, 244, 247, .35);
      font-size: .72rem;
      font-weight: 600;
      color: #737686;
    }

    #section-dashboard.dash-stitch #dashEmp .ccrd {
      background: #fff;
      border-radius: 20px;
      border: 1px solid rgba(195, 197, 215, .35);
      padding: 1.35rem 1.25rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
      transition: box-shadow .25s;
    }

    #section-dashboard.dash-stitch #dashEmp .ccrd:hover {
      box-shadow: 0 12px 40px rgba(19, 83, 216, .08);
    }

    #section-dashboard.dash-stitch #dashEmp .ccrd h4 {
      font-size: .92rem;
      font-weight: 800;
      letter-spacing: -.02em;
      color: #191c1e;
      margin-bottom: 1rem;
    }

    #section-dashboard.dash-stitch .dash-section-title {
      font-size: 1.02rem;
      font-weight: 800;
      letter-spacing: -.02em;
      color: #191c1e;
      margin-bottom: .85rem;
      display: flex;
      align-items: center;
      gap: .5rem;
    }

    #section-dashboard.dash-stitch .dash-twrp {
      border-radius: 20px;
      border: 1px solid rgba(195, 197, 215, .35);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
      overflow: hidden;
    }

    #section-dashboard.dash-stitch .dash-twrp thead th {
      background: #f1f5f9;
      font-size: .62rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: #64748b;
      padding: .75rem 1rem;
      border-bottom: 1px solid rgba(195, 197, 215, .5);
    }

    #section-dashboard.dash-stitch .dash-twrp tbody tr {
      transition: background .12s;
    }

    #section-dashboard.dash-stitch .dash-twrp tbody tr:hover {
      background: #f8fafc;
    }

    #section-dashboard.dash-stitch .dash-twrp tbody td {
      padding: .85rem 1rem;
      border-bottom: 1px solid #f1f5f9;
      vertical-align: middle;
    }

    #section-dashboard.dash-stitch #dashContractAlerts .contract-alert-banner,
    #section-dashboard.dash-stitch #dashContractAlerts .anniversary-banner {
      border-radius: 18px;
      border: 1px solid rgba(195, 197, 215, .35);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
      margin-bottom: .8rem;
    }

    /* Dashboard admin — hero & KPI (Stitch HR Portal) */
    #section-dashboard.dash-stitch #dashAdmin .dash-admin-inner {
      max-width: 80rem;
      margin: 0 auto;
      padding: 0 1rem 2rem;
    }

    @media (min-width: 768px) {
      #section-dashboard.dash-stitch #dashAdmin .dash-admin-inner {
        padding: 0 1.75rem 2rem;
      }
    }

    #section-dashboard.dash-stitch .dash-hero-blob {
      position: relative;
      overflow: hidden;
      border-radius: 16px;
      background: linear-gradient(135deg, #003fb1 0%, #1a56db 55%, #1353d8 100%);
      color: #fff;
      padding: 2rem 2.25rem;
      margin-bottom: 1.75rem;
      box-shadow: 0 16px 48px rgba(0, 63, 177, .22);
    }

    #section-dashboard.dash-stitch .dash-hero-blob .dash-hero-svg {
      position: absolute;
      top: 0;
      right: 0;
      width: 38%;
      height: 100%;
      opacity: .1;
      pointer-events: none;
    }

    #section-dashboard.dash-stitch .dash-hero-blob .dash-hero-svg svg {
      width: 100%;
      height: 100%;
      transform: scale(1.35) translate(18%, 0);
    }

    #section-dashboard.dash-stitch .dash-hero-inner {
      position: relative;
      z-index: 1;
    }

    #section-dashboard.dash-stitch .dash-hero-inner h2 {
      font-size: clamp(1.35rem, 2.8vw, 1.85rem);
      font-weight: 800;
      letter-spacing: -.03em;
      margin: 0 0 .35rem;
      line-height: 1.2;
    }

    #section-dashboard.dash-stitch .dash-hero-sub {
      font-size: .9rem;
      font-weight: 500;
      color: rgba(219, 225, 255, .88);
      margin: 0 0 .25rem;
      max-width: 36rem;
    }

    #section-dashboard.dash-stitch .dash-hero-date {
      font-size: .78rem;
      color: rgba(255, 255, 255, .72);
      margin: 0 0 1rem;
    }

    #section-dashboard.dash-stitch .dash-hero-chips {
      display: flex;
      flex-wrap: wrap;
      gap: .85rem;
      padding-top: .35rem;
    }

    #section-dashboard.dash-stitch .dash-hero-chip {
      background: rgba(255, 255, 255, .12);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 16px;
      padding: .85rem 1.1rem;
      min-width: 140px;
    }

    #section-dashboard.dash-stitch .dash-hero-chip-lbl {
      font-size: .62rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .14em;
      color: rgba(186, 198, 255, .95);
      margin-bottom: .35rem;
    }

    #section-dashboard.dash-stitch .dash-sync-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #34d399;
      flex-shrink: 0;
      animation: dash-pulse 2s ease-in-out infinite;
    }

    @keyframes dash-pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .45;
      }
    }

    #section-dashboard.dash-stitch .dash-hero-chip-val {
      display: flex;
      align-items: center;
      gap: .45rem;
      font-weight: 800;
      font-size: .92rem;
    }

    #section-dashboard.dash-stitch .dash-hero-chip-val .material-symbols-outlined {
      font-size: 1.1rem;
      opacity: .9;
    }

    #section-dashboard.dash-stitch .dash-kpi-tag {
      font-size: .62rem;
      font-weight: 800;
      padding: .2rem .45rem;
      border-radius: 999px;
      white-space: nowrap;
    }

    #section-dashboard.dash-stitch .dash-kpi-tag-em {
      color: #059669;
      background: #ecfdf5;
    }

    #section-dashboard.dash-stitch .dash-kpi-tag-muted {
      color: #64748b;
      background: #f1f5f9;
    }

    #section-dashboard.dash-stitch .dash-kpi-tag-warn {
      color: #b45309;
      background: #fffbeb;
    }

    #section-dashboard.dash-stitch .dash-kpi-tag-rose {
      color: #be123c;
      background: #fff1f2;
    }

    #section-dashboard.dash-stitch .dash-kpi-spark {
      height: 24px;
      width: 100%;
      opacity: .55;
    }

    #section-dashboard.dash-stitch .dash-kpi-ico .material-symbols-outlined {
      font-size: 1.35rem;
    }

    #section-dashboard.dash-stitch .dash-kpi-ico-emerald {
      background: #ecfdf5;
      color: #059669;
    }

    #section-dashboard.dash-stitch .dash-kpi-ico-amber {
      background: #fffbeb;
      color: #d97706;
    }

    #section-dashboard.dash-stitch .dash-kpi-ico-rose {
      background: #fff1f2;
      color: #e11d48;
    }

    #section-dashboard.dash-stitch .dash-chart-select {
      border: none;
      border-radius: 14px;
      background: #f1f5f9;
      font-size: .78rem;
      font-weight: 700;
      color: #475569;
      padding: .45rem .85rem;
      font-family: inherit;
      box-shadow: 0 0 0 1px rgba(148, 163, 184, .35);
      cursor: pointer;
    }

    #section-dashboard.dash-stitch .dash-table-link {
      background: none;
      border: none;
      color: var(--pr);
      font-weight: 800;
      font-size: .82rem;
      cursor: pointer;
      font-family: inherit;
    }

    #section-dashboard.dash-stitch .dash-table-link:hover {
      text-decoration: underline;
    }

    #section-dashboard.dash-stitch .dash-emp-cell {
      display: flex;
      align-items: center;
      gap: .65rem;
    }

    #section-dashboard.dash-stitch .dash-emp-name {
      font-size: .86rem;
      font-weight: 800;
      color: #0f172a;
      margin: 0;
      line-height: 1.25;
    }

    #section-dashboard.dash-stitch .dash-emp-id {
      font-size: .72rem;
      color: #64748b;
      margin: .1rem 0 0;
    }

    #section-dashboard.dash-stitch .dash-icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: .35rem;
      border: none;
      border-radius: 10px;
      background: transparent;
      color: #94a3b8;
      cursor: pointer;
      transition: background .15s, color .15s;
    }

    #section-dashboard.dash-stitch .dash-icon-btn:hover {
      background: #e2e8f0;
      color: var(--pr);
    }

    #section-dashboard.dash-stitch .dash-twrp .hide-dash-ext {
      display: none;
    }

    #section-dashboard.dash-stitch #dashEmp .dash-stitch-hero {
      margin-bottom: 1.1rem;
    }

    #section-dashboard.dash-stitch #dashEmp .emp-greeting {
      background: #fff;
      color: #191c1e;
      border: 1px solid rgba(195, 197, 215, .35);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
      border-left: 4px solid #003fb1;
    }

    #section-dashboard.dash-stitch #dashEmp .emp-greeting::before,
    #section-dashboard.dash-stitch #dashEmp .emp-greeting::after {
      opacity: .35;
    }

    #section-dashboard.dash-stitch #dashEmp .emp-greeting .eg-hi {
      color: var(--pr);
      font-weight: 800;
      font-size: .72rem;
      text-transform: uppercase;
      letter-spacing: .12em;
      opacity: 1;
    }

    #section-dashboard.dash-stitch #dashEmp .emp-greeting .eg-name {
      color: #191c1e;
    }

    #section-dashboard.dash-stitch #dashEmp .emp-greeting .eg-sub,
    #section-dashboard.dash-stitch #dashEmp .emp-greeting .eg-date {
      color: var(--ts);
      opacity: 1;
    }

    #section-dashboard.dash-stitch #dashEmp .memo-banner {
      border-radius: 18px;
      border: 1px solid rgba(195, 197, 215, .35);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    }

    #section-dashboard.dash-stitch #dashEmp .emp-today-grid {
      gap: 1rem;
    }

    #section-dashboard.dash-stitch #dashEmp .emp-today-card {
      border-radius: 18px;
      border: 1px solid rgba(195, 197, 215, .35);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
      padding: 1.1rem .85rem;
    }

    #section-dashboard.dash-stitch #dashEmp .emp-today-card:hover {
      box-shadow: 0 12px 36px rgba(19, 83, 216, .1);
    }

    #section-dashboard.dash-stitch #dashEmp .emp-today-card .etc-lbl {
      font-size: .6rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: #737686;
    }

    #section-dashboard.dash-stitch #dashEmp .emp-kpi-item {
      background: #fff;
      border: 1px solid rgba(195, 197, 215, .3);
      border-radius: 14px;
    }

    /* Grafik bar karyawan: lebar/tinggi stabil + canvas mengisi kontainer (mobile) */
    #section-dashboard.dash-stitch #dashEmp .emp-bar-cwrp {
      width: 100%;
      min-width: 0;
      height: 200px;
      min-height: 168px;
      box-sizing: border-box;
    }

    @media (max-width: 480px) {
      #section-dashboard.dash-stitch #dashEmp .emp-bar-cwrp {
        height: 196px;
        min-height: 164px;
      }
    }

    #section-dashboard.dash-stitch #dashEmp .emp-bar-cwrp canvas#barCEmp {
      width: 100% !important;
      height: 100% !important;
      max-width: 100%;
      display: block;
      min-width: 0;
    }

    #section-dashboard.dash-stitch #dashEmp .emp-hist-item {
      background: #fff;
      border: 1px solid rgba(195, 197, 215, .35);
      border-radius: 16px;
      margin-bottom: .55rem;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
    }

    #section-dashboard.dash-stitch #dashEmp .ccrd {
      margin-top: 0;
    }

    @media (max-width: 768px) {
      #section-dashboard.dash-stitch .dchrt {
        grid-template-columns: 1fr;
      }

      #section-dashboard.dash-stitch #dashEmp .dchrt .ccrd {
        min-width: 0;
      }
    }

    /* ── Karyawan (Stitch “Karyawan View”) ── */
    #section-karyawan.emp-stitch {
      background: var(--bg);
    }

    #section-karyawan.emp-stitch .emp-stitch-hero {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      margin-bottom: 1.75rem;
    }

    @media (min-width: 768px) {
      #section-karyawan.emp-stitch .emp-stitch-hero {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1.5rem;
      }
    }

    #section-karyawan.emp-stitch .emp-kicker {
      display: block;
      font-size: .62rem;
      font-weight: 800;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: #003fb1;
      margin-bottom: .35rem;
    }

    #section-karyawan.emp-stitch .emp-title {
      font-size: clamp(1.65rem, 4vw, 2.65rem);
      font-weight: 900;
      letter-spacing: -.04em;
      color: #191c1e;
      line-height: 1.1;
      margin: 0;
    }

    #section-karyawan.emp-stitch .emp-desc {
      font-size: .88rem;
      color: var(--ts);
      max-width: 28rem;
      margin: .5rem 0 0;
      line-height: 1.55;
    }

    #section-karyawan.emp-stitch .emp-stitch-hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .75rem;
    }

    #section-karyawan.emp-stitch .emp-search-wrap {
      position: relative;
      flex: 1 1 200px;
      min-width: 180px;
      max-width: 320px;
    }

    #section-karyawan.emp-stitch .emp-search-wrap i {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: #737686;
      font-size: .82rem;
      pointer-events: none;
    }

    #section-karyawan.emp-stitch .emp-search-wrap input {
      width: 100%;
      padding: .85rem 1rem .85rem 2.5rem;
      border: none;
      border-radius: 14px;
      background: #e6e8eb;
      font-size: .85rem;
      font-family: inherit;
      color: var(--tx);
      outline: none;
    }

    #section-karyawan.emp-stitch .emp-search-wrap input:focus {
      background: #fff;
      box-shadow: 0 0 0 2px rgba(26, 86, 219, .2);
    }

    #section-karyawan.emp-stitch .emp-view-toggle {
      display: inline-flex;
      padding: 3px;
      border-radius: 14px;
      background: var(--st-muted);
      border: 1px solid var(--st-outline);
    }

    #section-karyawan.emp-stitch .emp-view-btn {
      padding: .5rem .85rem;
      border: none;
      border-radius: 11px;
      font-size: .72rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .06em;
      cursor: pointer;
      background: transparent;
      color: #64748b;
      font-family: inherit;
      transition: background .15s, color .15s;
    }

    #section-karyawan.emp-stitch .emp-view-btn-active {
      background: #003fb1;
      color: #fff;
      box-shadow: 0 4px 14px rgba(0, 63, 177, .25);
    }

    #section-karyawan.emp-stitch .emp-btn-add {
      border-radius: 14px;
      font-weight: 800;
      padding: .65rem 1.1rem;
      background: #003fb1;
      color: #fff;
      border: none;
      box-shadow: 0 6px 20px rgba(0, 63, 177, .22);
    }

    #section-karyawan.emp-stitch .emp-btn-add:hover {
      filter: brightness(1.05);
    }

    #section-karyawan.emp-stitch .emp-btn-outline {
      border-radius: 14px;
      font-weight: 700;
      padding: .65rem 1rem;
      background: #fff;
      border: 1px solid rgba(195, 197, 215, .6);
      color: #334155;
    }

    #section-karyawan.emp-stitch .emp-stats-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.25rem;
      margin-bottom: 1.5rem;
    }

    @media (min-width: 900px) {
      #section-karyawan.emp-stitch .emp-stats-grid {
        grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
      }
    }

    #section-karyawan.emp-stitch .emp-stat-wide {
      background: #fff;
      border-radius: 18px;
      padding: 1.75rem 1.5rem;
      border: 1px solid rgba(195, 197, 215, .25);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    }

    #section-karyawan.emp-stitch .emp-stat-wide-inner {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 1rem;
    }

    #section-karyawan.emp-stitch .emp-stat-h {
      font-size: 1rem;
      font-weight: 800;
      color: #191c1e;
      margin: 0 0 .35rem;
    }

    #section-karyawan.emp-stitch .emp-stat-num {
      font-size: clamp(2.2rem, 5vw, 3rem);
      font-weight: 900;
      letter-spacing: -.04em;
      color: #191c1e;
      line-height: 1;
    }

    #section-karyawan.emp-stitch .emp-stat-sub {
      margin-top: 1rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .5rem;
      font-size: .8rem;
      color: #434654;
    }

    #section-karyawan.emp-stitch .emp-pill {
      background: #ffdbcf;
      color: #802a00;
      font-size: .58rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .04em;
      padding: .25rem .55rem;
      border-radius: 999px;
    }

    #section-karyawan.emp-stitch .emp-stat-spark {
      width: 120px;
      height: 96px;
      border-radius: 14px;
      background: #f2f4f7;
      flex-shrink: 0;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      padding: 8px 6px;
    }

    #section-karyawan.emp-stitch .emp-stat-spark span {
      width: 8px;
      border-radius: 4px 4px 0 0;
      background: linear-gradient(180deg, rgba(0, 63, 177, .15), #003fb1);
      align-self: flex-end;
    }

    #section-karyawan.emp-stitch .emp-stat-ai {
      background: linear-gradient(145deg, #1a56db 0%, #1353d8 100%);
      border-radius: 18px;
      padding: 1.75rem 1.5rem;
      color: #d4dcff;
      box-shadow: 0 12px 40px rgba(19, 83, 216, .2);
    }

    #section-karyawan.emp-stitch .emp-stat-h-light {
      color: #d4dcff;
      opacity: .95;
    }

    #section-karyawan.emp-stitch .emp-stat-num-light {
      color: #fff;
    }

    #section-karyawan.emp-stitch .emp-stat-ai-desc {
      margin: .75rem 0 0;
      font-size: .78rem;
      line-height: 1.45;
      opacity: .88;
      font-weight: 500;
    }

    #section-karyawan.emp-stitch .emp-stat-link {
      margin-top: 1rem;
      padding: 0;
      border: none;
      background: none;
      font-size: .82rem;
      font-weight: 800;
      color: #fff;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      text-decoration: underline;
      text-underline-offset: 4px;
      font-family: inherit;
    }

    #section-karyawan.emp-stitch .emp-grid-wrap {
      margin-bottom: .5rem;
    }

    #section-karyawan.emp-stitch .emp-db-hero {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      margin-bottom: 1.5rem;
      align-items: flex-start;
    }

    @media (min-width: 768px) {
      #section-karyawan.emp-stitch .emp-db-hero {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
      }
    }

    #section-karyawan.emp-stitch .emp-db-hero-cta {
      flex-shrink: 0;
    }

    #section-karyawan.emp-stitch .emp-btn-add-gradient {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      padding: 1rem 1.75rem;
      border: none;
      border-radius: 14px;
      font-size: .9rem;
      font-weight: 800;
      font-family: inherit;
      color: #fff;
      cursor: pointer;
      background: linear-gradient(90deg, #003fb1 0%, #1a56db 100%);
      box-shadow: 0 12px 32px rgba(0, 63, 177, .28);
      transition: transform .2s ease, filter .2s ease;
    }

    #section-karyawan.emp-stitch .emp-btn-add-gradient:hover {
      transform: scale(1.02);
      filter: brightness(1.03);
    }

    #section-karyawan.emp-stitch .emp-btn-add-gradient .material-symbols-outlined {
      font-size: 22px;
    }

    #section-karyawan.emp-stitch .emp-db-toolbar-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .75rem;
      margin-bottom: 1.25rem;
    }

    #section-karyawan.emp-stitch .emp-search-wrap.emp-search-wide {
      flex: 1 1 240px;
      max-width: none;
      min-width: 0;
    }

    #section-karyawan.emp-stitch .emp-search-ico {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: #94a3b8;
      font-size: 22px;
      pointer-events: none;
    }

    #section-karyawan.emp-stitch .emp-search-wrap.emp-search-wide input {
      padding-left: 2.85rem;
    }

    #section-karyawan.emp-stitch .emp-db-toolbar-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .5rem;
    }

    #section-karyawan.emp-stitch .emp-btn-quick-export {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .55rem 1rem;
      border-radius: 12px;
      border: none;
      background: #003fb1;
      color: #fff;
      font-size: .78rem;
      font-weight: 800;
      font-family: inherit;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(0, 63, 177, .22);
    }

    #section-karyawan.emp-stitch .emp-btn-quick-export .material-symbols-outlined {
      font-size: 18px;
    }

    #section-karyawan.emp-stitch .emp-db-bento {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.25rem;
      margin-bottom: 1.5rem;
    }

    @media (min-width: 640px) {
      #section-karyawan.emp-stitch .emp-db-bento {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1024px) {
      #section-karyawan.emp-stitch .emp-db-bento {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    #section-karyawan.emp-stitch .emp-db-stat-card {
      background: #fff;
      border-radius: 18px;
      padding: 1.35rem 1.25rem;
      border: 1px solid rgba(195, 197, 215, .12);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    }

    #section-karyawan.emp-stitch .emp-db-stat-k {
      font-size: .62rem;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #94a3b8;
      margin: 0 0 .35rem;
    }

    #section-karyawan.emp-stitch .emp-db-stat-v {
      font-size: 1.85rem;
      font-weight: 900;
      letter-spacing: -.03em;
      color: #191c1e;
      margin: 0;
      line-height: 1.1;
    }

    #section-karyawan.emp-stitch .emp-db-stat-v-primary {
      color: #003fb1;
    }

    #section-karyawan.emp-stitch .emp-db-stat-v-warn {
      color: #852b00;
    }

    #section-karyawan.emp-stitch .emp-db-stat-row {
      display: flex;
      align-items: center;
      gap: .5rem;
      flex-wrap: wrap;
    }

    #section-karyawan.emp-stitch .emp-db-stat-tag {
      font-size: .68rem;
      font-weight: 800;
      padding: .2rem .45rem;
      border-radius: 999px;
      background: #ecfdf5;
      color: #059669;
    }

    #section-karyawan.emp-stitch .emp-db-subtoolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      margin-bottom: 1.25rem;
    }

    #section-karyawan.emp-stitch .emp-db-subtoolbar-left {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
    }

    #section-karyawan.emp-stitch .emp-chip-btn {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .5rem 1rem;
      border-radius: 999px;
      border: none;
      background: #e6e8eb;
      color: #434654;
      font-size: .82rem;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: background .2s ease;
    }

    #section-karyawan.emp-stitch .emp-chip-btn:hover {
      background: #dce0e5;
    }

    #section-karyawan.emp-stitch .emp-chip-btn-outline {
      background: #fff;
      border: 1px solid rgba(195, 197, 215, .35);
    }

    #section-karyawan.emp-stitch .emp-chip-btn .material-symbols-outlined {
      font-size: 18px;
    }

    #section-karyawan.emp-stitch .emp-db-range {
      font-size: .82rem;
      font-weight: 600;
      color: #434654;
    }

    #section-karyawan.emp-stitch .egrid.emp-ecard-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    @media (min-width: 768px) {
      #section-karyawan.emp-stitch .egrid.emp-ecard-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1100px) {
      #section-karyawan.emp-stitch .egrid.emp-ecard-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    #section-karyawan.emp-stitch .emp-ecard {
      background: #fff;
      border-radius: 18px;
      padding: 1.5rem;
      border: 1px solid transparent;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
      transition: box-shadow .3s ease, border-color .3s ease;
    }

    #section-karyawan.emp-stitch .emp-ecard:hover {
      box-shadow: 0 20px 50px rgba(19, 83, 216, .07);
      border-color: rgba(0, 63, 177, .12);
    }

    #section-karyawan.emp-stitch .emp-ecard-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: .75rem;
      margin-bottom: 1.25rem;
    }

    #section-karyawan.emp-stitch .emp-ecard-profile {
      display: flex;
      gap: 1rem;
      min-width: 0;
    }

    #section-karyawan.emp-stitch .emp-ecard-photo {
      width: 64px;
      height: 64px;
      border-radius: 16px;
      font-size: 1.1rem;
      flex-shrink: 0;
      box-shadow: 0 0 0 4px #f2f4f7;
    }

    #section-karyawan.emp-stitch .emp-ecard-name {
      font-size: 1.05rem;
      font-weight: 800;
      color: #191c1e;
      margin: 0;
      line-height: 1.25;
      letter-spacing: -.02em;
    }

    #section-karyawan.emp-stitch .emp-ecard-title {
      font-size: .88rem;
      font-weight: 600;
      color: #003fb1;
      margin: .15rem 0 0;
    }

    #section-karyawan.emp-stitch .emp-ecard-role-pill {
      display: inline-flex;
      margin-top: .45rem;
      padding: .28rem .65rem;
      border-radius: 999px;
      font-size: .58rem;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    #section-karyawan.emp-stitch .emp-ecard-role-pill.mgr {
      background: #dbe1ff;
      color: #334479;
    }

    #section-karyawan.emp-stitch .emp-ecard-role-pill.emp {
      background: #e6e8eb;
      color: #434654;
    }

    #section-karyawan.emp-stitch .emp-ecard-actions {
      display: flex;
      flex-direction: column;
      gap: .15rem;
      flex-shrink: 0;
    }

    #section-karyawan.emp-stitch .emp-ecard-iconbtn {
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 10px;
      background: transparent;
      color: #94a3b8;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: color .2s ease, background .2s ease;
    }

    #section-karyawan.emp-stitch .emp-ecard-iconbtn:hover {
      color: #003fb1;
      background: rgba(0, 63, 177, .06);
    }

    #section-karyawan.emp-stitch .emp-ecard-iconbtn.danger:hover {
      color: #ba1a1a;
      background: rgba(186, 26, 26, .08);
    }

    #section-karyawan.emp-stitch .emp-ecard-iconbtn .material-symbols-outlined {
      font-size: 20px;
    }

    #section-karyawan.emp-stitch .emp-ecard-meta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem 1.25rem;
      margin-bottom: 1.25rem;
    }

    #section-karyawan.emp-stitch .emp-ecard-lbl {
      font-size: .58rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #94a3b8;
      margin: 0 0 .25rem;
    }

    #section-karyawan.emp-stitch .emp-ecard-val {
      font-size: .84rem;
      font-weight: 600;
      color: #434654;
      margin: 0;
      display: flex;
      align-items: center;
      gap: .25rem;
    }

    #section-karyawan.emp-stitch .emp-ecard-val .material-symbols-outlined {
      font-size: 18px;
      color: #737686;
    }

    #section-karyawan.emp-stitch .emp-ecard-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      padding-top: 1rem;
      border-top: 1px solid #f1f5f9;
      flex-wrap: wrap;
    }

    #section-karyawan.emp-stitch .emp-ecard-ai {
      display: flex;
      align-items: center;
      gap: .5rem;
    }

    #section-karyawan.emp-stitch .emp-ai-track {
      width: 32px;
      height: 16px;
      border-radius: 999px;
      background: #e2e8f0;
      position: relative;
      flex-shrink: 0;
    }

    #section-karyawan.emp-stitch .emp-ai-track.on {
      background: rgba(0, 63, 177, .22);
    }

    #section-karyawan.emp-stitch .emp-ai-knob {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #94a3b8;
      transition: transform .2s ease, background .2s ease;
    }

    #section-karyawan.emp-stitch .emp-ai-track.on .emp-ai-knob {
      transform: translateX(16px);
      background: #003fb1;
    }

    #section-karyawan.emp-stitch .emp-ai-lbl {
      font-size: .72rem;
      font-weight: 700;
      color: #434654;
    }

    #section-karyawan.emp-stitch .emp-ecard-status {
      font-size: .58rem;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase;
      padding: .35rem .65rem;
      border-radius: 999px;
    }

    #section-karyawan.emp-stitch .emp-ecard-status.st-onsite {
      background: #ffdbcf;
      color: #802a00;
    }

    #section-karyawan.emp-stitch .emp-ecard-status.st-leave {
      background: #e6e8eb;
      color: #475569;
    }

    #section-karyawan.emp-stitch .emp-ecard-status.st-done {
      background: #dcfce7;
      color: #166534;
    }

    #section-karyawan.emp-stitch .emp-ecard-status.st-off {
      background: #f1f5f9;
      color: #64748b;
    }

    #section-karyawan.emp-stitch .emp-ecard-pending {
      margin-top: .65rem;
      padding: .5rem .65rem;
      border-radius: 12px;
      background: #fffbeb;
      border: 1px solid #fde68a;
      font-size: .72rem;
      color: #92400e;
    }

    #section-karyawan.emp-stitch .emp-pager {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .75rem;
      margin-top: 2.5rem;
    }

    #section-karyawan.emp-stitch .emp-pager-btn {
      width: 40px;
      height: 40px;
      border: none;
      border-radius: 50%;
      background: transparent;
      color: #94a3b8;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background .2s ease, color .2s ease;
    }

    #section-karyawan.emp-stitch .emp-pager-btn:hover:not(:disabled) {
      background: #e6e8eb;
      color: #334155;
    }

    #section-karyawan.emp-stitch .emp-pager-btn:disabled {
      opacity: .35;
      cursor: not-allowed;
    }

    #section-karyawan.emp-stitch .emp-pager-info {
      font-size: .82rem;
      font-weight: 600;
      color: #434654;
      min-width: 120px;
      text-align: center;
    }

    #section-karyawan.emp-stitch .emp-card-foot-note {
      margin-top: 1rem;
      text-align: center;
      font-size: .78rem;
      color: #737686;
      font-weight: 600;
    }

    #section-karyawan.emp-stitch .emp-empty-db {
      grid-column: 1 / -1;
      text-align: center;
      padding: 3rem 1.5rem;
      color: #64748b;
    }

    #section-karyawan.emp-stitch .emp-empty-db strong {
      display: block;
      margin-top: .75rem;
      font-size: 1.05rem;
      color: #334155;
    }

    #section-karyawan.emp-stitch .emp-db-wrap {
      background: #fff;
      border-radius: 18px;
      border: 1px solid rgba(195, 197, 215, .25);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
      overflow: hidden;
    }

    #section-karyawan.emp-stitch .emp-db-scroll {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: 0;
      border: none;
      box-shadow: none;
    }

    #section-karyawan.emp-stitch .emp-db-scroll.twrp {
      margin: 0;
    }

    #section-karyawan.emp-stitch #empDbTable thead th {
      background: #f2f4f7;
      font-size: .58rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: #64748b;
      padding: 1rem 1rem;
      border-bottom: 1px solid rgba(195, 197, 215, .4);
      white-space: nowrap;
    }

    #section-karyawan.emp-stitch #empDbTable tbody tr {
      transition: background .12s;
    }

    #section-karyawan.emp-stitch #empDbTable tbody tr:hover {
      background: #f8fafc;
    }

    #section-karyawan.emp-stitch #empDbTable tbody td {
      padding: 1rem;
      border-bottom: 1px solid rgba(241, 245, 249, .9);
      vertical-align: middle;
    }

    #section-karyawan.emp-stitch .emp-db-foot {
      padding: 1rem 1.25rem;
      background: #f2f4f7;
      font-size: .72rem;
      font-weight: 600;
      color: #64748b;
      border-top: 1px solid rgba(195, 197, 215, .35);
    }

    /* ── KPI (Stitch “KPI Karyawan Redesign”) ── */
    #section-kpi.kpi-stitch {
      background: var(--bg);
    }

    #section-kpi.kpi-stitch .kpi-stitch-toolbar {
      background: #f2f4f7;
      border: 1px solid rgba(195, 197, 215, .45);
      border-radius: 20px;
      padding: .95rem 1rem;
      margin-bottom: 1.25rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
    }

    #section-kpi.kpi-stitch .kpi-stitch-filters {
      display: flex;
      flex-wrap: wrap;
      gap: .6rem;
      align-items: center;
    }

    #section-kpi.kpi-stitch .kpi-chip {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      background: #fff;
      border: 1px solid rgba(195, 197, 215, .45);
      border-radius: 14px;
      padding: .5rem .75rem;
      min-height: 42px;
    }

    #section-kpi.kpi-stitch .kpi-chip i {
      color: #003fb1;
      font-size: .8rem;
    }

    #section-kpi.kpi-stitch .kpi-chip select,
    #section-kpi.kpi-stitch .kpi-chip input {
      border: none;
      background: transparent;
      font-size: .83rem;
      color: #191c1e;
      font-family: inherit;
      outline: none;
      min-width: 88px;
    }

    #section-kpi.kpi-stitch .kpi-chip-search {
      min-width: 220px;
      flex: 1 1 220px;
    }

    #section-kpi.kpi-stitch .kpi-stitch-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      align-items: center;
      justify-content: flex-end;
    }

    #section-kpi.kpi-stitch .kpi-s-btn {
      border-radius: 999px;
      padding: .55rem .95rem;
      font-size: .76rem;
      font-weight: 700;
      border: 1px solid rgba(195, 197, 215, .5);
      background: #fff;
      color: #334155;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
    }

    #section-kpi.kpi-stitch .kpi-s-btn.kpi-s-btn-primary {
      background: #1a56db;
      border-color: #1a56db;
      color: #fff;
      box-shadow: 0 8px 26px rgba(26, 86, 219, .2);
    }

    #section-kpi.kpi-stitch .kpi-sum-grid {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 1rem;
      margin-bottom: 1.25rem;
    }

    #section-kpi.kpi-stitch .kpi-stitch-card {
      background: #fff;
      border-radius: 20px;
      border: 1px solid rgba(195, 197, 215, .35);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
      padding: 1.1rem 1rem;
      display: flex;
      flex-direction: column;
      gap: .7rem;
    }

    #section-kpi.kpi-stitch .kpi-stitch-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: .6rem;
    }

    #section-kpi.kpi-stitch .kpi-stitch-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      color: #003fb1;
      background: rgba(0, 63, 177, .1);
    }

    #section-kpi.kpi-stitch .kpi-stitch-card:nth-child(2) .kpi-stitch-icon {
      color: #4b5c92;
      background: rgba(75, 92, 146, .14);
    }

    #section-kpi.kpi-stitch .kpi-stitch-card:nth-child(4) .kpi-stitch-icon {
      color: #ba1a1a;
      background: rgba(186, 26, 26, .11);
    }

    #section-kpi.kpi-stitch .kpi-stitch-card:nth-child(5) .kpi-stitch-icon {
      color: #ad3b00;
      background: rgba(173, 59, 0, .12);
    }

    #section-kpi.kpi-stitch .kpi-stitch-pill {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: .2rem .5rem;
      font-size: .6rem;
      font-weight: 800;
      letter-spacing: .03em;
      text-transform: uppercase;
      background: #dbe1ff;
      color: #334479;
    }

    #section-kpi.kpi-stitch .kpi-stitch-lbl {
      font-size: .64rem;
      font-weight: 800;
      color: #434654;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    #section-kpi.kpi-stitch .kpi-stitch-val {
      font-size: 2rem;
      font-weight: 900;
      color: #191c1e;
      line-height: 1;
      letter-spacing: -.03em;
    }

    #section-kpi.kpi-stitch .kpi-stitch-sub {
      font-size: .73rem;
      color: #737686;
      margin-top: .25rem;
    }

    #section-kpi.kpi-stitch .kpi-stitch-card.kpi-top-perf {
      background: linear-gradient(145deg, #1a56db 0%, #003fb1 100%);
      border-color: transparent;
      box-shadow: 0 12px 40px rgba(19, 83, 216, .22);
    }

    #section-kpi.kpi-stitch .kpi-top-perf .kpi-stitch-lbl,
    #section-kpi.kpi-stitch .kpi-top-perf .kpi-stitch-val,
    #section-kpi.kpi-stitch .kpi-top-perf .kpi-stitch-sub {
      color: #fff;
    }

    #section-kpi.kpi-stitch .kpi-top-perf .kpi-stitch-pill {
      background: rgba(255, 255, 255, .16);
      color: #dbe1ff;
    }

    #section-kpi.kpi-stitch .kpi-chart-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      margin-bottom: 1.2rem;
    }

    @media (min-width: 1024px) {
      #section-kpi.kpi-stitch .kpi-chart-row {
        grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
      }
    }

    #section-kpi.kpi-stitch .kpi-stitch-chart-card {
      background: #fff;
      border-radius: 22px;
      border: 1px solid rgba(195, 197, 215, .35);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
      padding: 1.2rem 1.15rem;
    }

    #section-kpi.kpi-stitch .kpi-bar-cwrap {
      height: 240px;
      position: relative;
      overflow: hidden;
    }

    #section-kpi.kpi-stitch .kpi-bar-cwrap canvas {
      display: block;
      width: 100%;
      height: 100%;
      vertical-align: top;
    }

    #section-kpi.kpi-stitch .kpi-stitch-chart-card h4 {
      margin: 0;
      font-size: 1rem;
      font-weight: 800;
      color: #191c1e;
      letter-spacing: -.02em;
    }

    #section-kpi.kpi-stitch .kpi-stitch-chart-sub {
      margin: .2rem 0 1rem;
      font-size: .78rem;
      color: #737686;
    }

    #section-kpi.kpi-stitch #kpiTopList {
      display: flex;
      flex-direction: column;
      gap: .7rem;
    }

    #section-kpi.kpi-stitch .kpi-top-st-item {
      display: flex;
      align-items: center;
      gap: .65rem;
      border: 1px solid rgba(195, 197, 215, .35);
      border-radius: 14px;
      padding: .6rem;
      transition: box-shadow .2s;
      background: #fff;
    }

    #section-kpi.kpi-stitch .kpi-top-st-item:hover {
      box-shadow: 0 10px 30px rgba(19, 83, 216, .08);
    }

    #section-kpi.kpi-stitch .kpi-top-st-rank {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      font-size: .62rem;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: #1a56db;
      flex-shrink: 0;
    }

    #section-kpi.kpi-stitch .kpi-top-st-score {
      font-size: .86rem;
      font-weight: 900;
      color: #003fb1;
      margin-left: auto;
    }

    #section-kpi.kpi-stitch .kpi-table-shell {
      background: #fff;
      border-radius: 22px;
      border: 1px solid rgba(195, 197, 215, .35);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
      overflow: hidden;
    }

    #section-kpi.kpi-stitch .kpi-table-head {
      padding: 1.1rem 1.2rem;
      border-bottom: 1px solid var(--bd);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: .6rem;
      flex-wrap: wrap;
    }

    #section-kpi.kpi-stitch .kpi-table-head h4 {
      margin: 0;
      font-size: 1rem;
      font-weight: 800;
      color: #191c1e;
    }

    #section-kpi.kpi-stitch .kpi-table-head p {
      margin: .2rem 0 0;
      font-size: .76rem;
      color: #737686;
    }

    #section-kpi.kpi-stitch .kpi-table-head-actions {
      display: inline-flex;
      gap: .45rem;
    }

    #section-kpi.kpi-stitch .kpi-round-btn {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(195, 197, 215, .45);
      background: #fff;
      color: #737686;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: .8rem;
    }

    #section-kpi.kpi-stitch .kpi-round-btn:hover {
      background: #f2f4f7;
      color: #191c1e;
    }

    #section-kpi.kpi-stitch .kpi-table-wrap {
      border: none;
      border-radius: 0;
      box-shadow: none;
      margin: 0;
      overflow-x: auto;
    }

    #section-kpi.kpi-stitch #kpiTable thead th {
      background: rgba(242, 244, 247, .7);
      font-size: .63rem;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: #64748b;
      padding: .8rem 1rem;
      border-bottom: 1px solid rgba(195, 197, 215, .45);
      white-space: nowrap;
    }

    #section-kpi.kpi-stitch #kpiTable tbody tr:hover {
      background: #f8fafc;
    }

    #section-kpi.kpi-stitch #kpiTable tbody td {
      padding: .82rem 1rem;
      border-bottom: 1px solid #f1f5f9;
      vertical-align: middle;
    }

    #section-kpi.kpi-stitch .kpi-st-grade-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 34px;
      height: 24px;
      border-radius: 999px;
      padding: 0 .45rem;
      font-size: .66rem;
      font-weight: 800;
    }

    #section-kpi.kpi-stitch .kpi-st-grade-pill.A {
      background: #ffdbcf;
      color: #802a00;
    }

    #section-kpi.kpi-stitch .kpi-st-grade-pill.B {
      background: #dbe1ff;
      color: #334479;
    }

    #section-kpi.kpi-stitch .kpi-st-grade-pill.C {
      background: var(--st-muted);
      color: #434654;
    }

    #section-kpi.kpi-stitch .kpi-st-grade-pill.D {
      background: #ffdad6;
      color: #93000a;
    }

    #section-kpi.kpi-stitch .kpi-table-foot {
      padding: .9rem 1.15rem;
      background: rgba(242, 244, 247, .35);
      color: #737686;
      font-size: .72rem;
      font-weight: 600;
    }

    /* ── Uang Absensi (Stitch Payroll) ── */
    #section-payroll.pay-stitch {
      background: var(--bg);
    }

    #section-payroll.pay-stitch .pay-st-hero {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    @media (min-width: 768px) {
      #section-payroll.pay-stitch .pay-st-hero {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
      }
    }

    #section-payroll.pay-stitch .pay-st-kicker {
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: #003fb1;
    }

    #section-payroll.pay-stitch .pay-st-title {
      font-size: clamp(1.75rem, 4vw, 2.35rem);
      font-weight: 900;
      letter-spacing: -.03em;
      color: #191c1e;
      margin: .25rem 0 0;
      line-height: 1.1;
    }

    #section-payroll.pay-stitch .pay-st-desc {
      font-size: 1rem;
      color: #434654;
      margin: .5rem 0 0;
      max-width: 32rem;
      line-height: 1.45;
    }

    #section-payroll.pay-stitch .pay-st-hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .65rem;
    }

    #section-payroll.pay-stitch .pay-st-chip {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      background: #e6e8eb;
      border-radius: 12px;
      padding: .45rem .75rem;
    }

    #section-payroll.pay-stitch .pay-st-chip select {
      border: none;
      background: transparent;
      font-size: .82rem;
      font-weight: 700;
      color: #191c1e;
      font-family: inherit;
      outline: none;
      cursor: pointer;
    }

    #section-payroll.pay-stitch .pay-st-export {
      border: none;
      border-radius: 999px;
      padding: .55rem 1.15rem;
      font-size: .82rem;
      font-weight: 800;
      background: #003fb1;
      color: #fff;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      cursor: pointer;
      box-shadow: 0 10px 28px rgba(0, 63, 177, .22);
      font-family: inherit;
    }

    #section-payroll.pay-stitch .pay-st-export:hover {
      filter: brightness(1.06);
    }

    #section-payroll.pay-stitch .pay-st-bento {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.25rem;
      margin-bottom: 2.5rem;
    }

    @media (min-width: 768px) {
      #section-payroll.pay-stitch .pay-st-bento {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1100px) {
      #section-payroll.pay-stitch .pay-st-bento {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    #section-payroll.pay-stitch .pay-st-card {
      background: #fff;
      border-radius: 14px;
      border: 1px solid rgba(195, 197, 215, .2);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
      padding: 1.25rem 1.1rem;
      position: relative;
      overflow: hidden;
      transition: box-shadow .2s;
    }

    #section-payroll.pay-stitch .pay-st-card:hover {
      box-shadow: 0 12px 36px rgba(19, 83, 216, .08);
    }

    #section-payroll.pay-stitch .pay-st-card-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: .85rem;
    }

    #section-payroll.pay-stitch .pay-st-ico {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
    }

    #section-payroll.pay-stitch .pay-st-ico.wallet {
      background: rgba(0, 63, 177, .1);
      color: #003fb1;
    }

    #section-payroll.pay-stitch .pay-st-ico.down {
      background: rgba(186, 26, 26, .1);
      color: #ba1a1a;
    }

    #section-payroll.pay-stitch .pay-st-ico.cash {
      background: rgba(173, 59, 0, .1);
      color: #ad3b00;
    }

    #section-payroll.pay-stitch .pay-st-ico.people {
      background: rgba(75, 92, 146, .12);
      color: #4b5c92;
    }

    #section-payroll.pay-stitch .pay-st-tag {
      font-size: .52rem;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: .2rem .45rem;
      border-radius: 999px;
    }

    #section-payroll.pay-stitch .pay-st-tag.kotor {
      background: #dbe1ff;
      color: #334479;
    }

    #section-payroll.pay-stitch .pay-st-tag.pot {
      background: #ffdad6;
      color: #93000a;
    }

    #section-payroll.pay-stitch .pay-st-tag.bersih {
      background: #ffdbcf;
      color: #802a00;
    }

    #section-payroll.pay-stitch .pay-st-tag.hadir {
      background: #dbe1ff;
      color: #4b5c92;
    }

    #section-payroll.pay-stitch .pay-st-clbl {
      font-size: .78rem;
      font-weight: 800;
      color: #434654;
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    #section-payroll.pay-stitch .pay-st-cval {
      font-size: 1.35rem;
      font-weight: 900;
      color: #191c1e;
      margin-top: .35rem;
      letter-spacing: -.02em;
    }

    #section-payroll.pay-stitch .pay-st-card.pay-st-card-net .pay-st-cval {
      color: #003fb1;
    }

    #section-payroll.pay-stitch .pay-table-shell {
      background: #fff;
      border-radius: 14px;
      border: 1px solid rgba(195, 197, 215, .2);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
      overflow: hidden;
      margin-bottom: 1.5rem;
    }

    #section-payroll.pay-stitch .pay-table-toolbar {
      padding: 1.1rem 1.35rem;
      border-bottom: 1px solid #f2f4f7;
      background: #fff;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: .75rem;
    }

    #section-payroll.pay-stitch .pay-table-toolbar h4 {
      margin: 0;
      font-size: 1.02rem;
      font-weight: 800;
      color: #191c1e;
    }

    #section-payroll.pay-stitch .pay-st-search-wrap {
      position: relative;
      min-width: 200px;
      flex: 0 1 260px;
    }

    #section-payroll.pay-stitch .pay-st-search-wrap i {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #737686;
      font-size: .85rem;
      pointer-events: none;
    }

    #section-payroll.pay-stitch .pay-st-search-wrap input {
      width: 100%;
      padding: .5rem .75rem .5rem 2.25rem;
      border: none;
      border-radius: 12px;
      background: #f2f4f7;
      font-size: .82rem;
      font-family: inherit;
      color: var(--tx);
      outline: none;
    }

    #section-payroll.pay-stitch .pay-st-search-wrap input:focus {
      box-shadow: 0 0 0 2px rgba(0, 63, 177, .15);
      background: #fff;
    }

    #section-payroll.pay-stitch .pay-st-twrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    #section-payroll.pay-stitch .pay-st-twrap table {
      width: 100%;
      border-collapse: collapse;
    }

    #section-payroll.pay-stitch .pay-st-twrap thead th {
      background: #f2f4f7;
      font-size: .58rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #737686;
      padding: .95rem 1rem;
      text-align: left;
      white-space: nowrap;
      border-bottom: 1px solid var(--bd);
    }

    #section-payroll.pay-stitch .pay-st-twrap thead th.pay-st-th-num {
      width: 48px;
    }

    #section-payroll.pay-stitch .pay-st-twrap tbody tr:hover {
      background: rgba(242, 244, 247, .45);
    }

    #section-payroll.pay-stitch .pay-st-twrap tbody td {
      padding: 1rem;
      border-bottom: 1px solid #f2f4f7;
      vertical-align: middle;
      font-size: .84rem;
    }

    #section-payroll.pay-stitch .pay-st-pill-hadir {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: .2rem .55rem;
      border-radius: 999px;
      font-size: .72rem;
      font-weight: 800;
    }

    #section-payroll.pay-stitch .pay-st-pill-hadir.ok {
      background: #ffdbcf;
      color: #802a00;
    }

    #section-payroll.pay-stitch .pay-st-pill-hadir.mid {
      background: var(--st-muted);
      color: #434654;
    }

    #section-payroll.pay-stitch .pay-st-pill-hadir.bad {
      background: #ffdad6;
      color: #93000a;
    }

    #section-payroll.pay-stitch .pay-st-tfoot td {
      background: #f8fafc;
      font-weight: 800;
      font-size: .82rem;
      border-bottom: none;
    }

    #section-payroll.pay-stitch .pay-table-foot {
      padding: .85rem 1.35rem;
      background: rgba(242, 244, 247, .45);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: .5rem;
      font-size: .72rem;
      font-weight: 700;
      color: #737686;
    }

    #section-payroll.pay-stitch .pay-st-page-btns {
      display: inline-flex;
      align-items: center;
      gap: .25rem;
    }

    #section-payroll.pay-stitch .pay-st-page-btns button {
      width: 30px;
      height: 30px;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: #737686;
      cursor: default;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: .72rem;
      font-weight: 800;
    }

    #section-payroll.pay-stitch .pay-st-page-btns button.pay-st-page-active {
      background: #003fb1;
      color: #fff;
    }

    /* ── Pengaturan (Stitch Settings) ── */
    #section-settings.set-stitch {
      background: var(--bg);
    }

    #section-settings.set-stitch .set-st-wrap {
      max-width: 1120px;
      margin: 0 auto;
    }

    #section-settings.set-stitch .set-st-page-hd {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    @media (min-width: 768px) {
      #section-settings.set-stitch .set-st-page-hd {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
      }
    }

    #section-settings.set-stitch .set-st-page-hd h2 {
      margin: 0;
      font-size: clamp(1.65rem, 3.5vw, 2rem);
      font-weight: 900;
      letter-spacing: -.03em;
      color: #191c1e;
    }

    #section-settings.set-stitch .set-st-page-hd > div > p {
      margin: .35rem 0 0;
      font-size: .95rem;
      color: #434654;
    }

    #section-settings.set-stitch .set-st-search-bar {
      position: relative;
      width: 100%;
      max-width: 360px;
    }

    #section-settings.set-stitch .set-st-search-bar i {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: #737686;
      font-size: .85rem;
      pointer-events: none;
    }

    #section-settings.set-stitch .set-st-search-bar input {
      width: 100%;
      padding: .55rem 1rem .55rem 2.4rem;
      border: none;
      border-radius: 999px;
      background: #e6e8eb;
      font-size: .84rem;
      font-family: inherit;
      color: var(--tx);
      outline: none;
    }

    #section-settings.set-stitch .set-st-search-bar input:focus {
      background: #fff;
      box-shadow: 0 0 0 2px rgba(0, 63, 177, .15);
    }

    #section-settings.set-stitch .set-st-bento-top {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
      margin-bottom: 2rem;
    }

    @media (min-width: 1024px) {
      #section-settings.set-stitch .set-st-bento-top {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 2.5rem;
      }
    }

    #section-settings.set-stitch .set-st-bento-left,
    #section-settings.set-stitch .set-st-bento-right {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    #section-settings.set-stitch .set-st-panel {
      background: #fff;
      border-radius: 14px;
      border: 1px solid rgba(195, 197, 215, .22);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
      padding: 1.5rem 1.35rem;
    }

    #section-settings.set-stitch .set-st-panel-hd {
      display: flex;
      align-items: center;
      gap: .65rem;
      margin-bottom: 1.25rem;
    }

    #section-settings.set-stitch .set-st-ico {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: rgba(0, 63, 177, .1);
      color: #003fb1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      flex-shrink: 0;
    }

    #section-settings.set-stitch .set-st-ico.set-st-ico-sec {
      background: rgba(75, 92, 146, .12);
      color: #4b5c92;
    }

    #section-settings.set-stitch .set-st-panel-hd h3 {
      margin: 0;
      font-size: 1.05rem;
      font-weight: 800;
      color: #191c1e;
    }

    #section-settings.set-stitch .set-st-field-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    @media (max-width: 520px) {
      #section-settings.set-stitch .set-st-field-grid {
        grid-template-columns: 1fr;
      }
    }

    #section-settings.set-stitch .set-st-field label {
      display: block;
      font-size: .58rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #434654;
      margin-bottom: .35rem;
    }

    #section-settings.set-stitch .set-st-field input,
    #section-settings.set-stitch .set-st-field select,
    #section-settings.set-stitch .set-st-inp {
      width: 100%;
      padding: .75rem 1rem;
      border: none;
      border-radius: 10px;
      background: #e6e8eb;
      font-size: .88rem;
      font-family: inherit;
      color: #191c1e;
      outline: none;
    }

    #section-settings.set-stitch .set-st-field input:focus,
    #section-settings.set-stitch .set-st-field select:focus,
    #section-settings.set-stitch .set-st-inp:focus {
      box-shadow: 0 0 0 2px rgba(0, 63, 177, .18);
      background: #fff;
    }

    #section-settings.set-stitch .set-st-field-full {
      margin-top: 1rem;
    }

    #section-settings.set-stitch .set-st-warn {
      margin-top: 1.1rem;
      padding: .85rem 1rem;
      border-radius: 14px;
      background: rgba(255, 218, 214, .45);
      display: flex;
      gap: .65rem;
      align-items: flex-start;
    }

    #section-settings.set-stitch .set-st-warn i {
      color: #ba1a1a;
      margin-top: 2px;
      flex-shrink: 0;
    }

    #section-settings.set-stitch .set-st-warn p {
      margin: 0;
      font-size: .72rem;
      line-height: 1.45;
      color: #93000a;
    }

    #section-settings.set-stitch .set-st-btn-primary {
      width: 100%;
      margin-top: 1.25rem;
      padding: .9rem 1rem;
      border: none;
      border-radius: 14px;
      background: #003fb1;
      color: #fff;
      font-size: .88rem;
      font-weight: 800;
      cursor: pointer;
      font-family: inherit;
      box-shadow: 0 8px 24px rgba(0, 63, 177, .2);
    }

    #section-settings.set-stitch .set-st-btn-primary:hover {
      filter: brightness(1.05);
    }

    #section-settings.set-stitch .set-st-help-card {
      border-radius: 14px;
      padding: 1.5rem 1.35rem;
      background: linear-gradient(135deg, #003fb1 0%, #1a56db 100%);
      color: #d4dcff;
      position: relative;
      overflow: hidden;
    }

    #section-settings.set-stitch .set-st-help-card h4 {
      margin: 0 0 .35rem;
      font-size: 1.15rem;
      font-weight: 800;
      color: #fff;
    }

    #section-settings.set-stitch .set-st-help-card p {
      margin: 0 0 1rem;
      font-size: .82rem;
      line-height: 1.45;
      color: rgba(255, 255, 255, .88);
      max-width: 220px;
    }

    #section-settings.set-stitch .set-st-help-btn {
      border: none;
      border-radius: 999px;
      padding: .45rem 1.1rem;
      font-size: .72rem;
      font-weight: 800;
      background: #fff;
      color: #003fb1;
      cursor: pointer;
      font-family: inherit;
    }

    #section-settings.set-stitch .set-st-help-btn:hover {
      background: #f0f4ff;
    }

    #section-settings.set-stitch .set-st-help-deco {
      position: absolute;
      right: -8px;
      bottom: -12px;
      font-size: 5.5rem;
      color: rgba(255, 255, 255, .08);
      pointer-events: none;
      line-height: 1;
    }

    #section-settings.set-stitch .set-st-loc-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
    }

    #section-settings.set-stitch .set-st-loc-head .set-st-panel-hd {
      margin-bottom: 0;
    }

    #section-settings.set-stitch .set-st-btn-pill {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      border: none;
      border-radius: 999px;
      padding: .5rem 1rem;
      font-size: .78rem;
      font-weight: 800;
      background: #dbe1ff;
      color: #00174d;
      cursor: pointer;
      font-family: inherit;
    }

    #section-settings.set-stitch .set-st-btn-pill:hover {
      box-shadow: 0 4px 14px rgba(26, 86, 219, .15);
    }

    #section-settings.set-stitch .set-st-loc-desc {
      font-size: .82rem;
      color: #737686;
      margin: 0 0 1rem;
      line-height: 1.45;
    }

    #section-settings.set-stitch .set-loc-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.25rem;
    }

    @media (min-width: 640px) {
      #section-settings.set-stitch .set-loc-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    #section-settings.set-stitch .set-loc-empty {
      grid-column: 1 / -1;
      text-align: center;
      padding: 2rem 1rem;
      color: #737686;
      font-size: .88rem;
    }

    #section-settings.set-stitch .set-loc-card {
      background: #fff;
      border-radius: 14px;
      border: 1px solid rgba(195, 197, 215, .2);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
      overflow: hidden;
      transition: box-shadow .2s;
    }

    #section-settings.set-stitch .set-loc-card:hover {
      box-shadow: 0 10px 28px rgba(19, 83, 216, .1);
    }

    #section-settings.set-stitch .set-loc-map {
      height: 120px;
      position: relative;
      background: linear-gradient(145deg, #dbe1ff 0%, #e6e8eb 45%, #c3c5d7 100%);
    }

    #section-settings.set-stitch .set-loc-map::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, #fff 0%, transparent 55%);
      pointer-events: none;
    }

    #section-settings.set-stitch .set-loc-radius {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: .25rem;
      padding: .25rem .5rem;
      border-radius: 999px;
      background: #ffdbcf;
      color: #802a00;
      font-size: .52rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    #section-settings.set-stitch .set-loc-body {
      padding: 1rem 1.1rem 1.1rem;
    }

    #section-settings.set-stitch .set-loc-body h4 {
      margin: 0;
      font-size: .92rem;
      font-weight: 800;
      color: #191c1e;
    }

    #section-settings.set-stitch .set-loc-coord {
      margin: .35rem 0 0;
      font-size: .68rem;
      font-family: ui-monospace, monospace;
      color: #737686;
    }

    #section-settings.set-stitch .set-loc-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-top: .65rem;
      margin-top: .35rem;
      border-top: 1px solid #f2f4f7;
    }

    #section-settings.set-stitch .set-loc-del {
      border: none;
      background: none;
      color: #ba1a1a;
      font-size: .72rem;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: .25rem;
      font-family: inherit;
      padding: .35rem .5rem;
      border-radius: 999px;
    }

    #section-settings.set-stitch .set-loc-del:hover {
      background: rgba(186, 26, 26, .08);
    }

    #section-settings.set-stitch .set-loc-add-tile {
      border: 2px dashed rgba(195, 197, 215, .55);
      border-radius: 14px;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      cursor: pointer;
      background: transparent;
      font-family: inherit;
      padding: 1.5rem;
      transition: border-color .2s, background .2s;
    }

    #section-settings.set-stitch .set-loc-add-tile:hover {
      border-color: rgba(0, 63, 177, .45);
      background: rgba(0, 63, 177, .04);
    }

    #section-settings.set-stitch .set-loc-add-tile .set-loc-add-ico {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #e6e8eb;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #737686;
      font-size: 1.25rem;
      transition: background .2s, color .2s;
    }

    #section-settings.set-stitch .set-loc-add-tile:hover .set-loc-add-ico {
      background: rgba(0, 63, 177, .12);
      color: #003fb1;
    }

    #section-settings.set-stitch .set-loc-add-tile span:last-child {
      font-size: .82rem;
      font-weight: 800;
      color: #434654;
    }

    #section-settings.set-stitch .set-loc-add-tile:hover span:last-child {
      color: #003fb1;
    }

    #section-settings.set-stitch .set-st-add-block {
      background: #fff;
      border-radius: 14px;
      border: 1px solid rgba(195, 197, 215, .22);
      padding: 1.25rem 1.2rem;
      margin-top: .25rem;
    }

    #section-settings.set-stitch .set-st-add-block h4 {
      margin: 0 0 1rem;
      font-size: .95rem;
      font-weight: 800;
      color: #191c1e;
    }

    #section-settings.set-stitch .set-st-lgrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: .65rem;
    }

    #section-settings.set-stitch .set-st-lgrid input {
      padding: .65rem .75rem;
      border: none;
      border-radius: 10px;
      background: #f2f4f7;
      font-size: .82rem;
      font-family: inherit;
    }

    #section-settings.set-stitch .set-st-add-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      margin-top: .85rem;
    }

    #section-settings.set-stitch .set-st-add-actions .btn {
      border-radius: 12px;
      font-weight: 700;
    }

    #section-settings.set-stitch .set-st-lower-gap {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      margin-bottom: 1.25rem;
    }

    #section-settings.set-stitch .set-st-two-col {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.25rem;
    }

    @media (min-width: 900px) {
      #section-settings.set-stitch .set-st-two-col {
        grid-template-columns: 1fr 1fr;
      }
    }

    #section-settings.set-stitch .set-st-panel .ri {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .5rem;
      margin-bottom: .75rem;
    }

    #section-settings.set-stitch .set-st-panel .ri label {
      min-width: 140px;
      font-size: .78rem;
      font-weight: 600;
      color: #434654;
    }

    #section-settings.set-stitch .set-st-panel .ri input,
    #section-settings.set-stitch .set-st-panel .ri select {
      flex: 1;
      min-width: 160px;
      padding: .55rem .75rem;
      border-radius: 10px;
      border: 1px solid rgba(195, 197, 215, .5);
      font-size: .85rem;
      font-family: inherit;
    }

    #section-settings.set-stitch .set-st-panel .fg2 {
      margin-bottom: .75rem;
    }

    #section-settings.set-stitch .set-st-panel .fg2 label {
      display: block;
      font-size: .78rem;
      font-weight: 700;
      margin-bottom: .35rem;
      color: #434654;
    }

    #section-settings.set-stitch .set-st-panel .fg2 textarea {
      width: 100%;
      padding: .75rem 1rem;
      border-radius: 12px;
      border: 1px solid rgba(195, 197, 215, .5);
      font-size: .85rem;
      font-family: inherit;
      min-height: 88px;
    }

    #section-settings.set-stitch .esit {
      background: #f8fafc;
      border: 1px solid rgba(195, 197, 215, .35);
      border-radius: 12px;
      padding: .85rem 1rem;
      margin-bottom: .65rem;
    }

    #section-settings.set-stitch .esit .esip label {
      font-size: .68rem;
      font-weight: 700;
      color: #737686;
    }

    #section-settings.set-stitch .esit .esip input,
    #section-settings.set-stitch .esit .esip select {
      border-radius: 8px;
      border: 1px solid rgba(195, 197, 215, .6);
      font-size: .78rem;
    }

    /* ── Cuti/Izin (Stitch Leave) ── */
    #section-leave.leave-stitch {
      background: var(--bg);
    }

    #section-leave.leave-stitch .leave-st-head h2 {
      margin: 0;
      font-size: clamp(1.7rem, 3.6vw, 2.1rem);
      font-weight: 900;
      letter-spacing: -.02em;
      color: #191c1e;
    }

    #section-leave.leave-stitch .leave-st-head p {
      margin: .35rem 0 0;
      color: #434654;
      font-size: .9rem;
    }

    #section-leave.leave-stitch .leave-st-top {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      margin: 1.35rem 0 1.75rem;
    }

    @media (min-width: 1024px) {
      #section-leave.leave-stitch .leave-st-top {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
      }
    }

    #section-leave.leave-stitch .leave-st-pending-wrap {
      display: flex;
      flex-direction: column;
      gap: .75rem;
    }

    #section-leave.leave-stitch .leave-st-pending-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: .6rem;
      flex-wrap: wrap;
    }

    #section-leave.leave-stitch .leave-st-pending-head h3 {
      margin: 0;
      font-size: 1rem;
      font-weight: 800;
      color: #191c1e;
    }

    #section-leave.leave-stitch .leave-st-chip {
      font-size: .68rem;
      font-weight: 800;
      color: #003fb1;
      background: #dbe1ff;
      border-radius: 999px;
      padding: .25rem .6rem;
    }

    #section-leave.leave-stitch .leave-st-pending-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: .8rem;
    }

    @media (min-width: 1200px) {
      #section-leave.leave-stitch .leave-st-pending-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    #section-leave.leave-stitch .leave-st-card {
      background: #fff;
      border: 1px solid rgba(195, 197, 215, .28);
      border-radius: 18px;
      padding: 1rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    }

    #section-leave.leave-stitch .leave-st-stat {
      background: linear-gradient(145deg, #1a56db 0%, #003fb1 100%);
      color: #fff;
      border-radius: 22px;
      padding: 1.25rem;
      box-shadow: 0 12px 30px rgba(19, 83, 216, .2);
    }

    #section-leave.leave-stitch .leave-st-shell {
      background: #f2f4f7;
      border-radius: 24px;
      padding: .35rem;
    }

    #section-leave.leave-stitch .leave-st-shell-inner {
      background: #fff;
      border-radius: 22px;
      padding: 1rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    }

    #section-leave.leave-stitch .leave-st-filter {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: .7rem;
      flex-wrap: wrap;
      margin-bottom: .8rem;
    }

    #section-leave.leave-stitch .leave-st-filter h3 {
      margin: 0;
      font-size: 1rem;
      font-weight: 800;
      color: #191c1e;
    }

    #section-leave.leave-stitch .leave-st-filter-controls {
      display: flex;
      gap: .5rem;
      flex-wrap: wrap;
    }

    #section-leave.leave-stitch .leave-st-filter-controls select {
      border: none;
      border-radius: 12px;
      background: #e6e8eb;
      padding: .5rem .75rem;
      font-size: .78rem;
      font-weight: 700;
      color: #191c1e;
      font-family: inherit;
    }

    #section-leave.leave-stitch #lvTb tr:hover {
      background: rgba(242, 244, 247, .55);
    }

    #section-leave.leave-stitch #lvTb td {
      border-bottom: 1px solid #f1f5f9;
      padding: .75rem .6rem;
      vertical-align: middle;
    }

    #section-leave.leave-stitch .leave-st-foot {
      margin-top: .75rem;
      padding-top: .75rem;
      border-top: 1px solid var(--bd);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: .6rem;
      font-size: .72rem;
      color: #737686;
      font-weight: 600;
      flex-wrap: wrap;
    }

    /* ── Reimbursement (Stitch style) ── */
    #section-reimbursement.reimb-stitch {
      background: var(--bg);
    }

    #section-reimbursement.reimb-stitch .reimb-st-head {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    @media (min-width: 768px) {
      #section-reimbursement.reimb-stitch .reimb-st-head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
      }
    }

    #section-reimbursement.reimb-stitch .reimb-st-head h1 {
      margin: 0;
      font-size: clamp(1.65rem, 3.6vw, 2.05rem);
      font-weight: 900;
      letter-spacing: -.02em;
      color: #191c1e;
    }

    #section-reimbursement.reimb-stitch .reimb-st-head p {
      margin: .35rem 0 0;
      color: #434654;
      font-size: 1rem;
    }

    #section-reimbursement.reimb-stitch .reimb-st-actions {
      display: flex;
      gap: .55rem;
      flex-wrap: wrap;
    }

    #section-reimbursement.reimb-stitch .reimb-st-btn {
      border: none;
      border-radius: 12px;
      padding: .68rem 1rem;
      font-size: .78rem;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      font-family: inherit;
      cursor: pointer;
      transition: transform .15s, box-shadow .2s;
    }

    #section-reimbursement.reimb-stitch .reimb-st-btn:hover {
      transform: translateX(2px);
    }

    #section-reimbursement.reimb-stitch .reimb-st-btn-soft {
      background: #dbe1ff;
      color: #00174d;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    }

    #section-reimbursement.reimb-stitch .reimb-st-btn-primary {
      background: #003fb1;
      color: #fff;
      box-shadow: 0 10px 24px rgba(0, 63, 177, .2);
    }

    #section-reimbursement.reimb-stitch .reimb-st-bento {
      grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
      gap: .8rem;
      margin-bottom: 1rem;
    }

    #section-reimbursement.reimb-stitch .reimb-stat-card {
      border-radius: 16px;
      border: 1px solid rgba(195, 197, 215, .25);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
      padding: 1rem .95rem;
    }

    #section-reimbursement.reimb-stitch .reimb-stat-card .rsc-lbl {
      font-size: .62rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: #737686;
    }

    #section-reimbursement.reimb-stitch .reimb-stat-card .rsc-val {
      font-size: 1.35rem;
      font-weight: 900;
      margin-top: .45rem;
      color: #191c1e;
    }

    #section-reimbursement.reimb-stitch .reimb-st-filter {
      background: #f2f4f7;
      border-radius: 16px;
      padding: .8rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: .6rem;
      align-items: end;
      margin-bottom: 1rem;
    }

    #section-reimbursement.reimb-stitch .reimb-st-fitem {
      position: relative;
    }

    #section-reimbursement.reimb-stitch .reimb-st-fitem label {
      position: absolute;
      top: -8px;
      left: 10px;
      background: #f2f4f7;
      padding: 0 4px;
      font-size: .55rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: #737686;
    }

    #section-reimbursement.reimb-stitch .reimb-st-fitem select {
      width: 100%;
      height: 44px;
      border: none;
      border-radius: 12px;
      padding: 0 .7rem;
      font-size: .78rem;
      font-weight: 600;
      font-family: inherit;
      background: #fff;
    }

    #section-reimbursement.reimb-stitch .reimb-st-fsmall {
      max-width: 120px;
    }

    #section-reimbursement.reimb-stitch .reimb-st-fbtn {
      width: 44px;
      height: 44px;
      border: none;
      border-radius: 12px;
      background: #fff;
      color: #64748b;
      justify-self: start;
      font-size: .9rem;
    }

    #section-reimbursement.reimb-stitch .reimb-st-fbtn:hover {
      background: #003fb1;
      color: #fff;
    }

    #section-reimbursement.reimb-stitch .reimb-st-emp-hint {
      display: flex;
      gap: .7rem;
      align-items: center;
      margin-bottom: 1rem;
      flex-wrap: wrap;
      color: #737686;
      font-size: .82rem;
    }

    #section-reimbursement.reimb-stitch .reimb-st-grid {
      gap: 1rem;
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      padding-bottom: .5rem;
    }

    #section-reimbursement.reimb-stitch .reimb-card {
      border-radius: 22px;
      border: 1px solid rgba(195, 197, 215, .2);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
      padding: 1.25rem 1.2rem;
    }

    #section-reimbursement.reimb-stitch .reimb-amt {
      font-size: 2rem;
      line-height: 1;
      letter-spacing: -.02em;
    }

    /* ===== RESPONSIVE — MOBILE / TABLET / LAPTOP ===== */

    /* ── Navbar: sembunyikan desktop navbar di mobile, tampilkan bottom nav ── */
    @media(max-width:768px) {
      body {
        padding-left: 0;
      }

      html,
      body {
        height: auto;
        min-height: 100%;
      }

      body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }

      .navbar {
        display: none;
      }

      .mobnav {
        display: block;
      }

      body.admin-logged-in .mobnav {
        display: none;
      }

      .main {
        padding: .85rem;
        padding-bottom: 76px;
        overflow: visible;
      }

      body.employee-logged-in .main {
        padding-top: calc(4.5rem + env(safe-area-inset-top));
      }

      body.admin-logged-in .main {
        padding-bottom: .85rem;
      }

      .loverlay {
        align-items: flex-start;
        padding-top: 2rem;
        padding-bottom: 2rem;
      }

      .toastwrp {
        bottom: 78px;
        right: 10px;
        left: 10px;
        max-width: none;
      }

      .toast {
        font-size: .83rem;
        padding: .65rem .9rem;
        max-width: 100%;
      }

      .topbar {
        flex-direction: row;
        align-items: center;
        padding: .7rem 1rem;
        gap: .5rem;
      }

      body.admin-logged-in .mobmenubtn {
        display: inline-flex;
      }

      .tbl h1 {
        font-size: 1.1rem;
      }

      .tbl p,
      .tb-sub {
        font-size: .76rem;
      }

      .tb-clock-wrap {
        padding: .28rem .45rem .28rem .38rem;
      }

      .tb-clock-time {
        font-size: .78rem;
      }

      .tb-user-name {
        font-size: .76rem;
      }

      .tb-logout {
        padding: .35rem .45rem;
        font-size: .68rem;
      }

      .tbr {
        gap: .4rem;
      }
    }

    /* ── Mobile S — ≤ 480px (HP kecil, iPhone SE) ── */
    @media(max-width:480px) {
      .main {
        padding: .6rem;
        padding-bottom: 72px;
      }

      .topbar {
        padding: .6rem .8rem;
      }

      .tbl h1 {
        font-size: 1rem;
      }

      .tbl p,
      .tb-sub {
        display: none;
      }

      .tb-clock-date {
        display: none;
      }

      .tb-user-role {
        display: none;
      }

      .tb-user-text {
        max-width: 6.5rem;
      }

      .tb-logout-label {
        display: none;
      }

      .tb-divider-user {
        display: none;
      }

      .tb-meta-pro {
        gap: .35rem;
      }

      .sgrid {
        grid-template-columns: repeat(2, 1fr);
        gap: .5rem;
      }

      .scrd {
        padding: .75rem .8rem;
        border-radius: 14px;
      }

      .snum {
        font-size: 1.7rem;
      }

      .slbl {
        font-size: .74rem;
      }

      .dchrt {
        grid-template-columns: 1fr;
        gap: .7rem;
      }

      .ccrd {
        padding: .85rem;
      }

      .cwrp {
        height: 160px !important;
      }

      .agrid {
        grid-template-columns: 1fr;
        gap: .7rem;
      }

      .acrd {
        padding: .9rem 1rem;
      }

      .egrid {
        grid-template-columns: 1fr;
        gap: .7rem;
      }

      .calgd {
        gap: 2px;
      }

      .caldy {
        min-height: 44px;
        padding: .2rem;
      }

      .dn {
        font-size: .65rem;
        width: 20px;
        height: 20px;
      }

      .cchp {
        font-size: .52rem;
        padding: 1px 3px;
      }

      .callg {
        padding: .5rem .7rem;
        gap: .5rem;
        flex-wrap: wrap;
      }

      .cli {
        font-size: .68rem;
      }

      .calfil select {
        font-size: .8rem;
        padding: .4rem .6rem;
      }

      .mbox {
        padding: 1rem 1rem;
        border-radius: 16px;
      }

      .leave-type-cards {
        grid-template-columns: 1fr;
        gap: .5rem;
      }

      .leave-type-card {
        padding: .8rem .6rem;
      }

      .date-range-grid {
        grid-template-columns: 1fr;
      }

      .emp-today-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .5rem;
      }

      .emp-today-card {
        padding: .8rem .6rem;
      }

      .etc-ico {
        font-size: 1.3rem;
      }

      .etc-lbl {
        font-size: .68rem;
      }

      .etc-val {
        font-size: 1rem;
      }

      .emp-greeting {
        padding: .9rem 1rem;
        border-radius: 16px;
      }

      .eg-name {
        font-size: 1.2rem;
      }

      .eg-sub,
      .eg-date {
        font-size: .75rem;
      }

      .emp-kpi-snap {
        grid-template-columns: repeat(2, 1fr);
        gap: .5rem;
      }

      .emp-kpi-item {
        padding: .65rem .4rem;
      }

      .eki-val {
        font-size: 1.1rem;
      }

      .emp-hist-item {
        padding: .55rem .6rem;
        gap: .5rem;
        border-radius: 10px;
      }

      .ehi-date {
        font-size: .72rem;
        min-width: 64px;
      }

      .ehi-times {
        font-size: .7rem;
      }

      .ehi-dur {
        display: none;
      }

      .emp-hist-item .badge {
        min-width: 96px;
        font-size: .68rem !important;
        padding: 4px 8px;
      }

      .kpi-sum-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .6rem;
      }

      .kpi-card {
        padding: .9rem .8rem;
        border-radius: 14px;
      }

      .kc-val {
        font-size: 1.5rem;
      }

      .kpi-chart-row {
        flex-direction: column;
      }

      .kpi-toolbar {
        padding: .7rem .8rem;
      }

      .kpi-filters {
        gap: .5rem;
      }

      .pay-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: .6rem;
      }

      .pay-card {
        padding: .9rem;
      }

      .pc-val {
        font-size: 1.3rem;
      }

      table {
        font-size: .76rem;
      }

      th,
      td {
        padding: .5rem .5rem;
      }

      .fbar {
        padding: .65rem .7rem;
        gap: .5rem;
        flex-direction: column;
        align-items: stretch;
      }

      .fg {
        flex-wrap: wrap;
      }

      .fg select,
      .fg input {
        font-size: .82rem;
        padding: .5rem .6rem;
      }

      .swrp {
        padding: 0;
      }

      .scrd2 {
        padding: 1rem;
      }

      .ri {
        flex-direction: column;
        align-items: stretch;
      }

      .ri label {
        min-width: auto;
      }

      .lvsec {
        padding: .8rem;
      }

      .lvrow {
        flex-wrap: wrap;
        gap: .5rem;
      }

      .acrd .atm {
        gap: .5rem;
      }

      .tbx {
        padding: .55rem .4rem;
      }

      .tlbl {
        font-size: .65rem;
      }

      .tvl {
        font-size: .95rem;
      }

      .mobnav {
        padding: .4rem .3rem env(safe-area-inset-bottom);
      }

      .mobit {
        min-height: 50px;
      }

      .mobit .ico2 {
        font-size: 1.2rem;
      }

      .mobit .lbl {
        font-size: .6rem;
      }
    }

    /* ── Mobile M — 481–640px (HP biasa, Galaxy S, iPhone 14) ── */
    @media(min-width:481px) and (max-width:640px) {
      .sgrid {
        grid-template-columns: repeat(3, 1fr);
        gap: .7rem;
      }

      .dchrt {
        grid-template-columns: 1fr;
        gap: .8rem;
      }

      .agrid {
        grid-template-columns: 1fr;
      }

      .egrid {
        grid-template-columns: 1fr;
      }

      .emp-today-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .emp-kpi-snap {
        grid-template-columns: repeat(3, 1fr);
      }

      .kpi-chart-row {
        flex-direction: column;
      }

      .kpi-sum-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .leave-type-cards {
        grid-template-columns: repeat(3, 1fr);
      }

      table {
        font-size: .8rem;
      }

      th,
      td {
        padding: .55rem .6rem;
      }
    }

    /* ── Mobile L / Tablet kecil — 641–768px (iPhone Plus, tablet kecil) ── */
    @media(min-width:641px) and (max-width:768px) {
      .sgrid {
        grid-template-columns: repeat(3, 1fr);
      }

      .dchrt {
        grid-template-columns: 1fr 1fr;
      }

      .agrid {
        grid-template-columns: 1fr;
      }

      .egrid {
        grid-template-columns: repeat(2, 1fr);
      }

      .emp-today-grid {
        grid-template-columns: repeat(4, 1fr);
      }

      .emp-kpi-snap {
        grid-template-columns: repeat(3, 1fr);
      }

      .kpi-sum-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .kpi-chart-row {
        flex-direction: column;
      }
    }

    /* ── Tablet — 769–1024px (iPad, tablet 10") ── */
    @media(min-width:769px) and (max-width:1024px) {
      .main {
        padding: 1.1rem 1.2rem;
        max-width: 100%;
        padding-bottom: 1.1rem;
      }

      .sgrid {
        grid-template-columns: repeat(3, 1fr);
        gap: .9rem;
      }

      .agrid {
        grid-template-columns: repeat(2, 1fr);
      }

      .egrid {
        grid-template-columns: repeat(2, 1fr);
      }

      .dchrt {
        grid-template-columns: 1fr 1fr;
      }

      .emp-today-grid {
        grid-template-columns: repeat(4, 1fr);
      }

      .emp-kpi-snap {
        grid-template-columns: repeat(4, 1fr);
      }

      .kpi-chart-row {
        flex-direction: row;
        flex-wrap: wrap;
      }

      .kpi-sum-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .pay-cards {
        grid-template-columns: repeat(3, 1fr);
      }

      .esit {
        flex-wrap: wrap;
      }

      .esip {
        flex-wrap: wrap;
      }

      table {
        font-size: .83rem;
      }

      th,
      td {
        padding: .7rem .75rem;
      }

      .mbox {
        max-width: 480px;
      }
    }

    /* ── Laptop — 1025–1280px (laptop 13–14") ── */
    @media(min-width:1025px) and (max-width:1280px) {
      .main {
        padding: 1.3rem 1.4rem;
        max-width: 1180px;
      }

      .agrid {
        grid-template-columns: repeat(3, 1fr);
      }

      .egrid {
        grid-template-columns: repeat(3, 1fr);
      }

      .sgrid {
        grid-template-columns: repeat(5, 1fr);
      }

      .emp-today-grid {
        grid-template-columns: repeat(4, 1fr);
      }

      .emp-kpi-snap {
        grid-template-columns: repeat(4, 1fr);
      }

      .kpi-sum-grid {
        grid-template-columns: repeat(5, 1fr);
      }

      .kpi-chart-row {
        flex-direction: row;
      }
    }

    /* ── Desktop — > 1280px ── */
    @media(min-width:1281px) {
      .main {
        padding: 1.5rem;
        max-width: 1400px;
      }

      .agrid {
        grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
      }

      .egrid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      }

      .sgrid {
        grid-template-columns: repeat(5, 1fr);
      }

      .emp-today-grid {
        grid-template-columns: repeat(4, 1fr);
      }

      .emp-kpi-snap {
        grid-template-columns: repeat(4, 1fr);
      }

      .kpi-sum-grid {
        grid-template-columns: repeat(5, 1fr);
      }
    }

    /* ── Topbar jam/tanggal: sembunyikan tanggal di layar sangat kecil ── */
    @media(max-width:400px) {
      #lvDate {
        display: none;
      }
    }

    /* Table responsive — hide columns on small screens */
    @media(max-width:900px) {
      .hide-sm {
        display: none !important;
      }
    }

    @media(max-width:640px) {
      .hide-xs {
        display: none !important;
      }
    }

    /* ===== EMPLOYEE DATABASE VIEW ===== */
    .sechd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.2rem;
      flex-wrap: wrap;
      gap: .8rem;
    }

    .sechd h3 {
      font-size: 1.1rem;
      font-weight: 700;
    }

    #empDbTable th {
      white-space: nowrap;
      font-size: .72rem;
    }

    #empDbTable td {
      white-space: nowrap;
      font-size: .82rem;
    }

    #empDbTable td.wrap-cell {
      white-space: normal;
      min-width: 130px;
    }

    .apd-ok {
      color: #059669;
      font-weight: 600;
      font-size: .75rem;
    }

    .apd-due {
      color: #dc2626;
      font-weight: 700;
      font-size: .75rem;
    }

    .apd-na {
      color: #9ca3af;
      font-size: .75rem;
    }

    .db-search-highlight {
      background: #fef9c3;
      border-radius: 3px;
    }

    /* ===== AUTO CLOCK-OUT NOTIFICATION ===== */
    .aco-banner {
      background: linear-gradient(135deg, #fff7ed, #ffedd5);
      border: 2px solid #f97316;
      border-radius: 16px;
      padding: 1rem 1.2rem;
      margin-bottom: 1rem;
      display: flex;
      align-items: flex-start;
      gap: .8rem;
      animation: fi .3s ease;
      position: relative;
    }

    .aco-banner .aco-ico {
      font-size: 1.8rem;
      flex-shrink: 0;
      animation: pu 1.5s infinite;
    }

    .aco-banner .aco-body {
      flex: 1;
    }

    .aco-banner .aco-tt {
      font-weight: 700;
      font-size: .95rem;
      color: #c2410c;
      margin-bottom: 4px;
    }

    .aco-banner .aco-sub {
      font-size: .82rem;
      color: #9a3412;
      line-height: 1.5;
    }

    .aco-banner .aco-btn {
      background: #f97316;
      color: #fff;
      border: none;
      padding: .5rem 1rem;
      border-radius: 10px;
      font-weight: 700;
      font-size: .82rem;
      cursor: pointer;
      margin-top: .5rem;
      transition: .2s;
    }

    .aco-banner .aco-btn:hover {
      background: #ea580c;
    }

    .badge.bg-aco {
      background: #fff7ed;
      color: #c2410c;
      border: 1px solid #fdba74;
    }

    .aco-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: .68rem;
      font-weight: 700;
      color: #c2410c;
      background: #fff7ed;
      border: 1px solid #fdba74;
      padding: 2px 8px;
      border-radius: 8px;
      margin-left: 4px;
    }

    /* ===== APD & INVENTARIS ===== */
    .apd-section {
      background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
      border: 1px solid #bae6fd;
      border-radius: 16px;
      padding: 1rem 1.2rem;
      margin-top: .8rem;
    }

    .apd-section h5 {
      font-size: .85rem;
      font-weight: 700;
      color: #0369a1;
      margin-bottom: .8rem;
    }

    .apd-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: .6rem;
    }

    .apd-item {
      background: #fff;
      border-radius: 12px;
      padding: .6rem .8rem;
      border: 1px solid #e0f2fe;
    }

    .apd-item label {
      font-size: .72rem;
      color: #0369a1;
      font-weight: 600;
      display: block;
      margin-bottom: .3rem;
    }

    .apd-item input,
    .apd-item select {
      width: 100%;
      padding: .4rem .6rem;
      border-radius: 8px;
      border: 1px solid #bae6fd;
      font-size: .82rem;
      background: #f0f9ff;
    }

    .apd-item input[type="date"] {
      min-height: 34px;
    }

    .apd-warn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: .7rem;
      font-weight: 700;
      color: #b45309;
      background: #fef3c7;
      border: 1px solid #fde68a;
      padding: 2px 8px;
      border-radius: 8px;
      margin-top: 4px;
    }

    /* ===== MASA KERJA & KONTRAK ===== */
    .tenure-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: .73rem;
      font-weight: 700;
      color: #065f46;
      background: #d1fae5;
      border: 1px solid #a7f3d0;
      padding: 3px 10px;
      border-radius: 10px;
      margin-top: 4px;
    }

    .contract-warn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: .73rem;
      font-weight: 700;
      color: #7c2d12;
      background: #fee2e2;
      border: 1px solid #fca5a5;
      padding: 3px 10px;
      border-radius: 10px;
      margin-top: 4px;
    }

    .anniversary-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: .73rem;
      font-weight: 700;
      color: #5b21b6;
      background: #ede9fe;
      border: 1px solid #c4b5fd;
      padding: 3px 10px;
      border-radius: 10px;
      margin-top: 4px;
    }

    .contract-section {
      background: linear-gradient(135deg, #f5f3ff, #ede9fe);
      border: 1px solid #c4b5fd;
      border-radius: 16px;
      padding: 1rem 1.2rem;
      margin-top: .8rem;
    }

    .contract-section h5 {
      font-size: .85rem;
      font-weight: 700;
      color: #5b21b6;
      margin-bottom: .8rem;
    }

    .contract-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .6rem;
    }

    .contract-grid .fg2 {
      margin-bottom: 0;
    }

    /* ===== CONTRACT ALERT BANNER ===== */
    .contract-alert-banner {
      background: linear-gradient(135deg, #fef3c7, #fde68a);
      border: 2px solid #f59e0b;
      border-radius: 16px;
      padding: 1rem 1.2rem;
      margin-bottom: 1rem;
      display: flex;
      align-items: flex-start;
      gap: .8rem;
      animation: fi .3s ease;
    }

    .contract-alert-banner .cab-ico {
      font-size: 1.8rem;
      flex-shrink: 0;
    }

    .contract-alert-banner .cab-body {
      flex: 1;
    }

    .contract-alert-banner .cab-tt {
      font-weight: 700;
      font-size: .95rem;
      color: #92400e;
      margin-bottom: 4px;
    }

    .contract-alert-banner .cab-sub {
      font-size: .82rem;
      color: #78350f;
      line-height: 1.5;
    }

    .anniversary-banner {
      background: linear-gradient(135deg, #f5f3ff, #ede9fe);
      border: 2px solid #7c3aed;
      border-radius: 16px;
      padding: 1rem 1.2rem;
      margin-bottom: 1rem;
      display: flex;
      align-items: flex-start;
      gap: .8rem;
      animation: fi .3s ease;
    }

    .anniversary-banner .anb-ico {
      font-size: 1.8rem;
      flex-shrink: 0;
      animation: pu 1.8s infinite;
    }

    .anniversary-banner .anb-body {
      flex: 1;
    }

    .anniversary-banner .anb-tt {
      font-weight: 700;
      font-size: .95rem;
      color: #5b21b6;
      margin-bottom: 4px;
    }

    .anniversary-banner .anb-sub {
      font-size: .82rem;
      color: #6d28d9;
      line-height: 1.5;
    }

    /* ===== REIMBURSEMENT / KLAIM ===== */
    .reimb-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 1rem;
      margin-bottom: 1.2rem;
    }

    .reimb-card {
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 18px;
      padding: 1.2rem;
      transition: .2s;
    }

    .reimb-card:hover {
      box-shadow: var(--hsh);
    }

    .reimb-card-hdr {
      display: flex;
      align-items: center;
      gap: .8rem;
      margin-bottom: .8rem;
    }

    .reimb-ico {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      flex-shrink: 0;
    }

    .reimb-ico.bensin {
      background: #fef9c3;
    }

    .reimb-ico.parkir {
      background: #dbeafe;
    }

    .reimb-ico.kesehatan {
      background: #dcfce7;
    }

    .reimb-ico.lainnya {
      background: #f3e8ff;
    }

    .reimb-nm {
      font-weight: 700;
      font-size: .95rem;
    }

    .reimb-dt {
      font-size: .78rem;
      color: var(--ts);
    }

    .reimb-amt {
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--pr);
      margin: .4rem 0;
    }

    .reimb-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: .75rem;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 10px;
    }

    .rs-pending {
      background: #fef3c7;
      color: #92400e;
    }

    .rs-approved {
      background: #dcfce7;
      color: #166534;
    }

    .rs-rejected {
      background: #fee2e2;
      color: #991b1b;
    }

    .reimb-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: .8rem;
      align-items: center;
      background: #fff;
      padding: 1rem 1.2rem;
      border-radius: 16px;
      margin-bottom: 1.2rem;
      border: 1px solid var(--bd);
    }

    .reimb-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 1rem;
      margin-bottom: 1.2rem;
    }

    .reimb-stat-card {
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 16px;
      padding: 1rem 1.2rem;
    }

    .reimb-stat-card .rsc-lbl {
      font-size: .8rem;
      color: var(--ts);
      margin-bottom: 4px;
    }

    .reimb-stat-card .rsc-val {
      font-size: 1.5rem;
      font-weight: 800;
    }

    /* KUITANSI PRINT */
    .kuitansi-preview {
      background: #fff;
      border: 2px solid var(--bd);
      border-radius: 16px;
      padding: 1.5rem;
      margin-top: 1rem;
      font-family: 'Plus Jakarta Sans', sans-serif;
    }

    @media print {
      body>*:not(#reimbPrintArea) {
        display: none !important;
      }

      #reimbPrintArea {
        display: block !important;
      }

      #reimbPrintArea .reimb-kuitansi-print {
        max-width: 100%;
        padding: 20px;
      }
    }