:root{
  --fg-bg:#f6f7f8; --fg-surface:#ffffff; --fg-text:#111827; --fg-muted:#6b7280; --fg-border:#d9dee5; --fg-accent:#111827; --fg-soft:#eef0f3; --fg-success:#166534; --fg-warning:#92400e; --fg-danger:#991b1b;
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px;
}
*{box-sizing:border-box}
body{background:var(--fg-bg);color:var(--fg-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.5}
a{color:inherit}.app-header{box-shadow:0 1px 0 rgba(17,24,39,.04)}.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--fg-text);border-radius:var(--radius-sm);font-size:12px;letter-spacing:.04em}.navbar-brand{font-size:15px}.nav-link{color:var(--fg-muted);font-weight:500}.nav-link.active,.nav-link:hover{color:var(--fg-text)}
.btn,.form-control,.form-select{border-radius:var(--radius-sm);font-size:14px}.btn{font-weight:600;padding:.58rem .9rem}.btn-sm{padding:.3rem .6rem}.btn-dark{background:#111827;border-color:#111827}.btn-dark:hover{background:#000;border-color:#000}.form-control:focus,.form-select:focus{border-color:#111827;box-shadow:0 0 0 .18rem rgba(17,24,39,.12)}
.hero-panel{background:var(--fg-surface);border:1px solid var(--fg-border);border-radius:var(--radius-lg);padding:22px;display:flex;gap:18px;align-items:center;justify-content:space-between}.hero-actions{display:flex;gap:10px;flex-wrap:wrap}.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--fg-muted);font-size:11px;font-weight:700}.app-card,.metric-card{border:1px solid var(--fg-border);border-radius:var(--radius-md);box-shadow:0 8px 24px rgba(17,24,39,.04)}.metric-card{background:var(--fg-surface);padding:18px}.metric-card span{display:block;color:var(--fg-muted);font-weight:600}.metric-card strong{display:block;font-size:28px;line-height:1.1;margin-top:8px}.table{font-size:14px}.table th{color:var(--fg-muted);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;background:#fbfbfc}.empty-state{padding:28px;text-align:center;color:var(--fg-muted);background:#fbfbfc;border-radius:var(--radius-md)}
.status-pill{display:inline-flex;align-items:center;border:1px solid var(--fg-border);border-radius:999px;padding:.2rem .55rem;font-size:12px;font-weight:700;text-transform:capitalize}.status-menunggu{background:#fff7ed;color:var(--fg-warning);border-color:#fed7aa}.status-disetujui{background:#ecfdf5;color:var(--fg-success);border-color:#bbf7d0}.status-ditolak{background:#fef2f2;color:var(--fg-danger);border-color:#fecaca}.status-selesai{background:#f3f4f6;color:#374151}.rule-list{padding-left:1.15rem;color:var(--fg-muted);margin-bottom:0}.rule-list li{margin:.55rem 0}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.detail-grid div{border:1px solid var(--fg-border);border-radius:var(--radius-sm);padding:12px;background:#fbfbfc}.detail-grid dt{font-size:12px;color:var(--fg-muted);margin-bottom:4px}.detail-grid dd{margin:0;font-weight:600}.approval-box{background:#fbfbfc;border:1px solid var(--fg-border);border-radius:var(--radius-md);padding:14px}.chat-stream{max-height:360px;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}.chat-line{border:1px solid var(--fg-border);border-radius:var(--radius-md);padding:10px;background:#fbfbfc}.chat-line p{margin:.2rem 0 0}.chat-form{display:grid;grid-template-columns:1fr auto;gap:10px;padding:14px}.footer-line{color:var(--fg-muted);font-size:12px}.toast{border-radius:var(--radius-sm)}
@media (max-width: 767px){.hero-panel{align-items:flex-start;flex-direction:column}.hero-actions,.hero-actions .btn{width:100%}.detail-grid{grid-template-columns:1fr}.chat-form{grid-template-columns:1fr}.chat-form .btn{width:100%}}