:root{--bg: #fafafa;--fg: #1a1a1a;--muted: #6b6b6b;--border: #e0e0e0;--accent: #0066cc;--accent-hover: #004999;--danger: #c0392b;--danger-hover: #962d22;--success: #2e8b57;--success-hover: #1f6e42;--error-bg: #fde2e0;--error-border: #c0392b;--code-bg: #f0f0f0;--row-hover: #f5f8fb}*{box-sizing:border-box}html,body,#root{margin:0;padding:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--fg);line-height:1.5}.container{max-width:960px;margin:0 auto;padding:32px 24px}header h1{margin:0 0 24px;font-size:1.75rem}h2{font-size:1.1rem;margin:0 0 12px}section{margin-bottom:32px}.create form{display:flex;gap:8px}.create input[type=text]{flex:1;padding:8px 12px;border:1px solid var(--border);border-radius:4px;font-size:1rem;background:#fff}.create input[type=text]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #0066cc26}button{padding:8px 16px;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:4px;cursor:pointer;font-size:.95rem;transition:background .1s ease}button:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}button:disabled{opacity:.5;cursor:not-allowed}button.danger{background:var(--danger);border-color:var(--danger)}button.danger:hover:not(:disabled){background:var(--danger-hover);border-color:var(--danger-hover)}button.complete{background:var(--success);border-color:var(--success);font-weight:700;font-size:1.05rem;line-height:1}button.complete:hover:not(:disabled){background:var(--success-hover);border-color:var(--success-hover)}.list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.list-header h2{margin:0}.empty{color:var(--muted);font-style:italic}table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:4px;overflow:hidden}th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border)}th{background:var(--code-bg);font-weight:600;font-size:.9rem}tr:last-child td{border-bottom:none}tr:hover td{background:var(--row-hover)}.date{color:var(--muted);font-size:.9rem;white-space:nowrap}.mono{font-family:SF Mono,Menlo,monospace;color:var(--muted);font-size:.85rem}.actions{text-align:right;white-space:nowrap}.actions button{padding:4px 10px;font-size:.85rem;margin-left:4px}td input[type=text]{width:100%;padding:4px 8px;border:1px solid var(--accent);border-radius:3px;font-size:.95rem}.error{background:var(--error-bg);border:1px solid var(--error-border);color:var(--danger);padding:10px 14px;border-radius:4px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:flex-start;font-family:SF Mono,Menlo,monospace;font-size:.85rem}.error-close{background:transparent;color:var(--danger);border:none;font-size:1.4rem;cursor:pointer;padding:0;margin-left:12px;line-height:1}.error-close:hover{background:transparent;color:var(--danger-hover)}footer{margin-top:48px;padding-top:16px;border-top:1px solid var(--border);text-align:center;color:var(--muted)}footer code{background:var(--code-bg);padding:2px 6px;border-radius:3px;font-size:.85em}.architecture-note{margin:16px 0 0;padding:10px 14px;background:var(--code-bg);color:var(--muted);border-radius:4px;font-size:.85rem;font-family:SF Mono,Menlo,monospace;line-height:1.5;text-align:left}
