/* Gaya khusus per modul. Dipisah dari komponen supaya jelas mana yang milik
   satu layar saja dan mana yang dipakai bersama.
   Dipindah dari public/index.html — isinya tidak diubah, hanya dipisah. */

/* ============================================================
   LANDING PAGE — ruang kerja Antarestar
   ============================================================ */
#site{display:none;background:var(--bg-card)}
#site a.sm{display:inline-block;padding:4px 0;line-height:var(--lh-3)}
.brand-txt b{line-height:16px}
.brand-txt small{line-height:13px}
.lp-wrap{max-width:1140px;margin:0 auto;padding:0 24px}

.lp-nav{position:sticky;top:0;z-index:100;background:var(--surface-dark);border-bottom:1px solid rgba(255,255,255,.08)}
.lp-navin{height:64px;display:flex;align-items:center;gap:24px}
.lp-badge{background:var(--primary);color:#fff;font-size:10px;font-weight:800;letter-spacing:.1em;
  padding:2px 7px;border-radius:5px}
.lp-links{display:flex;gap:26px;margin-left:auto}
.lp-links a{color:rgba(255,255,255,.72);font-size:var(--fs-3);font-weight:600;cursor:pointer;padding:7px 0;line-height:var(--lh-3)}
.lp-links a:hover{color:#fff;text-decoration:none}
.lp-burger{display:none;color:#fff;width:36px;height:36px;border-radius:8px;place-items:center}

.lp-hero{background:var(--surface-dark);color:var(--on-dark);padding:76px 0 88px;position:relative;overflow:hidden}
.lp-hero:before{content:"";position:absolute;right:-160px;top:-160px;width:620px;height:620px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(242,99,34,.28),transparent)}
.lp-herogrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;position:relative}
.lp-kicker{display:inline-block;background:rgba(242,99,34,.16);color:#F79860;border:1px solid rgba(242,99,34,.35);
  border-radius:99px;padding:5px 13px;font-size:var(--fs-2);font-weight:700;margin-bottom:18px}
.lp-hero h1{font-family:var(--font-display);font-size:52px;line-height:60px;font-weight:800;letter-spacing:-.035em}
.lp-sub{font-size:16px;line-height:26px;color:rgba(255,255,255,.72);margin-top:18px;max-width:520px}
.lp-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2)}
.lp-ghost:hover{background:rgba(255,255,255,.16)}
.lp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.12)}
.lp-stats b{display:block;font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:-.03em}
.lp-stats span{font-size:var(--fs-2);color:rgba(255,255,255,.6);line-height:16px;display:block;margin-top:3px}

.lp-collage{position:relative;height:420px}
.lp-shot{position:absolute;background:var(--bg-card);color:var(--text-1);border-radius:var(--r-xl);
  padding:14px;box-shadow:0 20px 50px rgba(0,0,0,.35);width:230px}
.lp-shot.s1{top:0;left:0;transform:rotate(-3deg)}
.lp-shot.s2{top:120px;left:130px;transform:rotate(2deg);width:250px;z-index:3}
.lp-shot.s3{top:20px;right:0;transform:rotate(3deg);width:220px;z-index:2}
.lp-shot.s4{bottom:0;right:40px;transform:rotate(-2deg);width:210px}
.lp-big{font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:-.03em}
.lp-bubble{background:var(--fill-2);border-radius:var(--r-lg);border-top-left-radius:4px;
  padding:8px 11px;font-size:var(--fs-2);line-height:var(--lh-2);margin-top:7px}
.lp-live{position:absolute;top:96px;left:60px;background:var(--red);color:#fff;font-size:10px;
  font-weight:800;letter-spacing:.08em;padding:4px 9px;border-radius:5px;z-index:5}

.lp-sec{padding:80px 0}
.lp-gray{background:var(--bg-body)}
.lp-h2{font-family:var(--font-display);font-size:38px;line-height:46px;font-weight:800;letter-spacing:-.035em}
.lp-p{font-size:15px;line-height:25px;color:var(--text-3)}
.lp-headrow{display:flex;gap:36px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.lp-lgo{font-family:var(--font-serif);font-style:italic;font-size:22px;color:var(--primary)}

.lp-steps{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:center}
.lp-step{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.lp-stepn{width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;flex:none;
  display:grid;place-items:center;font-size:var(--fs-2);font-weight:800}
.lp-phone{display:flex;justify-content:center}
.lp-phonein{width:300px;border:9px solid var(--surface-dark);border-radius:34px;overflow:hidden;
  background:var(--bg-body);box-shadow:0 24px 60px rgba(18,22,27,.22)}
.lp-status{display:flex;align-items:center;padding:8px 14px;font-size:11px;color:var(--text-3);background:var(--bg-card)}

.lp-band{background:var(--primary);color:#fff;padding:72px 0}
.lp-bandgrid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:48px;align-items:center}
.lp-modgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px 14px}
.lp-mod{display:flex;flex-direction:column;align-items:center;gap:9px;color:#fff;
  font-size:var(--fs-2);font-weight:700;line-height:var(--lh-2);text-align:center}
.lp-modico{width:70px;height:70px;border-radius:50%;background:#fff;color:var(--primary);
  display:grid;place-items:center;transition:transform .15s}
.lp-mod:hover .lp-modico{transform:translateY(-4px)}

.lp-chip{background:var(--bg-card);border:1px solid var(--line);border-radius:99px;
  padding:8px 16px;font-size:var(--fs-3);font-weight:700;color:var(--text-2)}
.lp-stories{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lp-story{background:var(--surface-dark);color:var(--on-dark);border-radius:var(--r-xl);padding:26px}
.lp-storytag{display:inline-block;background:var(--primary);color:#fff;font-size:var(--fs-1);
  font-weight:800;letter-spacing:.08em;padding:3px 9px;border-radius:5px;text-transform:uppercase}
.lp-quote{font-size:16px;line-height:26px;margin-top:16px;color:rgba(255,255,255,.92)}

.lp-learn{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:start}
.lp-video{background:var(--surface-dark);border-radius:var(--r-xl);aspect-ratio:16/9;position:relative;overflow:hidden}
.lp-video:before{content:"";position:absolute;left:0;top:0;bottom:0;width:64px;
  background:linear-gradient(180deg,var(--primary),transparent)}
.lp-video:after{content:"";position:absolute;right:0;top:0;bottom:0;width:64px;
  background:linear-gradient(180deg,#22D3EE,transparent)}
.lp-vinner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;padding:20px;z-index:2}
.lp-vtitle{font-family:var(--font-display);font-size:30px;font-weight:800;color:#fff;letter-spacing:-.03em;text-align:center}
.lp-vbar{width:100%;height:4px;border-radius:99px;background:rgba(255,255,255,.25);margin-top:auto}
.lp-vbar span{display:block;height:100%;border-radius:99px;background:#fff}
.lp-topics{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-xl);padding:18px}
.lp-topic{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 12px;
  border-radius:var(--r-md);font-size:var(--fs-3);color:var(--text-2);border-bottom:1px solid var(--line-soft)}
.lp-topic:last-of-type{border-bottom:none}
.lp-topic:hover{background:var(--fill-1)}
.lp-topic.on{background:var(--surface-dark);color:var(--on-dark);font-weight:700}
.lp-topic.on .sm{color:rgba(255,255,255,.6)}

.lp-qual{padding:64px 0}
.lp-qualgrid{display:grid;grid-template-columns:200px minmax(0,1fr) 240px;gap:40px;align-items:center}
.lp-quals{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center;
  border-left:1px solid rgba(255,255,255,.3);border-right:1px solid rgba(255,255,255,.3);padding:0 30px}
.lp-qual1{display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:var(--fs-3);font-weight:700;line-height:var(--lh-3)}
.lp-qr{display:flex;flex-direction:column;align-items:center}
.lp-qrbox{background:#fff;padding:10px;border-radius:var(--r-md);line-height:0}
.lp-qrbox svg{fill:var(--surface-dark)}

.lp-faq{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:10px;overflow:hidden}
.lp-faq button{width:100%;display:flex;align-items:center;gap:12px;padding:16px 18px;
  font-size:var(--fs-4);font-weight:700;text-align:left;color:var(--text-1)}
.lp-faq.on button .icon{transform:rotate(180deg)}
.lp-faq p{padding:0 18px 18px;font-size:var(--fs-3);line-height:var(--lh-4);color:var(--text-3)}

.lp-cta{background:var(--surface-dark);color:var(--on-dark);padding:76px 0;position:relative;overflow:hidden}
.lp-cta:before{content:"";position:absolute;left:50%;top:-200px;transform:translateX(-50%);
  width:640px;height:440px;border-radius:50%;background:radial-gradient(closest-side,rgba(242,99,34,.24),transparent)}
.lp-cta .lp-wrap{position:relative}

.lp-foot{background:var(--surface-dark);color:var(--on-dark);padding:56px 0 32px;border-top:1px solid rgba(255,255,255,.1)}
.lp-footgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding-bottom:36px}
.lp-foot h4{font-size:var(--fs-4);font-weight:800;margin-bottom:14px}
.lp-foot a{display:block;color:rgba(255,255,255,.62);font-size:var(--fs-3);padding:6px 0;cursor:pointer;font-weight:500}
.lp-foot a:hover{color:#fff;text-decoration:none}
.lp-footbar{border-top:1px solid rgba(255,255,255,.12);padding-top:28px;display:flex;
  flex-direction:column;align-items:center;gap:18px}
.lp-region{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);color:#fff;
  border-radius:99px;padding:8px 16px;font-size:var(--fs-3);font-weight:700}
.lp-policy{display:flex;flex-direction:column;align-items:center;gap:2px}

@media (max-width:1024px){
  .lp-hero h1{font-size:40px;line-height:48px}
  .lp-herogrid,.lp-steps,.lp-bandgrid,.lp-learn{grid-template-columns:1fr;gap:36px}
  .lp-collage{height:360px}
  .lp-modgrid{grid-template-columns:repeat(4,1fr)}
  .lp-stories{grid-template-columns:1fr}
  .lp-qualgrid{grid-template-columns:1fr;text-align:center;gap:28px}
  .lp-quals{border:none;padding:0}
  .lp-qr{margin:0 auto}
}
@media (max-width:600px){
  .lp-links{display:none}
  .lp-burger{display:grid}
  .lp-hero{padding:44px 0 56px}
  .lp-hero h1{font-size:31px;line-height:40px}
  .lp-h2{font-size:27px;line-height:35px}
  .lp-sec,.lp-band,.lp-cta{padding:48px 0}
  .lp-stats{grid-template-columns:repeat(2,1fr);gap:16px}
  .lp-collage{height:300px;transform:scale(.8);transform-origin:top left;width:125%}
  .lp-modgrid{grid-template-columns:repeat(3,1fr)}
  .lp-modico{width:58px;height:58px}
  .lp-footgrid{grid-template-columns:1fr;gap:20px}
  .lp-wrap{padding:0 16px}
}

/* --- LOGIN --- */
.lg-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}
.lg-form{display:flex;align-items:center;justify-content:center;padding:48px 24px;background:var(--bg-card)}
.lg-formin{width:100%;max-width:390px}
.lg-h1{font-family:var(--font-display);font-size:30px;line-height:38px;font-weight:800;letter-spacing:-.03em}
.lg-sub{font-size:var(--fs-4);color:var(--text-3);margin-top:8px;line-height:var(--lh-4)}
.lg-input{display:flex;align-items:center;gap:9px;height:46px;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:0 13px;background:var(--bg-card);color:var(--text-4)}
.lg-input:focus-within{border-color:var(--primary);box-shadow:var(--focus)}
.lg-input input{flex:1;border:none;outline:none;background:none;font-size:var(--fs-4);color:var(--text-1)}
.lg-eye{font-size:var(--fs-1);font-weight:800;letter-spacing:.06em;color:var(--text-3);height:28px;padding:0 5px;border-radius:5px}
.lg-eye:hover{color:var(--primary)}
.lg-check{display:flex;align-items:center;gap:8px;cursor:pointer}
.lg-check .cbx{width:18px;height:18px;border-radius:5px;border:1.8px solid var(--line);
  display:grid;place-items:center;color:transparent;font-size:12px;font-weight:800}
.lg-check .cbx.on{background:var(--primary);border-color:var(--primary);color:#fff}
.lg-or{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--text-4);font-size:var(--fs-2)}
.lg-or:before,.lg-or:after{content:"";flex:1;height:1px;background:var(--line)}

.lg-side{background:linear-gradient(150deg,#171E2B 0%,#12161B 55%,#1B1410 100%);
  color:#fff;display:flex;align-items:center;padding:48px;position:relative;overflow:hidden}
.lg-side:before{content:"";position:absolute;right:-140px;bottom:-140px;width:480px;height:480px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(242,99,34,.30),transparent)}
.lg-sidein{position:relative;max-width:460px;margin:0 auto}
.lg-h2{font-family:var(--font-display);font-size:34px;line-height:44px;font-weight:800;
  letter-spacing:-.03em;margin-top:14px}
.lg-p{font-size:15px;line-height:25px;color:rgba(255,255,255,.7);margin-top:14px}
.lg-li{display:flex;align-items:flex-start;gap:11px;padding:8px 0;font-size:var(--fs-4);
  line-height:var(--lh-4);color:rgba(255,255,255,.9)}
.lg-tick{width:20px;height:20px;border-radius:50%;background:rgba(74,222,128,.18);color:#4ADE80;
  display:grid;place-items:center;font-size:12px;font-weight:800;flex:none;margin-top:1px}
.lg-stat{margin-top:30px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-xl);padding:20px}
.lg-live{font-size:var(--fs-1);font-weight:800;color:#4ADE80;letter-spacing:.06em}
.lg-statv{font-family:var(--font-mono);font-size:34px;font-weight:700;letter-spacing:.04em;margin:10px 0 12px}
.lg-statbar{height:7px;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden}
.lg-statbar span{display:block;height:100%;border-radius:99px;background:var(--primary)}

@media (max-width:1024px){
  .lp-hero h1{font-size:40px;line-height:48px}
  .lp-herogrid,.lp-steps,.lp-bandgrid,.lp-learn{grid-template-columns:1fr;gap:36px}
  .lp-collage{height:360px}
  .lp-modgrid{grid-template-columns:repeat(4,1fr)}
  .lp-stories{grid-template-columns:1fr}
  .lp-qualgrid{grid-template-columns:1fr;text-align:center;gap:28px}
  .lp-quals{border:none;padding:0}
  .lp-qr{margin:0 auto}
  .lg-wrap{grid-template-columns:1fr}
  .lg-side{order:-1;padding:36px 24px}
  .lg-h2{font-size:26px;line-height:34px}
}
@media (max-width:600px){
  .lp-links{display:none}
  .lp-burger{display:grid}
  .lp-hero{padding:44px 0 56px}
  .lp-hero h1{font-size:31px;line-height:40px}
  .lp-h2{font-size:27px;line-height:35px}
  .lp-sec,.lp-band{padding:48px 0}
  .lp-stats{grid-template-columns:repeat(2,1fr);gap:16px}
  .lp-collage{height:300px;transform:scale(.8);transform-origin:top left;width:125%}
  .lp-modgrid{grid-template-columns:repeat(3,1fr)}
  .lp-modico{width:58px;height:58px}
  .lp-footgrid{grid-template-columns:1fr;gap:20px}
  .lp-wrap{padding:0 16px}
  .lg-form{padding:32px 20px}
}

/* ============================================================
   POLESAN UI — sidebar lebih ringkas, hero lebih padat isi
   ============================================================ */

/* --- Sidebar: turunkan bobot visual --- */
.side-search{height:30px;font-size:var(--fs-2);margin:10px 10px 4px}
.side-search input{font-size:var(--fs-2)}
.side-nav{padding:2px 8px 10px}
.navsec{font-size:9.5px;letter-spacing:.14em;padding:15px 8px 4px;font-weight:800}
.side .navitem{height:31px;font-size:12.5px;font-weight:500;gap:9px;padding:0 8px;border-radius:7px}
.side .navitem .icon{width:17px;height:17px;stroke-width:1.6}
.navitem.on{font-weight:700}
.navitem.on::before{left:-8px;top:6px;bottom:6px;width:3px}
.navitem .bdg{min-width:16px;height:16px;line-height:16px;font-size:9px;padding:0 4px}
.side-foot{padding:6px 8px}
.usercard{padding:6px 7px;gap:8px;border-radius:9px}
.usercard .av{width:26px;height:26px;font-size:10px}
.usercard .uc b{font-size:12px;font-weight:700}
.usercard .uc small{font-size:10px}
.subnav{width:206px}
.subnav .subitem{height:30px;font-size:12px;padding:0 8px}
.subnav .subitem .icon{width:15px;height:15px}


/* --- Topbar sedikit lebih ringkas --- */
.tab{height:38px;font-size:12px}
.brand-txt b{font-size:12.5px}
.brand-txt small{font-size:8.5px;letter-spacing:.16em}

/* --- Hero: strip fokus mengisi ruang kosong --- */
.hhero-in{padding:26px 28px}
.hfocus{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.hfocuslabel{font-size:var(--fs-1);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-right:4px}
.hfocusitem{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);border-radius:99px;padding:6px 12px 6px 6px;
  font-size:var(--fs-2);font-weight:600;color:rgba(255,255,255,.92);transition:.14s}
.hfocusitem:hover{background:rgba(255,255,255,.17);transform:translateY(-1px)}
.hfocusitem .icon{color:rgba(255,255,255,.45)}
.hfocusico{width:22px;height:22px;border-radius:50%;color:#fff;display:grid;place-items:center;flex:none}
.hclock{width:232px;padding:16px}
.hclocktime{font-size:30px;line-height:38px}

/* --- KPI: lebih padat, ada sparkline --- */
.hkpi{padding:15px 16px}
.hkpi:before{width:3px}
.hkpiico{width:30px;height:30px;border-radius:9px}
.hkpil{font-size:9.5px;letter-spacing:.1em;margin-top:0;line-height:var(--lh-1)}
.hkpichip{font-size:10px;font-weight:800;border-radius:99px;padding:3px 8px;flex:none;line-height:14px}
.hkpiv{font-size:27px;line-height:32px;margin-top:0}
.hspark{width:78px;height:26px;flex:none;opacity:.9}
.hkpibar{margin:11px 0 6px;height:4px}

/* --- Kartu: sudut & bayangan lebih halus, hover terasa --- */
.card{border-radius:15px}
.card:hover{box-shadow:0 1px 2px rgba(26,29,33,.04),0 8px 22px rgba(26,29,33,.05)}
.chd{padding:13px 17px}
.cpad{padding:15px 17px}
.hgrid{gap:14px}
.homewrap{padding:16px 20px 44px}

/* --- Aksi cepat & modul: rasa lebih hidup --- */
.hq,.happ{border-radius:13px;padding:13px}
.hq:hover,.happ:hover{box-shadow:0 6px 18px rgba(26,29,33,.07)}
.hqico{width:34px;height:34px;border-radius:11px;margin-bottom:5px}
.happico{width:36px;height:36px;border-radius:11px;margin-bottom:7px}
.happ b,.hq b{font-size:12.5px}
.happ span,.hq span{font-size:11.5px;line-height:16px}

/* --- Banner urgent lebih tenang --- */
.hurgent{padding:11px 16px;border-radius:13px}
.hurgentico{width:30px;height:30px;border-radius:9px}

/* --- Agenda & daftar lebih rapat --- */
.hagenda{padding:9px 0}
.htask{padding:11px 17px}
.happr{padding:12px 17px}

/* --- Tab tugas --- */
.htab{height:27px;font-size:11.5px}

/* --- Fokus terlihat di mode gelap --- */
[data-theme="dark"] .hfocusitem{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}

/* ============================================================
   EXECUTIVE SUMMARY
   ============================================================ */
.exhead{display:flex;align-items:center;gap:10px;margin:0 0 var(--s3)}
.exhead h2{font-family:var(--font-display);font-size:19px;line-height:26px;font-weight:800;letter-spacing:-.025em}
.exnum{width:26px;height:26px;border-radius:9px;background:var(--surface-dark);color:var(--on-dark);flex:none;
  display:grid;place-items:center;font-size:var(--fs-2);font-weight:800}
.exkpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.exkpi{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:18px;
  border-top:3px solid var(--c)}
.exkpil{font-size:var(--fs-1);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.exkpiv{font-family:var(--font-display);font-size:26px;line-height:32px;font-weight:800;
  letter-spacing:-.03em;margin-top:4px}
.exbar{height:6px;border-radius:99px;background:var(--fill-2);overflow:hidden;margin:10px 0 6px}
.exbar span{display:block;height:100%;border-radius:99px}
.exsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4);align-items:start}
.exitem{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line-soft);align-items:flex-start}
.exitem:last-child{border-bottom:none}
.exico{width:28px;height:28px;border-radius:9px;background:color-mix(in srgb,var(--c) 14%,transparent);
  color:var(--c);display:grid;place-items:center;flex:none}
.exinsight{background:var(--primary-50);border-color:var(--primary-200)}
.exinsight p{font-size:15px;line-height:26px;color:var(--text-2)}
.exroot{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-soft);align-items:flex-start}
.exroot:last-child{border-bottom:none}
.exrootn{width:26px;height:26px;border-radius:50%;background:var(--red-bg);color:var(--red);
  display:grid;place-items:center;font-size:var(--fs-2);font-weight:800;flex:none}
.exblock{border-top:3px solid var(--red)}
.excross{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:16px;text-align:left;transition:.14s}
.excross:hover{border-color:var(--primary-200);transform:translateY(-2px);box-shadow:var(--shadow-1)}
.excross b{font-size:var(--fs-3);font-weight:700}
.excross span{font-size:var(--fs-2);color:var(--text-4);line-height:var(--lh-2)}
.excrossico{width:38px;height:38px;border-radius:12px;background:var(--primary-50);color:var(--primary);
  display:grid;place-items:center;margin-bottom:8px}

/* ============================================================
   DAILY UPDATE — feed ala Instagram + Threads
   ============================================================ */
.dwrap{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s4);align-items:start}
.dmain{min-width:0}
.dstories{display:flex;gap:var(--s3);overflow-x:auto;padding:2px 2px var(--s3)}
.dstories::-webkit-scrollbar{height:0}
.dstory{display:flex;flex-direction:column;align-items:center;gap:7px;flex:none;width:78px;
  font-size:var(--fs-1);line-height:var(--lh-1);font-weight:600;color:var(--text-2);text-align:center}
.dstoryring{width:64px;height:64px;border-radius:50%;padding:3px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 40%,#fff))}
.dstoryring.dnew{background:var(--fill-2)}
.dstoryin{width:100%;height:100%;border-radius:50%;background:var(--bg-card);display:grid;place-items:center;
  color:var(--text-2)}
.dstory:hover .dstoryring{transform:scale(1.04)}

.dcompose{margin-bottom:var(--s3)}
.dcomposebtn{flex:1;text-align:left;height:42px;padding:0 16px;border-radius:99px;background:var(--fill-1);
  color:var(--text-4);font-size:var(--fs-4)}
.dcomposebtn:hover{background:var(--fill-2)}

.dtabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:var(--s3)}
.dtabs::-webkit-scrollbar{height:0}
.dtab{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:99px;
  border:1px solid var(--line);background:var(--bg-card);font-size:var(--fs-2);font-weight:700;
  color:var(--text-2);flex:none}
.dtab:hover{border-color:var(--primary-200);color:var(--primary-active)}
.dtab.on{background:var(--pill-bg);color:var(--pill-fg);border-color:var(--pill-bg)}

.dpost{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;margin-bottom:var(--s3);overflow:hidden}
.dpin{display:flex;align-items:center;gap:6px;padding:8px 18px;background:var(--primary-50);
  color:var(--primary-active);font-size:var(--fs-1);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.dphead{display:flex;align-items:center;gap:11px;padding:14px 18px 10px}
.dpbody{padding:0 18px 14px}
.dpbody h3{font-family:var(--font-display);font-size:var(--fs-5);font-weight:800;letter-spacing:-.02em;line-height:24px}
.dpbody p{font-size:var(--fs-4);line-height:24px;color:var(--text-2);margin-top:8px}
.dpimg{height:220px;border-radius:14px;margin-top:14px;position:relative;overflow:hidden;
  display:grid;place-items:center}
.dp-kalender{background:linear-gradient(135deg,#1B8FE3,#7358F0)}
.dp-juara{background:linear-gradient(135deg,#F26322,#E5A912)}
.dp-venue{background:linear-gradient(135deg,#16A34A,#0D9488)}
.dpimgtag{background:rgba(0,0,0,.35);color:#fff;border-radius:99px;padding:8px 18px;
  font-size:var(--fs-4);font-weight:700;backdrop-filter:blur(4px)}
.dpfile{display:flex;align-items:center;gap:10px;margin-top:14px;background:var(--fill-1);
  border-radius:12px;padding:11px 13px}
.dpfileico{width:32px;height:32px;border-radius:9px;background:var(--red);color:#fff;
  display:grid;place-items:center;flex:none}
.dpstats{display:flex;gap:6px;padding:0 18px 10px;font-size:var(--fs-2);color:var(--text-4)}
.dpacts{display:flex;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.dpacts button{flex:1;height:42px;display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:var(--fs-3);font-weight:700;color:var(--text-3)}
.dpacts button:hover{background:var(--fill-1);color:var(--text-1)}
.dpacts button.on{color:var(--primary)}
.dpcomments{padding:12px 18px 14px}
.dpcm{display:flex;gap:9px;padding:5px 0;align-items:flex-start}
.dpcin{flex:1;border:none;outline:none;background:var(--fill-1);border-radius:99px;height:34px;
  padding:0 14px;font-size:var(--fs-3)}
.dcal{width:56px;flex:none;background:var(--primary-50);color:var(--primary-active);border-radius:9px;
  padding:6px;text-align:center;font-size:var(--fs-1);font-weight:800;line-height:var(--lh-1)}

@media (max-width:1240px){
  .exkpis{grid-template-columns:repeat(2,1fr)}
  .exsplit{grid-template-columns:1fr;gap:var(--s3)}
  .dwrap{grid-template-columns:1fr}
  .dside{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
  .dside>.card{margin-top:0!important}
}
@media (max-width:820px){
  .exkpis{grid-template-columns:1fr}
  .dside{grid-template-columns:1fr}
}

/* ============================================================
   HOME — dashboard utama
   ============================================================ */
.homewrap{max-width:1320px;margin:0 auto;padding:var(--s4) var(--s5) 48px}
.hhero{position:relative;border-radius:20px;overflow:hidden;background:var(--surface-dark);color:var(--on-dark);margin-bottom:var(--s3)}
.hhero-bg{position:absolute;inset:0;
  background:radial-gradient(600px 320px at 12% -20%,rgba(242,99,34,.42),transparent 70%),
             radial-gradient(520px 300px at 92% 120%,rgba(115,88,240,.34),transparent 70%)}
.hhero-in{position:relative;display:flex;gap:var(--s5);padding:30px 32px;align-items:center;flex-wrap:wrap}
.hpill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);border-radius:99px;padding:4px 11px;
  font-size:var(--fs-1);font-weight:700;letter-spacing:.04em}
.hpill.hlive{background:rgba(220,75,79,.24);border-color:rgba(220,75,79,.5);color:#FCA5A5}
.hh1{font-family:var(--font-display);font-size:32px;line-height:40px;font-weight:800;letter-spacing:-.03em}
.hsub{font-size:var(--fs-4);line-height:var(--lh-4);color:rgba(255,255,255,.72);margin-top:6px;max-width:560px}
.hghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22)}
.hghost:hover{background:rgba(255,255,255,.2)}
.hclock{flex:none;width:250px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  border-radius:16px;padding:18px}
.hclocktime{font-family:var(--font-mono);font-size:34px;font-weight:700;letter-spacing:.02em;line-height:44px}
.hattend{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16)}
.hdot{width:8px;height:8px;border-radius:50%;background:#4ADE80;flex:none;
  box-shadow:0 0 0 4px rgba(74,222,128,.2)}

.hurgent{display:flex;align-items:center;gap:12px;padding:13px 18px;border-radius:14px;
  background:var(--red-bg);border:1px solid rgba(220,75,79,.28);margin-bottom:var(--s3);flex-wrap:wrap}
.hurgentico{width:32px;height:32px;border-radius:10px;background:var(--red);color:#fff;
  display:grid;place-items:center;flex:none}

.hkpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-bottom:var(--s3)}
.hkpi{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:18px;
  position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.hkpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.hkpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-1)}
.hkpiico{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none}
.hkpitrend{font-size:var(--fs-2);font-weight:800}
.hkpil{font-size:var(--fs-1);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);margin-top:12px}
.hkpiv{font-family:var(--font-display);font-size:26px;line-height:32px;font-weight:800;
  letter-spacing:-.03em;margin-top:3px}
.hkpibar{height:5px;border-radius:99px;background:var(--fill-2);overflow:hidden;margin:10px 0 7px}
.hkpibar span{display:block;height:100%;border-radius:99px}

.hgrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--s3);align-items:start}
.hsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3)}

.htab{height:28px;padding:0 11px;border-radius:99px;font-size:var(--fs-2);font-weight:700;
  color:var(--text-3);display:inline-flex;align-items:center;gap:6px}
.htab:hover{background:var(--fill-1)}
.htab.on{background:var(--pill-bg);color:var(--pill-fg)}
.htab span{background:rgba(0,0,0,.08);border-radius:99px;padding:0 6px;font-size:var(--fs-1)}
.htab.on span{background:rgba(255,255,255,.22)}
.htask{display:flex;align-items:center;gap:11px;padding:12px 18px;border-bottom:1px solid var(--line-soft)}
.htask:last-child{border-bottom:none}
.htask:hover{background:var(--fill-1)}
.hcheck{width:19px;height:19px;border-radius:6px;border:1.8px solid var(--line);flex:none;
  display:grid;place-items:center;color:#fff;font-size:var(--fs-2);font-weight:800;cursor:pointer}
.hcheck.on{background:var(--green);border-color:var(--green)}

.hquick{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
.hq{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;
  border:1px solid var(--line);border-radius:14px;background:var(--bg-card);text-align:left;transition:.14s}
.hq:hover{border-color:var(--primary-200);background:var(--primary-50);transform:translateY(-2px)}
.hq b{font-size:var(--fs-3);font-weight:700}
.hq span{font-size:var(--fs-2);color:var(--text-4)}
.hqico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;margin-bottom:6px}

.hdonut{width:112px;height:112px;border-radius:50%;flex:none;display:grid;place-items:center}
.hdonutin{width:74px;height:74px;border-radius:50%;background:var(--bg-card);display:grid;place-items:center;text-align:center}
.hdonutin b{display:block;font-family:var(--font-display);font-size:22px;line-height:28px;font-weight:800;letter-spacing:-.03em}
.hdonutin span{font-size:var(--fs-1);color:var(--text-4)}

.happs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.happ{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px;
  border:1px solid var(--line);border-radius:14px;background:var(--bg-card);text-align:left;transition:.14s}
.happ:hover{border-color:var(--primary-200);transform:translateY(-2px);box-shadow:var(--shadow-1)}
.happ b{font-size:var(--fs-3);font-weight:700}
.happ span{font-size:var(--fs-2);color:var(--text-4)}
.happico{width:40px;height:40px;border-radius:13px;color:#fff;display:grid;place-items:center;margin-bottom:8px}

.hagenda{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.hagenda:last-child{border-bottom:none}
.hatime{width:52px;flex:none;text-align:right}
.hatime b{display:block;font-family:var(--font-mono);font-size:var(--fs-2);font-weight:700}
.hatime span{font-size:var(--fs-1);color:var(--text-4)}
.haline{width:3px;border-radius:2px;flex:none}

.happr{display:flex;gap:11px;padding:13px 18px;border-bottom:1px solid var(--line-soft);align-items:center}
.happr:last-child{border-bottom:none}
.happr:hover{background:var(--fill-1)}

.hnote{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line-soft);cursor:pointer}
.hnote:last-child{border-bottom:none}
.hnoteico{width:28px;height:28px;border-radius:9px;color:#fff;display:grid;place-items:center;flex:none}
.hfeed{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.hfeed:last-child{border-bottom:none}

@media (max-width:1240px){
  .hgrid{grid-template-columns:1fr}
  .hkpis{grid-template-columns:repeat(2,1fr)}
  .happs{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .homewrap{padding:var(--s3) var(--s3) 40px}
  .hhero-in{padding:22px}
  .hclock{width:100%}
  .hsplit{grid-template-columns:1fr}
  .happs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .hh1{font-size:24px;line-height:32px}
  .hkpis{grid-template-columns:1fr}
  .hquick{grid-template-columns:1fr}
}

/* ============================================================
   AI ASSISTANT
   ============================================================ */
.aihero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s4);align-items:start}
.aih2{font-family:var(--font-display);font-size:26px;line-height:34px;font-weight:800;letter-spacing:-.03em}
.aibox{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:16px;
  box-shadow:var(--shadow-1)}
.aibox:focus-within{border-color:var(--primary);box-shadow:var(--focus)}
.aiinput{width:100%;border:none;outline:none;resize:none;background:transparent;min-height:84px;
  font-family:var(--font-sans);font-size:var(--fs-4);line-height:var(--lh-4);color:var(--text-1)}
.aichain{display:flex;flex-direction:column;gap:6px}
.aiag{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);
  border-radius:12px;background:var(--bg-card);position:relative}
.aiag.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 7%,transparent)}
.aiagico{width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--c) 14%,transparent);
  color:var(--c);display:grid;place-items:center;flex:none}
.aiag b{display:block;font-size:var(--fs-3);font-weight:700}
.aiag span{font-size:var(--fs-1);line-height:var(--lh-1);color:var(--text-4);display:block}
.aiarrow{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%) rotate(90deg);
  color:var(--text-5);z-index:2;background:var(--bg-body);border-radius:50%}
.airow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.airow:last-of-type{border-bottom:none}
.airownum{width:24px;height:24px;border-radius:50%;background:var(--primary-50);color:var(--primary-active);
  display:grid;place-items:center;font-size:var(--fs-2);font-weight:800;flex:none}
.aiex{padding:16px;text-align:left;transition:.14s}
.aiex:hover{border-color:var(--primary-200);background:var(--primary-50);transform:translateY(-2px)}

.aichat{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--bg-card)}
.aichat-body{flex:1;overflow-y:auto;padding:var(--s5) 0}
.aiwrap{max-width:840px;margin:0 auto;padding:0 var(--s5)}
.aimsg{display:flex;gap:12px;margin-bottom:var(--s5);align-items:flex-start}
.aimsg.me{flex-direction:row-reverse}
.aibubble{background:var(--primary-100);border-radius:16px;border-top-right-radius:5px;padding:11px 15px;
  font-size:var(--fs-4);line-height:var(--lh-4);max-width:560px}
.aiav{width:32px;height:32px;border-radius:10px;background:var(--surface-dark);color:var(--primary);
  display:grid;place-items:center;flex:none}
.aiblock{border-left:3px solid var(--c);background:var(--fill-1);border-radius:0 12px 12px 0;
  padding:14px 16px;margin-bottom:10px}
.aiblockico{width:26px;height:26px;border-radius:8px;background:color-mix(in srgb,var(--c) 16%,transparent);
  color:var(--c);display:grid;place-items:center;flex:none}
.aiblock p{font-size:var(--fs-3);line-height:22px;color:var(--text-2);margin-top:9px}
.aisrc{display:inline-flex;align-items:center;gap:6px;background:var(--bg-card);border:1px solid var(--line);
  border-radius:99px;padding:5px 11px;font-size:var(--fs-2);font-weight:600;color:var(--text-2)}
.aicomposer{flex:none;border-top:1px solid var(--line);padding:var(--s3) 0 var(--s4);background:var(--bg-card)}
.aiinbar{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:14px;
  padding:8px 8px 8px 14px;background:var(--bg-card)}
.aiinbar:focus-within{border-color:var(--primary);box-shadow:var(--focus)}
.aiinbar textarea{flex:1;border:none;outline:none;resize:none;background:transparent;
  font-family:var(--font-sans);font-size:var(--fs-4);line-height:24px;max-height:120px;padding:6px 0}
.aichip{border:1px solid var(--line);background:var(--bg-card);border-radius:99px;padding:7px 13px;
  font-size:var(--fs-2);font-weight:600;color:var(--text-2)}
.aichip:hover{border-color:var(--primary-200);background:var(--primary-50);color:var(--primary-active)}
.aichip.on{background:var(--pill-bg);color:var(--pill-fg);border-color:var(--pill-bg)}

.slidecard{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);
  border-radius:12px;position:relative;background:var(--bg-card)}
.slidenum{position:absolute;top:8px;right:10px;font-size:var(--fs-1);font-weight:800;color:var(--text-5)}
.slideico{width:30px;height:30px;border-radius:9px;background:var(--primary-50);color:var(--primary);
  display:grid;place-items:center;flex:none}

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

/* ============================================================
   HRIS MOBILE — pola aplikasi Talenta di HP
   ============================================================ */
.mhead{flex:none;display:flex;align-items:center;gap:var(--s2);padding:var(--s3);
  background:var(--primary);color:#fff}
.mback{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.mhtitle{font-size:var(--fs-5);font-weight:700;font-family:var(--font-display)}
.mhstep{font-size:var(--fs-2);opacity:.85}
.mhero{background:var(--primary);color:#fff;padding:var(--s5) var(--s3) 0;text-align:center}
.mclock{font-size:34px;line-height:42px;font-weight:800;font-family:var(--font-display);letter-spacing:-.03em}
.mcard{background:var(--bg-card);color:var(--text-1);border-radius:var(--r-xl);
  padding:var(--s4);margin:var(--s4) 0 0;box-shadow:var(--shadow-1);text-align:left}
.mhero .mcard{margin-bottom:-var(--s4);transform:translateY(var(--s4))}
.minfo{display:flex;align-items:center;gap:8px;background:var(--cyan-bg);color:var(--text-2);
  border-radius:var(--r-md);padding:9px 11px;font-size:var(--fs-2);line-height:var(--lh-2)}
.mrow{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line-soft);
  cursor:pointer;background:var(--bg-card)}
.mrow:last-child{border-bottom:none}
.mrow:active{background:var(--fill-1)}
.mtabs{flex:none;display:flex;background:var(--bg-card);border-bottom:1px solid var(--line)}
.mtabs button{flex:1;padding:13px 6px;font-size:var(--fs-3);font-weight:600;color:var(--text-3);
  border-bottom:2px solid transparent;display:flex;align-items:center;justify-content:center;gap:6px}
.mtabs button.on{color:var(--primary);border-color:var(--primary)}
.mselect{width:100%;height:44px;border:1px solid var(--line);border-radius:var(--r-lg);
  display:flex;align-items:center;gap:9px;padding:0 12px;background:var(--bg-card);
  font-size:var(--fs-4);color:var(--text-1)}
.mstat{background:var(--cyan-bg);border-radius:var(--r-xl);padding:var(--s4);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3) var(--s2)}
.mapp{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  font-size:var(--fs-1);line-height:var(--lh-1);color:var(--text-2)}
.mappico{width:44px;height:44px;border-radius:14px;color:#fff;display:grid;place-items:center;flex:none}
.mshift{border:1.5px solid var(--primary-200);border-radius:var(--r-xl);overflow:hidden;background:var(--primary-50)}
.mshead{background:var(--primary);color:#fff;padding:11px;text-align:center;
  font-size:var(--fs-3);font-weight:700}
.msbody{padding:var(--s4)}
.mclockbtns{display:flex;border:1.5px solid var(--primary-200);border-radius:var(--r-lg);
  background:var(--bg-card);overflow:hidden}
.mclockbtns button{flex:1;height:48px;display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:var(--fs-4);font-weight:700;color:var(--primary)}
.mclockbtns .div{width:1px;background:var(--line)}
.mbanner{display:flex;align-items:center;gap:var(--s3);background:var(--primary);
  border-radius:var(--r-xl);padding:var(--s4);color:#fff}
.mempty{text-align:center;padding:48px var(--s4)}
.membox{width:64px;height:64px;border-radius:20px;background:var(--fill-1);color:var(--text-4);
  display:grid;place-items:center;margin:0 auto var(--s3)}
.mbalance{border:1.5px solid var(--primary-200);border-radius:var(--r-xl);overflow:hidden}
.mbhead{background:var(--primary);color:#fff;padding:11px;text-align:center;font-size:var(--fs-3);font-weight:700}
.mbbody{background:var(--bg-card);padding:var(--s3) var(--s4)}
.mfab{position:fixed;right:var(--s4);bottom:76px;height:48px;padding:0 20px;border-radius:99px;
  background:var(--pill-bg);color:var(--pill-fg);display:flex;align-items:center;gap:8px;
  font-size:var(--fs-4);font-weight:700;box-shadow:var(--shadow-2);z-index:60}
.mscroll{display:flex;gap:var(--s4);overflow-x:auto;padding-bottom:4px}
.mscroll::-webkit-scrollbar{height:0}
.moff{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;width:72px;text-align:center}
.moff .sm{font-size:var(--fs-1);line-height:var(--lh-1);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.mmap{position:relative;height:340px;overflow:hidden}
.mmapinfo{position:absolute;left:var(--s3);right:var(--s3);bottom:var(--s3);background:var(--bg-card);
  border-radius:var(--r-lg);padding:10px 12px;display:flex;align-items:center;gap:8px;
  font-size:var(--fs-2);box-shadow:var(--shadow-1)}
.msheetmask{position:fixed;inset:0;background:rgba(26,29,33,.45);z-index:700}
.msheet{position:fixed;left:0;right:0;bottom:0;background:var(--bg-card);
  border-radius:18px 18px 0 0;z-index:701;padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom));
  max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-2)}
.msheet:before{content:"";display:block;width:38px;height:4px;border-radius:99px;
  background:var(--line);margin:10px auto 0}

/* ============================================================
   HR — komponen ala Talenta
   ============================================================ */
.alertbar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-lg);
  background:var(--yellow-bg);border:1px solid #F3E2B8;font-size:var(--fs-3);line-height:var(--lh-3)}
[data-theme="dark"] .alertbar{border-color:#4A3D1A}
.stackbar{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--fill-2)}
.stackbar span{display:block;height:100%}
.hrtab{padding:12px 0;margin-right:24px;font-size:var(--fs-3);font-weight:600;color:var(--text-3);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.hrtab:hover{color:var(--text-1)}
.hrtab.on{color:var(--primary);border-color:var(--primary)}
.quicklink{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 0;
  font-size:var(--fs-3);color:var(--text-2);line-height:var(--lh-3)}
.quicklink:hover{color:var(--primary)}
.quicklink .icon{color:var(--text-4);flex:none}
.quicklink:hover .icon{color:var(--primary)}

.profcard{width:250px;flex:none;background:var(--bg-card);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-width:0}
.profsec{padding:10px 12px;font-size:var(--fs-3);font-weight:700;color:var(--text-2);
  display:flex;align-items:center;justify-content:space-between;border-radius:var(--r-md);margin-top:4px}
.profsec.on{background:var(--sel);color:var(--sel-text)}
.profitem{display:block;width:100%;text-align:left;padding:8px 12px 8px 22px;border-radius:var(--r-md);
  font-size:var(--fs-3);color:var(--text-2);line-height:var(--lh-3)}
.profitem:hover{background:var(--fill-1)}
.profitem.on{background:var(--bg-card);color:var(--text-1);font-weight:700;
  box-shadow:0 0 0 1px var(--line);}
.datasec{display:grid;grid-template-columns:250px minmax(0,1fr) 70px;gap:var(--s5);
  padding:var(--s5) 0;border-bottom:1px solid var(--line-soft);align-items:start}
.drow{display:grid;grid-template-columns:230px minmax(0,1fr);gap:var(--s4);padding:7px 0}
.dlabel{font-size:var(--fs-3);color:var(--text-3)}
.dval{font-size:var(--fs-3);color:var(--text-1);font-weight:600}

.hrhome{display:grid;grid-template-columns:260px minmax(0,1fr) 280px;gap:var(--s3);
  margin-top:var(--s4);align-items:start}
@media (max-width:1400px){.hrhome{grid-template-columns:230px minmax(0,1fr) 250px}}
@media (max-width:1180px){.hrhome{grid-template-columns:minmax(0,1fr) 260px}
  .hrhome>.card:first-child{grid-column:1/-1}}
@media (max-width:900px){.hrhome{grid-template-columns:1fr}}
.orgwrap{display:flex;flex-wrap:wrap;gap:var(--s3);padding:var(--s3)}
.orgcard{width:230px;background:var(--bg-card);border:1px solid var(--line);border-top:3px solid #2D7FF9;
  border-radius:var(--r-md);padding:var(--s3)}

@media (max-width:1240px){.datasec{grid-template-columns:1fr;gap:var(--s2)}.drow{grid-template-columns:180px minmax(0,1fr)}}
@media (max-width:820px){.profcard{width:200px}.drow{grid-template-columns:1fr;gap:2px}}

/* ============================================================
   NOTES — daftar, kanvas coret-coret, sticky board
   ============================================================ */
.noterow{display:flex;gap:10px;padding:10px 9px;border-radius:var(--r-md);cursor:pointer;margin-bottom:2px;align-items:flex-start}
.noterow:hover{background:var(--fill-1)}
.noterow.on{background:var(--sel);box-shadow:inset 3px 0 0 var(--primary)}
.tico{width:24px;height:24px;border-radius:7px;color:#fff;display:grid;place-items:center;flex:none;margin-top:1px}
.ntitle{font-size:var(--fs-3);font-weight:700;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:var(--lh-3)}
.nprev{font-size:var(--fs-2);color:var(--text-4);line-height:var(--lh-2);margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.inkbar{flex:none;display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  padding:var(--s2) var(--s5);border-bottom:1px solid var(--line);background:var(--bg-card);color:var(--text-3)}
.inkbtn{min-width:28px;height:28px;padding:0 7px;border-radius:var(--r-sm);display:inline-flex;
  align-items:center;justify-content:center;font-size:var(--fs-3);color:var(--text-3)}
.inkbtn:hover{background:var(--fill-1);color:var(--text-1)}
.inkbtn.on{background:var(--sel);color:var(--sel-text)}
.inkbar .sep{width:1px;height:18px;background:var(--line);margin:0 5px}
.swatch{width:20px;height:20px;border-radius:50%;border:2px solid transparent;flex:none}
.swatch.on{border-color:var(--text-1);box-shadow:0 0 0 2px var(--bg-card) inset}

.canvaswrap{position:relative;height:100%;min-height:520px;
  background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:20px 20px}
#nCanvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none}
.canvashint{position:absolute;left:var(--s5);bottom:var(--s4);font-size:var(--fs-2);color:var(--text-5);pointer-events:none}

.board2{position:relative;height:100%;min-height:520px;
  background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:22px 22px}
.sticky{position:absolute;width:180px;min-height:130px;border-radius:4px;padding:8px 10px 10px;
  box-shadow:0 6px 16px rgba(26,29,33,.14);cursor:grab;display:flex;flex-direction:column;
  transform:rotate(-.6deg);color:#1A1D21}
.sticky:nth-child(even){transform:rotate(.8deg)}
.sticky textarea{flex:1;border:none;background:transparent;resize:none;outline:none;
  font-family:var(--font-sans);font-size:var(--fs-3);line-height:var(--lh-3);color:#1A1D21}
.sticky textarea::placeholder{color:rgba(26,29,33,.35)}
.sticky .dot{width:16px;height:16px;border-radius:50%;flex:none;cursor:pointer}
.sticky .x{width:18px;height:18px;border-radius:4px;display:grid;place-items:center;color:rgba(26,29,33,.45)}
.sticky .x:hover{background:rgba(26,29,33,.1);color:#1A1D21}

.notepage{max-width:760px;margin:0 auto;padding:var(--s6) var(--s5) 60px}
.noteedit{width:100%;min-height:440px;border:none;outline:none;resize:none;background:transparent;
  font-family:var(--font-sans);font-size:var(--fs-4);line-height:26px;color:var(--text-1)}
.checkrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft);
  font-size:var(--fs-4);cursor:pointer}
.checkrow .cb{width:19px;height:19px;border:1.8px solid var(--line);border-radius:6px;flex:none;
  display:grid;place-items:center;color:#fff;font-size:var(--fs-2);font-weight:700}
.checkrow .cb.on{background:var(--green);border-color:var(--green)}

@media (max-width:820px){#noteListCol{width:240px!important}}
@media (max-width:600px){#noteListCol{width:100%!important}.notepage{padding:var(--s4) var(--s3)}}

/* ============================================================
   APPROVAL — katalog aplikasi & formulir pengajuan
   ============================================================ */
.apprapp{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--bg-card);text-align:left;transition:.13s;min-height:58px}
.apprapp:hover{border-color:var(--primary-200);background:var(--primary-50)}
.apprapp .ico{width:30px;height:30px;border-radius:8px;color:#fff;display:grid;place-items:center;flex:none}
.apprapp .nm{font-size:var(--fs-3);font-weight:600;line-height:var(--lh-3);color:var(--text-1);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.formhd{flex:none;display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s5);
  background:var(--bg-card);border-bottom:1px solid var(--line)}
.itemblk{background:var(--fill-1);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:var(--s3);margin-bottom:var(--s3)}
.itemblk .inp{background:var(--bg-card)}
.itemblk a{cursor:pointer;font-size:var(--fs-2);margin-left:var(--s3)}
.unitsfx{height:var(--ctl-h);display:flex;align-items:center;padding:0 10px;flex:none;
  border:1px solid var(--line);border-left:none;border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--fill-2);color:var(--text-3);font-size:var(--fs-2);font-weight:600;white-space:nowrap}
.personchip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 8px 0 4px;
  border:1px solid var(--line);border-radius:99px;background:var(--bg-card);
  font-size:var(--fs-3);font-weight:600}
.personchip .step{width:18px;height:18px;border-radius:50%;background:var(--primary);color:#fff;
  font-size:var(--fs-1);font-weight:700;display:grid;place-items:center;flex:none}
.personchip button{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:var(--text-4)}
.personchip button:hover{background:var(--fill-2);color:var(--red)}
.addbtn{width:30px;height:30px;border-radius:50%;border:1px dashed var(--line);
  display:grid;place-items:center;color:var(--text-4)}
.addbtn:hover{border-color:var(--primary);color:var(--primary);border-style:solid}
@media (max-width:1024px){.apprapp .nm{-webkit-line-clamp:3}}

/* ============================================================
   CHAT — komponen ala Lark
   ============================================================ */
.chatrow{display:flex;align-items:center;gap:10px;padding:9px;border-radius:var(--r-md);cursor:pointer;margin-bottom:1px}
.chatrow:hover{background:var(--fill-1)}
.chatrow.on{background:var(--sel)}
.chatrow.on .cname{color:var(--sel-text)}
.cname{font-size:var(--fs-3);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-1)}
.cprev{font-size:var(--fs-2);color:var(--text-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.av .unread{position:absolute;top:-5px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--red);color:#fff;font-size:var(--fs-1);font-weight:700;line-height:17px;text-align:center;border:2px solid var(--bg-card)}

.chtab{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:99px;font-size:var(--fs-2);font-weight:600;color:var(--text-3)}
.chtab:hover{background:var(--fill-1)}
.chtab.on{background:var(--sel);color:var(--sel-text)}
.chtab.on .icon{color:var(--sel-bar)}

.cliptop{display:flex;align-items:center;gap:8px;padding:9px var(--s5);background:var(--primary-50);border-bottom:1px solid var(--primary-200)}

.msgrow{display:flex;gap:10px;padding:6px var(--s2);border-radius:var(--r-md);position:relative;align-items:flex-start;margin-bottom:2px}
.msgrow:hover{background:var(--fill-1)}
.msgrow.sel{background:var(--sel)}
.msgrow.me{flex-direction:row-reverse}
.msgrow.me .mbody{align-items:flex-end;display:flex;flex-direction:column}
.mbody{max-width:min(560px,72%);min-width:0}
.bubble{
  background:var(--fill-2);border-radius:var(--r-xl);border-top-left-radius:var(--r-sm);
  padding:9px 13px;font-size:var(--fs-4);line-height:var(--lh-4);color:var(--text-1);
  display:inline-block;margin-top:3px;word-break:break-word;
}
.msgrow.me .bubble{background:var(--primary-100);border-top-left-radius:var(--r-xl);border-top-right-radius:var(--r-sm)}
.reactchip{border:1px solid var(--line);background:var(--bg-card);border-radius:99px;height:24px;padding:0 8px;font-size:var(--fs-2);font-weight:600;color:var(--text-3);display:inline-flex;align-items:center;gap:4px}
.reactchip:hover{border-color:var(--primary-200);background:var(--primary-50);color:var(--sel-text)}
.threadbtn{display:inline-flex;align-items:center;gap:5px;margin-top:5px;font-size:var(--fs-2);font-weight:600;color:var(--primary-active);padding:3px 8px;border-radius:99px;background:var(--primary-50)}
.msgtools{
  position:absolute;top:-10px;right:12px;display:none;gap:1px;background:var(--bg-card);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:2px;z-index:6;
}
.msgrow:hover .msgtools{display:flex}
.msgtools button{width:26px;height:26px;border-radius:5px;display:grid;place-items:center;color:var(--text-3)}
.msgtools button:hover{background:var(--fill-1);color:var(--text-1)}
.cbox2{width:17px;height:17px;border:1.8px solid var(--text-4);border-radius:5px;flex:none;display:grid;place-items:center;color:#fff;font-size:var(--fs-1);margin-top:6px}
.cbox2.on{background:var(--primary);border-color:var(--primary)}
.multibar{display:flex;align-items:center;gap:8px;padding:9px var(--s5);background:var(--sel);border-bottom:1px solid var(--primary-200)}

.composer{flex:none;border-top:1px solid var(--line);padding:var(--s3) var(--s5) var(--s4);background:var(--bg-card)}
.replybar{display:flex;align-items:center;gap:9px;padding:8px 10px;background:var(--fill-1);border-radius:var(--r-md);margin-bottom:var(--s2)}
.richbar{display:flex;align-items:center;gap:2px;padding-bottom:var(--s2);margin-bottom:var(--s2);border-bottom:1px solid var(--line-soft);color:var(--text-3)}
.richbar button{min-width:28px;height:28px;padding:0 7px;border-radius:5px;font-size:var(--fs-3)}
.richbar button:hover{background:var(--fill-1);color:var(--text-1)}
.richbar .sep{width:1px;height:16px;background:var(--line);margin:0 5px}
.compin{
  border:none;outline:none;resize:none;background:transparent;font-family:inherit;
  font-size:var(--fs-4);line-height:var(--lh-4);min-height:40px;max-height:160px;padding:9px 0;color:var(--text-1);
}
.voicebtn{
  flex:none;height:38px;padding:0 12px;border-radius:var(--r-md);background:var(--fill-1);
  color:var(--text-4);font-size:var(--fs-2);display:flex;align-items:center;gap:6px;
}
.voicebtn:hover{background:var(--fill-2);color:var(--text-2)}
.voicebtn .kbd{border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:var(--fs-1);font-weight:700;background:var(--bg-card)}

@media (max-width:1240px){ #infoPanel,#threadPanel{display:none} }
@media (max-width:820px){ #chatListCol{width:240px!important} .mbody{max-width:82%} }
@media (max-width:600px){
  #chatListCol{width:100%!important}
  .msgrow .msgtools{display:none!important}
  .voicebtn .kbd{display:none}
}
.mini-cal{padding:0 12px 10px;flex:none}
.mc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;text-align:center}
.mc-h{font-size:11px;color:var(--text-4);line-height:22px;font-weight:700}
.mc-d{font-size:12px;line-height:24px;height:24px;border-radius:50%;cursor:pointer;position:relative}
.mc-d:hover{background:var(--fill-2)}
.mc-d.sel{background:var(--primary);color:#fff;font-weight:700}
.mc-d.has:after{content:"";position:absolute;bottom:1px;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;background:var(--primary)}
.mc-d.sel.has:after{background:var(--bg-card)}
.mc-o{font-size:12px;line-height:24px;height:24px;color:var(--text-5)}
.cal-chk{display:flex;align-items:center;gap:9px;padding:5px 4px;border-radius:var(--r-md);cursor:pointer;font-size:13px;color:var(--text-2)}
.cal-chk:hover{background:var(--fill-1)}
.cal-chk .cbox{width:15px;height:15px;border-radius:4px;border:1.8px solid var(--text-4);flex:none;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700}
.cal-chk .cal-more{opacity:0;color:var(--text-4)}
.cal-chk:hover .cal-more{opacity:1}

/* Gantt Velox */
.gantt-row{display:flex;align-items:center;height:34px;border-bottom:1px solid var(--line-soft)}
.gantt-name{width:280px;flex:none;padding:0 10px;display:flex;align-items:center;gap:7px;overflow:hidden}
.gantt-track{flex:1;position:relative;height:100%}
.gbar{position:absolute;top:8px;height:18px;border-radius:5px;cursor:pointer;display:flex;align-items:center;padding:0 7px;font-size:11px;font-weight:700;color:#fff;overflow:hidden;white-space:nowrap}
.gbar .fill{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.28);border-radius:5px}
.gbase{position:absolute;top:27px;height:3px;border-radius:99px;background:var(--text-5);opacity:.55}
.gms{position:absolute;top:6px;width:14px;height:14px;background:var(--surface-dark);transform:rotate(45deg);border-radius:2px}
.gantt-head{display:flex;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg-card);z-index:5}
.gcell{flex:1;text-align:center;padding:6px 0;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-4);border-left:1px solid var(--line-soft)}
.gtoday{position:absolute;top:0;bottom:0;width:2px;background:var(--red);z-index:4}
.bars{display:flex;align-items:flex-end;gap:5px;height:110px}
.bars .bar{flex:1;background:var(--primary-100);border-radius:4px 4px 0 0;position:relative;min-height:3px}
.bars .bar.hi{background:var(--primary)}
.hbar{height:8px;border-radius:99px;background:var(--fill-2);overflow:hidden;flex:1}
.hbar span{display:block;height:100%;border-radius:99px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}