*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:system-ui;
}

html, body{
  height:100%;
  width:100%;
  overflow:hidden;
  background:black;
}

/* écran lumière */
#light{
  position:fixed;
  inset:0;
  z-index:0;
  transition: all 0.6s ease;
}

/* modes lumière */
.red{
  background: rgba(255, 30, 0, 1);
  filter: brightness(var(--intensity));
}

.sunrise{
  background: radial-gradient(circle at bottom, #ff4d00, #ffb347, #fff1c1);
  filter: brightness(var(--intensity));
}

.sunset{
  background: radial-gradient(circle at top, #1b2a49, #ff5e62, #ff9966);
  filter: brightness(var(--intensity));
}

/* UI moderne */
.panel{
  position:fixed;
  bottom:15px;
  left:50%;
  transform:translateX(-50%);
  width:92%;
  max-width:420px;

  background:rgba(20,20,20,0.6);
  backdrop-filter: blur(14px);

  border-radius:16px;
  padding:12px;
  z-index:10;
  color:white;
}

.title{
  text-align:center;
  font-size:13px;
  opacity:0.7;
  margin-bottom:6px;
}

select, input{
  width:100%;
  padding:10px;
  margin:5px 0;
  border-radius:10px;
  border:none;
  background:#222;
  color:white;
}

button{
  width:100%;
  margin-top:6px;
  padding:10px;
  border:none;
  border-radius:10px;
  background:#333;
  color:white;
}

#timer{
  text-align:center;
  margin-top:6px;
  font-size:18px;
}

/* minuterie UX */
.quick{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:6px;
  margin-bottom:6px;
}

.qbtn{
  padding:8px;
  font-size:12px;
  border-radius:8px;
  background:#2a2a2a;
  border:none;
  color:white;
}

.qbtn:active{
  transform:scale(0.95);
}