:root{
  --bg:#f6f7fb;
  --card-shadow: 0 6px 18px rgba(15,23,42,0.06);
  --accent:#1976d2;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:#0b1220}
header{
  display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;background:linear-gradient(90deg,var(--accent),#3aa0ff);color:#fff;
}
header h1{margin:0;font-size:1.1rem}
.controls{display:flex;gap:0.6rem;align-items:center}
.controls button{background:#fff;color:var(--accent);border:0;padding:0.5rem 0.7rem;border-radius:8px;cursor:pointer}
.sync-info{font-size:0.85rem;color:rgba(255,255,255,0.9)}

main#board{display:grid;grid-template-columns: repeat(auto-fit,minmax(260px,1fr));gap:1rem;padding:1rem}

.category-card{
  background:#fff;padding:0.6rem;border-radius:10px;box-shadow:var(--card-shadow);min-height:120px;display:flex;flex-direction:column;
  transition:transform .12s;
}
.category-card:hover{transform:translateY(-4px)}
.category-header{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;margin-bottom:0.5rem}
.category-header .cat-title{font-weight:600;border:0;background:transparent;font-size:1rem}
.category-header .cat-title:focus{outline:2px solid rgba(0,0,0,0.08);padding:2px 4px;border-radius:6px}
.cat-controls{display:flex;align-items:center;gap:6px}
.cat-controls select,.cat-controls input[type=color]{border:0;padding:6px;border-radius:6px}
.cat-controls button{background:transparent;border:0;cursor:pointer;font-size:1rem}
.todos{flex:1;overflow:auto;padding-right:4px}
.todo-item{display:flex;align-items:flex-start;gap:8px;padding:6px 0;border-top:1px dashed rgba(0,0,0,0.03)}
.todo-item:first-child{border-top:0}
.todo-left{display:flex;align-items:center;gap:8px;min-width:0}
.todo-left input[type=checkbox]{transform:scale(1.1)}
.todo-title{flex:1;word-break:break-word}
.todo-controls{display:flex;gap:6px;align-items:center}
.todo-controls button{background:transparent;border:0;cursor:pointer}
.todo-children{margin-left:26px}

.add-todo-row{display:flex;gap:6px;align-items:center;margin-top:8px}
.add-todo-row input{flex:1;padding:6px;border-radius:6px;border:1px solid rgba(0,0,0,0.08)}
.add-todo-row select{padding:6px;border-radius:6px;border:1px solid rgba(0,0,0,0.08)}
.add-todo-row button{padding:6px 10px;border-radius:6px;border:0;background:var(--accent);color:#fff;cursor:pointer}

/* styling for assignee hint */
.assignee-pill{font-size:0.75rem;padding:2px 6px;border-radius:12px;background:rgba(0,0,0,0.06);display:inline-block}
.small{font-size:0.8rem;color:#666}


.todo-item.drop-target {
  outline: 2px dashed #007bff;
  background: rgba(0,123,255,0.1);
}