@layer reset, global;
@layer reset {
  *, ::before, ::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, hr, fieldset { margin: 0; }
  body { min-height: 100vh; line-height: 1.5; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; }
}
@layer global {
body { margin: 0; font-family: system-ui, -apple-system, sans-serif; background: #f9fafb; color: #1f2937; } .board { padding: 1.5rem; max-width: 1100px; margin: 0 auto; } .board-title { font-size: 1.5rem; font-weight: 600; margin: 0 0 1rem 0; } .columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .column { background: #f3f4f6; border-radius: 8px; padding: 0.75rem; min-height: 240px; } .column-title { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #4b5563; margin: 0 0 0.75rem 0; } .task-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; min-height: 100px; } .task { background: white; border-radius: 6px; padding: 0.6rem 0.75rem; box-shadow: 0 1px 2px rgba(0,0,0,0.08); cursor: grab; user-select: none; } .task:active { cursor: grabbing; } .task.dragging { opacity: 0.5; }
}