* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}


.board {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr;     
  height: 100vh;
  width: 100vw;
}


.quad {
  position: relative;      
  padding: 16px;          
}


.quad h3 {
  position: absolute;
  top: 10px;
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: #111;
}


.q2 { background: #f7e3e3; }   
.q1 { background: #f8edc9; }   
.q3 { background: #dcefe2; }   
.q4 { background: #d6eaf1; }   


.q1 h3 { left: 12px; }  
.q2 h3 { left: 12px; }                      
.q3 h3 { left: 12px; }                     
.q4 h3 { left: 12px; }                      


.plus{
  position:absolute;
  top:10px;
  right:12px;
  font-size:24px;
  font-weight:900;
  color:#000;
  background:transparent;
  border:none;
  cursor:pointer;
  user-select:none;
}

.plus:active{ transform:scale(.96); }


.list{
  list-style:none;
  position:absolute; left:16px; right:16px; bottom:16px; top:46px; 
  overflow:auto;
}
.task{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; margin:8px 0;
}
.task label{ flex:1; }
.task .del{
  border:none; background:transparent; color:#c00; font-size:18px; cursor:pointer; padding:2px 6px;
}

.task.done label {
  text-decoration: line-through;
  color: #777;
}


.modal.hidden{ display:none; }
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; padding:20px;
  z-index:1000;
}
.modal-dialog{
  width:min(92vw, 420px);
  background:#fff; border-radius:14px; box-shadow:0 12px 34px rgba(0,0,0,.18);
  padding:18px;
}
#modalTitle{ margin:4px 2px 12px; font-size:16px; font-weight:800; }
#taskInput{
  width:100%; padding:12px 12px; border:1px solid #ddd; border-radius:10px; font-size:14px; outline:none;
}
.actions{
  margin-top:12px; display:flex; gap:10px; justify-content:flex-end;
}
.btn-primary{
  background:#111; color:#fff; border:1px solid #111; border-radius:10px; padding:10px 14px; cursor:pointer;
}
.btn-outline{
  background:#fff; color:#111; border:1px solid #999; border-radius:10px; padding:10px 14px; cursor:pointer;
}


.sr-only{
  position:absolute !important;
  height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}