:root{
  --bg:#f5f8fb;
  --card:#ffffff;
  --line:#e7eef5;
  --text:#203040;
  --muted:#6f8293;
  --primary:#53a7ff;
  --primary-2:#4dd5b3;
  --danger:#ff6b7a;
  --warning:#ffb44d;
  --success:#2fbf71;
  --shadow:0 10px 30px rgba(31,58,93,.08);
  --radius:22px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;font-family:Inter,Arial,sans-serif;background:linear-gradient(180deg,#f9fcff 0%,#f1f7fb 100%);color:var(--text);overflow-x:hidden}
body{min-height:100vh}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
.app{max-width:720px;margin:0 auto;padding:16px 16px 88px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 2px 18px;gap:12px;position:sticky;top:0;background:linear-gradient(180deg,rgba(249,252,255,.96),rgba(249,252,255,.78));backdrop-filter:blur(10px);z-index:8}
.topbar h1{font-size:20px;line-height:1.2;margin:0;font-weight:800;letter-spacing:.2px}
.topbar p{margin:3px 0 0;color:var(--muted);font-size:12px}
.pill{padding:10px 14px;border-radius:999px;background:linear-gradient(135deg,#ebf5ff,#eafcf7);font-size:12px;font-weight:700;color:#1f608a;border:1px solid #d9edf8}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero{padding:16px}
.grid-2,.grid-3{display:grid;gap:12px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{padding:15px}
.stat .label{font-size:12px;color:var(--muted);margin-bottom:8px}
.stat .value{font-size:24px;font-weight:800}
.stat .sub{font-size:11px;color:var(--muted);margin-top:6px}
.section-title{display:flex;align-items:center;justify-content:space-between;margin:18px 2px 10px}
.section-title h2{font-size:16px;margin:0;font-weight:800}
.section-title span{font-size:12px;color:var(--muted)}
.icon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.icon-btn{padding:14px 8px;text-align:center}
.icon-btn .i{width:48px;height:48px;margin:0 auto 10px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#edf6ff,#ebfbf7);font-size:20px}
.icon-btn .t{font-size:12px;font-weight:700;color:#355}
.list{display:flex;flex-direction:column;gap:10px}
.item{padding:14px}
.item-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.item-title{font-size:14px;font-weight:800}
.item-sub{font-size:12px;color:var(--muted);margin-top:4px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border-radius:999px;font-size:11px;font-weight:800;border:1px solid transparent;white-space:nowrap}
.badge.planned,.badge.direncanakan,.badge.draft{background:#edf5ff;color:#2d74c8;border-color:#d8e9ff}
.badge.onprocess,.badge.berjalan{background:#eafcf5;color:#0a8e61;border-color:#d2f3e6}
.badge.completed,.badge.selesai{background:#f0fff3;color:#228a3b;border-color:#d8f6df}
.badge.delayed,.badge.tertunda{background:#fff6e9;color:#be7d16;border-color:#ffe7bb}
.badge.canceled{background:#fff0f2;color:#cd4d64;border-color:#ffd4db}
.badge.low{background:#fff0f2;color:#cd4d64;border-color:#ffd8de}
.badge.ok{background:#eafcf5;color:#0a8e61;border-color:#d2f3e6}
.progress{height:10px;background:#eef4f8;border-radius:999px;overflow:hidden}
.progress > span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-2));border-radius:999px}
.chart{padding:14px}
.bars{display:flex;align-items:flex-end;gap:9px;height:120px;margin-top:14px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.bar{width:100%;max-width:26px;background:linear-gradient(180deg,#8fd0ff,#58d9ba);border-radius:12px 12px 6px 6px;min-height:12px;box-shadow:0 8px 20px rgba(83,167,255,.18)}
.bar-label{font-size:10px;color:var(--muted)}
.bar-val{font-size:10px;font-weight:700;color:#4b6478}
.form-card{padding:14px}
.form-grid{display:grid;gap:12px}
label{font-size:12px;font-weight:700;color:#4b6478;display:block;margin-bottom:6px}
.input,select,textarea{width:100%;border:1px solid #dbe7f1;background:#fbfdff;border-radius:16px;padding:13px 14px;color:var(--text);outline:none}
textarea{min-height:92px;resize:vertical}
.row{display:flex;gap:10px}
.row > *{flex:1}
.btn{border:none;border-radius:18px;padding:13px 16px;font-weight:800;cursor:pointer;transition:.18s transform,.18s opacity,.18s box-shadow;box-shadow:var(--shadow)}
.btn:active{transform:scale(.98)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff}
.btn-soft{background:#eff6fb;color:#245;box-shadow:none}
.btn-danger{background:linear-gradient(135deg,#ff7e8a,#ff9b6a);color:#fff}
.btn-block{width:100%}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px}
.login-card{max-width:420px;width:100%;padding:18px}
.login-card h1{margin:4px 0 0;font-size:28px}
.login-card p{margin:6px 0 18px;color:var(--muted);font-size:13px}
.demo-buttons{display:grid;gap:12px}
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(120px);bottom:94px;background:#213243;color:#fff;padding:12px 16px;border-radius:14px;font-size:13px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;padding:10px 12px 14px;background:linear-gradient(180deg,rgba(245,248,251,.1),rgba(245,248,251,.95) 30%);backdrop-filter:blur(8px);z-index:9}
.bottom-nav .nav-wrap{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(8,1fr);overflow:hidden}
.nav-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 4px;font-size:10px;color:var(--muted);font-weight:700}
.nav-link.active{color:#1080ce;background:linear-gradient(180deg,#f0f8ff,#eefbf7)}
.nav-link .nicon{font-size:16px}
.table-mini{width:100%;border-collapse:collapse;font-size:12px}
.table-mini th,.table-mini td{padding:10px 8px;border-bottom:1px solid #eef2f6;text-align:left;vertical-align:top}
.table-mini th{color:#698093;font-size:11px}
.alert{padding:12px 14px;border-radius:18px;border:1px solid #ffd5db;background:#fff3f5;color:#c84f64;font-size:12px;font-weight:700}
.success{padding:12px 14px;border-radius:18px;border:1px solid #d0f5e4;background:#effdf6;color:#198c5a;font-size:12px;font-weight:700}
.hidden{display:none!important}
.shimmer{position:relative;overflow:hidden;background:#f1f5f9}
.shimmer::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),transparent);animation:shimmer 1.1s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.fade-in{animation:fadeIn .45s ease}
.slide-up{animation:slideUp .35s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.small{font-size:11px;color:var(--muted)}
.kpi-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.footer-space{height:4px}
@media (min-width:760px){
  .app{max-width:980px}
  .grid-2-desktop{display:grid;grid-template-columns:1.3fr .7fr;gap:16px}
  .icon-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
  .bottom-nav .nav-wrap{max-width:920px}
}