:root{
--bg:#042354;
--card:#ffffff;
--text:#222;
--border:#e5e7eb;
}

body.dark{
--bg:#042354;
--card:#1f2937;
--text:#f3f4f6;
--border:#374151;
}

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

body{
background:var(--bg);
color:var(--text);
}

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
}

header button{
border:1px solid var(--border);
background:var(--card);
padding:6px 12px;
border-radius:6px;
cursor:pointer;
}

.board{
display:flex;
gap:20px;
padding:20px;
flex-wrap:wrap;
}

.column{
background:var(--card);
border:1px solid var(--border);
border-radius:10px;
padding:15px;
flex:1;
min-width:280px;
}

.column-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px;
}

.column-header button{
background:#6366f1;
color:white;
border:none;
width:28px;
height:28px;
border-radius:6px;
cursor:pointer;
}

.task-list{
min-height:150px;
}

.task{
background:var(--bg);
border:1px solid var(--border);
padding:10px;
border-radius:8px;
margin-bottom:10px;
cursor:grab;
}

.task strong{
font-size:14px;
color: #ffffff;
}

.task small{
display:block;
font-size:12px;
opacity:0.7;
margin-top:4px;
color: #ffffff;
}

.priority{
display:inline-block;
font-size:11px;
padding:2px 6px;
border-radius:4px;
margin-top:6px;
}

.low{
background:#d1fae5;
color:#065f46;
}

.medium{
background:#fef3c7;
color:#92400e;
}

.high{
background:#fee2e2;
color:#991b1b;
}

.task-actions{
display:flex;
gap:8px;
margin-top:8px;
}

.task-actions button{
border:none;
padding:4px 6px;
font-size:11px;
border-radius:4px;
cursor:pointer;
}

.edit-btn{
background:#6366f1;
color:white;
}

.delete-btn{
background:#ef4444;
color:white;
}

.modal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.4);
justify-content:center;
align-items:center;
}

.modal-box{
background:var(--card);
padding:20px;
border-radius:10px;
width:300px;
}

.modal-box input,
.modal-box select{
width:100%;
padding:8px;
margin-bottom:10px;
border:1px solid var(--border);
border-radius:6px;
}

.modal-actions{
display:flex;
justify-content:space-between;
}

.modal-actions button{
background:#6366f1;
color:white;
border:none;
padding:6px 12px;
border-radius:6px;
cursor:pointer;
}

@media(max-width:768px){
.board{
flex-direction:column;
}
}