:root { color-scheme: light; font-family: Inter, Roboto, system-ui, sans-serif; color: #1e293b;
background: #f8fafc; } * { box-sizing: border-box; } body { margin: 0; min-width: 320px; } button, input {
font: inherit; } button { cursor: pointer; } button:disabled { cursor: wait; opacity: 0.55; }
button:focus-visible, input:focus-visible { outline: 3px solid #fda4af; outline-offset: 3px; } [hidden] {
display: none !important; } [data-todo-app] { display: block; max-width: 1180px; margin: 48px auto 0;
padding: 0 32px; } [data-todo-header] { display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 0 0 28px; } [data-todo-header] h1 { margin: 0; font-size: clamp(26px, 4vw, 36px);
letter-spacing: -0.04em; font-weight: 750; } [data-todo-header] [data-slot='leading'] { display: none; }
[data-todo-refresh] { padding: 11px 19px; border: 1px solid #e2e8f0; border-radius: 12px; background: white;
font-weight: 600; } [data-todo-refresh]:hover { border-color: #be123c; color: #be123c; } [data-todo-toolbar] {
margin-bottom: 28px; } [data-todo-toolbar] [data-slot='left'] { display: flex; align-items: center;
flex-wrap: wrap; gap: 16px; width: 100%; } [data-todo-search] { min-width: 0; } input[data-todo-search],
[data-todo-search] input { width: 100%; min-width: 260px; padding: 13px 16px; border: 1px solid #e2e8f0;
border-radius: 12px; background: white; color: #0f172a; } [data-todo-filters] { margin-left: auto; }
[data-todo-filters] [role='tablist'] { display: flex; gap: 5px; padding: 5px; background: #e9edf3;
border-radius: 13px; } [data-todo-filters] [role='tab'] { border: 0; padding: 10px 17px; border-radius: 9px;
background: transparent; color: #64748b; font-weight: 600; white-space: nowrap; }
[data-todo-filters] [role='tab'][aria-selected='true'] { color: #9f1239; background: white;
box-shadow: 0 1px 4px #0f172a12; } [data-todo-filters] [role='tabpanel'],
[data-todo-filters] [data-slot='indicator'] { display: none; } [data-todo-stats] { display: grid;
grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0 0 30px; } [data-todo-stat] {
border: 1px solid #e2e8f0; background: white; border-radius: 18px; padding: 24px;
box-shadow: 0 2px 6px #0f172a03; } [data-todo-stat] [data-slot='leading'] { display: none; }
[data-todo-count] { display: block; font-size: 32px; line-height: 1.2; font-weight: 750;
letter-spacing: -0.04em; } [data-todo-stat] [data-slot='description'] { margin-top: 8px; font-size: 13px;
font-weight: 500; color: #64748b; } [data-todo-stat='done'] [data-todo-count] { color: #047857; }
[data-todo-stat='open'] [data-todo-count] { color: #be123c; } [data-todo-notice] { margin: 0 0 18px;
font-size: 13px; color: #64748b; min-height: 20px; } .todo-list { list-style: none; display: grid; gap: 12px;
margin: 0; padding: 0; } .todo-card { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px;
border: 1px solid #e2e8f0; border-radius: 16px; background: white; } .todo-card:hover { border-color: #cbd5e1;
box-shadow: 0 4px 16px #0f172a05; } .todo-copy { flex: 1; min-width: 0; } .todo-title { margin: 0;
font-size: 16px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; } .todo-description {
margin: 6px 0 0; font-size: 14px; line-height: 1.65; color: #64748b; overflow-wrap: anywhere;
white-space: pre-wrap; } .todo-indicator { color: #be123c; font-size: 22px; line-height: 1.1;
padding-top: 2px; } .is-done .todo-indicator { color: #047857; } .is-done .todo-title { color: #64748b;
text-decoration: line-through; } .todo-badge { border-radius: 100px; padding: 5px 10px; font-size: 11px;
font-weight: 650; white-space: nowrap; background: #fff1f2; color: #9f1239; } .is-done .todo-badge {
color: #047857; background: #ecfdf5; } .todo-empty { padding: 50px 24px; border: 1px dashed #cbd5e1;
border-radius: 16px; text-align: center; color: #64748b; } .export-credit { max-width: 1180px;
margin: 32px auto; padding: 0 32px; font-size: 12px; color: #94a3b8; } @media (max-width: 640px) {
[data-todo-app] { margin-top: 28px; padding: 0 18px; } [data-todo-header] { padding-bottom: 22px; }
[data-todo-toolbar] [data-slot='left'] { display: grid; } [data-todo-filters] { margin: 0; }
[data-todo-filters] [role='tablist'] { justify-content: space-between; } [data-todo-filters] [role='tab'] {
padding: 10px 14px; } [data-todo-stats] { gap: 8px; margin-bottom: 24px; } [data-todo-stat] {
padding: 18px 12px; border-radius: 13px; } [data-todo-count] { font-size: 27px; }
[data-todo-stat] [data-slot='description'] { font-size: 11px; } .todo-card { flex-wrap: wrap; gap: 12px;
padding: 19px 16px; } .todo-copy { flex-basis: calc(100% - 38px); } .todo-badge { margin-left: 34px; }
.export-credit { padding: 0 18px; line-height: 1.7; } }