:root{--color-bg:#fafafa;--color-border:#ddd;--color-text:#333;--color-muted:#666;--color-primary:#28a745;--color-secondary:#e9ecef;--color-danger:#dc3545;--border-radius:8px;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--font-size-base:1rem;--font-size-lg:1.25rem}*{box-sizing:border-box}body{background-color:var(--color-bg);color:var(--color-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;margin:0}.container{background-color:#fff;border:1px solid var(--color-border);border-radius:var(--border-radius);margin:var(--spacing-xl) auto;max-width:500px;padding:var(--spacing-lg)}h1,h2{color:var(--color-text);font-size:var(--font-size-lg);margin:0 0 var(--spacing-md)}input[type=checkbox],input[type=text]{border:1px solid var(--color-border);border-radius:var(--border-radius);padding:var(--spacing-sm)}input[type=text]{width:100%}.add-item-btn,.submit-btn,button{border:none;border-radius:var(--border-radius);cursor:pointer;font-size:var(--font-size-base);margin-top:var(--spacing-sm);padding:var(--spacing-sm);transition:opacity .2s;width:100%}.add-item-btn:disabled,.submit-btn:disabled,button:disabled{cursor:not-allowed;opacity:.6}.primary-btn{background-color:var(--color-primary);color:#fff}.secondary-btn{background-color:var(--color-secondary);color:var(--color-text)}.danger-btn{background-color:var(--color-danger);color:#fff}.flex-row{margin-bottom:var(--spacing-sm)}.flex-col,.flex-row{display:flex;gap:var(--spacing-sm)}.flex-col{flex-direction:column}.header{background-color:#fff;border-bottom:1px solid var(--color-border);padding:var(--spacing-md)}.header a{color:var(--color-primary);margin-right:var(--spacing-md);text-decoration:none}.header a:hover{text-decoration:underline}.checked{text-decoration:line-through}.custom-checkbox{display:inline-block;height:24px;position:relative;width:24px}.custom-checkbox input[type=checkbox]{cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:100%}.custom-checkbox .checkmark{background-color:#fff;border:2px solid var(--color-border);border-radius:50%;height:100%;left:0;position:absolute;top:0;transition:all .2s ease;width:100%}.custom-checkbox input[type=checkbox]:checked+.checkmark{background-color:var(--color-primary);border-color:var(--color-primary)}.custom-checkbox .checkmark:after{border:solid #fff;border-width:0 2px 2px 0;content:"";display:none;height:12px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:6px}.custom-checkbox input[type=checkbox]:checked+.checkmark:after{display:block}.custom-checkbox input[type=checkbox]:not(:disabled):hover+.checkmark{border-color:var(--color-primary)}