/* ============================================================================
   AksesKerja prototype — component styles (consumes tokens.css)
   ============================================================================ */

/* ===================== APP SHELL / PERSONA SWITCH ===================== */
/* Reduced-motion: honor the OS setting — strip entrance animations & transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
#root, .app { height:100%; }
.app { display:flex; flex-direction:column; }
.persona-bar { height:44px; background:var(--brand-charcoal); display:flex; align-items:center; justify-content:center;
  gap:6px; flex:none; z-index:60; box-shadow:0 1px 0 rgba(0,0,0,.2); }
.persona-bar .lbl { color:var(--ink-400); font-size:var(--label-sm-size); font-weight:700; margin-right:var(--space-2); letter-spacing:.02em; }
.pswitch { display:inline-flex; gap:3px; background:rgba(255,255,255,.08); padding:3px; border-radius:var(--radius-btn); }
.pswitch button { border:none; background:transparent; color:var(--ink-300); padding:6px var(--space-4); border-radius:var(--radius);
  font-size:var(--label-md-size); font-weight:700; display:inline-flex; align-items:center; gap:7px; transition:all .15s; }
.pswitch button.on { background:#fff; color:var(--brand-charcoal); }
.pswitch button:not(.on):hover { color:#fff; }
.persona-bar .hint { position:absolute; right:16px; color:var(--ink-500); font-size:var(--eyebrow-size); font-weight:600;
  display:flex; align-items:center; gap:5px; }
.stage-host { flex:1; min-height:0; overflow:hidden; }

/* ===================== EMPLOYER NAV RAIL ===================== */
.erail { width:248px; flex:none; background:#fff; border-right:1px solid var(--border); display:flex; flex-direction:column;
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; transition:width .2s ease; }
.erail-collapsed { flex:0 0 64px; width:64px; }
.erail-collapsed .nav-item { justify-content:center; padding:11px 0; }
.erail-collapsed .nav-item .badge { display:none; }
.erail-collapsed .brand { justify-content:center; padding:var(--space-4) 0; }
.rail-collapse-btn { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-4); border:none; background:transparent;
  border-top:1px solid var(--border); color:var(--ink-400); font-size:var(--label-md-size); font-weight:700;
  cursor:pointer; width:100%; transition:all .15s; }
.rail-collapse-btn:hover { color:var(--brand-blue); background:var(--bg-tinted); }
.erail-collapsed .rail-collapse-btn { justify-content:center; padding:var(--space-3) 0; }
.badge-dot { position:absolute; top:4px; right:4px; min-width:8px; height:8px; font-size:0; padding:0; border-radius:9999px; }
.erail .brand { display:flex; align-items:center; gap:10px; padding:6px var(--space-2) var(--space-4); }
.erail .brand img { height:32px; }
.wm { font-size:var(--body-lg-size); font-weight:300; letter-spacing:.06em; color:#fff; }
.wm b { font-weight:800; }
.wm.dark { color:var(--brand-navy); }
.nav-group { display:flex; flex-direction:column; gap:2px; }
.nav-item { display:flex; align-items:center; gap:var(--space-3); padding:11px 14px; border-radius:0; border:none;
  background:transparent; color:var(--ink-600); font-size:var(--body-md-size); font-weight:700; text-align:left; position:relative; transition:all .15s; }
.nav-item:hover { background:var(--surface-muted); color:var(--brand-blue); }
.nav-item.active { background:var(--brand-blue-light); color:var(--brand-blue); }
.nav-item.active::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:0; background:var(--brand-blue); }
.nav-item .material-symbols-outlined { font-size:var(--headline-md-size); }
.nav-item .badge { margin-left:auto; background:var(--surface-muted); color:var(--ink-500); font-size:var(--eyebrow-size); font-weight:800;
  padding:2px var(--space-2); border-radius:9999px; min-width:20px; text-align:center; }
.nav-item.active .badge { background:var(--brand-blue-light); color:var(--t-accent); }

.token-card { display:flex; flex-direction:column; padding:var(--space-4) 18px; border:1px solid var(--border); border-radius:var(--radius-md);
  cursor:pointer; transition:all .15s; margin:0 var(--space-3) var(--space-3); }
.token-card:hover { border-color:var(--ink-300); box-shadow:var(--shadow-sm); }
.tic { width:38px; height:38px; border-radius:11px; background:var(--warning-soft); color:var(--warning-ink); display:flex;
  align-items:center; justify-content:center; flex:none; }
.tic.lg { width:48px; height:48px; border-radius:14px; }
.topup { border:none; background:var(--brand-blue-light); color:var(--t-accent); font-size:var(--label-sm-size); font-weight:800;
  padding:7px var(--space-3); border-radius:var(--radius-btn); }
.topup:hover { background:#DBEAFE; }

.upsell { background:var(--brand-blue); border-radius:var(--radius-md);
  padding:18px var(--space-4); color:#fff; margin:0 var(--space-3) var(--space-3); }
.upsell button { width:100%; border:none; background:#fff; color:var(--brand-blue); font-size:var(--label-md-size); font-weight:800;
  padding:9px; border-radius:var(--radius-btn); transition:all .15s; }
.upsell button:hover { background:var(--brand-blue-light); }
.procard { display:flex; align-items:center; gap:10px; background:var(--brand-navy); border-radius:var(--radius-md); padding:13px 14px; color:#fff; margin:0 var(--space-3) var(--space-3); }

/* Filter panel */
.filter-panel { background:var(--bg-tinted); border:1.5px solid rgba(37,99,235,.15); border-radius:var(--radius-card);
  padding:var(--space-4); margin-top:10px; }

/* ===================== CONTENT FRAME ===================== */
.phead { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-6); padding:var(--space-6) var(--space-10) var(--space-5);
  border-bottom:1px solid var(--border); background:rgba(255,255,255,.7); backdrop-filter:blur(8px); flex:none; flex-wrap:wrap; }
.phead > * { min-width:0; }
.scrollarea { flex:1; overflow-y:auto; padding:var(--space-6) var(--space-8) 48px;
  container-type:inline-size; container-name:page; }
.center-col { max-width:1040px; margin:0 auto; }
.page-sub { font-size:var(--body-md-size); font-weight:600; color:var(--ink-500); line-height:1.5; margin-top:var(--space-1); }
.dash-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); }

.job-row { display:flex; align-items:center; gap:14px; padding:14px var(--space-5); border:none; border-top:1px solid var(--border-soft);
  background:#fff; width:100%; text-align:left; transition:background .15s; }
.job-row:hover { background:var(--surface-muted); }
.job-logo { width:42px; height:42px; border-radius:12px; background:var(--brand-blue-light); color:var(--t-accent);
  display:flex; align-items:center; justify-content:center; flex:none; }
.job-logo.lg { width:52px; height:52px; border-radius:14px; }
.quick-row { display:flex; align-items:center; gap:var(--space-3); width:100%; padding:var(--space-3) 14px; border:1px solid var(--border-soft);
  border-radius:var(--radius-md); background:#fff; font-size:var(--body-md-size); font-weight:700; color:var(--ink-700); margin-bottom:var(--space-2); transition:all .15s; text-align:left; }
.quick-row:hover { border-color:var(--brand-blue); background:var(--bg-tinted); }

.jobcard { padding:var(--space-5); cursor:pointer; transition:all .15s; }
.jobcard:hover { border-color:var(--ink-300); box-shadow:var(--shadow-md); transform:translateY(-2px); }

/* ===================== WORKSPACE HEAD + TABS ===================== */
.whead { padding:0 var(--space-8); border-bottom:1px solid var(--border); background:rgba(255,255,255,.8);
  backdrop-filter:blur(8px); flex:none; display:flex; align-items:flex-end; gap:var(--space-6); flex-wrap:wrap; }
.whead-title { flex:1 1 260px; min-width:0; display:flex; align-items:center; gap:10px; padding:11px 0 12px; }
.whead-meta { font-size:var(--label-md-size); font-weight:600; color:var(--ink-500); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; min-width:0; }
.whead-tools { display:flex; align-items:center; gap:var(--space-2); padding-bottom:9px; flex-shrink:0; }
/* Lokasi/tipe/divisi mengalah lebih dulu: judul lowongan yang harus terbaca. */
@media (max-width:1180px){ .whead-meta { display:none; } }
.wtabs { display:flex; gap:var(--space-1); align-items:flex-end; margin-bottom:-1px; }
.wtab { display:flex; align-items:center; gap:var(--space-2); padding:11px 16px; border:none; background:transparent; white-space:nowrap;
  font-size:var(--body-md-size); font-weight:700; color:var(--ink-500); border-bottom:2.5px solid transparent; transition:all .15s; }
.wtab:hover { color:var(--brand-blue); }
.wtab.on { color:var(--t-accent); border-bottom-color:var(--t-accent); }
.wtab .tcount { background:var(--surface-muted); color:var(--ink-500); font-size:var(--eyebrow-size); font-weight:800; padding:2px 7px; border-radius:9999px; }
.wtab.on .tcount { background:var(--brand-blue-light); color:var(--t-accent); }

/* ===================== PIPELINE BUILDER ===================== */
.builder-grid { display:grid; grid-template-columns:1fr 320px; gap:var(--space-6); align-items:start; }
.builder-grid p { font-size:var(--body-md-size); color:var(--ink-500); font-weight:600; }
.stagelist { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.stagerow { display:flex; align-items:center; gap:13px; padding:var(--t-row-pad) var(--space-4); background:#fff; border:1px solid var(--border);
  border-radius:var(--radius-md); cursor:pointer; transition:all .15s; }
.stagerow:hover { border-color:var(--ink-300); box-shadow:var(--shadow-sm); }
.stagerow.dragging { opacity:.4; }
.stagerow.dropover { border-color:var(--brand-blue); box-shadow:0 0 0 2px rgba(37,99,235,.18); }
.stagerow.gated { background:var(--bg-tinted-2); border-style:dashed; border-color:#BFD3F5; }
.stagerow .drag { color:var(--ink-300); }
.sdot { width:12px; height:12px; border-radius:9999px; flex:none; display:inline-flex; align-items:center; justify-content:center; }
.sname { font-size:var(--body-md-size); font-weight:800; color:var(--ink-900); }
.ssub { font-size:var(--label-md-size); color:var(--ink-500); font-weight:600; margin-top:2px; }
.sautos { gap:5px; }
.autopill { width:26px; height:26px; border-radius:8px; background:var(--surface-muted); color:var(--ink-500);
  display:flex; align-items:center; justify-content:center; }
.icobtn.sm { width:32px; height:32px; }
.icobtn.sm .material-symbols-outlined { font-size:var(--body-lg-size); }
.addstage { display:flex; align-items:center; justify-content:center; gap:var(--space-2); width:100%; margin-top:var(--space-3); padding:13px;
  border:1.5px dashed var(--border); border-radius:var(--radius-md); background:transparent; color:var(--ink-500);
  font-size:var(--body-md-size); font-weight:700; transition:all .15s; }
.addstage:hover { border-color:var(--brand-blue); color:var(--brand-blue); background:var(--bg-tinted); }

.preset-row { display:flex; align-items:center; gap:10px; width:100%; padding:var(--space-3); border:1px solid var(--border-soft);
  border-radius:var(--radius-md); background:#fff; margin-bottom:var(--space-2); transition:all .15s; text-align:left; }
.preset-row:hover { border-color:var(--brand-blue); background:var(--bg-tinted); }

/* stage editor */
.swatch { width:34px; height:34px; border-radius:9999px; border:2px solid #fff; box-shadow:0 0 0 1px var(--border);
  display:flex; align-items:center; justify-content:center; transition:transform .12s; }
.swatch:hover { transform:scale(1.12); }
.swatch.on { box-shadow:0 0 0 2px #fff, 0 0 0 4px currentColor; }
.auto-opt { display:flex; align-items:center; gap:var(--space-3); padding:11px 13px; border:1px solid var(--border); border-radius:var(--radius-md);
  cursor:pointer; transition:all .15s; }
.auto-opt:hover { border-color:var(--ink-300); }
.auto-opt.on { border-color:var(--brand-blue); background:var(--bg-tinted); }
.auto-opt.gated { background:var(--bg-tinted-2); border-style:dashed; }
.auto-ic { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; transition:all .15s; }
.mini-toggle { width:22px; height:22px; border-radius:9999px; border:2px solid var(--border); flex:none; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.mini-toggle.on { background:var(--t-accent); border-color:var(--t-accent); }

/* ===================== KANBAN ===================== */
.kanban-wrap { flex:1; overflow:auto; padding:var(--space-6) var(--space-8); }
.kanban { display:flex; gap:var(--space-4); min-height:100%; align-items:flex-start; }
.kcol { width:288px; flex:none; background:var(--surface-muted); border:1px solid var(--border); border-radius:var(--radius-md);
  display:flex; flex-direction:column; max-height:100%; transition:all .15s; }
.kcol.over { background:var(--bg-tinted); border-color:var(--brand-blue); box-shadow:0 0 0 2px rgba(37,99,235,.15); }
.kcol-head { display:flex; align-items:center; gap:var(--space-2); padding:14px var(--space-4); border-bottom:1px solid var(--border); }
.kname { font-size:var(--body-md-size); font-weight:800; color:var(--ink-800); }
.kcount { background:#fff; border:1px solid var(--border); color:var(--ink-500); font-size:var(--eyebrow-size); font-weight:800;
  padding:1px var(--space-2); border-radius:9999px; }
.kcol-body { padding:var(--space-3); display:flex; flex-direction:column; gap:10px; overflow-y:auto; min-height:80px; }
.kcard { background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); padding:13px; cursor:grab;
  transition:all .15s; box-shadow:var(--shadow-sm); }
.kcard:hover { border-color:var(--ink-300); box-shadow:var(--shadow-md); }
.kcard.dragging { opacity:.4; cursor:grabbing; }
.kcard.ghost { cursor:default; box-shadow:none; }
.kc-name { font-size:var(--body-md-size); font-weight:800; color:var(--ink-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kc-role { font-size:var(--label-sm-size); font-weight:600; color:var(--ink-500); }
.kc-skill { font-size:var(--eyebrow-size); font-weight:700; color:var(--ink-600); background:var(--surface-muted); border:1px solid var(--border);
  padding:2px var(--space-2); border-radius:9999px; }
/* job-card skill tag — squared, no icon, to contrast with the rounded meta pills */
.job-skill { display:inline-flex; align-items:center; font-size:var(--eyebrow-size); font-weight:700; color:var(--ink-600);
  background:#fff; border:1px solid var(--border); padding:3px 9px; border-radius:5px; letter-spacing:.01em; }
.kempty { text-align:center; padding:22px 10px; font-size:var(--label-md-size); font-weight:600; color:var(--ink-400); border:1.5px dashed var(--border); border-radius:var(--radius); }
.kcol.add { background:transparent; border:1.5px dashed var(--border); align-items:center; justify-content:center; padding:30px 18px;
  color:var(--ink-400); font-size:var(--label-md-size); font-weight:700; cursor:pointer; flex-direction:column; gap:var(--space-2); min-height:160px; transition:all .15s; }
.kcol.add:hover { border-color:var(--brand-blue); color:var(--brand-blue); }
.klock { position:relative; }
.teaser-stack { display:flex; flex-direction:column; gap:10px; filter:blur(3px); opacity:.55; pointer-events:none; }
.klock-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  background:rgba(248,250,252,.55); backdrop-filter:blur(2px); border-radius:var(--radius); padding:var(--space-4); }

/* ===================== SCREENING ===================== */
.screen-split { flex:1; display:flex; overflow:hidden; }
.clist-col { width:340px; flex:none; border-right:1px solid var(--border); display:flex; flex-direction:column; background:#fff; }
.clist-head { padding:14px; border-bottom:1px solid var(--border); }
.ai-toggle { display:flex; align-items:center; gap:10px; padding:10px 13px; border-radius:var(--radius-md);
  background:var(--bg-tinted); border:1px solid rgba(37,99,235,.14); }
.clist { flex:1; overflow-y:auto; padding:var(--space-3); display:flex; flex-direction:column; gap:9px; }
.ccard { width:100%; text-align:left; background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
  padding:13px; transition:all .15s; }
.ccard:hover { border-color:var(--ink-300); box-shadow:var(--shadow-sm); }
.ccard.sel { border-color:var(--brand-blue); box-shadow:0 0 0 1px var(--brand-blue); }

.dossier { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0;
  container-type:inline-size; container-name:dossier; }
.dhead { display:flex; align-items:center; gap:var(--space-4); padding:22px 28px; border-bottom:1px solid var(--border); background:#fff; }
.dtabs-wrap { flex:none; display:flex; align-items:stretch; background:#fff;
  border-bottom:1px solid var(--border); }
.dtabs-scroll { position:relative; flex:1 1 auto; min-width:0; }
.dtabs-scroll::after { content:''; position:absolute; top:0; right:0; bottom:0; width:34px; pointer-events:none;
  background:linear-gradient(to right, rgba(255,255,255,0), #fff 72%); }
.dtabs { display:flex; gap:var(--space-1); padding:0 28px; background:#fff; overflow-x:auto; scrollbar-width:none; }
.dtabs::-webkit-scrollbar { display:none; }
.dtab { flex:none; }
.dtab { display:flex; align-items:center; gap:7px; padding:13px var(--space-4); border:none; background:transparent; font-size:var(--body-md-size);
  font-weight:700; color:var(--ink-500); white-space:nowrap; border-bottom:2.5px solid transparent; transition:all .15s; }
.dtab:hover { color:var(--brand-blue); }
.dtab.on { color:var(--t-accent); border-bottom-color:var(--t-accent); }
/* "unused" bukan "mati": tahap ini tidak memakai fitur itu, tapi tabnya tetap
   bisa dibuka untuk membaca sebabnya. Warna ink-500 (4.76:1) memenuhi 1.4.3
   karena tombolnya memang aktif — ink-400 hanya boleh untuk kontrol mati.
   Gembok tinggal penanda tenang, bukan larangan. */
.dtab.unused { color:var(--ink-500); }
.dtab.unused:hover { color:var(--brand-blue); }
/* Keadaan terbuka menang atas keadaan "tidak dipakai": sistem desain menetapkan
   teks biru sebagai penanda tab aktif. */
.dtab.on.unused { color:var(--t-accent); }
.dtab.unused .material-symbols-outlined { color:var(--ink-400); }

/* settings horizontal tabs */
.set-tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; }
.set-tabs::-webkit-scrollbar { display:none; }
.set-tab { flex:none; }
.set-tab { display:inline-flex; align-items:center; gap:7px; padding:11px var(--space-4); background:none; border:none;
  border-bottom:2px solid transparent; margin-bottom:-1px; font-size:var(--body-md-size); font-weight:700; color:var(--ink-500);
  cursor:pointer; transition:color .15s, border-color .15s; white-space:nowrap; }
.set-tab:hover { color:var(--ink-800); }
.set-tab.on { color:var(--brand-blue); border-bottom-color:var(--brand-blue); }
.dbody { flex:1; overflow-y:auto; padding:var(--space-6) 28px; background:var(--bg-app); display:flex; flex-direction:column; }
.dsplit { display:grid; grid-template-columns:1fr 300px; gap:var(--space-5); align-items:start; }
.dsplit aside { display:flex; flex-direction:column; gap:14px; }
.panel { background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); padding:22px; margin-bottom:var(--space-4); }
.panel h3 { font-size:var(--body-lg-size); font-weight:800; color:var(--ink-800); }
.panel table { width:100%; border-collapse:collapse; font-size:var(--body-md-size); }
.panel th { text-align:left; font-size:var(--eyebrow-size); font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-400);
  padding:var(--space-2) 10px; border-bottom:1px solid var(--border); }
.panel td { padding:11px 10px; border-bottom:1px solid var(--border-soft); font-weight:700; color:var(--ink-800); }
.panel td.req { font-weight:600; color:var(--ink-500); }
.gap { display:inline-flex; align-items:center; gap:var(--space-1); font-size:var(--label-sm-size); font-weight:800; padding:3px 9px; border-radius:9999px; }
.gap.ok { background:var(--success-soft); color:var(--success-ink); }
.gap.warn { background:var(--warning-soft); color:var(--warning-ink); }
.kv-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-1) var(--space-6); }
.rail-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); padding:18px; }
.rail-card h4 { font-size:var(--eyebrow-size); font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-400); margin-bottom:var(--space-3); }
.cvbtn { display:flex; align-items:center; justify-content:center; gap:var(--space-2); width:100%; padding:11px; border:1px solid var(--border);
  border-radius:var(--radius-btn); background:#fff; font-size:var(--label-md-size); font-weight:800; color:var(--ink-700); transition:all .15s; }
.cvbtn:hover { border-color:var(--brand-blue); color:var(--brand-blue); background:var(--bg-tinted); }

/* ===================== WIZARD ===================== */
.wiz-steps { display:flex; align-items:center; gap:var(--space-2); padding:18px var(--space-8); background:rgba(255,255,255,.7); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border); flex:none; }
.wiz-step { display:flex; align-items:center; gap:10px; padding:6px 6px; border:none; background:transparent;
  font-size:var(--body-md-size); font-weight:800; color:var(--ink-400); transition:all .15s; }
.wiz-step.on { color:var(--t-accent); }
.wiz-step.done { color:var(--success-ink); cursor:pointer; }
.wiz-num { width:28px; height:28px; border-radius:9999px; background:var(--surface-muted); color:var(--ink-400);
  display:flex; align-items:center; justify-content:center; font-size:var(--body-md-size); font-weight:800; flex:none; transition:all .15s; }
.wiz-step.on .wiz-num { background:var(--t-accent); color:#fff; }
.wiz-step.done .wiz-num { background:var(--success); color:#fff; }
.wiz-line { flex:1; max-width:60px; height:2px; background:var(--border); border-radius:9999px; }
.wiz-line.done { background:var(--success); }
.wiz-card { max-width:760px; margin:0 auto; padding:30px var(--space-8); }
.wiz-scroll { padding:0 !important; }
.wiz-body { max-width:824px; margin:0 auto; }
/* Single-page (Form Tunggal): two-pane — form left, live preview docked right */
.wiz-body-wide { max-width:1320px; }
.wiz-split { display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:var(--space-6); align-items:start; }
.wiz-split .wiz-card { max-width:none; margin:0; }
.wiz-preview-inner { position:sticky; top:var(--space-6); }
.wiz-preview .preview-frame { width:100%; max-width:none; }
@media (max-width:1120px) {
  .wiz-body-wide { max-width:824px; }
  .wiz-split { grid-template-columns:1fr; }
  .wiz-preview { display:none; }
}
.wiz-card p { font-size:var(--body-md-size); color:var(--ink-500); font-weight:600; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4) 18px; }
.wiz-foot { display:flex; align-items:center; gap:14px; padding:var(--space-4) var(--space-8); border-top:1px solid var(--border); background:#fff; flex:none; }
.preset-card { text-align:left; background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); padding:18px; cursor:pointer; height:100%; }
.preset-card:hover { border-color:var(--ink-300); box-shadow:var(--shadow-sm); }
.preset-card.on { border:2px solid var(--brand-blue); background:var(--bg-tinted); padding:17px; }
/* Curated (Akses Kerja) templates — official seal + brand icon, no extra border accent */
.preset-card.curated { }
.preset-card.curated.on { }
.tip-info { display:inline-flex; align-items:center; cursor:help; }
.tip-info:hover .material-symbols-outlined { color:var(--brand-blue) !important; }

/* device preview */
.preview-stage { background:var(--surface-muted); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-8);
  display:flex; justify-content:center; min-height:480px; }
.preview-frame { background:#fff; border-radius:var(--radius-card); box-shadow:var(--shadow-lg); transition:all .3s; overflow:hidden; }
.preview-frame.desktop { width:100%; max-width:680px; }
.preview-frame.mobile { width:360px; border:9px solid var(--brand-charcoal); border-radius:34px; }
.jp { padding:var(--space-6); }
.preview-frame.mobile .jp { padding:18px; }
/* Job preview mirrored from marketplace JobDetail (tinted head + body + apply bar) */
.jp-detail { display:flex; flex-direction:column; }
.jp-top { padding:20px var(--space-5); background:var(--bg-tinted); border-bottom:1px solid var(--border-soft); }
.jp-body { padding:var(--space-5); }
.jp-applybar { display:flex; align-items:center; gap:10px; padding:var(--space-3) var(--space-5);
  border-top:1px solid var(--border); background:rgba(255,255,255,.92); backdrop-filter:blur(10px); position:sticky; bottom:0; }
.preview-frame.mobile .jp-top { padding:16px 18px; }
.preview-frame.mobile .jp-body { padding:18px; }
.preview-frame.mobile .jp-applybar { padding:12px 18px; }

/* ===================== MONETIZATION ===================== */
.pack { position:relative; background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-card); padding:var(--space-6) var(--space-5);
  text-align:center; transition:all .15s; }
.pack:hover { border-color:var(--ink-300); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.pack.on { border-color:var(--brand-blue); box-shadow:0 0 0 1px var(--brand-blue); background:var(--bg-tinted); }
.pack-badge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--brand-teal); color:#fff;
  font-size:var(--eyebrow-size); font-weight:900; padding:var(--space-1) var(--space-3); border-radius:9999px; white-space:nowrap; }
.plan { position:relative; background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:28px; }
.plan.pro { border-color:var(--brand-blue); box-shadow:var(--shadow-lg); }
.plan-badge { position:absolute; top:-13px; left:28px; background:var(--brand-blue); color:#fff; font-size:var(--label-sm-size); font-weight:800;
  padding:5px 14px; border-radius:9999px; }
.checkout-grid { display:grid; grid-template-columns:1fr 380px; gap:var(--space-6); align-items:start; max-width:980px; margin:0 auto; }
.pay-grid { display:flex; flex-direction:column; gap:9px; }
.pay { display:flex; align-items:center; gap:13px; padding:13px 15px; border:1.5px solid var(--border); border-radius:var(--radius-md);
  background:#fff; transition:all .15s; }
.pay:hover { border-color:var(--ink-300); }
.pay.on { border-color:var(--brand-blue); background:var(--bg-tinted); }
.pay-logo { width:54px; height:34px; border-radius:7px; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:var(--eyebrow-size); font-weight:900; flex:none; letter-spacing:.02em; }
.radio { width:22px; height:22px; border-radius:9999px; border:2px solid var(--border); flex:none; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.radio.on { background:var(--brand-blue); border-color:var(--brand-blue); }

/* ===================== JOBSEEKER ===================== */
.stopbar { height:64px; flex:none; background:rgba(255,255,255,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; padding:0 28px; gap:var(--space-5); z-index:40; }
.stab { display:flex; align-items:center; gap:var(--space-2); padding:9px var(--space-4); border:none; background:transparent; border-radius:9999px;
  font-size:var(--body-md-size); font-weight:700; color:var(--ink-600); transition:all .15s; }
.stab:hover { background:var(--surface-muted); color:var(--brand-blue); }
.stab.on { background:var(--brand-blue-light); color:var(--t-accent); }
.stab-badge { background:var(--t-accent); color:#fff; font-size:var(--eyebrow-size); font-weight:800; padding:1px 7px; border-radius:9999px; }
/* responsive top bar — degrade gracefully on narrow widths */
@media (max-width:1120px){ .stopbar .wm { display:none; } }
@media (max-width:1000px){ .stopbar-userinfo { display:none; } }
@media (max-width:900px){
  .stopbar { padding:0 14px; gap:var(--space-2); }
  .stab { padding:9px 11px; gap:0; }
  .stab-label { display:none; }
}
.mkt-hero { background:var(--brand-blue); padding:36px 28px 30px; flex:none; }
.mkt-hero-inner { max-width:1040px; margin:0 auto; }
.mkt-search { display:flex; gap:var(--space-3); margin-top:22px; }
.mkt-search .search input { background:#fff; border-color:#fff; padding-top:14px; padding-bottom:14px; }
.mkt-card { padding:18px; cursor:pointer; transition:all .15s; }
.mkt-card:hover { border-color:var(--ink-300); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.ci { width:46px; height:46px; border-radius:12px; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:var(--body-lg-size); font-weight:800; flex:none; }
.ci.lg { width:60px; height:60px; border-radius:15px; font-size:var(--headline-md-size); }
.mkt-match { display:flex; flex-direction:column; align-items:center; flex:none; }
.mkt-match.lg { align-items:center; }
.detail-top { padding:28px; background:var(--bg-tinted); border-bottom:1px solid var(--border-soft); }
.apply-bar { padding:var(--space-4) 28px; border-top:1px solid var(--border); background:rgba(255,255,255,.9); backdrop-filter:blur(10px); flex:none; }
.success-pop { width:72px; height:72px; border-radius:9999px; background:var(--success); display:flex; align-items:center; justify-content:center;
  margin:0 auto; animation:popscale .4s cubic-bezier(.2,1.3,.4,1); }
@keyframes popscale { from{ transform:scale(0); opacity:0; } }

/* ===================== TRACKER ===================== */
.track { overflow:hidden; transition:all .2s; }
.track-head { display:flex; align-items:center; gap:14px; width:100%; padding:18px var(--space-5); border:none; background:#fff; text-align:left; transition:background .15s; }
.track-head:hover { background:var(--surface-muted); }
.track.open .track-head { border-bottom:1px solid var(--border-soft); }
.track-body { padding:22px var(--space-6); }
.track-steps { display:flex; align-items:flex-start; position:relative; }
.tstep { flex:1; display:flex; flex-direction:column; align-items:center; position:relative; gap:var(--space-2); }
.tstep-dot { width:30px; height:30px; border-radius:9999px; display:flex; align-items:center; justify-content:center; z-index:2; transition:all .2s; }
.tstep-label { font-size:var(--eyebrow-size); font-weight:700; color:var(--ink-500); text-align:center; max-width:80px; line-height:1.25; }
.tstep.current .tstep-label { color:var(--ink-900); font-weight:800; }
.tstep.done .tstep-label { color:var(--ink-700); }
.tstep-line { position:absolute; top:15px; left:50%; width:100%; height:2.5px; background:var(--border); z-index:1; }
.tstep-line.done { background:var(--success); }
.pulse-dot { width:11px; height:11px; border-radius:9999px; background:#fff; animation:pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.5; transform:scale(.7); } }
.livedot { width:6px; height:6px; border-radius:9999px; background:var(--brand-teal); display:inline-block; animation:pulse 1.4s infinite; }
.link-note { display:flex; gap:9px; align-items:flex-start; margin-top:var(--space-4); padding:11px 14px; background:rgba(0,128,128,.06);
  border:1px dashed rgba(0,128,128,.3); border-radius:var(--radius-md); font-size:var(--label-md-size); font-weight:600; color:var(--ink-600); line-height:1.5; }

/* ===================== MISC ===================== */
.spin { width:15px; height:15px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:9999px;
  display:inline-block; animation:spin .7s linear infinite; }
.btn-soft .spin, .btn-outline .spin { border-color:rgba(37,99,235,.3); border-top-color:var(--brand-blue); }
@keyframes spin { to{ transform:rotate(360deg); } }

.stagecard { background:#fff; border:1px solid var(--border); border-radius:var(--radius-card);
  margin-bottom:var(--space-2); overflow:visible; transition:border-color .15s, box-shadow .15s; }
.stagecard:hover { box-shadow:var(--shadow-sm); border-color:var(--ink-300); }
.stagecard.expanded { border-color:var(--brand-blue); box-shadow:0 0 0 2px rgba(37,99,235,.08); }
.stagecard.gated { background:rgba(37,99,235,.025); border:1.5px dashed rgba(37,99,235,.3); }
.stagecard.dragging { opacity:.5; }
.stagecard-head { display:flex; align-items:center; gap:10px; padding:13px var(--space-4); cursor:pointer; user-select:none; border-radius:var(--radius-card); }
.stagecard-head:hover { background:var(--bg-tinted); }
.stagecard.expanded .stagecard-head { background:var(--bg-tinted); border-bottom:1px solid var(--border); border-radius:var(--radius-card) var(--radius-card) 0 0; }
.stagecard-body { padding:22px 22px 22px; background:#fff; border-radius:0 0 var(--radius-card) var(--radius-card); }
.stage-dot { width:12px; height:12px; border-radius:9999px; flex:none; display:inline-block; }
.step-badge { font-size:var(--eyebrow-size); font-weight:800; letter-spacing:.05em; color:var(--ink-400); white-space:nowrap; flex:none; }
.pipe-header { display:flex; align-items:center; gap:14px; padding:var(--space-6) var(--space-10) var(--space-5); border-bottom:1px solid var(--border); background:#fff; }

/* Automation dropdown */
.auto-dropdown { position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--border);
  border-radius:var(--radius-card); box-shadow:var(--shadow-md); z-index:50; min-width:296px; padding:6px; }
.auto-dropdown-item { display:flex; align-items:center; gap:10px; width:100%; padding:9px var(--space-3); white-space:nowrap;
  border:none; background:transparent; border-radius:var(--radius-md); font-size:var(--body-md-size); font-weight:700;
  color:var(--ink-800); cursor:pointer; text-align:left; transition:background .12s; }
.auto-dropdown-item:hover { background:var(--bg-tinted); }
.auto-dropdown-item.gated { cursor:pointer; opacity:.7; }
.auto-dropdown-item.gated:hover { background:var(--surface-muted); }

/* Automation pills (header + expanded view) */
.auto-pill { display:inline-flex; align-items:center; gap:3px; padding:2px var(--space-2); border-radius:9999px;
  background:var(--brand-blue-light); color:var(--brand-blue); font-size:var(--eyebrow-size); font-weight:800;
  border:1px solid rgba(37,99,235,.18); flex-shrink:0; white-space:nowrap; }
.auto-pill-lg { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:9999px;
  background:#fff; color:var(--brand-blue); font-size:var(--label-md-size); font-weight:700;
  border:1px solid rgba(37,99,235,.2); }

/* Permissions table */
.perm-table { width:100%; border-collapse:collapse; font-size:var(--body-md-size); }
.perm-table th, .perm-table td { padding:11px 14px; text-align:center; border-bottom:1px solid var(--border-soft); }
.perm-table th { font-size:var(--label-sm-size); font-weight:800; color:var(--ink-500); background:var(--bg-tinted);
  text-transform:uppercase; letter-spacing:.04em; }
.perm-table td:first-child, .perm-table th:first-child { text-align:left; color:var(--ink-700); font-weight:600; min-width:240px; }
.perm-table tr:last-child td { border-bottom:none; }
.perm-table tbody tr:hover { background:var(--bg-tinted); }

/* Tambah Automasi button */
.btn-tambah-auto { display:flex; align-items:center; gap:7px; padding:7px 14px; border-radius:var(--radius-btn);
  border:none; background:var(--brand-blue-light); color:var(--t-accent); font-size:var(--label-md-size); font-weight:800;
  cursor:pointer; transition:all .15s; }
.btn-tambah-auto:hover { background:#DBEAFE; }

/* Email automation card */
.email-auto-card { background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-card);
  padding:var(--space-5); margin-top:var(--space-1); }

/* Pipeline builder bg */
.scrollarea { background:var(--bg-app); }

/* ===================== AI INTERVIEW TAB ===================== */
.ai-interview-perf { background:var(--brand-blue-light);
  border:1px solid rgba(37,99,235,.15); border-radius:var(--radius-card); padding:18px var(--space-5); }
.ai-video-player { border-radius:var(--radius-card); overflow:hidden; background:var(--ink-900); }
.ai-video-screen { height:200px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:var(--ink-900); position:relative; }
.ai-video-play { width:60px; height:60px; border-radius:9999px; background:rgba(255,255,255,.15);
  border:2px solid rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); transition:all .15s; }
.ai-video-screen:hover .ai-video-play { background:rgba(255,255,255,.25); }
.ai-video-controls { display:flex; align-items:center; gap:10px; padding:10px 14px; background:#1E293B; }

/* ===================== REVIEW (Tinjauan) MODAL ===================== */
.review-modal { background:#fff; border-radius:var(--radius-card); width:1080px; max-width:100%; max-height:92vh;
  display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,.22); animation:popIn .2s ease;
  position:relative; overflow:hidden; }
.review-body { flex:1; overflow-y:auto; display:grid; grid-template-columns:1fr 340px; gap:0; }
.review-left { padding:var(--space-5) var(--space-6); background:var(--bg-app); border-right:1px solid var(--border); }
.review-right { padding:var(--space-5) var(--space-6); background:#fff; }

/* Teal primary button (for publish action) */
.btn-primary-teal { display:inline-flex; align-items:center; gap:7px; padding:10px 18px; border:none; border-radius:var(--radius-btn);
  background:var(--brand-teal); color:#fff; font-size:var(--body-md-size); font-weight:800; cursor:pointer; transition:all .15s; }
.btn-primary-teal:hover { background:#006666; }
.btn-primary-teal:active { transform:scale(.98); }

/* Tweaks panel host */
.ak-tweaks { position:fixed; top:0; right:0; height:100%; z-index:120; }

/* ===== Form primitives (Apply modal + others) ===== */
.cv-attached { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) 14px; border:1.5px solid var(--border);
  border-radius:var(--radius-md); background:#fff; transition:border-color .15s; }
.cv-attached:hover { border-color:var(--ink-300); }
.cv-dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; padding:var(--space-6) var(--space-4); border:1.5px dashed var(--border); border-radius:var(--radius-md);
  background:var(--surface-muted); cursor:pointer; transition:all .15s; }
.cv-dropzone:hover { border-color:var(--brand-blue); background:var(--brand-blue-light); }

.input-wrap { display:flex; align-items:center; border:1.5px solid var(--border); border-radius:var(--radius);
  padding:0 var(--space-3); background:#fff; transition:border-color .15s; }
.input-wrap:focus-within { border-color:var(--brand-blue); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.input-wrap .prefix, .input-wrap .suffix { font-size:var(--label-md-size); font-weight:700; color:var(--ink-400); flex:none; }
.input-wrap .prefix { margin-right:var(--space-1); }
.input-wrap .suffix { margin-left:var(--space-1); }

/* Loading spinner */
.spin { display:inline-block; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent;
  border-radius:9999px; animation:spin .65s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* btn-danger (solid) */
.btn-danger { background:var(--danger); color:#fff; border:1px solid transparent; }
.btn-danger:hover { background:#B91C1C; }

/* Notifications dropdown */
.nav-bell { width:40px; height:40px; border-radius:9999px; border:none; background:transparent;
  display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative;
  flex-shrink:0; color:var(--ink-600); transition:background .15s, color .15s; }
.nav-bell:hover { background:var(--surface-muted); color:var(--ink-700); }
.notif-dropdown { position:absolute; top:46px; right:0; width:380px; background:#fff;
  border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-lg);
  z-index:120; overflow:hidden; }
.notif-item { display:flex; gap:12px; align-items:flex-start; padding:14px 18px; border:none; width:100%; cursor:pointer; background:#fff;
  border-bottom:1px solid var(--border-soft); transition:background .12s; }
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:#F9FBFD; }
.notif-item.unread { background:#F5F9FF; }
.notif-item.unread:hover { background:#EFF5FF; }

/* Semua Notifikasi — full page */
.notif-group-label { font-size:var(--eyebrow-size); font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-400); margin:0 0 10px 4px; }
.notif-page-row { display:flex; gap:14px; align-items:flex-start; width:100%; border:none; background:#fff;
  padding:18px 20px; cursor:pointer; transition:background .12s; text-align:left; font-family:inherit; }
.notif-page-row:hover { background:#F9FBFD; }
.notif-page-row.unread { background:#F5F9FF; }
.notif-page-row.unread:hover { background:#EFF5FF; }
.notif-page-ic { width:40px; height:40px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center; }
.notif-page-dot { width:8px; height:8px; border-radius:9999px; background:var(--brand-blue); flex:none; margin-top:6px; }
.notif-dropdown .btn-link { text-decoration:none; }
.notif-dropdown .btn-link:hover { text-decoration:underline; opacity:1; }

/* Marketplace filter panel */
.filter-pop { position:absolute; top:calc(100% + 10px); right:0; width:340px; background:#fff;
  border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-lg);
  z-index:130; overflow:hidden; }
.filter-pop-head { display:flex; align-items:center; gap:9px; padding:var(--space-4) 18px; border-bottom:1px solid var(--border-soft); }
.filter-pop-head .material-symbols-outlined { color:var(--ink-900); }
.filter-pop-title { font-size:var(--body-lg-size); font-weight:800; color:var(--ink-900); letter-spacing:-.01em; }
.filter-pop-clear { margin-left:auto; border:none; background:none; font-size:var(--label-md-size); font-weight:800;
  color:var(--brand-blue); cursor:pointer; }
.filter-pop-clear:disabled { color:var(--ink-300); cursor:default; }
.filter-pop-body { max-height:380px; overflow-y:auto; }
.fsection { border-bottom:1px solid var(--border-soft); }
.fsection:last-child { border-bottom:none; }
.fsection-head { display:flex; align-items:center; width:100%; padding:15px 18px; border:none; background:none;
  font-family:inherit; font-size:var(--body-md-size); font-weight:800; color:var(--ink-900); cursor:pointer; transition:background .12s; }
.fsection-head:hover { background:var(--surface-muted); }
.fsection-count { margin-left:9px; background:var(--brand-blue); color:#fff; font-size:var(--eyebrow-size); font-weight:800;
  min-width:18px; height:18px; padding:0 5px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center; }
.fsection-chev { margin-left:auto; color:var(--ink-400); transition:transform .2s; }
.fsection-chev.open { transform:rotate(180deg); }
.fsection-body { padding:2px 18px 14px; display:flex; flex-direction:column; gap:2px; }
.fcheck { display:flex; align-items:center; gap:11px; padding:var(--space-2) 0; cursor:pointer; user-select:none; }
.fcheck-box { width:20px; height:20px; border-radius:6px; border:2px solid var(--ink-300); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:all .14s; background:#fff; }
.fcheck:hover .fcheck-box { border-color:var(--brand-blue); }

/* ===================== TOKO / PAKET PRODUK ===================== */
.shop-head { text-align:center; max-width:560px; margin:var(--space-2) auto var(--space-8); }
.shop-bal { display:inline-flex; align-items:center; gap:7px; padding:7px 14px; background:#fff;
  border:1px solid var(--border); border-radius:9999px; font-size:var(--label-md-size); font-weight:700; color:var(--ink-500);
  box-shadow:var(--shadow-sm); white-space:nowrap; flex-shrink:0; }
.shop-bal b { color:var(--ink-900); font-weight:800; }
.shop-title { font-size:var(--headline-lg-size); font-weight:800; letter-spacing:-.025em; color:var(--ink-900); }
.shop-sub { font-size:var(--body-md-size); font-weight:600; color:var(--ink-500); line-height:1.55; margin-top:var(--space-2); }

.pkg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); align-items:start; }
.pkg { position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--radius-card);
  padding:28px var(--space-6); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; text-align:center;
  transition:box-shadow .15s, transform .15s; }
.pkg:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.pkg-pop { border-color:var(--brand-blue); box-shadow:0 0 0 1px var(--brand-blue), var(--shadow-md); }
.pkg-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center;
  gap:5px; background:var(--brand-blue); color:#fff; font-size:var(--label-sm-size); font-weight:800; padding:5px 13px; border-radius:9999px;
  box-shadow:var(--shadow-md); white-space:nowrap; }
.pkg-ico { width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  margin:6px auto var(--space-4); box-shadow:var(--shadow-sm); }
.pkg-tier { font-size:var(--label-sm-size); font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--space-1); }
.pkg-name { font-size:var(--headline-md-size); font-weight:800; color:var(--ink-900); letter-spacing:-.01em; line-height:1.25; }
.pkg-session { font-size:var(--label-md-size); font-weight:600; color:var(--ink-500); margin-top:6px; }
.pkg-perks-label { font-size:var(--eyebrow-size); font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-400);
  text-align:left; margin-bottom:11px; }
.pkg-perks { display:flex; flex-direction:column; gap:10px; text-align:left; flex:1; }
.pkg-perk { display:flex; align-items:flex-start; gap:9px; font-size:var(--body-md-size); font-weight:600; color:var(--ink-700); line-height:1.4; }
.pkg-price { margin:22px 0 var(--space-4); padding:14px var(--space-4); background:var(--surface-muted); border:1px solid var(--border-soft);
  border-radius:var(--radius-md); text-align:center; }
.pkg-price-rp { font-size:var(--title-size); font-weight:900; letter-spacing:-.02em; color:var(--ink-900); line-height:1; }
.pkg-price-or { font-size:var(--eyebrow-size); font-weight:700; color:var(--ink-400); margin:9px 0 7px; }
.pkg-price-cr { display:inline-flex; align-items:center; gap:5px; font-size:var(--body-md-size); font-weight:800; color:var(--ink-500); flex-wrap:wrap; justify-content:center; }
.pkg-price-cr.ok { color:var(--t-accent); }
.pkg-price-have { display:inline-flex; align-items:center; gap:2px; font-size:var(--eyebrow-size); font-weight:800; color:var(--success-ink);
  background:var(--success-soft); padding:2px 7px; border-radius:9999px; }
.pkg-buy-stack { display:flex; flex-direction:column; gap:var(--space-2); }
.pkg-buy { width:100%; }
.pkg-buy-cr { display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:10px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); font-family:inherit; font-size:var(--label-md-size);
  font-weight:800; color:var(--t-accent); cursor:pointer; transition:all .15s; }
.pkg-buy-cr:hover:not(:disabled) { background:var(--brand-blue-light); border-color:var(--brand-blue); }
.pkg-buy-cr:disabled { color:var(--ink-300); cursor:not-allowed; }

.shop-foot { display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; margin-top:30px;
  font-size:var(--label-md-size); font-weight:700; color:var(--ink-500); }

@media (max-width:860px){ .pkg-grid { grid-template-columns:1fr; max-width:420px; margin:0 auto; } }

/* ===================== DOMPET / WALLET ===================== */
.wallet-card { display:flex; align-items:center; gap:18px; padding:var(--space-6) 26px; background:var(--bg-tinted);
  border:1px solid rgba(37,99,235,.14); border-radius:var(--radius-card); box-shadow:var(--shadow-sm); margin-bottom:14px; }
.wallet-ico { width:54px; height:54px; border-radius:15px; background:var(--brand-blue); flex:none;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-cta); }
.wallet-label { font-size:var(--body-lg-size); font-weight:800; color:var(--ink-900); letter-spacing:-.01em; }
.wallet-hint { font-size:var(--label-md-size); font-weight:600; color:var(--ink-500); margin-top:2px; }
.wallet-bal { margin-left:auto; text-align:right; }
.wallet-bal-val { font-size:var(--headline-lg-size); font-weight:900; letter-spacing:-.02em; color:var(--brand-blue); line-height:1; }
.wallet-bal-unit { font-size:var(--label-md-size); font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-400); margin-top:5px; }
.wallet-topup { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; flex:none;
  width:74px; height:74px; border:none; border-radius:var(--radius-md); background:var(--brand-blue); color:#fff;
  font-family:inherit; font-size:var(--label-md-size); font-weight:800; cursor:pointer; transition:background .15s; box-shadow:var(--shadow-cta); }
.wallet-topup:hover { background:var(--brand-blue-hover); }
.wallet-links { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-bottom:26px; padding:0 var(--space-1); }
.wallet-link { display:inline-flex; align-items:center; gap:5px; border:none; background:none; font-family:inherit;
  font-size:var(--label-md-size); font-weight:700; color:var(--brand-blue); cursor:pointer; padding:0; }
.wallet-link:hover { color:var(--brand-blue-hover); text-decoration:underline; }
.wallet-link-sep { color:var(--ink-300); font-weight:700; }

.wtxn { display:flex; align-items:center; gap:14px; padding:14px var(--space-4); background:#fff; border:1px solid var(--border);
  border-radius:var(--radius-md); transition:border-color .15s, box-shadow .15s; }
.wtxn:hover { border-color:var(--ink-300); box-shadow:var(--shadow-sm); }
.wtxn-ico { width:40px; height:40px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center; }
.wtxn-title { font-size:var(--body-md-size); font-weight:800; color:var(--ink-900); }
.wtxn-date { font-size:var(--label-md-size); font-weight:600; color:var(--ink-400); margin-top:2px; }
.wtxn-amt { margin-left:auto; font-size:var(--body-lg-size); font-weight:900; letter-spacing:-.01em; white-space:nowrap; }
.wtxn-amt.plus { color:var(--success-ink); }
.wtxn-amt.minus { color:var(--warning-ink); }

/* earn-credits cards */
.earn-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.earn { position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
  padding:18px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:border-color .15s, box-shadow .15s; }
.earn:hover { border-color:var(--ink-300); box-shadow:var(--shadow-md); }
.earn-ico { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-3); }
.earn-reward { position:absolute; top:16px; right:16px; font-size:var(--body-md-size); font-weight:900; color:var(--success-ink);
  background:var(--success-soft); padding:3px 10px; border-radius:9999px; }
.earn-title { font-size:var(--body-md-size); font-weight:800; color:var(--ink-900); }
.earn-desc { font-size:var(--label-md-size); font-weight:600; color:var(--ink-500); line-height:1.45; margin-top:var(--space-1); flex:1; }
.earn-cta { display:inline-flex; align-items:center; justify-content:center; gap:5px; margin-top:14px; padding:9px;
  background:var(--brand-blue-light); border:none; border-radius:var(--radius); font-family:inherit; font-size:var(--label-md-size);
  font-weight:800; color:var(--t-accent); cursor:pointer; transition:background .15s; }
.earn-cta:hover { background:#DCEAFE; }
@media (max-width:760px){ .earn-grid { grid-template-columns:1fr; } }

/* ===================== INVENTORI ===================== */
.inv-tabs { display:flex; gap:var(--space-1); padding:5px; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius-md); margin-bottom:22px; overflow-x:auto; }
.inv-tab { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 14px;
  border:none; background:none; border-radius:var(--radius); font-family:inherit; font-size:var(--body-md-size); font-weight:700;
  color:var(--ink-500); cursor:pointer; white-space:nowrap; transition:all .15s; }
.inv-tab:hover { color:var(--ink-800); background:var(--surface-muted); }
.inv-tab.on { background:var(--brand-blue); color:#fff; }
.inv-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4); }
.inv { position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--radius-card);
  padding:var(--space-5); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:border-color .15s, box-shadow .15s; }
.inv:hover { border-color:var(--ink-300); box-shadow:var(--shadow-md); }
.inv-top { display:flex; align-items:flex-start; gap:13px; }
.inv-ico { width:46px; height:46px; border-radius:13px; flex:none; display:flex; align-items:center; justify-content:center; }
.inv-name { font-size:var(--body-lg-size); font-weight:800; color:var(--ink-900); letter-spacing:-.01em; }
.inv-desc { font-size:var(--label-md-size); font-weight:600; color:var(--ink-500); margin-top:2px; }
.inv-qty { margin-left:auto; flex:none; text-align:right; }
.inv-qty-val { font-size:var(--title-size); font-weight:900; letter-spacing:-.02em; color:var(--ink-900); line-height:1; }
.inv-qty-lbl { font-size:var(--eyebrow-size); font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-400); margin-top:3px; }
.inv-meter { height:6px; border-radius:9999px; background:var(--border); overflow:hidden; margin:var(--space-4) 0 var(--space-2); }
.inv-meter > i { display:block; height:100%; border-radius:9999px; }
.inv-stats { display:flex; align-items:center; justify-content:space-between; font-size:var(--label-md-size); font-weight:700; }
.inv-date { display:inline-flex; align-items:center; gap:5px; font-size:var(--label-md-size); font-weight:600; color:var(--ink-400); margin-top:var(--space-3); }
.inv-foot { display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-4); }
.inv-status { display:inline-flex; align-items:center; gap:5px; font-size:var(--label-md-size); font-weight:800; color:var(--success-ink); }
.inv-use { margin-left:auto; }
@media (max-width:720px){ .inv-grid { grid-template-columns:1fr; } }
.fcheck-box.on { background:var(--brand-blue); border-color:var(--brand-blue); }
.fcheck-box.on .material-symbols-outlined { color:#fff; font-size:var(--body-lg-size); }
.fcheck-label { font-size:var(--body-md-size); font-weight:700; color:var(--ink-700); flex:1; }
.fcheck-n { font-size:var(--label-md-size); font-weight:700; color:var(--ink-400); }
.filter-pop-foot { display:flex; gap:10px; padding:13px 18px; border-top:1px solid var(--border-soft); background:var(--surface-muted); }

/* Marketplace toolbar — view toggle + sort */
.view-toggle { display:inline-flex; background:var(--surface-muted); border:1px solid var(--border); border-radius:var(--radius-md); padding:3px; gap:2px; }
.view-toggle button { width:34px; height:30px; border:none; background:none; border-radius:7px; display:flex;
  align-items:center; justify-content:center; color:var(--ink-400); cursor:pointer; transition:all .14s; }
.view-toggle button:hover { color:var(--ink-700); }
.view-toggle button.on { background:var(--brand-blue); color:#fff; box-shadow:var(--shadow-sm); }
.sort-wrap { position:relative; }
.sort-btn { display:inline-flex; align-items:center; gap:var(--space-2); padding:9px 13px; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius-md); font-family:inherit; font-size:var(--body-md-size); font-weight:700; color:var(--ink-800); cursor:pointer; transition:all .14s; }
.sort-btn:hover { border-color:var(--ink-300); }
.sort-btn .material-symbols-outlined { color:var(--ink-400); }
.sort-menu { position:absolute; top:calc(100% + 6px); right:0; min-width:190px; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-md); z-index:60; padding:5px; }
.sort-item { display:flex; align-items:center; gap:9px; width:100%; padding:9px 11px; border:none; background:none;
  border-radius:var(--radius); font-family:inherit; font-size:var(--body-md-size); font-weight:700; color:var(--ink-700); cursor:pointer; text-align:left; transition:background .12s; }
.sort-item:hover { background:var(--surface-muted); }
.sort-item.on { color:var(--brand-blue); }
.sort-item .material-symbols-outlined { margin-left:auto; color:var(--brand-blue); }

/* List view card */
.mkt-list { display:flex; flex-direction:column; gap:var(--space-3); }
.mkt-row { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-4) 18px; }
.mkt-row .ci { width:48px; height:48px; flex:none; }
.mkt-row-main { flex:1; min-width:0; }
.mkt-row-chips { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:7px; }
.mkt-row-right { display:flex; align-items:center; gap:var(--space-5); flex:none; }
@media (max-width:720px){ .mkt-row-right .mkt-row-meta { display:none; } }

/* ===== Auth pages ===== */
.auth-shell { min-height:100vh; display:flex; flex-direction:column; background:var(--bg-app); position:relative; }
.auth-bg-grid { position:absolute; inset:0; pointer-events:none; opacity:1;
  background-image:none; background-color:var(--bg-app); }
.auth-header { display:flex; align-items:center; justify-content:space-between; padding:18px 28px;
  position:relative; z-index:2; }
.auth-main { flex:1; display:flex; align-items:center; justify-content:center; padding:var(--space-6) var(--space-5);
  position:relative; z-index:2; }
.auth-footer { padding:18px 28px; text-align:center; font-size:var(--label-md-size); color:var(--ink-400); font-weight:600;
  position:relative; z-index:2; }
.auth-footer a { color:var(--ink-500); text-decoration:none; margin:0 var(--space-1); }
.auth-footer a:hover { color:var(--brand-blue); }

.auth-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-card);
  box-shadow:0 4px 24px rgba(15,23,42,.06); padding:var(--space-8); width:100%; max-width:440px; }

.role-card { display:flex; flex-direction:column; align-items:flex-start; padding:var(--space-6); border:1.5px solid var(--border);
  border-radius:var(--radius-card); background:#fff; cursor:pointer; transition:all .15s; text-align:left; }
.role-card:hover { border-color:var(--brand-blue); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.role-icon { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; }

.role-badge { display:inline-flex; align-items:center; gap:5px; padding:var(--space-1) 11px; border-radius:9999px;
  font-size:var(--label-md-size); font-weight:800; letter-spacing:.02em; }

/* Modal overlay (shared) */
.modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:center;
  justify-content:center; z-index:150; padding:var(--space-6); animation:fadeIn .15s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.modal-close { position:absolute; top:14px; right:14px; width:32px; height:32px; border:none; background:transparent;
  color:var(--ink-400); border-radius:9999px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.modal-close:hover { background:var(--surface-muted); color:var(--ink-700); }

/* AI Shortlist upsell popup */
.ai-popup { background:#fff; border-radius:var(--radius-card); padding:36px var(--space-8) 28px; width:340px;
  box-shadow:0 20px 60px rgba(0,0,0,.18); position:relative; animation:popIn .2s ease; }
@keyframes popIn { from { transform:scale(.92); opacity:0; } to { transform:scale(1); opacity:1; } }

/* CV file card in Profil & CV tab */
.cv-file-card { display:flex; align-items:center; gap:14px; padding:14px var(--space-4); background:#fff;
  border:1.5px solid var(--border); border-radius:var(--radius-card); cursor:pointer; transition:all .15s; margin-bottom:14px; }
.cv-file-card:hover { border-color:var(--brand-blue); box-shadow:var(--shadow-sm); }

/* CV preview modal */
.cv-modal { background:#fff; border-radius:var(--radius-card); width:1200px; max-width:96vw; max-height:92vh;
  display:flex; flex-direction:column; box-shadow:0 24px 70px rgba(0,0,0,.22); animation:popIn .2s ease; }
.cv-modal-head { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border); flex:none; }
.cv-modal-body { flex:1; overflow:hidden; display:flex; background:var(--surface-muted); }
.cv-modal-body .cv-pane { flex:1; min-width:0; overflow-y:auto; padding:var(--space-6); }
.cv-modal-body .review-pane { width:480px; flex-shrink:0; border-left:1px solid var(--border); background:#fff;
  overflow-y:auto; padding:var(--space-6); }
.cv-page { background:#fff; padding:48px 56px; max-width:560px; margin:0 auto; box-shadow:0 1px 4px rgba(0,0,0,.06);
  border:1px solid var(--border); min-height:760px; }

/* Rangka berkas PDF — meja abu-abu dengan lembar seukuran A4, seperti penampil
   PDF peramban. Isinya berkas kandidat, bukan susunan ulang datanya. */
.pdf-desk { flex:1; min-width:0; overflow-y:auto; padding:var(--space-6);
  display:flex; flex-direction:column; align-items:center; gap:var(--space-4); }
.pdf-sheet { position:relative; width:100%; max-width:600px; aspect-ratio:1 / 1.414; background:#fff;
  border:1px solid var(--border); box-shadow:0 1px 4px rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:center; flex:none; }
.pdf-sheet-num { position:absolute; top:12px; right:14px; font-size:var(--eyebrow-size); font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-300); }
.pdf-sheet-note { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:0 var(--space-6); font-size:var(--label-md-size); font-weight:600; color:var(--ink-400); max-width:280px; }
.cv-section { margin-bottom:22px; }
.cv-h { font-size:var(--label-sm-size); font-weight:800; letter-spacing:.12em; color:var(--ink-900); text-transform:uppercase;
  border-bottom:1px solid var(--ink-300); padding-bottom:var(--space-1); margin-bottom:10px; }

/* ===================== STAGE TABS BAR ===================== */
.stage-tabs-bar { display:flex; align-items:center; background:#fff; border-bottom:1px solid var(--border); flex:none; padding:0 var(--space-6); gap:var(--space-3); }
.stage-tabs-scroll { display:flex; align-items:center; gap:2px; flex:1; overflow-x:auto; scrollbar-width:none; padding:0 0 1px; }
.stage-tabs-scroll::-webkit-scrollbar { display:none; }
.stage-tab { display:flex; align-items:center; gap:7px; padding:var(--space-3) var(--space-4); border:none; background:transparent;
  font-size:var(--label-md-size); font-weight:700; color:var(--ink-500); border-bottom:2.5px solid transparent;
  white-space:nowrap; flex:none; transition:all .15s; }
.stage-tab:hover { color:var(--brand-blue); background:var(--bg-tinted); }
.stage-tab.on { color:var(--t-accent); border-bottom-color:var(--t-accent); }
.stage-tab.ai-tab { gap:6px; }
.stage-tab-dot { width:8px; height:8px; border-radius:9999px; flex:none; }
.stage-tab-count { background:var(--surface-muted); color:var(--ink-500); font-size:var(--eyebrow-size); font-weight:800;
  padding:1px var(--space-2); border-radius:9999px; }
.stage-tab.on .stage-tab-count { background:var(--brand-blue-light); color:var(--t-accent); }
.pro-pill { background:var(--brand-blue); color:#fff; font-size:var(--eyebrow-size); font-weight:900; padding:2px 6px; border-radius:4px; }

/* view toggle (list/board) */
.view-toggle { display:flex; gap:2px; background:var(--surface-muted); border-radius:var(--radius-md); padding:3px; flex:none; }
.view-toggle button { width:34px; height:34px; border:none; border-radius:8px; background:transparent;
  color:var(--ink-400); display:flex; align-items:center; justify-content:center; transition:all .15s; }
.view-toggle button:hover { color:var(--brand-blue); }
.view-toggle button.on { background:#fff; color:var(--brand-blue); box-shadow:var(--shadow-sm); }

/* ===================== CANDIDATE DOSSIER (enriched) ===================== */
/* cv match card */
.cv-match-card { background:var(--bg-tinted); border:1px solid rgba(37,99,235,.14); border-radius:var(--radius-card);
  padding:18px var(--space-5); margin-bottom:var(--space-1); }

/* sidebar */
.detail-sidebar { display:flex; flex-direction:column; gap:var(--space-3); }
.sidebar-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); padding:14px var(--space-4); }
.action-circle { width:40px; height:40px; border-radius:9999px; border:1.5px solid var(--border); background:#fff;
  display:flex; align-items:center; justify-content:center; color:var(--ink-600); transition:all .15s; flex:none; }
.action-circle:hover { border-color:var(--brand-blue); color:var(--brand-blue); }
.action-circle.green { background:var(--success); border-color:var(--success-ink); }

/* work timeline */
.work-timeline { display:flex; flex-direction:column; gap:0; }
.work-entry { display:flex; gap:var(--space-4); padding-bottom:var(--space-6); position:relative; }
.tl-dot { width:12px; height:12px; border-radius:9999px; background:var(--t-accent); border:2.5px solid #fff;
  box-shadow:0 0 0 2px var(--t-accent); flex:none; margin-top:var(--space-1); position:relative; z-index:1; }
.tl-line { position:absolute; left:5px; top:16px; bottom:0; width:2px; background:var(--border); z-index:0; }
.work-bullets { margin:var(--space-2) 0 0; padding-left:var(--space-4); display:flex; flex-direction:column; gap:var(--space-1); }
.work-bullets li { font-size:var(--label-md-size); font-weight:500; color:var(--ink-600); line-height:1.55; }

/* analytics */
.analytics-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); margin-bottom:var(--space-5); }
.metric-ring { display:flex; flex-direction:column; align-items:center; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius-card); padding:var(--space-4) var(--space-3); }
.metric-box { background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); padding:var(--space-4); }

.verdict-card { background:var(--bg-tinted); border:1px solid rgba(37,99,235,.14); border-radius:var(--radius-card); padding:var(--space-4) 18px; }

/* skill gap table */
.gap-table { width:100%; border-collapse:collapse; font-size:var(--body-md-size); }
.gap-table th { text-align:left; font-size:var(--eyebrow-size); font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-400); padding:10px 14px; border-bottom:1px solid var(--border); background:var(--surface-muted); }
.gap-table td { padding:11px 14px; border-bottom:1px solid var(--border-soft); }
.gap-table tr:last-child td { border-bottom:none; }

/* btn-link */
.btn-link { background:none; border:none; color:var(--t-accent); font-size:var(--label-md-size); font-weight:800;
  cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }
.btn-link:hover { opacity:.75; }

/* btn-danger-outline */
.btn-danger-outline { border:1.5px solid var(--danger); color:var(--danger); background:#fff; }
.btn-danger-outline:hover { background:rgba(220,38,38,.06); }

/* btn-sm */
.btn.btn-sm { padding:7px 14px; font-size:var(--label-md-size); }

/* Tindakan utama dosir: memindahkan kandidat ke tahap berikutnya. Lebih lebar
   dan lebih tebal dari tombol lain di pita, dengan pendar biru sistem desain. */
.dossier-next { padding-left:20px; padding-right:18px; font-weight:800;
  box-shadow:var(--shadow-cta); }
.dossier-next:hover { box-shadow:0 12px 24px -6px rgba(37,99,235,.42); }


/* ===================== PROFIL DIGITAL (dossier tab) ===================== */
.pd-wrap { display:flex; flex-direction:column; gap:var(--space-4); max-width:100%; }
.pd-head { background:#fff; border:1px solid var(--border); border-radius:var(--radius-card);
  padding:11px var(--space-4); display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.pd-head-top { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.pd-head .chip, .pd-hero .chip { white-space:nowrap; flex:none; }
.pd-badge { width:32px; height:32px; border-radius:9px; background:var(--brand-blue-light); color:var(--t-accent);
  display:flex; align-items:center; justify-content:center; flex:none; }
.pd-id { flex:1; min-width:170px; }
.pd-title-row { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.pd-verify { display:flex; gap:6px; flex-wrap:wrap; }
.pd-verify-chip { display:inline-flex; align-items:center; gap:var(--space-1); font-size:var(--eyebrow-size); font-weight:700;
  color:var(--ink-600); background:var(--surface-muted); border:1px solid var(--border); padding:var(--space-1) 9px;
  border-radius:9999px; white-space:nowrap; }
.pd-verify-chip .ok { color:var(--success-ink); }
.pd-meter { flex:1 1 120px; min-width:80px; }
.pd-meter-bar { height:6px; border-radius:9999px; background:var(--surface-muted); overflow:hidden; }
.pd-meter-fill { height:100%; border-radius:9999px; transition:width .5s cubic-bezier(.2,.8,.3,1); }
.pd-split { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:var(--space-4); align-items:start; }
.pd-main { display:flex; flex-direction:column; gap:14px; min-width:0; }
.pd-side { display:flex; flex-direction:column; gap:14px; min-width:0; }
.pd-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); padding:var(--space-4) 18px; }
.pd-card-head { display:flex; align-items:center; gap:9px; margin-bottom:var(--space-3); }

/* Ikon bagian duduk di petak lunak, bukan mengapung sendiri — memberi setiap
   kartu satu titik warna tanpa menambah garis atau kotak baru. */
.pd-card-head .eyebrow { color:var(--ink-400) !important; }

/* Alat di ujung pita tab — flex:none, jadi tab yang mengalah, bukan alatnya. */
.dtabs-tools { flex:0 0 auto; gap:var(--space-2); align-items:center;
  padding:0 28px 0 var(--space-3); }
.dtabs-tools-menu { display:none; }
/* Label tab panjang/pendek — keduanya ditulis, satu tampil menurut lebar panel. */
.dtab-short { display:none; }
@container dossier (max-width:760px){
  .dtabs { padding-left:var(--space-4); padding-right:var(--space-2); }
  .dtab { padding-left:11px; padding-right:11px; }
  .dtab-long { display:none; }
  .dtab-short { display:inline; }
  /* Fakta kandidat merapat agar identitas tetap ringkas di panel sempit. */
  .dossier-stats-row { gap:5px 12px !important; }
  /* Skor sudah tertulis di kartu daftar; di lebar ini nama yang lebih berguna. */
  .dossier-score { display:none !important; }
  .dtabs-tools-full { display:none; }
  .dtabs-tools-menu { display:inline-flex; }
}
@media (max-width:640px){ .dtabs-tools { padding-right:var(--space-4); } }

/* Panel tersempit (mis. jendela 861px, tepat di atas ambang off-canvas): tab
   dan alatnya merapat lagi supaya keempat tab tetap muat tanpa gulir. */
@container dossier (max-width:560px){
  .dtabs { padding-left:var(--space-2); padding-right:0; }
  .dtab { padding-left:8px; padding-right:8px; }
  .dtabs-tools { padding:0 var(--space-3) 0 var(--space-2); }
}
.pd-ico { width:24px; height:24px; border-radius:7px; flex:none; display:flex; align-items:center;
  justify-content:center; background:var(--brand-blue-light); color:var(--t-accent); }
.pd-ico.ok { background:var(--success-soft); color:var(--success-ink); }
.pd-ico.muted { background:var(--surface-muted); color:var(--ink-400); }

/* Kartu identitas: satu-satunya panel bernada biru di kolom ini. */
/* Kartu identitas ikut putih seperti kartu lain; tekanannya datang dari cincin
   avatar dan posisi berwarna merek, bukan dari latar yang berganti nada. */
.pd-hero { background:#fff; }
.pd-hero-ava { width:56px; height:56px; border-radius:9999px; flex:none; display:flex; align-items:center;
  justify-content:center; background:#fff; color:var(--t-accent); font-size:var(--body-lg-size);
  font-weight:800; border:1px solid rgba(37,99,235,.2); box-shadow:0 2px 8px rgba(37,99,235,.12); }

/* Bagian ringkas mengalir dalam dua kolom, bukan petak kaku: tiap kartu setinggi
   isinya dan peramban menyeimbangkan kolomnya sendiri. Petak membuat kartu pendek
   ikut ditarik setinggi pasangannya (ruang kosong di dalam) atau meninggalkan
   lubang di bawahnya — aliran kolom tidak melakukan keduanya. */
.pd-grid { column-count:1; column-gap:14px; }
.pd-grid > * { break-inside:avoid; margin-bottom:14px; }
/* Satu bagian yang tersisa membentang penuh: kartu setengah lebar yang berdiri
   sendiri di bawah kartu penuh justru menonjolkan sisi kanan yang kosong. */
.pd-grid > *:only-child { column-span:all; }
/* Dua kolom hanya bila panel dosir memang lebar. Di panel sempit tiap kartu
   tinggal ~220px, dan pada baris sertifikat/referensi lencana 32px ditambah
   tombol 70–90px menyisakan belasan piksel untuk judul — judulnya lalu pecah
   jadi belasan baris tiga huruf. */
@container dossier (min-width:900px){ .pd-grid { column-count:2; } }
.pd-card-head .material-symbols-outlined { font-size:var(--body-lg-size); color:var(--t-accent); }
.pd-card.empty .pd-card-head .material-symbols-outlined { color:var(--ink-300); }
.pd-missing { background:var(--surface-muted); border:1px dashed var(--border); border-radius:var(--radius-card); padding:var(--space-4) 18px; }
.pd-missing-chips { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 var(--space-3); }
.pd-missing-chip { display:inline-flex; align-items:center; gap:var(--space-1); font-size:var(--label-sm-size); font-weight:600; color:var(--ink-500);
  background:#fff; border:1px solid var(--border); padding:var(--space-1) 10px; border-radius:9999px; }
.pd-cv-row { display:flex; align-items:center; gap:11px; }
.pd-cv-ico { width:36px; height:44px; background:var(--danger-soft); border:1.5px solid #FCA5A5; border-radius:5px;
  display:flex; align-items:center; justify-content:center; flex:none; }

/* mobile nav drawer (off-canvas erail) */
.erail-scrim { display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:190; }
.topbar-menu { display:none; }

/* ===================== RESPONSIVE ===================== */
@media (max-width:1180px){
  .dash-stats { grid-template-columns:repeat(2,1fr); }
  .dsplit, .builder-grid, .checkout-grid { grid-template-columns:1fr; }
  .dsplit aside, .builder-grid aside { flex-direction:row; flex-wrap:wrap; }
}
@media (max-width:900px){
  .dash-2col { grid-template-columns:1fr !important; }
}
@media (max-width:1440px){
  /* Kartu samping tak pernah melebar jadi pita: satu kartu yang berdiri sendiri
     tetap seukuran isinya, bukan selebar kolom. */
  .pd-side > * { max-width:360px; }
  .pd-meter-card { flex:1 1 200px !important; }
  .pd-split { grid-template-columns:1fr; }
  .pd-side { flex-direction:row; flex-wrap:wrap; }
  .pd-side > * { flex:1 1 260px; }
}

/* Kepala dosir mengikuti lebar panelnya sendiri. Tanpa ini, tombol aksi yang
   nowrap menahan lebarnya dan kolom nama menyusut sampai 0 lalu tumpang tindih. */
.dossier-htop { flex-wrap:wrap; }
.dossier-actions { min-width:0; flex-wrap:wrap; margin-left:auto; align-items:center; }

/* phone — hide nav rail, master-detail screening, responsive dossier */
.dossier-back { display:none; }
@media (max-width:860px){
  .erail { position:fixed; left:0; top:0; bottom:0; z-index:200; width:248px !important;
    transform:translateX(-100%); transition:transform .25s ease; box-shadow:0 12px 40px rgba(0,0,0,.25); }
  .erail.erail-open { transform:translateX(0); }
  .erail-collapsed { flex:0 0 248px; width:248px !important; }
  .rail-collapse-btn { display:none; }
  .erail-scrim.open { display:block; }
  .topbar-menu { display:inline-flex !important; }
  .clist-col { width:100%; flex:1; }
  .screen-split.show-detail .clist-col { display:none; }
  .screen-split:not(.show-detail) .dossier { display:none; }
  .dossier-back { display:inline-flex; }
  .whead { padding:0 var(--space-4) !important; gap:var(--space-3) !important; }
  .whead-title { padding:10px 0 !important; }
  .dossier-htop { padding:12px var(--space-4) !important; gap:var(--space-3) !important; }
  .dossier-actions { width:100%; flex-wrap:wrap; margin-left:0 !important; }
  .dtabs { padding:0 var(--space-4) !important; overflow-x:auto; scrollbar-width:none; }
  .dtabs::-webkit-scrollbar { display:none; }
  .dbody { padding:var(--space-4) !important; }
  .pd-side { flex-direction:column; }
  .pd-side > * { flex:1 1 auto; }
}
@media (max-width:560px){
  .dash-stats { grid-template-columns:1fr; }
  .pd-head { padding:var(--space-4); }
  .pd-verify { flex-basis:100%; }
  .pd-id { min-width:140px; }
}

/* ============================================================================
   Narrow-window safety (mirrors apps/marketplace/styles.css). Fixed-width
   popovers could not shrink: 380px of dropdown in a 360px window overflowed
   horizontally and ran off-screen.
   ============================================================================ */
.notif-dropdown, .filter-pop { max-width:calc(100vw - 28px); }
.ai-popup, .cfm { max-width:min(420px, calc(100vw - 28px)); }
/* A fixed 480px review pane beside a flexible CV page cannot coexist below
   ~900px, so the panes stack instead of squeezing the CV to nothing. */
@media (max-width:900px){
  .cv-modal-body { flex-direction:column; }
  .cv-modal-body .review-pane { width:100%; border-left:none; border-top:1px solid var(--border); }
}
/* Long unbroken strings (emails, company names, URLs) must wrap rather than push
   the layout wider than the viewport. */
.apl-t, .tc-title, .cand-name, .talent-name { overflow-wrap:anywhere; }

@media (max-width:900px){ .analytics-metrics { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .analytics-metrics { grid-template-columns:1fr; }
  .kv-grid, .form-grid { grid-template-columns:1fr; } }

/* ============================================================================
   Short-viewport safety for the nav rail.
   The rail must never compress its own children: a card with overflow:hidden
   that is allowed to shrink will silently clip its contents, which is how the
   "Beli Token" CTA became unreachable at 540px height. Children keep their
   natural height and the RAIL scrolls instead.
   ============================================================================ */
.erail > * { flex-shrink:0; }
/* the spacer may still absorb spare room when there IS spare room, but must not
   claim height when the rail is overflowing */
.erail > .erail-spacer { flex-shrink:1; min-height:0; }
.erail::-webkit-scrollbar { width:6px; }
.erail::-webkit-scrollbar-thumb { background:var(--border); border-radius:9999px; }
.erail::-webkit-scrollbar-track { background:transparent; }

/* Tokens are the employer's currency, so they carry the money identity used
   everywhere else — amber figure on amber-soft. Blue stays for the action. */
.topup { background:var(--warning-soft); color:var(--warning-ink); }
.topup:hover { background:#FDE9C8; }
.token-chip, .tokens-chip { background:var(--warning-soft); color:var(--warning-ink); }


/* ===== AI INTERVIEW: RESPONSIVE ===== */
/* Modal setup: isi + rel ringkasan. Rel turun ke bawah kalau kolom isi mulai sempit. */
.itv-refine-grid { display:grid; grid-template-columns:minmax(0,1fr) 316px; align-items:stretch; }
@media (max-width:900px) {
  .itv-refine-grid { grid-template-columns:minmax(0,1fr); }
  .itv-refine-rail { border-left:none !important; border-top:1px solid var(--border); }
}

/* Baris kolom pada kartu tahap: nama · status kandidat · warna */
.stage-fields { display:grid; gap:16px; align-items:start;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.35fr) minmax(0,0.8fr); }
.stage-fields .input { height:42px; }
@media (max-width:820px) { .stage-fields { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
@media (max-width:560px) { .stage-fields { grid-template-columns:minmax(0,1fr); } }

/* Sebaran skor pada kalibrasi ambang: label sumbu hilang dulu sebelum bertumpuk */
@media (max-width:640px) {
  .itv-dist-axis { display:none; }
  .itv-dist-bars { height:60px !important; }
}

/* Kepala laporan psikotes: sembilan sel selalu 3x3, sel penuh di bawahnya.
   Lebar acuannya panel dosir, bukan viewport, jadi container query. */
.asmt-meta { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:#fff; }
@container (max-width: 560px) { .asmt-meta { grid-template-columns:1fr; } }

/* PAPI: roda dan daftar 20 dimensi hanya berdampingan bila kartunya cukup
   lebar. Di bawah itu daftar mengalir 2-3 kolom penuh di bawah roda, karena
   tinggi daftar justru bertambah setiap kali lebarnya dikurangi. */
.papi-body { display:grid; grid-template-columns:1fr; gap:24px; align-items:start; }
.papi-radar { width:100%; max-width:360px; margin:0 auto; }
@container (min-width: 1080px) {
  .papi-body { grid-template-columns:minmax(320px,400px) 1fr; column-gap:34px; }
  .papi-radar { margin:0; max-width:400px; }
}


/* Tab strip joined to its panel — ringkasan strip sits directly on the report. */
.tabstack { display:flex; flex-direction:column; }
.tabstack > * + * { margin-top:20px; }
.tabstack > :first-child { border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; }
.tabstack > :first-child + *,
.tabstack > :first-child + * > :first-child { margin-top:0; border-top-left-radius:0 !important; border-top-right-radius:0 !important; border-top:0 !important; }


/* ============================================================================
   Cetak — laporan assessment. Yang dibuang: navigasi, tombol, strip tab, bayangan.
   Yang dijaga: warna pita nilai (print-color-adjust) dan kartu utuh per halaman.
   ============================================================================ */
@media print {
  * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  @page { size:A4 portrait; margin:12mm; }
  html, body { background:#fff !important; }

  .no-print, .btn, .sidebar, .topbar, .app-nav, .tabbar,
  .tabstack > :first-child { display:none !important; }

  /* Kartu kembali berdiri sendiri setelah strip tab hilang. */
  .tabstack > :first-child + *,
  .tabstack > :first-child + * > :first-child {
    border-top:1px solid var(--border) !important;
    border-top-left-radius:var(--radius-card) !important;
    border-top-right-radius:var(--radius-card) !important;
  }

  .tabstack > :first-child + * > * { box-shadow:none !important; break-inside:avoid; }
  .tabstack { gap:0 !important; }
  .tabstack > :first-child + * > * + * { margin-top:12px !important; }

  /* Elemen yang tidak boleh terbelah di tengah halaman. */
  svg, table, img { break-inside:avoid; }
  h1, h2, h3, .eyebrow { break-after:avoid; }
}

/* Hanya tampil saat dicetak — strip tab tidak ikut tercetak, jadi nama
   instrumen harus muncul di dalam kartu laporan. */
.print-only { display:none; }
@media print { .print-only { display:inline !important; } }

/* Identitas berulang di setiap halaman cetak: PDF laporan psikotes sering
   dicetak dan berpindah tangan, jadi halaman 2 ke atas tidak boleh anonim. */
.print-footer { display:none; }
@media print {
  .print-footer { display:block !important; position:fixed; left:0; right:0; bottom:0;
    padding:3mm 0 0; border-top:1px solid var(--border); background:#fff;
    font-size:8pt; font-weight:600; color:var(--ink-400); text-align:center; }
  @page { margin-bottom:18mm; }
}

/* ============================================================================
   Cetak — dosir kandidat (tab Profil). Perekrut mencetaknya untuk panel
   wawancara, jadi susunan tiga panel dilipat menjadi satu kolom kertas dan
   setiap bagian tetap utuh di satu halaman.
   ============================================================================ */
@media print {
  /* Kerangka layar kerja tidak ada artinya di kertas. */
  .erail, .clist-col, .whead, .dossier-htop, .dtabs, .pd-side .action-circle,
  .cv-modal, .modal-overlay, .fab, .toast { display:none !important; }

  /* Panel yang menggulir sendiri harus mengalir bebas saat dicetak, kalau tidak
     hanya bagian yang terlihat di layar yang ikut tercetak. */
  .dossier, .dbody, .work-body, .app-body, .app-shell {
    display:block !important; overflow:visible !important; height:auto !important;
    max-height:none !important; }

  /* Dua kolom menjadi satu: kertas tidak punya kolom samping. */
  .pd-split { display:block !important; }
  .pd-side { margin-top:12px !important; }
  .pd-grid { display:block !important; }
  .pd-grid > * + * { margin-top:10px !important; }
  .pd-wrap > * + *, .pd-main > * + * { margin-top:10px !important; }

  /* Bagian tidak boleh terbelah di antara dua halaman. */
  .pd-card, .pd-hero, .sidebar-card, .pd-cv-row { break-inside:avoid;
    box-shadow:none !important; }

  /* Rangka PDF hanya berlaku di layar; berkas aslinya dicetak terpisah. Yang
     dilipat adalah wadahnya juga — tinggi 560px-nya inline, jadi tanpa ini
     kertas menyisakan kotak kosong hampir sehalaman. */
  .pd-cv-frame { display:none !important; height:auto !important; overflow:visible !important; }

  /* Kepala cetak: di layar judulnya sudah ada di pita dosir yang kini hilang. */
  .print-head { display:block !important; }
}
.print-head { display:none; }


/* ---- Kepala "Lowongan Aktif" ----
   Tiga wilayah bersaing dalam satu baris: judul (153px), tiga ukuran (~340px),
   tombol (130px). Pada kolom 615px ketiganya tidak muat, dan yang mengalah harus
   dipilih — bukan dibiarkan pecah di tempat acak. Judul tidak pernah pecah;
   kelompok angka yang pindah baris, utuh, dan tetap menepi ke kanan. */
.jobs-head { align-items:center; }
.jobs-head-title { flex:0 0 auto; white-space:nowrap; }
.jobs-head-metrics { flex:0 1 auto; min-width:0; align-items:center; }
.jobs-head-metrics .row { align-items:center; }
/* Angka dan labelnya dipusatkan pada garis tengah yang sama, termasuk yang
   berbantalan — label 9px tidak menarik barisnya turun. */
.jobs-head-metrics .eyebrow { line-height:1; }
/* Tombol selalu menepi ke kanan, apa pun lebar kelompok angka. */
.jobs-head > .btn { margin-left:auto; }
@container page (max-width:700px){
  /* Tombol tetap di baris judul; angka turun utuh sebagai keterangan di bawahnya,
     tetap rata kiri sejajar judul. */
  .jobs-head-metrics { flex:1 1 100%; order:3; }
  .jobs-head > .btn { order:2; }
}