.setting-panel{
  position:fixed;
  top:0;
  right:0;
  width:30vw;
  height:100vh;
  background:#B8B6B6;
  color:#000000;
  z-index:99999;
  transform:translateX(100%);
  transition:.4s ease;
  display:flex;
  flex-direction:column;
}

.setting-panel.show{
  transform:translateX(0);
}

.setting-header{
  text-align: center;
  padding:1vh 1vw;
  background:#6E6D6D;
  font-size:2vw;
  color: #fff;
  font-weight: 800;
}

.setting-header button{
  background:none;
  border:none;
  color:white;
  font-size:2vw;
  cursor:pointer;
}

.setting-tabs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.setting-tabs button{
  padding:1vh;
  border:none;
  background:#6E6D6D;
  color:#fff;
  cursor:pointer;
}

.setting-tabs button.active{
  background:#B8B6B6;
  color:#000;
  font-weight: 800;
}

.setting-content{
  flex:1;
  overflow:auto;
  padding:1vw;
}

.tab{ display:none; }
.tab.active{ display:block; }

label{
  padding-top: 1vh;
  display:block;
  margin-top:1vh;
  font-size:1.1vw;
}

input, select, textarea{
  width:100%;
  padding:1vh;
  margin-top:.5vh;
  border-radius:1vh;
  border:none;
}

textarea{ min-height:8vh; }

button{
  padding:.4vh;
  border:none;
  cursor:pointer;
}

.toggle{
  display:flex;
  align-items:center;
  gap:.5vw;
  margin-top:1vh;
}

.setting-footer{
  display:flex;
  gap:1vw;
  margin-top:2vh;
}

.setting-footer button{
  flex:1;
  padding:2vh;
  font-size:1.1vw;
  border:none;
  border-radius:1vh 1vw;
  cursor:pointer;
  margin: 1vw;
}

.btn-save{
  background:#4caf50;
  color:white;
  font-weight:600;

}

.btn-cancel{
  background:#f44336;
  color:white;
}



/* =========================
   DAY / NIGHT MODE
========================= */

body.mode-day {
  filter: brightness(1);
  transition: filter 0.8s ease;
}

body.mode-night {
  filter: brightness(0.65);
  transition: filter 0.8s ease;
}

/* Optional: tone malam */
body.mode-night {
  background-color: #0b0b0b;
}

/* Optional: kurangi silau teks */
body.mode-night .header,
body.mode-night .footer,
body.mode-night .info-card {
  opacity: 0.9;
}