:root{--bg-primary:#000;--bg-secondary:#121212;--text-primary:#fff;--text-secondary:#b0b0b0;--accent-green:#4caf50;--accent-red:#f44336;--border-color:#333;--button-bg:#1a1a1a;--button-hover:#2a2a2a;--danger:#d32f2f;--danger-hover:#f44336}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow-x:hidden}body{background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:16px;line-height:1.5}#app{min-height:100vh;flex-direction:column;min-height:100dvh;display:flex}button{cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;outline:none;font-family:inherit}input,select{font-family:inherit;font-size:inherit;color:var(--text-primary);background-color:var(--bg-secondary);border:1px solid var(--border-color);width:100%;border-radius:8px;padding:12px 16px}input:focus,select:focus{outline:2px solid var(--accent-green);outline-offset:2px}.theme-select{cursor:pointer}label{color:var(--text-secondary);margin-bottom:8px;font-weight:500;display:block}.app{min-height:100vh;background-color:var(--bg-primary);flex-direction:column;min-height:100dvh;display:flex}.time-bar{background-color:var(--bg-primary);border-bottom:1px solid var(--border-color);flex-shrink:0;justify-content:center;align-items:center;width:100%;height:25px;display:flex}.time-bar-content{justify-content:space-between;align-items:center;gap:16px;width:100%;max-width:100%;padding:0 20px;display:flex}.time-display{color:var(--text-secondary);font-size:13px;font-weight:600}.date-display{color:var(--text-secondary);margin-left:auto;font-size:13px;font-weight:600}.settings-button{background-color:var(--settings-button-bg);color:var(--text-secondary);z-index:100;border:1px solid var(--settings-button-border);width:36px;height:36px;box-shadow:0 1px 4px var(--settings-button-shadow);border-radius:50%;justify-content:center;align-items:center;padding:0;transition:all .2s;display:flex;position:fixed;bottom:16px;left:16px}.settings-button svg{width:20px;height:20px;display:block}.settings-button:active{background-color:var(--settings-button-bg-active);transform:scale(.95)}.header{background-color:var(--bg-primary);border-bottom:1px solid var(--border-color);z-index:10;flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 16px;display:flex;position:sticky;top:0}.header h1{text-align:center;color:var(--text-secondary);flex:1;font-size:18px;font-weight:500}.icon-button{color:var(--text-primary);background:0 0;border-radius:8px;justify-content:center;align-items:center;min-width:40px;min-height:40px;padding:8px;transition:background-color .2s;display:flex}.icon-button:active{background-color:var(--button-hover)}.dashboard{height:calc(100vh - 25px);min-height:0;flex-direction:column;flex:1;height:calc(100dvh - 25px);display:flex;overflow:hidden}.empty-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:24px;min-height:60vh;display:flex}.empty-state p{color:var(--text-secondary);font-size:18px}.task-list{flex-direction:column;flex:1;height:100%;display:flex;overflow:hidden auto}.task-card{background-color:var(--bg-primary);border:none;border-bottom:2px dashed var(--border-color);outline:none;flex-direction:row;flex:1 1 0;align-items:center;width:100%;min-height:0;padding:10px;transition:background-color .2s;display:flex;position:relative}.task-card:focus{outline:none}.task-card:last-child{border-bottom:none}.task-card:active{background-color:var(--button-hover)}.task-card.overdue{background-color:var(--overdue-bg)}.task-card.overdue:active{background-color:var(--overdue-bg-active)}.task-name{color:var(--text-primary);-webkit-hyphens:auto;hyphens:auto;text-align:center;flex:.95;justify-content:center;align-items:center;width:100%;min-width:0;height:100%;margin:0;padding:0 5px;font-weight:400;line-height:1.3;display:flex;white-space:normal!important}.task-name>*{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.task-name-overdue{color:var(--text-primary);-webkit-hyphens:auto;hyphens:auto;text-align:center;flex:.95;justify-content:center;align-items:center;width:100%;min-width:0;height:100%;margin:0;padding:0 10px;font-weight:400;line-height:1.3;display:flex;white-space:normal!important}.task-name-overdue>*{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.task-time{align-items:left;color:var(--text-primary);background-color:var(--task-time-bg);border:1px solid var(--task-time-border);white-space:nowrap;border-radius:6px;flex:.05 0;justify-content:flex-start;padding:3px 8px;font-family:Courier New,Courier,monospace;font-size:20px;font-weight:600;display:flex}.task-due-date{color:var(--task-due-date-color);font-size:clamp(11px,2vw,14px);font-weight:400;position:absolute;bottom:7px;right:7px}.button-primary{background-color:var(--accent-green);color:var(--text-primary);border-radius:12px;width:100%;padding:16px 24px;font-size:18px;font-weight:600;transition:all .2s}.button-primary:active:not(:disabled){background-color:var(--accent-green-dark);transform:scale(.98)}.button-primary:disabled{opacity:.5;cursor:not-allowed}.button-action{border:1px solid var(--border-color);background-color:#0000;border-radius:6px;justify-content:center;align-items:center;min-width:32px;min-height:32px;padding:8px;transition:all .2s;display:flex}.button-action:active:not(:disabled){background-color:var(--button-hover)}.button-action:disabled{opacity:.3;cursor:not-allowed}.button-reorder{color:var(--text-secondary)}.button-danger{color:var(--danger)}.button-danger:active{background-color:var(--button-danger-active-bg)}.setup{flex:1;width:100%;max-width:600px;margin:0 auto;padding:20px;overflow-y:auto}.settings-section{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;margin-bottom:32px;padding:24px}.settings-section h2{color:var(--text-primary);margin-bottom:20px;font-size:20px;font-weight:600}.task-form{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;margin-bottom:32px;padding:24px}.task-form h2{color:var(--text-primary);margin-bottom:20px;font-size:20px;font-weight:600}.form-group{margin-bottom:20px}.form-hint{color:var(--text-secondary);margin-top:4px;font-size:12px;display:block}.task-item{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;justify-content:space-between;align-items:center;margin-bottom:12px;padding:20px;display:flex}.task-item-actions{align-items:center;gap:8px;display:flex}.task-item-content{flex:1}.task-item-content h3{color:var(--text-primary);margin-bottom:4px;font-size:18px;font-weight:600}.task-item-content p{color:var(--text-secondary);font-size:14px}.task-item-editing{border-color:var(--accent-orange)}.task-item-editing .task-item-content{margin-right:16px}.task-edit-input{border:1px solid var(--border-color);background-color:var(--bg-primary);width:100%;color:var(--text-primary);border-radius:6px;margin-bottom:8px;padding:8px 12px;font-family:inherit;font-size:16px}.task-edit-input:focus{border-color:var(--accent-green);outline:none}.task-edit-input-number{width:80px;margin-left:8px}.task-edit-period{color:var(--text-secondary);align-items:center;font-size:14px;display:flex}.task-edit-period label{margin-right:8px}.button-edit{color:#ffc107}.button-save{color:var(--accent-green)}.button-cancel{color:var(--accent-red)}.empty-message{text-align:center;color:var(--text-secondary);padding:40px 20px;font-size:16px}.magic-link-container{align-items:stretch;gap:8px;display:flex}.magic-link-input{border:1px solid var(--border-color);background-color:var(--bg-primary);color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;border-radius:8px;flex:1;padding:12px 16px;font-family:inherit;font-size:14px;overflow:hidden}.magic-link-input:focus{border-color:var(--accent-green);outline:none}.button-copy{background-color:var(--accent-green);color:var(--text-primary);cursor:pointer;white-space:nowrap;border:none;border-radius:8px;flex-shrink:0;padding:12px 20px;font-size:14px;font-weight:600;transition:all .2s}.button-copy:hover{background-color:var(--button-hover);transform:translateY(-1px)}.button-copy:active{transform:translateY(0)}.button-copy.copied{background-color:var(--accent-green);opacity:.8}.time-adjust-popup-backdrop{z-index:999;background-color:#0000;position:fixed;inset:0}.time-adjust-popup{background-color:var(--bg-secondary);border:1px solid var(--border-color);z-index:1000;border-radius:12px;gap:8px;margin-top:-8px;padding:8px;display:flex;position:fixed;transform:translate(-50%,-100%);box-shadow:0 4px 12px #0000004d}.time-adjust-button{background-color:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border-color);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:8px;outline:none;justify-content:center;align-items:center;width:44px;height:44px;padding:0;font-size:24px;font-weight:600;transition:all .2s;display:flex}@media (hover:hover){.time-adjust-button:hover{background-color:var(--button-hover);border-color:var(--accent-green)}}.time-adjust-button:active{background-color:var(--accent-green);transform:scale(.95)}.time-adjust-button:focus{border-color:var(--border-color);outline:none}.time-adjust-button:focus:not(:active){border-color:var(--border-color);background-color:var(--bg-primary)}.undo-toast{z-index:1000;width:100%;max-width:400px;padding:0 20px;position:fixed;bottom:80px;left:50%;transform:translate(-50%)}.undo-toast-content{background-color:var(--bg-secondary);border:1px solid var(--border-color);box-shadow:0 4px 12px var(--toast-shadow);border-radius:12px;flex-direction:row;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;display:flex;position:relative;overflow:hidden}.undo-toast-text{color:var(--text-primary);flex:1;font-size:16px}.undo-button{background-color:var(--accent-orange);color:var(--text-primary);cursor:pointer;border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;height:44px;padding:8px 16px;font-size:16px;font-weight:600;transition:all .2s;display:flex}.undo-button:active{background-color:var(--accent-green-dark);transform:scale(.95)}.undo-progress-bar{background-color:var(--progress-bar-bg);height:3px;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.undo-progress-fill{background-color:var(--accent-green);transform-origin:0;width:100%;height:100%;animation:3s linear forwards undoProgress}@keyframes undoProgress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.popup-backdrop{z-index:1000;background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.popup{background-color:var(--bg-secondary);border:1px solid var(--border-color);z-index:1001;border-radius:16px;width:90%;max-width:400px;padding:24px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 8px 32px #0000004d}.popup-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.popup-header h2{color:var(--text-primary);margin:0;font-size:20px;font-weight:600}.popup-close{color:var(--text-secondary);cursor:pointer;background-color:#0000;border:none;border-radius:6px;justify-content:center;align-items:center;min-width:32px;min-height:32px;padding:8px;transition:all .2s;display:flex}.popup-close:active{background-color:var(--button-hover)}.popup-message{color:var(--text-secondary);margin-bottom:24px;font-size:14px;line-height:1.5}.popup-actions{flex-direction:column;gap:12px;display:flex}.popup-actions .button-primary{width:100%}.popup-actions .button-secondary{color:var(--text-primary);border:1px solid var(--border-color);cursor:pointer;background-color:#0000;border-radius:8px;width:100%;padding:12px 20px;font-size:14px;font-weight:600;transition:all .2s}.popup-actions .button-secondary:active{background-color:var(--button-hover)}.popup-actions .button-danger{color:var(--danger);border:1px solid var(--border-color);cursor:pointer;background-color:#0000;border-radius:8px;width:100%;padding:12px 20px;font-size:14px;font-weight:600;transition:all .2s}.popup-actions .button-danger:active{background-color:var(--button-danger-active-bg)}@media (min-width:768px){.header h1{font-size:28px}.task-card{min-height:100px;padding:24px}}