/* Visual direction: soft lavender canvas, white surfaces, Poppins and violet actions. */
:root{--app-canvas:#f5f5fb;--app-surface:#fff;--app-ink:#24222e;--app-muted:#8d8999;--app-violet:#6958f5;--app-violet-dark:#5946df;--app-lavender:#efebff;--ink:var(--app-ink)}
body{background:var(--app-canvas);color:var(--app-ink);font-family:Poppins,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}
h1,h2,h3{color:#22202b;letter-spacing:-.025em}
button,input,textarea,select{font-family:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline-color:#a89afa}
main{background:var(--app-canvas)}
.page-nav{padding:6px;background:#fff;border-radius:20px;gap:5px;margin-bottom:16px;box-shadow:0 3px 18px #433b6b04}
.page-nav button[data-page]{border:0;background:transparent;color:#85808f;border-radius:14px;font-weight:500}
.page-nav button[data-page][aria-current=page]{background:#eeebff;color:#6450de}
.page-nav button[data-page]:hover{background:#f5f2ff}
.page-nav button[data-page][aria-current=page] .ui-icon{opacity:1}
.page-nav .ui-icon{opacity:.75}
#openTagDrawer{border:0;background:#f3f0ff;border-radius:14px}
#openTagDrawer.has-tag-filter{background:#e9e1ff;border-color:#ad9aeb;box-shadow:inset 0 0 0 1px #b3a2ee}
#openTagDrawer.has-tag-filter::after{background:#6958f5}
.heading-row h1,.matrix-header h1{font-size:26px;font-weight:600;color:#24222e;letter-spacing:-.7px}
#summary{font-size:11px;color:#797181;font-weight:400}
.task-progress{height:4px;min-height:4px;background:#e9e5f8;accent-color:#8c7df3;margin-bottom:12px}
.task-progress::-webkit-progress-bar{background:#e9e5f8}
.task-progress::-webkit-progress-value{background:#8c7df3}
.task-progress::-moz-progress-bar{background:#8c7df3}
.quick-form{border:0;background:#fff;border-radius:19px;box-shadow:0 4px 18px #433b6b04;padding:7px 8px}
.quick-form input{background:transparent;font-size:16px;color:#332e43;padding:11px 8px}
.quick-form input::placeholder{color:#7c7288}
.primary,#settingsPage .cloud-actions .primary{background:var(--app-violet);border-color:var(--app-violet);color:#fff;font-weight:500;box-shadow:none}
.primary:hover,#settingsPage .cloud-actions .primary:hover{background:var(--app-violet-dark);color:#fff}
.primary .ui-icon{filter:brightness(0) invert(1)}
.quick-form .primary{width:44px;height:44px;min-width:44px;border-radius:15px}
#tasks .task-section{background:#fff;border:0;border-top:0;border-radius:23px;padding:4px 0 5px;margin:4px 0 17px;box-shadow:0 3px 16px #433b6b04}
#tasks .task-section>h2{background:transparent;border:0;margin:0;padding:11px 14px 7px;min-height:34px;font-size:12px;font-weight:500;color:#777081}
#tasks .task-section.section-critical{border-top:3px solid #f0ce86}
#tasks .task-section.section-today{border-top:3px solid #a4d9f4}
#tasks .task-section.section-no-tag{border-top:3px solid #efb6cd}
#tasks .task-section.section-critical>h2{color:#9b7234;font-weight:600}
#tasks .task-section.section-today>h2{color:#4a87b6;font-weight:600}
#tasks .task-section.section-no-tag>h2{color:#b56b8b;font-weight:600}
#tasks .task-section>.swipe-task{margin:6px 9px;border-radius:17px}
#tasks .task-section>.swipe-task>.row{background:var(--tag-soft,#fff0f6);border:0;border-radius:17px;padding:13px 11px;column-gap:10px}
#tasks .task-section.section-critical>.swipe-task>.row{background:#fff5e8}
#tasks .task-section.section-today>.swipe-task>.row{background:#eaf6ff}
#tasks .task-section.section-no-tag>.swipe-task>.row{background:#fff0f6}
#tasks .task-section>.swipe-task.complete>.row{background:#f5f4fa}
.title{font-family:inherit;font-size:16px;font-weight:500;line-height:1.5;color:#292635}
.date{font-size:11px;color:#766d83;line-height:1.5}
.row input[type=checkbox],.matrix-task>input{border-color:#c5bed6;background-color:#fff}
.row input[type=checkbox]:checked{background-color:#e5ddff;border-color:#8e7acc}
.chip.untagged-flag{color:#b66d88}
#tasks .date-heading{color:#6f637e;font-size:13px;font-weight:500;margin:18px 2px 8px}
#tasks .completed-heading{font-size:12px;color:#aaa0b2;font-weight:400}
.empty{border:0;border-radius:20px;background:#fff;padding:28px 18px;color:#96909f;font-size:13px}
.matrix-grid{gap:14px}
.matrix-quadrant{background:#fff;border:0;border-radius:23px;padding:16px;box-shadow:0 3px 16px #433b6b04}
.matrix-quadrant h2{font-weight:600;font-size:15px}
.matrix-subtitle{font-size:10px;color:#a198ad}
.matrix-task{border:0;border-radius:16px;margin-top:8px;padding:10px}
.matrix-do .matrix-task{background:#fff0f6}
.matrix-schedule .matrix-task{background:#eaf6ff}
.matrix-delegate .matrix-task{background:#fff5e8}
.matrix-later .matrix-task{background:#f2efff}
.matrix-task-name{font-size:13px;font-weight:500}
#settingsPage>h1{font-size:26px;font-weight:600}
#settingsPage>.cloud-settings,#settingsPage>.tag-manager,#settingsPage>.retention-settings,#settingsPage>.voice-settings,#settingsPage>.notification-settings,#settingsPage>.app-settings{background:#fff;border:0;border-radius:22px;box-shadow:0 3px 16px #433b6b04}
#settingsPage h2{font-size:15px;font-weight:600;color:#282330}
#settingsPage .account-identity h2{font-size:14px}
#settingsPage .account-identity p{font-size:11px;color:#8b8198}
#settingsPage .account-summary .cloud-actions button{font-size:11px;border-radius:14px}
#settingsPage .managed-tag-label{font-size:13px;font-weight:500}
#settingsPage .managed-tag{border-color:#f1eef6}
#settingsPage .tag-manager-actions .icon{background:#f5f2fc;border-radius:13px}
#settingsPage #addManagedTag{background:#efebff;border-radius:14px}
#settingsPage #voiceLanguageSetting,#completedRetentionDays{background:#f6f5f9;border:0;border-radius:12px}
#settingsPage .backup-actions button,.app-settings-actions button,.notification-actions button,.retention-control button{border:0;border-radius:13px;background:#f0ecff;color:#6a55b8;font-weight:500}
#settingsPage #enableNotifications,#settingsPage #installApp{background:#6958f5;color:#fff}
.backup-settings summary,.voice-info summary{color:#9b90a7}
#tagDrawer{font-family:inherit}
.layout>aside#tagDrawer{background:#faf9ff;border:0;border-radius:25px 0 0 25px;box-shadow:-10px 0 50px #40376218}
#tagDrawer nav button{font-size:14px;border-radius:15px;min-height:42px;font-weight:500}
#tagDrawer nav button[data-filter][aria-pressed=true]{border-color:var(--tag-edge,#ac99ef);box-shadow:none}
#tagDrawer nav button[data-filter=""][aria-pressed=true]{background:#eae4ff;color:#6a53c6}
.tag-drawer-heading{font-size:18px;font-weight:600}
.tag-backdrop,.tag-backdrop:hover{background:#29223730}
.active-tag-filter{border:0;font-size:11px;min-height:32px;background:var(--tag-soft,#efeaff);padding-left:10px}
.active-tag-filter strong{font-weight:500}
dialog{background:#fff;border:0;border-radius:27px;box-shadow:0 20px 80px #29223725;font-family:inherit}
dialog::backdrop{background:#28232f65}
#taskDialog,#tagDialog{border:0;border-radius:27px;padding:17px}
.task-dialog-header h2,.tag-dialog-header h2{font-weight:600;font-size:18px;color:#25212f}
#taskName,#tagName,#taskDescription,#dateTrigger,#taskTime{background:#f5f5f7;border:1px solid transparent;border-radius:12px;color:#342d41}
#taskName,#tagName{font-weight:500}
#taskDescription{font-size:13px;line-height:1.7}
#taskForm label,#tagForm>label{font-size:11px;font-weight:400;color:#766d83}
#cancelTask,#cancelTag,#closeTime,#closeCalendar,#closeDatesCalendar{background:#f6f4fa;border:0;border-radius:50%}
#taskForm .formactions .primary,#tagForm .formactions .primary{background:#6958f5;border:0;color:#fff;border-radius:14px}
#taskForm .repeat-options label{background:#f7f5fc;border:0;font-size:10px;color:#8e819f}
#taskForm .repeat-options label.is-selected,#taskForm .repeat-options label:has(input:checked){background:#eee7ff;color:#6f51a5;font-weight:500;box-shadow:inset 0 0 0 1px #c4b1ed}
#taskForm .matrix-options label{background:#f7f5fc;border:0;border-radius:13px;font-size:11px;color:#8e819f}
#taskForm .matrix-options label.is-selected{background:#eee7ff;color:#6f51a5;box-shadow:inset 0 0 0 1px #c4b1ed}
#taskForm .tagchoices label{color:var(--tag-ink);font-size:11px}
#showDescription,.tag-scroll-hint,.clear-date{background:#f0ebff;color:#7861af;border:0;border-radius:12px}
.calendar-picker{background:#f7f5ff;border:0;border-radius:20px}
.calendar-days button{border-radius:13px;font-family:inherit}
.calendar-days .selected-day,#datesCalendarDays .selected-day{background:#6a58f5;color:#fff;border-color:#6a58f5}
#datesCalendarDays .has-tasks{background:#eee9ff;color:#7960ba}
#datesCalendarDays .has-tasks.selected-day{background:#6a58f5;color:#fff}
#datesCalendarDays .has-tasks.selected-day::after{background:#fff}
.time-wheel-frame{background:#f6f4fb;border-radius:16px}
.time-wheel-frame::after{border-color:#d4c8f4;background:#d8cbff15}
.time-wheel-option{font-family:inherit;color:#a096b0}
#voiceTask{background:#fff;border:0;box-shadow:0 6px 28px #6653b72b}
#voiceTask:hover{background:#f4f0ff}
#voiceTask.is-listening{background:#6958f5;border:0;animation:reference-mic-breathe 1.5s ease-in-out infinite}
#voiceTask.is-listening::before{border-color:#9b8af580}
#voiceTask.is-stopping{background:#fff0ce}
@keyframes reference-mic-breathe{0%,100%{transform:scale(1);box-shadow:0 6px 24px #6958f545}50%{transform:scale(1.045);box-shadow:0 6px 34px #6958f56b}}
#notice{background:#6150bc;color:#fff;border-radius:15px;font-size:12px}
.legal-links{font-size:10px}
.legal-links a{color:#a198ad;text-decoration-color:#d1c8de}
.save-hint{font-size:10px;color:#a99eb3}
@media(max-width:700px){
 main{padding-left:16px;padding-right:16px}
 .page-nav{gap:3px;padding:5px;margin-bottom:14px;border-radius:18px}
 .page-nav button[data-page]{min-height:42px;font-size:10px;gap:4px;padding:6px 2px}
 .heading-row h1,.matrix-header h1{font-size:24px}
 #tasks .task-section>.swipe-task>.row{padding:12px 10px}
 .title{font-size:15px}
 .quick-form input{font-size:16px}
 #taskName,#tagName,#taskTime,#dateTrigger{font-size:16px}
 #taskDialog,#tagDialog{position:fixed;inset:auto 0 0;margin:0 auto;width:min(100%,520px);max-height:calc(100dvh - 16px);border-radius:28px 28px 0 0;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
 .matrix-quadrant{padding:14px}
}
@media(prefers-reduced-motion:reduce){#voiceTask.is-listening{animation:none}}
#tasks:focus-visible,#matrixGrid:focus-visible{outline:2px solid #a08be5;outline-offset:-2px;border-radius:18px}
.notification-heading{flex-wrap:wrap}
@media(max-width:700px){#taskDialog,#tagDialog{max-width:520px}}
@media(max-width:700px){#dateTrigger,#taskTime{font-size:14px}}
/* Dates uses the same pastel row surface without changing its date groups. */
#tasks>.swipe-task{margin:0 0 8px;border-radius:17px}
#tasks>.swipe-task>.row{background:var(--tag-soft,#fff0f6);border:0;border-radius:17px;padding:13px 11px;column-gap:10px}
#tasks>.swipe-task.complete>.row{background:#f5f4fa}
#tasks>.swipe-task.tone-cyan>.row{box-shadow:inset 0 0 0 1px #e2e2eb}
@media(max-width:700px){#tasks>.swipe-task>.row{padding:12px 10px}}
/* Touch browsers may focus scroll containers after a pan. Keep control focus
   indicators, without drawing a frame around the entire scrolling list. */
@media(hover:none) and (pointer:coarse){
 #tasks:focus,#tasks:focus-visible,#matrixGrid:focus,#matrixGrid:focus-visible{outline:none}
}
/* Slim shared task composer, with a full-size touch target for Add. */
#quickForm.quick-form{min-height:48px;padding:2px 3px 2px 10px;gap:6px;border:1px solid #e7e1ef;border-radius:16px;background:#fff;box-shadow:none;margin-bottom:8px}
#quickForm #quickName{height:42px;min-height:0;padding:9px 3px;font-size:16px;line-height:22px;border-radius:10px;box-shadow:none}
#quickForm #addTask{width:44px;height:42px;min-width:44px;min-height:42px;padding:10px;border-radius:12px;box-shadow:none}
#quickForm #addTask .ui-icon{width:22px;height:22px}
#quickForm:focus-within{border-color:#b2a0e6;box-shadow:0 0 0 2px #ede7fc}

#tasks .task-section.section-overdue{--panel-fill:#fbe6e7;--panel-border:#efcbd0;--panel-accent:#cf7183;border-top:3px solid #e8a5b2}
#tasks .task-section.section-overdue>h2{color:#a64f62;font-weight:600}
#tasks .special-overdue>.ui-icon{display:block;width:18px;height:18px}
#tasks .task-section.section-overdue>.swipe-task>.row{background:#fff0f2}