:root {
  --background: oklch(0.985 0.004 255);
  --foreground: oklch(0.22 0.045 262);
  --card: oklch(1 0 0);
  --muted: oklch(0.962 0.01 258);
  --muted-foreground: oklch(0.45 0.035 260);
  --primary: oklch(0.52 0.2 262);
  --primary-foreground: oklch(0.99 0.005 255);
  --secondary: oklch(0.945 0.02 258);
  --accent: oklch(0.955 0.012 258);
  --highlight: oklch(0.8 0.12 205);
  --border: oklch(0.915 0.012 258);
  --input: oklch(0.89 0.015 258);
  --ring: oklch(0.6 0.17 262);
  --destructive: oklch(0.53 0.22 25);
  --destructive-solid: oklch(0.53 0.22 25);
  --success: oklch(0.52 0.14 152);
  --success-muted: oklch(0.96 0.045 152);
  --success-border: oklch(0.86 0.08 152);
  --warning: oklch(0.49 0.14 70);
  --warning-muted: oklch(0.965 0.05 85);
  --warning-border: oklch(0.86 0.1 82);
  --sidebar: oklch(0.24 0.075 262);
  --sidebar-foreground: oklch(0.97 0.01 255);
  --sidebar-primary: oklch(0.82 0.12 205);
  --sidebar-primary-foreground: oklch(0.22 0.06 240);
  --sidebar-accent: oklch(0.32 0.09 262);
  --sidebar-border: oklch(0.33 0.07 262);
  --shadow-sm: 0 1px 3px oklch(0.25 0.05 262 / 0.08), 0 1px 2px oklch(0.25 0.05 262 / 0.04);
  --shadow-lg: 0 18px 40px oklch(0.25 0.08 262 / 0.16), 0 4px 8px oklch(0.25 0.05 262 / 0.06);
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-heading: 'Manrope', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --radius: 1rem;
  --sidebar-w: 16rem;
  --header-h: 3.75rem;
}
.dark {
  --background: oklch(0.19 0.03 262);
  --foreground: oklch(0.95 0.01 255);
  --card: oklch(0.23 0.035 262);
  --muted: oklch(0.27 0.03 262);
  --muted-foreground: oklch(0.72 0.03 258);
  --primary: oklch(0.68 0.17 258);
  --primary-foreground: oklch(0.16 0.04 262);
  --secondary: oklch(0.31 0.045 262);
  --accent: oklch(0.25 0.03 262);
  --highlight: oklch(0.76 0.11 205);
  --border: oklch(0.32 0.03 262);
  --input: oklch(0.35 0.035 262);
  --ring: oklch(0.65 0.15 258);
  --destructive: oklch(0.72 0.19 25);
  --destructive-solid: oklch(0.55 0.22 25);
  --success: oklch(0.72 0.15 152);
  --success-muted: oklch(0.27 0.05 152);
  --success-border: oklch(0.4 0.08 152);
  --warning: oklch(0.8 0.14 80);
  --warning-muted: oklch(0.29 0.05 80);
  --warning-border: oklch(0.45 0.09 80);
  --sidebar: oklch(0.15 0.045 262);
  --sidebar-accent: oklch(0.25 0.06 262);
  --sidebar-border: oklch(0.27 0.05 262);
  --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.4), 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-lg: 0 18px 40px oklch(0 0 0 / 0.55), 0 4px 8px oklch(0 0 0 / 0.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font-sans); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; line-height: 1.5; font-size: 15px; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
.font-heading, h1, h2, h3 { font-family: var(--font-heading); letter-spacing: -0.02em; }
.hidden { display: none !important; }
.muted { color: var(--muted-foreground); }
.small { font-size: 0.8125rem; }
.xs { font-size: 0.75rem; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row { display: flex; align-items: center; gap: 0.75rem; }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 1rem; }
.stack-sm > * + * { margin-top: 0.5rem; }
.icon { flex: none; vertical-align: middle; }
.spin { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Tombol */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.5rem; padding: 0 1rem; border-radius: 0.75rem; border: 1px solid transparent; font-weight: 500; font-size: 0.875rem; background: var(--primary); color: var(--primary-foreground); transition: opacity .15s, background .15s; white-space: nowrap; }
.btn:hover { opacity: 0.92; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.outline { background: var(--card); color: var(--foreground); border-color: var(--input); }
.btn.outline:hover { background: var(--accent); opacity: 1; }
.btn.ghost { background: transparent; color: var(--foreground); }
.btn.ghost:hover { background: var(--accent); opacity: 1; }
.btn.danger { background: var(--destructive-solid); color: #fff; }
.btn.sm { height: 2rem; padding: 0 0.75rem; font-size: 0.8125rem; }
.btn.lg { height: 3rem; font-size: 1rem; width: 100%; }
.btn.icon-only { width: 2.25rem; padding: 0; height: 2.25rem; }

/* Kartu */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 1.5rem; padding: 1.25rem; }
.card.flat { border-radius: 1rem; }
.card h2 { font-size: 1rem; font-weight: 700; }
.list { border: 1px solid var(--border); border-radius: 1rem; background: var(--card); overflow: hidden; }
.list > li { padding: 0.75rem 1rem; }
.list > li + li, .divide > li + li { border-top: 1px solid var(--border); }
.divide > li { padding: 0.6rem 0; }
.empty { border: 1px dashed var(--border); border-radius: 1rem; padding: 1.5rem; text-align: center; color: var(--muted-foreground); font-size: 0.875rem; }

/* Form */
.field { display: block; margin-bottom: 1rem; }
.field > span { display: block; font-size: 0.8125rem; font-weight: 500; margin-bottom: 0.35rem; }
.input, select.input, textarea.input { width: 100%; height: 2.5rem; padding: 0 0.75rem; border-radius: 0.75rem; border: 1px solid var(--input); background: var(--card); color: var(--foreground); font: inherit; font-size: 0.9375rem; }
textarea.input { height: auto; padding: 0.6rem 0.75rem; min-height: 5rem; resize: vertical; }
.input:focus { outline: 2px solid var(--ring); outline-offset: 0; border-color: transparent; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

/* Lencana */
.badge { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.75rem; font-weight: 500; white-space: nowrap; background: var(--muted); color: var(--muted-foreground); }
.badge.ok { background: var(--success-muted); color: var(--success); border-color: var(--success-border); }
.badge.warn { background: var(--warning-muted); color: var(--warning); border-color: var(--warning-border); }
.badge.bad { background: color-mix(in oklab, var(--destructive) 10%, transparent); color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 25%, transparent); }
.badge.info { background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); border-color: color-mix(in oklab, var(--primary) 25%, transparent); }
.badge.cyan { background: color-mix(in oklab, var(--highlight) 20%, transparent); color: var(--foreground); border-color: color-mix(in oklab, var(--highlight) 40%, transparent); }

/* Statistik */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.stats.three { grid-template-columns: repeat(3, 1fr); }
.stats > * { min-width: 0; }
.row > .truncate, .row > .grow, .card > .row > div, .grid2 > * { min-width: 0; }
.stat > div { min-width: 0; }
@media (max-width: 639px) { .stat { gap: .75rem; padding: .85rem; } .stat .ico { width: 2.25rem; height: 2.25rem; } .stats.three { grid-template-columns: 1fr; } }
.stat { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; transition: background .15s; }
a.stat:hover { background: var(--accent); }
.stat .ico { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; flex: none; }
.stat .n { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.tone-warn { background: var(--warning-muted); color: var(--warning); }
.tone-ok { background: var(--success-muted); color: var(--success); }
.tone-info { background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); }
.tone-cyan { background: color-mix(in oklab, var(--highlight) 25%, transparent); color: var(--foreground); }
.alert { display: flex; gap: 0.75rem; align-items: flex-start; border-radius: 1rem; padding: 1rem; font-size: 0.875rem; border: 1px solid var(--border); }
.alert.warn { background: var(--warning-muted); border-color: var(--warning-border); color: var(--warning); }
.alert.bad { background: color-mix(in oklab, var(--destructive) 6%, transparent); border-color: color-mix(in oklab, var(--destructive) 25%, transparent); }
.alert.info { background: color-mix(in oklab, var(--primary) 6%, transparent); border-color: color-mix(in oklab, var(--primary) 20%, transparent); }
.alert.ok { background: var(--success-muted); border-color: var(--success-border); color: var(--success); }

.cols { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .cols.two { grid-template-columns: 1fr 1fr; } .cols.detail { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .cols.clock { grid-template-columns: 1fr 1.1fr; } .stats { grid-template-columns: repeat(4, 1fr); } .stats.three { grid-template-columns: repeat(3, 1fr); } }

/* Kerangka halaman */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--sidebar); color: var(--sidebar-foreground); display: none; flex-direction: column; z-index: 45; }
@media (min-width: 1024px) { .sidebar { display: flex; } .shell { padding-left: var(--sidebar-w); } .only-mobile { display: none !important; } }
.sidebar .brand { height: var(--header-h); display: flex; align-items: center; gap: 0.65rem; padding: 0 1.25rem; font-family: var(--font-heading); font-size: 1.125rem; font-weight: 700; flex: none; }
.ws-switch { position: relative; margin: 0 1rem 1rem; }
.ws-btn { width: 100%; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--sidebar-border); border-radius: 0.75rem; background: transparent; color: color-mix(in oklab, var(--sidebar-foreground) 85%, transparent); font-size: 0.75rem; text-align: left; }
.ws-menu { position: absolute; left: 0; right: 0; top: calc(100% + 0.35rem); background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: 0.75rem; box-shadow: var(--shadow-lg); z-index: 60; padding: 0.35rem; max-height: 18rem; overflow: auto; }
.ws-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 0.5rem 0.65rem; border-radius: 0.5rem; font-size: 0.8125rem; }
.ws-menu button:hover, .ws-menu button.on { background: var(--accent); }
.nav { flex: 1; overflow-y: auto; padding: 0 0.75rem 1.5rem; }
.nav h4 { margin: 1.25rem 0 0.4rem; padding: 0 0.75rem; font: 500 0.6875rem var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in oklab, var(--sidebar-foreground) 50%, transparent); }
.nav a { display: flex; align-items: center; gap: 0.75rem; height: 2.5rem; padding: 0 0.75rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 500; color: color-mix(in oklab, var(--sidebar-foreground) 75%, transparent); transition: background .15s; }
.nav a:hover { background: color-mix(in oklab, var(--sidebar-accent) 60%, transparent); color: var(--sidebar-foreground); }
.nav a.on { background: var(--sidebar-accent); color: var(--sidebar-foreground); }
.nav a.on .icon { color: var(--sidebar-primary); }
.nav .count { margin-left: auto; background: var(--sidebar-primary); color: var(--sidebar-primary-foreground); border-radius: 999px; padding: 0 0.4rem; font-size: 0.75rem; }
.drawer { position: fixed; inset: 0; z-index: 50; display: none; }
.drawer.open { display: block; }
.drawer .scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .5); }
.drawer .sidebar { display: flex; width: 18rem; max-width: 85vw; }
.topbar { position: sticky; top: 0; z-index: 10; height: var(--header-h); display: flex; align-items: center; gap: 0.75rem; padding: 0 1rem; background: color-mix(in oklab, var(--background) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.topbar .spacer { margin-left: auto; }
.main { max-width: 72rem; margin: 0 auto; padding: 1rem; }
@media (min-width: 768px) { .main { padding: 1.5rem; } }
@media (min-width: 1024px) { .main { padding: 2rem; } }
.avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); font-weight: 600; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; border: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.menu { position: absolute; right: 0; top: calc(100% + 0.5rem); width: 15rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-lg); padding: 0.5rem; z-index: 60; }
.menu .who { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); margin-bottom: 0.35rem; }
.menu button { display: flex; width: 100%; align-items: center; gap: 0.6rem; border: 0; background: transparent; padding: 0.55rem 0.75rem; border-radius: 0.6rem; font-size: 0.875rem; text-align: left; }
.menu button:hover { background: var(--accent); }
.page-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .page-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.page-head .eyebrow { font: 600 0.75rem var(--font-heading); letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); margin-bottom: 0.25rem; }
.page-head h1 { font-size: 1.5rem; font-weight: 700; }
@media (min-width: 768px) { .page-head h1 { font-size: 1.875rem; } }

/* Kartu jam absen */
.clock { overflow: hidden; padding: 0; }
.clock .top { background: var(--sidebar); color: var(--sidebar-foreground); padding: 1.25rem; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 0.5rem; }
.clock .time { font: 700 3rem/1 var(--font-heading); letter-spacing: -0.03em; }
.clock .body { padding: 1.25rem; }
.geo { display: flex; gap: 0.5rem; align-items: flex-start; border: 1px solid var(--border); border-radius: 0.75rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; background: var(--muted); color: var(--muted-foreground); }
.geo.ok { background: var(--success-muted); border-color: var(--success-border); color: var(--success); }
.geo.bad { background: color-mix(in oklab, var(--destructive) 6%, transparent); border-color: color-mix(in oklab, var(--destructive) 25%, transparent); color: var(--destructive); }

/* Tabel */
.tbl { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tbl th { text-align: left; font-weight: 600; font-size: 0.75rem; color: var(--muted-foreground); padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); }
.tbl td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border); }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 1rem; background: var(--card); }

/* Dialog & toast */
.modal-back { position: fixed; inset: 0; background: rgb(0 0 0 / .5); z-index: 70; display: flex; align-items: flex-end; justify-content: center; padding: 0; }
@media (min-width: 640px) { .modal-back { align-items: center; padding: 1rem; } }
.modal { background: var(--card); width: 100%; max-width: 28rem; max-height: 92vh; overflow: auto; border-radius: 1.25rem 1.25rem 0 0; padding: 1.25rem; box-shadow: var(--shadow-lg); }
@media (min-width: 640px) { .modal { border-radius: 1.25rem; } }
.modal h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.25rem; }
.modal .actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
#toasts { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 0.5rem; width: min(92vw, 24rem); }
.toast { background: var(--foreground); color: var(--background); padding: 0.7rem 1rem; border-radius: 0.85rem; font-size: 0.875rem; box-shadow: var(--shadow-lg); }
.toast.err { background: var(--destructive-solid); color: #fff; }
.toast.ok { background: var(--success); color: #fff; }
.skel { background: linear-gradient(90deg, var(--muted), var(--accent), var(--muted)); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 0.5rem; }
@keyframes shimmer { to { background-position: -200% 0; } }
.boot { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.75rem; color: var(--muted-foreground); background: var(--background); }
.ring { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--primary); animation: spin .8s linear infinite; }
/* Seret untuk memindah urutan artikel */
.drag-h { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 2rem; border: 0; background: transparent; color: var(--muted-foreground); border-radius: 0.5rem; cursor: grab; touch-action: none; padding: 0; }
.drag-h:hover { background: var(--accent); color: var(--foreground); }
.drag-h:active { cursor: grabbing; }
li.dragging { background: var(--accent); box-shadow: var(--shadow-lg); border-radius: 0.75rem; position: relative; z-index: 2; user-select: none; }
li.dragging .drag-h { cursor: grabbing; color: var(--primary); }

/* Kalender mini jadwal blog */
.sec-h { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; flex-wrap: wrap; background: none; border: 0; padding: 0.25rem 0; text-align: left; color: var(--foreground); border-radius: 0.5rem; }
.sec-h:hover h2 { color: var(--primary); }
.sec-h .icon { transition: transform 0.15s; color: var(--muted-foreground); }
.sec-h[aria-expanded="true"] .icon { transform: rotate(90deg); }
.sec-h .sec-sum { flex-basis: 100%; padding-left: 1.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-month { border: 1px solid var(--border); border-radius: 1rem; padding: 0.9rem 0.9rem 1rem; background: color-mix(in oklab, var(--muted) 60%, var(--card)); }
.cal-title { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 0.75rem; padding-bottom: 0.6rem; margin-bottom: 0.6rem; border-bottom: 1px solid var(--border); }
.cal-title b { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; }
.cal-title span { font-size: 0.75rem; color: var(--muted-foreground); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; }
.cal .h { font-size: 0.6875rem; font-weight: 600; text-align: center; color: var(--muted-foreground); padding: 0.15rem 0 0.3rem; }
.cal .d { height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 0.6rem; border: 1px solid transparent; background: transparent; color: var(--foreground); font-size: 0.8125rem; padding: 0; font-family: inherit; }
.cal .d.x { visibility: hidden; }
.cal .d.pub { background: var(--success-muted); color: var(--success); border-color: var(--success-border); font-weight: 600; }
.cal .d.sch { background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary); border-color: color-mix(in oklab, var(--primary) 30%, transparent); font-weight: 600; }
.cal .d.gap { background: var(--warning-muted); color: var(--warning); border: 1px dashed var(--warning-border); font-weight: 600; }
.cal .d.today { box-shadow: 0 0 0 2px var(--foreground); font-weight: 700; }
.cal button.d { cursor: pointer; }
.cal button.d:hover { filter: brightness(0.96); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.75rem; color: var(--muted-foreground); }
.cal-legend i { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 0.25rem; vertical-align: -2px; margin-right: 0.35rem; border: 1px solid transparent; }
.cal-legend i.pub { background: var(--success-muted); border-color: var(--success-border); }
.cal-legend i.sch { background: color-mix(in oklab, var(--primary) 12%, transparent); border-color: color-mix(in oklab, var(--primary) 30%, transparent); }
.cal-legend i.gap { background: var(--warning-muted); border: 1px dashed var(--warning-border); }
.cal-legend i.today { box-shadow: 0 0 0 2px var(--foreground); }
@media print { .sidebar, .topbar, .drawer, .no-print, #toasts { display: none !important; } .shell { padding-left: 0 !important; } .main { max-width: none; padding: 0; } body { background: #fff; } .card { break-inside: avoid; } }