/* app.css — TANEVA design system (sebelumnya KarirKit v2) (referensi: docs/screenshot/reference-layout.png)
   Tokens disimpan sebagai kanal RGB mentah supaya alpha modifier Tailwind bekerja
   (pola repo stockscreener: rgb(var(--k-primary) / <alpha-value>)). */

:root {
  /* TANEVA design system (docs/new-design-system.md): brand = deep green, aksen/AI = gold (hemat), status = semantik, konten = ivory/putih. */
  --k-primary: 10 74 62;    /* green-800 #0A4A3E — CTA, link, menu aktif */
  --k-primary-700: 6 59 50; /* green-900 #063B32 — hover */
  --k-navy:    6 59 50;     /* green-900 #063B32 sidebar */
  --k-sky:     61 115 185;  /* info #3D73B9 — data/info saja, bukan brand */
  --k-green:   45 128 111;  /* success #2D806F */
  --k-orange:  185 138 42;  /* warning #B98A2A */
  --k-purple:  140 106 30;  /* gold-700 #8C6A1E — HANYA elemen AI (nama token lama dipertahankan) */
  --k-gold:    201 163 78;  /* gold #C9A34E — aksen/perhatian */
  --k-gold-soft: 227 201 130; /* #E3C982 */
  --k-red:     184 92 74;   /* danger #B85C4A */
  --k-gray:    102 115 110; /* muted #66736E */
  --k-border:  220 228 223; /* #DCE4DF */
  --k-bg:      246 243 236; /* ivory #F6F3EC */
  --k-surface: 255 255 255; /* surface */

  --k-fg:      16 32 28;          /* text #10201C */
  --k-fg-body: 46 61 56;          /* #2E3D38 */
  --k-fg-muted: 102 115 110;      /* #66736E */
  --k-sidenav-fg: 214 226 220;

  --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px;
  --radius-card: 14px;
  --radius-btn: 9px;
  --shadow-card: 0 4px 18px rgba(6, 59, 50, .06);
  --shadow-modal: 0 16px 40px rgba(6, 59, 50, .12);
  --font-head: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }
*, ::before, ::after { border: 0 solid rgb(var(--k-border)); }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: transparent; cursor: pointer; }
img, video { max-width: 100%; height: auto; }
table { border-collapse: collapse; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.57;
  color: rgb(var(--k-fg));
  background: rgb(var(--k-bg));
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-head); }
h1 { font-size: 28px; line-height: 36px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.02em; }
h2 { font-size: 22px; line-height: 30px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.01em; }
h3 { font-size: 18px; line-height: 26px; font-weight: 650; margin: 0 0 6px; }
p  { margin: 0 0 10px; }
a  { color: rgb(var(--k-primary)); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--font-mono); font-size: 13px; }
.muted { color: rgb(var(--k-fg-muted)); font-size: 13px; }

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
body { min-height: 100vh; display: flex; flex-direction: column; }
.app-shell { flex: 1; } /* dorong footer ke bawah layar walau konten pendek */

.sidebar {
  width: 240px; flex-shrink: 0;
  background: rgb(var(--k-navy));
  color: rgb(var(--k-sidenav-fg));
  display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  transform: translateX(-100%);
  transition: transform .25s ease;
}
.sidebar.open { transform: translateX(0); }
@media (min-width: 1024px) {
  /* Sidebar jadi in-flow (sticky) — TIDAK pakai padding-left di .app-shell
     karena itu menyebabkan double offset 250px (bug terverifikasi via Chrome). */
  .sidebar { position: sticky; top: 0; height: 100vh; transform: none; }
}

.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 20px; color: #fff; font-weight: 800; font-size: 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: rgb(var(--k-primary));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 14px;
}
.sidebar-nav { padding: 12px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.sidebar-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 9px;
  color: rgb(var(--k-sidenav-fg)); font-size: 14px; font-weight: 500;
  text-decoration: none;
}
.sidebar-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.sidebar-item:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.sidebar-item.active { background: rgb(var(--k-primary)); color: #fff; }
.sidebar-item.active svg { opacity: 1; }

.sidebar-plan {
  margin: 12px; padding: 14px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
  color: #fff;
}
.sidebar-plan .plan-name { font-weight: 700; font-size: 14px; }
.sidebar-plan .plan-desc { font-size: 12px; color: rgb(var(--k-sidenav-fg)); margin: 2px 0 10px; }

.sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(6,40,34,.5); z-index: 35;
  display: none;
}
.sidebar-backdrop.show { display: block; }

/* Topbar */
.topbar {
  height: 64px; background: rgb(var(--k-surface));
  border-bottom: 1px solid rgb(var(--k-border));
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; position: sticky; top: 0; z-index: 30;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.brand-logo { display: block; width: auto; max-width: none; flex-shrink: 0; } /* jangan menyusut: rasio logo rusak saat topbar sempit */
.sidebar-brand .brand-logo { height: 36px; }
.topbar-brand .brand-logo { height: 28px; }
.bare-topbar .brand-logo { height: 32px; }
@media (max-width: 480px) { .bare-topbar { padding: 0 12px; gap: 8px; } .bare-topbar .brand-logo { height: 26px; } .bare-topbar > div { gap: 6px !important; } .bare-topbar .btn-sm { padding-inline: 10px; } }
@media (max-width: 359px) { .bare-topbar .btn-ghost { display: none; } } /* layar sangat sempit: utamakan Masuk/Daftar */
.topbar-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.hamburger { display: inline-flex; background: none; border: 0; padding: 6px; cursor: pointer; border-radius: 8px; color: rgb(var(--k-fg)); }
.hamburger:hover { background: rgb(var(--k-bg)); }
@media (min-width: 1024px) { .hamburger { display: none; } }

.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(var(--k-primary) / .12); color: rgb(var(--k-primary));
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.user-menu { position: relative; }
.user-menu-btn {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: none; border: 0; font: inherit; color: rgb(var(--k-fg)); padding: 4px 6px; border-radius: 8px;
}
.user-menu-btn:hover { background: rgb(var(--k-bg)); }
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 180px; background: rgb(var(--k-surface));
  border: 1px solid rgb(var(--k-border)); border-radius: 12px;
  box-shadow: 0 10px 25px rgba(6,40,34,.10); padding: 6px; display: none;
}
.user-dropdown.show { display: block; }
.user-dropdown a, .user-dropdown button {
  display: block; width: 100%; text-align: left; padding: 8px 10px;
  border-radius: 8px; font-size: 14px; color: rgb(var(--k-fg));
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
.user-dropdown a:hover, .user-dropdown button:hover { background: rgb(var(--k-bg)); text-decoration: none; }

/* Konten */
.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.page { flex: 1; padding: 24px; width: 100%; max-width: 1280px; margin: 0 auto; }
@media (min-width: 1440px) { .page { padding: 32px 40px; } }
.page-wide { max-width: none; } /* konsol admin: manfaatkan lebar penuh */
.page-header { margin-bottom: 20px; }
.page-header .desc { color: rgb(var(--k-fg-muted)); font-size: 14px; }

.app-footer {
  margin-top: auto; /* sticky bottom: konten pendek pun footer tetap di dasar */
  padding: 16px 22px; text-align: center;
  color: rgb(var(--k-fg-muted)); font-size: 12px;
  border-top: 1px solid rgb(var(--k-border));
  background: rgb(var(--k-surface));
}

/* ---------- Bare shell (landing/auth/publik) ---------- */
.bare-topbar {
  height: 60px; background: rgb(var(--k-surface));
  border-bottom: 1px solid rgb(var(--k-border));
  display: flex; align-items: center; justify-content: space-between; padding: 0 22px;
  position: sticky; top: 0; z-index: 30;
}

/* ---------- Komponen ---------- */
.card {
  background: rgb(var(--k-surface));
  border: 1px solid rgb(var(--k-border));
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 22px;
  margin-bottom: 16px;
}
.card h2 { margin-bottom: 12px; font-size: 18px; line-height: 26px; }

/* Feature card (grid dashboard) */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.feature-card {
  background: rgb(var(--k-surface)); border: 1px solid rgb(var(--k-border));
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 18px; display: flex; flex-direction: column; gap: 8px;
}
.feature-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.feature-icon.primary { background: rgb(var(--k-primary)); }
.feature-icon.green   { background: rgb(var(--k-green)); }
.feature-icon.purple  { background: rgb(var(--k-purple)); }
.feature-icon.orange  { background: rgb(var(--k-orange)); }
.feature-icon.red     { background: rgb(var(--k-red)); }
.feature-card .f-title { font-weight: 700; font-size: 15px; }
.feature-card .f-desc  { font-size: 13px; color: rgb(var(--k-fg-muted)); flex: 1; }

/* Banner pipeline di dashboard */
.hero-banner {
  background: linear-gradient(120deg, rgba(var(--k-primary) / .10), rgba(var(--k-purple) / .10));
  border: 1px solid rgba(var(--k-primary) / .18);
  border-radius: var(--radius-card); padding: 20px 22px; margin-bottom: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.hero-banner h2 { margin: 0 0 2px; }
.hero-banner p { margin: 0; font-size: 14px; color: rgb(var(--k-fg-muted)); }

/* Tombol */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: var(--radius-btn);
  font-family: inherit; font-size: 14px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: filter .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:hover { filter: brightness(.95); text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: rgb(var(--k-primary)); color: #fff; }
.btn-green   { background: rgb(var(--k-green));   color: #fff; }
.btn-purple  { background: rgb(var(--k-purple));  color: #fff; }
.btn-orange  { background: rgb(var(--k-orange));  color: #fff; }
.btn-red     { background: rgb(var(--k-red));     color: #fff; }
.btn-outline { background: rgb(var(--k-surface)); color: rgb(var(--k-fg)); border-color: rgb(var(--k-border)); }
.btn-outline:hover { background: rgb(var(--k-bg)); }
.btn-ghost   { background: transparent; color: rgb(var(--k-primary)); }
.btn-sm  { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-block { width: 100%; }

/* Tombol icon-only (aksi tabel, mis. ban/unban di Admin HQ Members) */
.btn-icon {
  width: 32px; height: 32px; padding: 0;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon svg { width: 16px; height: 16px; }
.btn-icon-red   { background: rgb(var(--k-red));     color: #fff; }
.btn-icon-green { background: rgb(var(--k-green));   color: #fff; }

/* Form */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.form-control {
  width: 100%; padding: 9px 12px;
  border: 1px solid rgb(var(--k-border)); border-radius: var(--radius-btn);
  font-family: inherit; font-size: 14px; color: rgb(var(--k-fg));
  background: rgb(var(--k-surface)); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus { border-color: rgb(var(--k-primary)); box-shadow: 0 0 0 3px rgba(var(--k-primary) / .18); }
textarea.form-control { min-height: 110px; resize: vertical; }

/* Alert */
.alert { padding: 11px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 14px; }
.alert-error   { background: rgba(var(--k-red) / .10);    color: rgb(var(--k-red));    border: 1px solid rgba(var(--k-red) / .25); }
.alert-success { background: rgba(var(--k-green) / .10);  color: rgb(var(--k-green));  border: 1px solid rgba(var(--k-green) / .25); }
.alert-info    { background: rgba(var(--k-primary) / .08); color: rgb(var(--k-primary)); border: 1px solid rgba(var(--k-primary) / .20); }
.alert a { font-weight: 600; }

/* Badge & keyword chip */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.badge-green { background: rgba(var(--k-green) / .12);  color: rgb(var(--k-green)); }
.badge-amber { background: rgba(var(--k-orange) / .14); color: rgb(var(--k-orange)); }
.badge-red   { background: rgba(var(--k-red) / .10);    color: rgb(var(--k-red)); }
.badge-blue  { background: rgba(var(--k-primary) / .10); color: rgb(var(--k-primary)); }
.chip {
  display: inline-block; padding: 4px 11px; margin: 0 6px 6px 0;
  border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: rgba(var(--k-green) / .12); color: rgb(var(--k-green));
}
.chip.miss { background: rgba(var(--k-red) / .09); color: rgb(var(--k-red)); }

/* Skor donut */
.score-wrap { display: flex; align-items: center; gap: 16px; }
.score-donut {
  --pct: 0; --donut: rgb(var(--k-green));
  width: 110px; height: 110px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--donut) calc(var(--pct) * 1%), rgba(var(--k-border)) 0);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.score-donut::before {
  content: ''; position: absolute; inset: 10px;
  background: rgb(var(--k-surface)); border-radius: 50%;
}
.score-donut .score-val { position: relative; font-family: var(--font-mono); font-size: 26px; font-weight: 700; }
.score-donut.amber { --donut: rgb(var(--k-orange)); }
.score-donut.red   { --donut: rgb(var(--k-red)); }

/* Tabel */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
  text-align: left; padding: 9px 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgb(var(--k-fg-muted)); border-bottom: 1px solid rgb(var(--k-border));
}
table.data td { padding: 11px 12px; border-bottom: 1px solid rgba(var(--k-border) / .6); }
table.data tbody tr:hover { background: rgba(var(--k-bg) / .7); }

/* ---------- Datatable (konsol Admin HQ, vanilla JS) ---------- */
.dt-toolbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.dt-search { position: relative; flex: 1; max-width: 300px; }
.dt-search input {
  width: 100%; padding: 8px 12px 8px 32px; border-radius: 9px;
  border: 1px solid rgb(var(--k-border)); background: rgb(var(--k-surface));
  font: inherit; font-size: 13px; color: rgb(var(--k-fg));
}
.dt-search::before {
  content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border: 2px solid rgb(var(--k-fg-muted)); border-radius: 50%;
  box-shadow: 7px 7px 0 -5.5px rgb(var(--k-fg-muted));
}
table.data th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
table.data th[data-sort]:hover { color: rgb(var(--k-fg)); }
table.data th.dt-sorted-asc::after { content: ' ↑'; color: rgb(var(--k-primary)); }
table.data th.dt-sorted-desc::after { content: ' ↓'; color: rgb(var(--k-primary)); }
.dt-pager { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 12px; font-size: 13px; color: rgb(var(--k-fg-muted)); }
.dt-pager button {
  padding: 5px 11px; border-radius: 8px; border: 1px solid rgb(var(--k-border));
  background: rgb(var(--k-surface)); color: rgb(var(--k-fg)); font: inherit; font-size: 13px; cursor: pointer;
}
.dt-pager button:disabled { opacity: .4; cursor: default; }
.dt-pager button:not(:disabled):hover { border-color: rgb(var(--k-primary)); color: rgb(var(--k-primary)); }

.dt-empty { padding: 22px; text-align: center; color: rgb(var(--k-fg-muted)); font-size: 13px; }

/* ---------- Toast (feedback aksi AJAX, tanpa reload) ---------- */
.toast-wrap { position: fixed; top: 14px; right: 14px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast {
  min-width: 240px; max-width: 380px; padding: 11px 14px; border-radius: 10px;
  background: rgb(var(--k-navy)); color: #fff; font-size: 13.5px;
  box-shadow: 0 10px 24px rgba(6,40,34,.25);
  animation: toast-in .18s ease-out;
}
.toast.ok { border-left: 4px solid rgb(var(--k-green)); }
.toast.err { border-left: 4px solid rgb(var(--k-red)); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Inline status kecil (server time dsb) */

/* Stepper (CV builder / ATS flow) */
.stepper { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.stepper .step { display: flex; align-items: center; gap: 8px; }
.stepper .step-dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: rgba(var(--k-border)); color: rgb(var(--k-fg-muted));
}
.stepper .step.active .step-dot { background: rgb(var(--k-primary)); color: #fff; }
.stepper .step.done .step-dot   { background: rgba(var(--k-primary) / .18); color: rgb(var(--k-primary)); }
.stepper .step.done .step-dot   { position: relative; }
.stepper .step.done .step-dot::before { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.stepper .step.done .step-dot   { color: transparent; } /* sembunyikan angka, tampilkan centang */
.stepper .step.active .step-dot   { animation: pulse-dot 1.1s ease-in-out infinite; }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--k-primary) / .35); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--k-primary) / 0); }
}
.stepper .step-label { font-size: 13px; font-weight: 600; color: rgb(var(--k-fg-muted)); }
.stepper .step.active .step-label { color: rgb(var(--k-fg)); }
.stepper .step-line { width: 34px; height: 2px; background: rgba(var(--k-border)); }

/* Auth */
.auth-wrap { max-width: 420px; margin: 48px auto; }
.auth-card {
  background: rgb(var(--k-surface)); border: 1px solid rgb(var(--k-border));
  border-radius: 16px; box-shadow: var(--shadow-card); padding: 28px;
}
.auth-card h2 { font-size: 22px; }

/* Pricing (checkout & paket) */

/* Row dinamis CV builder */
.exp-row, .edu-row { border: 1px dashed rgb(var(--k-border)); border-radius: 12px; }

/* ---------- Dropzone upload (ATS, gaya hyred) ---------- */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 34px 20px; text-align: center;
  border: 2px dashed rgba(var(--k-primary) / .35); border-radius: var(--radius-card);
  background: rgba(var(--k-primary) / .03);
  cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
  outline: none;
}
.dropzone:hover { border-color: rgb(var(--k-primary)); background: rgba(var(--k-primary) / .06); }
.dropzone:focus-visible { box-shadow: 0 0 0 3px rgba(var(--k-primary) / .18); }
.dropzone.dz-over { border-color: rgb(var(--k-primary)); background: rgba(var(--k-primary) / .10); box-shadow: inset 0 0 0 1px rgb(var(--k-primary)); }
.dropzone.dz-picked { border-color: rgb(var(--k-green)); background: rgba(var(--k-green) / .06); border-style: solid; }
.dz-input { display: none; }
.dropzone .dz-icon {
  width: 46px; height: 46px; border-radius: 50%; margin-bottom: 6px;
  background: rgba(var(--k-primary) / .10); color: rgb(var(--k-primary));
  display: inline-flex; align-items: center; justify-content: center;
}
.dropzone .dz-icon svg { width: 22px; height: 22px; }
.dropzone.dz-picked .dz-icon { background: rgba(var(--k-green) / .12); color: rgb(var(--k-green)); }
.dropzone .dz-title { font-weight: 700; font-size: 15px; color: rgb(var(--k-fg)); }
.dropzone .dz-title.dz-error { color: rgb(var(--k-red)); }
.dropzone .dz-sub { font-size: 13.5px; color: rgb(var(--k-fg-muted)); }
.dropzone .dz-browse { color: rgb(var(--k-primary)); font-weight: 600; }
.dropzone .dz-meta { font-size: 12px; color: rgb(var(--k-fg-muted)); margin-top: 4px; }

/* Divider "atau" */
.or-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0; color: rgb(var(--k-fg-muted)); font-size: 12.5px;
}
.or-divider::before, .or-divider::after {
  content: ''; flex: 1; height: 1px; background: rgb(var(--k-border));
}

/* ---------- Galeri template CV (70 variasi, miniatur struktur beda) ---------- */
.tpl-filter { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }

 
 
 
/* Struktur miniatur per layout */

/* ---------- Builder CV 2-pane (form kiri + preview kanan) ---------- */

.pv-dot {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgb(var(--k-border)); padding: 0;
}
.pv-dot.active { box-shadow: 0 0 0 2px rgb(var(--k-primary)); }

/* Variasi layout preview builder (14 layout) */

/* ---------- Preview template CV (checkout) ---------- */

 
 
 

/* Variasi ringan per layout (checkout) */

/* Utility */
.flex { display: flex; } .between { justify-content: space-between; } .center { align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; }   .mb-0 { margin-bottom: 0; }

.hidden { display: none; }
@media (max-width: 640px) {
  .page { padding: 18px 14px; }
  .card { padding: 16px; }
}

/* Form range slider (engine-use, ala sample detail 5) */
.form-range { width: 100%; appearance: none; height: 6px; border-radius: 3px; background: rgb(var(--k-border)); outline: none; padding: 0; }
.form-range::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; background: rgb(var(--k-primary)); cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(6,40,34,.3); }
.form-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: rgb(var(--k-primary)); cursor: pointer; border: 2px solid #fff; }

/* Checkout QRIS */
.qris-card { text-align: center; }
.qris-code { width: 100%; max-width: 260px; margin: 16px auto 10px; padding: 10px; background: #fff; border: 1px solid rgb(var(--k-border)); border-radius: 12px; }
.qris-code svg { display: block; width: 100%; height: auto; }
.qris-amount { font-size: 24px; font-weight: 700; margin-bottom: 6px; }
.qris-countdown { display: inline-block; margin: 8px 0; padding: 6px 12px; border-radius: 999px; background: rgba(var(--k-primary) / .08); color: rgb(var(--k-primary)); font-size: 14px; }
.qris-countdown.is-urgent { background: rgba(var(--k-red) / .10); color: rgb(var(--k-red)); }
.qris-state { font-size: 44px; margin-bottom: 8px; }
.qris-live { font-size: 13px; }

/* ===== Swatch slider: pilihan warna selalu 1 baris; bila tak muat → geser (‹ ›) ===== */
.swatch-slider { display: flex; align-items: center; gap: 4px; min-width: 0; }
.swatch-track {
  display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; min-width: 0; flex: 1;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 3px 2px;
}
.swatch-track::-webkit-scrollbar { display: none; }
.swatch-track > * { flex: 0 0 auto; scroll-snap-align: start; }
.swatch-nav {
  flex: 0 0 auto; width: 20px; height: 22px; border-radius: 6px; padding: 0; line-height: 1;
  border: 1px solid rgb(var(--k-border)); background: rgb(var(--k-surface)); color: rgb(var(--k-fg));
  cursor: pointer; font-size: 14px; font-weight: 700;
}
.swatch-nav[hidden] { display: none; }

/* ===== Mode fokus (builder CV): sidebar app jadi drawer di semua ukuran, area kerja penuh ===== */
.app-shell.focus .sidebar { position: fixed; top: 0; height: 100vh; transform: translateX(-100%); }
.app-shell.focus .sidebar.open { transform: translateX(0); }
.app-shell.focus .hamburger { display: inline-flex; }
.app-shell.focus .page { padding: 12px; }

/* ===== Popup pricing (unduh PDF template Pro) ===== */
.pricing-modal { position: fixed; inset: 0; z-index: 80; background: rgba(6,40,34,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pricing-modal[hidden] { display: none; }
.pricing-box { position: relative; width: min(820px, 100%); max-height: 92vh; overflow-y: auto; background: rgb(var(--k-surface)); border-radius: 14px; padding: 24px; box-shadow: 0 24px 60px rgba(6,40,34,.3); }
.pricing-box h2 { margin: 0 0 4px; }
.pricing-x { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 26px; cursor: pointer; color: rgb(var(--k-muted)); }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
.pricing-card { position: relative; border: 1px solid rgb(var(--k-border)); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; }
.pricing-card.is-best { border: 2px solid rgb(var(--k-primary)); }
.pricing-card h3 { margin: 0 0 4px; font-size: 15px; }
.pricing-card ul { padding-left: 18px; margin: 10px 0 14px; font-size: 13px; flex: 1; }
.pricing-price { font-size: 22px; font-weight: 800; }
.pricing-badge { position: absolute; top: -10px; right: 12px; background: rgb(var(--k-primary)); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
button[data-busy] { opacity: .6; cursor: progress; }

/* ===== Admin HQ: pengaturan template ===== */
.admin-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.admin-tpl { border: 1px solid rgb(var(--k-border)); border-radius: 10px; padding: 8px; }
.admin-tpl-frame { position: relative; height: 220px; overflow: hidden; border-radius: 6px; background: #fff; border: 1px solid rgb(var(--k-border)); }
.admin-tpl-frame iframe { border: 0; width: 794px; height: 1123px; transform: scale(.2); transform-origin: 0 0; pointer-events: none; position: absolute; }
.admin-tpl-meta { font-size: 12px; margin: 6px 0; }
.admin-tpl-actions { display: flex; gap: 6px; }

/* ===== Builder CV & Surat Lamaran (layout ala resmume, dipakai cv/engine_use & cover/builder) ===== */
/* ===== Builder ala resmume — halaman fokus (sidebar app disembunyikan) ===== */
.builder-layout {
    display: grid; grid-template-columns: 64px 320px minmax(0, 1fr);
    height: calc(100vh - 60px - 24px); gap: 0;
    border: 1px solid rgb(var(--k-border)); border-radius: 12px; overflow: hidden; background: rgb(var(--k-surface));
}
/* Menu ikon kecil */
.bnav {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 6px;
    background: rgb(var(--k-primary)); overflow-y: auto;
}
.bnav-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px;
    border: 0; border-radius: 10px; background: transparent; color: rgba(255,255,255,.85);
    cursor: pointer; font-size: 17px; text-decoration: none; line-height: 1.1;
}
.bnav-btn span { font-size: 9.5px; font-weight: 600; }
.bnav-btn svg { width: 20px; height: 20px; }
.bnav-btn:hover { background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.bnav-btn.active { background: #fff; color: rgb(var(--k-primary)); }
.bnav-sep { flex: 1; }
/* Panel */
.bpanel-wrap { border-right: 1px solid rgb(var(--k-border)); overflow-y: auto; padding: 0 14px 18px; scrollbar-width: thin; }
.bpanel-head {
    position: sticky; top: 0; z-index: 2; background: rgb(var(--k-surface));
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    padding: 12px 0 10px; border-bottom: 1px solid rgb(var(--k-border)); margin-bottom: 10px; font-size: 13px;
}
.bpanel-head a { font-size: 11.5px; }
.bpanel { display: none; }
.bpanel.active { display: block; }
.bpanel-title { margin: 4px 0 2px; font-size: 15px; }
.bpanel-desc { margin: 0 0 12px; font-size: 11.5px; color: rgb(var(--k-muted)); }
.ec-field { display: block; margin: 0 0 10px; }
.cek-result { margin-top: 12px; }
.cek-score { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12.5px; }
.cek-score b { font-size: 22px; }
.cek-item { display: block; width: 100%; text-align: left; border: 1px solid rgb(var(--k-border)); border-left-width: 4px; border-radius: 8px; padding: 7px 9px; margin-bottom: 6px; background: rgb(var(--k-surface)); font-size: 12px; cursor: pointer; color: rgb(var(--k-fg)); }
.cek-item.error { border-left-color: #DC2626; }
.cek-item.warn { border-left-color: #D97706; }
.cek-item.tip { border-left-color: rgb(var(--k-sky)); }
.cek-item small { display: block; font-weight: 700; font-size: 10px; text-transform: uppercase; color: rgb(var(--k-muted)); }
.ec-hint { font-size: 11.5px; background: rgb(var(--k-primary) / .07); border: 1px solid rgb(var(--k-primary) / .2); color: rgb(var(--k-fg)); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; }
.ec-field > span { display: block; font-size: 11.5px; color: rgb(var(--k-muted)); margin-bottom: 3px; font-weight: 500; }
.ec-field .form-control { font-size: 13px; }
.ec-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.ec-label { font-size: 11.5px; color: rgb(var(--k-muted)); margin: 14px 0 6px; font-weight: 500; }
.ec-photo { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.ec-photo img, #photo-placeholder { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex-shrink: 0; border: 1px solid rgb(var(--k-border)); }
#photo-placeholder { display: flex; align-items: center; justify-content: center; font-size: 10px; color: rgb(var(--k-muted)); border-style: dashed; }
#photo-placeholder[hidden], .ec-photo img[hidden] { display: none; }
.ec-photo input[type=file] { padding: 5px; font-size: 11.5px; }
#photo-status { font-size: 11px; margin: 3px 0; }
/* Section konten (kotak ala detail 3) */
.ec-sec { border: 1px solid rgb(var(--k-border)); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.ec-sec-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 10px; background: rgb(var(--k-bg)); font-size: 12.5px; font-weight: 600;
}
.ec-add {
    width: 22px; height: 22px; border-radius: 6px; border: 0; cursor: pointer; flex-shrink: 0;
    background: rgb(var(--k-primary)); color: #fff; font-size: 15px; font-weight: 700; line-height: 1;
}
.ec-sec-link { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; color: rgb(var(--k-primary)); cursor: pointer; font-size: 12.5px; }
.ec-custom-title { padding: 6px 10px 0; }
.ec-custom-title .form-control { font-size: 12px; padding: 5px 8px; }
.ec-empty { padding: 7px 12px; font-size: 12px; color: rgb(var(--k-muted)); }
.ec-sec.has-items .ec-empty { display: none; }
.ec-item { border-top: 1px solid rgb(var(--k-border)); background: rgb(var(--k-surface)); }
.ec-item.dragging { opacity: .45; }
.ec-item-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer; }
.ec-item-head:hover { background: rgb(var(--k-primary) / .05); }
.ec-grip { cursor: grab; color: rgb(var(--k-muted)); font-size: 12px; }
.ec-item-title { flex: 1; min-width: 0; font-size: 12.5px; color: rgb(var(--k-primary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-item-title:empty::before { content: attr(data-empty); color: rgb(var(--k-muted)); font-style: italic; }
.ec-del {
    width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgb(var(--k-border));
    background: transparent; color: rgb(var(--k-muted)); cursor: pointer; font-size: 12px; line-height: 1; padding: 0;
}
.ec-del:hover { color: #DC2626; border-color: #DC2626; }
.ec-item-editor { display: none; }
/* Desain */
.ep-fonts { display: flex; flex-direction: column; gap: 6px; }
.ep-font {
    display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
    border: 2px solid rgb(var(--k-border)); border-radius: 10px; padding: 7px 10px; background: rgb(var(--k-surface));
}
.ep-font strong { display: block; font-size: 13.5px; color: rgb(var(--k-fg)); }
.ep-font small { display: block; font-size: 11px; color: rgb(var(--k-muted)); }
.ep-font-radio { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgb(var(--k-border)); flex-shrink: 0; }
.ep-font.active { border-color: rgb(var(--k-primary)); background: rgb(var(--k-primary) / .07); }
.ep-font.active .ep-font-radio { border-color: rgb(var(--k-primary)); background: rgb(var(--k-primary)); }
/* Preview: dokumen A4 selebar kolom, scroll hanya di kolom ini */
.bpreview { position: relative; overflow: auto; background: rgb(var(--k-bg)); padding: 18px; min-width: 0; }
.pv-wrap { margin: 0 auto; box-shadow: 0 2px 14px rgba(6,40,34,.10); background: #fff; overflow: hidden; }
.pv-wrap iframe { border: 0; display: block; transform-origin: 0 0; }
.ep-zoom {
    position: sticky; float: right; bottom: 8px; margin-top: -84px; display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: rgb(var(--k-surface)); border: 1px solid rgb(var(--k-border)); border-radius: 10px; padding: 4px; z-index: 3;
}
.ep-zoom button { width: 28px; height: 26px; border-radius: 6px; border: 0; background: transparent; cursor: pointer; font-weight: 700; color: rgb(var(--k-fg)); font-size: 15px; }
.ep-zoom button:hover { background: rgb(var(--k-bg)); }
#pv-zoom-label { font-size: 10px; color: rgb(var(--k-muted)); }
.pv-status { position: absolute; top: 6px; right: 18px; font-size: 11px; color: rgb(var(--k-muted)); }
/* Modal */
.ec-modal { position: fixed; inset: 0; z-index: 60; background: rgba(6,40,34,.45); display: flex; align-items: flex-start; justify-content: center; padding-top: 6vh; }
.ec-modal[hidden] { display: none; }
.ec-modal-box { width: min(620px, 94vw); background: rgb(var(--k-surface)); border-radius: 10px; box-shadow: 0 18px 50px rgba(6,40,34,.25); }
.ec-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; font-size: 15px; }
.ec-x { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: rgb(var(--k-muted)); }
.ec-modal-body { padding: 8px 16px; max-height: 64vh; overflow-y: auto; }
.ec-modal-body .ec-item-editor { display: block; }
.ec-modal-foot { display: flex; gap: 8px; padding: 6px 16px 16px; }
.ec-modal-foot .btn-primary { flex: 1; }
@media (max-width: 900px) {
    .builder-layout { grid-template-columns: 1fr; height: auto; }
    .bnav { flex-direction: row; overflow-x: auto; }
    .bnav-sep { display: none; }
    .bpanel-wrap { border-right: 0; max-height: none; }
    .bpreview { height: 80vh; }
}

/* ===== Modal pratinjau template (galeri & Admin HQ) ===== */
.tplp-modal { position: fixed; inset: 0; z-index: 85; background: rgba(6,40,34,.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.tplp-modal[hidden] { display: none; }
.tplp-box { width: min(980px, 100%); height: min(94vh, 100%); background: rgb(var(--k-surface)); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.tplp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgb(var(--k-border)); }
.tplp-actions { display: flex; align-items: center; gap: 6px; }
.tplp-x { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: rgb(var(--k-muted)); }
.tplp-body { flex: 1; overflow: auto; background: rgb(var(--k-border)); padding: 18px; }
.tplp-page { margin: 0 auto; background: #fff; box-shadow: 0 6px 24px rgba(6,40,34,.18); overflow: hidden; }
.tplp-page iframe { border: 0; display: block; width: 794px; height: 1123px; transform-origin: 0 0; }

/* =====================================================================
 * v2 — Career Command Center (docs/visual-layout.md). Brand biru, AI ungu,
 * status semantik, kartu putih + border. Satu primary + satu secondary CTA per halaman.
 * ===================================================================== */
:focus-visible { outline: 2px solid rgb(var(--k-primary)); outline-offset: 2px; }
.btn { transition: background .15s ease, border-color .15s ease, filter .15s ease; }
.btn-primary:hover { background: rgb(var(--k-primary-700)); filter: none; }
.btn-secondary { background: rgb(var(--k-surface)); color: rgb(var(--k-fg)); border-color: rgb(var(--k-border)); }
.btn-secondary:hover { background: rgb(var(--k-bg)); }
.btn-ai { background: rgb(var(--k-purple)); color: #fff; }
.btn-ai:hover { filter: brightness(.93); }
.btn-danger { background: rgb(var(--k-surface)); color: rgb(var(--k-red)); border-color: rgba(var(--k-red) / .45); }
.btn-danger:hover { background: rgba(var(--k-red) / .06); }
.btn-link { background: none; border: 0; padding: 0; height: auto; color: rgb(var(--k-primary)); font-weight: 600; }

/* Sidebar bersection (visual §10) */
.nav-section { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: rgba(214, 226, 220, .55); font-weight: 700; padding: 14px 12px 6px; }
.sidebar-item svg { opacity: .7; }
.sidebar-sep { height: 1px; background: rgba(255,255,255,.08); margin: 10px 12px; }

/* Topbar kanan */
.topbar-right { display: flex; align-items: center; gap: 10px; }
.credit-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgb(var(--k-border)); color: rgb(var(--k-fg)); font-size: 13px; font-weight: 600; text-decoration: none; background: rgb(var(--k-surface)); }
.credit-pill:hover { border-color: rgb(var(--k-primary)); text-decoration: none; }
.credit-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--k-purple)); }
.bell { position: relative; display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 9px; color: rgb(var(--k-fg-muted)); }
.bell:hover { background: rgb(var(--k-bg)); text-decoration: none; }
.bell svg { width: 19px; height: 19px; }
.bell .count { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: rgb(var(--k-red)); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
@media (max-width: 640px) { .credit-pill .lbl { display: none; } }

/* Page header dengan aksi */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { margin: 0; }
.page-head .desc { color: rgb(var(--k-fg-muted)); margin: 2px 0 0; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: rgb(var(--k-fg-muted)); margin-bottom: 6px; }

/* Layout grid */
.grid-2 { display: grid; gap: 16px; grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-main { grid-template-columns: 1.5fr 1fr; } }
.card-flat { box-shadow: none; }
.card .card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.card .card-head h2, .card .card-head h3 { margin: 0; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--k-fg-muted)); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.divider { height: 1px; background: rgb(var(--k-border)); margin: 14px 0; }

/* Hero dashboard */
.hero { background: rgb(var(--k-surface)); border: 1px solid rgb(var(--k-border)); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; box-shadow: var(--shadow-card); }
.hero h1 { font-size: 24px; line-height: 32px; margin: 0; }
.hero p { margin: 2px 0 0; color: rgb(var(--k-fg-muted)); }

/* Score ring (satu skor utama) + bar breakdown (visual §31) */
.ring { --v: 0; --c: rgb(var(--k-primary)); width: 120px; height: 120px; border-radius: 50%; flex-shrink: 0; position: relative;
  background: conic-gradient(var(--c) calc(var(--v) * 1%), rgb(var(--k-border)) 0); display: flex; align-items: center; justify-content: center; }
.ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: rgb(var(--k-surface)); }
.ring > * { position: relative; text-align: center; }
.ring .val { font-size: 30px; font-weight: 700; line-height: 1; font-family: var(--font-sans); }
.ring .sub { font-size: 11px; color: rgb(var(--k-fg-muted)); margin-top: 2px; }
.ring.sm { width: 84px; height: 84px; } .ring.sm::before { inset: 7px; } .ring.sm .val { font-size: 22px; }
.tone-success { --c: rgb(var(--k-green)); } .tone-brand { --c: rgb(var(--k-primary)); } .tone-warning { --c: rgb(var(--k-orange)); } .tone-danger { --c: rgb(var(--k-red)); } .tone-muted { --c: rgb(var(--k-gray)); }
.readiness { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.readiness .status-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-top: 8px; text-align: center; }
.bars { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(130px, 170px) 1fr 34px; gap: 10px; align-items: center; font-size: 13px; }
.bar-row .track { height: 8px; border-radius: 999px; background: rgb(var(--k-border)); overflow: hidden; }
.bar-row .fill { height: 100%; border-radius: 999px; background: var(--c, rgb(var(--k-primary))); width: 0; transition: width .6s ease; }
.bar-row .num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-row .lbl { color: rgb(var(--k-fg-body)); }

/* Status pill (visual §43) — teks + titik, bukan warna saja */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: #EEF2EF; color: #4A5A54; }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-draft, .pill-archived, .pill-withdrawn { background: #EEF2EF; color: #4A5A54; }
.pill-ready, .pill-applied, .pill-follow_up { background: #E6F0EC; color: #0A4A3E; }
.pill-screening { background: #E8EFF8; color: #2F5E99; }
.pill-interview, .pill-technical_test, .pill-final_interview { background: #FBF5E6; color: #7A5C17; }
.pill-offer, .pill-accepted { background: #DCFCE7; color: #15803D; }
.pill-rejected { background: #FEE2E2; color: #B91C1C; }
.ai-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #FBF5E6; color: #7A5C17; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.mode-badge { display: inline-flex; padding: 2px 8px; border-radius: 999px; background: #F1F5F9; color: #475569; font-size: 11.5px; font-weight: 600; }

/* Tabs horizontal (workspace, list) — scroll di mobile */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid rgb(var(--k-border)); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 10px 14px; font-size: 13.5px; font-weight: 600; color: rgb(var(--k-fg-muted)); border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; margin-bottom: -1px; }
.tabs a:hover { color: rgb(var(--k-fg)); text-decoration: none; }
.tabs a.active { color: rgb(var(--k-primary)); border-bottom-color: rgb(var(--k-primary)); }
.tabs a .n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: rgb(var(--k-bg)); font-size: 11px; color: rgb(var(--k-fg-muted)); text-align: center; }

/* Workspace header */
.ws-head { background: rgb(var(--k-surface)); border: 1px solid rgb(var(--k-border)); border-radius: var(--radius-lg); padding: 18px 22px 0; margin-bottom: 18px; box-shadow: var(--shadow-card); }
.ws-head h1 { font-size: 22px; line-height: 30px; }
.ws-head .meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: rgb(var(--k-fg-muted)); margin: 6px 0 14px; }
.ws-head .tabs { margin: 0 -22px; padding: 0 12px; border-bottom: 0; border-top: 1px solid rgb(var(--k-border)); }

/* Application list cards */
.app-list { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .app-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .app-list { grid-template-columns: 1fr 1fr 1fr; } }
.app-card { background: rgb(var(--k-surface)); border: 1px solid rgb(var(--k-border)); border-radius: var(--radius-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-card); color: inherit; text-decoration: none; transition: border-color .15s ease; }
.app-card:hover { border-color: rgba(var(--k-primary) / .5); text-decoration: none; }
.app-card .co { font-weight: 700; font-size: 15px; color: rgb(var(--k-fg)); }
.app-card .pos { color: rgb(var(--k-fg-body)); font-size: 13.5px; }
.app-card .foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: rgb(var(--k-fg-muted)); }
.fit { font-weight: 700; font-variant-numeric: tabular-nums; }
.fit-success { color: rgb(var(--k-green)); } .fit-brand { color: rgb(var(--k-primary)); } .fit-warning { color: rgb(var(--k-orange)); } .fit-danger { color: rgb(var(--k-red)); } .fit-muted { color: rgb(var(--k-fg-muted)); }

/* Tabel ringkas lamaran aktif */
.list-rows { display: flex; flex-direction: column; }
.list-rows a { display: grid; grid-template-columns: 1.3fr 1.3fr 50px 120px 70px; gap: 10px; align-items: center; padding: 11px 4px; border-bottom: 1px solid rgb(var(--k-border)); color: inherit; text-decoration: none; font-size: 13.5px; }
.list-rows a:last-child { border-bottom: 0; }
.list-rows a:hover { background: rgb(var(--k-bg)); text-decoration: none; }
@media (max-width: 760px) { .list-rows a { grid-template-columns: 1fr auto; } .list-rows a .hide-m { display: none; } }

/* "What is holding you back?" (visual §17) */
.holdback { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: var(--radius-lg); padding: 18px 20px; }
.holdback h3 { font-size: 16px; margin: 0 0 10px; }
.gap-item { border-top: 1px solid #FDE68A; padding: 10px 0; }
.gap-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 13.5px; }
.gap-item summary::-webkit-details-marker { display: none; }
.gap-item summary::before { content: '⚠'; color: rgb(var(--k-orange)); margin-right: 6px; }
.gap-item .flow { margin: 8px 0 0 22px; font-size: 13px; display: grid; gap: 4px; color: rgb(var(--k-fg-body)); }
.gap-item .flow b { color: rgb(var(--k-fg)); }

/* Empty state (visual §42) */
.empty { text-align: center; padding: 40px 20px; border: 1px dashed rgb(var(--k-border)); border-radius: var(--radius-lg); background: rgb(var(--k-surface)); }
.empty h3 { margin: 0 0 4px; font-size: 17px; }
.empty p { color: rgb(var(--k-fg-muted)); max-width: 460px; margin: 0 auto 14px; }

/* Key-value list */
.kv { display: grid; grid-template-columns: minmax(120px, 160px) 1fr; gap: 6px 14px; font-size: 13.5px; }
.kv dt { color: rgb(var(--k-fg-muted)); }
.kv dd { margin: 0; color: rgb(var(--k-fg)); }
.kv .unknown { color: rgb(var(--k-fg-muted)); font-style: italic; }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 13.5px; }
.check-list li::before { content: '✓'; color: rgb(var(--k-green)); font-weight: 700; margin-right: 8px; }
.check-list.warn li::before { content: '⚠'; color: rgb(var(--k-orange)); }
.check-list.miss li::before { content: '✕'; color: rgb(var(--k-red)); }

/* Evidence */
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.filter-chips a { padding: 5px 12px; border-radius: 999px; border: 1px solid rgb(var(--k-border)); font-size: 13px; color: rgb(var(--k-fg-body)); background: rgb(var(--k-surface)); text-decoration: none; }
.filter-chips a.active { background: rgb(var(--k-primary)); border-color: rgb(var(--k-primary)); color: #fff; }
.ev-card { background: rgb(var(--k-surface)); border: 1px solid rgb(var(--k-border)); border-radius: var(--radius-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.ev-card .metric { font-size: 18px; font-weight: 700; color: rgb(var(--k-fg)); }
.tag { display: inline-block; padding: 2px 8px; border-radius: 6px; background: rgb(var(--k-bg)); border: 1px solid rgb(var(--k-border)); font-size: 12px; margin: 0 4px 4px 0; color: rgb(var(--k-fg-body)); }
.vstat { font-size: 12px; font-weight: 600; }
.vstat-VERIFIED, .vstat-USER_CONFIRMED { color: rgb(var(--k-green)); }
.vstat-INFERRED, .vstat-NEEDS_CONFIRMATION { color: rgb(var(--k-orange)); }
.vstat-MISSING, .vstat-NO_EVIDENCE, .vstat-REJECTED { color: rgb(var(--k-red)); }

/* Claims (Evidence Lock, visual §20) */
.claim { border: 1px solid rgb(var(--k-border)); border-radius: 10px; padding: 10px 12px; display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; }
.claim + .claim { margin-top: 8px; }
.claim .txt { font-size: 13.5px; }
.claim .note { font-size: 12px; color: rgb(var(--k-fg-muted)); margin-top: 2px; }
.claim.rejected { opacity: .55; }
.claim.rejected .txt { text-decoration: line-through; }

/* Interview */
.q-card { border: 1px solid rgb(var(--k-border)); border-radius: var(--radius-lg); padding: 16px 18px; background: rgb(var(--k-surface)); }
.q-card + .q-card { margin-top: 12px; }
.q-card .qn { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: rgb(var(--k-fg-muted)); text-transform: uppercase; }
.q-card .q { font-size: 15px; font-weight: 600; margin: 4px 0 8px; color: rgb(var(--k-fg)); }
.q-card .why { font-size: 12.5px; color: rgb(var(--k-fg-muted)); }
.star { display: grid; grid-template-columns: 30px 1fr; gap: 6px 10px; font-size: 13.5px; }
.star b { width: 26px; height: 26px; border-radius: 7px; background: rgb(var(--k-bg)); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }

/* AI processing stepper (visual §55) */
.ai-steps { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; font-size: 13.5px; }
.ai-steps li { display: flex; gap: 10px; align-items: center; color: rgb(var(--k-fg-muted)); }
.ai-steps li::before { content: '○'; width: 18px; text-align: center; }
.ai-steps li.done { color: rgb(var(--k-fg)); } .ai-steps li.done::before { content: '✓'; color: rgb(var(--k-green)); font-weight: 700; }
.ai-steps li.now { color: rgb(var(--k-purple)); font-weight: 600; } .ai-steps li.now::before { content: '●'; animation: pulse-ai 1.2s ease-in-out infinite; }
@keyframes pulse-ai { 50% { opacity: .35; } }
.ai-panel { border: 1px solid #EAD9AE; background: #FDFAF2; border-radius: var(--radius-lg); padding: 18px 20px; }
.ai-panel h3 { color: #7A5C17; font-size: 16px; margin: 0 0 4px; }

/* Versions */
.versions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; }
.versions a, .versions span.cur { padding: 3px 9px; border-radius: 7px; border: 1px solid rgb(var(--k-border)); color: rgb(var(--k-fg-body)); text-decoration: none; }
.versions span.cur { background: rgb(var(--k-primary)); border-color: rgb(var(--k-primary)); color: #fff; }

/* Stat tiles */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px) { .stat-grid { grid-template-columns: repeat(5, 1fr); } }
.stat { background: rgb(var(--k-surface)); border: 1px solid rgb(var(--k-border)); border-radius: var(--radius-lg); padding: 14px 16px; }
.stat .v { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 12px; color: rgb(var(--k-fg-muted)); }
.hbar { display: grid; grid-template-columns: minmax(110px, 200px) 1fr 70px; gap: 10px; align-items: center; font-size: 13px; padding: 4px 0; }
.hbar .track { height: 8px; background: rgb(var(--k-border)); border-radius: 999px; overflow: hidden; }
.hbar .fill { height: 100%; background: rgb(var(--k-primary)); border-radius: 999px; }

/* Profile two-column (Career Profile) */
.split { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 200px 1fr; } }
.side-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 80px; align-self: start; }
.side-nav a { padding: 8px 12px; border-radius: 8px; color: rgb(var(--k-fg-body)); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.side-nav a:hover, .side-nav a.active { background: rgb(var(--k-surface)); color: rgb(var(--k-primary)); box-shadow: inset 0 0 0 1px rgb(var(--k-border)); }
@media (max-width: 899px) { .side-nav { flex-direction: row; overflow-x: auto; position: static; } }
.repeat-item { border: 1px solid rgb(var(--k-border)); border-radius: 10px; padding: 12px; margin-bottom: 10px; position: relative; }
.repeat-item .rm { position: absolute; top: 8px; right: 8px; }
.form-grid { display: grid; gap: 10px 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field-hint { font-size: 12px; color: rgb(var(--k-fg-muted)); margin-top: 4px; }
.field-error { font-size: 12px; color: rgb(var(--k-red)); margin-top: 4px; }

/* Modal generik (aksesibel: role=dialog, fokus pertama, Esc) */
.modal { position: fixed; inset: 0; z-index: 85; background: rgba(6,40,34,.5); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade .15s ease; }
.modal[hidden] { display: none; }
.modal-box { width: min(620px, 100%); max-height: 92vh; overflow-y: auto; background: rgb(var(--k-surface)); border-radius: var(--radius-xl); padding: 22px 24px; box-shadow: 0 24px 60px rgba(6,40,34,.3); position: relative; }
.modal-x { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 24px; cursor: pointer; color: rgb(var(--k-fg-muted)); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.pricing-box { border-radius: var(--radius-xl); }
.pricing-card.is-best { border-color: rgb(var(--k-primary)); }
.pricing-card .per { font-size: 12.5px; color: rgb(var(--k-fg-muted)); margin-top: -2px; }
.pricing-card .tagline { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--k-fg-muted)); }
.coupon-row { display: flex; gap: 8px; margin-top: 14px; }
.coupon-row input { max-width: 200px; }

/* Notifikasi */
.notif { display: flex; gap: 12px; padding: 12px 4px; border-bottom: 1px solid rgb(var(--k-border)); }
.notif.unread .t { font-weight: 700; }
.notif .when { font-size: 12px; color: rgb(var(--k-fg-muted)); white-space: nowrap; }

/* Bottom nav mobile (visual §50) */
.bottom-nav { display: none; }
@media (max-width: 767px) {
  .bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; background: rgb(var(--k-surface)); border-top: 1px solid rgb(var(--k-border)); padding: 4px 0 calc(4px + env(safe-area-inset-bottom)); }
  .bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; font-size: 11px; font-weight: 600; color: rgb(var(--k-fg-muted)); text-decoration: none; background: none; border: 0; font-family: inherit; }
  .bottom-nav a.active { color: rgb(var(--k-primary)); }
  .bottom-nav svg { width: 20px; height: 20px; }
  .app-shell:not(.focus) .app-main { padding-bottom: 62px; }
  .sticky-cta { position: sticky; bottom: 70px; z-index: 20; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.form-group label > .form-control { margin-top: 6px; font-weight: 400; }
.bar-row .track, .bar-row .fill, .hbar .track, .hbar .fill { display: block; }
.gap-item summary > span:first-child { flex: 1; }
@media (max-width: 640px) {
  .hide-sm, .hidden-sm { display: none !important; }
  .topbar { padding: 0 12px; }
  .topbar-right { gap: 6px; }
}
.icon-actions { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: nowrap; align-items: center; }
.icon-actions form { display: inline-flex; margin: 0; }
.btn-icon.btn-secondary { background: rgb(var(--k-surface)); border: 1px solid rgb(var(--k-border)); color: rgb(var(--k-fg-body)); }
.btn-icon.btn-secondary:hover { border-color: rgb(var(--k-primary)); color: rgb(var(--k-primary)); }
.btn-icon.btn-danger { color: rgb(var(--k-red)); border: 1px solid rgba(var(--k-red) / .35); background: rgb(var(--k-surface)); }
.btn-icon.is-locked { color: rgb(var(--k-fg-muted)); position: relative; }
.btn-icon.is-locked::after { content: ''; position: absolute; right: 3px; bottom: 3px; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--k-orange)); }

/* Checklist alasan ("Kenapa direkomendasikan?", "Kenapa skor ini?") */
.why-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.why-list li { padding-left: 20px; position: relative; line-height: 1.45; }
.why-list li::before { position: absolute; left: 0; font-weight: 700; }
.why-list li.ok::before { content: "✓"; color: rgb(var(--k-green)); }
.why-list li.warn::before { content: "⚠"; color: rgb(var(--k-orange)); }
.why-box { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(var(--k-border)); }
.faq-item { border-top: 1px solid rgb(var(--k-border)); padding: 10px 0; }
.faq-item summary { cursor: pointer; font-weight: 600; font-size: 14px; }

/* Career Demand: skill diminta pasar vs bukti Anda (2 seri, warna divalidasi CVD) */
.sw-mkt { --c: #2D806F; background: #2D806F; }
.sw-you { --c: #063B32; background: #063B32; }
.dm-legend { display: flex; gap: 14px; margin-bottom: 6px; color: rgb(var(--k-fg-body)); }
.dm-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.dm-rows { display: grid; gap: 2px; }
.dm-row { display: grid; grid-template-columns: minmax(110px, 180px) 1fr 44px 150px; gap: 10px; align-items: center; font-size: 13px; padding: 5px 0; border-radius: 6px; }
.dm-row:not(.dm-head):hover { background: rgb(var(--k-bg)); }
.dm-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: rgb(var(--k-fg-muted)); padding: 0; }
.dm-row .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.dm-row .num:last-child { text-align: left; }
.dm-bars { display: grid; gap: 2px; }
.dm-bars .track { display: block; height: 6px; border-radius: 4px; background: rgb(var(--k-border)); overflow: hidden; }
.dm-bars .fill { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.dm-gap { margin-top: 12px; padding: 12px; border-radius: 10px; background: #FFFBEB; border: 1px solid #FDE68A; display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
@media (max-width: 640px) { .dm-head { display: none; } .dm-row { grid-template-columns: 1fr 44px 70px; } .dm-row .dm-bars { grid-column: 1 / -1; grid-row: 2; } .dm-state { display: none; } }

/* ---------- TANEVA brand (logo auth + tagline teks) ---------- */
.auth-logo { text-align: center; margin-bottom: 18px; }
.auth-logo img { height: 44px; width: auto; display: inline-block; }
.auth-logo p { margin: 6px 0 0; font-family: var(--font-head); font-size: 12.5px; letter-spacing: .04em; color: rgb(var(--k-fg-muted)); }
.auth-logo::after { content: ''; display: block; width: 36px; height: 2px; margin: 12px auto 0; background: rgb(var(--k-gold)); border-radius: 2px; }
/* Sidebar terlihat (desktop, bukan mode focus) sudah memuat logo — topbar tidak perlu mengulang. */
@media (min-width: 1024px) { .app-shell:not(.focus) .topbar-brand { display: none; } }