@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800&display=swap');
* { box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #fcfcfc;
  background-image: 
    radial-gradient(1200px 600px at 50% -10%, rgba(0,0,0,0.06), transparent 60%),
    radial-gradient(600px 400px at 10% 10%, rgba(99,102,241,0.06), transparent 50%),
    radial-gradient(600px 400px at 90% 10%, rgba(236,72,153,0.04), transparent 50%);
  color: #0a0a0a;
  display: flex; justify-content: center; align-items: flex-start;
  min-height: 100vh; margin: 0; padding: 48px 20px; -webkit-font-smoothing: antialiased;
}
.shell { width: 100%; max-width: 640px; display: flex; justify-content: center; }
.box {
  margin-top: 80px; width: 100%; background: white; border: 1px solid #e5e7eb;
  border-radius: 24px; padding: 32px 32px 24px;
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.12), 0 12px 24px -8px rgba(0,0,0,0.08);
  animation: fadeIn 0.6s cubic-bezier(0.16,1,0.3,1); overflow: hidden;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.header { margin-bottom: 24px; }
.title { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 0 0 6px; }
.subtitle { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7280; font-weight: 500; margin: 0; }

.todo-input-grid {
  display: grid; grid-template-columns: 1fr 160px 96px;
  column-gap: 10px; row-gap: 10px; align-items: center; margin-bottom: 20px; width: 100%;
}
.input-wrap { position: relative; min-width: 0; width: 100%; }
.name-input, .due-date-input {
  width: 100%; min-width: 0; font-size: 14px; font-weight: 500; font-family: inherit;
  padding: 13px 14px; border: 1.5px solid #e5e7eb; border-radius: 12px; background: #fafafa;
  outline: none; transition: all 0.2s; color: #0a0a0a; display: block;
}
.name-input::placeholder { color: #9ca3af; }
.name-input:focus, .due-date-input:focus { background: white; border-color: #0a0a0a; box-shadow: 0 0 0 4px rgba(0,0,0,0.06); }
.add-todo-button {
  background: #0a0a0a; color: white; border: 1.5px solid #0a0a0a; border-radius: 999px;
  font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; padding: 13px 0; width: 100%;
}

/* Desktop todo list = 3 columns */
.js-todo-list {
  display: grid; grid-template-columns: 1fr 160px 96px;
  column-gap: 10px; row-gap: 10px; align-items: center; width: 100%;
}
.js-todo-list:empty::after {
  content: "No todos yet — add one above"; grid-column: 1 / -1;
  text-align: center; padding: 32px 0 12px; font-size: 13px; color: #9ca3af;
}
.js-todo-list > div:not(:has(button)) {
  font-size: 14px; font-weight: 500; color: #111827; padding: 14px 12px;
  background: #fafafa; border: 1px solid #f3f4f6; border-radius: 12px; line-height: 1.3; word-break: break-word;
}
.js-todo-list > div:nth-child(3n+2):not(:has(button)) {
  color: #6b7280; font-size: 12px; text-align: center; background: white; border: 1px solid #e5e7eb;
}
.delete-todo-btn {
  background: rgba(239,68,68,0.08); color: #b91c1c; border: 1px solid rgba(239,68,68,0.18);
  border-radius: 999px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; padding: 10px 0; width: 100%;
}

.footer-hint {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid #f3f4f6;
  display: flex; gap: 10px; align-items: center; justify-content: center;
  font-size: 11px; color: #9ca3af; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500;
}
.footer-hint kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 6px; background: white; border: 1px solid #e5e7eb; border-bottom-width: 2px;
  color: #6b7280; font-family: ui-monospace, monospace; font-size: 10px; font-weight: 600;
}
.footer-hint .dot { opacity: 0.4; }

/* MOBILE - Delete below */
@media (max-width: 640px) {
  body { padding: 16px 16px max(24px, env(safe-area-inset-bottom)); min-height: 100dvh; }
  .box { margin-top: 12px; padding: 22px 18px 18px; border-radius: 20px; }
  .title { font-size: 24px; }

  .todo-input-grid { display: flex; flex-direction: column; gap: 12px; }
  .name-input, .due-date-input, .add-todo-button { font-size: 16px; min-height: 48px; }
  .due-date-input { color: #9ca3af; -webkit-appearance: none; appearance: none; }
  .due-date-input::-webkit-datetime-edit { color: #9ca3af; }
  .due-date-input:valid, .due-date-input:focus { color: #0a0a0a; }
  .due-date-input:valid::-webkit-datetime-edit, .due-date-input:focus::-webkit-datetime-edit { color: #0a0a0a; }
  .add-todo-button { min-height: 52px; }

  .js-todo-list { grid-template-columns: 1fr; gap: 0; }

  .js-todo-list > div:nth-child(3n+1) {
    grid-column: 1; margin-top: 14px; padding: 14px 14px 8px;
    border-radius: 14px 14px 0 0; border: 1px solid #f3f4f6; border-bottom: none; background: #fafafa;
  }
  .js-todo-list > div:nth-child(3n+1):first-child { margin-top: 0; }

  .js-todo-list > div:nth-child(3n+2):not(:has(button)) {
    grid-column: 1; text-align: left; background: #fafafa;
    border: 1px solid #f3f4f6; border-top: none; border-bottom: none; border-radius: 0;
    padding: 0 14px 10px; font-size: 12px; display: block;
  }

  .js-todo-list > div:nth-child(3n+3) {
    grid-column: 1; background: #fafafa; border: 1px solid #f3f4f6;
    border-top: none; border-radius: 0 0 14px 14px; padding: 0 8px 8px; display: block;
  }
  .delete-todo-btn { width: 100%; min-height: 44px; }
}