:root{--bg-page: #f7f8fa;--bg-white: #ffffff;--border: #e0e0e5;--text: #333333;--text-light: #777777;--primary: #4A90E2;--primary-light: #e8f0fe;--secondary: #50e3c2;--secondary-light: #e6f9f3;--tag-study: #ffeecb;--tag-study-text: #f5a623;--tag-health: #e8f5e9;--tag-health-text: #43a047;--tag-finance: #e3f2fd;--tag-finance-text: #1e88e5;--overdue: #f44336;--overdue-bg: #eeeafd;--radius: 8px;--gap: 1rem;--shadow: 0 2px 6px rgba(0, 0, 0, .08);--transition: .2s ease-in-out;--font-base: "Segoe UI", Tahoma, Verdana, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-page);font-family:var(--font-base);color:var(--text)}.container{max-width:900px;margin:2rem auto;padding:var(--gap)}.container>h2{font-size:1.75rem;margin-bottom:.5rem}.container>span{display:block;font-size:.95rem;color:var(--text-light);margin-bottom:1rem;white-space:pre-wrap}.container>span strong{color:var(--primary)}.container>span p{margin-top:.5rem}form{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-bottom:2rem}form input[type=text],form input[type=date],form select,form textarea{width:100%;padding:.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius);font-size:0 nine rem;font-family:var(--font-base);transition:border-color var(--transition),box-shadow var(--transition)}form textarea{min-height:100px;resize:vertical}form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #4a90e24d}.date-select-row{display:flex;gap:1rem;flex-wrap:wrap}.date-select-row input,.date-select-row select{flex:1;min-width:200px}form button{display:block;width:100%;padding:.75rem 1rem;margin-top:var(--gap);background:var(--primary);color:#fff;font-size:1rem;font-weight:600;text-align:center;border:none;border-radius:var(--radius);box-shadow:0 2px 6px #0000001a;cursor:pointer;transition:background var(--transition),transform var(--transition),box-shadow var(--transition)}form button:hover{background:var(--tag-finance-text);transform:translateY(-1px);box-shadow:0 4px 12px #00000026}form button:active{background:#356bb3;transform:translateY(0);box-shadow:0 2px 6px #0000001a}#mynav{position:fixed;width:100%;margin:auto}nav{background:var(--bg-white);padding:.5rem 1rem;border-radius:var(--radius);box-shadow:var(--shadow);margin:1rem 0 1.5rem}.navbar-container{display:flex;justify-content:space-between;align-items:center}.nav-left,.nav-right{list-style:none;padding:0;margin:0}nav ul{list-style:none;display:flex;align-items:center;gap:var(--gap)}.navbar-logo{height:70px;width:auto;transform:scale(2.8);margin-left:40px;margin-right:50px}.nav-left li,.nav-right li{padding:.5rem 1rem;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-size:.9rem;color:var(--text);transition:background var(--transition),border-color var(--transition),transform var(--transition)}.nav-left li:hover,.nav-right li:hover{background:#f8f8ff;transform:translateY(-1px);box-shadow:2px 2px 3px #c0c0ff}.nav-left li.active{background:var(--primary);border-color:var(--primary);color:#fff}.search-container{position:relative;width:280px}.search-container input{width:100%;padding:10px 10px 10px 35px;border:none;border-radius:12px;border-color:#aeaeff;background-color:#f1f3f5;font-size:14px;color:#000}.search-container input:hover{border:1px solid rgb(174,174,255);box-shadow:2px 2px 3px #c0c0ff;transition:all .3s}.search-container input:focus{border:1px solid rgb(211,211,249);box-shadow:2px 2px 3px #c6c6ec;outline:none}.search-icon{position:absolute;top:50%;left:10px;transform:translateY(-50%);width:16px;height:16px;opacity:.6;pointer-events:none}.nav-right li.notification{padding:.5rem;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--transition),transform var(--transition)}.nav-right li.notification:hover{background:#f8f8ff;transform:translateY(-1px);box-shadow:2px 2px 3px #c0c0ff}.nav-right li.notification img{width:1.25rem;height:1.25rem;display:block}.nav-right li.notification .badge{position:absolute;top:.2rem;right:.2rem;background:var(--overdue);color:#fff;font-size:.6rem;line-height:1;padding:.1rem .3rem;border-radius:999px}.task-nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:.5rem 1rem;margin:1rem 0 1.5rem;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.categories,.icon-buttons{display:flex;gap:.75rem;list-style:none;padding:0;margin:0}.categories li{padding:.5rem 1rem;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-size:.8rem;font-weight:bolder;color:var(--text);transition:background var(--transition),border-color var(--transition),transform var(--transition)}.categories li:hover{transform:translateY(-1.5px);box-shadow:1px 2px 3px #545151}.grp-item{padding:.5rem;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--transition),transform var(--transition)}.grp-item img{width:1.25rem;height:1.25rem;display:block}.grp-item:hover{background:#f8f8ff;transform:translateY(-1px);box-shadow:2px 2px 3px #c0c0ff}.grp-item:active{background:#5218fa;box-shadow:2px 2px 3px #c0c0ff}.TaskList{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--gap);margin-top:var(--gap);padding:0;list-style:none}.TaskList .mytask{display:flex;flex-direction:column;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--gap);transition:transform var(--transition),box-shadow var(--transition)}.TaskList .mytask:hover{transform:translateY(-4px);box-shadow:0 6px 16px #0000001f}.TaskList .mytask li{list-style:none;margin:.25rem 0;padding:0;font-size:.95rem;color:var(--text)}.TaskList .mytask li:first-child{font-weight:600;font-size:1.1rem;color:var(--primary)}.TaskList .mytask li:nth-child(2),.TaskList .mytask li:nth-child(4){font-size:.85rem;color:var(--text-light)}.TaskList .mytask li:nth-child(3){margin-top:.5rem;line-height:1.4}.TaskList .mytask[data-category=work]{border-left:4px solid var(--tag-study-text)}.TaskList .mytask[data-category=personal]{border-left:4px solid var(--tag-health-text)}.TaskList .mytask[data-category=study]{border-left:4px solid var(--tag-finance-text)}.TaskList .mytask[data-category=health]{border-left:4px solid var(--tag-health-text)}.TaskList .mytask[data-category=finance]{border-left:4px solid var(--tag-finance-text)}@media (max-width: 600px){.TaskList{grid-template-columns:1fr}}.subcontainer{display:flex;gap:var(--gap);flex-wrap:wrap;justify-content:space-between;margin-top:1rem}.subcontainer>div{flex:1;min-width:180px;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem var(--gap);box-shadow:var(--shadow);text-align:center;transition:transform var(--transition),box-shadow var(--transition)}.subcontainer>div:hover{transform:translateY(-3px);box-shadow:0 4px 12px #0000001f}.subcontainer h2{font-size:2.25rem;margin-bottom:.25rem}.subcontainer span{font-size:0 nine rem;color:var(--text-light)}.total h2{color:var(--primary)}.complete h2{color:var(--secondary)}.pending h2{color:var(--overdue)}@media (max-width: 640px){form,.TaskList{grid-template-columns:1fr}.subcontainer{flex-direction:column;align-items:center}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.banner{background:linear-gradient(135deg,var(--primary-light),var(--secondary-light));color:var(--text);padding:5rem var(--gap);text-align:center}.banner .cards{max-width:720px;margin:0 auto;display:flex;justify-content:center}.banner-title{font-family:var(--font-base);font-size:2.25rem;color:var(--primary);font-weight:700;position:relative;margin-bottom:1rem}.banner-title:after{content:"";display:block;width:60px;height:4px;background-color:var(--primary);margin:.75rem auto 0;border-radius:2px}.card.quote-card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem;max-width:100%;transition:transform var(--transition),box-shadow var(--transition)}.card.quote-card:hover{transform:translateY(-4px);box-shadow:0 6px 16px #0000001f}.quote-card .card-text{font-family:Georgia,serif;font-size:1.05rem;line-height:1.6;color:var(--text-light);margin-bottom:1rem}.quote-card .card-author{font-family:var(--font-base);font-size:.9rem;font-style:italic;color:var(--primary);text-align:right}.banner .btn{display:inline-block;margin-top:var(--gap);width:auto;padding:.75rem 1.25rem;font-size:.95rem;font-weight:600;color:#fff;background:var(--primary);border:none;border-radius:var(--radius);box-shadow:var(--shadow);cursor:pointer;transition:background var(--transition),transform var(--transition),box-shadow var(--transition)}.banner .btn:hover{background:#356bb3;transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.banner .btn:active{background:var(--primary);transform:scale(.98);box-shadow:0 2px 6px #0000001a}#gemini{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem;margin-bottom:2rem}#gemini h2{font-size:1.75rem;color:#333;text-align:center;margin-bottom:1rem}#gemini h2:after{content:"";bottom:-.5rem;left:0;width:50px;height:3px;background:var(--primary);border-radius:2px}#gemini>div:first-of-type{display:grid;grid-template-columns:1fr auto;gap:var(--gap);align-items:start;margin-bottom:1.5rem}#gemini textarea{width:100%;height:70px;padding:1rem;border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-base);font-size:1rem;resize:vertical;transition:border-color var(--transition),box-shadow var(--transition)}#gemini textarea:focus{border-color:var(--primary);box-shadow:0 0 0 2px #4a90e24d;outline:none}#gemini button{padding:.75rem 1.5rem;background:var(--primary);color:#fff;margin:auto;font-size:1rem;font-weight:600;border:none;border-radius:var(--radius);cursor:pointer;transition:background var(--transition),transform var(--transition),box-shadow var(--transition)}#gemini button:hover{background:var(--tag-finance-text);transform:translateY(-1px);box-shadow:0 4px 12px #00000026}#gemini button:active{background:#356bb3;transform:translateY(0);box-shadow:0 2px 6px #0000001a}#gemini .container{display:flex;flex-direction:column;gap:1.5rem}#gemini .fluid-container{background:var(--secondary-light);border:1px solid var(--border);border-radius:var(--radius);padding:var(--gap);box-shadow:var(--shadow);transition:transform var(--transition),box-shadow var(--transition)}#gemini .fluid-container:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0000001f}#gemini .fluid-container h5{font-size:1.1rem;color:var(--secondary);margin-bottom:.5rem}#gemini .fluid-container span{display:block;margin-bottom:.75rem;font-size:.95rem;color:var(--text-light)}#gemini .fluid-container hr{border:none;border-top:1px solid var(--border);margin:.75rem 0}#gemini .fluid-container ul,#gemini .fluid-container li{list-style:disc inside;margin:0;padding:0}#gemini .fluid-container li{margin-bottom:.5rem;font-size:.95rem;color:var(--text)}@media (max-width: 640px){#gemini>div:first-of-type{grid-template-columns:1fr}}.TaskList.grid-view{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-lg);padding:var(--spacing-md) 0}.TaskList.grid-view .mytask{flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--spacing-lg);box-shadow:0 4px 16px #0000001a;border-radius:var(--radius);min-height:220px;background-color:var(--color-bg-task)}.TaskList.list-view{display:flex;flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-md) 0}.TaskList.list-view .mytask{flex-direction:row;align-items:center;justify-content:space-between;padding:var(--spacing-md)}.TaskList.grid-view .mytask:hover{box-shadow:0 8px 32px #00000029;transform:translateY(-2px) scale(1.03)}.TaskList.list-view{display:flex;flex-direction:column;gap:16px}.active-icon{background:#e0e0e0;border-radius:50%}:root{--color-bg-task: #ffffff;--color-border-task: #e0e0e0;--color-text: #333333;--color-accent: #dce1e6;--color-completed-line: #999999;--color-delete: #e74c3c;--color-delete-hover: #c0392b;--opacity-fade: .3;--opacity-completed: .5;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--radius: 8px;--transition-fast: .2s ease-in-out;--transition-medium: .5s ease}.mytask{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;background-color:var(--color-bg-task);border:1px solid var(--color-border-task);border-radius:var(--radius);box-shadow:0 2px 8px #00000012;transition:background-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);gap:var(--spacing-md);min-height:90px}.mytask:hover{box-shadow:0 8px 24px #00000021;background-color:#f7fafd;transform:translateY(-2px) scale(1.01)}.mytask--fade-out{opacity:var(--opacity-fade);transition:opacity var(--transition-medium)}.mytask--completed{opacity:var(--opacity-completed);text-decoration:line-through;color:var(--color-completed-line);transition:opacity var(--transition-medium),color var(--transition-medium)}.checkbox-btn{font-size:2rem;color:var(--color-accent);background:none;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:50%;transition:color var(--transition-fast),background-color var(--transition-fast),box-shadow var(--transition-fast);box-shadow:0 1px 2px #00000008;min-width:2.5rem;min-height:2.5rem;display:flex;align-items:center;justify-content:center}.checkbox-btn:hover,.checkbox-btn:focus{color:#fff;background-color:var(--color-accent);outline:none;box-shadow:0 2px 8px #00000014}.delete-btn{background-color:var(--color-delete);color:#fff;border:none;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius);font-size:1rem;cursor:pointer;margin-left:var(--spacing-md);margin-top:2px;transition:background-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);box-shadow:0 1px 2px #0000000a;font-weight:500;letter-spacing:.02em}.delete-btn:hover,.delete-btn:focus{background-color:var(--color-delete-hover);transform:scale(1.07);outline:none;box-shadow:0 2px 8px #e74c3c21}.mytask-content{flex:1 1 auto;display:flex;flex-direction:column;gap:.5px;min-width:0}.mytask-content h3{margin:0 0 1px;font-size:1.2rem;font-weight:600;color:var(--color-text);word-break:break-word}.mytask-content h5{margin:0 0 1px;font-size:.95rem;font-weight:500;color:#5a5a5a}.mytask-content p{margin:0 0 1px;font-size:.98rem;color:#444;word-break:break-word}.mytask-content .category{font-size:.93rem;color:#6a6a6a;margin-bottom:1px}.mytask-content .duedate{font-size:.93rem;color:#888;margin-bottom:1px}@media (max-width: 700px){.mytask{flex-direction:column;align-items:stretch;padding:var(--spacing-sm) var(--spacing-sm);gap:var(--spacing-sm)}.checkbox-btn,.delete-btn{margin:0 0 var(--spacing-xs) 0;width:100%}}
