*{
  box-sizing:border-box;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif
}

.app-header{
  text-align: center;
}

footer {
  text-align: center;
  padding: 3px;
  color: green;
  line-height: 0.2;
}

footer.dark {
  text-align: center;
  padding: 3px;
  color: white;
  line-height: 0.2;
}


/* unvisited link */
a:link {
  color: hotpink;
}

/* visited link */
a:visited {
  color: hotpink;
}

/* mouse over link */
a:hover {
  color: red;
}

/* selected link */
a:active {
  color: blue;
}


/* =========================
   BACKGROUND + TRANSITION
========================= */
body{
  margin:0;
  background: linear-gradient(135deg,#f2f4f7,#e5e7eb);
  background-size: 200% 200%;
  animation: bgMove 10s ease infinite;
  color:#1f2937;
  transition: background .6s ease,color .6s ease;
}

@keyframes bgMove {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* dark gradient */
body.dark{
  background: linear-gradient(135deg,#020617,#111827,#1f2937);
  background-size:200% 200%;
  animation:bgMoveDark 12s ease infinite;
  color:#e5e7eb;
}

@keyframes bgMoveDark {
  0%{background-position:100% 50%}
  50%{background-position:0% 50%}
  100%{background-position:100% 50%}
}

/* =========================
   CARD & FORM
========================= */
.app{max-width:420px;margin:24px auto;padding:0 12px}
.card{
  background:#fff;
  border-radius:12px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.1);
  transition:background .4s ease;
}
body.dark .card{background:#1f2937}

.app-header h1{font-size:18px;margin:0 0 12px}

.field{margin-bottom:10px;position:relative}
input,select,textarea{
  width:100%;padding:10px 12px;border:1px solid #d1d5db;
  border-radius:8px;font-size:14px;
  transition:.35s ease;
}
body.dark input,
body.dark select,
body.dark textarea{
  background:#020617;border-color:#374151;color:#fff
}

textarea{min-height:70px}

/* =========================
   POPUP KELURAHAN
========================= */
#popupKelurahan{
  display:none;
  position:absolute;top:100%;left:0;right:0;
  background:#fff;
  border:1px solid #d1d5db;
  border-radius:8px;
  max-height:200px;
  overflow-y:auto;
  z-index:10
}
body.dark #popupKelurahan{
  background:#1f2937;border-color:#374151
}

.kel-item{padding:10px 12px;cursor:pointer}
.kel-item:hover{background:rgba(0,0,0,.05)}
body.dark .kel-item:hover{background:#374151}

.kel-name{font-weight:600;font-size:14px}
.kel-meta{font-size:12px;opacity:.7}

/* =========================
   BUTTONS
========================= */
.btn{
  width:100%;padding:10px;border-radius:8px;
  border:none;font-size:14px;font-weight:600;
  cursor:pointer;margin-top:8px
}
.btn.primary{background:#2563eb;color:#fff}
.btn.success{background:#16a34a;color:#fff}

/* loading */
.btn.loading .btn-text{display:none}
.loader{
  display:none;width:18px;height:18px;
  border:3px solid #fff;border-top-color:transparent;
  border-radius:50%;animation:spin 1s linear infinite
}
.btn.loading .loader{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================
   THEME TOGGLE + BOUNCE
========================= */
.theme-toggle{
  position:fixed;top:14px;right:14px;
  background:none;border:none;
  font-size:26px;cursor:pointer
}

#themeIcon{
  display:inline-block;
}

/* bounce animation */
#themeIcon.bounce{
  animation:bounce .6s cubic-bezier(.34,1.56,.64,1);
}

@keyframes bounce{
  0%{transform:scale(1)}
  30%{transform:scale(1.3) rotate(10deg)}
  60%{transform:scale(.9) rotate(-10deg)}
  100%{transform:scale(1) rotate(0)}
}

/* =========================
   TOAST
========================= */
.toast{
  position:fixed;
  bottom:30px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:#111827;color:#fff;
  padding:14px 22px;
  border-radius:12px;
  font-size:14px;
  opacity:0;
  pointer-events:none;
  transition:.4s ease;
  z-index:9999
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0)
}
.toast.success{background:#16a34a}
.toast.error{background:#dc2626}