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

/* ===================== APP SHELL / PERSONA SWITCH ===================== */
/* Reduced-motion: honor the OS setting — strip entrance animations & transitions,
   keep functional opacity. Decorative loops (pulse/spin) reduced to none. */
@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:hidden; transition:width .2s ease; }
.erail-collapsed { 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); 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:var(--brand-blue-light); }

.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; scrollbar-gutter:stable; padding:var(--space-6) var(--space-8) 48px; }
/* One shared page container: nav bar and every page's content align to the same width */
.center-col { max-width:var(--page-max); 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:18px var(--space-8) 0; border-bottom:1px solid var(--border); background:rgba(255,255,255,.8); backdrop-filter:blur(8px); flex:none; }
.wtabs { display:flex; gap:var(--space-1); margin-top:var(--space-4); }
.wtab { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3) 18px; border:none; background:transparent;
  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:var(--brand-blue); }
.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); }

/* view-swap transition + keyboard focus rings */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
@media (prefers-reduced-motion: no-preference) {
  .scrollarea { animation:dViewIn .26s ease; }
}
@keyframes dViewIn { from { opacity:0; transform:translateY(6px); } }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--brand-blue); outline-offset:2px;
}
.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:18px; 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; }
.dhead { display:flex; align-items:center; gap:var(--space-4); padding:22px 28px; border-bottom:1px solid var(--border); background:#fff; }
.dtabs { display:flex; gap:var(--space-1); padding:0 28px; border-bottom:1px solid var(--border); background:#fff; flex:none; 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); 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); }

/* settings horizontal tabs */
.set-tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); }
.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); }
.gap.warn { background:var(--brand-navy-soft); color:var(--brand-navy); }
.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); 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; }
.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; transition:all .15s; cursor:pointer; }
.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; }

/* 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; }

/* ===================== 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:#fff; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:flex-start; padding:0 calc(var(--space-8) + var(--scrollbar-w)) 0 var(--space-8); gap:0; z-index:40; }
.stopbar-inner { width:100%; max-width:var(--page-max); margin:0 auto; height:64px;
  display:flex; align-items:center; justify-content:flex-start; gap:var(--space-5); }
.stab { position:relative; isolation:isolate; display:flex; align-items:center; gap:var(--space-2); padding:0 var(--space-3); height:64px; border:none; background:transparent; white-space:nowrap;
  font-size:13px; font-weight:600; color:var(--ink-700); transition:color .15s; }
/* active state is a filled pill behind the label rather than an underline — it
   needs no anchoring to the bar's edge, so it can't read as a floating line */
.stab::after { content:''; position:absolute; inset:12px 2px; border-radius:var(--radius-btn); background:transparent; transition:background .15s; z-index:0; }
.stab > * { position:relative; z-index:1; }
.stab:hover { color:var(--ink-900); }
.stab:hover::after { background:var(--surface-muted); }
.stab.on { color:var(--brand-blue); font-weight:800; }
.stab.on::after { background:var(--brand-blue-light); }
.stab-badge { min-width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; background:var(--danger); color:#fff; font-size:10.5px; font-weight:800; padding:0 5px; 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; }
  .seeker-topnav { display:none !important; }
  .stopbar-sep { display:none !important; }
}
@media (max-width:900px){
  .stopbar { padding:0 calc(14px + var(--scrollbar-w)) 0 14px; gap:var(--space-2); }
  .stopbar-inner { gap:var(--space-2); }
  .stab { padding:0 var(--space-2); gap:0; }
  .stab-label { display:none; }
}

/* ===== Mobile slide-in drawer (jobseeker) ===== */
.seeker-hamb { display:none; width:38px; height:38px; border-radius:9999px; border:1px solid var(--border); background:#fff; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-700); flex:none; }
.seeker-hamb:hover { background:var(--surface-muted); }
@media (max-width:1000px){
  .seeker-hamb { display:flex; }
}
@media (max-width:760px){
  .stopbar { height:56px; padding:0 calc(14px + var(--scrollbar-w)) 0 14px; gap:10px; }
  .stopbar-inner { height:56px; }
}
.seeker-drawer { position:fixed; inset:0; z-index:200; background:rgba(15,23,42,.45); animation:drawerFade .2s ease; }
@keyframes drawerFade { from { opacity:0; } }
.seeker-drawer-panel { position:absolute; top:0; left:0; bottom:0; width:84%; max-width:320px; background:#fff; display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg); animation:drawerSlide .24s cubic-bezier(.22,1,.36,1); }
@keyframes drawerSlide { from { transform:translateX(-100%); } }
.seeker-drawer-top { display:flex; align-items:center; gap:10px; padding:16px; border-bottom:1px solid var(--border-soft); }
.seeker-drawer-x { margin-left:auto; width:34px; height:34px; border-radius:9999px; border:none; background:var(--surface-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-500); flex:none; }
.seeker-drawer-x:hover { background:var(--border); }
.seeker-drawer-scroll { flex:1; overflow-y:auto; padding:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
.seeker-drawer-label { font-size:var(--eyebrow-size); font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-400); margin:14px 8px 5px; }
.seeker-drawer-label:first-child { margin-top:2px; }
.seeker-drawer-item { display:flex; align-items:center; gap:13px; width:100%; text-align:left; background:none; border:none; padding:12px 13px; border-radius:12px; font-family:inherit; font-size:15px; font-weight:700; color:var(--ink-700); cursor:pointer; }
.seeker-drawer-item .material-symbols-outlined { color:var(--ink-400); flex:none; }
.seeker-drawer-item:hover { background:var(--surface-muted); }
.seeker-drawer-item.on { background:var(--brand-blue-light); color:var(--brand-blue); }
.seeker-drawer-item.on .material-symbols-outlined { color:var(--brand-blue); }
.seeker-drawer-item.danger { color:var(--danger); }
.seeker-drawer-item.danger .material-symbols-outlined { color:var(--danger); }
.seeker-drawer-badge { background:var(--danger); color:#fff; font-size:var(--eyebrow-size); font-weight:800; min-width:18px; height:18px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; }
.seeker-drawer-div { height:1px; background:var(--border-soft); margin:10px 8px; }
.mkt-hero { background:var(--brand-blue); padding:36px calc(var(--space-8) + var(--scrollbar-w)) 30px var(--space-8); flex:none; }
.mkt-hero-inner { max-width:var(--page-max); 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(--brand-blue); }
/* grid variant — equal-height cards with aligned header, title, and footer */
.mkt-grid-card { display:flex; flex-direction:column; height:100%; padding:var(--space-6); min-height:230px; }
.mkt-grid-card .mkt-jt { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; }
/* spacer absorbs free space so meta+skills sit near the divider, while its own
   min-height guarantees the gap when a card is completely full */
.mkt-grid-spacer { flex:1 1 auto; min-height:var(--space-5); }
.mkt-grid-card .hr.mkt-foot-div { width:100%; margin-top:18px; }
.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); }
.ci.sm { width:36px; height:36px; border-radius:10px; font-size:var(--label-md-size); }
.mkt-match { display:flex; flex-direction:column; align-items:center; flex:none; }
.mkt-match.lg { align-items:center; }
.detail-top { padding:var(--space-8) var(--space-8) var(--space-6); background:var(--bg-tinted); border-bottom:1px solid var(--border-soft); }
/* Detail body: description reads in a comfortable measure, facts sit in a side rail
   so the wide desktop viewport isn't a single narrow column of text. */
.detail-body { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:var(--space-8); padding:var(--space-8); align-items:start; }
@media (max-width:900px){ .detail-body { grid-template-columns:1fr; gap:var(--space-6); } }
.detail-lede { font-size:var(--body-md-size); font-weight:600; line-height:1.7; color:var(--ink-700); margin-top:var(--space-2); text-wrap:pretty; }
.detail-list { margin:var(--space-2) 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.detail-list li { position:relative; padding-left:20px; font-size:var(--body-md-size); line-height:1.6; color:var(--ink-600); text-wrap:pretty; }
.detail-list li::before { content:''; position:absolute; left:6px; top:9px; width:5px; height:5px; border-radius:9999px; background:var(--ink-300); }
.detail-side { display:flex; flex-direction:column; gap:var(--space-4); }
.detail-side-card { border:1px solid var(--border); border-radius:var(--radius-card); padding:var(--space-5); background:#fff; }
.detail-side-p { font-size:var(--label-md-size); font-weight:600; line-height:1.6; color:var(--ink-500); margin-top:var(--space-3); text-wrap:pretty; }
.detail-facts { margin:var(--space-3) 0 0; display:flex; flex-direction:column; gap:11px; }
.detail-facts > div { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); }
.detail-facts dt { font-size:var(--label-md-size); font-weight:600; color:var(--ink-500); }
.detail-facts dd { margin:0; font-size:var(--label-md-size); font-weight:800; color:var(--ink-900); text-align:right; }
.detail-rel { display:flex; flex-direction:column; margin-top:var(--space-2); }
.detail-rel-row { display:flex; align-items:center; gap:var(--space-3); padding:10px 0; border:none; background:none;
  cursor:pointer; border-top:1px solid var(--border-soft); width:100%; }
.detail-rel-row:first-child { border-top:none; }
.detail-rel-t { font-size:var(--label-md-size); font-weight:800; color:var(--ink-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.detail-rel-c { font-size:var(--label-sm-size); font-weight:600; color:var(--ink-500); margin-top:1px; }
.detail-rel-row:hover .detail-rel-t { color:var(--brand-blue); }
/* guest (logged-out) detail: the score itself is what signing in unlocks, so the
   tile keeps .detail-match's exact box and just replaces the number with a lock. */
.detail-match.detail-match-locked { border-style:dashed; text-decoration:none; transition:all .15s; }
.detail-match-locked .detail-match-n { display:flex; align-items:center; justify-content:center; height:34px; color:var(--ink-300); }
.detail-match-locked:hover { border-color:var(--brand-blue); background:var(--brand-blue-light); }
.detail-match-locked:hover .detail-match-n { color:var(--brand-blue); }
/* match score as a roomy tile — a ring at this size crams the number and label together */
.detail-match { width:124px; padding:var(--space-3) var(--space-4) 14px; border:1px solid var(--border); border-radius:var(--radius-card);
  background:#fff; text-align:center; }
.detail-match-n { font-size:var(--headline-lg-size); font-weight:800; letter-spacing:-.03em; line-height:1.05; color:var(--m); }
.detail-match-l { font-size:var(--eyebrow-size); font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-400); margin-top:1px; white-space:nowrap; }
.detail-match-bar { height:4px; border-radius:9999px; background:var(--border); overflow:hidden; margin-top:10px; }
.detail-match-bar i { display:block; height:100%; border-radius:9999px; background:var(--m);
  transition:width .8s cubic-bezier(.2,.8,.3,1); }
.detail-signup { border-color:var(--brand-blue); background:var(--brand-blue-light); }
.apply-bar { padding:var(--space-4) calc(var(--space-8) + var(--scrollbar-w)) var(--space-4) var(--space-8); 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; }

/* ===================== TRACKER v2 (status-driven cards) ===================== */
@keyframes pulse2 { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(.6); } }
.lamaran .trk-stk { display:flex; flex-direction:column; gap:14px; margin-top:var(--space-5); }
.lamaran .trk-group-label { font-size:var(--eyebrow-size); font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-400); margin:22px 0 -2px 2px; }
.lamaran .tc { background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-sm); overflow:hidden; }
.lamaran .tc-head { display:flex; align-items:center; gap:14px; width:100%; padding:18px 20px; border:none; background:#fff; text-align:left; cursor:pointer; font-family:inherit; transition:background .15s; }
.lamaran .tc-head:hover { background:var(--surface-muted); }
.lamaran .tc.open .tc-head { border-bottom:1px solid var(--border-soft); }
.lamaran .tc-ci { width:48px; height:48px; border-radius:13px; color:#fff; display:flex; align-items:center; justify-content:center; font-size:var(--body-lg-size); font-weight:800; flex:none; box-shadow:0 4px 10px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.22); }
.lamaran .tc-title { font-size:var(--body-lg-size); font-weight:800; color:var(--ink-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.lamaran .tc-sub { font-size:var(--label-md-size); font-weight:700; color:var(--ink-500); margin-top:2px; }
.lamaran .trk-live { display:inline-flex; align-items:center; gap:5px; font-size:var(--eyebrow-size); font-weight:800; letter-spacing:.04em; color:var(--brand-teal); background:rgba(0,128,128,.10); padding:3px 8px; border-radius:9999px; }
.lamaran .trk-livedot { width:6px; height:6px; border-radius:9999px; background:var(--brand-teal); display:inline-block; animation:pulse2 1.4s infinite; }
.lamaran .spill { display:inline-flex; align-items:center; justify-content:center; gap:5px; font-size:var(--label-sm-size); font-weight:800; padding:5px 12px; border-radius:9999px; white-space:nowrap; flex:none; }
.lamaran .spill .material-symbols-outlined { font-size:15px; }
.lamaran .spill.blue { background:var(--brand-blue-light); color:var(--brand-blue); }
/* amber is Kredit; the review stage is navy — see the navy .spill.amber below */
.lamaran .spill.emerald { background:var(--success-soft); color:var(--success-ink); }
.lamaran .spill.red { background:var(--danger-soft); color:var(--danger); }
/* Stage track: the pill alone read as a button and never said where in the
   process the application sat. Position, track, then the stage named. */
.lamaran .strack { flex:none; width:184px; display:flex; flex-direction:column; gap:8px; }
/* same node vocabulary as the expanded .tl timeline, shrunk to the row: filled
   dot = passed, ringed dot = here, hollow = ahead, blue line = progress */
.lamaran .strack-bar { display:flex; align-items:center; padding:3px 3px; }
.lamaran .strack-bar b { flex:1; height:2px; border-radius:1px; background:var(--border); }
.lamaran .strack-bar b.on { background:var(--brand-blue); }
.lamaran .strack-bar i { flex:none; width:9px; height:9px; border-radius:9999px; box-sizing:border-box; border:2px solid var(--border); background:#fff; }
.lamaran .strack-bar i.done { background:var(--brand-blue); border-color:var(--brand-blue); }
.lamaran .strack-bar i.cur { background:var(--brand-blue); border-color:var(--brand-blue); box-shadow:0 0 0 3px var(--brand-blue-light); }
.lamaran .strack-bar i.stop { background:var(--danger); border-color:var(--danger); }
.lamaran .strack-n { display:flex; align-items:center; gap:5px; font-size:var(--label-md-size); font-weight:800; color:var(--ink-900); }
.lamaran .strack-n .material-symbols-outlined { font-size:15px; }
.lamaran .strack.blue .strack-n, .lamaran .strack.ai .strack-n, .lamaran .strack.aiopt .strack-n { color:var(--brand-blue); }
.lamaran .strack.amber .strack-n, .lamaran .strack.aiwait .strack-n { color:var(--brand-navy); }
.lamaran .strack.emerald .strack-n { color:var(--success-ink); }
.lamaran .strack.red .strack-n, .lamaran .strack.aiskip .strack-n { color:var(--ink-500); }
.lamaran .mini-slot { width:64px; display:flex; justify-content:flex-end; flex:none; }
.lamaran .mini { display:flex; align-items:center; gap:4px; }
.lamaran .mini i { width:7px; height:7px; border-radius:9999px; background:var(--border); display:block; }
.lamaran .mini i.on { background:var(--brand-blue); }
.lamaran .mini i.cur { background:var(--brand-blue); box-shadow:0 0 0 3px var(--brand-blue-light); }
.lamaran .mini i.stop { background:var(--danger); }
.lamaran .tc-body { padding:20px 22px; }
.lamaran .tl { display:flex; align-items:flex-start; position:relative; margin-bottom:18px; }
.lamaran .tlstep { flex:1; display:flex; flex-direction:column; align-items:center; position:relative; gap:9px; }
.lamaran .tldot { width:30px; height:30px; border-radius:9999px; display:flex; align-items:center; justify-content:center; z-index:2; flex:none; background:#fff; border:2px solid var(--border); }
.lamaran .tlstep.done .tldot { background:var(--brand-blue); border-color:var(--brand-blue); }
.lamaran .tlstep.current .tldot { background:#fff; border-color:var(--brand-blue); box-shadow:0 0 0 4px var(--brand-blue-light); }
.lamaran .tlstep.current .tldot .cdot { width:11px; height:11px; border-radius:9999px; background:var(--brand-blue); }
.lamaran .tlstep.hired .tldot { background:var(--success); border-color:var(--success); }
.lamaran .tlstep.stop .tldot { background:var(--danger); border-color:var(--danger); }
.lamaran .tllabel { font-size:var(--eyebrow-size); font-weight:700; color:var(--ink-400); text-align:center; max-width:78px; line-height:1.3; }
.lamaran .tlstep.current .tllabel, .lamaran .tlstep.hired .tllabel { color:var(--ink-900); font-weight:800; }
.lamaran .tlstep.done .tllabel { color:var(--ink-600); }
.lamaran .tlstep.stop .tllabel { color:var(--danger); font-weight:800; }
.lamaran .tlline { position:absolute; top:14px; left:50%; width:100%; height:3px; background:var(--border); z-index:1; border-radius:9999px; }
.lamaran .tlline.done { background:var(--brand-blue); }
.lamaran .trk-hint { display:flex; gap:9px; align-items:flex-start; margin-top:16px; padding:12px 14px; border-radius:12px; font-size:var(--label-md-size); font-weight:600; line-height:1.5; }
.lamaran .trk-hint .material-symbols-outlined { font-size:18px; flex:none; margin-top:1px; }
.lamaran .trk-hint b { font-weight:800; color:var(--ink-900); }
.lamaran .trk-hint.blue { background:var(--bg-tinted); color:var(--ink-700); } .lamaran .trk-hint.blue .material-symbols-outlined { color:var(--brand-blue); }
.lamaran .trk-hint.amber { background:var(--brand-navy-soft); color:var(--brand-navy); } .lamaran .trk-hint.amber .material-symbols-outlined { color:var(--brand-navy); }
.lamaran .trk-hint.emerald { background:var(--success-soft); color:var(--success-ink); } .lamaran .trk-hint.emerald .material-symbols-outlined { color:var(--success); }
.lamaran .trk-hint.red { background:var(--danger-soft); color:var(--ink-600); } .lamaran .trk-hint.red .material-symbols-outlined { color:var(--danger); }
.lamaran .acts { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; justify-content:space-between; align-items:center; }
.lamaran .acts-right { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
/* the two tertiary links belong together on the left; only the stage action is
   pushed to the far edge — otherwise a card without a stage action spread them
   to opposite ends of the row */
.lamaran .acts-left { display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
.lamaran .btn2 { display:inline-flex; align-items:center; gap:6px; border-radius:var(--radius); font-family:inherit; font-weight:800; font-size:var(--label-md-size); cursor:pointer; padding:9px 16px; border:1px solid transparent; }
.lamaran .btn2 .material-symbols-outlined { font-size:17px; }
.lamaran .btn2.primary { background:var(--brand-blue); color:#fff; box-shadow:var(--shadow-cta, 0 2px 8px rgba(37,99,235,.28)); }
.lamaran .btn2.success { background:var(--success-ink); color:#fff; box-shadow:0 2px 8px rgba(4,120,87,.28); }
.lamaran .btn2.link { background:none; border:none; box-shadow:none; color:var(--brand-blue); padding:9px 12px; border-radius:var(--radius); transition:background .15s; }
.lamaran .btn2.link:hover { background:var(--brand-blue-light); }
.lamaran .btn2.link.danger { color:var(--danger); }
.lamaran .btn2.link.danger:hover { background:var(--danger-soft); }
/* secondary action with the same shape and weight as a solid button — for pairs
   where refusing must be as easy to hit as accepting */
.lamaran .btn2.outline { background:#fff; border:1px solid var(--border); box-shadow:none; color:var(--ink-700); }
.lamaran .btn2.outline:hover { border-color:var(--danger); color:var(--danger); background:var(--danger-soft); }
.lamaran .btn2.sm { padding:7px 13px; font-size:var(--label-sm-size); }
.lamaran .btn2.sm .material-symbols-outlined { font-size:15px; }
.lamaran .note-wrap { margin-top:16px; padding-top:15px; border-top:1px solid var(--border-soft); }
.lamaran .note-empty { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:13px 15px; border:1.5px dashed var(--border); border-radius:13px; background:#fff; cursor:pointer; font-family:inherit; transition:all .15s; }
.lamaran .note-empty:hover { border-color:color-mix(in srgb, var(--brand-blue) 45%, transparent); background:var(--bg-tinted); }
.lamaran .note-empty-ic { width:34px; height:34px; border-radius:10px; background:var(--brand-blue-light); display:flex; align-items:center; justify-content:center; flex:none; }
.lamaran .note-empty-ic .material-symbols-outlined { font-size:19px; color:var(--brand-blue); }
.lamaran .note-empty-t { flex:1; min-width:0; }
.lamaran .note-empty-t b { display:block; font-size:var(--label-md-size); font-weight:800; color:var(--ink-800); }
.lamaran .note-empty-t small { display:block; font-size:var(--label-sm-size); font-weight:600; color:var(--ink-400); margin-top:1px; }
.lamaran .note-card { padding:11px 0 0; }
.lamaran .note-card-top { display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.lamaran .note-eyebrow { font-size:var(--eyebrow-size); font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-400); display:inline-flex; align-items:center; gap:4px; }
.lamaran .note-eyebrow .material-symbols-outlined { font-size:12px; }
.lamaran .note-edit { margin-left:auto; background:none; border:none; font-family:inherit; font-size:var(--label-sm-size); font-weight:800; color:var(--brand-blue); cursor:pointer; padding:0; }
.lamaran .note-edit:hover { text-decoration:underline; }
.lamaran .note-text { font-size:var(--label-md-size); font-weight:600; color:var(--ink-700); line-height:1.55; white-space:pre-wrap; }
.lamaran .note-saved { margin-left:auto; font-size:var(--eyebrow-size); font-weight:800; color:var(--success); display:inline-flex; align-items:center; gap:3px; }
.lamaran .note-saved .material-symbols-outlined { font-size:13px; }
.lamaran textarea.note-ta { width:100%; box-sizing:border-box; border:1.5px solid var(--border); border-radius:12px; padding:12px 13px; font-family:inherit; font-size:var(--body-md-size); font-weight:600; color:var(--ink-800); line-height:1.55; resize:vertical; min-height:76px; background:#fff; transition:border-color .15s, box-shadow .15s; }
.lamaran textarea.note-ta::placeholder { color:var(--ink-300); font-weight:500; }
.lamaran textarea.note-ta:focus { outline:none; border-color:var(--brand-blue); box-shadow:0 0 0 3px var(--brand-blue-light); }
.lamaran .note-priv { display:flex; align-items:center; gap:5px; font-size:var(--eyebrow-size); font-weight:700; color:var(--ink-400); margin-top:9px; }
.lamaran .note-priv .material-symbols-outlined { font-size:13px; }
.lamaran .note-actions { display:flex; gap:8px; margin-top:11px; }

/* ===================== 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:var(--space-4) 18px 18px; 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:220px; padding:6px; }
.auto-dropdown-item { display:flex; align-items:center; gap:10px; width:100%; padding:9px var(--space-3);
  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:var(--brand-blue-light); }

/* 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:var(--ink-900); }

/* ===================== 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:var(--brand-teal-hover); }
.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 var(--brand-blue-light); }
.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:none; }
.btn-danger:hover { background:var(--danger-hover); }

/* Notifications dropdown */
.stopbar .icobtn { border:none; background:transparent; }
.stopbar .icobtn:hover { border:none; background:var(--surface-muted); box-shadow:none; 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:var(--surface-muted); }
.notif-item.unread { background:var(--bg-tinted); }
.notif-item.unread:hover { background:var(--brand-blue-light); }

/* 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);
  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); }
.wtxn-amt.minus { color:var(--warning); }

/* 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);
  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:var(--brand-blue-light); }
@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); }
.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:0; gap:0; overflow:hidden; }
.view-toggle button { width:36px; height:32px; border:none; background:none; border-radius:0; 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:stretch; gap:var(--space-5); padding:var(--space-5) var(--space-6); }
.mkt-row .ci { width:52px; height:52px; border-radius:14px; flex:none; align-self:flex-start; }
.mkt-row-main { flex:1; min-width:0; }
.mkt-row-chips { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:var(--space-2); }
/* right column: primary control at the top, status/date anchored at the bottom */
.mkt-row-right { display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:var(--space-3); flex:none; }
.mkt-row-right.right-end { justify-content:flex-end; }
/* meta line — icon + text, not pills, so the match chip stays the only badge */
.meta-line { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-5); margin-top:var(--space-3);
  font-size:var(--label-md-size); font-weight:700; color:var(--ink-600); }
.meta-line .m { display:inline-flex; align-items:center; gap:6px; }
.meta-line .m .material-symbols-outlined { color:var(--ink-400); }
/* salary carries weight, not colour — match stays the only accent on the card */
.meta-line .m-pay { color:var(--ink-900); font-weight:800; }
.mkt-grid-card .meta-line { gap:var(--space-3); }
.row-co { margin-top:6px; }
.mkt-grid-card .row-co { margin-top:var(--space-2); }
.row-skills { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:var(--space-3);
  font-size:var(--label-md-size); font-weight:700; color:var(--ink-500); }
.mkt-grid-card .row-skills { margin-top:var(--space-4); }
.row-posted { display:inline-flex; align-items:center; gap:5px; font-size:var(--label-md-size); font-weight:700; color:var(--ink-400); white-space:nowrap; }
.row-applied { display:inline-flex; align-items:center; gap:5px; font-size:var(--label-md-size); font-weight:800; color:var(--success); white-space:nowrap; }
/* gated match teaser — dashed + lock, per the DS gated-content rule */
.chip-lock { background:var(--surface-muted); color:var(--ink-500); border:1px dashed var(--border); font-weight:800; }
.chip-match { font-weight:800; }
@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; }
.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:0; background:var(--surface-muted); border-radius:var(--radius-md); padding:0; flex:none; overflow:hidden; }
.view-toggle button { width:36px; height:34px; border:none; border-radius:0; 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:none; }

/* ===================== 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); }

/* 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; }
.notif-dropdown .btn-link { text-decoration:none; }
.notif-dropdown .btn-link:hover { text-decoration:underline; opacity:1; }

/* 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:var(--surface-muted); }
.notif-page-row.unread { background:var(--bg-tinted); }
.notif-page-row.unread:hover { background:var(--brand-blue-light); }
.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; }

/* 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); }


/* ===================== 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:18px var(--space-5); }
.pd-head-top { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.pd-badge { width:40px; height:40px; border-radius:11px; 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); }
.pd-meter { margin-top:var(--space-4); }
.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:var(--space-2); margin-bottom:var(--space-3); }
.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 var(--danger); 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:1280px){
  .pd-split { grid-template-columns:1fr; }
  .pd-side { flex-direction:row; flex-wrap:wrap; }
  .pd-side > * { flex:1 1 260px; }
}

/* 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 { 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; }
  .dossier-htop { padding:14px var(--space-4) var(--space-3) !important; gap:var(--space-3) !important; }
  .dossier-stats { padding:10px var(--space-4) 14px !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; }
  .lamaran .mini-slot { display:none; }
  .lamaran .tc-head { gap:11px; padding:14px 15px; }
}
@media (max-width:640px){
  .msg-2pane { flex-direction:column; }
  .msg-2pane .msg-list { width:100% !important; flex-shrink:1 !important; max-height:240px;
    border-right:none !important; border-bottom:1px solid var(--border); }
}
@media (max-width:520px){
  .wallet-card { flex-wrap:wrap; gap:14px; }
  .wallet-card .wallet-bal { margin-left:auto; text-align:right; }
  .wallet-card .wallet-topup { width:100%; justify-content:center; }
}
@media (max-width:560px){
  .scrollarea { padding-left:var(--space-4); padding-right:var(--space-4); }
  .stopbar { padding-left:var(--space-4); padding-right:calc(var(--space-4) + var(--scrollbar-w)); }
}
@media (max-width:400px){
  .scrollarea { padding-left:var(--space-3); padding-right:var(--space-3); }
  .stopbar { padding-left:var(--space-3); padding-right:calc(var(--space-3) + var(--scrollbar-w)); }
}

/* Profile header: completeness and visibility are separate concerns, so they sit
   side by side rather than stacked inside one very wide card — which is what
   left the 92% marooned at the far right of its own label. */
.prof-top { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--space-4); margin-bottom:18px; align-items:stretch; }
.prof-top > .panel { margin-bottom:0; }
.prof-vis { display:flex; flex-direction:column; }
@media (max-width:820px){ .prof-top { grid-template-columns:1fr; } }

/* ---- Offer actions carry the app's biggest decision ---------------------------
   Accepting or declining an offer is far more consequential than the routine
   actions on other stages ("Konfirmasi", "Pesan perekrut"), so at the offer stage
   the pair scales up: Terima takes real width as the primary, Tolak stays quiet
   but becomes a proper 44px target rather than a small red link, and the tertiary
   "Lihat lowongan" drops to its own line so it stops competing for the row. */
.lamaran .acts-offer { flex-wrap:wrap; gap:12px; }
.lamaran .acts-offer .acts-right { flex:1; min-width:260px; display:flex; align-items:stretch; gap:10px; }
.lamaran .acts-offer .acts-right .btn2 { min-height:46px; font-size:var(--body-md-size); padding:12px 22px; }
.lamaran .acts-offer .btn2.success { flex:1 1 0; justify-content:center; }
.lamaran .acts-offer .btn2.link.danger { flex:1 1 0; justify-content:center; background:#fff;
  border:1px solid var(--border); box-shadow:none; color:var(--danger); padding:12px 20px; }
.lamaran .acts-offer .btn2.link.danger:hover { border-color:var(--danger); background:var(--danger-soft); }
.lamaran .acts-offer > .acts-left { order:2; flex-basis:100%; }
.lamaran .acts-offer > .acts-left .btn2.link { justify-content:flex-start; padding-left:0; min-height:0; }
@media (max-width:560px){
  .lamaran .acts-offer .acts-right { min-width:0; flex-wrap:wrap; }
  .lamaran .acts-offer .btn2.success, .lamaran .acts-offer .btn2.link.danger { flex-basis:100%; justify-content:center; }
}

/* ============================================================================
   Narrow-window safety. The desktop build redirects to mobile below 700px ON
   LOAD ONLY (no resize listener, by design), so dragging a desktop window narrow
   keeps THIS layout all the way down — these overlays and grids therefore have
   to survive ~360px rather than assuming a desktop viewport.
   ============================================================================ */
/* Fixed-width popovers could not shrink: 380px of dropdown in a 360px window
   overflowed horizontally and the panel ran off-screen. */
.notif-dropdown, .filter-pop { max-width:calc(100vw - 28px); }
.ai-popup, .rf-dlg, .cfm { max-width:min(420px, calc(100vw - 28px)); }
/* The CV review pane is a fixed 480px beside a flexible page — below ~900px the
   two cannot coexist, 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); }
}
@media (max-width:420px){
  /* two counters side by side leave ~150px each once padding and the divider are
     taken out, which is not enough for a headline figure plus its label */
  .rf-counts { grid-template-columns:1fr; }
  .rf-count + .rf-count { padding-left:0; padding-top:14px; margin-top:14px;
    border-left:none; border-top:1px solid var(--border); }
  /* the offer's two buttons need the full row each at this width */
  .lamaran .acts-offer .acts-right { min-width:0; }
}
/* Long unbroken strings (referral links, emails, company names) must wrap rather
   than push the layout wider than the viewport. */
.rf-link-in, .detail-lede, .apl-t, .tc-title { overflow-wrap:anywhere; }

/* ============================================================================
   GUEST APPLY QUOTA — all of it lives in the apply dialog.
   A running tally in the top bar or on the job rows would nag on every screen
   for a fact that only matters at the moment of applying, so the rows carry one
   plain "Lamar" for everyone and the counting happens here.
   ============================================================================ */
.quota-line { display:inline-flex; align-items:center; gap:6px; font-size:var(--label-md-size);
  font-weight:700; color:var(--ink-500); }
.quota-line b { font-weight:800; color:var(--ink-900); }
/* the last free application is a hard limit, not a caution */
.quota-line.last { color:var(--danger); font-weight:800; }
.quota-line.last .material-symbols-outlined { color:var(--danger); }

/* a guest has no profile, so identity is collected at apply time */
.guest-ident { padding-bottom:var(--space-4); margin-bottom:var(--space-4); border-bottom:1px solid var(--border-soft); }
.guest-ident-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
@media (max-width:520px){ .guest-ident-grid { grid-template-columns:1fr; } }

/* The receipt's conversion block. A guest cannot open Lamaran Saya, so without
   this the application vanished with no confirmation and no way to claim it. */
.apply-signup { margin-top:var(--space-5); padding:var(--space-4); background:var(--bg-tinted);
  border:1px solid var(--brand-blue-light); border-radius:var(--radius-card); text-align:left; }
.apply-signup-n { font-size:var(--body-lg-size); font-weight:800; color:var(--ink-900); }
.apply-signup p { font-size:var(--label-md-size); font-weight:600; color:var(--ink-600);
  line-height:1.6; margin:6px 0 0; text-wrap:pretty; }
.apply-signup p b { font-weight:800; color:var(--ink-900); }

/* Guest quota, as pips + one clause. The old "Lamaran ke- 1 dari 5 tanpa akun"
   broke awkwardly at the hyphen and the bold numerals opened gaps mid-sentence.
   The pips carry the quantity, so the words only have to name it. */
.quota { display:inline-flex; align-items:center; gap:9px; }
.quota-pips { display:inline-flex; gap:4px; }
.quota-pips i { width:7px; height:7px; border-radius:9999px; background:var(--border); }
/* filled = already used, so a nearly-full row reads as "almost gone" at a glance */
.quota-pips i.on { background:var(--brand-blue); }
.quota-txt { font-size:var(--label-md-size); font-weight:600; color:var(--ink-500); white-space:nowrap; }
.quota-txt b { font-weight:800; color:var(--ink-900); }
/* the last one is the only state that warns */
.quota:has(.quota-pips i:nth-child(5).on) .quota-txt,
.quota-txt b:only-child { color:var(--ink-900); }

/* The quota is information, not a control, so it sits above the action row rather
   than competing with Batal and Kirim for the same line. */
.la-quota { padding:11px var(--space-6); border-top:1px solid var(--border-soft); background:var(--surface-muted); }

/* The quota strip spans the dialog's full width, so a left-aligned line left a
   long empty run to its right; centred, the strip reads as one band rather than
   a label stranded in it. */
.la-quota { display:flex; justify-content:center; }

/* Profile completeness is progress, not a score, so it reads as a meter — the
   pill made it look like the job-match chip beside it, two identical badges
   asserting unrelated things. */
.prof-meter { flex:none; width:104px; }
.prof-meter-top { display:flex; align-items:baseline; justify-content:space-between; gap:6px;
  font-size:var(--label-sm-size); font-weight:700; color:var(--ink-500); margin-bottom:5px; }
.prof-meter-top b { font-weight:800; color:var(--success-ink); }
.prof-meter-bar { height:5px; border-radius:9999px; background:var(--border); overflow:hidden; }
.prof-meter-bar i { display:block; height:100%; border-radius:9999px; background:var(--success); }

/* ---- Apply dialog polish ----------------------------------------------------
   The body carried its own maxHeight + overflow while Modal already scrolled,
   producing two scrollbars side by side. The modal owns the scroll. */
.apply-body { padding:18px var(--space-6); }

/* A section heading and the field labels inside it were both eyebrows, so the
   group and its contents shouted equally. The section is now a heading in ink;
   the eyebrow stays reserved for individual fields. */
.apply-sec { font-size:var(--body-md-size); font-weight:800; color:var(--ink-900);
  letter-spacing:-.01em; margin-bottom:var(--space-3); padding-top:var(--space-2); }

/* Detail chips were monochrome slate, so the row read as one grey mass. Each
   icon takes the colour of what it describes — place, time, level, pay, posted —
   while the text stays ink so the colour guides rather than shouts. */
.detail-top .chip .material-symbols-outlined { color:var(--ink-400); }
.detail-top .chip:nth-child(1) .material-symbols-outlined { color:var(--danger); }
.detail-top .chip:nth-child(2) .material-symbols-outlined { color:var(--brand-teal); }
.detail-top .chip:nth-child(3) .material-symbols-outlined { color:var(--brand-navy); }
.detail-top .chip:nth-child(4) .material-symbols-outlined { color:var(--t-accent); }
.detail-top .chip:nth-child(5) .material-symbols-outlined { color:var(--warning); }

.cv-x { flex:none; background:#fff; border:1px solid var(--border); color:var(--ink-500); }
.cv-x:hover { border-color:var(--danger); color:var(--danger); background:var(--danger-soft); }

/* Even rhythm in the apply form. The section heading, its question label and the
   field below were spaced by three different values, so the block read as
   drifting rather than grouped: one gap between a label and its own control,
   a larger one between groups. */
.apply-body .apply-sec { margin-bottom:var(--space-4); padding-top:var(--space-5); }
.apply-body .field-label, .apply-body .eyebrow { margin-bottom:var(--space-2); }
.apply-body > * + * { margin-top:var(--space-5); }

/* The guest identity group drew a divider under itself while sitting among fields
   that already separate by spacing alone — an extra rule where rhythm sufficed. */
.guest-ident { border-bottom:none; padding-bottom:0; margin-bottom:0; }

/* Profile completeness belongs to the profile, not to an application — it sits as
   one quiet actionable line rather than a card competing with the form. */
.apply-profile { display:flex; align-items:center; gap:9px; width:100%; margin-bottom:18px;
  padding:10px 13px; background:var(--bg-tinted); border:1px solid var(--brand-blue-light);
  border-radius:var(--radius); font-family:inherit; font-size:var(--label-md-size); font-weight:600;
  color:var(--ink-600); cursor:pointer; text-align:left; }
.apply-profile span { flex:1; min-width:0; }
.apply-profile b { font-weight:800; color:var(--ink-900); }
.apply-profile .material-symbols-outlined { color:var(--brand-blue); flex:none; }
.apply-profile:hover { border-color:var(--brand-blue); }

/* Match colour grading, from the same three-step rule the chips use (matchTone):
   teal at 85+, blue at 70+, slate below — so a score reads the same wherever it
   appears instead of each surface inventing its own thresholds. */
.detail-match.tone-teal  { --m:var(--t-accent); }
.detail-match.tone-blue  { --m:var(--brand-blue); }
.detail-match.tone-slate { --m:var(--ink-500); }

/* A grey fill on an editable field reads as disabled — the affixes are the muted
   part, not the input itself. */
.apply-body .sal-field, .apply-body .input-affix { background:#fff; }
.apply-body .input-affix { min-height:46px; padding:0 4px 0 12px; gap:10px; }
.apply-body .input-affix input { background:none; padding:11px 0; font-size:var(--body-md-size); }
.apply-body .input-affix .affix { color:var(--ink-400); font-weight:700; }
.apply-body .input-affix .affix-r { padding-right:12px; }

.detail-match.tone-amber { --m:var(--warning); }
.detail-match.tone-red   { --m:var(--danger); }
.detail-match.tone-amber .detail-match-n { color:var(--warning-ink); }
.detail-match.tone-red   .detail-match-n { color:var(--danger); }
.chip-match.chip-amber { background:var(--warning-soft); color:var(--warning-ink); }
.chip-match.chip-red   { background:var(--danger-soft); color:var(--danger); }



.apply-profile { background:none; border:none; padding:0 2px; margin-bottom:var(--space-5);
  color:var(--ink-500); }
.apply-profile:hover { border:none; }
.apply-profile .material-symbols-outlined { color:var(--ink-400); font-size:16px; }
/* the chevron said "go somewhere" without naming where — a worded link does */
.apply-profile .material-symbols-outlined:last-child { display:none; }
.apply-profile:hover span b { color:var(--brand-blue); }

.apply-body .input, .apply-body textarea, .apply-body input,
.apply-body .input-affix, .apply-body .input-affix input { background:#fff; }
.apply-body textarea:focus, .apply-body input:focus { outline:none; border-color:var(--brand-blue);
  box-shadow:0 0 0 3px var(--brand-blue-light); }


/* Light tint: the header is context, not a banner, so it sits behind the content
   rather than competing with it. */
.detail-top { background:var(--bg-tinted); border-bottom:1px solid var(--border-soft); }
.detail-top .detail-match { background:#fff; border:1px solid var(--border); }
.detail-top .detail-match .detail-match-l { color:var(--ink-400); }
.detail-top .detail-match .detail-match-bar { background:var(--border); }
/* chips keep their pills on a light ground — the containers read fine here, and
   each icon takes the colour of what it names */
.detail-top .chip { background:#fff; border:1px solid var(--border); padding:5px 12px;
  font-size:var(--label-md-size); font-weight:700; color:var(--ink-700); }
.detail-top .chip-blue { background:var(--brand-blue-light); border-color:var(--brand-blue-light);
  color:var(--t-accent); font-weight:800; }
.detail-top .chip-blue .material-symbols-outlined { color:var(--t-accent) !important; }

/* The figure takes its grade colour, same four steps as the bar and the chips. */
.detail-match .detail-match-n { color:var(--m, var(--ink-900)); }
.detail-match.tone-teal  .detail-match-n { color:var(--t-accent); }
.detail-match.tone-blue  .detail-match-n { color:var(--brand-blue); }
.detail-match.tone-amber .detail-match-n { color:var(--warning-ink); }
.detail-match.tone-red   .detail-match-n { color:var(--danger); }
.detail-match .detail-match-bar i { background:var(--m, var(--brand-blue)); }

/* Amber now means money, so a stage cannot borrow it. Navy: a DS hue, unused by
   any other stage, and dark enough to read as a real status rather than absent —
   distinct from the bright blue that marks an active interview. */
.lamaran .spill.amber { background:var(--brand-navy-soft); color:var(--brand-navy); }

/* ============================================================================
   Warnings leave amber. Amber is Kredit app-wide, so a caution wearing it makes
   money and warning read as one idea — and --warning-ink on a label is the brown
   that was explicitly rejected. Navy for heads-up, red for a hard limit.
   ============================================================================ */
/* ---- Lamaran Saya controls ------------------------------------------------------
   ONE toolbar: stage segments on a slate track (the active segment lifts to white),
   the "needs you" toggle, then search and sort. The result count sits with the
   pager under the list instead of taking a third row above it. */
/* One row of controls, all 38px on the same baseline: find, the two things you
   choose (stage, order — selects, so they do not grow with the pipeline), and the
   one thing you toggle. */
.lamaran .trk-bar { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:18px 0 14px; }
.lamaran .trk-sel { display:inline-flex; align-items:center; gap:6px; height:38px;
  border:1px solid var(--border); border-radius:var(--radius); background:#fff; padding:0 13px;
  font-family:inherit; font-size:var(--label-md-size); font-weight:800; color:var(--ink-900);
  cursor:pointer; white-space:nowrap; transition:border-color .15s, color .15s, background .15s; }
.lamaran .trk-sel .k { font-weight:700; color:var(--ink-500); }
.lamaran .trk-sel .material-symbols-outlined { font-size:18px; color:var(--ink-400); margin-left:1px; }
.lamaran .trk-sel:hover { border-color:var(--brand-blue); }
.lamaran .trk-sel.on { border-color:var(--brand-blue); background:var(--brand-blue-light); color:var(--brand-blue); }
.lamaran .trk-sel.on .k, .lamaran .trk-sel.on .material-symbols-outlined { color:var(--brand-blue); }
.lamaran .trk-tog { display:inline-flex; align-items:center; gap:7px; height:38px;
  border:1px solid var(--border); border-radius:var(--radius); background:#fff; padding:0 13px;
  font-family:inherit; font-size:var(--label-md-size); font-weight:800; color:var(--ink-600);
  cursor:pointer; white-space:nowrap; transition:border-color .15s, color .15s, background .15s; }
.lamaran .trk-tog .material-symbols-outlined { font-size:15px; }
.lamaran .trk-tog:hover:not(:disabled) { border-color:var(--brand-navy); color:var(--brand-navy); }
.lamaran .trk-tog.on { background:var(--brand-navy); border-color:var(--brand-navy); color:#fff; }
.lamaran .trk-tog:disabled { opacity:.4; cursor:not-allowed; }
.lamaran .mc { font-size:var(--label-sm-size); font-weight:800; opacity:.6; }
.lamaran .sort-item .mc { margin-left:auto; }
.lamaran .trk-clear { border:none; background:none; padding:0; display:grid; place-items:center;
  color:var(--ink-400); cursor:pointer; flex:none; }
.lamaran .trk-clear:hover { color:var(--ink-900); }
.lamaran .trk-find { display:flex; align-items:center; gap:7px; flex:1; min-width:220px; height:38px;
  border:1px solid var(--border); border-radius:var(--radius); background:#fff; padding:0 12px; }
.lamaran .trk-find:focus-within { border-color:var(--brand-blue); box-shadow:0 0 0 3px var(--brand-blue-light); }
.lamaran .trk-find .material-symbols-outlined { color:var(--ink-400); flex:none; }
.lamaran .trk-find input { flex:1; min-width:0; border:none; outline:none; background:none;
  font-family:inherit; font-size:var(--label-md-size); font-weight:600; color:var(--ink-900); }
.lamaran .trk-find input::placeholder { color:var(--ink-400); font-weight:600; }
.lamaran .trk-reset { margin-left:auto; }
.lamaran .acts-left .btn2 { white-space:nowrap; }
.lamaran .trk-reset { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border:1px solid var(--border); background:#fff; border-radius:9999px; color:var(--ink-500); cursor:pointer; }
.lamaran .trk-reset:hover { border-color:var(--brand-blue); color:var(--brand-blue); }
.lamaran .trk-pager { display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-top:18px; padding-top:14px; border-top:1px solid var(--border-soft); }
.lamaran .trk-pager-info { font-size:var(--label-md-size); font-weight:700; color:var(--ink-500); }
.lamaran .trk-pager-btns { display:flex; align-items:center; gap:8px; }
.lamaran .trk-pager button { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--border);
  background:#fff; border-radius:var(--radius); padding:8px 14px; font-family:inherit;
  font-size:var(--label-md-size); font-weight:800; color:var(--ink-700); cursor:pointer; white-space:nowrap; }
.lamaran .trk-pager button:hover:not(:disabled) { border-color:var(--brand-blue); color:var(--brand-blue); }
.lamaran .trk-pager button:disabled { opacity:.4; cursor:not-allowed; }
.lamaran .trk-pager-pg { font-size:var(--label-md-size); font-weight:800; color:var(--ink-600); padding:0 2px; }
@media (max-width:760px){
  .lamaran .trk-find { flex-basis:100%; }
  .lamaran .trk-sel, .lamaran .trk-tog { flex:1; justify-content:center; }
}

/* ---- Offer panel --------------------------------------------------------------
   Terms first, decision second. Emerald belongs to the outcome, red only to the
   deadline and the confirmation — never to a 600px button. */
.lamaran .offer { margin-top:14px; background:#fff; border:1px solid var(--success);
  border-radius:var(--radius-card); padding:18px 20px; display:flex; flex-direction:column; gap:16px; }
.lamaran .offer-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.lamaran .offer-eb { display:inline-flex; align-items:center; gap:6px; font-size:var(--eyebrow-size);
  font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--success-ink); }
.lamaran .offer-due { margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  border-radius:9999px; padding:4px 11px; font-size:var(--label-sm-size); font-weight:800;
  background:var(--danger-soft); color:var(--danger); }
.lamaran .offer-figs { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.lamaran .offer-fig { display:flex; flex-direction:column; gap:3px; min-width:0;
  padding:0 22px; border-left:1px solid var(--border-soft); }
.lamaran .offer-fig:first-child { padding-left:0; border-left:none; }
.lamaran .offer-fig span { font-size:var(--eyebrow-size); font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-400); }
.lamaran .offer-fig b { font-size:var(--body-md-size); font-weight:800; color:var(--ink-900); }
.lamaran .offer-fig.big b { font-size:var(--headline-md-size); letter-spacing:-.02em; color:var(--success-ink); }
.lamaran .offer-acts { display:flex; align-items:center; justify-content:flex-end; gap:10px;
  flex-wrap:wrap; padding-top:15px; border-top:1px solid var(--border-soft); }
.lamaran .offer-acts .btn2 { padding:11px 18px; }

/* ---- Private note -------------------------------------------------------------
   The empty state no longer occupies the card: "Catatan pribadi" is a text action
   in the row of actions, and the privacy line appears only while writing. */
.lamaran .note-wrap { margin-top:14px; padding-top:0; border-top:none;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* The pipeline is one object, not six — and it spans the card like every other
   row in it. Labels stay on one line at this width. */
.lamaran .tlstep span, .lamaran .tllabel { white-space:nowrap; }

/* ---- Rigid widths: the four that had NO cap anywhere in the cascade ---------------
   The modals and popovers were already capped (96vw / calc(100vw-28px) / min(420px,…)),
   so they are left alone. These four pin a px width with nothing limiting it, and all
   four sit at or above the sub-700px band where it matters. */
.clist-col, .kcol, .erail { max-width:100%; }
.preview-frame.mobile { max-width:calc(100vw - 32px); }

/* ---- Link defaults ------------------------------------------------------------------
   Undefined a/a:hover means any link added later renders browser-default #0000EE, which
   is outside the palette entirely. Blue is the DS action hue, so links inherit it. */
a { color:var(--brand-blue); text-decoration:none; }
a:hover { color:var(--brand-blue-hover); text-decoration:underline; }
a:visited { color:var(--brand-blue-dark); }

/* ---- Profil Digital: sertifikasi · bahasa · referensi ---------------------
   Three sections that follow patterns already on this page — repeatable cards
   and a levelled list — so only the parts with no precedent are styled here. */
.pf-blank { display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  padding:34px 20px; border:1px dashed var(--border); border-radius:var(--radius-card); background:#fff; }
.pf-blank-ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--surface-muted); color:var(--ink-400); margin-bottom:3px; }
.pf-blank b { font-size:var(--body-md-size); font-weight:800; color:var(--ink-900); }
.pf-blank span:not(.pf-blank-ic) { max-width:46ch; font-size:var(--label-md-size); font-weight:600;
  color:var(--ink-500); line-height:1.55; text-wrap:pretty; }

/* an expired certificate is worse than no certificate — the card says which */
.pf-state { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:9999px;
  font-size:var(--label-sm-size); font-weight:800; }
.pf-state.ok { background:var(--success-soft); color:var(--success-ink); }
.pf-state.warn { background:var(--warning-soft, #FEF3C7); color:#92400E; }
.pf-state.dead { background:var(--danger-soft); color:var(--danger); }

.pf-sugg { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.pf-sugg > span { font-size:var(--eyebrow-size); font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-400); }
.pf-sugg-chip { display:inline-flex; align-items:center; gap:4px; border:1px dashed var(--border);
  background:#fff; border-radius:9999px; padding:5px 12px; font-family:inherit;
  font-size:var(--label-md-size); font-weight:700; color:var(--ink-600); cursor:pointer; }
.pf-sugg-chip:hover { border-style:solid; border-color:var(--brand-blue); color:var(--brand-blue); }

.pf-langs { display:flex; flex-direction:column; gap:10px; }
.pf-lang { border:1px solid var(--border); border-radius:var(--radius-md); padding:13px 15px; }
.pf-lang-n { display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:var(--body-md-size); font-weight:800; color:var(--ink-900); }
.pf-lang-lv { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.pf-lv { border:1px solid var(--border); background:#fff; border-radius:9999px; padding:6px 13px;
  font-family:inherit; font-size:var(--label-md-size); font-weight:800; color:var(--ink-600);
  cursor:pointer; white-space:nowrap; transition:border-color .15s, background .15s, color .15s; }
.pf-lv:hover { border-color:var(--brand-blue); color:var(--brand-blue); }
.pf-lv.on { background:var(--brand-blue); border-color:var(--brand-blue); color:#fff; }
.pf-lang-h { margin-top:8px; font-size:var(--label-md-size); font-weight:600; color:var(--ink-500); }

.pf-modes { display:flex; flex-direction:column; gap:8px; }
.pf-mode { display:flex; align-items:flex-start; gap:11px; text-align:left; border:1px solid var(--border);
  background:#fff; border-radius:var(--radius-md); padding:13px 14px; font-family:inherit; cursor:pointer;
  transition:border-color .15s; }
.pf-mode:hover { border-color:var(--brand-blue); }
.pf-mode.on { border-color:var(--brand-blue); background:var(--brand-blue-light); }
.pf-mode-box { flex:none; width:20px; height:20px; border-radius:9999px; border:1.5px solid var(--border);
  background:#fff; display:grid; place-items:center; color:transparent; margin-top:1px; }
.pf-mode.on .pf-mode-box { background:var(--brand-blue); border-color:var(--brand-blue); color:#fff; }
.pf-mode-t { font-size:var(--body-md-size); font-weight:800; color:var(--ink-900); }
.pf-mode-t small { display:block; margin-top:2px; font-size:var(--label-md-size); font-weight:600;
  color:var(--ink-500); }

.pf-consent { display:flex; align-items:flex-start; gap:10px; margin-top:14px; padding-top:14px;
  border-top:1px solid var(--border-soft); font-size:var(--label-md-size); font-weight:600;
  color:var(--ink-600); line-height:1.5; cursor:pointer; text-wrap:pretty; }
.pf-consent input { position:absolute; opacity:0; width:0; height:0; }
.pf-consent b { color:var(--ink-900); font-weight:800; }
.pf-consent-box { flex:none; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--border);
  background:#fff; display:grid; place-items:center; color:transparent; }
.pf-consent.on .pf-consent-box { background:var(--brand-blue); border-color:var(--brand-blue); color:#fff; }

/* An unread badge says a message arrived. This says the recruiter is waiting on
   the candidate — the only thing an inbox has to surface. */
.msg-wait { display:inline-flex; align-items:center; gap:4px; margin-top:5px; padding:2px 9px;
  border-radius:9999px; background:var(--warning-soft,#FEF3C7); color:#92400E;
  font-size:var(--label-sm-size); font-weight:800; }
.msg-wait-n { display:inline-flex; align-items:center; padding:3px 10px; border-radius:9999px;
  background:var(--warning-soft,#FEF3C7); color:#92400E; font-size:var(--label-sm-size); font-weight:800; }

/* ---- the pipeline needs a left edge -------------------------------------
   Every step was flex:1 with its dot centred, so the first dot sat half a step
   in from the card and lined up with nothing — not the panel below it, not the
   title above. The first step now hugs the left, putting the dot and its label
   on the same edge as the rest of the card. The connector starts at the dot's
   centre (15px = half the 30px dot) and still reaches the next dot's centre. */
.lamaran .tlstep:first-child, .lamaran .tlstep:last-child { flex:.5; }
.lamaran .tlstep:first-child { align-items:flex-start; }
.lamaran .tlstep:last-child { align-items:flex-end; }
.lamaran .tlstep:first-child .tllabel { text-align:left; }
.lamaran .tlstep:last-child .tllabel { text-align:right; }
.lamaran .tlstep:first-child .tlline { left:15px; width:calc(200% - 15px); }
.lamaran .tlstep:nth-last-child(2) .tlline { width:calc(100% - 15px); }

/* ---- one pipeline per card ------------------------------------------------
   The header's dot track is the COLLAPSED summary of the timeline inside the
   body, so an open card drew the same six stages twice. Open, the labelled
   timeline is the better of the two; the header keeps the stage name and
   deadline, which the timeline does not carry. */
.lamaran .tc.open .tc-head .strack-bar { display:none; }
.lamaran .tc.open .tc-head .strack { width:auto; }

/* section-level publish switch — same vocabulary as the page's Profil Publik card */
.pf-vis { display:flex; align-items:flex-start; gap:12px; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius-card); box-shadow:var(--shadow-sm); padding:14px 16px; }
.pf-vis > .material-symbols-outlined { flex:none; margin-top:1px; color:var(--ink-400); }
.pf-vis.on > .material-symbols-outlined { color:var(--brand-blue); }
.pf-vis-t { flex:1; min-width:0; font-size:var(--body-md-size); font-weight:800; color:var(--ink-900); }
.pf-vis-t small { display:block; margin-top:2px; font-size:var(--label-md-size); font-weight:600;
  color:var(--ink-500); line-height:1.5; text-wrap:pretty; }

/* The tab row was an inline overflow-x:auto that fit five tabs; eight overflow,
   so it grew a 10px OS scrollbar and hid two tabs behind a drag. Wrapping keeps
   every tab reachable and needs no affordance. */
.prof-tabs { display:flex; flex-wrap:wrap; gap:var(--space-1) 2px;
  border-bottom:1px solid var(--border); margin-bottom:var(--space-5); }

/* pills, not an underline bar: eight sections wrap onto two lines, and a
   bottom-border tab on row 1 underlines nothing. Mobile already uses pills
   for this row (.m-tab-pill), so the two builds now share one vocabulary. */
.prof-tabs { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
  border-bottom:1px solid var(--border); gap:6px; padding-bottom:0; }
.prof-tab { display:inline-flex; align-items:center; gap:6px; flex:none; border:none;
  background:transparent; border-bottom:2px solid transparent; border-radius:0; padding:10px 12px;
  margin-bottom:-1px; font-family:inherit; font-size:var(--label-md-size); font-weight:700;
  color:var(--ink-500); cursor:pointer; white-space:nowrap; transition:color .15s, border-color .15s; }
.prof-tab { padding:10px 14px; }
@media(max-width:1180px){
  .prof-tabs { gap:2px; }
  .prof-tab { padding:10px 9px; }
  /* the glyph is decoration here — the label carries the meaning, and dropping
     it is what makes nine tabs fit rather than scroll */
  .prof-tab .material-symbols-outlined { display:none; }
}
@media(max-width:820px){
  .prof-tabs { scrollbar-width:none; }
  .prof-tabs::-webkit-scrollbar { display:none; }
}
.prof-tab:hover { color:var(--ink-900); }
.prof-tab.on { color:var(--brand-blue); border-bottom-color:var(--brand-blue); font-weight:800; }
.prof-tab .material-symbols-outlined { color:inherit; }
.prof-jump { border:none; background:none; padding:0; font:inherit; color:var(--brand-blue);
  font-weight:800; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.prof-jump:hover { color:var(--brand-navy); }
.pf-consent small { display:block; margin-top:3px; font-weight:700; color:var(--ink-400); }

/* ---- Kelengkapan Profil: one line, not a zigzag ---------------------------
   The number sat at the far right of a 1470px row from the label it belongs to,
   and the hint explaining the missing 8% was orphaned under the bar. Number and
   label are now one unit; the hint takes the space the gap was wasting. A
   remainder tick marks 100% so 92% cannot read as full on a very wide bar. */
.prof-comp-top { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.prof-comp-n { font-size:var(--title-size); font-weight:900; color:var(--t-accent); line-height:1; }
.prof-comp-l { font-size:var(--body-md-size); font-weight:800; color:var(--ink-900); }
.prof-comp-h { margin-left:auto; font-size:var(--label-md-size); font-weight:700; color:var(--ink-400); }
.prof-comp-bar { position:relative; height:6px; border-radius:9999px; background:var(--border);
  margin-top:14px; }
.prof-comp-bar i { display:block; height:100%; border-radius:9999px; background:var(--t-accent); }
/* the last 8% is a 118px sliver on a bar this wide — the tick keeps the target visible */
.prof-comp-bar::after { content:''; position:absolute; right:0; top:-3px; width:2px; height:12px;
  border-radius:1px; background:var(--border); }
/* a 320px card beside a 1470px one reads as leftover space, not a decision */
.prof-top { grid-template-columns:minmax(0,1fr) minmax(300px,.42fr); }

/* ---- one slim strip, not two cards ----------------------------------------
   Completion is a nudge nobody acts on twice; it does not earn a card, let
   alone the ~230px it was taking above the sections people came to edit. It
   reads inline now, with the visibility setting — the one real decision here —
   opposite it in the same strip. */
.prof-strip { display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm); padding:12px 16px; margin-bottom:16px; }
.prof-strip .prof-comp-n { font-size:var(--headline-md-size); font-weight:900; color:var(--t-accent); line-height:1; }
.prof-strip .prof-comp-l { font-size:var(--label-md-size); font-weight:800; color:var(--ink-600); }
.prof-strip .prof-comp-bar { position:relative; flex:none; width:130px; height:5px; border-radius:9999px;
  background:var(--border); margin-top:0; overflow:hidden; }
.prof-strip .prof-comp-bar i { display:block; height:100%; border-radius:9999px; background:var(--t-accent); }
.prof-strip .prof-comp-bar::after { content:none; }
.prof-strip .prof-comp-h { font-size:var(--label-md-size); font-weight:700; color:var(--ink-400); margin-left:0; }
.prof-strip-sep { flex:1; }
.prof-vis-row { display:flex; align-items:center; gap:10px; flex:none; cursor:pointer; }
.prof-vis-t { font-size:var(--label-md-size); font-weight:800; color:var(--ink-900); line-height:1.25; }
.prof-vis-t small { display:block; font-size:var(--label-sm-size); font-weight:600; color:var(--ink-500); }
@media(max-width:860px){
  .prof-strip-sep { flex-basis:100%; }
  .prof-vis-row { width:100%; }
  .prof-vis-row .toggle, .prof-vis-row [class*=toggle] { margin-left:auto; }
}

/* ---- Informasi Umum: keahlian & bahasa ------------------------------------
   Both have their own tab, so this shows what is set and hands off — a second
   editor for the same data would be two places to change one thing. */
.pf-ref{padding-top:20px;border-top:1px solid var(--border-soft)}
.pf-ref-h{display:flex;align-items:baseline;gap:12px;margin-bottom:9px}
.eb-lbl{font-size:var(--eyebrow-size);font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-400)}
.pf-ref-h .prof-jump{margin-left:auto;font-size:var(--label-md-size)}
.pf-ref-chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.pf-ref-more{font-size:var(--label-md-size);font-weight:700;color:var(--ink-400)}

/* ============================================================================
   Profil Digital — identity header
   Name and basic information first, with completeness and the visibility switch
   in their own panel beside it. Prefixed pfh- because .prof-meter collided with
   the job cards' mini meter once already.
   ========================================================================== */
.pfh{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start;margin-bottom:22px}
.pfh > *{background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-sm)}
/* identity block hugs the top, contacts hug the bottom: the surplus from the
   taller side panel becomes one gap above the divider rather than dead space
   under the last row */
.pfh-id{padding:26px 28px 28px}
.pfh-top{display:flex;gap:22px;align-items:flex-start}
.pfh-av{width:82px;height:82px;flex:none;border-radius:9999px;background:var(--brand-navy);color:#fff;
  display:grid;place-items:center;font-size:var(--headline-md-size);font-weight:800;letter-spacing:-.02em}
.pfh-nm{font-size:var(--title-size);font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--ink-900)}
.pfh-hl{margin-top:4px;font-size:var(--body-md-size);font-weight:600;color:var(--ink-600)}
.pfh-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.pfh-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:9999px;
  background:var(--surface-muted);color:var(--ink-600);font-size:var(--label-sm-size);font-weight:800;white-space:nowrap}
.pfh-chip.on{background:var(--brand-blue-light);color:var(--brand-blue)}
.pfh-chip .material-symbols-outlined{font-size:13px;color:inherit}
/* indented to the name's edge — the card reads as one column, not two */
.pfh-ct{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;margin:20px 0 0 104px;
  padding-top:20px;border-top:1px solid var(--border-soft)}
.pfh-ct-i{display:flex;align-items:center;gap:8px;min-width:0}
.pfh-ct-i .material-symbols-outlined{font-size:16px;color:var(--ink-400);flex:none}
.pfh-ct-t{min-width:0}
.pfh-ct-k{display:block;font-size:var(--eyebrow-size);font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-400)}
.pfh-ct-v{display:block;margin-top:1px;font-size:var(--label-md-size);font-weight:700;color:var(--ink-900);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pfh-vis{padding:18px 20px;border-bottom:1px solid var(--border)}
.pfh-vis-h{display:flex;align-items:center;gap:11px}
.pfh-vis-t{flex:1;min-width:0;font-size:var(--label-md-size);font-weight:800;color:var(--ink-900)}
.pfh-vis-s{margin-top:7px;font-size:var(--label-sm-size);font-weight:600;color:var(--ink-500);line-height:1.5}
.pfh-comp{padding:18px 20px 20px}
.pfh-eb{display:block;font-size:var(--eyebrow-size);font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-400)}
.pfh-n{display:flex;align-items:baseline;gap:8px;margin-top:8px}
.pfh-n b{font-size:var(--headline-md-size);font-weight:900;color:var(--t-accent);line-height:1;letter-spacing:-.02em}
.pfh-n span{font-size:var(--label-md-size);font-weight:700;color:var(--ink-500)}
.pfh-bar{display:block;height:5px;border-radius:9999px;background:var(--border);margin-top:10px;overflow:hidden}
.pfh-bar i{display:block;height:100%;border-radius:9999px;background:var(--t-accent)}
.pfh-secs{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:18px}
.pfh-sec{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--label-md-size);
  font-weight:700;color:var(--ink-500)}
.pfh-sec .material-symbols-outlined{font-size:15px;color:var(--success);flex:none}
.pfh-sec span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfh-sec.todo{color:var(--brand-blue);font-weight:800}
.pfh-sec.todo.go{cursor:pointer}
.pfh-sec.todo .material-symbols-outlined{color:var(--brand-blue)}
.pfh-sec.todo.go:hover span{text-decoration:underline;text-underline-offset:3px}
@media(max-width:1100px){ .pfh{grid-template-columns:1fr} }
@media(max-width:640px){ .pfh-ct{grid-template-columns:1fr;margin-left:0} }

/* "Tambah …" belongs after the list it appends to. Ordering it rather than
   moving it in the markup keeps each button inside the component whose add()
   it calls — placing them by hand put two in the wrong scope and blanked the page. */
.add-last{order:2;align-self:flex-start}

.pfh-nmrow{display:flex;align-items:flex-start;gap:14px}
.pfh-nmrow .pfh-nm{flex:1;min-width:0}
.pfh-edit{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);
  background:#fff;border-radius:9999px;padding:6px 14px;font-family:inherit;font-size:var(--label-md-size);
  font-weight:800;color:var(--ink-600);cursor:pointer;transition:border-color .15s,color .15s}
.pfh-edit:hover{border-color:var(--brand-blue);color:var(--brand-blue)}
/* Avatar brings its own box, so the wrapper must not impose one */
.pfh-av{width:auto;height:auto;background:none;border-radius:0;display:block}

/* the meter asks for three projects, so the section says how many are left */
.pf-quota{display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:var(--radius-md);
  background:var(--brand-blue-light);color:var(--brand-navy);font-size:var(--label-md-size);font-weight:700}
.pf-quota .material-symbols-outlined{color:var(--brand-blue);flex:none}
.pf-quota b{font-weight:800}
.pf-quota.ok{background:var(--success-soft);color:var(--success-ink)}
.pf-quota.ok .material-symbols-outlined{color:var(--success-ink)}

/* Spacing pass: the header, its side panel, the tab row and the form all sat on
   14–15px, which reads as dense at this scale — one step up across the page
   rather than a nudge in one place. */
.prof-tabs{margin-bottom:22px}
.profile-page .panel{padding:26px 28px}
/* card-to-card and field-to-field gaps are inline on those wrappers, so a plain
   rule loses to them */
.profile-page .panel > div[style*="grid"]{gap:20px !important}
.profile-page > div[style*="flex-direction: column"]{gap:20px !important}