:root {
    color-scheme: dark;
    -webkit-tap-highlight-color: rgba(190,156,243,.2);
    --bg: #000;
    --surface: #0d0d0f;
    --surface-raised: #17171a;
    --surface-hover: #212126;
    --overlay-surface: #111114;
    --text: #fff;
    --muted: #96969e;
    --subtle: #91919a;
    --line: #27272c;
    --line-strong: #4a4a50;
    --accent-action: #6f62d9;
    --accent-highlight: #be9cf3;
    --accent: var(--accent-action);
    --accent-bright: var(--accent-highlight);
    --danger: #ff6b6b;
    --success: #5ee38d;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --header-h: 88px;
    --shadow-dialog: 0 28px 90px rgba(0,0,0,.72);
    --layer-menu: 40;
    --layer-modal: 100;
    --layer-overdue: 105;
    --layer-share: 108;
    --layer-auth: 110;
    --layer-drawer: 120;
    --layer-task-menu: 130;
    --layer-loading: 150;
    --layer-toast: 160;
    --motion-fast: 140ms;
    --motion-surface: 240ms;
    --motion-ease-out: cubic-bezier(.22, 1, .36, 1);
}

.guest-backup-dialog { --dialog-padding-block: 24px; --dialog-padding-inline: 26px; width: min(560px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: var(--dialog-padding-block) var(--dialog-padding-inline); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-raised); color: var(--text); }
.guest-backup-dialog::backdrop { background: rgba(0,0,0,.72); }
#guestBackupNotice { margin: 20px 0 0; }
.guest-backup-dialog p, .guest-backup-dialog label[for] { color: var(--muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.guest-backup-dialog section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.guest-backup-dialog h3 { margin: 0 0 8px; font-size: 15px; }
.guest-backup-dialog input[type="file"] { display: block; max-width: 100%; width: 100%; margin: 10px 0; padding: 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.guest-backup-dialog input::file-selector-button { min-height: 32px; margin-right: 10px; border: 0; border-radius: 6px; cursor: pointer; }
.backup-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 10px; background: var(--accent-bright); color: #070707; font-weight: 700; cursor: pointer; }
.backup-button:disabled { opacity: .5; cursor: default; }
.guest-backup-dialog .backup-summary { padding: 12px; border-radius: 10px; background: var(--surface); color: var(--text); }
.backup-status { min-height: 1.6em; margin-bottom: 0; }
.guest-backup-dialog .backup-error { color: #ff9a9a; }
@media (max-width: 600px) {
    .guest-backup-dialog { --dialog-padding-block: 20px; --dialog-padding-inline: max(18px, env(safe-area-inset-left), env(safe-area-inset-right)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
    .guest-backup-dialog .backup-button { width: 100%; }
}

.task-selection-toolbar { display: flex; align-items: center; gap: 6px; min-width: 0; }
#weekSelectionToolbar { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: var(--layer-menu); width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--overlay-surface); box-shadow: 0 12px 40px rgba(0,0,0,.5); transform: translateX(-50%); animation: selection-bar-enter 240ms var(--motion-ease-out); }
#weekSelectionToolbar .task-selection-count { padding: 0 8px; margin-right: 2px; }
#weekSelectionToolbar .task-selection-separator--count { display: block; }
#weekSelectionToolbar [data-bulk-action="complete"] { background: transparent; color: var(--text); }
#weekSelectionToolbar [data-bulk-action="complete"]:hover:not(:disabled) { background: var(--surface-hover); }
#weekSelectionToolbar .task-selection-options { top: auto; bottom: calc(100% + 18px); }
#weekGrid.task-selection-active { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
html:has(#weekSelectionToolbar:not(.hidden)) { scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
@keyframes selection-bar-enter { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
.task-selection-count { margin-right: 10px; color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
.task-selection-toolbar button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.task-selection-toolbar button:hover:not(:disabled) { background: var(--surface-hover); }
.task-selection-toolbar .task-selection-exit:hover:not(:disabled) { color: #fff; background: var(--surface-hover); }
.task-selection-toolbar button:disabled { opacity: .35; cursor: default; }
.task-selection-toolbar [data-bulk-action="complete"] { background: rgba(190,156,243,.1); color: var(--accent-bright); }
.task-selection-toolbar [data-bulk-action="incomplete"] { color: #c7c7c7; }
.task-selection-toolbar .task-selection-delete { color: var(--danger); }
.task-selection-separator { display: block; flex: 0 0 1px; width: 1px; height: 20px; background: var(--line); }
.task-selection-separator--count { display: none; }
.task-selection-toolbar .task-selection-exit { flex: 0 0 36px; width: 36px; padding: 0; color: var(--muted); margin-left: 4px; font-size: 18px; }
.task-selection-secondary, .task-selection-options { display: flex; align-items: center; gap: 6px; }
.task-selection-secondary { position: relative; }
.task-selection-toolbar .task-selection-more { display: none; }
.context-action[aria-pressed="true"] { color: var(--accent-bright); }
.task-select-control { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; }
.task-select-control input { appearance: none; -webkit-appearance: none; position: relative; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--line-strong); border-radius: 5px; background: transparent; cursor: pointer; }
.task-select-control input:checked { border-color: var(--accent-bright); background: var(--accent-bright); }
.task-select-control input:checked::after { content: ''; position: absolute; top: 2px; left: 5px; width: 4px; height: 8px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.task-select-control input:hover:not(:disabled) { border-color: var(--accent-bright); }
.task-select-control input:disabled { cursor: default; }
.task-selection-active .task-check { display: none; }
.task-selection-active .task-row, .task-selection-active .task-row:active { cursor: pointer; }
.task-selection-active .drag-handle { visibility: hidden; pointer-events: none; }
@media (max-width: 1100px) {
    .task-selection-toolbar .task-selection-more { display: inline-flex; }
    .task-selection-options { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 250px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--overlay-surface); box-shadow: 0 12px 32px rgba(0,0,0,.4); }
    .task-selection-secondary.is-open .task-selection-options { display: grid; }
    .task-selection-options button { justify-content: flex-start; text-align: left; }
    .task-selection-options .task-selection-separator { width: auto; height: 1px; margin: 0 8px; }
}
@media (max-width: 700px) {
    #weekSelectionToolbar { width: calc(100% - 24px); max-width: 430px; min-height: 58px; padding: 6px; bottom: calc(12px + env(safe-area-inset-bottom)); border-radius: 20px; }
    #weekSelectionToolbar .task-selection-count { padding: 0 8px; }
    .task-selection-count { flex: 1 1 0; min-width: 0; margin-right: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
    .task-selection-toolbar button { min-height: 44px; padding: 8px; }
    .task-selection-toolbar .task-selection-exit { flex-basis: 44px; width: 44px; margin-left: 0; }
    .task-selection-toolbar > button, .task-selection-secondary { flex-shrink: 0; }
    .task-selection-options { right: -57px; min-width: 0; width: min(280px, calc(100vw - 24px)); }
}
@media print {
    #weekGrid.task-selection-active { padding-bottom: 0; }
    .task-selection-toolbar, #taskSelectionButton, #listTaskSelectionButton, .task-select-control { display: none !important; }
    .task-selection-active .task-check { display: grid; }
    .task-selection-active .task-row.task-selected, .task-selection-active .task-row.task-selected:hover,
    .task-selection-active .custom-list-task.task-selected { box-shadow: none; background: transparent; }
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: #6953a6; color: #fff; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }

.app-shell { min-height: 100vh; min-height: 100dvh; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); display: flex; flex-direction: column; }

.app-header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: var(--header-h);
    gap: 24px;
}

.eyebrow {
    margin: 0 0 6px;
    color: var(--subtle);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
}

.header-title-group .planner-tagline { margin-bottom: 8px; color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: 0; }

.header-title-group h1:not(.eyebrow), .header-title-group .month-title {
    margin: 0;
    font-size: clamp(30px, 3vw, 40px);
    line-height: 1;
    letter-spacing: -.045em;
}

.month-title { min-width: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; font-weight: 700; text-align: left; }
.month-title:disabled { opacity: 1; }
.month-title.is-away { position: relative; color: var(--accent-bright); cursor: pointer; transition: color 150ms ease; }
.month-title.is-away::after { content: ''; position: absolute; inset: -12px -8px; }
.month-title.is-away:hover { color: #ddcaff; }

.header-actions, .nav-cluster, .context-actions, .drawer-primary-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.context-action, .calendar-button {
    border: 0;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.icon-button--light { background: #f4f4f4; color: #090909; }
.icon-button--light:hover { background: #fff; }
.icon-button--accent { background: var(--accent); }
.icon-button--accent:hover { background: #8376ec; }
.icon-button--save {
    position: relative;
    isolation: isolate;
    background: var(--success);
    color: #070707;
    box-shadow: 0 0 0 4px rgba(94,227,141,.12);
}
.icon-button--save:hover { background: #79eca1; }

.calendar-option span { min-width: 0; overflow-wrap: anywhere; }

.floating-menu { top: 52px; right: 0; }
.floating-menu.info-menu { right: 50px; }
.floating-menu .menu-separator { height: 1px; margin: 6px 8px; background: var(--line); }

.context-bar {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--line);
}

.calendar-picker { position: relative; min-width: 0; max-width: 40%; flex-shrink: 1; }
.calendar-picker .calendar-button { max-width: 100%; }
#calendarName, .shared-calendar-label strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-dot, .calendar-button > i { flex-shrink: 0; }
.calendar-button {
    min-height: 38px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 10px;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
}
.calendar-button:hover { background: var(--surface); }
.calendar-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.calendar-menu { top: calc(100% + 8px); left: 0; transform-origin: top left; }
.menu-heading {
    min-height: 44px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.menu-heading a { flex: 0 0 44px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; }
.menu-heading a i { font-size: 16px; line-height: 1; }
.menu-heading a:hover { background: var(--surface-hover); }
.calendar-option {
    width: 100%;
    min-height: 42px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
    text-align: left;
}
.calendar-option:hover, .calendar-option.active { background: var(--surface-hover); }
.calendar-option small { margin-left: auto; color: var(--subtle); }

.week-range { margin: 0; color: var(--muted); font-size: 12px; text-align: right; }
.guest-notice { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(94,227,141,.1); }
.context-actions { margin-left: auto; gap: 6px; font-weight: 300; letter-spacing: 0; text-transform: none; }
#app .context-bar { flex-wrap: wrap; }
#app .context-actions { flex-wrap: wrap; justify-content: flex-end; }
.toolbar-label, #plannerMoreButton { display: none; }
.planner-secondary-actions, .planner-more-menu { display: contents; }
#app :is(.app-header, .context-bar) :is(button, a):focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.context-action {
    position: relative;
    min-height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #c7c7c7;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}
.context-action i { font-size: 16px; line-height: 1; }
.context-action:active { background: rgba(255,255,255,.16); transform: scale(.96); }
.overdue-action.has-overdue { color: #ffccad; }
.overdue-action strong { min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: #c57960; color: #1d100c; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0; }
@media (hover: hover) {
    .context-action:hover { background: rgba(255,255,255,.09); color: #fff; }
    .overdue-action.has-overdue:hover { color: #ffccad; }
}
@media (max-width: 900px) {
    .context-bar { border-bottom: 0; }
    .guest-notice, .context-actions span { display: none; }
    .context-action { width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 999px; background: rgba(255,255,255,.09); }
    .context-action i { font-size: 18px; }
    .overdue-action strong { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 3px; border: 2px solid var(--bg); border-radius: 7px; font-size: 9px; }
    #app .context-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 44px 56px; gap: 8px; padding-block: 5px; }
    #app .context-bar .calendar-picker { max-width: 100%; }
    #app .calendar-button { min-height: 44px; }
    #app :is(.floating-menu, .calendar-menu) :is(button, a) { min-height: 44px; }
    #app .context-bar > .context-actions { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; min-width: 0; height: 56px; min-height: 56px; margin: 0; gap: 6px; }
    #app .context-actions .context-action { width: 100%; min-width: 0; height: auto; min-height: 56px; padding: 5px 2px; flex-direction: column; gap: 4px; border-radius: 10px; font-size: 11px; line-height: 1.2; }
    #app .context-actions span { display: inline; }
    #app .context-actions .tool-plan-label { display: block; font-size: 9px; color: var(--muted); }
    #app .overdue-action strong { top: 1px; right: 4px; }
    #app .planner-secondary-actions { position: relative; display: block; min-width: 0; }
    #plannerMoreButton { display: inline-flex; }
    #app .planner-more-menu { position: absolute; z-index: var(--layer-menu); top: calc(100% + 8px); right: 0; display: none; width: min(260px, calc(100vw - 24px)); max-height: calc(100dvh - var(--mobile-header-h, 88px) - var(--mobile-context-h, 120px) - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: rgba(18,18,20,.98); box-shadow: 0 24px 80px rgba(0,0,0,.62); }
    #app .planner-more-menu.is-open { display: block; }
    #app .planner-more-menu .context-action { min-height: 44px; padding: 10px 12px; flex-direction: row; justify-content: flex-start; gap: 10px; background: transparent; font-size: 13px; text-align: left; white-space: normal; }
    #app .planner-more-menu .context-action:hover:not(:disabled) { background: var(--surface-hover); }
    #app .planner-more-menu .week-companion { display: block; }
}
@media (max-width: 900px) and (hover: hover) {
    .context-action:hover { background: rgba(255,255,255,.16); color: #fff; }
}

.shared-home-link { display: inline-flex; align-items: center; font-size:12px; margin-right: .5rem; text-decoration: none; }
.shared-home-link i { margin-right: 6px; font-size: 15px; }
.shared-calendar-label { cursor: default; min-width: 0; max-width: 40%; flex: 0 1 auto; }
.shared-badge { margin-left: auto; min-width: 0; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.shared-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shared-week-grid .task-row.readonly { cursor: default; }
.shared-week-grid .task-row.readonly:hover { background: transparent; }
.shared-week-grid .empty-day-lines { cursor: default; }
.shared-error { min-height: 60vh; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; }
.shared-error > i { font-size: 38px; color: var(--muted); }
.shared-error h2, .shared-error p { margin: 0; }
.shared-error p { color: var(--muted); }
.shared-error .primary-button { margin-top: 8px; text-decoration: none; }

.week-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0 24px;
    padding-top: 24px;
}

.week-error {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    min-height: min(60vh, 520px);
    display: grid;
    place-items: center;
    padding: 24px;
}
.week-error-card {
    width: min(100%, 440px);
    padding: clamp(28px, 5vw, 48px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    text-align: center;
}
.week-error-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 24px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: var(--surface-raised);
    color: var(--accent-bright);
    font-size: 27px;
}
.week-error-card h2 { margin: 0 0 10px; font-size: 24px; letter-spacing: -.035em; }
.week-error-card p { margin: 0; color: var(--muted); line-height: 1.65; }
.week-error-card .primary-button { margin-top: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.week-error-card .primary-button:hover { background: #e8e8eb; }

.home-info {
    width: 100%;
    padding: 120px 0 90px;
    border-top: 1px solid var(--line);
    content-visibility: auto;
    contain-intrinsic-size: 900px;
}
.home-info > * { width: min(1240px, calc(100% - 48px)); margin-left: auto; margin-right: auto; }
.home-info .section-heading { margin-bottom: 58px; }
.home-info .section-heading h2 { margin: 0; font-size: clamp(38px, 6vw, 76px); line-height: .98; letter-spacing: -.06em; }
.home-info .section-copy { max-width: 680px; margin: 28px 0 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.home-info .feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.home-info .feature-card { min-height: 330px; padding: 28px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.home-info .feature-card--wide { grid-column: span 2; }
.home-info .feature-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--surface-raised); color: var(--accent-bright); font-size: 21px; }
.home-info .feature-number { margin: auto 0 22px; color: var(--subtle); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.home-info .feature-card h3 { min-height: 56px; margin: 0 0 12px; display: flex; align-items: flex-end; font-size: 23px; letter-spacing: -.035em; }
.home-info .feature-card > p:last-child { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }

.content-icon { width: 24px; height: 24px; display: block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.home-primary-link { min-height: 44px; padding: 12px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; background: var(--accent-bright); color: #090909; font-size: 13px; font-weight: 700; }
.home-primary-link .content-icon { width: 18px; height: 18px; }
.home-primary-link:hover { background: #d0b4fa; }
.home-secondary-link { color: var(--muted); font-size: 13px; font-weight: 600; }
.home-secondary-link:hover { color: var(--text); }
.home-next-step { margin-top: 32px; }
.home-next-step > p { color: var(--muted); font-size: 13px; line-height: 1.7; }
.home-next-step > p a { color: var(--text); text-decoration: none; }
.home-next-step > div { margin-top: 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
#weekGrid { scroll-margin-top: 24px; }

.day-column {
    min-width: 0;
    min-height: 0;
    padding-bottom: 30px;
}

.day-column:nth-child(-n+5) { grid-row: 1 / span 2; }
.day-column:nth-child(6) { grid-column: 6; grid-row: 1; }
.day-column:nth-child(7) { grid-column: 6; grid-row: 2; }
.day-column.drop-target .day-heading { border-color: var(--accent-bright); }

.day-heading {
    min-height: 44px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 2px solid var(--text);
}
.day-heading h2, .day-heading strong { margin: 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.2; letter-spacing: -.03em; }
.day-heading span { color: var(--muted); font-size: clamp(16px, 1.5vw, 21px); }
.day-heading-actions { display: flex; align-items: center; gap: 8px; }
.day-add-button { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; }
.day-add-button:hover { background: var(--surface-raised); color: var(--text); }
.day-column.today .day-heading { border-color: var(--accent-bright); }
.day-column.today .day-heading h2, .day-column.today .day-heading strong, .day-column.today .day-heading span { color: var(--accent-bright); }

.task-list { margin: 0; padding: 0; list-style: none; }
.task-row, .quick-add {
    min-height: 42px;
    border-bottom: 1px solid var(--line);
}
.task-list.drag-available .quick-add { pointer-events: none; }
.task-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    cursor: grab;
    -webkit-touch-callout: none;
    transition: opacity 150ms ease, transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.task-row:active { cursor: grabbing; }
.task-row:hover { background: linear-gradient(90deg, rgba(255,255,255,.045), transparent); }
.task-row.dragging { opacity: .42; transform: scale(.985); background: var(--surface-raised); box-shadow: 0 10px 28px rgba(0,0,0,.32); }
.touch-drag-ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--layer-drawer);
    margin: 0;
    pointer-events: none;
    opacity: .95;
    background: var(--surface-raised);
    box-shadow: 0 10px 28px rgba(0,0,0,.32);
    transition: none;
    will-change: transform;
}
.touch-drag-active { user-select: none; -webkit-user-select: none; overflow-anchor: none; }
.touch-drag-active .task-row { pointer-events: none; }
.task-indicators { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.task-row.readonly .task-open { cursor: default; }
.recurrence-icon, .reminder-icon { flex: 0 0 auto; width: 15px; color: var(--accent-bright); font-size: 14px; opacity: .9; }
.task-check {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #070707;
    cursor: pointer;
    transition: opacity 120ms ease, background 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.task-check::before { content: ''; position: absolute; inset: 10px; border: 1.5px solid #67676f; border-radius: 50%; background: #111114; opacity: .85; }
.task-check:hover::before { border-color: var(--text); opacity: 1; box-shadow: 0 0 0 2px rgba(190,156,243,.28); }
.task-row:hover .task-check, .task-row:focus-within .task-check, .task-row.completed .task-check,
.custom-list-task:hover .task-check, .custom-list-task:focus-within .task-check, .custom-list-task.completed .task-check { opacity: 1; }
.task-row.completed .task-check::before, .custom-list-task.completed .task-check::before { border-color: var(--text); background: var(--text); opacity: 1; }
.task-check i { z-index: 1; font-size: 13px; font-weight: 700; }
.task-open { min-width: 0; flex: 1; padding: 0; display: flex; align-items: center; gap: 7px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.task-copy { min-width: 0; flex: 1; font-size: 13px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-row.completed .task-copy { color: var(--subtle); text-decoration: line-through; }
.task-time { color: var(--muted); font-size: 10px; font-weight: 700; }
.task-color {
    padding: 3px 7px;
    border-radius: 999px;
}
.drag-handle { color: var(--subtle); opacity: 0; }
.task-subtask-progress { flex: 0 0 auto; color: var(--subtle); font-size: 12px; font-variant-numeric: tabular-nums; }
.task-row:hover .drag-handle { opacity: 1; }

.wobble {
    animation: wobble-horizontal 3s ease-in-out infinite;
    transform: translateZ(0);
}
@keyframes wobble-horizontal {
    5.56% { transform: translateX(.25rem); }
    11.11% { transform: translateX(-.1875rem); }
    16.67% { transform: translateX(.125rem); }
    22.22% { transform: translateX(-.0625rem); }
    27.75% { transform: translateX(.03125rem); }
    33.33%, 100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .wobble { animation: none; }
}

.task-context-menu {
    position: fixed;
    z-index: var(--layer-task-menu);
    min-width: 160px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(18,18,20,.98);
    box-shadow: 0 24px 80px rgba(0,0,0,.62);
    font-size: 13px;
    transform-origin: top left;
}
.task-context-menu:not(.hidden) { animation: popover-in var(--motion-fast) var(--motion-ease-out); }
.task-context-menu button {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.task-context-menu button:hover { background: rgba(255,255,255,.08); }
.task-context-menu button.danger { color: #ff9b9b; }

.quick-add {
    display: flex;
    align-items: center;
    border-radius: 0;
    transition: background-color 140ms ease, border-color 140ms ease;
}
.quick-add:hover,
.quick-add.attention,
.quick-add:focus-within {
    border-bottom-color: var(--accent-bright);
    background: rgba(255,255,255,.025);
}
.quick-add input {
    width: 100%;
    height: 40px;
    padding: 0 4px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 13px;
}
.quick-add input::placeholder { color: var(--muted); }
.task-row[aria-busy="true"], .custom-list-task[aria-busy="true"] { opacity: .65; }
.task-row[aria-busy="true"] .task-open, .custom-list-task[aria-busy="true"] .task-open { cursor: wait; }
.quick-add:hover input::placeholder, .quick-add.attention input::placeholder, .quick-add:focus-within input::placeholder { color: var(--subtle); }

.empty-day-lines {
    height: calc(var(--empty-lines, 4) * 42px);
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 41px, var(--line) 41px, var(--line) 42px);
    cursor: text;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(0,0,0,.72);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--motion-surface) ease, visibility 0s linear var(--motion-surface);
}
.modal-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}
.modal-backdrop.drawer-covered { opacity: 0; }

.task-drawer { position: fixed; inset: 0; z-index: var(--layer-drawer); pointer-events: none; visibility: hidden; transition: visibility 0s linear var(--motion-surface); }
.task-drawer.open { pointer-events: auto; visibility: visible; transition-delay: 0s; }
.drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.72);
    opacity: 0;
    transition: opacity var(--motion-surface) ease;
}
.task-drawer.open .drawer-backdrop { opacity: 1; }
.drawer-panel {
    --dialog-padding-block: max(28px, env(safe-area-inset-top));
    --dialog-padding-inline: max(28px, env(safe-area-inset-left), env(safe-area-inset-right));
    position: absolute;
    top: 0; right: 0;
    width: min(480px, 100%);
    height: 100%;
    padding: var(--dialog-padding-block) var(--dialog-padding-inline) max(28px, env(safe-area-inset-bottom));
    overflow-y: auto;
    border-left: 1px solid var(--line);
    background: var(--overlay-surface);
    opacity: 0;
    transform: translateX(100%);
    transition: opacity var(--motion-surface) var(--motion-ease-out), transform var(--motion-surface) var(--motion-ease-out);
}
.task-drawer.open .drawer-panel { opacity: 1; transform: translateX(0); }
.drawer-header { margin-bottom: 32px; }
.task-form { display: grid; gap: 20px; }
.task-details { min-width: 0; border-top: 1px solid var(--line); }
.task-details > summary { min-height: 66px; padding: 14px 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) 20px; align-items: center; gap: 12px; list-style: none; color: var(--text); cursor: pointer; font-size: 13px; font-weight: 600; }
.task-details > summary::-webkit-details-marker { display: none; }
.task-details-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(190,156,243,.07); color: var(--accent-bright); font-size: 18px; }
.task-details-copy { min-width: 0; }
.task-details > summary small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.4; font-weight: 400; }
.task-details-chevron { color: var(--muted); font-size: 20px; transition: transform 180ms ease; }
.task-details[open] .task-details-chevron { transform: rotate(180deg); }
/*.task-details > summary:hover .task-details-copy { color: var(--accent-bright); }*/
.task-details-body { display: grid; gap: 20px; min-width: 0; padding: 4px 0 18px; }
.task-details .subtasks-section { border: 0; padding: 0; background: transparent; }
#drawerTitle:focus { outline: none; }
.field { min-width: 0; display: grid; gap: 8px; }
.field > span { color: var(--muted); font-size: 12px; font-weight: 600; }
.field input, .field textarea, .field select {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    outline: 0;
    background: var(--surface);
    color: var(--text);
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent-bright); box-shadow: 0 0 0 3px rgba(190,156,243,.11); }
.field input[type="date"], .field input[type="time"] { display: block; min-width: 0; max-width: 100%; min-height: 46px; color-scheme: dark; text-align: left; }
.field input[type="date"]::-webkit-date-and-time-value,
.field input[type="time"]::-webkit-date-and-time-value { min-height: 1.35em; text-align: left; }
.task-form .field:has(:disabled) > span { color: var(--subtle); }
.task-form .field input:disabled, .task-form .field select:disabled, .task-form .field textarea:disabled {
    border-color: rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
    color: var(--subtle);
    opacity: .62;
    cursor: not-allowed;
}
.field--large input { min-height: 58px; font-size: 18px; font-weight: 600; }
.field-hint { color: var(--muted); font-size: 12px; line-height: 1.5; }
.field-hint a { color: var(--accent-bright); text-decoration: none; }
.form-error { margin: 0; color: var(--danger); font-size: 12px; line-height: 1.5; }
.field [aria-invalid="true"] { border-color: var(--danger); }
.color-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.color-field legend { margin-bottom: 10px; padding: 0; color: var(--muted); font-size: 11px; font-weight: 600; }
.color-field > input[type="hidden"] { display: none; }
.task-color-options { display: flex; flex-wrap: wrap; gap: 10px; }
.task-color-clear { width: max-content; min-height: 30px; margin-top: 2px; padding: 0; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--subtle); cursor: pointer; font-size: 10px; visibility: hidden; }
.task-color-clear.visible { visibility: visible; }
.task-color-clear:hover { color: var(--text); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 8px; }
.form-grid--location { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid--location > .field { min-width: 0; }
.form-grid--location > .field-hint { grid-column: 1 / -1; }
.subtasks-section { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); }
#subtaskLoadMessage:empty { display: none; }
.subtasks-heading > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field-label { color: var(--muted); font-size: 11px; font-weight: 600; }
.subtasks-heading small { color: var(--subtle); font-size: 10px; }
.subtask-list { margin: 0; padding: 0; display: grid; gap: 6px; list-style: none; }
.subtask-item { min-height: 38px; display: grid; grid-template-columns: 20px 28px minmax(0,1fr) 30px; align-items: center; gap: 5px; }
.subtask-item.dragging { opacity: .45; }
.subtask-item.drop-target { box-shadow: inset 0 2px var(--accent-bright); }
.subtask-order { display: flex; align-items: center; }
.subtask-drag { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--subtle); }
.subtask-drag { width: 20px; height: 32px; cursor: grab; touch-action: auto; }
.subtask-drag:active { cursor: grabbing; }
.subtask-drag:hover { background: var(--surface); color: var(--text); }
.subtask-drag:disabled { opacity: .3; cursor: default; }
.subtask-completed > summary { padding: 8px 0; color: var(--subtle); font-size: 12px; cursor: pointer; }
.subtask-completed[open] > summary { margin-bottom: 6px; }
.subtask-item.completed .subtask-copy { color: var(--subtle); text-decoration: line-through; }
.subtask-check, .subtask-delete, .subtask-add button { border: 0; cursor: pointer; }
.subtask-check { position: relative; width: 22px; height: 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: #08080a; line-height: 1; }
.subtask-check::before { content: ''; position: absolute; width: 22px; height: 22px; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: 50%; pointer-events: none; }
.subtask-check i { position: relative; }
.subtask-check i, .subtask-check i::before { display: block; line-height: 1; }
.subtask-item.completed .subtask-check::before { border-color: var(--success); background: var(--success); }
.subtask-copy { width: 100%; min-width: 0; height: 34px; padding: 4px 6px; border: 1px solid transparent; border-radius: 7px; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; }
.subtask-copy:hover:enabled { border-color: var(--line); }
.subtask-copy:focus { border-color: var(--accent-bright); background: var(--surface); }
.subtask-copy[aria-invalid="true"] { border-color: var(--danger); }
.subtask-copy:disabled { opacity: 1; }
.subtask-delete { width: 30px; height: 30px; border-radius: 8px; background: transparent; color: var(--subtle); }
.subtask-delete:hover { background: rgba(255,107,107,.12); color: var(--danger); }
.subtask-add { display: grid; grid-template-columns: 1fr 38px; gap: 8px; }
.subtask-add input { min-width: 0; height: 40px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: var(--surface); color: var(--text); }
.subtask-add input:focus { border-color: var(--accent-bright); }
.subtask-add button { border-radius: 10px; background: var(--accent); color: #08080a; font-size: 18px; }
.drawer-footer { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 12px max(12px, env(safe-area-inset-bottom)); border-radius: 14px; border: 1px solid var(--line); background: var(--overlay-surface); }
.drawer-other-actions { display: flex; align-items: center; gap: 5px; }
.drawer-primary-actions { gap: 12px; }
.drawer-other-actions .secondary-button { display: inline-flex; align-items: center; gap: 6px; background: transparent; }
.primary-button, .secondary-button, .danger-button {
    min-height: 44px;
    padding: 0 17px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 650;
    font-size: 13px;
}
.primary-button { background: var(--text); color: #050505; }
.secondary-button { background: var(--surface-raised); color: var(--text); }
.danger-button { display: inline-flex; align-items: center; gap: 7px; background: transparent; color: var(--danger); }

.search-dialog {
    position: fixed;
    inset: 50% auto auto 50%;
    z-index: var(--layer-modal);
    margin: 0;
    width: min(680px, calc(100% - 32px));
    max-height: min(680px, calc(100vh - 80px));
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--overlay-surface);
    color: var(--text);
    box-shadow: 0 30px 100px rgba(0,0,0,.72);
    transform: translate(-50%, -50%);
}
.search-dialog::backdrop { display: none; }
.search-dialog { max-height: min(680px, calc(100dvh - 80px)); }
.search-shell { margin: 0; max-height: inherit; display: flex; flex-direction: column; }
.search-field, .search-filters { flex-shrink: 0; }
.search-results { min-height: 0; }
.search-field { height: 64px; padding: 0 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.search-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 18px; }
.key-hint { flex: 0 0 auto; padding: 5px 7px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 9px; cursor: pointer; }
.key-hint:hover { border-color: var(--line-strong); background: var(--surface-hover); color: var(--text); }
.key-hint i { font-size: 13px; }
.search-filters { padding: 10px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; border-bottom: 1px solid var(--line); }
.search-filters select { min-width: 0; height: 36px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; outline: 0; background: var(--surface); color: var(--muted); font-size: 11px; }
.search-filters select:focus { border-color: var(--accent-bright); color: var(--text); }
.search-results { max-height: 520px; padding: 10px; overflow-y: auto; }
.search-clear { display: block; margin: 0 auto 10px; }
.search-result { width: 100%; padding: 12px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 11px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.search-result:hover { background: var(--surface-hover); }
.search-result-main { min-width: 0; display: grid; gap: 5px; }
.search-result-copy { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result small { color: var(--muted); font-size: 10px; }
.search-result > i { margin-left: auto; color: var(--subtle); font-size: 18px; }
.search-result-badges { display: flex; gap: 6px; }
.search-result-badges span { padding: 3px 6px; border-radius: 999px; background: var(--surface); color: var(--subtle); font-size: 9px; }
.search-result-badges .overdue { display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(255,107,107,.32); background: rgba(255,107,107,.14); color: #ff9b91; font-weight: 600; }
.empty-message { margin: 0; padding: 22.5px 0; color: var(--muted); text-align: center; font-size: 13px; }

.overdue-dialog { position: fixed; inset: 50% auto auto 50%; z-index: var(--layer-overdue); margin: 0; width: min(620px, calc(100% - 32px)); max-height: min(760px, calc(100vh - 40px)); padding: 0; overflow: hidden; transform: translate(-50%,-50%); border: 1px solid var(--line); border-radius: 20px; background: var(--overlay-surface); color: var(--text); box-shadow: var(--shadow-dialog); }
.overdue-dialog::backdrop { background: rgba(0,0,0,.72); }
.overdue-dialog { max-height: min(760px, calc(100dvh - 40px)); }
.overdue-shell { display: flex; flex-direction: column; max-height: inherit; }
.overdue-header { padding: 22px; border-bottom: 1px solid var(--line); }
.rollover-setting { margin: 16px 22px 4px; padding: 15px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.rollover-setting span { display: grid; gap: 5px; }
.rollover-setting strong { font-size: 13px; }
.rollover-setting small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.rollover-setting input { width: 19px; height: 19px; accent-color: var(--accent-bright); }
.overdue-list { padding: 12px 22px; overflow-y: auto; }
.overdue-item { padding: 13px 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); }
.overdue-item-copy { min-width: 0; display: grid; gap: 5px; }
.overdue-item-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.overdue-item-copy small { color: var(--muted); font-size: 10px; }
.overdue-item button { min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--text); font-size: 10px; cursor: pointer; }
.overdue-item button:hover { border-color: var(--accent-bright); }
.overdue-footer { padding: 16px 22px 22px; display: flex; justify-content: flex-end; }
.overdue-scroll { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.overdue-scroll .overdue-list { overflow: visible; }
.overdue-section-title { margin: 18px 22px 4px; font-size: 14px; }
.missed-recurrences { border-top: 1px solid var(--line); padding-bottom: 18px; }
.missed-recurrences > .field-hint { margin: 10px 22px; }
.missed-pagination { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 22px 0; }
.missed-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.overdue-item button:disabled { opacity: .5; cursor: default; }
@media (max-width: 480px) {
    .missed-recurrences .overdue-item { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .missed-actions { justify-content: flex-start; }
}

.share-dialog { position: fixed; inset: 50% auto auto 50%; z-index: var(--layer-share); width: min(720px, calc(100% - 32px)); max-height: min(820px, calc(100vh - 40px)); margin: 0; padding: 0; overflow: hidden; transform: translate(-50%, -50%); border: 1px solid var(--line); border-radius: 22px; background: var(--overlay-surface); color: var(--text); box-shadow: var(--shadow-dialog); }
.share-dialog::backdrop { background: rgba(0,0,0,.72); }
.share-dialog { max-height: min(820px, calc(100dvh - 40px)); }
.share-link-fallback { width: 100%; min-width: 0; min-height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 16px; }
.share-dialog-shell { max-height: inherit; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.share-dialog-header { padding: 24px 26px; border-bottom: 1px solid var(--line); }
.share-dialog-loading { min-height: 260px; grid-column: 1; grid-row: 2; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 12px; }
.share-dialog-content { min-height: 0; grid-column: 1; grid-row: 2; padding: 22px 26px 26px; display: grid; gap: 26px; overflow-y: auto; }
.share-dialog-loading.hidden { display: flex !important; visibility: hidden; pointer-events: none; }
.share-dialog-content.hidden { display: grid !important; visibility: hidden; pointer-events: none; }
.share-section { display: grid; gap: 16px; }
.share-section + .share-section { padding-top: 24px; border-top: 1px solid var(--line); }
.share-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.share-section-heading h3 { margin: 4px 0 0; font-size: 16px; }
.share-section-heading > small { max-width: 255px; color: var(--subtle); font-size: 9px; line-height: 1.45; text-align: right; }
.share-section-kicker { color: var(--subtle); font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.share-channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.share-channel { min-height: 70px; padding: 0 14px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--text); cursor: pointer; font-size: 12px; font-weight: 700; }
.share-channel:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.share-channel i { font-size: 21px; }
.share-channel--whatsapp i { color: #52d66f; }
.share-email-row { display: grid; gap: 8px; }
.share-email-row > label { color: var(--muted); font-size: 10px; font-weight: 650; }
.share-email-row > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.share-email-row input { min-width: 0; height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; outline: 0; background: var(--surface); color: var(--text); }
.share-email-row input:focus { border-color: var(--accent-bright); box-shadow: 0 0 0 3px rgba(190,156,243,.11); }
.share-email-row button { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 11px; background: var(--accent-bright); color: #100b18; cursor: pointer; font-size: 12px; font-weight: 700; }
.share-email-row button:disabled { cursor: wait; opacity: .65; }
.share-export-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.share-export-grid button { min-height: 82px; padding: 13px; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 13px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.share-export-grid button:hover { border-color: var(--accent-bright); background: rgba(190,156,243,.06); }
.share-export-grid button > i { color: var(--accent-bright); font-size: 24px; }
.share-export-grid button > span { min-width: 0; display: grid; gap: 4px; }
.share-export-grid strong { font-size: 12px; }
.share-export-grid small { color: var(--subtle); font-size: 9px; line-height: 1.35; }

.custom-lists-dialog { position: fixed; inset: 50% auto auto 50%; z-index: var(--layer-modal); width: min(900px, calc(100% - 32px)); max-width: none; height: min(680px, calc(100vh - 40px)); margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 22px; overflow: visible; transform: translate(-50%, -50%); background: var(--overlay-surface); color: var(--text); box-shadow: var(--shadow-dialog); }
.custom-lists-dialog::backdrop { background: rgba(0,0,0,.72); }
.custom-lists-dialog { height: min(680px, calc(100dvh - 40px)); }
.custom-lists-shell { height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; overscroll-behavior: contain; border-radius: inherit; }
.custom-lists-shell, .custom-lists-layout { min-width: 0; }
.custom-lists-header { padding: 24px 26px; border-bottom: 1px solid var(--line); }
.custom-lists-layout { min-height: 0; display: grid; grid-template-columns: 260px minmax(0,1fr); }
.custom-lists-sidebar { min-height: 0; padding: 18px; display: flex; flex-direction: column; gap: 14px; border-right: 1px solid var(--line); background: rgba(255,255,255,.015); }
.custom-list-options { min-height: 0; display: grid; align-content: start; gap: 6px; overflow-y: auto; }
.custom-list-option { width: 100%; min-height: 42px; padding: 0 12px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; }
.custom-list-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-list-option small { color: var(--subtle); }
.custom-list-option:hover, .custom-list-option.active { background: var(--surface-raised); color: var(--text); }
.custom-list-form { margin-top: auto; display: grid; grid-template-columns: minmax(0,1fr) 40px; gap: 7px; }
.custom-list-input-field { min-width: 0; display: grid; gap: 8px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.custom-list-input-field input { width: 100%; font: inherit; font-size: 14px; }
.custom-list-form button, .custom-list-task-form button { align-self: end; height: 42px; }
.custom-list-form input, .custom-list-task-form input { min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: #09090b; color: var(--text); }
.custom-list-form input:focus, .custom-list-task-form input:focus { border-color: var(--accent-bright); }
.custom-list-form button { border: 0; border-radius: 10px; background: var(--accent-bright); color: #08080a; cursor: pointer; font-size: 18px; }
.custom-list-content { min-width: 0; min-height: 0; padding: 24px; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 16px; }
.custom-list-content.is-selecting { grid-template-rows: auto auto minmax(0,1fr) auto; }
.custom-list-content .task-selection-toolbar { position: static; margin: 0; }
.custom-list-content-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.custom-list-content-header > div { min-width: 0; }
.custom-list-content-header > div:first-child { flex: 1 1 160px; }
.custom-list-content-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.task-selection-trigger { min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; white-space: nowrap; }
.task-selection-trigger:hover:not(:disabled), .task-selection-trigger[aria-pressed="true"] { border-color: var(--accent-action); color: var(--accent-bright); background: rgba(190,156,243,.06); }
.task-selection-trigger:disabled { opacity: .4; cursor: default; }
.custom-list-content-header small { color: var(--subtle); font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.custom-list-content-header h3 { margin: 5px 0 0; overflow-wrap: anywhere; font-size: 21px; }
.custom-list-delete { min-height: 36px; flex: 0 0 auto; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; background: rgba(255,107,107,.1); color: var(--danger); cursor: pointer; font-size: 11px; }
.custom-list-tasks { min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.custom-list-task { min-height: 48px; display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center; gap: 4px; border-bottom: 1px solid var(--line); }
.custom-list-task.completed .custom-list-task-copy { color: var(--subtle); text-decoration: line-through; }
.custom-list-task-copy { flex: 1; max-width: 100%; min-width: 0; overflow: hidden; overflow-wrap: anywhere; white-space: normal; font-size: 13px; line-height: 1.5; }
.custom-list-task-meta { color: var(--subtle); font-size: 9px; }
.custom-list-task-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.custom-list-task-form button { min-height: 42px; padding: 0 17px; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 10px; background: var(--text); color: #08080a; cursor: pointer; font-weight: 700; }

.guest-auth-dialog {
    position: fixed;
    inset: auto 22px 22px auto;
    z-index: var(--layer-auth);
    width: min(390px, calc(100% - 32px));
    margin: 0;
    padding: 28px;
    max-height: calc(100vh - 44px);
    max-height: calc(100dvh - 44px - env(safe-area-inset-bottom));
    overflow-y: auto;
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    background: var(--overlay-surface);
    color: var(--text);
    box-shadow: 0 24px 80px rgba(0,0,0,.68);
}
.guest-auth-dialog::backdrop { background: rgba(0,0,0,.72); animation: dialog-backdrop-in var(--motion-surface) ease-out; }
.guest-auth-dialog[open] { animation: guest-auth-in var(--motion-surface) var(--motion-ease-out); }
.guest-auth-dialog h2 { margin: 10px 48px 10px 0; font-size: 25px; line-height: 1.08; letter-spacing: -.035em; }
.guest-auth-dialog > p:not(.eyebrow) { margin: 0 0 22px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.guest-auth-dialog > small { display: block; margin-top: 18px; color: var(--subtle); font-size: 9px; line-height: 1.5; text-align: center; }
.guest-auth-dialog a { color: inherit; }
.guest-auth-mark { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 13px; background: var(--accent); color: #070707; font-size: 21px; }
.guest-auth-close { position: absolute; top: 16px; right: 16px; }
.guest-google-button { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; background: #fff; color: #111; cursor: pointer; font-weight: 700; }
.guest-email-link { min-height: 42px; display: flex; align-items: center; justify-content: center; margin-top: 7px; border-radius: 999px; color: var(--muted) !important; font-size: 12px; font-weight: 650; }
.guest-email-link:hover { background: var(--surface-hover); color: var(--text) !important; }
@keyframes guest-auth-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes dialog-center-in {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.985); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes mobile-sheet-in {
    from { opacity: 0; transform: translate3d(0, 100%, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes dialog-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.search-dialog[open], .overdue-dialog[open], .share-dialog[open], .custom-lists-dialog[open] {
    animation: dialog-center-in var(--motion-surface) var(--motion-ease-out);
}
.overdue-dialog[open]::backdrop, .share-dialog[open]::backdrop, .custom-lists-dialog[open]::backdrop { animation: dialog-backdrop-in var(--motion-surface) ease-out; }

.toast-region { position: fixed; inset: auto 20px 20px auto; z-index: var(--layer-toast); width: max-content; max-width: calc(100vw - 40px); height: max-content; max-height: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; overflow: visible; border: 0; background: transparent; color: var(--text); pointer-events: none; }
.toast-region[popover]:not(:popover-open) { display: none; }
.toast-region::backdrop { background: transparent; pointer-events: none; }
.toast-region .toast { max-width: 100%; pointer-events: auto; }
.toast { min-width: 250px; max-width: 100%; overflow-wrap: anywhere; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); box-shadow: 0 18px 50px rgba(0,0,0,.45); font-size: 13px; animation: toast-in 160ms ease; }
.toast.error { border-color: rgba(255,107,107,.45); color: #ffb0b0; }
.toast-action { margin-left: 12px; padding: 4px 0; border: 0; background: transparent; color: var(--accent-bright); font: inherit; font-weight: 700; cursor: pointer; }
.toast-action:hover { text-decoration: underline; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.loading-screen { position: fixed; inset: 0; z-index: var(--layer-loading); display: flex; align-items: center; justify-content: center; gap: 12px; background: #000; color: var(--muted); font-size: 12px; transition: opacity 180ms ease; }
.loading-screen.done { opacity: 0; pointer-events: none; }
.loader { width: 17px; height: 17px; border: 2px solid var(--line); border-top-color: var(--text); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
    .week-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; }
    .day-column { min-height: 300px; }
    .day-column:nth-child(-n+5), .day-column:nth-child(6), .day-column:nth-child(7) { grid-column: auto; grid-row: auto; }
}

@media (min-width: 701px) and (max-width: 900px) {
    .app-shell { padding: 20px; }
    .app-header { min-height: 76px; gap: 14px; }
    .header-title-group { min-width: 0; }
    .header-title-group .month-title { overflow: hidden; font-size: 31px; text-overflow: ellipsis; white-space: nowrap; }
    .header-actions { flex: 0 0 auto; gap: 6px; }
    .context-bar { gap: 10px; }
    .week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; padding-top: 18px; }
    .day-column { min-height: 320px; }
}

@media (max-width: 900px) {
    .home-info .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    :root {
        --header-h: auto;
        --mobile-header-h: calc(64px + env(safe-area-inset-top));
        --mobile-context-h: 104px;
    }
    #app { --mobile-header-h: calc(146px + env(safe-area-inset-top)); --mobile-context-h: 120px; }
    .app-shell { padding: 0 max(12px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
    .app-header {
        position: sticky;
        top: 0;
        z-index: 30;
        height: var(--mobile-header-h);
        min-height: var(--mobile-header-h);
        padding: calc(12px + env(safe-area-inset-top)) 0 12px;
        gap: 8px;
        align-items: center;
        background: #000;
        backdrop-filter: none;
    }
    #app .app-header { padding-top: calc(30px + env(safe-area-inset-top)); padding-bottom: 12px; gap: 16px; flex-direction: column; align-items: stretch; justify-content: space-between; }
    .eyebrow { display: none; }
    .header-title-group .planner-tagline { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 0; display: block; margin: 0; font-size: 11px; }
    .header-title-group { min-width: 0; flex: 1 1 auto; }
    .header-title-group h1:not(.eyebrow), .header-title-group .month-title {
        overflow: hidden;
        font-size: 22px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .header-title-group .month-title { max-width: 100%; }
    .header-actions { flex: 0 0 auto; }
    #app .header-title-group { flex: 0 0 auto; min-height: 44px; padding-right: 106px; display: flex; align-items: center; }
    #app .header-title-group .month-title { flex: 0 1 auto; min-width: 0; }
    #app .header-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; gap: 6px; }
    #app .header-actions > .icon-button, #app .header-actions > .notification-widget { flex: 1 1 0; min-width: 0; }
    #app .header-actions > .icon-button, #app .header-actions .notification-bell { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: auto; height: 44px; min-height: 44px; padding: 0 5px; border-radius: 10px; font-size: 17px; }
    #app .header-actions .toolbar-label { display: inline; font-size: 11px; }
    #app .header-actions .notification-bell { width: 100%; }
    #app .nav-cluster { position: absolute; top: calc(30px + env(safe-area-inset-top)); right: 0; gap: 6px; }
    #app .nav-cluster .icon-button { width: 44px; height: 44px; }
    #app .app-header .floating-menu { max-height: calc(100dvh - var(--mobile-header-h) - 16px); }
    #app .notification-panel { top: calc(var(--mobile-header-h) + 8px); max-height: calc(100dvh - var(--mobile-header-h) - max(16px, env(safe-area-inset-bottom))); }
    .floating-menu { top: 100%; }
    .context-bar {
        position: sticky;
        top: calc(var(--mobile-header-h));
        z-index: 25;
        height: var(--mobile-context-h);
        min-height: var(--mobile-context-h);
        gap: 8px;
        flex-wrap: wrap;
        align-content: center;
        background: #000;
        backdrop-filter: none;
    }
    .week-range { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
    .calendar-picker, .shared-calendar-label { max-width: 50%; }
    .shared-page .shared-home-link { width: 38px; height: 38px; margin: 0; justify-content: center; border-radius: 50%; background: var(--surface-raised); font-size: 0; }
    .shared-page .shared-home-link i { font-size: 20px; }
    .shared-page .shared-home-link span { display: none; }
    .shared-page .shared-home-link i { margin: 0; }
    .shared-badge { margin-left: auto; }
    .context-actions { flex: 1 1 100%; margin-left: 0; justify-content: flex-end; gap: 6px; }
    .week-grid { display: block; padding-top: 10px; }
    .week-error { min-height: calc(100dvh - 220px); padding: 24px 0; }
    .week-error-card { padding: 30px 24px; }
    .day-column { min-height: auto; padding: 10px 0 26px; }
    /* Day headings scroll with their rows; pinning them can cover short days. */
    .day-heading h2, .day-heading strong, .day-heading span { font-size: 18px; }
    .task-row, .quick-add { min-height: 46px; }
    .task-row { -webkit-user-select: none; user-select: none; cursor: default; }
    .task-row:active { cursor: default; }
    .task-check { width: 40px; height: 40px; }
    .task-copy { font-size: 14px; }
    .drag-handle { width: 44px; height: 44px; display: grid; place-items: center; margin-right: -6px; opacity: .72; font-size: 18px; touch-action: none; cursor: grab; }
    .empty-day-lines { height: calc(var(--mobile-empty-lines, 2) * 46px); background-size: 100% 46px; }
    .drawer-panel { top: 5vh; top: 5dvh; width: 100%; height: 95vh; height: 95dvh; display: flex; flex-direction: column; padding: 0; overflow: hidden; border-left: 0; border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; transform: translate3d(0, 100%, 0); }
    .task-drawer.open .drawer-panel { transform: translate3d(0, 0, 0); }
    .drawer-header { flex: 0 0 auto; margin: 0; padding: 20px 18px; border-bottom: 1px solid var(--line); background: var(--overlay-surface); }
    .task-form { flex: 1 1 auto; min-height: 0; padding: 20px 18px max(22px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
    .drawer-footer { padding: 12px 18px max(12px, env(safe-area-inset-bottom)); flex-wrap: nowrap; gap: 12px; }
    .drawer-other-actions { flex: 0 0 auto; }
    .drawer-primary-actions { flex: 1 1 auto; min-width: 0; gap: 10px; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid--location { grid-template-columns: minmax(0, 1fr); }
    .drawer-primary-actions > button { flex: 1 1 0; min-width: 0; padding-inline: 8px; }
    .drawer-other-actions .danger-button { padding-inline: 8px; }
    .danger-button { justify-content: center; }
    .search-dialog { inset: 0; width: 100%; max-width: none; max-height: 100vh; max-height: 100dvh; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0; transform: none; overflow: hidden; }
    .search-dialog[open] { animation-name: mobile-sheet-in; }
    .search-shell { height: 100%; min-height: 0; display: flex; flex-direction: column; }
    .search-field, .search-filters { flex: 0 0 auto; }
    .search-field { height: auto; min-height: 64px; padding: max(10px, env(safe-area-inset-top)) 18px 10px; }
    .search-field .key-hint { width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; justify-content: center; }
    .search-field .key-hint span { display: none; }
    .search-field .key-hint i { font-size: 18px; }
    .search-results { padding-bottom: max(10px, env(safe-area-inset-bottom)); flex: 1 1 auto; min-height: 0; max-height: none; }
    .search-filters { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .search-filters select { height: 44px; padding-right: 28px !important; background-position: right 9px center !important; }
    .overdue-dialog {
        inset: auto 0 0;
        width: 100%;
        max-width: none;
        max-height: 92vh;
        max-height: 92dvh;
        border-width: 1px 0 0;
        border-radius: 22px 22px 0 0;
        transform: none;
    }
    .overdue-dialog[open] { animation-name: mobile-sheet-in; }
    .overdue-item button { min-height: 44px; padding-inline: 12px; font-size: 12px; }
    .custom-lists-dialog { inset: auto 0 0; width: 100%; height: 95vh; height: 95dvh; max-height: none; margin: 0; border-width: 1px 0 0; border-radius: 22px 22px 0 0; transform: none; }
    .custom-lists-dialog[open] { animation-name: mobile-sheet-in; }
    .overdue-header, .custom-lists-header, .share-dialog-header { padding: 20px 18px; }
    .custom-lists-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
    .custom-lists-sidebar { padding: 12px 16px; gap: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
    .custom-list-options { display: flex; overflow-x: auto; max-height: 88px; }
    .custom-list-option { width: auto; min-width: 0; max-width: 240px; flex-shrink: 0; }
    .custom-list-form { grid-template-columns: minmax(0,1fr) 44px; }
    .custom-list-form button, .custom-list-task-form button { height: 44px; min-width: 44px; }
    .custom-list-input-field input { font-size: 16px; }
    .custom-list-option, .custom-list-form input, .custom-list-task-form input { min-height: 44px; }
    .custom-list-delete { min-height: 44px; }
    .task-selection-trigger { min-height: 44px; }
    .custom-list-content-actions { gap: 8px; }
    .custom-list-form { margin-top: 0; }
    .custom-list-content { padding: 18px 16px max(18px, env(safe-area-inset-bottom)); }
    .share-dialog { inset: auto 0 0; width: 100%; max-width: none; max-height: 92vh; max-height: 92dvh; border-width: 1px 0 0; border-radius: 22px 22px 0 0; transform: none; }
    .share-dialog[open] { animation-name: mobile-sheet-in; }
    .share-dialog-content { padding: 20px 18px max(24px, env(safe-area-inset-bottom)); gap: 22px; }
    .share-section-heading { align-items: start; }
    .share-section-heading > small { display: none; }
    .share-channel-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .share-channel { min-height: 62px; padding: 0 8px; flex-direction: column; gap: 4px; font-size: 10px; }
    .share-email-row > div { grid-template-columns: minmax(0,1fr) 48px; }
    .share-email-row button { padding: 0; justify-content: center; }
    .share-email-row button span { display: none; }
    .share-export-grid { grid-template-columns: 1fr; }
    .share-export-grid button { min-height: 66px; }
    .toast-region { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); left: auto; width: max-content; max-width: calc(100vw - 28px); justify-items: end; }
    .toast-region .toast { min-width: 0; max-width: 100%; padding: 11px 14px; }
    .guest-auth-dialog { inset: auto 20px max(20px, env(safe-area-inset-bottom)) 20px; width: auto; padding: 24px; }
    .guest-auth-dialog[open] { animation-name: mobile-sheet-in; }
    .task-color-swatch { width: 44px; height: 44px; flex-basis: 44px; }
    .quick-add input, .field input, .field textarea, .field select, .subtask-add input,
    .search-field input, .search-filters select, .share-email-row input,
    .custom-list-form input, .custom-list-task-form input { font-size: 16px; }
    .field input[type="date"]::-webkit-date-and-time-value,
    .field input[type="time"]::-webkit-date-and-time-value { min-width: 0; text-align: left; }
    .home-info { width: 100%; padding: 78px 0 64px; }
    .home-info > * { width: calc(100% - 24px); }
    .home-info .section-heading { margin-bottom: 38px; }
    .home-info .section-heading h2 { font-size: clamp(40px, 13vw, 58px); }
    .home-info .section-copy { margin-top: 24px; font-size: 15px; }
    .home-info .feature-grid { grid-template-columns: 1fr; }
    .home-info .feature-card--wide { grid-column: auto; }
    .home-info .feature-card { min-height: 280px; }
    .home-info .feature-card h3 { min-height: 0; }
}

.mobile-keyboard-open .drawer-panel {
        top: calc(var(--mobile-visual-top) + 8px);
        height: calc(var(--mobile-visual-height) - 8px);
}
.mobile-keyboard-open body > .toast-region { bottom: calc(var(--mobile-visual-bottom) + 12px); }
.mobile-keyboard-open #weekSelectionToolbar { bottom: calc(var(--mobile-visual-bottom) + 12px); }
.mobile-keyboard-open .search-dialog,
.mobile-keyboard-open .custom-lists-dialog,
.mobile-keyboard-open .share-dialog,
.mobile-keyboard-open .calendar-manager-dialog {
        inset: var(--mobile-visual-top) 0 auto;
        width: 100%;
        height: var(--mobile-visual-height);
        max-height: var(--mobile-visual-height);
        border-radius: 0;
        transform: none;
}
.mobile-keyboard-open .share-dialog-shell,
.mobile-keyboard-open .calendar-manager-shell { height: 100%; min-height: 0; }

@media (max-width: 900px), (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), textarea, select { font-size: 16px; }
    .field select, .search-filters select { font-size: 16px; }
    .task-form, .search-results, .custom-list-tasks, .share-dialog-content, .overdue-list { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .drawer-header, .task-form, .drawer-footer, .share-dialog-content, .overdue-header, .overdue-footer, .custom-lists-header { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
    .subtask-item { grid-template-columns: 36px 44px minmax(0, 1fr) 44px; }
    .subtask-drag { width: 36px; height: 44px; }
    .subtask-copy { min-height: 44px; font-size: 16px; }
    .subtask-check, .subtask-delete { width: 44px; height: 44px; }
    .subtask-add { grid-template-columns: minmax(0, 1fr) 44px; }
    .subtask-add input, .subtask-add button { min-height: 44px; }
}

@media (max-width: 360px) {
    .drawer-footer { gap: 6px; }
    .drawer-other-actions { gap: 2px; }
    .drawer-other-actions .secondary-button { width: 36px; min-width: 36px; padding: 0; justify-content: center; font-size: 0; }
    .drawer-other-actions .secondary-button i { font-size: 18px; }
    .drawer-other-actions .danger-button { gap: 3px; }
    .drawer-primary-actions { gap: 6px; }
    .drawer-primary-actions > button { font-size: 12px; }
}

.template-import-choice { display: grid; gap: 10px; margin-top: 18px; color: var(--muted); font-size: 13px; }
.template-import-choice select { width: 100%; min-width: 0; min-height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.template-import-choice-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; }
.template-import-add { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--accent-bright); font: inherit; font-size: 24px; cursor: pointer; }
.template-import-add:hover { border-color: var(--accent-bright); }
.template-import-create { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.template-import-create[hidden] { display: none; }
.template-import-create input { width: 100%; min-width: 0; min-height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.template-import-create button { min-height: 44px; justify-self: start; padding: 0 17px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; }
.confirm-dialog-copy .template-import-create p { margin: 0; }
.template-import-create a { color: var(--accent-bright); text-decoration: underline; }
.confirm-dialog-copy .template-import-error { color: #ff9a9a; }
.template-import-error:empty { display: none; }
.template-import-choice :is(button, input, select):focus{ border-color: var(--accent-bright); box-shadow: 0 0 0 3px rgba(190, 156, 243, .11); }
@media (max-width: 700px), (any-pointer: coarse) {
    .template-import-create input, .template-import-choice select { font-size: 16px; }
}
.confirm-dialog-copy .template-import-name { margin-bottom: 10px; color: var(--text); font-weight: 600; }
.print-header { display: none; }

@media print {
    @page { size: A4 landscape; margin: 10mm; }
    :root { color-scheme: light; --bg: #fff; --text: #000; --muted: #555; --line: #bbb; }
    html, body { width: 100%; min-height: 0; background: #fff; }
    body { position: static !important; overflow: visible !important; padding: 0 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    body > :not(.app-shell) { display: none !important; }
    .app-shell > :not(.print-header, .week-grid, .app-header, .context-bar) { display: none !important; }
    dialog, [popover], .toast-region, .task-drawer, .notification-panel, .loading-screen { display: none !important; }
    dialog::backdrop, [popover]::backdrop { display: none !important; background: transparent !important; }
    .app-shell { min-height: 0; padding: 0; display: block; }
    body:not(.shared-page) .app-header, body:not(.shared-page) .context-bar { display: none !important; }
    body:not(.shared-page) .print-header { display: block; margin: 0 0 7mm; padding-bottom: 5mm; border-bottom: 1px solid #bbb; color: #111; }
    .print-header-top { display: flex; justify-content: space-between; color: #666; font-size: 8pt; font-weight: 700; letter-spacing: .12em; }
    .print-header :is(h1, h2) { margin: 4mm 0 2mm; font-size: 24pt; line-height: 1.1; }
    .print-header p { display: flex; gap: 6mm; margin: 0; color: #555; font-size: 9pt; }
    .app-header { min-height: 58px; align-items: flex-start; }
    .header-title-group h1:not(.eyebrow), .header-title-group .month-title { font-size: 28px; }
    .context-bar { min-height: 38px; margin-bottom: 8px; border-color: #999; }
    .calendar-button, .shared-calendar-label { min-height: 0; padding: 0; background: transparent !important; cursor: default; font-size: 12px; }
    .calendar-button > i { display: none !important; }
    .calendar-dot { width: 8px; height: 8px; border: 1px solid #555; background: #555 !important; }
    .header-actions, .context-actions, .guest-notice, .shared-badge, .quick-add, .task-check, .drag-handle, .day-add-button, .task-context-menu, .home-info, .example-task { display: none !important; }
    .week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto; gap: 0 10px; padding-top: 8px; }
    .day-column { min-height: 0; padding-bottom: 12px; break-inside: auto; }
    .day-column:nth-child(n) { grid-column: auto; grid-row: auto; min-width: 0; }
    .day-heading { min-height: 34px; border-color: #111; }
    .day-column.today .day-heading { border-color: #111 !important; }
    .day-heading h2, .day-heading strong, .day-heading span { color: #111 !important; font-size: 13px; }
    .task-row { min-height: 30px; padding: 4px 1px; gap: 5px; color: #111; cursor: default; break-inside: avoid; }
    .task-copy { font-size: 10px; }
    .task-open { flex-wrap: wrap; }
    .task-open .task-copy { flex: 1 1 100%; }
    .task-color { padding: 0; border-radius: 0; background: transparent !important; color: #111 !important; }
    .task-row { background: transparent !important; border-left: 0 !important; opacity: 1 !important; transform: none !important; box-shadow: none !important; }
    .task-row.completed .task-copy { color: #777 !important; }
    .task-time { color: #555; font-size: 8px; }
    .recurrence-icon, .reminder-icon { color: #555; font-size: 10px; }
    .empty-day-lines { height: calc(var(--print-empty-lines, 3) * 30px); background: repeating-linear-gradient(to bottom, transparent 0, transparent 29px, #d4d4d4 29px, #d4d4d4 30px); }
}
.task-creator { display:inline-block; margin-left:6px; color:#858b99; font-size:10px; font-weight:500; white-space:nowrap; }

@media screen {
    .task-row { padding: 8px 3px; gap: 2px; border-left: 2px solid transparent; }
    .task-row--colored { border-left-color: var(--task-accent); background: color-mix(in srgb, var(--task-accent) 7%, transparent); }
    .task-row--colored:hover { background: color-mix(in srgb, var(--task-accent) 13%, transparent); }
    .task-open { min-height: 40px; flex-wrap: wrap; gap: 4px 6px; padding: 3px 0; }
    .task-open .task-copy { flex: 1 1 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; white-space: normal; overflow: hidden; overflow-wrap: anywhere; line-height: 1.5; }
    .task-row.readonly .task-copy { white-space: normal; overflow-wrap: anywhere; }
    .task-time { flex: 0 0 auto; white-space: nowrap; font-size: 10px; color: #b1b1bb; }
    .task-subtask-progress, .task-creator { margin-left: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .task-row.completed { background: transparent; border-left-color: var(--line); }
    .task-row.completed .task-check::before { background: var(--success); border-color: var(--success); }
    .task-row.completion-pop .task-check::before { animation: completion-ring 420ms ease-out; }
    .day-column.today .quick-add input:focus { background: rgba(190,156,243,.06); }
}
@keyframes completion-ring { 0% { transform: scale(.7); box-shadow: 0 0 0 0 rgba(94,227,141,.35); } 50% { transform: scale(1.12); } 100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(94,227,141,0); } }
.week-companion { display: flex; }
.week-companion:empty { display: none; }
.week-review-button { background: #17121f; color: #ddc5ff; box-shadow: inset 0 0 0 1px #4c3e65; }
.week-review-button:hover:not(:disabled) { background: #241a33; color: #ddc5ff; box-shadow: inset 0 0 0 1px var(--accent-bright); }
.week-review-button:disabled { opacity: .55; cursor: not-allowed; }
.week-review-dialog { position: fixed; inset: 50% auto auto 50%; width: min(620px, calc(100% - 32px)); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); margin: 0; transform: translate(-50%, -50%); padding: 28px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 22px; background: var(--overlay-surface); color: var(--text); box-shadow: var(--shadow-dialog); }
.week-review-dialog[open] { display: flex; flex-direction: column; animation: dialog-center-in var(--motion-surface) var(--motion-ease-out); }
.week-review-dialog::backdrop { background: rgba(0,0,0,.72); animation: dialog-backdrop-in var(--motion-surface) ease-out; }
.review-header, .review-steps, .review-message, .review-actions { flex-shrink: 0; }
.review-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px; scrollbar-gutter: stable; }
.review-eyebrow { margin: 0 0 10px; color: var(--accent-bright); font-size: 9px; letter-spacing: .12em; font-weight: 700; }
.review-range { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.review-steps { display: flex; gap: 8px; margin: 24px 0; padding: 0; list-style: none; font-size: 11px; }
.review-steps li { flex: 1; padding: 12px 0; border-top: 2px solid var(--line); color: var(--muted); }
.review-steps li.active { border-color: var(--accent-bright); color: var(--accent-bright); }
.review-content h3 { margin: 0 0 10px; font-size: 24px; letter-spacing: -.035em; }
.review-description { margin: 0 0 22px; color: #aaaab3; font-size: 13px; line-height: 1.75; }
.review-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 20px; }
.review-summary div { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-raised); }
.review-summary strong { display: block; font-size: 38px; font-weight: 600; letter-spacing: -.05em; color: var(--accent-bright); }
.review-summary span { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; }
.review-completed-panel { border: 1px solid var(--line); border-radius: 14px; background: var(--surface-raised); }
.review-completed-panel summary { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 14px 16px; border-radius: 13px; list-style: none; cursor: pointer; color: var(--text); font-size: 13px; line-height: 1.5; transition: background var(--motion-fast), color var(--motion-fast); }
.review-completed-panel summary::-webkit-details-marker { display: none; }
.review-completed-panel summary:hover { background: rgba(190,156,243,.07); }
.review-completed-icon { flex-shrink: 0; color: var(--success); font-size: 20px; }
.review-completed-label { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.review-completed-count { flex-shrink: 0; padding: 3px 8px; border-radius: 6px; background: rgba(190,156,243,.1); color: var(--accent-bright); font-size: 11px; font-weight: 600; white-space: nowrap; }
.review-completed-chevron { flex-shrink: 0; color: var(--muted); font-size: 18px; }
.review-completed-panel[open] .review-completed-chevron { transform: rotate(180deg); }
.review-completed-panel[open] summary { border-radius: 13px 13px 0 0; }
.review-completed { margin: 0; padding: 0 16px 6px; list-style: none; color: #b8b8c0; font-size: 13px; line-height: 1.7; }
.review-completed li { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.review-completed li::before { content: '\2713'; flex: 0 0 20px; color: var(--success); text-align: center; }
.review-task-list { display: grid; gap: 8px; margin-bottom: 20px; }
.review-task-list label { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); cursor: pointer; font-size: 13px; line-height: 1.6; }
.review-task-list label:has(input:checked) { border-color: var(--accent-bright); background: #20182b; }
.review-task-list input { width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--accent-bright); }
.review-task-list span { overflow-wrap: anywhere; min-width: 0; }
.review-empty { margin: 0; padding: 20px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.review-date-field, .review-priority-field { display: grid; gap: 8px; color: #aaaab3; font-size: 12px; min-width: 0; }
.review-priorities { display: grid; gap: 16px; }
.review-priority-row { display: grid; grid-template-columns: minmax(0, 1fr) 165px; align-items: end; gap: 10px; }
.week-review-dialog select, .review-priorities input { width: 100%; min-height: 48px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background-color: #080809; color: var(--text); font-size: 13px; }
.review-priority-row[data-saved="true"] { opacity: .6; }
.review-message { min-height: 20px; margin: 20px 0 12px; color: var(--success); font-size: 12px; line-height: 1.65; }
.review-message:empty { min-height: 0; margin: 12px 0 4px; }
.review-message.error { color: #ff9a9a; }
.review-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-actions .primary-button { margin-left: auto; background: var(--accent-bright); color: #100b18; }
.review-actions .primary-button:hover { background: #d8bbff; }
.review-actions button { min-height: 48px; }
.review-actions button:disabled { opacity: .5; cursor: wait; }
.review-success-mark { display: grid; place-items: center; height: 112px; color: var(--success); font-size: 56px; background: linear-gradient(135deg, rgba(94,227,141,.06), rgba(190,156,243,.07)); border: 1px solid var(--line); border-radius: 18px; }
@media (max-width: 700px) {
    .week-review-dialog { position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: 95vh; max-height: 95dvh; margin: 0; padding: 22px 18px max(22px, env(safe-area-inset-bottom)); overflow: hidden; transform: none; border-width: 1px 0 0; border-radius: 22px 22px 0 0; }
    .week-review-dialog[open] { animation-name: mobile-sheet-in; }
    .review-steps { gap: 10px; font-size: 10px; }
    .review-priority-row { grid-template-columns: minmax(0, 1fr); }
    .week-review-dialog select, .review-priorities input { font-size: 16px; }
    .mobile-keyboard-open .week-review-dialog {
        position: fixed;
        inset: calc(var(--mobile-visual-top) + 8px) 0 auto;
        margin: 0 auto;
        max-height: calc(var(--mobile-visual-height) - 16px);
    }
}
@media (max-width: 900px), (any-pointer: coarse) {
    .week-review-dialog select, .review-priorities input { font-size: 16px; }
    .task-check { width: 44px; height: 44px; }
    .task-select-control { flex-basis: 44px; width: 44px; height: 44px; }
    .task-open { min-height: 44px; }
    .drag-handle { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; opacity: .72; touch-action: none; }
    .custom-list-delete, .task-context-menu button { min-height: 44px; }
    .search-filters select { min-height: 44px; }
    .key-hint { min-width: 44px; min-height: 44px; justify-content: center; }
}
/* Let the whole sheet scroll when a landscape screen cannot fit its sections. */
@media (max-height: 480px) {
    .custom-lists-shell { display: block; overflow-y: auto; }
    .custom-lists-layout { min-height: 0; }
    .custom-list-content, .custom-list-content.is-selecting { grid-template-rows: none; grid-auto-rows: auto; }
    .custom-list-tasks, .custom-list-options { max-height: 180px; }
    .week-review-dialog { overflow-y: auto; }
    .review-content { flex-shrink: 0; overflow: visible; }
    .overdue-dialog { overflow-y: auto; }
    .overdue-shell { max-height: none; }
    .overdue-list { overflow: visible; }
}
.mobile-keyboard-open .custom-lists-shell { display: block; overflow-y: auto; }
.mobile-keyboard-open .custom-lists-layout { min-height: 0; }
.mobile-keyboard-open .custom-list-content, .mobile-keyboard-open .custom-list-content.is-selecting { grid-template-rows: none; grid-auto-rows: auto; }
.mobile-keyboard-open .custom-list-tasks, .mobile-keyboard-open .custom-list-options { max-height: 180px; }
.mobile-keyboard-open .week-review-dialog { inset: calc(var(--mobile-visual-top) + 8px) 0 auto; max-height: calc(var(--mobile-visual-height) - 16px); transform: none; overflow-y: auto; }
.mobile-keyboard-open .review-content { flex-shrink: 0; overflow: visible; }
.mobile-keyboard-open .guest-auth-dialog { bottom: calc(var(--mobile-visual-bottom) + 12px); max-height: calc(var(--mobile-visual-height) - 24px); }
@media print {
    .week-companion, .week-review-dialog { display: none !important; }
    .task-copy { white-space: normal; overflow-wrap: anywhere; }
}
/* Custom recurrence controls retain the task drawer's native form styling. */
.custom-recurrence { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: grid; gap: 20px; }
.custom-recurrence > legend { padding: 0 6px; color: var(--muted); font-size: 12px; }
.recurrence-weekdays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.recurrence-weekdays legend { margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.recurrence-weekdays label { position: relative; min-width: 0; cursor: pointer; }
.recurrence-weekdays input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.recurrence-weekdays label > span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 3px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface-raised); color: var(--muted); font-size: 12px; font-weight: 500; transition: background 150ms, border-color 150ms, color 150ms; }
.recurrence-weekdays input:checked + span { background: rgba(190,156,243,.14); border-color: var(--accent-bright); color: var(--accent-bright); font-weight: 700; }
.recurrence-weekdays input:not(:disabled) + span:hover { border-color: var(--accent-bright); color: var(--text); }
.recurrence-weekdays input:focus-visible + span { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.recurrence-weekdays input:disabled + span { cursor: default; opacity: .65; }
.recurrence-optional { color: var(--muted); font-weight: 400; }
.recurrence-preview { border-top: 1px solid var(--line); padding-top: 14px; }
.recurrence-preview-label { color: var(--muted); font-size: 11px; }
#taskRecurrenceSummary { margin: 6px 0 0; color: var(--text); font-size: 13px; line-height: 1.65; }
#taskRecurrenceHint { margin: 8px 0 0; line-height: 1.6; }
@media (max-width: 360px) { .recurrence-weekdays { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.custom-recurrence.hidden, .recurrence-weekdays.hidden { display: none; }