*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #f2f2f7;--card-bg: #ffffff;--text: #1c1c1e;--text-secondary: #8e8e93;--text-tertiary: #c7c7cc;--separator: #e5e5ea;--blue: #007aff;--red: #ff3b30;--green: #34c759;--orange: #ff9500;--header-height: 52px;--radius: 12px;--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif}html,body{height:100%;font-family:var(--font);font-size:17px;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none;-webkit-user-select:none}#root{height:100%}.app{display:flex;flex-direction:column;height:100%;max-width:600px;margin:0 auto}.app-header{position:sticky;top:0;z-index:10;background:#f2f2f7d9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:.5px solid var(--separator);padding:0 16px;height:var(--header-height);display:flex;align-items:center}.header-content{display:flex;align-items:center;justify-content:space-between;width:100%}.header-left{display:flex;align-items:center;gap:8px}.header-title{font-size:28px;font-weight:700;letter-spacing:-.3px;color:var(--text)}.header-count{font-size:13px;font-weight:600;color:var(--blue);background:#007aff1f;padding:2px 7px;border-radius:10px;min-width:22px;text-align:center}.btn-add{width:32px;height:32px;border:none;background:var(--blue);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s ease,opacity .15s ease}.btn-add:active{transform:scale(.92);opacity:.8}.app-main{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:80px;text-align:center}.empty-icon{color:var(--text-tertiary);margin-bottom:16px;opacity:.6}.empty-title{font-size:20px;font-weight:600;color:var(--text);margin-bottom:4px}.empty-sub{font-size:15px;color:var(--text-secondary)}.reminder-list{display:flex;flex-direction:column;gap:8px}.reminder-item-wrapper{position:relative;overflow:hidden;border-radius:var(--radius)}.reminder-item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--card-bg);border-radius:var(--radius);transition:transform .25s cubic-bezier(.25,.8,.25,1.2);position:relative;z-index:2}.reminder-item.swiped{transform:translate(-80px)}.reminder-item.completed{opacity:.5}.circle{flex-shrink:0;width:24px;height:24px;border-radius:50%;border:2px solid #c7c7cc;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.circle:active{transform:scale(.9)}.circle.checked{background:var(--blue);border-color:var(--blue)}.item-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;cursor:pointer}.item-title{font-size:17px;line-height:1.3;color:var(--text);word-break:break-word}.item-title.strikethrough{text-decoration:line-through;color:var(--text-secondary)}.item-due{font-size:13px;color:var(--text-secondary)}.item-due.overdue{color:var(--red)}.delete-action{position:absolute;right:0;top:0;bottom:0;width:80px;background:var(--red);color:#fff;font-size:15px;font-weight:600;border:none;border-radius:0 var(--radius) var(--radius) 0;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1;opacity:0;transition:opacity .2s ease}.delete-action.visible{opacity:1}.form-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#0000004d;display:flex;align-items:flex-end;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.form-sheet{width:100%;max-width:600px;margin:0 auto;background:#f2f2f7;border-radius:16px 16px 0 0;max-height:85vh;overflow-y:auto;animation:slideUp .3s cubic-bezier(.25,.8,.25,1.2)}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.form-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:.5px solid var(--separator)}.form-header h2{font-size:17px;font-weight:600}.btn-cancel{font-size:17px;color:var(--blue);background:none;border:none;cursor:pointer;padding:4px 0}.btn-save{font-size:17px;font-weight:600;color:var(--blue);background:none;border:none;cursor:pointer;padding:4px 0}.btn-save:disabled{color:var(--text-tertiary);cursor:default}.form-body{background:var(--card-bg);margin:16px;border-radius:var(--radius);overflow:hidden}.field{padding:0}.input-title{width:100%;border:none;font-size:17px;font-family:var(--font);padding:14px 16px;outline:none;background:transparent;color:var(--text)}.input-title::placeholder{color:var(--text-tertiary)}.field-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:.5px solid var(--separator);cursor:pointer}.field-icon{color:var(--text-secondary);display:flex}.field-label{flex:1;font-size:17px}.toggle{width:51px;height:31px;border-radius:16px;background:#e9e9ea;position:relative;transition:background .25s ease;flex-shrink:0}.toggle.on{background:var(--green)}.toggle-knob{width:27px;height:27px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;box-shadow:0 2px 4px #00000026;transition:transform .25s cubic-bezier(.25,.8,.25,1.2)}.toggle.on .toggle-knob{transform:translate(20px)}.date-time-picker{display:flex;gap:8px;padding:10px 16px 14px;border-top:.5px solid var(--separator)}.input-date,.input-time{flex:1;border:none;font-size:15px;font-family:var(--font);padding:8px 0;outline:none;background:transparent;color:var(--text)}.form-footer{padding:0 16px 34px}.btn-delete{width:100%;padding:14px;background:var(--card-bg);border:none;border-radius:var(--radius);color:var(--red);font-size:17px;font-family:var(--font);cursor:pointer;text-align:center}.btn-delete:active{opacity:.7}.confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#0006;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease}.confirm-dialog{background:#f2f2f7;border-radius:14px;width:280px;overflow:hidden;animation:dialogIn .25s cubic-bezier(.25,.8,.25,1.2)}@keyframes dialogIn{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.confirm-message{font-size:15px;text-align:center;padding:20px 16px 16px;color:var(--text)}.confirm-actions{display:flex;border-top:.5px solid var(--separator)}.btn-confirm-cancel{flex:1;padding:12px;font-size:17px;font-family:var(--font);border:none;background:transparent;color:var(--blue);cursor:pointer;border-right:.5px solid var(--separator)}.btn-confirm-danger{flex:1;padding:12px;font-size:17px;font-weight:600;font-family:var(--font);border:none;background:transparent;color:var(--red);cursor:pointer}.btn-confirm-cancel:active,.btn-confirm-danger:active{opacity:.6}