:root{
  --primary:#3d3d3d;--secondary:#d37b7b;--bg:#f7f7f8;--text:#222;--card:#fff;--muted:#8a8a8a
}
*{box-sizing:border-box}
body{
  margin:0;font-family:Inter,system-ui,Arial,sans-serif;
  background:var(--bg);color:var(--text)
}
a{color:var(--secondary);text-decoration:none}

/* Top bar */
.topbar{
  position:sticky;top:0;z-index:10;background:var(--primary);color:#fff;
  display:flex;justify-content:space-between;align-items:center;padding:10px 16px
}
.topbar nav a,.topbar nav span{color:#fff;margin-left:12px;opacity:.95}
.topbar .brand{font-weight:700}

/* Layout */
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.card{
  background:#fff;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.08);
  padding:16px;margin-bottom:24px
}
.card h3{margin:0 0 12px;font-weight:700}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #eee;text-align:left;font-size:14px}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:#ffecec;color:#9b2c2c;font-size:12px}
input,select,button,textarea{width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;font-size:14px}
textarea{min-height:100px}
button{background:var(--secondary);color:#fff;border:none;font-weight:600;cursor:pointer}
button:hover{filter:brightness(.95)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row .col{flex:1;min-width:180px}
.footer{padding:32px;text-align:center;color:var(--muted)}
.userpill{background:rgba(255,255,255,.15);padding:4px 10px;border-radius:999px;font-size:12px}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;place-items:center}
.modal .box{background:#fff;border-radius:16px;max-width:560px;width:92%;padding:16px;box-shadow:0 20px 40px rgba(0,0,0,.25)}
.modal h4{margin:0 0 8px}
.modal.show{display:grid}
.small{font-size:12px;color:var(--muted)}

/* Splash */
.splash{position:fixed;inset:0;z-index:1000;background:#f7f7f8;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .6s ease}
.splash.show{opacity:1;pointer-events:auto}
.splash .box{text-align:center;animation:pop .6s ease}
.splash img{max-width:200px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.15));margin-bottom:10px}
.splash .welcome{
  margin-top:8px;max-width:780px;line-height:1.45;
  font-size:22px;           /* lebih besar */
  font-weight:700;          /* mirip judul Dashboard (bold) */
  color:#2b2b2b;padding:0 16px
}
@media (max-width:640px){
  .splash .welcome{font-size:18px}
}

/* Chart text bump (default diperbesar) */
svg text{font-size:16px}

@keyframes pop{from{transform:scale(.95)} to{transform:scale(1)}}

/* Responsif topbar */
@media (max-width:640px){
  .topbar nav a:nth-child(-n+2){display:none}
}