*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--clr-bg:#f8f9fa;--clr-surface:#fff;--clr-border:#dee2e6;--clr-text:#212529;--clr-text-muted:#6c757d;--clr-primary:#4361ee;--clr-primary-h:#3a56d4;--clr-danger:#e63946;--clr-danger-h:#c1121f;--clr-warn-bg:#fff3cd;--clr-warn-border:#ffc107;--clr-warn-text:#664d03;--clr-high:#e63946;--clr-medium:#f77f00;--clr-low:#2a9d8f;--clr-overdue-bg:#fff5f5;--clr-overdue-border:#e63946;--clr-overdue-text:#c1121f;--sp-xs:.25rem;--sp-sm:.5rem;--sp-md:1rem;--sp-lg:1.5rem;--sp-xl:2rem;--sp-2xl:3rem;--fs-sm:.875rem;--fs-base:1rem;--fs-lg:1.125rem;--fs-xl:1.5rem;--fs-2xl:2rem;--lh-base:1.5;--fw-normal:400;--fw-medium:500;--fw-bold:700;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 3px #00000014;--shadow-md:0 4px 12px #0000001a;--transition:.15s ease;--content-max:800px}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--clr-bg:#121212;--clr-surface:#1e1e1e;--clr-border:#333;--clr-text:#e9ecef;--clr-text-muted:#adb5bd;--clr-primary:#5a7af0;--clr-primary-h:#4366e8;--clr-danger:#ef5350;--clr-danger-h:#e53935;--clr-warn-bg:#2d2510;--clr-warn-border:#e6a817;--clr-warn-text:#ffe08a;--clr-overdue-bg:#2d1111;--clr-overdue-border:#ef5350;--clr-overdue-text:#ff8a80}}:root[data-theme=dark]{--clr-bg:#121212;--clr-surface:#1e1e1e;--clr-border:#333;--clr-text:#e9ecef;--clr-text-muted:#adb5bd;--clr-primary:#5a7af0;--clr-primary-h:#4366e8;--clr-danger:#ef5350;--clr-danger-h:#e53935;--clr-warn-bg:#2d2510;--clr-warn-border:#e6a817;--clr-warn-text:#ffe08a;--clr-overdue-bg:#2d1111;--clr-overdue-border:#ef5350;--clr-overdue-text:#ff8a80}html{-webkit-text-size-adjust:100%;font-size:16px}body{background:var(--clr-bg);color:var(--clr-text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:var(--fs-base);line-height:var(--lh-base);min-height:100dvh}:focus-visible{outline:2px solid var(--clr-primary);outline-offset:3px;border-radius:var(--radius-sm)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.app{max-width:var(--content-max);padding:var(--sp-md) var(--sp-md) var(--sp-2xl);margin:0 auto}.app__header{justify-content:space-between;align-items:center;gap:var(--sp-md);margin-bottom:var(--sp-lg);padding-bottom:var(--sp-md);border-bottom:1px solid var(--clr-border);display:flex}.app__heading{font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:-.02em;color:var(--clr-text)}.app__footer{margin-top:var(--sp-2xl);padding-top:var(--sp-md);border-top:1px solid var(--clr-border);font-size:var(--fs-sm);color:var(--clr-text-muted);text-align:center}.alert{padding:var(--sp-sm) var(--sp-md);border-radius:var(--radius-md);margin-bottom:var(--sp-md);font-size:var(--fs-sm)}.alert--warning{background:var(--clr-warn-bg);border:1px solid var(--clr-warn-border);color:var(--clr-warn-text)}.btn{align-items:center;gap:var(--sp-xs);border-radius:var(--radius-md);font-size:var(--fs-base);font-weight:var(--fw-medium);cursor:pointer;transition:background var(--transition), color var(--transition), border-color var(--transition);white-space:nowrap;border:1px solid #0000;min-height:44px;padding:.5rem 1rem;line-height:1.25;display:inline-flex}.btn--primary{background:var(--clr-primary);color:#fff}.btn--primary:hover,.btn--primary:focus-visible{background:var(--clr-primary-h)}.btn--ghost{color:var(--clr-text);border-color:var(--clr-border);background:0 0}.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--clr-border)}.btn--danger{color:var(--clr-danger);border-color:var(--clr-danger);background:0 0}.btn--danger:hover,.btn--danger:focus-visible{background:var(--clr-danger);color:#fff}.btn--sm{font-size:var(--fs-sm);min-height:32px;padding:.25rem .625rem}.summary{gap:var(--sp-md);margin-bottom:var(--sp-lg);padding:var(--sp-sm) var(--sp-md);background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);font-size:var(--fs-sm);color:var(--clr-text-muted);flex-wrap:wrap;display:flex}.summary__item{align-items:baseline;gap:var(--sp-xs);display:flex}.summary__count{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--clr-text)}.summary__item--overdue .summary__count{color:var(--clr-overdue-text)}.toolbar{gap:var(--sp-sm);margin-bottom:var(--sp-lg);flex-direction:column;display:flex}.toolbar__search{width:100%}.toolbar__input{width:100%;padding:.5rem var(--sp-md);border:1px solid var(--clr-border);border-radius:var(--radius-md);background:var(--clr-surface);color:var(--clr-text);font-size:var(--fs-base);min-height:44px}.toolbar__input:focus{outline:2px solid var(--clr-primary);outline-offset:2px}.toolbar__controls{align-items:flex-end;gap:var(--sp-sm);flex-wrap:wrap;display:flex}.toolbar__control{gap:var(--sp-xs);flex-direction:column;display:flex}.toolbar__control label{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--clr-text-muted)}.toolbar__control select{padding:.375rem var(--sp-sm);border:1px solid var(--clr-border);border-radius:var(--radius-sm);background:var(--clr-surface);color:var(--clr-text);font-size:var(--fs-sm);cursor:pointer;min-height:36px}.task-list{gap:var(--sp-sm);flex-direction:column;list-style:none;display:flex}.task-card{gap:var(--sp-md);padding:var(--sp-md);background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition);grid-template-columns:auto 1fr auto;align-items:start;display:grid}.task-card:hover{box-shadow:var(--shadow-md)}.task-card--done{opacity:.6}.task-card--overdue{border-color:var(--clr-overdue-border);background:var(--clr-overdue-bg)}.task-card__check{padding-top:2px}.task-card__check input[type=checkbox]{cursor:pointer;width:18px;height:18px;accent-color:var(--clr-primary)}.task-card__title{font-weight:var(--fw-medium);cursor:pointer;word-break:break-word;display:block}.task-card--done .task-card__title{color:var(--clr-text-muted);text-decoration:line-through}.task-card__desc{margin-top:var(--sp-xs);font-size:var(--fs-sm);color:var(--clr-text-muted);word-break:break-word}.task-card__meta{align-items:center;gap:var(--sp-sm);margin-top:var(--sp-sm);flex-wrap:wrap;display:flex}.task-card__due{font-size:var(--fs-sm);color:var(--clr-text-muted)}.task-card__due--overdue{color:var(--clr-overdue-text);font-weight:var(--fw-medium)}.task-card__actions{gap:var(--sp-xs);flex-direction:column;display:flex}.badge{border-radius:var(--radius-sm);font-size:.75rem;font-weight:var(--fw-medium);text-transform:capitalize;color:#fff;padding:.125rem .5rem;display:inline-block}.badge--high{background:var(--clr-high)}.badge--medium{background:var(--clr-medium)}.badge--low{background:var(--clr-low)}.dialog-backdrop{padding:var(--sp-md);z-index:100;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.dialog{background:var(--clr-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);width:100%;max-width:480px;max-height:90dvh;padding:var(--sp-xl);overflow-y:auto}.task-form__title{font-size:var(--fs-xl);font-weight:var(--fw-bold);margin-bottom:var(--sp-lg)}.field{gap:var(--sp-xs);margin-bottom:var(--sp-md);flex-direction:column;display:flex}.field label{font-size:var(--fs-sm);font-weight:var(--fw-medium)}.field input[type=text],.field input[type=date],.field textarea,.field select{padding:.5rem var(--sp-md);border:1px solid var(--clr-border);border-radius:var(--radius-sm);background:var(--clr-surface);color:var(--clr-text);font-size:var(--fs-base);width:100%;min-height:44px;font-family:inherit}.field textarea{resize:vertical;min-height:80px}.field__error{font-size:var(--fs-sm);color:var(--clr-danger)}.field-row{gap:var(--sp-md);display:flex}.field-row .field{flex:1;min-width:0}.task-form__actions{gap:var(--sp-sm);margin-top:var(--sp-lg);flex-wrap:wrap;display:flex}.empty-state{text-align:center;padding:var(--sp-2xl) var(--sp-md);align-items:center;gap:var(--sp-md);flex-direction:column;display:flex}.empty-state__msg{color:var(--clr-text-muted);font-size:var(--fs-lg)}@media (width<=480px){.app__heading{font-size:var(--fs-xl)}.task-card{grid-template-columns:auto 1fr}.task-card__actions{flex-direction:row;grid-column:2}.field-row{flex-direction:column}.toolbar__controls{flex-direction:column;align-items:stretch}.toolbar__control select{width:100%}}