:root{
  --bg:#0f141b;
  --panel:#151b23;
  --panel-2:#1b222c;
  --panel-3:#202833;
  --brand:#2ea043;
  --primary:#2f81f7;
  --text:#e6edf3;
  --muted:#9aa7b2;
  --line:#2b3440;
  --danger:#e33b3b;
  --shadow:0 6px 24px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.03) inset;
  --radius:14px;
  --speed:.18s;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background: radial-gradient(1200px 600px at 10% -10%, #18202a 0%, #0e141b 55%, #0c1117 100%);
  color:var(--text);
  font: 14.5px/1.55 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.2px;
}
.mail-frame{width:100%;min-height:480px;border:1px solid #243041;border-radius:12px;background:#fff}

/* Layout */
.container{
  max-width: 780px;
  margin: 48px auto;
  padding: 0 20px;
}
.mainbox{
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  padding: 22px 20px;
  border-radius: var(--radius);
  margin-bottom: 22px;
  box-shadow: var(--shadow);
  border:1px solid var(--line);
}
.mainbox.inbox{
  padding: 18px 18px 8px;
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel-3) 100%);
}

/* Headings */
.title{
  font-weight:700;
  font-size: 20px;
  margin-bottom: 12px;
}
.subtitle{
  color:var(--muted);
  font-size:13px;
  margin-top:-6px;
  margin-bottom: 10px;
}

/* Buttons */
.btn{
  --bg:#232a31; --bg-h:#2a333c;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--bg); color:#fff;
  border:1px solid var(--line);
  border-radius:10px; padding:9px 14px;
  font-weight:600; font-size:.95rem;
  cursor:pointer; text-decoration:none;
  transition: transform var(--speed) ease, background var(--speed) ease, border-color var(--speed) ease, box-shadow var(--speed) ease;
}
.btn:hover{ background:var(--bg-h); transform:translateY(-1px) }
.btn:active{ transform:translateY(0) scale(.98) }
.btn:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }
.btn-primary{ --bg:#1f2a38; --bg-h:#263346; border-color:#3a4554 }
.btn-danger{ --bg:#3a2020; --bg-h:#472626; border-color:#542b2b }
.btn-ghost{ background:transparent; border-color:transparent }
.btn-block{ width:100%; justify-content:center }

/* Forms */
.form{
  display:grid; gap:12px; margin-top:8px;
}
.form-row{ display:grid; gap:6px }
.label{ font-weight:600; font-size:.95rem }
.input, .select{
  width:100%; padding:10px 12px; font-size:.98rem;
  border-radius:10px; border:1px solid var(--line);
  background:#0f141b; color:var(--text);
  outline:none;
  transition:border-color var(--speed) ease, box-shadow var(--speed) ease, background var(--speed) ease;
}
.input::placeholder{ color:#6b7784 }
.input:focus, .select:focus{
  border-color:#2f81f7; box-shadow:0 0 0 3px rgba(47,129,247,.15);
  background:#0c1218;
}
.help{ color:var(--muted); font-size:.9rem }

/* Cards/list */
.list{ list-style:none; padding:0; margin:0 }
.list li{
  padding:12px 12px; border:1px solid var(--line); border-radius:12px;
  background:#0f141b; margin-bottom:12px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.badge {
  display: inline-block;
  background: #0d6efd; /* warna latar */
  color: #fff;         /* warna teks */
  padding: 4px 10px;   /* atas-bawah, kiri-kanan */
  border-radius: 9999px; /* membuat bentuk oval mengikuti teks */
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1;      /* supaya tinggi badge pas */
  white-space: nowrap; /* mencegah teks terpotong ke bawah */
}


/* States */
.error{ color:var(--danger); text-align:center; margin:8px 0 12px; font-weight:600 }
.msg-empty{ color:#93a1ad; text-align:center; margin: 16px 0 10px }

/* Utility */
.row{ display:flex; flex-wrap:wrap; gap:10px }
.spacer{ height:8px }
.center{ text-align:center }

/* Responsive */
@media (max-width:540px){
  .container{ margin:28px auto }
  .btn{ padding:8px 12px }
}