/* Kerjain design tokens v2026.10.18.6 (cache-bust: ?v=2026.10.18.6) */
/* Kerjain design tokens — diambil dari landing (kerjain.ai.id). Dipakai console; akun dapat @import file ini.
   Palet sage flat, tanpa gradient/glow. Nilai warna = kanal RGB agar bisa dipakai rgb(var(--x) / a). */
/* Font: Plus Jakarta Sans (OFL), self-host di /brand/fonts/. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/brand/fonts/plus-jakarta-sans-400.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/brand/fonts/plus-jakarta-sans-500.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/brand/fonts/plus-jakarta-sans-600.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/brand/fonts/plus-jakarta-sans-700.woff2') format('woff2')}
:root{
  --bg:247 248 246;--surface:255 255 255;--soft:233 238 227;--ink:32 43 39;--muted:96 110 104;--line:224 229 221;
  --accent:47 103 81;--onaccent:255 255 255;--ok:47 103 81;--warn:168 112 20;--bad:178 58 50;
  --kj-font:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;--kj-font-display:var(--kj-font);--kj-radius:4px;--kj-radius-card:6px;
  color-scheme:light;
}
.dark{
  /* = Notulis dark (LAYOUT_TEMPLATE.md §7): netral zinc, tanpa hijau di permukaan. Hijau hanya aksen/tautan/tombol primer. */
  --bg:9 9 11;--surface:15 15 18;--soft:34 34 37;--ink:250 250 250;--muted:161 161 170;--line:29 29 32;
  --accent:155 196 168;--onaccent:23 38 27;--ok:155 196 168;--warn:222 178 96;--bad:238 139 139;
  color-scheme:dark;
}

/* ---- Motion tokens (animasi ringan, tipis-tipis). Bisa di-embed aplikasi lain:
   <link rel="stylesheet" href="https://akun.kerjain.ai.id/css/kerjain-tokens.css">
   Kelas: .kj-press (tombol/tautan), .kj-fade-up (kartu saat load), .kj-pop (dropdown/panel), .kj-toast, .kj-ripple, .is-loading/.kj-btn-loading, .kj-skeleton, .kj-spinner */
:root{
  --kj-primary:rgb(var(--accent));
  --kj-dur-fast:150ms;--kj-dur:200ms;--kj-dur-slow:320ms;
  --kj-ease:cubic-bezier(.2,.7,.3,1);--kj-ease-out:cubic-bezier(.16,1,.3,1);
  --kj-press-scale:.98;--kj-shadow-hover:0 4px 14px -6px rgb(0 0 0/.18);--kj-lift:-1px;
}
@keyframes kj-fade-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes kj-pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@keyframes kj-slide-in{from{transform:translateX(-100%)}to{transform:none}}
@keyframes kj-fade{from{opacity:0}to{opacity:1}}
@keyframes kj-toast{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes kj-ripple{to{transform:scale(4);opacity:0}}
@keyframes kj-spin{to{transform:rotate(360deg)}}
/* Tanpa cascade layer (aman sebelum/sesudah tema Tailwind/Filament); spesifisitas 0 via :where(). */
:where(.btn),:where(.kj-press){transition:background-color var(--kj-dur) var(--kj-ease),border-color var(--kj-dur) var(--kj-ease),color var(--kj-dur) var(--kj-ease),box-shadow var(--kj-dur) var(--kj-ease),opacity var(--kj-dur),transform var(--kj-dur-fast) var(--kj-ease);position:relative;overflow:hidden}
:where(.btn:hover),:where(.kj-press:hover){box-shadow:var(--kj-shadow-hover)}
:where(.btn:active),:where(.kj-press:active){transform:scale(var(--kj-press-scale));box-shadow:none}
:where(a.card),:where(.kj-card-link){transition:border-color var(--kj-dur) var(--kj-ease),box-shadow var(--kj-dur) var(--kj-ease),transform var(--kj-dur) var(--kj-ease)}
:where(a.card:hover),:where(.kj-card-link:hover){box-shadow:var(--kj-shadow-hover);transform:translateY(var(--kj-lift))}
:where(a.card:active),:where(.kj-card-link:active){transform:scale(.99)}
:where(.kj-fade-up),:where(main .card){animation:kj-fade-up var(--kj-dur-slow) var(--kj-ease-out) both}
:where(main .card:nth-child(2)){animation-delay:40ms}:where(main .card:nth-child(3)){animation-delay:80ms}:where(main .card:nth-child(4)){animation-delay:120ms}:where(main .card:nth-child(n+5)){animation-delay:160ms}
:where(.kj-pop){animation:kj-pop var(--kj-dur) var(--kj-ease)}
:where(.kj-toast){animation:kj-toast var(--kj-dur-slow) var(--kj-ease-out) both}
:where(.kj-ripple){position:absolute;border-radius:9999px;background:currentColor;opacity:.18;transform:scale(0);animation:kj-ripple 500ms var(--kj-ease) forwards;pointer-events:none}
:where(.is-loading),:where(.kj-btn-loading){pointer-events:none;opacity:.8;cursor:progress}
:where(.is-loading)::after,:where(.kj-btn-loading)::after{content:"";width:.9em;height:.9em;border-radius:9999px;border:2px solid currentColor;border-right-color:transparent;animation:kj-spin .6s linear infinite;margin-left:.35rem}
:where(a),:where(button){-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .btn:active,.kj-press:active,a.card:hover,a.card:active{transform:none}
}

/* Angka tabel rata (tabular). */
.kj-num,.tabular-nums{font-variant-numeric:tabular-nums}

/* ---- Logo aplikasi: simbol Kerjain + wordmark "Kerjain AI" + badge nama aplikasi. Lihat docs/BRAND.md.
   <a class="kj-brand" data-app="notulis"></a>  → diisi otomatis oleh kerjain-apps.js (mark + badge "Notulis")
   atau manual: <span class="kj-brand"><img class="kj-brand-mark" src=".../brand/mark.svg" alt="Kerjain"><span class="kj-app-badge">Notulis</span></span> */
:root{--kj-badge-color:47 103 81;--kj-input-border:#e2e6de;--kj-sidebar-fg:#536052;--kj-primary-hover:#275845}
.dark{--kj-badge-color:155 196 168;--kj-input-border:hsl(240 4% 17% / .7);--kj-sidebar-fg:hsl(240 5% 85%);--kj-primary-hover:#aed4bb}
.kj-brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;line-height:1}
.kj-brand-mark{height:28px;width:28px;flex:none;display:block}
/* Wordmark "Kerjain AI" (identik landing): Plus Jakarta Sans 700 19px, #0F172A / gelap #FFFFFF, "AI" #2F6751 / gelap #9BC4A8 */
.kj-brand-t{font-family:var(--kj-font-display,"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif);font-weight:700;font-size:19px;line-height:1;letter-spacing:-.01em;color:#0F172A;white-space:nowrap}
.kj-brand-ai{color:#2F6751;margin-left:.15em}
.dark .kj-brand-t{color:#FFFFFF}.dark .kj-brand-ai{color:#9BC4A8}
.kj-brand .kj-brand-mark-dark{display:none}
.dark .kj-brand .kj-brand-mark-light{display:none}.dark .kj-brand .kj-brand-mark-dark{display:block}
.kj-app-badge{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:9999px;font-family:var(--kj-font);font-weight:600;font-size:12px;line-height:1;letter-spacing:0;white-space:nowrap;color:rgb(var(--kj-badge-color));background:rgb(var(--kj-badge-color) / .1)}

/* ---- Loading states (docs/MOTION.md). Flat: denyut opacity, tanpa gradien. Mati di prefers-reduced-motion. ---- */
@keyframes kj-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.kj-skeleton{display:block;background:rgb(var(--line));border-radius:var(--kj-radius);color:transparent!important;user-select:none;pointer-events:none;animation:kj-pulse 1.4s ease-in-out infinite}
.kj-skeleton:empty:before{content:"\00a0"}
.kj-skeleton-text{height:.8em;margin:.3em 0;width:100%}.kj-skeleton-text:last-child{width:60%}
.kj-skeleton-circle{border-radius:9999px;aspect-ratio:1}
.kj-spinner{display:inline-block;width:1em;height:1em;flex:none;border-radius:9999px;border:2px solid currentColor;border-right-color:transparent;vertical-align:-.15em;animation:kj-spin .6s linear infinite}
.kj-spinner-lg{width:1.75em;height:1.75em;border-width:3px}
[aria-busy="true"]>.kj-skeleton{cursor:progress}
@media (prefers-reduced-motion:reduce){.kj-skeleton{animation:none!important;opacity:.7}.kj-spinner,.is-loading:after,.kj-btn-loading:after{animation-duration:1.6s!important;animation-iteration-count:infinite!important}}

/* ---- Skeleton navigasi (resources/js/nav-skeleton.js, docs/MOTION.md): kerangka halaman meniru tata letak akun/app/console. ---- */
.kj-sk-page{max-width:72rem;margin:0 auto;padding:2.5rem 1.25rem 4rem;display:flex;flex-direction:column;gap:1.5rem;animation:kj-fade var(--kj-dur) var(--kj-ease) both}
[data-kj-main="padded"]>.kj-sk-page{max-width:none;padding:0}
.kj-sk-page .kj-skeleton{max-width:100%}
.kj-sk-title{display:flex;flex-direction:column;gap:.6rem}
.kj-sk-panel{background:rgb(var(--surface));border:1px solid rgb(var(--line));border-radius:var(--kj-radius-card);padding:1.25rem;display:flex;flex-direction:column;gap:.7rem}
.kj-sk-flush{padding:0;gap:0}
.kj-sk-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.kj-sk-grid-4{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.kj-sk-card{background:rgb(var(--surface));border:1px solid rgb(var(--line));border-radius:var(--kj-radius-card);padding:1.25rem;display:flex;flex-direction:column;gap:.6rem}
.kj-sk-card>.kj-skeleton:first-child{border-radius:8px;margin-bottom:.25rem}
.kj-sk-row{display:grid;gap:1rem;align-items:center;padding:.95rem 1.25rem;border-top:1px solid rgb(var(--line))}
.kj-sk-row:first-child,.kj-sk-head+.kj-sk-row{border-top:0}.kj-sk-head{background:rgb(var(--soft) / .5);border-bottom:1px solid rgb(var(--line))}
.kj-sk-li{display:flex;align-items:center;gap:.9rem;padding:.95rem 1.25rem;border-top:1px solid rgb(var(--line))}.kj-sk-li:first-child{border-top:0}
.kj-sk-panel:not(.kj-sk-flush) .kj-sk-li{padding:.6rem 0}
.kj-sk-grow{flex:1;display:flex;flex-direction:column;gap:.45rem;min-width:0}
.kj-sk-form{gap:1.25rem;max-width:40rem}.kj-sk-field{display:flex;flex-direction:column;gap:.5rem}.kj-sk-input{height:40px;width:100%;border-radius:var(--kj-radius)}
.kj-sk-split{display:grid;gap:1rem;grid-template-columns:2fr 1fr}@media (max-width:720px){.kj-sk-split{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.kj-sk-page{animation:none!important}}
.dark .kj-skeleton{background:rgb(39 39 42)}