/* Simple, modern minimal styling */

:root{
  --bg: #f7f7fb;
  --card: #ffffff;
  --muted: #7b7f89;
  --accent: #4f46e5;
  --danger: #ef4444;
  --radius: 12px;
  --shadow: 0 6px 18px rgba(20,20,50,0.06);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg, #f2f4ff 0%, var(--bg) 100%);
  align-items:center;
  padding:36px;
  color:#111827;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.app{
  width:100%;
  max-width:520px;
}

.header{
  text-align:left;
  margin-bottom:16px;
}
.header h1{margin:0;font-size:24px;letter-spacing:-0.4px}
.subtitle{margin:6px 0 0;color:var(--muted);font-size:13px}

.todo-card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  overflow:hidden;
}

.task-form{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}
#task-input{
  flex:1;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #e6e9f2;
  font-size:15px;
  outline:none;
}
#task-input:focus{box-shadow:0 4px 12px rgba(79,70,229,0.08);border-color:rgba(79,70,229,0.4)}
#add-btn{
  padding:10px 14px;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  border:none;
  cursor:pointer;
  font-weight:600;
}
#add-btn:active{transform:translateY(1px)}

.controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  flex-wrap:wrap;
}

.filters{
  display:flex;
  gap:8px;
}
.filter{
  background:transparent;
  border:1px solid transparent;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
  font-size:13px;
  color:var(--muted);
}
.filter.active{
  background:rgba(79,70,229,0.08);
  color:var(--accent);
  border-color:rgba(79,70,229,0.12);
}

.right-controls{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--muted);
}
.link-btn{
  background:transparent;
  border:none;
  color:var(--muted);
  cursor:pointer;
  text-decoration:underline;
  font-size:13px;
  padding:6px;
}

.task-list{
  list-style:none;
  padding:0;
  margin:0;
  max-height:420px;
  overflow:auto;
}

/* Task item */
.task-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border-radius:10px;
  transition:background .12s;
  border-bottom:1px solid #f2f4f8;
}
.task-item:last-child{border-bottom:none}
.task-item:hover{background:#fbfbff}

.checkbox{
  width:20px;height:20px;border-radius:6px;border:1.5px solid #dce1ff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.checkbox.checked{
  background:var(--accent);
  border-color:var(--accent);
  color:white;
  font-weight:700;
  font-size:12px;
}

.task-text{
  flex:1;
  font-size:15px;
  word-break:break-word;
}
.task-text.completed{
  text-decoration:line-through;
  color:var(--muted);
  opacity:0.8;
}

/* small actions */
.actions{
  display:flex;
  gap:8px;
  align-items:center;
}
.icon-btn{
  background:transparent;border:none;cursor:pointer;padding:6px;border-radius:8px;font-size:13px;color:var(--muted)
}
.icon-btn:hover{background:#f5f6ff;color:var(--accent)}

/* edit input */
.edit-input{
  width:100%;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid #e6e9f2;
  font-size:15px;
}

/* footer */
.footer{
  text-align:center;
  margin-top:12px;
  color:var(--muted);
  font-size:13px;
}
.custom-link {
    margin-right: auto;
    display: inline-block;
    padding: 12px 28px;
    background: linear-gradient(45deg, #6a11cb, #2575fc);
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(38, 50, 56, 0.3);
    transition: background 0.3s ease, box-shadow 0.3s ease;
    font-family: Arial, sans-serif;
  }

  .custom-link:hover {
    background: linear-gradient(45deg, #2575fc, #6a11cb);
    box-shadow: 0 6px 20px rgba(38, 50, 56, 0.5);
    text-decoration: none;
  }