@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/InterVariable.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

/* Daily vertical story preview and export. */
.statistics-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.statistics-day-story-button {
    min-height: 44px;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid rgba(141, 111, 192, 0.22);
    border-radius: 8px;
    background-color: rgba(141, 111, 192, 0.08);
    color: var(--color-purple-dark, #8d6fc0);
    box-shadow: 0 8px 18px rgba(141, 111, 192, 0.1);
}

.statistics-day-story-button .bi-icon {
    --bi-size: 20px;
}

.statistics-day-story-button:hover {
    border-color: rgba(141, 111, 192, 0.38);
    background-color: rgba(141, 111, 192, 0.13);
}

.day-story-modal-content {
    width: min(960px, calc(100vw - 32px));
    max-width: 960px;
    max-height: calc(100dvh - 32px);
    overflow: hidden;
}

.day-story-modal-content .modal-header {
    margin: 0 56px 22px 0;
}

.day-story-layout {
    display: grid;
    grid-template-columns: minmax(230px, 0.72fr) minmax(320px, 1.28fr);
    gap: 28px;
    min-height: 0;
}

.day-story-preview-shell {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.day-story-preview {
    width: min(100%, 310px);
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: #f7f8fc;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
}

.day-story-preview-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.day-story-frame,
.day-story-loading {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 32px 24px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.day-story-loading {
    color: #6b7280;
    font-size: 15px;
    font-weight: 700;
}

.day-story-kicker {
    position: absolute;
    top: 28px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.day-story-frame {
    position: relative;
    color: #111827;
    animation: day-story-enter 0.28s ease both;
}

.day-story-frame::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background-color: #4f7fd8;
}

.day-story-frame-finale::before {
    background-color: #5aa98d;
}

.day-story-mark {
    display: grid;
    width: 64px;
    height: 64px;
    margin-bottom: 28px;
    place-items: center;
    border: 1px solid rgba(90, 169, 141, 0.25);
    border-radius: 50%;
    background-color: rgba(90, 169, 141, 0.11);
    color: #5aa98d;
}

.day-story-mark .bi-icon {
    --bi-size: 30px;
}

.day-story-frame h4 {
    max-width: 100%;
    margin: 0;
    overflow-wrap: anywhere;
    color: #111827;
    font-size: 28px;
    font-weight: 850;
    line-height: 1.12;
}

.day-story-frame p {
    margin: 16px 0 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.45;
}

.day-story-frame-hook h4,
.day-story-frame-finale h4 {
    color: #111827;
    font-size: 46px;
    font-weight: 900;
}

.day-story-frame-hook p,
.day-story-frame-finale p {
    margin-top: 2px;
    font-size: 17px;
    font-weight: 700;
}

.day-story-frame-timeline {
    justify-content: flex-start;
    padding: 58px 16px 24px;
}

.day-story-live-clock {
    margin-top: 2px;
    color: #111827;
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
}

.day-story-day-grid {
    display: flex;
    width: 100%;
    margin-top: 18px;
    flex-direction: column;
    gap: 2px;
}

.day-story-hour-row {
    display: grid;
    width: 100%;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
}

.day-story-minute-row {
    display: grid;
    width: 100%;
    margin-bottom: 1px;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: end;
    gap: 4px;
}

.day-story-minute-row > div {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2px;
}

.day-story-minute-row > div > span {
    color: #9aa3b1;
    font-size: 5px;
    font-weight: 750;
    text-align: center;
}

.day-story-hour-row > span {
    color: #9aa3b1;
    font-size: 7px;
    font-weight: 750;
    text-align: right;
}

.day-story-hour-row > div {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2px;
}

.day-story-five-minute-group {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 1px;
}

.day-story-hour-row i {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 1px;
    background-color: #eef1f5;
    transition: background-color 90ms linear, box-shadow 90ms linear, transform 90ms linear;
}

.day-story-hour-row i.revealed {
    background-color: #dfe5ee;
}

.day-story-hour-row i.active {
    background-color: rgba(79, 127, 216, calc(0.44 + var(--story-level) * 0.5));
}

.day-story-hour-row i.current.active {
    z-index: 1;
    box-shadow: 0 0 0 3px rgba(79, 127, 216, 0.14), 0 0 10px rgba(79, 127, 216, 0.5);
    transform: scale(1.16);
}

.day-story-live-focus {
    display: flex;
    margin-top: 16px;
    flex-direction: column;
    gap: 2px;
}

.day-story-live-focus strong {
    color: #5aa98d;
    font-size: 18px;
    font-weight: 850;
}

.day-story-live-focus span {
    color: #6b7280;
    font-size: 9px;
    font-weight: 700;
}

.day-story-frame-analytics {
    padding-top: 76px;
}

.day-story-metric-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.day-story-metric-grid > div {
    display: flex;
    min-height: 105px;
    padding: 12px 8px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background-color: #fff;
}

.day-story-metric-grid strong {
    color: #111827;
    font-size: 23px;
    font-weight: 900;
    line-height: 1.05;
}

.day-story-metric-grid span {
    color: #6b7280;
    font-size: 10px;
    font-weight: 700;
}

.day-story-frame-analytics > p {
    color: #6672b8;
    font-size: 12px;
    font-weight: 750;
}

.day-story-fire {
    display: grid;
    width: 76px;
    height: 76px;
    margin-bottom: 24px;
    place-items: center;
    border-radius: 50%;
    background-color: rgba(192, 138, 58, 0.13);
    color: #c08a3a;
}

.day-story-fire .bi-icon {
    --bi-size: 36px;
}

.day-story-brand {
    position: absolute;
    bottom: 30px;
    color: #8b96a8;
    font-size: 12px;
    font-weight: 700;
}

.day-story-progress {
    display: flex;
    width: min(100%, 310px);
    gap: 5px;
}

.day-story-progress {
    flex-direction: column;
    align-items: stretch;
}

.day-story-progress input[type="range"] {
    appearance: none;
    width: 100%;
    height: 6px;
    margin: 8px 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: linear-gradient(to right, #4f7fd8 var(--played, 0%), #dbe3ef var(--played, 0%));
    cursor: pointer;
}

.day-story-progress input::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #4f7fd8;
    box-shadow: 0 1px 4px #0003;
}

.day-story-progress input::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #4f7fd8;
}

.day-story-progress output {
    color: var(--text-secondary);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.day-story-controls {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
}

.day-story-summary { padding: 60px 16px 16px; justify-content: flex-start; }
.day-story-summary table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 10px; }
.day-story-summary th, .day-story-summary td { padding: 11px 2px; border-bottom: 1px solid #dbe3ef; text-align: left; overflow-wrap: anywhere; }
.day-story-summary th { width: 40%; color: #6b7280; font-weight: 650; }
.day-story-summary td { font-weight: 800; }
.day-story-summary td:last-child { text-align: right; }
.day-story-summary h5 { margin: 18px 0 0; font-size: 15px; }
.day-story-summary p { margin: 4px 0 10px; font-size: 11px; }
.day-story-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; width: 80%; }
.day-story-month i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 3px; font: normal 9px Inter, sans-serif; color: #374151; }
@media (max-width: 768px) {
    .day-story-frame.day-story-summary { padding: 42px 8px 10px; }
    .day-story-summary table { font-size: 7px; }
    .day-story-summary th, .day-story-summary td { padding: 9px 1px; }
    .day-story-summary h5 { font-size: 10px; margin-top: 14px; }
    .day-story-summary p { font-size: 8px; margin: 4px 0 8px; }
    .day-story-month { gap: 3px; }
    .day-story-month i { font-size: 6px; }
}

.day-story-date-controls {
    display: grid;
    grid-template-columns: 1fr 1fr 1.35fr;
    gap: 8px;
    margin-bottom: 14px;
}

.day-story-date-quick,
.day-story-date-custom {
    box-sizing: border-box;
    display: flex;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 750;
}

.day-story-date-quick {
    cursor: pointer;
}

.day-story-date-quick:hover,
.day-story-date-quick.active,
.day-story-date-custom.active {
    border-color: rgba(79, 127, 216, 0.42);
    background-color: rgba(79, 127, 216, 0.08);
    color: var(--color-blue-dark, #356fc7);
}

.day-story-date-custom {
    position: relative;
    gap: 6px;
    padding: 0 9px;
}

.day-story-date-custom .bi-icon {
    --bi-size: 17px;
    flex: 0 0 auto;
}

.day-story-date-custom input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.day-story-empty-state {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 28px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #6b7280;
    text-align: center;
}

.day-story-empty-state .bi-icon {
    --bi-size: 34px;
    margin-bottom: 6px;
    color: #8b96a8;
}

.day-story-empty-state strong {
    color: #111827;
    font-size: 18px;
}

.day-story-empty-state > span:last-child {
    font-size: 12px;
    line-height: 1.4;
}

.day-story-description {
    margin: 0 0 14px;
    color: var(--text-secondary);
    font-size: 14px;
}

.day-story-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.day-story-fact {
    display: flex;
    min-height: 76px;
    padding: 12px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--bg-primary);
}

.day-story-fact span {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 650;
}

.day-story-fact strong {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 850;
}

.day-story-privacy {
    display: flex;
    margin-top: 14px;
    padding: 11px 12px;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(90, 169, 141, 0.2);
    border-radius: 8px;
    background-color: rgba(90, 169, 141, 0.07);
    color: var(--color-green-dark, #418e74);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.day-story-privacy .bi-icon {
    --bi-size: 20px;
    flex: 0 0 auto;
}

.day-story-actions {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
}

.day-story-actions .btn {
    gap: 7px;
    justify-content: center;
}

.day-story-status {
    min-height: 20px;
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    text-align: center;
}

@keyframes day-story-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .statistics-header-actions {
        gap: 8px;
    }

    .statistics-day-story-button {
        width: 44px;
        min-width: 44px;
        padding: 0;
        justify-content: center;
        font-size: 0;
    }

    .day-story-modal {
        padding: 5px;
    }

    .day-story-modal-content {
        width: 100%;
        max-height: calc(100dvh - 10px);
        padding: 20px 16px 16px;
        overflow-y: auto;
    }

    .day-story-modal-content .modal-header {
        margin-bottom: 16px;
        font-size: 22px;
    }

    .day-story-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .day-story-date-controls {
        grid-template-columns: 1fr 1fr;
    }

    .day-story-date-custom {
        grid-column: 1 / -1;
    }

    .day-story-preview {
        width: 180px;
    }

    .day-story-progress {
        width: 180px;
    }

    .day-story-frame,
    .day-story-loading {
        padding: 22px 14px;
    }

    .day-story-kicker {
        top: 18px;
        font-size: 9px;
    }

    .day-story-mark {
        width: 42px;
        height: 42px;
        margin-bottom: 16px;
    }

    .day-story-mark .bi-icon {
        --bi-size: 20px;
    }

    .day-story-frame h4 {
        font-size: 20px;
    }

    .day-story-frame p {
        margin-top: 9px;
        font-size: 11px;
    }

    .day-story-frame-hook h4,
    .day-story-frame-finale h4 {
        font-size: 30px;
    }

    .day-story-frame-timeline {
        padding: 38px 9px 12px;
    }

    .day-story-live-clock {
        font-size: 17px;
    }

    .day-story-day-grid {
        margin-top: 10px;
        gap: 1px;
    }

    .day-story-hour-row {
        grid-template-columns: 13px minmax(0, 1fr);
        gap: 2px;
    }

    .day-story-minute-row {
        grid-template-columns: 13px minmax(0, 1fr);
        gap: 2px;
    }

    .day-story-minute-row > div {
        gap: 1px;
    }

    .day-story-minute-row > div > span {
        font-size: 4px;
    }

    .day-story-hour-row > span {
        font-size: 5px;
    }

    .day-story-hour-row > div {
        gap: 1px;
    }

    .day-story-five-minute-group {
        gap: 0.5px;
    }

    .day-story-hour-row i {
        border-radius: 1px;
    }

    .day-story-live-focus {
        margin-top: 9px;
    }

    .day-story-live-focus strong {
        font-size: 13px;
    }

    .day-story-live-focus span {
        font-size: 7px;
    }

    .day-story-metric-grid > div {
        min-height: 68px;
        padding: 8px 5px;
    }

    .day-story-metric-grid strong {
        font-size: 16px;
    }

    .day-story-fact {
        min-height: 64px;
    }

    .day-story-actions {
        margin-top: 0;
    }
}

:root {
    /* Shared text and semantic colors. Keep page-specific opacity in the component rules. */
    --color-ink: #111827;
    --color-muted: #6b7280;
    --color-muted-light: #8b96a8;
    --color-blue: #4f7fd8;
    --color-blue-dark: #356fc7;
    --color-green: #5aa98d;
    --color-green-dark: #418e74;
    --color-amber: #c08a3a;
    --color-amber-dark: #a8752e;
    --color-red: #d96f72;
    --color-red-dark: #c35b5b;
    --color-purple: #9b78c8;
    --color-purple-dark: #8d6fc0;

    --bg-primary: #ffffff;
    --bg-secondary: #f3f4f6;
    --bg-tertiary: #e5e7eb;
    --text-primary: var(--color-ink);
    --text-secondary: var(--color-muted);
    --border: #d1d5db;
    --accent: var(--color-blue);
    --accent-hover: var(--color-blue-dark);
    --success: var(--color-green);
    --warning: var(--color-amber);
    --danger: var(--color-red);
    --shadow: rgba(0, 0, 0, 0.1);

    /* Shared typography scale. Components choose a role instead of a one-off size. */
    --font-size-caption: 11px;
    --font-size-badge: 12px;
    --font-size-small: 13px;
    --font-size-body: 14px;
    --font-size-control: 15px;
    --font-size-card-title: 16px;
    --font-size-subtitle: 18px;
    --font-size-section-title: 24px;
    --font-size-modal-title: 22px;
    --font-size-page-title: 30px;
    --line-height-tight: 1.15;
    --line-height-ui: 1.25;
    --line-height-body: 1.45;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
}

@media (max-width: 768px) {
    .site-header {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 34px;
    }

    .site-nav {
        flex-wrap: wrap;
    }

    .site-hero,
    .site-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .site-feature-grid {
        grid-template-columns: 1fr;
    }

    .tool-nav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: auto !important;
        height: auto !important;
        min-height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 50 !important;
        border: 1px solid var(--border) !important;
        border-right: 0 !important;
        border-left: 0 !important;
        border-bottom: 0 !important;
        border-radius: 0 !important;
        background-color: var(--bg-primary) !important;
        box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.1) !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 8px !important;
        padding: 8px 8px max(8px, env(safe-area-inset-bottom, 0px)) !important;
        overflow: hidden !important;
    }

    [data-theme="dark"] .tool-nav {
        background-color: var(--bg-primary) !important;
        border-color: var(--border) !important;
    }

    .tool-nav-spacer {
        display: none !important;
    }

    .tool-nav-item {
        flex: 1 0 46px !important;
        width: auto !important;
        height: 46px !important;
        border-radius: 20px !important;
        color: var(--text-secondary) !important;
    }

    .tool-nav-item.active {
        color: white !important;
    }

    .tool-nav-avatar {
        order: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* Tasks page typography reference implementation. */
.app-container:has(.tasks-layout) .tasks-layout .section-title {
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-extra-bold);
    line-height: var(--line-height-tight);
}

.app-container:has(.tasks-layout) .tasks-layout .task-title,
.app-container:has(.tasks-layout) .tasks-layout .note-title {
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-ui);
}

.app-container:has(.tasks-layout) .tasks-layout .task-description,
.app-container:has(.tasks-layout) .tasks-layout .note-content,
.app-container:has(.tasks-layout) .tasks-layout .empty-state-text,
.app-container:has(.tasks-layout) .tasks-layout .loading {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
}

.app-container:has(.tasks-layout) .tasks-layout .task-meta,
.app-container:has(.tasks-layout) .tasks-layout .project-name {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-ui);
}

.app-container:has(.tasks-layout) .tasks-layout .task-meta > span,
.app-container:has(.tasks-layout) .tasks-layout .task-recurrence,
.app-container:has(.tasks-layout) .tasks-layout .task-overdue,
.app-container:has(.tasks-layout) .tasks-layout .task-date,
.app-container:has(.tasks-layout) .tasks-layout .note-project,
.app-container:has(.tasks-layout) .tasks-layout .project-count {
    font-size: var(--font-size-badge);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-ui);
}

.app-container:has(.tasks-layout) .tasks-layout .btn,
.app-container:has(.tasks-layout) .tasks-layout .task-date-filter,
.app-container:has(.tasks-layout) .tasks-layout .task-filter-trigger,
.app-container:has(.tasks-layout) .tasks-layout .mobile-fab-action,
.app-container:has(.tasks-layout) .tasks-layout .mobile-task-inline-btn {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-ui);
}

.app-container:has(.tasks-layout) .tasks-layout .completed-count {
    margin-left: 8px;
    color: var(--text-secondary);
    font-size: var(--font-size-subtitle);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-ui);
}

#createTaskModal .modal-header,
#editTaskModal .modal-header,
#createNoteModal .modal-header,
#editNoteModal .modal-header,
#taskSetupPickerModal .modal-header,
#createProjectModal .modal-header,
#editProjectModal .modal-header,
#deleteProjectModal .modal-header {
    font-size: var(--font-size-modal-title);
    font-weight: var(--font-weight-extra-bold);
    line-height: var(--line-height-tight);
}

#createTaskModal .form-label,
#editTaskModal .form-label,
#createNoteModal .form-label,
#editNoteModal .form-label,
#taskSetupPickerModal .form-label,
#createProjectModal .form-label,
#editProjectModal .form-label {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-ui);
}

#createTaskModal .form-input,
#createTaskModal .form-textarea,
#createTaskModal .form-select,
#editTaskModal .form-input,
#editTaskModal .form-textarea,
#editTaskModal .form-select,
#createNoteModal .form-input,
#createNoteModal .form-textarea,
#createNoteModal .form-select,
#editNoteModal .form-input,
#editNoteModal .form-textarea,
#editNoteModal .form-select,
#taskSetupPickerModal .form-input,
#taskSetupPickerModal .form-select,
#createProjectModal .form-input,
#createProjectModal .form-textarea,
#editProjectModal .form-input,
#editProjectModal .form-textarea {
    font-size: var(--font-size-control);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
}

#createTaskModal .btn,
#editTaskModal .btn,
#createNoteModal .btn,
#editNoteModal .btn,
#taskSetupPickerModal .btn,
#createProjectModal .btn,
#editProjectModal .btn,
#deleteProjectModal .btn {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-ui);
}

@media (max-width: 768px) {
    :root {
        --font-size-section-title: 22px;
        --font-size-page-title: 26px;
    }

    #createTaskModal .form-input,
    #createTaskModal .form-textarea,
    #createTaskModal .form-select,
    #editTaskModal .form-input,
    #editTaskModal .form-textarea,
    #editTaskModal .form-select,
    #createNoteModal .form-input,
    #createNoteModal .form-textarea,
    #createNoteModal .form-select,
    #editNoteModal .form-input,
    #editNoteModal .form-textarea,
    #editNoteModal .form-select,
    #taskSetupPickerModal .form-input,
    #taskSetupPickerModal .form-select,
    #createProjectModal .form-input,
    #createProjectModal .form-textarea,
    #editProjectModal .form-input,
    #editProjectModal .form-textarea {
        font-size: 16px;
    }
}

[data-theme="dark"] {
    --color-ink: #f9fafb;
    --color-muted: #9ca3af;
    --color-muted-light: #b7c0cf;
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
    --border: #4b5563;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --shadow: rgba(0, 0, 0, 0.5);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.bi-icon {
    --bi-size: 1em;
    display: inline-block;
    width: var(--bi-size);
    height: var(--bi-size);
    flex: 0 0 var(--bi-size);
    background-color: currentColor;
    vertical-align: -0.14em;
    mask: var(--bi-icon) center / contain no-repeat;
    -webkit-mask: var(--bi-icon) center / contain no-repeat;
}

.bi-icon-sm {
    --bi-size: 0.875em;
}

.bi-icon-md {
    --bi-size: 1.15em;
}

.bi-icon-lg {
    --bi-size: 1.45em;
}

.bi-icon-xl {
    --bi-size: 2em;
}

.icon-tile,
.stat-icon,
.site-metric span,
.site-feature span,
.leaderboard-stat-icon,
.badge-icon,
.empty-state-icon,
.admin-sound-icon,
.admin-favicon-preview {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    border: 1px solid rgba(59, 130, 246, 0.18);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0)),
        rgba(59, 130, 246, 0.12);
    color: var(--accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

[data-theme="dark"] .icon-tile,
[data-theme="dark"] .stat-icon,
[data-theme="dark"] .site-metric span,
[data-theme="dark"] .site-feature span,
[data-theme="dark"] .leaderboard-stat-icon,
[data-theme="dark"] .badge-icon,
[data-theme="dark"] .empty-state-icon,
[data-theme="dark"] .admin-sound-icon,
[data-theme="dark"] .admin-favicon-preview {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
        rgba(59, 130, 246, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.section-title > .bi-icon,
.btn .bi-icon,
.mobile-topbar-btn .bi-icon,
.settings-nav-item .bi-icon {
    --bi-size: 1.08em;
}

html {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
}

.auth-page {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--bg-primary);
}

.auth-card {
    width: min(420px, 100%);
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-secondary);
    box-shadow: 0 14px 36px var(--shadow);
}

.auth-card h1 {
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 30px;
}

.auth-card p,
.auth-switch {
    color: var(--text-secondary);
}

.auth-form {
    display: grid;
    gap: 16px;
    margin-top: 22px;
}

.auth-form label {
    display: grid;
    gap: 8px;
    color: var(--text-primary);
    font-weight: 700;
}

.auth-form .btn {
    margin-top: 4px;
}

.auth-remember {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    width: fit-content;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.auth-remember input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.auth-error {
    margin-top: 18px;
    padding: 12px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger);
}

.auth-switch {
    margin-top: 18px;
    text-align: center;
}

.auth-switch a {
    color: var(--accent);
    font-weight: 700;
}

.site-page {
    height: 100dvh;
    overflow-y: auto;
    padding: 24px clamp(18px, 4vw, 56px) 56px;
    background:
        radial-gradient(circle at 12% 8%, rgba(16, 185, 129, 0.16), transparent 28%),
        radial-gradient(circle at 86% 14%, rgba(59, 130, 246, 0.16), transparent 30%),
        var(--bg-primary);
}

.site-header {
    max-width: 1180px;
    margin: 0 auto 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.site-logo {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 20px;
    font-weight: 900;
}

.site-nav,
.site-actions,
.site-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 700;
}

.site-nav a:hover {
    color: var(--accent);
}

.site-hero,
.site-section {
    max-width: 1180px;
    margin: 0 auto;
}

.site-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
    align-items: center;
    gap: clamp(28px, 6vw, 72px);
    min-height: 560px;
}

.site-kicker {
    margin-bottom: 12px;
    color: var(--success);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.site-hero h1 {
    max-width: 780px;
    color: var(--text-primary);
    font-size: clamp(42px, 7vw, 78px);
    line-height: 0.98;
    letter-spacing: 0;
}

.site-hero-text {
    max-width: 650px;
    margin-top: 22px;
    color: var(--text-secondary);
    font-size: 19px;
}

.site-hero-actions {
    margin-top: 30px;
    flex-wrap: wrap;
}

.site-hero-panel {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background-color: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    box-shadow: 0 20px 60px var(--shadow);
}

.site-metric {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 2px 14px;
    align-items: center;
    padding: 16px;
    border-radius: 8px;
    background-color: var(--bg-primary);
}

.site-metric-link {
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.site-metric-link:hover {
    transform: translateY(-2px);
}

.site-metric span {
    grid-row: span 2;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 22px;
}

.site-metric:nth-child(2n) span {
    border-color: rgba(16, 185, 129, 0.2);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0)),
        rgba(16, 185, 129, 0.13);
    color: var(--success);
}

.site-metric:nth-child(3n) span {
    border-color: rgba(245, 158, 11, 0.22);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0)),
        rgba(245, 158, 11, 0.14);
    color: var(--warning);
}

.site-metric strong {
    color: var(--text-primary);
    font-size: 18px;
}

.site-metric small,
.site-muted {
    color: var(--text-secondary);
}

.site-section {
    padding: 70px 0 0;
}

.site-section h2 {
    max-width: 760px;
    color: var(--text-primary);
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.08;
}

.site-section p {
    max-width: 720px;
    margin-top: 14px;
    color: var(--text-secondary);
    font-size: 17px;
}

.site-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.site-feature {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--bg-secondary);
}

.site-feature span {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 28px;
}

.site-feature span .bi-icon,
.site-metric span .bi-icon {
    --bi-size: 0.95em;
}

.site-feature h3 {
    margin-top: 16px;
    color: var(--text-primary);
    font-size: 20px;
}

.site-feature p {
    margin-top: 8px;
    font-size: 15px;
}

.site-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 28px;
    align-items: start;
}

.site-roadmap {
    display: grid;
    gap: 10px;
}

.site-roadmap div {
    display: grid;
    gap: 4px;
    padding: 16px;
    border-left: 4px solid var(--success);
    border-radius: 8px;
    background-color: var(--bg-secondary);
}

.site-roadmap strong {
    color: var(--text-primary);
}

.site-roadmap span {
    color: var(--text-secondary);
}

.marathon-hero {
    min-height: 520px;
}

.marathon-day-card {
    align-content: start;
}

.marathon-day-label {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background-color: rgba(16, 185, 129, 0.14);
    color: var(--success);
    font-weight: 900;
}

.marathon-day-card h2 {
    margin-top: 6px;
    color: var(--text-primary);
    font-size: 28px;
    line-height: 1.12;
}

.marathon-day-card p {
    color: var(--text-secondary);
}

.marathon-checklist {
    display: grid;
    gap: 10px;
    margin-top: 8px;
    list-style: none;
}

.marathon-checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 800;
}

.marathon-checklist span {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background-color: var(--success);
    color: white;
    font-size: 14px;
}

.marathon-lock-note {
    margin-top: 6px;
    padding: 12px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-weight: 700;
}

.marathon-status-section {
    padding-bottom: 30px;
}

.app-marathon-page {
    min-height: 100dvh;
}

.app-marathon-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    gap: 24px;
    align-items: end;
    padding: 24px 0 10px;
}

.app-marathon-header h1 {
    max-width: 760px;
    color: var(--text-primary);
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
}

.app-marathon-progress-card,
.app-marathon-day,
.app-marathon-sidebar,
.app-marathon-empty {
    border: 1px solid var(--border);
    border-radius: 14px;
    background-color: var(--bg-secondary);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.app-marathon-progress-card {
    display: grid;
    gap: 8px;
    padding: 18px;
}

.app-marathon-progress-card span {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 800;
}

.app-marathon-progress-card strong {
    color: var(--success);
    font-size: 36px;
    line-height: 1;
}

.app-marathon-progress-track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--border-light);
}

.app-marathon-progress-track div {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--success), var(--accent));
}

.app-marathon-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
    gap: 20px;
    align-items: start;
    padding: 20px 0 40px;
}

.app-marathon-day {
    padding: clamp(20px, 4vw, 34px);
}

.app-marathon-day-top {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    color: var(--success);
    font-size: 14px;
    font-weight: 900;
}

.app-marathon-day h2 {
    margin-top: 12px;
    color: var(--text-primary);
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.08;
}

.app-marathon-content {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.app-marathon-content p {
    color: var(--text-secondary);
    font-size: 17px;
    line-height: 1.65;
}

.app-marathon-task-list {
    display: grid;
    gap: 10px;
    margin-top: 28px;
}

.app-marathon-task-list h3,
.app-marathon-sidebar h3 {
    color: var(--text-primary);
    font-size: 22px;
}

.app-marathon-task-form {
    margin: 0;
}

.app-marathon-task {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.app-marathon-task:hover {
    transform: translateY(-1px);
    border-color: rgba(16, 185, 129, 0.55);
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.12);
}

.app-marathon-task-readonly {
    cursor: default;
}

.app-marathon-task-readonly:hover {
    transform: none;
    border-color: var(--border);
    box-shadow: none;
}

.app-marathon-task input {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    margin-top: 1px;
    accent-color: var(--success);
}

.app-marathon-task span {
    font-weight: 800;
    line-height: 1.35;
}

.app-marathon-sidebar {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 14px;
    padding: 18px;
}

.app-marathon-day-list {
    display: grid;
    gap: 8px;
}

.app-marathon-notice {
    display: grid;
    gap: 4px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--bg-primary);
}

.app-marathon-notice strong {
    color: var(--text-primary);
    font-size: 16px;
}

.app-marathon-notice span {
    color: var(--text-secondary);
    line-height: 1.45;
}

.app-marathon-notice-success {
    border-color: rgba(16, 185, 129, 0.42);
    background-color: rgba(16, 185, 129, 0.08);
}

.app-marathon-notice-waiting {
    border-color: rgba(245, 158, 11, 0.48);
    background-color: rgba(245, 158, 11, 0.1);
}

.app-marathon-day-state {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--bg-primary);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a.app-marathon-day-state:hover {
    transform: translateY(-1px);
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 8px 18px rgba(16, 185, 129, 0.12);
}

.app-marathon-day-state > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background-color: var(--border-light);
    color: var(--text-secondary);
    font-weight: 900;
}

.app-marathon-day-state strong,
.app-marathon-day-state small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-marathon-day-state strong {
    color: var(--text-primary);
}

.app-marathon-day-state small {
    color: var(--text-secondary);
}

.app-marathon-day-state-done > span {
    background-color: var(--success);
    color: white;
}

.app-marathon-day-state-current {
    border-color: rgba(16, 185, 129, 0.62);
    background-color: rgba(16, 185, 129, 0.11);
}

.app-marathon-day-state-current > span {
    background-color: var(--success);
    color: white;
}

.app-marathon-day-state-selected {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
}

.app-marathon-day-state-waiting {
    border-color: rgba(245, 158, 11, 0.55);
    background-color: rgba(245, 158, 11, 0.1);
}

.app-marathon-day-state-waiting > span {
    background-color: var(--warning);
    color: white;
}

.app-marathon-empty {
    display: grid;
    justify-items: start;
    gap: 12px;
    margin: 24px 0 40px;
    padding: clamp(22px, 4vw, 36px);
}

.app-marathon-empty h2 {
    color: var(--text-primary);
    font-size: clamp(28px, 4vw, 44px);
}

.app-marathon-empty p {
    max-width: 720px;
    color: var(--text-secondary);
}

.app-marathon-complete span {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background-color: var(--success);
    color: white;
    font-size: 28px;
    font-weight: 900;
}

.site-section-first {
    padding-top: 18px;
}

.site-page-title,
.site-article-page h1 {
    max-width: 860px;
    color: var(--text-primary);
    font-size: clamp(40px, 6vw, 70px);
    line-height: 1;
    letter-spacing: 0;
}

.site-article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.site-article-grid-compact {
    max-width: none;
}

.site-article-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 220px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--bg-secondary);
}

.site-article-card h2,
.site-article-card h3 {
    margin-top: 8px;
    color: var(--text-primary);
    line-height: 1.15;
}

.site-article-card a {
    color: inherit;
    text-decoration: none;
}

.site-article-card h2 a:hover,
.site-article-card h3 a:hover,
.site-read-link:hover {
    color: var(--accent);
}

.site-article-card p {
    margin-bottom: 18px;
    font-size: 15px;
}

.site-article-meta {
    color: var(--success);
    font-size: 13px;
    font-weight: 900;
}

.site-read-link {
    margin-top: auto;
    color: var(--accent);
    font-weight: 800;
    text-decoration: none;
}

.site-section-action {
    margin-top: 22px;
    text-decoration: none;
}

.site-article-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 26px 0 80px;
}

.site-article-page .site-read-link {
    display: inline-flex;
    margin-bottom: 26px;
}

.site-article-lead {
    margin-top: 20px;
    color: var(--text-secondary);
    font-size: 21px;
}

.site-article-content {
    margin-top: 34px;
}

.site-article-content p {
    margin-bottom: 18px;
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1.75;
}

@media (max-width: 900px) {
    .site-header {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 34px;
    }

    .site-nav,
    .site-actions {
        flex-wrap: wrap;
    }

    .site-hero,
    .site-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .site-hero h1 {
        font-size: 42px;
    }

    .site-feature-grid,
    .site-article-grid {
        grid-template-columns: 1fr;
    }

    .app-marathon-header,
    .app-marathon-layout {
        grid-template-columns: 1fr;
    }

    .app-marathon-sidebar {
        position: static;
        order: -1;
    }
}

.admin-page {
    height: 100dvh;
    min-height: 100dvh;
    overflow-y: auto;
    padding: 28px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.admin-header h1 {
    font-size: 32px;
    margin-bottom: 6px;
}

.admin-header p {
    color: var(--text-secondary);
}

.admin-actions,
.admin-row-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.admin-sidebar {
    position: sticky;
    top: 24px;
    min-height: calc(100dvh - 168px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-secondary);
}

.admin-nav-main {
    display: grid;
    gap: 8px;
}

.admin-nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-nav-settings {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.admin-nav-settings summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 11px 12px;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

.admin-nav-settings summary::-webkit-details-marker {
    display: none;
}

.admin-nav-settings summary::after {
    content: "▾";
    color: var(--text-secondary);
    font-size: 12px;
    transition: transform 0.2s ease;
}

.admin-nav-settings[open] summary::after {
    transform: rotate(180deg);
}

.admin-nav-settings summary:hover {
    background: var(--bg-tertiary);
}

.admin-nav-subitem {
    margin-top: 6px;
    padding-left: 22px;
    color: var(--text-secondary);
}

.admin-nav-item:hover,
.admin-nav-item.active {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.12);
    color: var(--accent);
}

.admin-content {
    min-width: 0;
}

.admin-single-page {
    max-width: 1120px;
    margin: 0 auto;
}

.admin-section {
    display: none;
}

.admin-section.active {
    display: block;
}

.admin-section-header {
    margin-bottom: 16px;
}

.admin-section-header h2 {
    margin-bottom: 6px;
    font-size: 24px;
}

.admin-section-header p {
    color: var(--text-secondary);
}

.admin-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-secondary);
}

.admin-settings-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
}

.admin-settings-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-secondary);
}

.admin-card-title {
    margin-bottom: 16px;
    font-size: 20px;
}

.admin-article-create-card {
    align-items: stretch;
    flex-direction: column;
    margin-bottom: 22px;
}

.admin-marathon-day-list {
    display: grid;
    gap: 10px;
}

.admin-marathon-day-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-secondary);
}

.admin-marathon-day-main {
    min-width: 0;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.admin-marathon-day-number {
    display: inline-grid;
    place-items: center;
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    color: var(--accent);
    font-size: 13px;
    font-weight: 900;
}

.admin-marathon-day-main h3 {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-marathon-day-main p {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 14px;
}

.admin-marathon-content-textarea {
    min-height: 360px;
}

.admin-section-subheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 24px 0 12px;
}

.admin-section-subheader h3 {
    color: var(--text-primary);
    font-size: 22px;
}

.admin-section-subheader p {
    color: var(--text-secondary);
}

.admin-count-badge {
    min-width: 34px;
    min-height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 900;
}

.admin-article-form {
    width: 100%;
    display: grid;
    gap: 14px;
}

.admin-article-form label {
    display: grid;
    gap: 7px;
    color: var(--text-primary);
    font-weight: 800;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 320px);
    gap: 14px;
}

.admin-textarea-small {
    min-height: 72px;
}

.admin-textarea-large {
    min-height: 132px;
}

.admin-form-footer,
.admin-article-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.admin-status-select {
    min-width: 180px;
}

.admin-field-disabled {
    opacity: 0.48;
}

.admin-field-disabled input {
    cursor: not-allowed;
}

.admin-article-list {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.admin-article-card {
    align-items: stretch;
    flex-direction: column;
}

.admin-article-card-header h3 {
    color: var(--text-primary);
    font-size: 20px;
}

.admin-article-card-header p,
.admin-empty-text {
    color: var(--text-secondary);
}

.admin-delete-article-form {
    display: flex;
    justify-content: flex-end;
}

.admin-settings-card h2 {
    margin-bottom: 6px;
    font-size: 20px;
}

.admin-settings-card p {
    color: var(--text-secondary);
    line-height: 1.45;
}

.favicon-settings {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.favicon-preview {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-primary);
    overflow: hidden;
    color: var(--accent);
    font-size: 24px;
    font-weight: 800;
}

.favicon-preview img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.favicon-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.favicon-file-input {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 14px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
}

.favicon-file-input input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

@media (max-width: 800px) {
    .admin-page {
        padding: 18px;
    }

    .admin-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-layout {
        grid-template-columns: 1fr;
    }

    .admin-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-settings-card,
    .favicon-settings,
    .favicon-form {
        align-items: stretch;
        flex-direction: column;
    }
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.admin-table th {
    color: var(--text-secondary);
    font-size: 13px;
    text-transform: uppercase;
}

.admin-table td span {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 13px;
}

.admin-self {
    color: var(--text-secondary);
}

.mobile-topbar,
.mobile-drawer-overlay,
.mobile-drawer-head,
.mobile-drawer-profile,
.mobile-drawer-close,
.mobile-fab-stack,
.mobile-fab,
.mobile-task-inline-actions {
    display: none;
}

.stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background-color: var(--bg-secondary);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow);
    border: 1px solid var(--border);
}

.stat-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.stat-value {
    font-size: 32px;
    font-weight: bold;
    color: var(--accent);
}

.stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 24px;
    margin-bottom: 10px;
}

.stat-icon .bi-icon {
    --bi-size: 24px;
}

.stat-card:nth-child(2) .stat-icon {
    border-color: rgba(16, 185, 129, 0.2);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0)),
        rgba(16, 185, 129, 0.13);
    color: var(--success);
}

.stat-card:nth-child(3) .stat-icon {
    border-color: rgba(245, 158, 11, 0.22);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0)),
        rgba(245, 158, 11, 0.14);
    color: var(--warning);
}

.stat-card:nth-child(4) .stat-icon {
    border-color: rgba(239, 68, 68, 0.18);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0)),
        rgba(239, 68, 68, 0.11);
    color: var(--danger);
}

.stats-accordion {
    display: none;
    width: 100%;
}

.stats-accordion-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 22px;
    gap: 12px;
    align-items: center;
    width: 100%;
    min-height: 74px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background-color: var(--bg-secondary);
    box-shadow: 0 2px 8px var(--shadow);
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.stats-compact-item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
}

.stats-compact-item .stat-icon {
    margin: 0;
}

.stats-compact-item:nth-child(2) .stat-icon {
    border-color: rgba(16, 185, 129, 0.2);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0)),
        rgba(16, 185, 129, 0.13);
    color: var(--success);
}

.stats-compact-item:nth-child(3) .stat-icon {
    border-color: rgba(245, 158, 11, 0.22);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0)),
        rgba(245, 158, 11, 0.14);
    color: var(--warning);
}

.stats-compact-item:nth-child(4) .stat-icon {
    border-color: rgba(239, 68, 68, 0.18);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0)),
        rgba(239, 68, 68, 0.11);
    color: var(--danger);
}

.stats-compact-value {
    min-width: 0;
    overflow: hidden;
    color: var(--accent);
    font-size: 19px;
    font-weight: 900;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-accordion-arrow {
    justify-self: end;
    color: var(--text-secondary);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    transform: rotate(90deg);
    transition: transform 0.18s ease;
}

.stats-accordion.open .stats-accordion-arrow {
    transform: rotate(-90deg);
}

.stats-accordion-details {
    display: grid;
    gap: 2px;
    margin-top: 8px;
    padding: 8px 14px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background-color: var(--bg-secondary);
    box-shadow: 0 2px 8px var(--shadow);
}

.stats-accordion-details[hidden] {
    display: none;
}

.stats-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 36px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.stats-detail-row:last-child {
    border-bottom: 0;
}

.stats-detail-row .stat-label {
    margin: 0;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 800;
}

.stats-detail-row .stat-value {
    color: var(--accent);
    font-size: 17px;
    font-weight: 900;
    white-space: nowrap;
}

.statistics-filter-section {
    margin-bottom: 20px;
}

.statistics-title-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    width: 100%;
}

.statistics-filter-dropdown .task-filter-menu {
    left: auto;
    right: 0;
}

.statistics-header {
    align-items: flex-start;
}

.statistics-title-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0)),
        rgba(59, 130, 246, 0.13);
    color: var(--accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.statistics-title-icon .bi-icon {
    --bi-size: 22px;
}

.statistics-title-icon-calendar {
    border-color: rgba(16, 185, 129, 0.22);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0)),
        rgba(16, 185, 129, 0.13);
    color: var(--success);
}

.statistics-title-icon-projects {
    border-color: rgba(99, 102, 241, 0.22);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0)),
        rgba(99, 102, 241, 0.13);
    color: #6366f1;
}

[data-theme="dark"] .statistics-title-icon {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
        rgba(59, 130, 246, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .statistics-title-icon-calendar {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
        rgba(16, 185, 129, 0.16);
}

[data-theme="dark"] .statistics-title-icon-projects {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
        rgba(99, 102, 241, 0.17);
}

.statistics-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.statistics-filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.statistics-period.active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: white;
}

.statistics-custom-form {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.statistics-custom-form[hidden] {
    display: none !important;
}

.statistics-custom-form label {
    display: flex;
    flex: 1 1 160px;
    flex-direction: column;
    gap: 6px;
}

.statistics-custom-form label span {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.statistics-best-day {
    font-size: 22px;
    line-height: 1.2;
}

.statistics-comparison-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 30px;
}

.statistics-comparison-card {
    margin-bottom: 0;
}

.statistics-comparison-value {
    color: var(--text-primary);
    font-size: 28px;
    font-weight: 900;
    margin-top: 8px;
}

.statistics-comparison-value.positive {
    color: #22c55e;
}

.statistics-comparison-value.negative {
    color: #ef4444;
}

.statistics-comparison-detail {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    margin-top: 4px;
}

.statistics-heatmap-scroll {
    contain: paint;
    display: block;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    width: 100%;
}

.statistics-heatmap-section {
    overflow: hidden;
}

.statistics-heatmap-card {
    --heatmap-gap: clamp(3px, 0.35vw, 7px);
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 0;
    padding: 20px 18px 16px;
    width: 100%;
}

.statistics-heatmap-months {
    color: var(--text-primary);
    display: grid;
    font-size: clamp(15px, 0.9vw, 18px);
    font-weight: 700;
    gap: var(--heatmap-gap);
    grid-template-columns: repeat(var(--heatmap-columns), minmax(0, 1fr));
    margin-bottom: 8px;
    width: 100%;
}

.statistics-heatmap-month {
    white-space: nowrap;
}

.statistics-heatmap-body {
    display: flex;
    gap: 8px;
    width: 100%;
}

.statistics-heatmap-weeks {
    display: grid;
    gap: var(--heatmap-gap);
    grid-template-columns: repeat(var(--heatmap-columns), minmax(0, 1fr));
    width: 100%;
}

.statistics-heatmap-week {
    display: grid;
    gap: var(--heatmap-gap);
    grid-template-rows: repeat(7, auto);
    min-width: 0;
}

.statistics-heatmap-day {
    background-color: #ffffff;
    border: 1px solid #ebedf0;
    border-radius: 3px;
    cursor: default;
    display: block;
    aspect-ratio: 1 / 1;
    height: auto;
    padding: 0;
    width: 100%;
}

.statistics-heatmap-day.is-empty {
    background: transparent;
    border-color: transparent;
    cursor: default;
}

.statistics-heatmap-day.level-1 {
    background-color: #dcfce7;
    border-color: #d1fae5;
}

.statistics-heatmap-day.level-2 {
    background-color: #bbf7d0;
    border-color: #a7f3d0;
}

.statistics-heatmap-day.level-3 {
    background-color: #86efac;
    border-color: #6ee7b7;
}

.statistics-heatmap-day.level-4 {
    background-color: #4ade80;
    border-color: #34d399;
}

.statistics-heatmap-day.level-5 {
    background-color: #16a34a;
    border-color: #15803d;
}

.statistics-heatmap-footer {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    font-size: clamp(13px, 0.8vw, 15px);
    font-weight: 700;
    justify-content: space-between;
    margin-top: 16px;
}

.statistics-heatmap-legend {
    align-items: center;
    display: flex;
    gap: 6px;
}

.statistics-heatmap-legend .statistics-heatmap-day {
    cursor: default;
    flex: 0 0 14px;
    height: 14px;
    width: 14px;
}

.sr-only {
    clip: rect(0, 0, 0, 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.statistics-days-list,
.statistics-projects-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.statistics-day-card,
.statistics-project-row {
    background-color: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
}

.statistics-day-card {
    color: inherit;
    cursor: pointer;
    display: block;
    font: inherit;
    text-align: left;
    width: 100%;
}

.statistics-day-main,
.statistics-project-row {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.statistics-day-date,
.statistics-project-name {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 4px;
}

.statistics-day-metrics {
    align-items: flex-end;
    color: var(--accent);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    font-weight: 800;
    gap: 4px;
    text-align: right;
}

.statistics-day-more {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    margin-top: 8px;
}

.statistics-day-footer {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    justify-content: space-between;
    margin-top: 10px;
}

.statistics-project-percent {
    color: var(--accent);
    flex-shrink: 0;
    font-size: 22px;
    font-weight: 800;
}

.statistics-project-metrics {
    color: var(--accent);
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
}

.statistics-accordion-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    justify-content: space-between;
    padding: 0;
    text-align: left;
    width: 100%;
}

.statistics-accordion-toggle > span:first-child {
    display: grid;
    gap: 4px;
}

.statistics-accordion-toggle .section-title {
    align-items: center;
    display: inline-flex;
    gap: 10px;
}

.statistics-accordion-arrow {
    --bi-size: 18px;
    color: var(--text-secondary);
    flex: 0 0 auto;
    transition: transform 0.18s ease;
}

.statistics-heatmap-section.open .statistics-accordion-arrow,
.statistics-projects-section.open .statistics-accordion-arrow {
    transform: rotate(180deg);
}

.statistics-heatmap-scroll[hidden],
.statistics-projects-list[hidden] {
    display: none;
}

.statistics-heatmap-section .statistics-heatmap-scroll,
.statistics-projects-section .statistics-projects-list {
    margin-top: 12px;
}

@media (min-width: 901px) {
    .statistics-page {
        --statistics-blue: #4f7fd8;
        --statistics-blue-bg: rgba(79, 127, 216, 0.1);
        --statistics-blue-border: rgba(79, 127, 216, 0.2);
        --statistics-blue-shadow: rgba(79, 127, 216, 0.12);
        --statistics-mint: #5aa98d;
        --statistics-mint-bg: rgba(90, 169, 141, 0.1);
        --statistics-mint-border: rgba(90, 169, 141, 0.2);
        --statistics-mint-shadow: rgba(90, 169, 141, 0.12);
        --statistics-amber: #c08a3a;
        --statistics-amber-bg: rgba(192, 138, 58, 0.12);
        --statistics-amber-border: rgba(192, 138, 58, 0.22);
        --statistics-amber-shadow: rgba(192, 138, 58, 0.12);
        --statistics-red: #d96f72;
        --statistics-red-bg: rgba(217, 111, 114, 0.1);
        --statistics-red-border: rgba(217, 111, 114, 0.2);
        --statistics-red-shadow: rgba(217, 111, 114, 0.11);
        --statistics-indigo: #6672b8;
        --statistics-indigo-bg: rgba(102, 114, 184, 0.1);
        --statistics-indigo-border: rgba(102, 114, 184, 0.2);
        --statistics-indigo-shadow: rgba(102, 114, 184, 0.12);
        --statistics-lavender: #8d6fc0;
        --statistics-lavender-bg: rgba(141, 111, 192, 0.1);
        --statistics-lavender-border: rgba(141, 111, 192, 0.2);
        --statistics-card-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.18));
    }

    .statistics-page .section {
        border-radius: 12px;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    }

    .statistics-page .statistics-filter-section {
        border-color: var(--statistics-blue-border);
        background:
            var(--statistics-card-gradient),
            var(--statistics-blue-bg);
        box-shadow: 0 12px 30px var(--statistics-blue-shadow);
    }

    .statistics-page .statistics-header {
        padding: 0;
    }

    .statistics-page .statistics-title-row {
        flex-wrap: nowrap;
        gap: 16px;
    }

    .statistics-page .section-title {
        align-items: center;
        display: inline-flex;
        gap: 10px;
        line-height: 1.1;
    }

    .statistics-page .statistics-title-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 14px;
        border-color: var(--statistics-blue-border);
        background:
            var(--statistics-card-gradient),
            var(--statistics-blue-bg);
        color: var(--statistics-blue);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56), 0 8px 18px var(--statistics-blue-shadow);
    }

    .statistics-page .statistics-title-icon-calendar {
        border-color: var(--statistics-mint-border);
        background:
            var(--statistics-card-gradient),
            var(--statistics-mint-bg);
        color: var(--statistics-mint);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56), 0 8px 18px var(--statistics-mint-shadow);
    }

    .statistics-page .statistics-title-icon-projects {
        border-color: var(--statistics-indigo-border);
        background:
            var(--statistics-card-gradient),
            var(--statistics-indigo-bg);
        color: var(--statistics-indigo);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56), 0 8px 18px var(--statistics-indigo-shadow);
    }

    .statistics-page .statistics-filter-dropdown .task-filter-trigger {
        width: 44px;
        height: 44px;
        border: 1px solid var(--statistics-blue-border);
        border-radius: 14px;
        background:
            var(--statistics-card-gradient),
            var(--statistics-blue-bg);
        color: var(--statistics-blue);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56), 0 8px 18px var(--statistics-blue-shadow);
    }

    .statistics-page .statistics-filter-dropdown .task-filter-trigger:hover {
        border-color: rgba(79, 127, 216, 0.34);
        transform: translateY(-1px);
    }

    .statistics-page .statistics-filter-menu {
        min-width: 190px;
        padding: 8px;
        border-color: rgba(148, 163, 184, 0.28);
        border-radius: 14px;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
    }

    .statistics-page .statistics-filter-menu .task-date-filter {
        justify-content: space-between;
        min-height: 36px;
        border-radius: 10px;
        color: var(--text-secondary);
        font-weight: 800;
    }

    .statistics-page .statistics-filter-menu .task-date-filter:hover,
    .statistics-page .statistics-filter-menu .task-date-filter.active {
        border-color: var(--statistics-blue-border);
        background:
            var(--statistics-card-gradient),
            var(--statistics-blue-bg);
        color: var(--statistics-blue);
    }

    .statistics-page .statistics-custom-form {
        margin-top: 4px;
    }

    .statistics-page .statistics-custom-form .form-input {
        border-color: rgba(148, 163, 184, 0.28);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .statistics-page .statistics-submit-btn {
        border: 1px solid var(--statistics-blue-border);
        background:
            var(--statistics-card-gradient),
            var(--statistics-blue-bg);
        color: var(--statistics-blue);
        box-shadow: 0 8px 18px var(--statistics-blue-shadow);
    }

    .statistics-page .stats-bar.statistics-summary {
        gap: 14px;
        margin-bottom: 18px;
    }

    .statistics-page .statistics-summary .stat-card {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        grid-template-areas:
            "icon label"
            "icon value";
        align-items: center;
        min-height: 104px;
        padding: 18px;
        border-radius: 12px;
        border-color: var(--statistics-blue-border);
        background:
            var(--statistics-card-gradient),
            var(--statistics-blue-bg);
        box-shadow: 0 12px 26px var(--statistics-blue-shadow);
    }

    .statistics-page .statistics-summary .stat-card:nth-child(2) {
        border-color: var(--statistics-mint-border);
        background:
            var(--statistics-card-gradient),
            var(--statistics-mint-bg);
        box-shadow: 0 12px 26px var(--statistics-mint-shadow);
    }

    .statistics-page .statistics-summary .stat-card:nth-child(3) {
        border-color: var(--statistics-amber-border);
        background:
            var(--statistics-card-gradient),
            var(--statistics-amber-bg);
        box-shadow: 0 12px 26px var(--statistics-amber-shadow);
    }

    .statistics-page .statistics-summary .stat-card:nth-child(4) {
        border-color: var(--statistics-red-border);
        background:
            var(--statistics-card-gradient),
            var(--statistics-red-bg);
        box-shadow: 0 12px 26px var(--statistics-red-shadow);
    }

    .statistics-page .statistics-summary .stat-icon {
        grid-area: icon;
        width: 44px;
        height: 44px;
        margin: 0;
        border: 1px solid var(--statistics-blue-border);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.64);
        color: var(--statistics-blue);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
    }

    .statistics-page .statistics-summary .stat-card:nth-child(2) .stat-icon {
        border-color: var(--statistics-mint-border);
        color: var(--statistics-mint);
    }

    .statistics-page .statistics-summary .stat-card:nth-child(3) .stat-icon {
        border-color: var(--statistics-amber-border);
        color: var(--statistics-amber);
    }

    .statistics-page .statistics-summary .stat-card:nth-child(4) .stat-icon {
        border-color: var(--statistics-red-border);
        color: var(--statistics-red);
    }

    .statistics-page .statistics-summary .stat-label {
        grid-area: label;
        margin: 0 0 4px;
        color: var(--text-secondary);
        font-size: 13px;
        font-weight: 800;
    }

    .statistics-page .statistics-summary .stat-value {
        grid-area: value;
        color: var(--statistics-blue);
        font-size: clamp(25px, 1.75vw, 32px);
        line-height: 1.05;
        overflow-wrap: anywhere;
    }

    .statistics-page .statistics-summary .stat-card:nth-child(2) .stat-value {
        color: var(--statistics-mint);
    }

    .statistics-page .statistics-summary .stat-card:nth-child(3) .stat-value {
        color: var(--statistics-amber);
    }

    .statistics-page .statistics-summary .stat-card:nth-child(4) .stat-value {
        color: var(--statistics-red);
    }

    .statistics-page .statistics-summary .statistics-best-day {
        font-size: clamp(18px, 1.25vw, 23px);
    }

    .statistics-page .statistics-comparison-grid {
        gap: 14px;
        margin-bottom: 18px;
    }

    .statistics-page .statistics-comparison-card {
        border-color: var(--statistics-mint-border);
        background:
            var(--statistics-card-gradient),
            var(--statistics-mint-bg);
        box-shadow: 0 12px 26px var(--statistics-mint-shadow);
    }

    .statistics-page .statistics-comparison-card:nth-child(2) {
        border-color: var(--statistics-lavender-border);
        background:
            var(--statistics-card-gradient),
            var(--statistics-lavender-bg);
        box-shadow: 0 12px 26px rgba(141, 111, 192, 0.12);
    }

    .statistics-page .statistics-comparison-value {
        font-size: 30px;
        line-height: 1.05;
    }

    .statistics-page .statistics-comparison-value.positive {
        color: #42a16a;
    }

    .statistics-page .statistics-comparison-value.negative {
        color: var(--statistics-red);
    }

    .statistics-page .statistics-heatmap-section,
    .statistics-page .statistics-projects-section {
        padding: 20px;
        border-color: var(--statistics-mint-border);
        background:
            var(--statistics-card-gradient),
            var(--statistics-mint-bg);
        box-shadow: 0 12px 30px var(--statistics-mint-shadow);
    }

    .statistics-page .statistics-projects-section {
        border-color: var(--statistics-indigo-border);
        background:
            var(--statistics-card-gradient),
            var(--statistics-indigo-bg);
        box-shadow: 0 12px 30px var(--statistics-indigo-shadow);
    }

    .statistics-page .statistics-accordion-toggle {
        min-height: 44px;
    }

    .statistics-page .statistics-accordion-arrow {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 1px solid rgba(148, 163, 184, 0.24);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.58);
        color: var(--text-secondary);
    }

    .statistics-page .statistics-heatmap-card {
        --heatmap-gap: clamp(4px, 0.42vw, 8px);
        padding: 22px 20px 18px;
        border-color: rgba(90, 169, 141, 0.18);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .statistics-page .statistics-heatmap-months {
        color: var(--text-primary);
        font-size: clamp(14px, 0.92vw, 18px);
        font-weight: 900;
    }

    .statistics-page .statistics-heatmap-day {
        border-color: rgba(203, 213, 225, 0.68);
        border-radius: 4px;
        background-color: #ffffff;
    }

    .statistics-page .statistics-heatmap-day.level-1 {
        background-color: #e8f8ed;
        border-color: #d5efd9;
    }

    .statistics-page .statistics-heatmap-day.level-2 {
        background-color: #cbeed7;
        border-color: #b7e2c5;
    }

    .statistics-page .statistics-heatmap-day.level-3 {
        background-color: #9fdbb3;
        border-color: #8dcea3;
    }

    .statistics-page .statistics-heatmap-day.level-4 {
        background-color: #67bd87;
        border-color: #5cac7b;
    }

    .statistics-page .statistics-heatmap-day.level-5 {
        background-color: #2f965d;
        border-color: #287e50;
    }

    .statistics-page .statistics-heatmap-footer {
        color: var(--text-secondary);
        font-size: 13px;
        margin-top: 18px;
    }

    .statistics-page .statistics-projects-list {
        gap: 8px;
    }

    .statistics-page .statistics-project-row {
        min-height: 48px;
        padding: 12px 14px;
        border-color: rgba(102, 114, 184, 0.18);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.7);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    .statistics-page .statistics-project-name {
        margin: 0;
        font-size: 15px;
        font-weight: 900;
    }

    .statistics-page .statistics-project-metrics {
        color: var(--statistics-indigo);
        font-size: 14px;
        font-weight: 900;
    }
}

.statistics-modal-overlay {
    align-items: center;
    background: rgba(15, 23, 42, 0.58);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 20px;
    position: fixed;
    z-index: 3000;
}

.statistics-modal-overlay[hidden] {
    display: none;
}

.statistics-modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    max-height: min(720px, 86vh);
    max-width: 720px;
    overflow: auto;
    padding: 20px;
    width: min(720px, 100%);
}

.statistics-modal-header {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.statistics-task-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.statistics-task-row {
    align-items: center;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 12px;
}

.statistics-task-title {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 800;
}

.section {
    background-color: var(--bg-secondary);
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px var(--shadow);
    border: 1px solid var(--border);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-header:not(:first-child) {
    margin-top: 20px;
}

.section-title {
    font-size: 24px;
    font-weight: bold;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.btn-primary {
    background-color: var(--accent);
    color: white;
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
}

.btn-success {
    background-color: var(--success);
    color: white;
}

.btn-success:hover {
    background-color: #059669;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
}

.btn-warning {
    background-color: var(--warning);
    color: white;
}

.btn-warning:hover {
    background-color: #d97706;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
}

.btn-danger {
    background-color: var(--danger);
    color: white;
}

.btn-note {
    background-color: #8b5cf6;
    color: #fff;
}

.btn-note:hover {
    background-color: #7c3aed;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
}

.btn-report {
    background-color: #2f8da3;
    color: #fff;
}

.btn-report:hover {
    background-color: #287b8e;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
}

.btn-focus {
    background-color: var(--success);
    color: #fff;
}

.btn-focus:hover,
.btn-focus.active {
    background-color: #059669;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow), 0 0 0 3px rgba(16, 185, 129, 0.18);
}

.focus-mode-state-icon {
    --bi-size: 22px;
    flex: 0 0 22px;
    line-height: 1;
}

.task-create-action .task-create-plus-icon,
.note-create-action .task-create-plus-icon {
    --bi-size: 18px;
    flex: 0 0 18px;
    line-height: 1;
}

.report-action .report-action-icon {
    --bi-size: 22px;
    flex: 0 0 22px;
    line-height: 1;
    vertical-align: 0;
}

.btn-focus,
.mobile-fab-action.focus,
.btn-clear-focus,
#mobileFabClearFocusButton,
.task-create-action,
.note-create-action,
.report-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-clear-focus {
    background-color: #c35b5b;
    color: #fff;
}

.btn-clear-focus:hover {
    background-color: #ad4e4e;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
}

.btn-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.task-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.task-item {
    background-color: var(--bg-primary);
    padding: 16px;
    border-radius: 8px;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
    cursor: grab;
    position: relative;
}

.task-item:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px var(--shadow);
}

.task-item:active {
    cursor: grabbing;
}

.task-item:not(.dragging):hover {
    cursor: pointer;
}

.task-item.dragging {
    opacity: 0.5;
    transform: scale(0.98);
    cursor: grabbing;
    box-shadow: 0 8px 16px var(--shadow);
}

.task-drag-preview {
    position: fixed;
    top: -1000px;
    left: -1000px;
    max-width: 240px;
    padding: 8px 12px;
    border-radius: 999px;
    background-color: var(--accent);
    color: white;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 10px 24px var(--shadow);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
}

.toast-stack {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}

.app-toast {
    position: relative;
    width: 100%;
    padding: 14px 16px 14px 44px;
    border: 1px solid rgba(245, 158, 11, 0.28);
    border-radius: 8px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 14px 34px var(--shadow), inset 4px 0 0 var(--toast-accent, var(--warning));
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    pointer-events: auto;
}

.app-toast:hover {
    border-color: var(--toast-accent, var(--warning));
}

.app-toast::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background-color: var(--toast-accent, var(--warning));
    box-shadow: 0 0 0 4px var(--toast-soft, rgba(245, 158, 11, 0.18));
    transform: translateY(-50%);
}

.app-toast.success {
    --toast-accent: var(--success);
    --toast-soft: rgba(16, 185, 129, 0.16);
    border-color: rgba(16, 185, 129, 0.32);
}

.app-toast.warning {
    --toast-accent: var(--warning);
    --toast-soft: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.34);
}

.app-toast.danger {
    --toast-accent: var(--danger);
    --toast-soft: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.34);
}

.app-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.app-toast.leaving {
    opacity: 0;
    transform: translateY(-8px);
}

.task-item.completed {
    opacity: 0.6;
}

.task-item.running {
    border-color: var(--success) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), 0 10px 28px var(--shadow);
    animation: activeTaskPulse 1.2s ease-in-out infinite;
}

.task-item.running:hover {
    border-color: var(--success) !important;
}

.task-item.running::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 2px solid var(--success);
    border-radius: 12px;
    pointer-events: none;
    animation: activeTaskRing 1.2s ease-in-out infinite;
}

.task-item.focus-highlight {
    border-color: var(--success);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.22), 0 8px 24px var(--shadow);
}

.task-timer-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid var(--accent);
    background-color: var(--bg-primary);
    color: var(--accent);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
}

.task-timer-btn:hover {
    background-color: var(--accent);
    color: white;
    transform: scale(1.1);
}

.task-timer-btn.running {
    background-color: var(--success);
    border-color: var(--success);
    color: white;
    animation: pulse 2s infinite;
}

.task-timer-btn.paused {
    background-color: var(--warning);
    border-color: var(--warning);
    color: white;
}

.task-timer-btn.completing {
    background-color: var(--accent);
    border-color: var(--accent);
    color: white;
    transform: scale(0.9);
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--success);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
}

@keyframes activeTaskPulse {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.24), 0 8px 22px var(--shadow);
    }
    50% {
        box-shadow: 0 0 0 9px rgba(16, 185, 129, 0.08), 0 14px 34px var(--shadow);
    }
}

@keyframes activeTaskRing {
    0%, 100% {
        opacity: 0.95;
        transform: scale(1);
    }
    50% {
        opacity: 0.35;
        transform: scale(1.015);
    }
}

.task-content {
    flex: 1;
    min-width: 0;
}

.task-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
    overflow-wrap: anywhere;
}

.task-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--text-secondary);
}

.task-recurrence,
.task-overdue {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}

.task-recurrence {
    background-color: rgba(59, 130, 246, 0.12);
    color: var(--accent);
}

.task-overdue {
    background-color: rgba(239, 68, 68, 0.12);
    color: var(--danger);
}

.task-time {
    display: flex;
    align-items: center;
    gap: 4px;
}

.task-actions {
    display: flex;
    gap: 8px;
}

.task-section-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.tasks-layout .main-content > .section:first-of-type .section-header {
    align-items: flex-start;
    gap: 12px;
}

.tasks-layout .main-content > .section:first-of-type .task-section-actions {
    justify-self: end;
}

.task-section-title-row .section-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
    white-space: nowrap;
}

.task-filter-dropdown {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.tasks-layout .task-filter-dropdown {
    grid-column: 1 / -1;
    display: block;
}

.task-filter-trigger {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--bg-primary);
    color: var(--accent);
    cursor: pointer;
    box-shadow: 0 4px 12px var(--shadow);
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.tasks-layout .task-filter-trigger {
    display: none;
}

.task-filter-trigger:hover,
.task-filter-trigger[aria-expanded="true"] {
    border-color: var(--accent);
    background-color: rgba(59, 130, 246, 0.1);
}

.task-filter-trigger .bi-icon {
    --bi-size: 19px;
}

.task-filter-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    display: none;
    min-width: 210px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background-color: var(--bg-secondary);
    box-shadow: 0 16px 36px var(--shadow);
}

.tasks-layout .task-filter-menu {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

@media (min-width: 769px) {
    .tasks-layout .task-filter-menu {
        justify-content: flex-start;
    }
}

.modal-close-btn.habit-desktop-modal-close,
.habit-desktop-delete-copy {
    display: none;
}

/* Desktop habit dialogs share the restrained task, note, and project modal language. */
@media (min-width: 769px) {
    #createHabitModal,
    #editHabitModal,
    #deleteHabitModal {
        padding: 24px;
        background-color: rgba(15, 23, 42, 0.48);
    }

    #createHabitModal .habit-form-modal-content,
    #editHabitModal .habit-form-modal-content {
        width: min(560px, calc(100vw - 48px));
        max-width: 560px;
        height: auto;
        min-height: 0;
        max-height: min(80dvh, 680px);
        padding: 28px;
        overflow-y: auto;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 12px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12)),
            color-mix(in srgb, var(--bg-secondary) 92%, white);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.1);
    }

    #createHabitModal .habit-form-modal-content .modal-header,
    #editHabitModal .habit-form-modal-content .modal-header {
        padding: 0;
        margin: 0 52px 22px 0;
    }

    #createHabitModal .habit-form-modal-content .modal-header h2,
    #editHabitModal .habit-form-modal-content .modal-header h2 {
        margin: 0;
        color: var(--text-primary);
        font-size: 22px;
        line-height: 1.25;
    }

    #createHabitModal .habit-form-modal-content form,
    #editHabitModal .habit-form-modal-content form {
        display: grid;
        gap: 14px;
    }

    #createHabitModal .habit-form-modal-content .form-group,
    #editHabitModal .habit-form-modal-content .form-group {
        margin: 0;
    }

    #createHabitModal .habit-form-modal-content .form-group:not(.habit-color-field) .form-label,
    #editHabitModal .habit-form-modal-content .form-group:not(.habit-color-field) .form-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    #createHabitModal .habit-form-modal-content .form-input,
    #createHabitModal .habit-form-modal-content .form-textarea,
    #editHabitModal .habit-form-modal-content .form-input,
    #editHabitModal .habit-form-modal-content .form-textarea {
        width: 100%;
        padding: 11px 14px;
        border: 1px solid rgba(148, 163, 184, 0.38);
        border-radius: 8px;
        background-color: var(--bg-primary);
        color: var(--text-primary);
        font-size: 15px;
    }

    #createHabitModal .habit-form-modal-content .form-input,
    #editHabitModal .habit-form-modal-content .form-input {
        min-height: 50px;
    }

    #createHabitModal .habit-form-modal-content .form-textarea,
    #editHabitModal .habit-form-modal-content .form-textarea {
        min-height: 96px;
        resize: vertical;
    }

    #createHabitModal .habit-form-modal-content .form-input:focus,
    #createHabitModal .habit-form-modal-content .form-textarea:focus,
    #editHabitModal .habit-form-modal-content .form-input:focus,
    #editHabitModal .habit-form-modal-content .form-textarea:focus {
        border-color: rgba(79, 127, 216, 0.55);
        box-shadow: 0 0 0 3px rgba(79, 127, 216, 0.12);
    }

    #createHabitModal .habit-form-modal-content .form-input::placeholder,
    #createHabitModal .habit-form-modal-content .form-textarea::placeholder,
    #editHabitModal .habit-form-modal-content .form-input::placeholder,
    #editHabitModal .habit-form-modal-content .form-textarea::placeholder {
        color: var(--text-secondary);
        opacity: 0.72;
    }

    #createHabitModal .habit-color-field,
    #editHabitModal .habit-color-field {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 50px;
        padding: 7px 8px 7px 14px;
        border: 1px solid rgba(148, 163, 184, 0.38);
        border-radius: 8px;
        background-color: var(--bg-primary);
    }

    #createHabitModal .habit-color-field .form-label,
    #editHabitModal .habit-color-field .form-label {
        margin: 0;
        color: var(--text-secondary);
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
    }

    #createHabitModal .habit-color-field .form-control-color,
    #editHabitModal .habit-color-field .form-control-color {
        width: 42px;
        height: 36px;
        padding: 3px;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, 0.32);
        border-radius: 8px;
        background: var(--bg-secondary);
        cursor: pointer;
    }

    #createHabitModal .habit-color-field .form-control-color::-webkit-color-swatch-wrapper,
    #editHabitModal .habit-color-field .form-control-color::-webkit-color-swatch-wrapper {
        padding: 0;
    }

    #createHabitModal .habit-color-field .form-control-color::-webkit-color-swatch,
    #createHabitModal .habit-color-field .form-control-color::-moz-color-swatch,
    #editHabitModal .habit-color-field .form-control-color::-webkit-color-swatch,
    #editHabitModal .habit-color-field .form-control-color::-moz-color-swatch {
        border: 0;
        border-radius: 5px;
    }

    #createHabitModal .habit-form-actions,
    #editHabitModal .habit-form-actions {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding: 4px 0 0;
        margin: 0;
        border: 0;
        background: transparent;
    }

    #createHabitModal .habit-modal-cancel,
    #editHabitModal .habit-modal-cancel {
        display: none;
    }

    #createHabitModal .habit-form-actions .btn-primary,
    #editHabitModal .habit-form-actions .btn-primary {
        min-width: 126px;
        min-height: 40px;
        padding: 9px 18px;
        border: 1px solid rgba(90, 169, 141, 0.28);
        border-radius: 8px;
        background-color: rgba(90, 169, 141, 0.11);
        color: #5aa98d;
        box-shadow: none;
    }

    #createHabitModal .habit-form-actions .btn-primary:hover,
    #editHabitModal .habit-form-actions .btn-primary:hover {
        border-color: rgba(90, 169, 141, 0.44);
        background-color: rgba(90, 169, 141, 0.16);
        color: #418e74;
    }

    #createHabitModal .habit-desktop-modal-close,
    #editHabitModal .habit-desktop-modal-close,
    #deleteHabitModal .habit-desktop-modal-close {
        position: absolute;
        display: inline-flex;
        width: 36px;
        height: 36px;
        border: 1px solid rgba(217, 111, 114, 0.22);
        border-radius: 8px;
        background-color: rgba(217, 111, 114, 0.1);
        color: #d96f72;
        font-size: 0;
    }

    #createHabitModal .habit-desktop-modal-close::before,
    #createHabitModal .habit-desktop-modal-close::after,
    #editHabitModal .habit-desktop-modal-close::before,
    #editHabitModal .habit-desktop-modal-close::after,
    #deleteHabitModal .habit-desktop-modal-close::before,
    #deleteHabitModal .habit-desktop-modal-close::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 2px;
        border-radius: 999px;
        background-color: currentColor;
        content: "";
        transform-origin: center;
    }

    #createHabitModal .habit-desktop-modal-close::before,
    #editHabitModal .habit-desktop-modal-close::before,
    #deleteHabitModal .habit-desktop-modal-close::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    #createHabitModal .habit-desktop-modal-close::after,
    #editHabitModal .habit-desktop-modal-close::after,
    #deleteHabitModal .habit-desktop-modal-close::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    #createHabitModal .habit-desktop-modal-close:hover,
    #editHabitModal .habit-desktop-modal-close:hover,
    #deleteHabitModal .habit-desktop-modal-close:hover {
        border-color: rgba(217, 111, 114, 0.38);
        background-color: rgba(217, 111, 114, 0.16);
        color: #d96f72;
    }

    #deleteHabitModal .habit-delete-modal-content {
        width: min(420px, calc(100vw - 48px));
        max-width: 420px;
        height: auto;
        min-height: 0;
        padding: 28px;
        overflow: visible;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 12px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12)),
            color-mix(in srgb, var(--bg-secondary) 92%, white);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.1);
        text-align: center;
    }

    #deleteHabitModal .habit-delete-modal-content .modal-header {
        padding: 0;
        margin: 0 48px 0;
    }

    #deleteHabitModal .habit-delete-modal-content .modal-header h2 {
        margin: 0;
        color: var(--text-primary);
        font-size: 22px;
        line-height: 1.25;
    }

    #deleteHabitModal .habit-desktop-delete-copy {
        display: block;
        margin: 10px 0 0;
        color: var(--text-secondary);
        font-size: 14px;
    }

    #deleteHabitModal .habit-delete-actions {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding: 0;
        margin: 20px 0 0;
        border: 0;
        background: transparent;
    }

    #deleteHabitModal .habit-delete-actions .btn {
        min-width: 112px;
        min-height: 40px;
        padding: 9px 16px;
        border-radius: 8px;
        box-shadow: none;
    }

    #deleteHabitModal .habit-delete-actions .btn-danger {
        border: 1px solid rgba(217, 111, 114, 0.28);
        background-color: rgba(217, 111, 114, 0.1);
        color: #d96f72;
    }

    #deleteHabitModal .habit-delete-actions .btn-secondary {
        border: 1px solid rgba(148, 163, 184, 0.3);
        background-color: rgba(148, 163, 184, 0.1);
        color: var(--text-secondary);
    }

    #deleteHabitModal .delete-confirm-option {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
        color: var(--text-secondary);
        font-size: 13px;
    }

    #deleteHabitModal .delete-confirm-option input {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: #d96f72;
    }
}

/* Desktop project creation dialog aligned with the current task and note modal style. */
@media (min-width: 769px) {
    #createProjectModal {
        padding: 24px;
        background-color: rgba(15, 23, 42, 0.48);
    }

    #createProjectModal .create-project-modal-content {
        width: min(480px, calc(100vw - 48px));
        max-width: 480px;
        max-height: min(80dvh, 620px);
        padding: 28px;
        overflow: visible;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 12px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12)),
            color-mix(in srgb, var(--bg-secondary) 92%, white);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.1);
    }

    #createProjectModal .modal-header {
        margin: 0 52px 22px 0;
        color: var(--text-primary);
        font-size: 22px;
        line-height: 1.25;
    }

    #createProjectModal form {
        display: grid;
        gap: 14px;
    }

    #createProjectModal .form-group,
    #createProjectModal .form-actions {
        margin: 0;
    }

    #createProjectModal .form-input {
        width: 100%;
        min-height: 50px;
        padding: 11px 14px;
        border: 1px solid rgba(148, 163, 184, 0.38);
        border-radius: 8px;
        background-color: var(--bg-primary);
        color: var(--text-primary);
    }

    #createProjectModal .form-input:focus {
        border-color: rgba(79, 127, 216, 0.55);
        box-shadow: 0 0 0 3px rgba(79, 127, 216, 0.12);
    }

    #createProjectModal .form-input::placeholder {
        color: var(--text-muted);
        opacity: 0.82;
    }

    #createProjectModal .create-project-color-field {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 50px;
        padding: 7px 8px 7px 14px;
        border: 1px solid rgba(148, 163, 184, 0.38);
        border-radius: 8px;
        background-color: var(--bg-primary);
    }

    #createProjectModal .create-project-color-label {
        margin: 0;
        color: var(--text-secondary);
        font-weight: 700;
        cursor: pointer;
    }

    #createProjectModal .create-project-color-input {
        width: 42px;
        height: 36px;
        padding: 3px;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, 0.32);
        border-radius: 8px;
        background: var(--bg-secondary);
        cursor: pointer;
    }

    #createProjectModal .create-project-color-input::-webkit-color-swatch-wrapper {
        padding: 0;
    }

    #createProjectModal .create-project-color-input::-webkit-color-swatch,
    #createProjectModal .create-project-color-input::-moz-color-swatch {
        border: 0;
        border-radius: 5px;
    }

    #createProjectModal .create-project-actions {
        justify-content: center;
        padding: 4px 0 0;
        border: 0;
        background: transparent;
    }

    #createProjectModal .create-project-actions .btn-primary {
        min-width: 126px;
        min-height: 40px;
        padding: 9px 18px;
        border: 1px solid rgba(79, 127, 216, 0.28);
        border-radius: 8px;
        background-color: rgba(79, 127, 216, 0.12);
        color: #4f7fd8;
        box-shadow: none;
    }

    #createProjectModal .create-project-actions .btn-primary:hover {
        border-color: rgba(79, 127, 216, 0.42);
        background-color: rgba(79, 127, 216, 0.16);
        color: #356fc7;
    }

    #createProjectModal .modal-close-btn {
        position: absolute;
        width: 36px;
        height: 36px;
        border: 1px solid rgba(217, 111, 114, 0.22);
        border-radius: 8px;
        background-color: rgba(217, 111, 114, 0.1);
        color: #d96f72;
        font-size: 0;
    }

    #createProjectModal .modal-close-btn::before,
    #createProjectModal .modal-close-btn::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 2px;
        border-radius: 999px;
        background-color: currentColor;
        content: "";
        transform-origin: center;
    }

    #createProjectModal .modal-close-btn::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    #createProjectModal .modal-close-btn::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    #createProjectModal .modal-close-btn:hover {
        border-color: rgba(217, 111, 114, 0.38);
        background-color: rgba(217, 111, 114, 0.16);
        color: #d96f72;
    }
}

.task-filter-menu.open {
    display: grid;
    gap: 6px;
}

.tasks-layout .task-filter-menu.open {
    display: flex;
}

.task-date-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.task-date-filter {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--border);
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s ease;
}

.task-filter-menu .task-date-filter {
    width: 100%;
    min-height: 40px;
    border-radius: 9px;
    text-align: left;
}

.tasks-layout .task-filter-menu .task-date-filter {
    width: auto;
    min-height: 40px;
    border-radius: 8px;
}

.task-date-filter:hover,
.task-date-filter.active {
    border-color: var(--accent);
    color: var(--accent);
    background-color: rgba(59, 130, 246, 0.1);
}

.task-date-filter strong {
    display: inline-flex;
    min-width: 22px;
    justify-content: center;
    padding: 2px 6px;
    border-radius: 999px;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.2;
}

.task-filter-menu .task-date-filter.active strong {
    background-color: rgba(59, 130, 246, 0.14);
    color: var(--accent);
}

@media (min-width: 769px) {
    #createNoteModal .create-note-desktop-hidden-label {
        display: none;
    }

    #editNoteModal .edit-note-desktop-hidden-label {
        display: none;
    }

    .tasks-layout {
        --tasks-blue: #4f7fd8;
        --tasks-blue-bg: rgba(79, 127, 216, 0.1);
        --tasks-blue-border: rgba(79, 127, 216, 0.16);
        --tasks-blue-shadow: rgba(79, 127, 216, 0.13);
        --tasks-mint: #5aa98d;
        --tasks-mint-bg: rgba(90, 169, 141, 0.1);
        --tasks-mint-border: rgba(90, 169, 141, 0.16);
        --tasks-mint-shadow: rgba(90, 169, 141, 0.13);
        --tasks-amber: #c08a3a;
        --tasks-amber-bg: rgba(192, 138, 58, 0.11);
        --tasks-amber-border: rgba(192, 138, 58, 0.17);
        --tasks-amber-shadow: rgba(192, 138, 58, 0.13);
        --tasks-indigo: #6672b8;
        --tasks-indigo-bg: rgba(102, 114, 184, 0.1);
        --tasks-indigo-border: rgba(102, 114, 184, 0.16);
        --tasks-indigo-shadow: rgba(102, 114, 184, 0.13);
        --tasks-lavender: #9b78c8;
        --tasks-lavender-bg: rgba(155, 120, 200, 0.1);
        --tasks-lavender-border: rgba(155, 120, 200, 0.16);
        --tasks-lavender-shadow: rgba(155, 120, 200, 0.13);
        --tasks-red: #d96f72;
        --tasks-red-bg: rgba(217, 111, 114, 0.1);
        --tasks-red-border: rgba(217, 111, 114, 0.16);
        --tasks-red-shadow: rgba(217, 111, 114, 0.13);
        --tasks-surface-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12));
    }

    .tasks-layout .btn,
    .tasks-layout .project-item,
    .tasks-layout .task-filter-menu .task-date-filter,
    .tasks-layout .task-item {
        box-sizing: border-box;
    }

    .tasks-layout .tasks-sidebar,
    .tasks-layout .section,
    .tasks-layout .desktop-stats-bar .stat-card {
        background:
            var(--tasks-surface-gradient),
            color-mix(in srgb, var(--bg-secondary) 92%, white);
        border-color: rgba(148, 163, 184, 0.28);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.06);
    }

    .tasks-layout .desktop-stats-bar .stat-card {
        border-radius: 12px;
        transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }

    .tasks-layout .desktop-stats-bar .stat-card:hover {
        transform: translateY(-1px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 12px 28px rgba(15, 23, 42, 0.08);
    }

    .tasks-layout .desktop-stats-bar .stat-card:nth-child(1) {
        border-color: var(--tasks-blue-border);
    }

    .tasks-layout .desktop-stats-bar .stat-card:nth-child(2) {
        border-color: var(--tasks-mint-border);
    }

    .tasks-layout .desktop-stats-bar .stat-card:nth-child(3) {
        border-color: var(--tasks-amber-border);
    }

    .tasks-layout .desktop-stats-bar .stat-card:nth-child(4) {
        border-color: var(--tasks-red-border);
    }

    .tasks-layout .desktop-stats-bar .stat-card:nth-child(1) .stat-value {
        color: var(--tasks-blue);
    }

    .tasks-layout .desktop-stats-bar .stat-card:nth-child(2) .stat-value {
        color: var(--tasks-mint);
    }

    .tasks-layout .desktop-stats-bar .stat-card:nth-child(3) .stat-value {
        color: var(--tasks-amber);
    }

    .tasks-layout .desktop-stats-bar .stat-card:nth-child(4) .stat-value {
        color: var(--tasks-red);
    }

    .tasks-layout .desktop-stats-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        gap: 16px;
        margin-bottom: 20px;
    }

    .tasks-layout .desktop-stats-bar .desktop-project-stats-card {
        display: grid;
        gap: 8px;
        padding: 16px;
    }

    .tasks-layout .desktop-stats-bar .desktop-daily-card {
        display: flex;
        min-width: 0;
        min-height: 0;
        flex-direction: column;
        gap: 8px;
        padding: 16px;
        cursor: pointer;
    }

    .tasks-layout .desktop-stats-bar .desktop-daily-card:focus-visible {
        outline: 2px solid rgba(79, 127, 216, 0.55);
        outline-offset: 2px;
    }

    .tasks-layout .desktop-daily-card-header {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 38px;
    }

    .tasks-layout .desktop-daily-card-header .stat-icon {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        margin-bottom: 0;
    }

    .tasks-layout .desktop-daily-card-header .stat-icon .bi-icon {
        --bi-size: 19px;
    }

    .tasks-layout .desktop-daily-card-header h2 {
        margin: 0;
        color: var(--text-primary);
        font-size: 16px;
        line-height: 1.2;
    }

    .tasks-layout .desktop-habits-card .desktop-daily-card-header .stat-icon {
        border-color: rgba(90, 169, 141, 0.26);
        background: rgba(90, 169, 141, 0.1);
        color: #5aa98d;
    }

    .tasks-layout .desktop-shopping-card .desktop-daily-card-header .stat-icon {
        border-color: rgba(192, 138, 58, 0.26);
        background: rgba(192, 138, 58, 0.1);
        color: #c08a3a;
    }

    .tasks-layout .desktop-daily-badges {
        display: flex;
        align-content: flex-start;
        flex: 1 1 auto;
        flex-wrap: wrap;
        gap: 8px;
        max-height: 144px;
        min-height: 0;
        overflow: hidden;
    }

    .tasks-layout .desktop-daily-badge {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        min-height: 30px;
        gap: 6px;
        padding: 4px 9px 4px 6px;
        border: 1px solid rgba(148, 163, 184, 0.3);
        border-radius: 8px;
        background: rgba(148, 163, 184, 0.08);
        color: var(--text-secondary);
        cursor: pointer;
        font: inherit;
        font-size: 12px;
        font-weight: 750;
        line-height: 1.2;
        text-align: left;
        transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }

    .tasks-layout .desktop-daily-badge:hover {
        border-color: rgba(79, 127, 216, 0.34);
        color: var(--text-primary);
        transform: translateY(-1px);
    }

    .tasks-layout .desktop-daily-badge.is-completed {
        border-color: rgba(90, 169, 141, 0.3);
        background: rgba(90, 169, 141, 0.12);
        color: #4f9b7e;
    }

    .tasks-layout .desktop-daily-check {
        display: inline-grid;
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        place-items: center;
        border: 1.5px solid currentColor;
        border-radius: 50%;
        color: inherit;
        font-size: 11px;
        font-weight: 900;
    }

    .tasks-layout .desktop-daily-badge-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tasks-layout .desktop-daily-empty {
        align-self: center;
        color: var(--text-secondary);
        font-size: 12px;
    }

    .tasks-layout .desktop-project-stats-placeholder {
        display: none;
    }

    .tasks-layout .desktop-project-stat-row {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        min-height: 38px;
    }

    .tasks-layout .desktop-project-stat-row .stat-icon {
        display: inline-grid;
        place-items: center;
        width: 38px;
        height: 38px;
        margin: 0;
        border: 1px solid var(--tasks-blue-border);
        border-radius: 11px;
        background: var(--tasks-blue-bg);
        color: var(--tasks-blue);
    }

    .tasks-layout .desktop-project-stat-row .stat-icon .bi-icon {
        --bi-size: 19px;
    }

    .tasks-layout .desktop-project-stat-row.today .stat-icon {
        border-color: var(--tasks-mint-border);
        background: var(--tasks-mint-bg);
        color: var(--tasks-mint);
    }

    .tasks-layout .desktop-project-stat-row.streak .stat-icon {
        border-color: var(--tasks-amber-border);
        background: var(--tasks-amber-bg);
        color: var(--tasks-amber);
    }

    .tasks-layout .desktop-project-stat-row.completed .stat-icon {
        border-color: var(--tasks-red-border);
        background: var(--tasks-red-bg);
        color: var(--tasks-red);
    }

    .tasks-layout .desktop-project-stat-label {
        min-width: 0;
        color: var(--text-secondary);
        font-size: 15px;
        font-weight: 700;
    }

    .tasks-layout .desktop-project-stat-value {
        color: var(--text-primary);
        font-size: 17px;
        font-weight: 800;
        white-space: nowrap;
    }

    .tasks-layout .btn {
        border: 1px solid var(--tasks-btn-border, var(--tasks-blue-border));
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.08)),
            var(--tasks-btn-bg, var(--tasks-blue-bg));
        color: var(--tasks-btn-color, var(--tasks-blue));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 8px 18px var(--tasks-btn-shadow, var(--tasks-blue-shadow));
        font-weight: 700;
        transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }

    .tasks-layout .btn:hover {
        border-color: color-mix(in srgb, var(--tasks-btn-border, var(--tasks-blue-border)) 62%, var(--tasks-btn-color, var(--tasks-blue)));
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.12)),
            color-mix(in srgb, var(--tasks-btn-bg, var(--tasks-blue-bg)) 88%, var(--tasks-btn-color, var(--tasks-blue)));
        color: var(--tasks-btn-color, var(--tasks-blue));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 10px 22px var(--tasks-btn-shadow, var(--tasks-blue-shadow));
        transform: translateY(-1px);
    }

    .tasks-layout .btn-primary,
    .tasks-layout .task-action-primary {
        --tasks-btn-color: var(--tasks-blue);
        --tasks-btn-bg: var(--tasks-blue-bg);
        --tasks-btn-border: var(--tasks-blue-border);
        --tasks-btn-shadow: var(--tasks-blue-shadow);
    }

    .tasks-layout .btn-success,
    .tasks-layout .task-action-done,
    .tasks-layout .btn-focus {
        --tasks-btn-color: var(--tasks-mint);
        --tasks-btn-bg: var(--tasks-mint-bg);
        --tasks-btn-border: var(--tasks-mint-border);
        --tasks-btn-shadow: var(--tasks-mint-shadow);
    }

    .tasks-layout .btn-focus {
        --tasks-btn-color: var(--text-secondary);
        --tasks-btn-bg: rgba(148, 163, 184, 0.06);
        --tasks-btn-border: rgba(148, 163, 184, 0.28);
        --tasks-btn-shadow: rgba(148, 163, 184, 0.1);
    }

    .tasks-layout .btn-focus.active {
        --tasks-btn-color: var(--tasks-mint);
        --tasks-btn-bg: var(--tasks-mint-bg);
        --tasks-btn-border: var(--tasks-mint-border);
        --tasks-btn-shadow: var(--tasks-mint-shadow);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 8px 18px var(--tasks-mint-shadow);
        transform: none;
    }

    .tasks-layout .btn-warning {
        --tasks-btn-color: var(--tasks-amber);
        --tasks-btn-bg: var(--tasks-amber-bg);
        --tasks-btn-border: var(--tasks-amber-border);
        --tasks-btn-shadow: var(--tasks-amber-shadow);
    }

    .tasks-layout .btn-note {
        --tasks-btn-color: var(--tasks-lavender);
        --tasks-btn-bg: var(--tasks-lavender-bg);
        --tasks-btn-border: var(--tasks-lavender-border);
        --tasks-btn-shadow: var(--tasks-lavender-shadow);
    }

    .tasks-layout .btn-report {
        --tasks-btn-color: var(--tasks-indigo);
        --tasks-btn-bg: var(--tasks-indigo-bg);
        --tasks-btn-border: var(--tasks-indigo-border);
        --tasks-btn-shadow: var(--tasks-indigo-shadow);
    }

    .tasks-layout .btn-clear-focus {
        --tasks-btn-color: var(--tasks-red);
        --tasks-btn-bg: var(--tasks-red-bg);
        --tasks-btn-border: var(--tasks-red-border);
        --tasks-btn-shadow: var(--tasks-red-shadow);
    }

    .tasks-layout .btn-secondary {
        --tasks-btn-color: var(--text-secondary);
        --tasks-btn-bg: rgba(148, 163, 184, 0.1);
        --tasks-btn-border: rgba(148, 163, 184, 0.22);
        --tasks-btn-shadow: rgba(148, 163, 184, 0.12);
    }

    .tasks-layout .project-item {
        border: 1px solid transparent;
        transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }

    .tasks-layout .project-item:hover {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.04)),
            rgba(148, 163, 184, 0.08);
        border-color: rgba(148, 163, 184, 0.18);
        transform: translateY(-1px);
    }

    .tasks-layout .project-item.active {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.08)),
            var(--tasks-blue-bg);
        border: 2px solid color-mix(in srgb, var(--tasks-blue) 78%, var(--tasks-blue-border));
        color: var(--tasks-blue);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 8px 18px var(--tasks-blue-shadow);
    }

    .tasks-layout .project-item.active .project-name,
    .tasks-layout .project-item.active .project-count {
        color: var(--tasks-blue);
    }

    .tasks-layout .project-item.active .project-count {
        background-color: rgba(79, 127, 216, 0.12);
    }

    .tasks-layout .project-count {
        background-color: rgba(148, 163, 184, 0.11);
    }

    .tasks-layout .task-filter-menu .task-date-filter {
        min-height: 38px;
        border-color: rgba(148, 163, 184, 0.22);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.08)),
            rgba(148, 163, 184, 0.07);
        color: var(--text-secondary);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    .tasks-layout .task-filter-menu .task-date-filter:hover,
    .tasks-layout .task-filter-menu .task-date-filter.active {
        border-color: color-mix(in srgb, var(--tasks-blue) 68%, var(--tasks-blue-border));
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.08)),
            var(--tasks-blue-bg);
        color: var(--tasks-blue);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 8px 18px var(--tasks-blue-shadow);
    }

    .tasks-layout .task-filter-menu .task-date-filter.active {
        border-width: 2px;
    }

    .tasks-layout .task-filter-menu .task-date-filter strong {
        background-color: rgba(148, 163, 184, 0.12);
        color: inherit;
    }

    .tasks-layout .task-filter-menu .task-date-filter.active strong {
        background-color: rgba(79, 127, 216, 0.12);
        color: var(--tasks-blue);
    }

    .tasks-layout .task-item {
        border: 1px solid rgba(148, 163, 184, 0.26);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.06)),
            var(--bg-primary);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .tasks-layout .task-item:hover {
        border-color: color-mix(in srgb, var(--tasks-blue) 62%, var(--tasks-blue-border));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 10px 24px var(--tasks-blue-shadow);
        transform: translateY(-1px);
    }

    .tasks-layout .task-item.running {
        border-color: var(--tasks-mint) !important;
        box-shadow: 0 0 0 3px rgba(90, 169, 141, 0.16), 0 10px 24px var(--tasks-mint-shadow);
    }

    .tasks-layout .task-item.running:hover {
        border-color: var(--tasks-mint) !important;
    }

    .tasks-layout .task-item.running::after {
        border-color: var(--tasks-mint);
    }

    .tasks-layout .task-recurrence,
    .tasks-layout .task-overdue,
    .tasks-layout .task-date {
        border: 1px solid transparent;
        border-radius: 999px;
        padding: 4px 9px;
        line-height: 1.2;
    }

    .tasks-layout .task-date.today {
        border-color: var(--tasks-mint-border);
        background-color: var(--tasks-mint-bg);
        color: var(--tasks-mint);
    }

    .tasks-layout .task-date.tomorrow {
        border-color: var(--tasks-blue-border);
        background-color: var(--tasks-blue-bg);
        color: var(--tasks-blue);
    }

    .tasks-layout .task-date.future {
        border-color: var(--tasks-amber-border);
        background-color: var(--tasks-amber-bg);
        color: var(--tasks-amber);
    }

    .tasks-layout .task-date.overdue,
    .tasks-layout .task-overdue {
        border-color: var(--tasks-red-border);
        background-color: var(--tasks-red-bg);
        color: var(--tasks-red);
    }

    .tasks-layout .task-recurrence {
        border-color: var(--tasks-indigo-border);
        background-color: var(--tasks-indigo-bg);
        color: var(--tasks-indigo);
        font-size: 12px;
        font-weight: 700;
    }

}

@media (min-width: 769px) {
    .tasks-layout #notesSection .section-title,
    .tasks-layout #completedSection .section-title {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .tasks-layout #notesSection {
        border-color: var(--tasks-lavender-border);
    }

    .tasks-layout #completedSection {
        border-color: var(--tasks-mint-border);
    }

    .tasks-layout .note-card {
        border: 1px solid var(--tasks-lavender-border);
        border-left: 4px solid color-mix(in srgb, var(--tasks-lavender) 76%, var(--tasks-lavender-border));
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.06)),
            var(--bg-primary);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .tasks-layout .note-card:hover,
    .tasks-layout .note-card:focus {
        border-color: color-mix(in srgb, var(--tasks-lavender) 66%, var(--tasks-lavender-border));
        border-left-color: var(--tasks-lavender);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 10px 24px var(--tasks-lavender-shadow);
        transform: translateY(-1px);
    }

    .tasks-layout .note-title {
        color: var(--text-primary);
    }

    .tasks-layout .note-project {
        border-color: var(--tasks-lavender-border);
        background-color: var(--tasks-lavender-bg);
        color: var(--tasks-lavender);
    }

    .tasks-layout .note-delete-btn {
        border-color: var(--tasks-red-border);
        background-color: var(--tasks-red-bg);
        color: var(--tasks-red);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
    }

    .tasks-layout .note-delete-btn:hover {
        border-color: color-mix(in srgb, var(--tasks-red) 68%, var(--tasks-red-border));
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.08)),
            color-mix(in srgb, var(--tasks-red-bg) 88%, var(--tasks-red));
        color: var(--tasks-red);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 8px 18px var(--tasks-red-shadow);
    }

    .tasks-layout #completedSection .section-header.collapsible {
        border-radius: 10px;
        transition: background-color 0.18s ease, transform 0.18s ease;
    }

    .tasks-layout #completedSection .section-header.collapsible:hover {
        background-color: var(--tasks-mint-bg);
    }

    .tasks-layout #completedToggleIcon {
        color: var(--tasks-mint);
    }

    .tasks-layout #completedCount {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 4px 10px;
        border: 1px solid var(--tasks-mint-border);
        border-radius: 999px;
        background-color: var(--tasks-mint-bg);
        color: var(--tasks-mint) !important;
        font-size: 13px !important;
        font-weight: 800;
        line-height: 1;
    }

    .tasks-layout #completedSection .task-list {
        margin-top: 18px;
    }

    .tasks-layout #completedSection .task-item.completed {
        opacity: 0.86;
        border-color: var(--tasks-mint-border);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.06)),
            color-mix(in srgb, var(--tasks-mint-bg) 32%, var(--bg-primary));
    }

    .tasks-layout #completedSection .task-item.completed:hover {
        border-color: color-mix(in srgb, var(--tasks-mint) 62%, var(--tasks-mint-border));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 10px 24px var(--tasks-mint-shadow);
    }

    .tasks-layout #completedSection .btn-secondary {
        align-self: flex-start;
    }
}

.task-filter-more {
    position: relative;
    display: inline-flex;
}

.task-filter-more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    min-width: 170px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--bg-secondary);
    box-shadow: 0 12px 28px var(--shadow);
    display: none;
    flex-direction: column;
    gap: 6px;
}

.task-filter-more-menu.open {
    display: flex;
}

.task-filter-more-menu .task-date-filter {
    width: 100%;
    justify-content: space-between;
}

.task-date {
    padding: 4px 8px;
    border: 1px solid rgba(16, 185, 129, 0.18);
    border-radius: 999px;
    background-color: rgba(16, 185, 129, 0.12);
    color: var(--success);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.task-date.overdue {
    border-color: rgba(239, 68, 68, 0.18);
    background-color: rgba(239, 68, 68, 0.12);
    color: var(--danger);
}

.task-date.future {
    border-color: rgba(245, 158, 11, 0.2);
    background-color: rgba(245, 158, 11, 0.14);
    color: var(--warning);
}

.task-date.tomorrow {
    border-color: rgba(59, 130, 246, 0.18);
    background-color: rgba(59, 130, 246, 0.12);
    color: var(--accent);
}

.recurrence-options {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--bg-primary);
    margin-bottom: 20px;
}

.recurring-edit-panel {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--bg-primary);
    margin-bottom: 20px;
}

.recurring-edit-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.recurring-edit-header p {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
}

.recurring-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
    color: var(--text-primary);
    font-weight: 600;
}

.task-repeat-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.25;
}

.task-repeat-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.task-repeat-toggle .checkmark {
    position: relative;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    background-color: var(--bg-primary);
    border: 2px solid var(--border);
    border-radius: 6px;
    transition: all 0.2s;
}

.task-repeat-toggle:hover .checkmark {
    border-color: var(--accent);
    box-shadow: 0 2px 8px var(--shadow);
}

.task-repeat-toggle input:checked ~ .checkmark {
    background-color: var(--accent);
    border-color: var(--accent);
}

.task-repeat-toggle .checkmark:after {
    content: "";
    position: absolute;
    left: 10px;
    top: 6px;
    width: 8px;
    height: 14px;
    border: solid white;
    border-width: 0 2px 2px 0;
    display: none;
    transform: rotate(45deg);
}

.task-repeat-toggle input:checked ~ .checkmark:after {
    display: block;
}

.inline-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inline-input-group .form-input {
    max-width: 120px;
}

.weekday-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.weekday-picker label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    background-color: var(--bg-secondary);
}

.recurrence-year-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.recurrence-limit {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.note-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.note-card {
    background-color: var(--bg-primary);
    border: 2px solid var(--border);
    border-left: 5px solid var(--success);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    transition: all 0.2s;
    width: 100%;
    cursor: pointer;
}

.note-card:hover,
.note-card:focus {
    border-color: var(--success);
    box-shadow: 0 4px 12px var(--shadow);
    outline: none;
}

.note-card.dragging {
    opacity: 0.5;
    transform: scale(0.98);
    cursor: grabbing;
    box-shadow: 0 8px 16px var(--shadow);
}

.note-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
}

.note-title {
    flex: 1;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: anywhere;
}

.note-delete-btn {
    align-items: center;
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.22);
    border-radius: 8px;
    color: var(--danger);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    justify-content: center;
    line-height: 1;
    min-height: 30px;
    padding: 7px 10px;
    transition: all 0.18s ease;
}

.note-delete-btn:hover {
    background-color: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.note-content {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.9em;
}

.note-content.empty {
    color: var(--text-secondary);
    font-style: italic;
}

.note-project {
    align-items: center;
    align-self: flex-start;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 999px;
    display: inline-flex;
    gap: 7px;
    margin-top: 12px;
    max-width: 100%;
    min-height: 30px;
    padding: 6px 10px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    margin-top: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-project .project-dot {
    border-radius: 999px;
    flex: 0 0 9px;
    height: 9px;
    width: 9px;
}

.note-project .project-dot.muted {
    background-color: var(--border);
}

.note-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    min-width: 0;
}

.note-card-footer .note-project {
    margin-top: 0;
}

.note-textarea {
    min-height: 180px;
}

.modal-content.task-modal-content {
    width: 90vw;
    max-width: none;
    height: 90vh;
    max-height: 90dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.task-modal-content form {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.task-modal-scroll {
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 8px 4px 4px;
    overscroll-behavior: contain;
}

.task-modal-content .form-group,
.task-modal-content .recurring-edit-panel,
.task-modal-content .recurrence-options,
.task-modal-content .inline-input-group,
.task-modal-content .recurrence-limit {
    min-width: 0;
    max-width: 100%;
}

.task-modal-content .form-input,
.task-modal-content .form-textarea,
.task-modal-content .form-select {
    display: block;
    inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
}

.task-modal-content input[type="date"] {
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
    cursor: pointer;
}

.task-modal-content input[type="date"]::-webkit-date-and-time-value {
    min-width: 0;
    text-align: left;
}

.task-modal-content input[type="date"]::-webkit-datetime-edit {
    min-width: 0;
}

.task-modal-content input[type="date"]::-webkit-calendar-picker-indicator {
    flex-shrink: 0;
    margin-left: 0;
    cursor: pointer;
    opacity: 1;
}

.task-modal-content #editTaskDescription {
    min-height: 96px;
    max-height: none;
}

.copyable-field {
    position: relative;
}

.copyable-field .form-input,
.copyable-field .form-textarea {
    padding-right: 52px;
}

.copyable-field .form-textarea {
    min-height: 64px;
}

.copyable-field.has-scrollbar .form-textarea {
    padding-right: 58px;
}

.field-copy-btn {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(79, 127, 216, 0.2);
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.18)), rgba(79, 127, 216, 0.08);
    color: #4f7fd8;
    cursor: pointer;
    font-size: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    transform: translateY(-50%);
    z-index: 1;
}

.field-copy-btn .bi-icon {
    display: none;
}

.field-copy-btn::before {
    width: 14px;
    height: 14px;
    display: block;
    background-color: currentColor;
    content: "";
    mask: url('/static/icons/bootstrap/copy.svg') center / contain no-repeat;
    -webkit-mask: url('/static/icons/bootstrap/copy.svg') center / contain no-repeat;
}

.field-copy-btn.copied::before {
    mask-image: url('/static/icons/bootstrap/check2.svg');
    -webkit-mask-image: url('/static/icons/bootstrap/check2.svg');
}

.copyable-field .form-textarea + .field-copy-btn {
    top: 8px;
    transform: none;
}

.copyable-field.has-scrollbar .form-textarea + .field-copy-btn {
    right: 22px;
}

.field-copy-btn:hover,
.field-copy-btn.copied {
    border-color: rgba(79, 127, 216, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.24)), rgba(79, 127, 216, 0.16);
    color: #3f70c8;
    box-shadow: 0 5px 12px rgba(79, 127, 216, 0.12);
    transform: translateY(calc(-50% - 1px));
}

.copyable-field .form-textarea + .field-copy-btn:hover,
.copyable-field .form-textarea + .field-copy-btn.copied {
    transform: translateY(-1px);
}

.field-copy-btn.copied {
    border-color: rgba(90, 169, 141, 0.38);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.22)), rgba(90, 169, 141, 0.14);
    color: #4d9b7e;
}

.task-modal-content .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex-shrink: 0;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--border);
    background-color: var(--bg-secondary);
}

@media (max-width: 900px) {
    .note-list {
        grid-template-columns: 1fr;
    }

    .project-report-grid {
        grid-template-columns: 1fr;
    }

    .project-report-modal-content {
        width: calc(100vw - 24px);
        height: calc(100dvh - 24px);
        max-height: calc(100dvh - 24px);
    }
}

.modal-content.note-modal-content {
    width: 80vw;
    max-width: none;
    height: 80vh;
    max-height: 80dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.note-modal-content form {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

.note-modal-content .form-group:has(.note-textarea) {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

.note-modal-content .form-group:has(.note-textarea) .copyable-field {
    display: flex;
    flex: 1;
    min-height: 0;
}

.note-modal-content .note-textarea {
    flex: 1;
    min-height: 64px;
    max-height: none;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
}

.modal.active,
.modal.show {
    display: flex;
}

.modal-content {
    background-color: var(--bg-secondary);
    padding: 30px;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    box-shadow: 0 10px 40px var(--shadow);
    position: relative;
}

.modal-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    z-index: 2;
}

.modal-close-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}

.project-report-modal-content {
    display: flex;
    flex-direction: column;
    width: 80vw;
    max-width: none;
    height: 80dvh;
    max-height: 80dvh;
    overflow: hidden;
}

.project-report-modal-content form {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

.project-report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.project-report-textarea {
    flex: 1;
    min-height: 300px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    line-height: 1.55;
    resize: vertical;
    white-space: pre-wrap;
}

.project-report-modal-content .form-group:has(.project-report-textarea) {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

.project-report-actions {
    flex-wrap: wrap;
}

.modal.confirm-modal {
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    overflow: hidden !important;
}

.confirm-modal .compact-confirm-content {
    width: auto !important;
    min-width: min(320px, calc(100vw - 32px));
    max-width: min(400px, calc(100vw - 32px)) !important;
    height: auto !important;
    max-height: calc(100dvh - 32px) !important;
    padding: 26px !important;
    overflow: visible !important;
}

.confirm-modal .compact-confirm-content-wide {
    max-width: min(460px, calc(100vw - 32px)) !important;
}

.modal-header {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 16px;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Контейнер для стекирования уведомлений */
.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.notification {
    background-color: var(--bg-secondary);
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow);
    border-left: 4px solid var(--accent);
    animation: slideIn 0.3s ease;
    max-width: 400px;
    pointer-events: auto;
}

.notification-close {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    transition: all 0.2s;
}

.notification-close:hover {
    background-color: var(--border);
    transform: scale(1.05);
}

.notification.success {
    border-left-color: var(--success);
}

.notification.warning {
    border-left-color: var(--warning);
}

.notification.error {
    border-left-color: var(--danger);
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.chart-container {
    position: relative;
    height: 300px;
    margin: 20px 0;
}

.leaderboard-header {
    align-items: flex-start;
    gap: 16px;
}

.leaderboard-period-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.leaderboard-period-tabs .btn:disabled {
    cursor: default;
    opacity: 0.5;
}

.leaderboard-user-position {
    background-color: var(--bg-primary);
    padding: 18px;
    border-radius: 8px;
    border: 2px solid var(--accent);
    margin-bottom: 16px;
}

.leaderboard-user-label {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 10px;
}

.leaderboard-user-main {
    display: flex;
    align-items: center;
    gap: 18px;
}

.leaderboard-user-rank {
    color: var(--accent);
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    min-width: 92px;
}

.leaderboard-user-meta {
    color: var(--text-secondary);
    line-height: 1.45;
    min-width: 0;
}

.leaderboard-user-meta #userTime {
    color: var(--accent);
    font-weight: 800;
}

.leaderboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.leaderboard-stat-card {
    background-color: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 0;
    padding: 14px;
}

.leaderboard-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 22px;
    margin-bottom: 6px;
}

.leaderboard-stat-icon .bi-icon {
    --bi-size: 21px;
}

.leaderboard-stat-card:nth-child(2) .leaderboard-stat-icon {
    border-color: rgba(16, 185, 129, 0.2);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0)),
        rgba(16, 185, 129, 0.13);
    color: var(--success);
}

.leaderboard-stat-card:nth-child(3) .leaderboard-stat-icon {
    border-color: rgba(245, 158, 11, 0.22);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0)),
        rgba(245, 158, 11, 0.14);
    color: var(--warning);
}

.leaderboard-stat-label {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
}

.leaderboard-stat-value {
    font-size: 18px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.leaderboard-list-header {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    font-size: 13px;
    font-weight: 800;
    gap: 12px;
    justify-content: space-between;
    margin: 8px 0 10px;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.leaderboard-item {
    align-items: center;
    background-color: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    grid-template-columns: 44px 34px minmax(0, 1fr) auto;
    min-height: 64px;
    padding: 12px 14px;
    transition: all 0.2s;
}

.leaderboard-item:hover {
    border-color: var(--accent);
}

.leaderboard-item.user {
    border-color: var(--accent);
    background-color: var(--bg-tertiary);
    box-shadow: 0 4px 12px var(--shadow);
}

.leaderboard-rank {
    color: var(--text-secondary);
    font-size: 18px;
    font-weight: 800;
    min-width: 0;
    text-align: center;
}

.leaderboard-rank.top-1 {
    color: #ffd700;
    font-size: 22px;
}

.leaderboard-rank.top-2 {
    color: #c0c0c0;
}

.leaderboard-rank.top-3 {
    color: #cd7f32;
}

.leaderboard-avatar {
    font-size: 24px;
    text-align: center;
}

.leaderboard-avatar img {
    border-radius: inherit;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.leaderboard-info {
    min-width: 0;
}

.leaderboard-name {
    font-size: 16px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.leaderboard-time {
    color: var(--accent);
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.leaderboard-you {
    color: var(--accent);
    font-weight: 800;
}

.leaderboard-show-more {
    justify-content: center;
    margin-top: 12px;
    width: 100%;
}

@media (min-width: 901px) {
    .leaderboard-page {
        --leaderboard-blue: #4f7fd8;
        --leaderboard-blue-bg: rgba(79, 127, 216, 0.1);
        --leaderboard-blue-border: rgba(79, 127, 216, 0.2);
        --leaderboard-blue-shadow: rgba(79, 127, 216, 0.12);
        --leaderboard-mint: #5aa98d;
        --leaderboard-mint-bg: rgba(90, 169, 141, 0.1);
        --leaderboard-mint-border: rgba(90, 169, 141, 0.2);
        --leaderboard-mint-shadow: rgba(90, 169, 141, 0.12);
        --leaderboard-amber: #c08a3a;
        --leaderboard-amber-bg: rgba(192, 138, 58, 0.12);
        --leaderboard-amber-border: rgba(192, 138, 58, 0.22);
        --leaderboard-amber-shadow: rgba(192, 138, 58, 0.12);
        --leaderboard-red: #d96f72;
        --leaderboard-red-bg: rgba(217, 111, 114, 0.1);
        --leaderboard-red-border: rgba(217, 111, 114, 0.2);
        --leaderboard-red-shadow: rgba(217, 111, 114, 0.11);
        --leaderboard-indigo: #6672b8;
        --leaderboard-indigo-bg: rgba(102, 114, 184, 0.1);
        --leaderboard-indigo-border: rgba(102, 114, 184, 0.2);
        --leaderboard-indigo-shadow: rgba(102, 114, 184, 0.12);
        --leaderboard-card-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.18));
    }

    .leaderboard-page .leaderboard-section {
        border-color: var(--leaderboard-amber-border);
        border-radius: 12px;
        background:
            var(--leaderboard-card-gradient),
            var(--leaderboard-amber-bg);
        box-shadow: 0 12px 30px var(--leaderboard-amber-shadow);
    }

    .leaderboard-page .leaderboard-header {
        align-items: center;
        margin-bottom: 18px;
    }

    .leaderboard-page .section-title {
        align-items: center;
        display: inline-flex;
        gap: 10px;
        line-height: 1.1;
    }

    .leaderboard-page .section-title > .bi-icon {
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border: 1px solid var(--leaderboard-amber-border);
        border-radius: 14px;
        background:
            var(--leaderboard-card-gradient),
            var(--leaderboard-amber-bg);
        color: var(--leaderboard-amber);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56), 0 8px 18px var(--leaderboard-amber-shadow);
        --bi-size: 22px;
    }

    .leaderboard-page .leaderboard-period-tabs {
        gap: 8px;
        padding: 5px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.54);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    .leaderboard-page .leaderboard-period-tabs .btn {
        min-height: 36px;
        padding: 8px 14px;
        border: 1px solid transparent;
        border-radius: 10px;
        box-shadow: none;
        font-weight: 900;
    }

    .leaderboard-page .leaderboard-period-tabs .btn-primary {
        border-color: var(--leaderboard-blue-border);
        background:
            var(--leaderboard-card-gradient),
            var(--leaderboard-blue-bg);
        color: var(--leaderboard-blue);
        box-shadow: 0 8px 18px var(--leaderboard-blue-shadow);
    }

    .leaderboard-page .leaderboard-period-tabs .btn-secondary {
        background: transparent;
        color: var(--text-secondary);
    }

    .leaderboard-page .leaderboard-period-tabs .btn-secondary:hover {
        border-color: rgba(148, 163, 184, 0.26);
        background: rgba(255, 255, 255, 0.5);
        color: var(--text-primary);
    }

    .leaderboard-page .leaderboard-user-position {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 18px;
        padding: 18px;
        border: 1px solid var(--leaderboard-blue-border);
        border-radius: 12px;
        background:
            var(--leaderboard-card-gradient),
            var(--leaderboard-blue-bg);
        box-shadow: 0 12px 26px var(--leaderboard-blue-shadow);
    }

    .leaderboard-page .leaderboard-user-label {
        margin: 0;
        color: var(--text-secondary);
        font-size: 14px;
        font-weight: 900;
    }

    .leaderboard-page .leaderboard-user-main {
        justify-self: end;
    }

    .leaderboard-page .leaderboard-user-rank {
        min-width: 82px;
        color: var(--leaderboard-blue);
        font-size: 42px;
        font-weight: 950;
        text-align: right;
    }

    .leaderboard-page .leaderboard-user-meta {
        color: var(--text-secondary);
        font-weight: 750;
    }

    .leaderboard-page .leaderboard-user-meta #userTime {
        color: var(--leaderboard-blue);
        font-weight: 950;
    }

    .leaderboard-page .leaderboard-stats-grid {
        gap: 14px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-bottom: 18px;
    }

    .leaderboard-page .leaderboard-stat-card {
        display: grid;
        grid-template-columns: 50px minmax(0, 1fr);
        grid-template-areas:
            "icon label"
            "icon value";
        align-items: center;
        min-height: 96px;
        padding: 16px;
        border-radius: 12px;
        border-color: var(--leaderboard-amber-border);
        background:
            var(--leaderboard-card-gradient),
            var(--leaderboard-amber-bg);
        box-shadow: 0 12px 26px var(--leaderboard-amber-shadow);
    }

    .leaderboard-page .leaderboard-stat-card:nth-child(2) {
        border-color: var(--leaderboard-mint-border);
        background:
            var(--leaderboard-card-gradient),
            var(--leaderboard-mint-bg);
        box-shadow: 0 12px 26px var(--leaderboard-mint-shadow);
    }

    .leaderboard-page .leaderboard-stat-card:nth-child(3) {
        border-color: var(--leaderboard-indigo-border);
        background:
            var(--leaderboard-card-gradient),
            var(--leaderboard-indigo-bg);
        box-shadow: 0 12px 26px var(--leaderboard-indigo-shadow);
    }

    .leaderboard-page .leaderboard-stat-card:nth-child(4) {
        border-color: var(--leaderboard-red-border);
        background:
            var(--leaderboard-card-gradient),
            var(--leaderboard-red-bg);
        box-shadow: 0 12px 26px var(--leaderboard-red-shadow);
    }

    .leaderboard-page .leaderboard-stat-icon {
        grid-area: icon;
        width: 42px;
        height: 42px;
        margin: 0;
        border-color: var(--leaderboard-amber-border);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.64);
        color: var(--leaderboard-amber);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
    }

    .leaderboard-page .leaderboard-stat-card:nth-child(2) .leaderboard-stat-icon {
        border-color: var(--leaderboard-mint-border);
        color: var(--leaderboard-mint);
    }

    .leaderboard-page .leaderboard-stat-card:nth-child(3) .leaderboard-stat-icon {
        border-color: var(--leaderboard-indigo-border);
        color: var(--leaderboard-indigo);
    }

    .leaderboard-page .leaderboard-stat-card:nth-child(4) .leaderboard-stat-icon {
        border-color: var(--leaderboard-red-border);
        color: var(--leaderboard-red);
    }

    .leaderboard-page .leaderboard-stat-label {
        grid-area: label;
        margin: 0 0 4px;
        color: var(--text-secondary);
        font-size: 13px;
        font-weight: 900;
    }

    .leaderboard-page .leaderboard-stat-value {
        grid-area: value;
        color: var(--leaderboard-amber);
        font-size: 19px;
        font-weight: 950;
        line-height: 1.1;
    }

    .leaderboard-page .leaderboard-stat-card:nth-child(2) .leaderboard-stat-value {
        color: var(--leaderboard-mint);
    }

    .leaderboard-page .leaderboard-stat-card:nth-child(3) .leaderboard-stat-value {
        color: var(--leaderboard-indigo);
    }

    .leaderboard-page .leaderboard-stat-card:nth-child(4) .leaderboard-stat-value {
        color: var(--leaderboard-red);
    }

    .leaderboard-page .leaderboard-list-header {
        min-height: 42px;
        margin: 4px 0 10px;
        padding: 0 4px;
        color: var(--text-secondary);
        font-size: 14px;
        font-weight: 900;
    }

    .leaderboard-page .leaderboard-list {
        gap: 8px;
    }

    .leaderboard-page .leaderboard-item {
        min-height: 62px;
        padding: 12px 14px;
        grid-template-columns: 46px 36px minmax(0, 1fr) auto;
        border-color: rgba(148, 163, 184, 0.22);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.7);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    .leaderboard-page .leaderboard-item:hover {
        border-color: var(--leaderboard-blue-border);
        background:
            var(--leaderboard-card-gradient),
            var(--leaderboard-blue-bg);
        transform: translateY(-1px);
        box-shadow: 0 8px 18px var(--leaderboard-blue-shadow);
    }

    .leaderboard-page .leaderboard-item.user {
        border-color: var(--leaderboard-blue-border);
        background:
            var(--leaderboard-card-gradient),
            var(--leaderboard-blue-bg);
        box-shadow: 0 10px 22px var(--leaderboard-blue-shadow);
    }

    .leaderboard-page .leaderboard-rank {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border: 1px solid rgba(148, 163, 184, 0.2);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.58);
        color: var(--text-secondary);
        font-size: 14px;
        font-weight: 950;
    }

    .leaderboard-page .leaderboard-rank.top-1,
    .leaderboard-page .leaderboard-rank.top-2,
    .leaderboard-page .leaderboard-rank.top-3 {
        border-color: var(--leaderboard-amber-border);
        background:
            var(--leaderboard-card-gradient),
            var(--leaderboard-amber-bg);
        color: var(--leaderboard-amber);
    }

    .leaderboard-page .leaderboard-rank.top-2 {
        border-color: rgba(148, 163, 184, 0.28);
        background:
            var(--leaderboard-card-gradient),
            rgba(148, 163, 184, 0.13);
        color: #748094;
    }

    .leaderboard-page .leaderboard-rank.top-3 {
        border-color: var(--leaderboard-red-border);
        background:
            var(--leaderboard-card-gradient),
            var(--leaderboard-red-bg);
        color: var(--leaderboard-red);
    }

    .leaderboard-page .leaderboard-avatar {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.58);
        font-size: 18px;
    }

    .leaderboard-page .leaderboard-name {
        font-size: 15px;
        font-weight: 900;
    }

    .leaderboard-page .leaderboard-time {
        color: var(--leaderboard-blue);
        font-size: 15px;
        font-weight: 950;
    }

    .leaderboard-page .leaderboard-you {
        color: var(--leaderboard-blue);
    }

    .leaderboard-page .leaderboard-show-more {
        min-height: 42px;
        border: 1px solid var(--leaderboard-blue-border);
        border-radius: 12px;
        background:
            var(--leaderboard-card-gradient),
            var(--leaderboard-blue-bg);
        color: var(--leaderboard-blue);
        box-shadow: 0 8px 18px var(--leaderboard-blue-shadow);
        font-weight: 900;
    }
}

.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.badge-filter-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.badges-mobile-summary {
    display: none;
}

.badge-card {
    background-color: var(--bg-primary);
    padding: 20px;
    border-radius: 12px;
    border: 2px solid var(--border);
    text-align: center;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    min-height: 270px;
}

.badge-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px var(--shadow);
}

.badge-card.earned {
    border-color: var(--success);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.14), var(--bg-primary));
}

.badge-card.in-progress {
    border-color: var(--warning);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), var(--bg-primary));
}

.badge-card.locked {
    border-color: var(--border);
    background-color: var(--bg-primary);
}

.badge-card.locked .badge-icon {
    filter: grayscale(100%);
    opacity: 0.48;
}

.badge-icon {
    width: 72px;
    height: 72px;
    align-self: center;
    border-radius: 22px;
    font-size: 48px;
    margin-bottom: 12px;
}

.badge-icon .bi-icon {
    --bi-size: 36px;
}

.badge-card.earned .badge-icon {
    border-color: rgba(16, 185, 129, 0.24);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0)),
        rgba(16, 185, 129, 0.16);
    color: var(--success);
}

.badge-card.in-progress .badge-icon {
    border-color: rgba(245, 158, 11, 0.26);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0)),
        rgba(245, 158, 11, 0.16);
    color: var(--warning);
}

.badge-name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}

.badge-description {
    font-size: 14px;
    color: var(--text-secondary);
    min-height: 40px;
}

.badge-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 3px 10px;
    margin-bottom: 12px;
    border-radius: 999px;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.badge-card.earned .badge-status {
    background-color: rgba(34, 197, 94, 0.16);
    color: var(--success);
}

.badge-card.in-progress .badge-status {
    background-color: rgba(245, 158, 11, 0.16);
    color: var(--warning);
}

.badge-requirement,
.badge-earned-date {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-secondary);
}

.badge-footer {
    margin-top: auto;
    padding-top: 14px;
}

.badge-earned-date {
    color: var(--success);
    font-weight: 700;
}

.badge-progress {
    height: 8px;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--bg-tertiary);
}

.badge-progress-fill {
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background-color: var(--accent);
    transition: width 0.25s ease;
}

.badge-card.earned .badge-progress-fill {
    background-color: var(--success);
}

.badge-card.in-progress .badge-progress-fill {
    background-color: var(--warning);
}

.badge-card.locked .badge-progress-fill {
    background-color: var(--text-secondary);
}

.badge-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.badges-help-summary {
    cursor: pointer;
    font-size: 20px;
    font-weight: 800;
    list-style: none;
}

.badges-help-summary::-webkit-details-marker {
    display: none;
}

.badges-help-summary::after {
    content: "+";
    float: right;
    font-size: 24px;
    line-height: 1;
}

.badges-help-section[open] .badges-help-summary::after {
    content: "-";
}

.badges-help-content {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-top: 16px;
}

@media (min-width: 901px) {
    .badges-page {
        --badges-blue: #4f7fd8;
        --badges-blue-bg: rgba(79, 127, 216, 0.1);
        --badges-blue-border: rgba(79, 127, 216, 0.2);
        --badges-blue-shadow: rgba(79, 127, 216, 0.12);
        --badges-mint: #5aa98d;
        --badges-mint-bg: rgba(90, 169, 141, 0.1);
        --badges-mint-border: rgba(90, 169, 141, 0.2);
        --badges-mint-shadow: rgba(90, 169, 141, 0.12);
        --badges-amber: #c08a3a;
        --badges-amber-bg: rgba(192, 138, 58, 0.12);
        --badges-amber-border: rgba(192, 138, 58, 0.22);
        --badges-amber-shadow: rgba(192, 138, 58, 0.12);
        --badges-red: #d96f72;
        --badges-red-bg: rgba(217, 111, 114, 0.1);
        --badges-red-border: rgba(217, 111, 114, 0.2);
        --badges-red-shadow: rgba(217, 111, 114, 0.11);
        --badges-indigo: #6672b8;
        --badges-indigo-bg: rgba(102, 114, 184, 0.1);
        --badges-indigo-border: rgba(102, 114, 184, 0.2);
        --badges-indigo-shadow: rgba(102, 114, 184, 0.12);
        --badges-card-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.18));
    }

    .badges-page .stats-bar {
        gap: 14px;
        margin-bottom: 18px;
    }

    .badges-page .stats-bar .stat-card {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        grid-template-areas:
            "icon label"
            "icon value";
        align-items: center;
        min-height: 104px;
        padding: 18px;
        border: 1px solid var(--badges-amber-border);
        border-radius: 12px;
        background:
            var(--badges-card-gradient),
            var(--badges-amber-bg);
        box-shadow: 0 12px 26px var(--badges-amber-shadow);
    }

    .badges-page .stats-bar .stat-card:nth-child(2) {
        border-color: var(--badges-mint-border);
        background:
            var(--badges-card-gradient),
            var(--badges-mint-bg);
        box-shadow: 0 12px 26px var(--badges-mint-shadow);
    }

    .badges-page .stats-bar .stat-card:nth-child(3) {
        border-color: var(--badges-red-border);
        background:
            var(--badges-card-gradient),
            var(--badges-red-bg);
        box-shadow: 0 12px 26px var(--badges-red-shadow);
    }

    .badges-page .stats-bar .stat-card:nth-child(4) {
        border-color: var(--badges-indigo-border);
        background:
            var(--badges-card-gradient),
            var(--badges-indigo-bg);
        box-shadow: 0 12px 26px var(--badges-indigo-shadow);
    }

    .badges-page .stats-bar .stat-icon {
        grid-area: icon;
        width: 44px;
        height: 44px;
        margin: 0;
        border: 1px solid var(--badges-amber-border);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.64);
        color: var(--badges-amber);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
    }

    .badges-page .stats-bar .stat-card:nth-child(2) .stat-icon {
        border-color: var(--badges-mint-border);
        color: var(--badges-mint);
    }

    .badges-page .stats-bar .stat-card:nth-child(3) .stat-icon {
        border-color: var(--badges-red-border);
        color: var(--badges-red);
    }

    .badges-page .stats-bar .stat-card:nth-child(4) .stat-icon {
        border-color: var(--badges-indigo-border);
        color: var(--badges-indigo);
    }

    .badges-page .stats-bar .stat-label {
        grid-area: label;
        margin: 0 0 4px;
        color: var(--text-secondary);
        font-size: 13px;
        font-weight: 900;
    }

    .badges-page .stats-bar .stat-value {
        grid-area: value;
        color: var(--badges-amber);
        font-size: clamp(25px, 1.75vw, 32px);
        line-height: 1.05;
    }

    .badges-page .stats-bar .stat-card:nth-child(2) .stat-value {
        color: var(--badges-mint);
    }

    .badges-page .stats-bar .stat-card:nth-child(3) .stat-value {
        color: var(--badges-red);
    }

    .badges-page .stats-bar .stat-card:nth-child(4) .stat-value {
        color: var(--badges-indigo);
    }

    .badges-page > .section {
        border-radius: 12px;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    }

    .badges-page > .section:not(.badges-help-section) {
        border-color: var(--badges-amber-border);
        background:
            var(--badges-card-gradient),
            var(--badges-amber-bg);
        box-shadow: 0 12px 30px var(--badges-amber-shadow);
    }

    .badges-page .badges-board-header {
        align-items: center;
        margin-bottom: 18px;
    }

    .badges-page .badges-board-header .section-title {
        align-items: center;
        display: inline-flex;
        gap: 10px;
        line-height: 1.1;
    }

    .badges-page .badges-board-header .section-title > .bi-icon {
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border: 1px solid var(--badges-amber-border);
        border-radius: 14px;
        background:
            var(--badges-card-gradient),
            var(--badges-amber-bg);
        color: var(--badges-amber);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56), 0 8px 18px var(--badges-amber-shadow);
        --bi-size: 22px;
    }

    .badges-page .badge-filter-row {
        gap: 8px;
        padding: 5px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.54);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    .badges-page .badge-filter-row .btn {
        min-height: 36px;
        padding: 8px 14px;
        border: 1px solid transparent;
        border-radius: 10px;
        box-shadow: none;
        font-weight: 900;
    }

    .badges-page .badge-filter-row .btn-primary {
        border-color: var(--badges-blue-border);
        background:
            var(--badges-card-gradient),
            var(--badges-blue-bg);
        color: var(--badges-blue);
        box-shadow: 0 8px 18px var(--badges-blue-shadow);
    }

    .badges-page .badge-filter-row .btn-secondary {
        background: transparent;
        color: var(--text-secondary);
    }

    .badges-page .badge-filter-row .btn-secondary:hover {
        border-color: rgba(148, 163, 184, 0.26);
        background: rgba(255, 255, 255, 0.5);
        color: var(--text-primary);
    }

    .badges-page .badge-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 14px;
    }

    .badges-page .badge-card {
        min-height: 278px;
        padding: 18px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    .badges-page .badge-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    }

    .badges-page .badge-card.earned {
        border-color: var(--badges-mint-border);
        background:
            var(--badges-card-gradient),
            var(--badges-mint-bg);
    }

    .badges-page .badge-card.in-progress {
        border-color: var(--badges-amber-border);
        background:
            var(--badges-card-gradient),
            var(--badges-amber-bg);
    }

    .badges-page .badge-card.locked {
        border-color: rgba(148, 163, 184, 0.22);
        background: rgba(255, 255, 255, 0.6);
    }

    .badges-page .badge-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 12px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.62);
        color: var(--text-secondary);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }

    .badges-page .badge-icon .bi-icon {
        --bi-size: 32px;
    }

    .badges-page .badge-card.earned .badge-icon {
        border-color: var(--badges-mint-border);
        background: rgba(255, 255, 255, 0.66);
        color: var(--badges-mint);
        filter: none;
        opacity: 1;
    }

    .badges-page .badge-card.in-progress .badge-icon {
        border-color: var(--badges-amber-border);
        background: rgba(255, 255, 255, 0.66);
        color: var(--badges-amber);
        filter: none;
        opacity: 1;
    }

    .badges-page .badge-card.locked .badge-icon {
        border-color: rgba(148, 163, 184, 0.24);
        color: #8b96a8;
        filter: grayscale(100%);
        opacity: 0.58;
    }

    .badges-page .badge-status {
        align-self: center;
        border: 1px solid rgba(148, 163, 184, 0.2);
        background: rgba(255, 255, 255, 0.56);
        color: var(--text-secondary);
        font-weight: 900;
    }

    .badges-page .badge-card.earned .badge-status {
        border-color: var(--badges-mint-border);
        background: var(--badges-mint-bg);
        color: var(--badges-mint);
    }

    .badges-page .badge-card.in-progress .badge-status {
        border-color: var(--badges-amber-border);
        background: var(--badges-amber-bg);
        color: var(--badges-amber);
    }

    .badges-page .badge-name {
        color: var(--text-primary);
        font-size: 18px;
        font-weight: 950;
        line-height: 1.2;
    }

    .badges-page .badge-description {
        color: var(--text-secondary);
        font-size: 14px;
        line-height: 1.35;
    }

    .badges-page .badge-requirement {
        color: var(--text-secondary);
        font-weight: 850;
    }

    .badges-page .badge-progress {
        height: 8px;
        background: rgba(148, 163, 184, 0.18);
    }

    .badges-page .badge-progress-fill {
        background: var(--badges-blue);
    }

    .badges-page .badge-card.earned .badge-progress-fill {
        background: var(--badges-mint);
    }

    .badges-page .badge-card.in-progress .badge-progress-fill {
        background: var(--badges-amber);
    }

    .badges-page .badge-card.locked .badge-progress-fill {
        background: #8b96a8;
    }

    .badges-page .badge-progress-meta {
        color: var(--text-secondary);
        font-weight: 850;
    }

    .badges-page .badges-help-section {
        border-color: var(--badges-indigo-border);
        background:
            var(--badges-card-gradient),
            var(--badges-indigo-bg);
        box-shadow: 0 12px 30px var(--badges-indigo-shadow);
    }

    .badges-page .badges-help-summary {
        min-height: 44px;
        color: var(--text-primary);
    }

    .badges-page .badges-help-summary::after {
        display: inline-grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 1px solid var(--badges-indigo-border);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.58);
        color: var(--badges-indigo);
        font-size: 20px;
    }

    .badges-page .badges-help-content {
        color: var(--text-secondary);
        font-weight: 700;
    }

    .badges-page .empty-state {
        border-radius: 12px;
    }
}

.loading {
    text-align: center;
    padding: 40px;
    font-size: 18px;
    color: var(--text-secondary);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.empty-state-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;
    border-radius: 24px;
    font-size: 64px;
    margin-bottom: 20px;
}

.empty-state-icon .bi-icon {
    --bi-size: 36px;
}

.empty-state-text {
    font-size: 18px;
}

/* Sidebar & Projects */
/* Контейнер для всего приложения с навигацией */
.app-container {
    display: flex;
    height: 100vh;
    height: 100dvh;
    min-width: 0;
    overflow: hidden;
}

/* Левая узкая панель навигации инструментов */
.tool-nav {
    width: 60px;
    height: 100vh;
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    overflow: hidden;
    position: sticky;
    top: 0;
}

.tool-nav-spacer {
    display: none;
}

.tool-nav-item {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 12px;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-decoration: none;
}

.tool-nav-item .bi-icon {
    --bi-size: 21px;
}

.tool-nav-label {
    display: none;
}

.tool-nav-item:hover {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--accent);
    transform: translateY(-1px);
}

.tool-nav-item.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: white;
    box-shadow: 0 10px 24px rgba(59, 130, 246, 0.28);
}

.tool-nav-avatar {
    order: 10;
    margin-top: auto;
    margin-bottom: 0;
    padding: 0;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 22px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 4px 12px var(--shadow);
}

.tool-nav-avatar:hover {
    background-color: var(--accent);
    color: white;
}

.tool-nav-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    object-fit: cover;
}

@media (min-width: 769px) {
    .tool-nav .tool-nav-item:not(.tool-nav-avatar) {
        --tool-nav-color: var(--color-blue);
        --tool-nav-bg: rgba(79, 127, 216, 0.09);
        --tool-nav-border: rgba(79, 127, 216, 0.14);
        --tool-nav-shadow: rgba(79, 127, 216, 0.12);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0)),
            var(--tool-nav-bg);
        border: 1px solid var(--tool-nav-border);
        color: var(--tool-nav-color);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), 0 8px 18px rgba(15, 23, 42, 0.06);
    }

    .tool-nav .tool-nav-item:not(.tool-nav-avatar):hover {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.08)),
            color-mix(in srgb, var(--tool-nav-bg) 90%, var(--tool-nav-color));
        border-color: color-mix(in srgb, var(--tool-nav-border) 74%, var(--tool-nav-color));
        color: var(--tool-nav-color);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 10px 22px var(--tool-nav-shadow);
    }

    .tool-nav .tool-nav-item.active:not(.tool-nav-avatar) {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.08)),
            color-mix(in srgb, var(--tool-nav-bg) 86%, white);
        border: 2px solid color-mix(in srgb, var(--tool-nav-color) 78%, var(--tool-nav-border));
        color: var(--tool-nav-color);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 10px 22px var(--tool-nav-shadow);
    }

    .tool-nav .tool-nav-item.active:not(.tool-nav-avatar)::after {
        content: none;
    }

    .tool-nav .tool-nav-item:not(.tool-nav-avatar) {
        position: relative;
    }

    .tool-nav .tool-nav-item.tool-nav-tasks {
        --tool-nav-color: #4f7fd8;
        --tool-nav-bg: rgba(79, 127, 216, 0.1);
        --tool-nav-border: rgba(79, 127, 216, 0.16);
        --tool-nav-shadow: rgba(79, 127, 216, 0.14);
    }

    .tool-nav .tool-nav-item.tool-nav-habits {
        --tool-nav-color: var(--color-green);
        --tool-nav-bg: rgba(90, 169, 141, 0.1);
        --tool-nav-border: rgba(90, 169, 141, 0.16);
        --tool-nav-shadow: rgba(90, 169, 141, 0.13);
    }

    .tool-nav .tool-nav-item.tool-nav-shopping {
        --tool-nav-color: var(--color-amber);
        --tool-nav-bg: rgba(192, 138, 58, 0.11);
        --tool-nav-border: rgba(192, 138, 58, 0.17);
        --tool-nav-shadow: rgba(192, 138, 58, 0.13);
    }

    .tool-nav .tool-nav-item.tool-nav-analytics {
        --tool-nav-color: var(--color-blue-dark);
        --tool-nav-bg: rgba(102, 114, 184, 0.1);
        --tool-nav-border: rgba(102, 114, 184, 0.16);
        --tool-nav-shadow: rgba(102, 114, 184, 0.13);
    }

    .tool-nav .tool-nav-item.tool-nav-leaderboard {
        --tool-nav-color: var(--color-red);
        --tool-nav-bg: rgba(217, 111, 114, 0.1);
        --tool-nav-border: rgba(217, 111, 114, 0.16);
        --tool-nav-shadow: rgba(217, 111, 114, 0.13);
    }

    .tool-nav .tool-nav-item.tool-nav-badges {
        --tool-nav-color: var(--color-purple);
        --tool-nav-bg: rgba(155, 120, 200, 0.1);
        --tool-nav-border: rgba(155, 120, 200, 0.16);
        --tool-nav-shadow: rgba(155, 120, 200, 0.13);
    }

    [data-theme="dark"] .tool-nav .tool-nav-item:not(.tool-nav-avatar) {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
            color-mix(in srgb, var(--tool-nav-bg) 72%, #020617);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.18);
    }

    [data-theme="dark"] .tool-nav .tool-nav-item.active:not(.tool-nav-avatar) {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)),
            color-mix(in srgb, var(--tool-nav-bg) 64%, #020617);
        border-color: color-mix(in srgb, var(--tool-nav-border) 54%, var(--tool-nav-color));
        color: var(--tool-nav-color);
    }
}

.app-layout {
    display: flex;
    gap: 20px;
    padding: 20px;
    flex: 1;
    height: 100vh;
    height: 100dvh;
    min-width: 0;
    overflow-y: auto;
}

/* Контейнер для контента страниц без app-layout */
.page-content {
    flex: 1;
    height: 100vh;
    height: 100dvh;
    min-width: 0;
    overflow-y: auto;
    padding: 20px;
}

.sidebar {
    width: 280px;
    flex-shrink: 0;
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border);
    height: fit-content;
    position: sticky;
    top: 20px;
}

@media (min-width: 1025px) {
    .tasks-layout .tasks-sidebar {
        top: 0;
    }
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.sidebar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.sidebar-icon-btn svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--text-primary);
}

.project-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.project-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
    user-select: none;
    overflow: hidden;
}

.project-item:hover {
    background-color: var(--bg-tertiary);
}

.project-item.active {
    background-color: var(--accent);
    color: white;
}

.project-item.active .project-name,
.project-item.active .project-count {
    color: white;
}

.project-item.favorite {
    font-weight: 600;
}

.project-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.project-name {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-count {
    font-size: 12px;
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 24px;
    text-align: center;
}

.project-item.active .project-count {
    background-color: rgba(255, 255, 255, 0.2);
}

.project-favorite-icon {
    color: #F59E0B;
    font-size: 14px;
    flex-shrink: 0;
}

.project-actions {
    position: absolute;
    right: 12px;
    display: none;
    gap: 4px;
    z-index: 4;
}

.project-item:hover .project-actions {
    display: flex;
}

.project-item:hover .project-favorite-icon,
.project-item:hover .project-count {
    display: none;
}

.project-action-btn {
    align-items: center;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    height: 30px;
    justify-content: center;
    opacity: 0.6;
    padding: 0;
    transition: opacity 0.2s;
    width: 30px;
}

.project-action-btn:hover {
    opacity: 1;
}

.project-action-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    min-width: 160px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--bg-secondary);
    box-shadow: 0 14px 34px var(--shadow);
    display: none;
    flex-direction: column;
    gap: 6px;
}

.project-item.actions-open {
    overflow: visible;
    z-index: 35;
}

.project-item.actions-open .project-action-menu {
    display: flex;
}

.project-action-menu-btn {
    min-height: 40px;
    padding: 8px 10px;
    border: none;
    border-radius: 7px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}

.project-action-menu-btn:hover {
    background-color: var(--bg-tertiary);
}

.project-action-menu-btn.danger {
    color: var(--danger);
}

.project-action-menu-btn.archive {
    color: var(--color-amber, #c08a3a);
}

.project-action-menu-btn.restore {
    color: var(--color-green, #5aa98d);
}

@media (min-width: 769px) {
    .tasks-layout .project-action-menu {
        z-index: 200;
        isolation: isolate;
        opacity: 1;
        background: var(--bg-secondary) !important;
        backdrop-filter: none;
    }

    .tasks-layout .project-action-menu-btn {
        opacity: 1;
        background: var(--bg-primary) !important;
        backdrop-filter: none;
    }

    .tasks-layout .project-action-menu-btn:hover {
        background: var(--bg-tertiary) !important;
    }
}

.project-archive-section {
    border-top: 1px solid var(--border);
    margin-top: 12px;
    padding-top: 10px;
}

.project-archive-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    display: grid;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    gap: 10px;
    grid-template-columns: 18px minmax(0, 1fr) auto 16px;
    padding: 10px 12px;
    text-align: left;
    width: 100%;
}

.project-archive-toggle:hover {
    background: var(--bg-tertiary);
}

.project-archive-toggle .bi-icon {
    height: 17px;
    width: 17px;
}

.project-archive-chevron {
    font-size: 16px;
    line-height: 1;
    transform: rotate(-90deg);
    transition: transform 0.2s ease;
}

.project-archive-section.is-open .project-archive-chevron {
    transform: rotate(0deg);
}

.project-archive-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
}

.archived-project-item {
    opacity: 0.72;
}

@media (min-width: 769px) {
    .archived-project-item {
        opacity: 1;
    }

    .archived-project-item > .project-color,
    .archived-project-item > .project-name,
    .archived-project-item > .project-count {
        opacity: 0.72;
    }

    .archived-project-item .project-actions,
    .archived-project-item .project-action-menu,
    .archived-project-item .project-action-menu-btn {
        opacity: 1;
    }
}

.project-archive-empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 8px 12px 4px 40px;
}

.archived-content-item {
    cursor: default;
}

.archived-content-label {
    align-items: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    min-height: 28px;
    padding: 4px 9px;
}

.project-divider {
    height: 1px;
    background-color: var(--border);
    margin: 12px 0;
}

.sidebar-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.show-archived-btn {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
}

.show-archived-btn:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.project-item.dragging {
    opacity: 0.5;
}

.project-item.drag-over {
    border-top: 2px solid var(--accent);
}

.project-item.drop-target {
    background-color: rgba(245, 158, 11, 0.14);
    color: var(--text-primary);
    transform: translateX(6px) scale(1.015);
    box-shadow: inset 0 0 0 2px var(--warning), 0 8px 20px var(--shadow);
    animation: projectDropTargetPulse 0.8s ease-in-out infinite alternate;
}

.project-item.drop-target::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 6px;
    border: 1px dashed rgba(245, 158, 11, 0.75);
    pointer-events: none;
}

.project-item.drop-target::after {
    content: attr(data-drop-label);
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 3px 8px;
    border-radius: 999px;
    background-color: var(--warning);
    color: white;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.28);
}

.project-item.drop-target .project-name,
.project-item.drop-target .project-count {
    color: var(--text-primary);
}

.project-item.drop-target .project-name {
    padding-right: 104px;
}

.project-item.drop-target .project-count,
.project-item.drop-target .project-actions,
.project-item.drop-target .project-favorite-icon {
    display: none;
}

@keyframes projectDropTargetPulse {
    from {
        box-shadow: inset 0 0 0 2px var(--warning), 0 8px 20px var(--shadow);
    }

    to {
        box-shadow: inset 0 0 0 3px var(--warning), 0 10px 26px rgba(245, 158, 11, 0.24);
    }
}

.main-content {
    flex: 1;
    min-width: 0;
}

/* Color Picker */
.color-picker {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.color-option {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.2s;
}

.color-option:hover {
    transform: scale(1.1);
}

.color-option.selected {
    border-color: var(--text-primary);
    transform: scale(1.15);
}

@media (max-width: 1024px) {
    .app-layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        position: static;
    }
}

/* Mobile-only dashboard cards are rendered beside the mobile stats accordion. */
.mobile-daily-dashboard {
    display: none;
}

@media (max-width: 768px) {
    .app-container {
        flex-direction: column;
    }
    
    .tool-nav {
        width: 100%;
        height: 64px;
        min-height: 64px;
        flex-direction: row;
        padding: 8px 8px max(8px, env(safe-area-inset-bottom, 0px));
        border-right: none;
        border-bottom: 0;
        border-top: 1px solid var(--border);
        border-radius: 0;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .tool-nav-spacer {
        flex: 1 0 16px;
    }
    
    .header-content {
        flex-direction: column;
        gap: 20px;
    }

    .nav {
        flex-wrap: wrap;
        justify-content: center;
    }

    .stats-bar {
        grid-template-columns: 1fr;
    }

    .task-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .task-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .sidebar {
        padding: 16px;
    }

    .project-item {
        font-size: 13px;
    }

    .color-picker {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Keep desktop task forms compact: buttons speak for their own settings. */
@media (min-width: 769px) {
    #createTaskModal .task-title-project-row > .form-group:first-child > .form-label,
    #editTaskModal .task-title-project-row > .form-group:first-child > .form-label,
    #createTaskModal .task-attribute-label,
    #editTaskModal .task-attribute-label,
    #createTaskModal .task-modal-scroll > .form-group:has(#createTaskDescription) > .form-label,
    #editTaskModal .task-modal-scroll > .form-group:has(#editTaskDescription) > .form-label {
        display: none;
    }

    #createTaskModal #createTaskTitle::placeholder,
    #createTaskModal #createTaskDescription::placeholder,
    #editTaskModal #editTaskTitle::placeholder,
    #editTaskModal #editTaskDescription::placeholder {
        color: rgba(100, 116, 139, 0.56);
        opacity: 1;
    }

    #createNoteModal #createNoteTitle::placeholder,
    #createNoteModal #createNoteContent::placeholder,
    #editNoteModal #editNoteTitle::placeholder,
    #editNoteModal #editNoteContent::placeholder {
        color: rgba(100, 116, 139, 0.56);
        opacity: 1;
    }

}

/* Desktop create-note form uses the same compact project control as task creation. */
@media (min-width: 769px) {
    #createNoteModal .note-title-project-row {
        grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
        align-items: center;
    }

    #editNoteModal .note-title-project-row {
        grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
        align-items: center;
    }

    #createNoteModal .note-project-native,
    #editNoteModal .note-project-native {
        display: none !important;
    }

    #createNoteModal .note-project-button-group,
    #editNoteModal .note-project-button-group {
        display: flex;
        align-items: stretch;
        flex-direction: column;
    }

    #createNoteModal .note-project-button,
    #editNoteModal .note-project-button {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 44px;
        padding: 10px 14px;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 10px;
        background: rgba(148, 163, 184, 0.08);
        color: var(--text-secondary);
        font: inherit;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.25;
        text-align: left;
        cursor: pointer;
        transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
    }

    #createNoteModal .note-project-button:hover,
    #editNoteModal .note-project-button:hover {
        border-color: rgba(79, 127, 216, 0.42);
        background: rgba(79, 127, 216, 0.08);
        color: #356fc7;
    }

    #createNoteModal .note-project-button.is-active,
    #editNoteModal .note-project-button.is-active {
        border-color: rgba(79, 127, 216, 0.34);
        background: rgba(79, 127, 216, 0.12);
        color: #356fc7;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    #createNoteModal .form-actions {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    #createNoteModal .note-project-button,
    #editNoteModal .note-project-button {
        display: none;
    }

    #createNoteModal .note-project-native,
    #editNoteModal .note-project-native {
        display: block;
        width: 100%;
    }
}

/* Keep the four task/note forms visually consistent on desktop. */
@media (min-width: 769px) {
    #createTaskModal .task-modal-content,
    #editTaskModal .task-modal-content,
    #createNoteModal .note-modal-content,
    #editNoteModal .note-modal-content {
        width: 80vw;
        max-width: none;
        height: auto;
        max-height: 80dvh;
        padding: 30px;
        overflow: hidden;
    }

    #createTaskModal .modal-header,
    #editTaskModal .modal-header,
    #createNoteModal .modal-header,
    #editNoteModal .modal-header {
        margin: 0 0 24px;
        line-height: 1.2;
    }

    #createTaskModal form,
    #editTaskModal form,
    #createNoteModal form,
    #editNoteModal form {
        display: flex;
        min-height: 0;
        flex-direction: column;
        flex: 0 1 auto;
    }

    #createTaskModal .task-title-project-row + .form-group,
    #editTaskModal .task-title-project-row + .form-group,
    #createNoteModal .note-title-project-row + .form-group,
    #editNoteModal .note-title-project-row + .form-group {
        margin-top: 24px;
    }

    #createTaskModal .form-label,
    #editTaskModal .form-label,
    #createNoteModal .form-label,
    #editNoteModal .form-label {
        margin-bottom: 8px;
        line-height: 1.25;
    }

    #createTaskModal .form-input,
    #createTaskModal .form-textarea,
    #createTaskModal .form-select,
    #editTaskModal .form-input,
    #editTaskModal .form-textarea,
    #editTaskModal .form-select,
    #createNoteModal .form-input,
    #createNoteModal .form-textarea,
    #createNoteModal .form-select,
    #editNoteModal .form-input,
    #editNoteModal .form-textarea,
    #editNoteModal .form-select {
        min-height: 44px;
    }

    #createTaskModal .form-actions,
    #editTaskModal .form-actions,
    #createNoteModal .form-actions,
    #editNoteModal .modal-footer {
        flex-shrink: 0;
        align-items: center;
        min-height: 40px;
        margin-top: 24px;
        padding-top: 0;
        padding-right: 0;
        border-top: 0;
        background: transparent;
    }

    #createTaskModal .form-actions .btn,
    #editTaskModal .form-actions .btn,
    #createNoteModal .form-actions .btn,
    #editNoteModal .modal-footer .btn {
        min-height: 40px;
        padding: 9px 16px;
    }

    #createTaskModal .task-modal-scroll,
    #editTaskModal .task-modal-scroll,
    #createNoteModal .note-modal-scroll,
    #editNoteModal .note-modal-scroll {
        min-width: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    #createTaskModal .task-modal-scroll,
    #editTaskModal .task-modal-scroll,
    #createNoteModal .note-modal-scroll,
    #editNoteModal .note-modal-scroll {
        max-height: calc(80dvh - 190px);
    }
}

/* Let desktop task popups grow naturally until the 80dvh limit. */
@media (min-width: 769px) {
    #createTaskModal .task-modal-content,
    #editTaskModal .task-modal-content {
        height: auto !important;
        max-height: 80dvh !important;
        overflow: hidden !important;
    }

    #createTaskModal .task-modal-content form,
    #editTaskModal .task-modal-content form {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    #createTaskModal .task-modal-scroll,
    #editTaskModal .task-modal-scroll {
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #createTaskModal #createTaskDescription,
    #editTaskModal #editTaskDescription {
        height: 96px;
        min-height: 96px;
        max-height: none !important;
        overflow-y: hidden;
    }

    #createTaskModal .task-date-repeat-row + .form-group,
    #editTaskModal .task-date-repeat-row + .form-group {
        margin-top: 24px;
    }
}

/* Keep the original field order on mobile after the desktop-only move. */
@media (max-width: 768px) {
    #createTaskModal .task-modal-scroll,
    #editTaskModal .task-modal-scroll {
        display: flex;
        flex-direction: column;
    }

    #createTaskModal .task-title-project-row > .form-group:first-child,
    #editTaskModal .task-title-project-row > .form-group:first-child {
        order: 1;
    }

    #createTaskModal .task-title-project-row > .form-group:nth-child(2),
    #editTaskModal .task-title-project-row > .form-group:nth-child(2) {
        order: 2;
    }

    #createTaskModal .task-modal-scroll > .form-group:has(textarea),
    #editTaskModal .task-modal-scroll > .form-group:has(textarea) {
        order: 3;
    }

    #createTaskModal .task-date-repeat-row > .form-group:first-child,
    #editTaskModal .task-date-repeat-row > .form-group:first-child {
        order: 4;
    }

    #createTaskModal .task-date-repeat-row > .task-repeat-group,
    #editTaskModal .task-date-repeat-row > .task-repeat-group {
        order: 5;
    }

    #createTaskModal #createRecurringOptions,
    #editTaskModal #editCreateRecurringOptions {
        order: 6;
    }

    #editTaskModal #editRecurringPanel {
        order: 7;
    }
}

/* Desktop task scheduling row: date and recurrence share one 50/50 line. */
@media (min-width: 769px) {
    #createTaskModal .task-date-repeat-row,
    #editTaskModal .task-date-repeat-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: end;
        gap: 16px;
        margin-top: 24px;
    }

    #createTaskModal .task-date-repeat-row > .form-group,
    #editTaskModal .task-date-repeat-row > .form-group {
        min-width: 0;
        margin-bottom: 0;
    }

    #createTaskModal .task-date-repeat-row .task-repeat-group,
    #editTaskModal .task-date-repeat-row .task-repeat-group {
        display: flex;
        align-items: flex-end;
        min-height: 72px;
    }

    #createTaskModal .task-date-repeat-row .task-repeat-toggle,
    #editTaskModal .task-date-repeat-row .task-repeat-toggle {
        min-height: 44px;
        margin-left: 0;
    }

    #createTaskModal #createRecurringOptions,
    #editTaskModal #editCreateRecurringOptions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-top: 14px;
        margin-bottom: 0;
    }

    #createTaskModal #createRecurringOptions > .form-group,
    #editTaskModal #editCreateRecurringOptions > .form-group {
        min-width: 0;
        margin-bottom: 0;
    }

    #createTaskModal .task-modal-scroll,
    #editTaskModal .task-modal-scroll {
        display: flex;
        flex-direction: column;
    }

    #createTaskModal .task-modal-scroll > .task-title-project-row,
    #editTaskModal .task-modal-scroll > .task-title-project-row {
        order: 1;
    }

    #createTaskModal .task-modal-scroll > .task-date-repeat-row,
    #editTaskModal .task-modal-scroll > .task-date-repeat-row {
        order: 2;
    }

    #createTaskModal .task-modal-scroll > #createRecurringOptions,
    #editTaskModal .task-modal-scroll > #editCreateRecurringOptions {
        order: 3;
    }

    #createTaskModal .task-modal-scroll > .form-group:has(textarea),
    #editTaskModal .task-modal-scroll > .form-group:has(textarea) {
        order: 4;
    }

    #editTaskModal .task-modal-scroll > #editRecurringPanel {
        order: 5;
    }
}

/* Preserve the existing mobile task form flow. */
@media (max-width: 768px) {
    #createTaskModal .task-date-repeat-row,
    #editTaskModal .task-date-repeat-row {
        display: contents;
    }
}

/* Task descriptions use the same internal-scroll behavior as note descriptions. */
@media (min-width: 769px) {
    #createTaskModal .task-modal-content form,
    #editTaskModal .task-modal-content form {
        overflow: visible;
    }

    #createTaskModal .task-modal-scroll,
    #editTaskModal .task-modal-scroll {
        flex: 0 1 auto;
        max-height: none !important;
        overflow: visible !important;
        padding-top: 0;
        padding-bottom: 0;
    }

    #createTaskModal .task-modal-content .form-group:has(#createTaskDescription),
    #editTaskModal .task-modal-content .form-group:has(#editTaskDescription) {
        min-height: 0;
    }

    #createTaskModal #createTaskDescription,
    #editTaskModal #editTaskDescription {
        height: auto;
        min-height: 96px;
        max-height: max(96px, calc(80dvh - 460px));
        overflow-y: hidden;
        resize: none;
        scrollbar-width: none;
        scrollbar-color: transparent transparent;
    }

    #createTaskModal .copyable-field.has-scrollbar #createTaskDescription,
    #editTaskModal .copyable-field.has-scrollbar #editTaskDescription {
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
    }

    #createTaskModal #createTaskDescription::-webkit-scrollbar,
    #editTaskModal #editTaskDescription::-webkit-scrollbar {
        display: none;
        width: 5px;
    }

    #createTaskModal .copyable-field.has-scrollbar #createTaskDescription::-webkit-scrollbar,
    #editTaskModal .copyable-field.has-scrollbar #editTaskDescription::-webkit-scrollbar {
        display: block;
    }

    #createTaskModal #createTaskDescription::-webkit-scrollbar-track,
    #editTaskModal #editTaskDescription::-webkit-scrollbar-track {
        background: transparent;
    }

    #createTaskModal #createTaskDescription::-webkit-scrollbar-thumb,
    #editTaskModal #editTaskDescription::-webkit-scrollbar-thumb {
        border: 1px solid transparent;
        border-radius: 999px;
        background-clip: padding-box;
        background-color: rgba(100, 116, 139, 0.42);
    }

    #createTaskModal .copyable-field.has-scrollbar #createTaskDescription + .field-copy-btn,
    #editTaskModal .copyable-field.has-scrollbar #editTaskDescription + .field-copy-btn {
        right: 18px;
    }
}

@media (min-width: 769px) {
    #createTaskModal #createTaskDescription,
    #editTaskModal #editTaskDescription {
        height: auto;
        min-height: 96px;
        max-height: max(96px, calc(80dvh - 460px));
    }
}

@media (min-width: 769px) {
    .custom-select {
        position: relative;
        width: 100%;
    }

    .custom-select-native {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .custom-select-trigger {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 10px 14px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg-primary);
        color: var(--text-primary);
        font: inherit;
        font-size: 16px;
        line-height: 1.25;
        text-align: left;
        cursor: pointer;
        transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
    }

    .custom-select-trigger:hover,
    .custom-select.is-open .custom-select-trigger {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
    }

    .custom-select-chevron {
        flex: 0 0 auto;
        width: 9px;
        height: 9px;
        margin: -4px 3px 0 0;
        border-right: 2px solid var(--text-secondary);
        border-bottom: 2px solid var(--text-secondary);
        transform: rotate(45deg);
        transition: transform .16s ease, border-color .16s ease;
    }

    .custom-select.is-open .custom-select-chevron {
        margin-top: 5px;
        border-color: var(--accent);
        transform: rotate(225deg);
    }

    .custom-select-menu {
        position: absolute;
        z-index: 80;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        max-height: 260px;
        overflow-y: auto;
        padding: 6px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg-primary);
        box-shadow: 0 16px 34px rgba(15, 23, 42, .16);
    }

    .custom-select-menu[hidden] {
        display: none;
    }

    .custom-select-option {
        width: 100%;
        min-height: 38px;
        display: flex;
        align-items: center;
        padding: 8px 10px;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: var(--text-primary);
        font: inherit;
        font-size: 15px;
        line-height: 1.25;
        text-align: left;
        cursor: pointer;
        transition: background-color .14s ease, color .14s ease;
    }

    .custom-select-option:hover,
    .custom-select-option[aria-selected="true"] {
        background: color-mix(in srgb, var(--accent) 11%, transparent);
        color: var(--accent);
    }

    [data-theme="dark"] .custom-select-menu {
        box-shadow: 0 16px 34px rgba(0, 0, 0, .34);
    }

    .custom-date-picker {
        position: relative;
        width: 100%;
    }

    .custom-date-native {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .custom-date-trigger {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 10px 14px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg-primary);
        color: var(--text-primary);
        font: inherit;
        font-size: 16px;
        line-height: 1.25;
        text-align: left;
        cursor: pointer;
        transition: border-color .16s ease, box-shadow .16s ease;
    }

    .custom-date-trigger:hover,
    .custom-date-picker.is-open .custom-date-trigger {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
    }

    .custom-date-chevron {
        flex: 0 0 auto;
        width: 9px;
        height: 9px;
        margin: -4px 3px 0 0;
        border-right: 2px solid var(--text-secondary);
        border-bottom: 2px solid var(--text-secondary);
        transform: rotate(45deg);
        transition: transform .16s ease, border-color .16s ease;
    }

    .custom-date-picker.is-open .custom-date-chevron {
        margin-top: 5px;
        border-color: var(--accent);
        transform: rotate(225deg);
    }

    .custom-date-menu {
        position: absolute;
        z-index: 80;
        top: calc(100% + 6px);
        left: 0;
        width: 300px;
        padding: 14px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--bg-primary);
        box-shadow: 0 16px 34px rgba(15, 23, 42, .16);
        display: none;
    }

    .custom-date-picker.is-open .custom-date-menu {
        display: block;
    }

    .custom-date-head,
    .custom-date-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .custom-date-month {
        color: var(--text-primary);
        font-size: 15px;
        text-transform: capitalize;
    }

    .custom-date-nav {
        display: flex;
        gap: 4px;
    }

    .custom-date-nav-btn,
    .custom-date-footer-btn {
        border: 0;
        background: transparent;
        color: var(--accent);
        font: inherit;
        cursor: pointer;
    }

    .custom-date-nav-btn {
        width: 30px;
        height: 30px;
        border-radius: 7px;
        font-size: 24px;
        line-height: 1;
    }

    .custom-date-nav-btn:hover,
    .custom-date-footer-btn:hover {
        background: color-mix(in srgb, var(--accent) 10%, transparent);
    }

    .custom-date-weekdays,
    .custom-date-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
        margin-top: 12px;
        text-align: center;
    }

    .custom-date-weekdays {
        color: var(--text-secondary);
        font-size: 11px;
        font-weight: 700;
    }

    .custom-date-day {
        width: 100%;
        aspect-ratio: 1;
        border: 1px solid transparent;
        border-radius: 7px;
        background: transparent;
        color: var(--text-primary);
        font: inherit;
        font-size: 13px;
        cursor: pointer;
    }

    .custom-date-day:hover,
    .custom-date-day.is-selected {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 13%, transparent);
        color: var(--accent);
        font-weight: 700;
    }

    .custom-date-day.is-today {
        box-shadow: inset 0 -2px 0 var(--accent);
    }

    .custom-date-day.is-outside {
        color: var(--text-secondary);
        opacity: .52;
    }

    .custom-date-footer {
        margin-top: 14px;
        padding-top: 10px;
        border-top: 1px solid var(--border);
    }

    .custom-date-footer-btn {
        min-height: 30px;
        padding: 5px 8px;
        border-radius: 7px;
        font-size: 13px;
        font-weight: 600;
    }

    [data-theme="dark"] .custom-date-menu {
        box-shadow: 0 16px 34px rgba(0, 0, 0, .34);
    }
}

/* Compact desktop date calendar without changing its width. */
@media (min-width: 769px) {
    .custom-date-menu {
        padding: 12px;
    }

    .custom-date-nav-btn {
        width: 28px;
        height: 28px;
    }

    .custom-date-weekdays,
    .custom-date-grid {
        gap: 3px;
        margin-top: 10px;
    }

    .custom-date-day {
        height: 30px;
        aspect-ratio: auto;
    }

    .custom-date-footer {
        margin-top: 12px;
        padding-top: 8px;
    }

    .custom-date-footer-btn {
        min-height: 28px;
        padding: 4px 7px;
    }
}

/* Open the task date calendar as an overlay inside the task popup. */
@media (min-width: 769px) {
    #createTaskModal .custom-date-picker,
    #editTaskModal .custom-date-picker {
        z-index: 90;
    }

    #createTaskModal .custom-date-picker.is-open .custom-date-menu,
    #editTaskModal .custom-date-picker.is-open .custom-date-menu {
        position: absolute;
        top: calc(100% + 6px);
        right: auto;
        left: 0;
        width: 300px;
        margin-top: 0;
        z-index: 100;
    }
}

/* Shopping Page Styles */
.shopping-page {
    width: 100%;
}

.shopping-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 20px;
}

.shopping-header .page-title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 4px;
}

.shopping-subtitle {
    color: var(--text-secondary);
    font-size: 15px;
}

.shopping-summary {
    display: flex;
    gap: 12px;
}

.shopping-summary-card {
    min-width: 110px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px var(--shadow);
}

.shopping-summary-value {
    display: block;
    color: var(--accent);
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.shopping-summary-label {
    color: var(--text-secondary);
    font-size: 13px;
}

.shopping-section {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px var(--shadow);
}

.shopping-quick-form {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(120px, 0.5fr) minmax(180px, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
}

.shopping-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.shopping-filter-group {
    display: flex;
    gap: 6px;
    padding: 4px;
    background-color: var(--bg-tertiary);
    border-radius: 10px;
}

.shopping-filter {
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.shopping-filter:hover {
    color: var(--text-primary);
}

.shopping-filter.active {
    background-color: var(--accent);
    color: white;
}

.shopping-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shopping-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    background-color: var(--bg-primary);
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    transition: all 0.2s;
}

.shopping-item:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px var(--shadow);
}

.shopping-item.purchased {
    opacity: 0.72;
}

.shopping-item.purchased .shopping-item-name {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.shopping-check {
    position: relative;
    width: 34px;
    height: 34px;
    cursor: pointer;
}

.shopping-check input {
    opacity: 0;
    width: 0;
    height: 0;
}

.shopping-check span {
    position: absolute;
    inset: 0;
    border: 2px solid var(--border);
    border-radius: 50%;
    background-color: var(--bg-primary);
    transition: all 0.2s;
}

.shopping-check:hover span {
    border-color: var(--success);
    box-shadow: 0 2px 8px var(--shadow);
}

.shopping-check input:checked + span {
    background-color: var(--success);
    border-color: var(--success);
}

.shopping-check input:checked + span::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 6px;
    width: 8px;
    height: 16px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.shopping-item-content {
    min-width: 0;
}

.shopping-item-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.shopping-item-name {
    font-size: 17px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.shopping-item-quantity {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 999px;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.shopping-item-note {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.shopping-item-actions {
    display: flex;
    gap: 4px;
}

.shopping-note-toggle,
.shopping-inline-actions {
    display: none;
}

@media (min-width: 901px) {
    .shopping-page {
        --shopping-amber: #c08a3a;
        --shopping-amber-bg: rgba(192, 138, 58, 0.11);
        --shopping-amber-border: rgba(192, 138, 58, 0.17);
        --shopping-amber-shadow: rgba(192, 138, 58, 0.13);
        --shopping-mint: #5aa98d;
        --shopping-mint-bg: rgba(90, 169, 141, 0.1);
        --shopping-mint-border: rgba(90, 169, 141, 0.16);
        --shopping-mint-shadow: rgba(90, 169, 141, 0.13);
        --shopping-blue: #4f7fd8;
        --shopping-blue-bg: rgba(79, 127, 216, 0.1);
        --shopping-blue-border: rgba(79, 127, 216, 0.16);
        --shopping-blue-shadow: rgba(79, 127, 216, 0.13);
        --shopping-red: #d96f72;
        --shopping-red-bg: rgba(217, 111, 114, 0.1);
        --shopping-red-border: rgba(217, 111, 114, 0.16);
        --shopping-red-shadow: rgba(217, 111, 114, 0.13);
        --shopping-surface-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12));
    }

    .shopping-page .btn,
    .shopping-page .shopping-filter,
    .shopping-page .shopping-item,
    .shopping-page .shopping-check span,
    .shopping-page .shopping-actions-menu-btn,
    .shopping-page .shopping-inline-action-btn,
    .shopping-page .shopping-summary-card {
        box-sizing: border-box;
    }

    .shopping-page .shopping-subtitle {
        color: var(--text-secondary);
    }

    .shopping-page .shopping-section,
    .shopping-page .shopping-summary-card {
        background:
            var(--shopping-surface-gradient),
            color-mix(in srgb, var(--bg-secondary) 92%, white);
        border-color: var(--shopping-amber-border);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.06);
    }

    .shopping-page .shopping-summary-card:nth-child(2) {
        border-color: var(--shopping-mint-border);
    }

    .shopping-page .shopping-summary-value {
        color: var(--shopping-amber);
    }

    .shopping-page .shopping-summary-card:nth-child(2) .shopping-summary-value {
        color: var(--shopping-mint);
    }

    .shopping-page .btn {
        border: 1px solid var(--shopping-btn-border, var(--shopping-amber-border));
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.08)),
            var(--shopping-btn-bg, var(--shopping-amber-bg));
        color: var(--shopping-btn-color, var(--shopping-amber));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 8px 18px var(--shopping-btn-shadow, var(--shopping-amber-shadow));
        font-weight: 700;
        transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }

    .shopping-page .btn:hover {
        border-color: color-mix(in srgb, var(--shopping-btn-border, var(--shopping-amber-border)) 62%, var(--shopping-btn-color, var(--shopping-amber)));
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.12)),
            color-mix(in srgb, var(--shopping-btn-bg, var(--shopping-amber-bg)) 88%, var(--shopping-btn-color, var(--shopping-amber)));
        color: var(--shopping-btn-color, var(--shopping-amber));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 10px 22px var(--shopping-btn-shadow, var(--shopping-amber-shadow));
        transform: translateY(-1px);
    }

    .shopping-page .btn-primary {
        --shopping-btn-color: var(--shopping-amber);
        --shopping-btn-bg: var(--shopping-amber-bg);
        --shopping-btn-border: var(--shopping-amber-border);
        --shopping-btn-shadow: var(--shopping-amber-shadow);
    }

    .shopping-page .btn-secondary {
        --shopping-btn-color: var(--text-secondary);
        --shopping-btn-bg: rgba(148, 163, 184, 0.1);
        --shopping-btn-border: rgba(148, 163, 184, 0.22);
        --shopping-btn-shadow: rgba(148, 163, 184, 0.12);
    }

    .shopping-page .form-input,
    .shopping-page .form-textarea {
        border-color: rgba(148, 163, 184, 0.24);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.08)),
            var(--bg-primary);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    .shopping-page .form-input:focus,
    .shopping-page .form-textarea:focus {
        border-color: var(--shopping-amber);
        box-shadow: 0 0 0 3px var(--shopping-amber-bg);
    }

    .shopping-page .shopping-filter-group {
        border: 1px solid rgba(148, 163, 184, 0.18);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.08)),
            rgba(148, 163, 184, 0.08);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    .shopping-page .shopping-filter {
        border: 1px solid transparent;
        color: var(--text-secondary);
        font-weight: 800;
    }

    .shopping-page .shopping-filter:hover {
        color: var(--shopping-amber);
    }

    .shopping-page .shopping-filter.active {
        border-color: color-mix(in srgb, var(--shopping-amber) 68%, var(--shopping-amber-border));
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.08)),
            var(--shopping-amber-bg);
        color: var(--shopping-amber);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 8px 18px var(--shopping-amber-shadow);
    }

    .shopping-page .shopping-item {
        border: 1px solid rgba(148, 163, 184, 0.24);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.06)),
            var(--bg-primary);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .shopping-page .shopping-item:hover {
        border-color: color-mix(in srgb, var(--shopping-amber) 58%, var(--shopping-amber-border));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 10px 24px var(--shopping-amber-shadow);
        transform: translateY(-1px);
    }

    .shopping-page .shopping-item.purchased {
        opacity: 0.84;
        border-color: var(--shopping-mint-border);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.06)),
            color-mix(in srgb, var(--shopping-mint-bg) 34%, var(--bg-primary));
    }

    .shopping-page .shopping-item.purchased:hover {
        border-color: color-mix(in srgb, var(--shopping-mint) 62%, var(--shopping-mint-border));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 10px 24px var(--shopping-mint-shadow);
    }

    .shopping-page .shopping-check span {
        border: 1px solid rgba(148, 163, 184, 0.28);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.08)),
            rgba(148, 163, 184, 0.07);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    .shopping-page .shopping-check:hover span {
        border-color: var(--shopping-mint-border);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 8px 18px var(--shopping-mint-shadow);
    }

    .shopping-page .shopping-check input:checked + span {
        border: 2px solid color-mix(in srgb, var(--shopping-mint) 78%, var(--shopping-mint-border));
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.08)),
            color-mix(in srgb, var(--shopping-mint) 13%, white);
    }

    .shopping-page .shopping-check input:checked + span::after {
        border-color: var(--shopping-mint);
    }

    .shopping-page .shopping-item-quantity {
        border: 1px solid var(--shopping-amber-border);
        background-color: var(--shopping-amber-bg);
        color: var(--shopping-amber);
    }

    .shopping-page .shopping-item-note {
        color: var(--text-secondary);
    }

    .shopping-page .shopping-item-actions .shopping-actions-menu-btn {
        border: 1px solid rgba(148, 163, 184, 0.2);
        border-radius: 10px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.08)),
            rgba(148, 163, 184, 0.08);
        color: var(--text-secondary);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54);
    }

    .shopping-page .shopping-item-actions .shopping-actions-menu-btn:hover {
        border-color: var(--shopping-amber-border);
        background-color: var(--shopping-amber-bg);
        color: var(--shopping-amber);
        transform: translateY(-1px);
    }

    .shopping-page .shopping-inline-actions {
        display: grid;
        grid-column: 2 / 4;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 8px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 10px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.06)),
            var(--bg-primary);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 10px 24px rgba(15, 23, 42, 0.08);
    }

    .shopping-page .shopping-inline-action-btn {
        min-height: 40px;
        border: 1px solid var(--shopping-blue-border);
        border-radius: 8px;
        background-color: var(--shopping-blue-bg);
        color: var(--shopping-blue);
        cursor: pointer;
        font: inherit;
        font-size: 13px;
        font-weight: 800;
    }

    .shopping-page .shopping-inline-action-btn.danger {
        border-color: var(--shopping-red-border);
        background-color: var(--shopping-red-bg);
        color: var(--shopping-red);
    }
}

/* Settings Page */
.settings-sidebar {
    width: 300px;
}

.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 14px;
    text-align: left;
    transition: all 0.2s;
}

.settings-nav-item .bi-icon {
    color: var(--accent);
}

.settings-nav-item:hover {
    background-color: var(--bg-tertiary);
}

.settings-nav-item.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: white;
    box-shadow: 0 8px 18px rgba(59, 130, 246, 0.18);
}

.settings-nav-item.active .bi-icon {
    color: currentColor;
}

.settings-logout-form {
    margin-top: 8px;
}

.settings-logout-form .settings-nav-item {
    font-family: inherit;
}

.settings-nav-danger {
    color: var(--danger);
}

.settings-nav-danger:hover {
    background-color: rgba(239, 68, 68, 0.12);
}

.settings-content {
    min-width: 0;
}

.settings-panel {
    display: none;
}

.settings-panel.active {
    display: block;
}

.settings-description {
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: 4px;
}

.settings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background-color: var(--bg-primary);
    border: 2px solid var(--border);
    border-radius: 8px;
    transition: all 0.2s;
}

.settings-row:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px var(--shadow);
}

.settings-row-title {
    font-size: 16px;
    font-weight: 700;
}

.settings-row-description {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 2px;
}

.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.admin-user-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.admin-account-filters,
.admin-user-search,
.admin-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-account-filters .btn.active {
    color: var(--color-blue-dark);
    border-color: color-mix(in srgb, var(--color-blue) 55%, var(--border));
    background: color-mix(in srgb, var(--color-blue) 12%, var(--bg-primary));
}

.admin-user-search .form-input {
    width: min(320px, 32vw);
}

.admin-user-name-line {
    display: flex;
    align-items: center;
    gap: 7px;
}

.admin-demo-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    color: var(--color-green-dark);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid color-mix(in srgb, var(--color-green) 34%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--color-green) 11%, var(--bg-primary));
}

.admin-pagination {
    justify-content: center;
    margin-top: 18px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.admin-pagination .disabled {
    opacity: 0.45;
    pointer-events: none;
}

.admin-users-empty {
    padding: 32px !important;
    color: var(--text-secondary);
    text-align: center !important;
}

@media (max-width: 768px) {
    .admin-user-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-account-filters .btn {
        flex: 1;
    }

    .admin-user-search {
        flex-wrap: wrap;
    }

    .admin-user-search .form-input {
        width: 100%;
    }
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.admin-table th,
.admin-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
}

.admin-table th {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.admin-user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-user-cell small {
    display: block;
    color: var(--text-secondary);
    margin-top: 2px;
}

.admin-user-avatar,
.admin-favicon-preview {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.admin-user-avatar img,
.admin-favicon-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-favicon-row {
    align-items: flex-start;
}

.admin-sound-row {
    align-items: flex-start;
}

.admin-toast-row {
    align-items: flex-start;
}

.admin-session-row {
    align-items: flex-start;
}

.performance-status {
    margin-bottom: 16px;
    color: var(--text-secondary);
    font-size: 14px;
}

.performance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.performance-card {
    min-width: 0;
    padding: 16px;
    background-color: var(--bg-primary);
    border: 2px solid var(--border);
    border-radius: 8px;
}

.performance-label {
    display: block;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.performance-card strong {
    display: block;
    margin-top: 8px;
    font-size: 24px;
    line-height: 1.1;
}

.performance-card small,
.performance-table small {
    color: var(--text-secondary);
}

.performance-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.performance-badge.good {
    background-color: rgba(16, 185, 129, 0.14);
    color: var(--success);
}

.performance-badge.ok {
    background-color: rgba(245, 158, 11, 0.16);
    color: var(--warning);
}

.performance-badge.bad {
    background-color: rgba(239, 68, 68, 0.14);
    color: var(--danger);
}

.performance-badge.muted {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

.performance-table-wrap {
    margin-bottom: 16px;
}

.performance-table {
    min-width: 560px;
}

.performance-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-favicon-control {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    width: min(520px, 100%);
}

.admin-sound-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: min(640px, 100%);
}

.admin-toast-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: min(640px, 100%);
}

.admin-session-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: min(360px, 100%);
}

.admin-leaderboard-control {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
    width: min(520px, 100%);
}

.admin-number-field {
    display: flex;
    flex: 1 1 130px;
    flex-direction: column;
    gap: 6px;
    min-width: 130px;
}

.admin-number-field span {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.admin-session-control .form-input {
    width: 170px;
}

.admin-toast-control .form-input {
    min-width: min(360px, 100%);
    flex: 1 1 300px;
}

.admin-toast-type-select {
    width: 140px;
    flex: 0 0 140px;
}

.admin-toggle {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.admin-toggle input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.admin-sound-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    flex-shrink: 0;
}

.admin-sound-icon .bi-icon,
.admin-favicon-preview .bi-icon {
    --bi-size: 19px;
}

.admin-sound-empty {
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    background-color: var(--bg-primary);
    display: inline-flex;
    align-items: center;
}

.admin-audio-preview {
    width: min(320px, 100%);
    height: 36px;
}

.admin-upload-btn {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
}

.admin-upload-btn input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.promotion-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 180px auto minmax(100px, 130px) auto;
    gap: 12px;
    margin-bottom: 20px;
    align-items: end;
}

.promotion-top-toggle {
    min-height: 42px;
    align-self: end;
}

.promotion-top-count[hidden],
.promotion-batch-list[hidden] {
    display: none;
}

.promotion-batch-list {
    display: grid;
    gap: 7px;
    margin-top: 14px;
}

.promotion-batch-item {
    display: flex;
    min-height: 38px;
    padding: 7px 10px;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 13px;
}

.promotion-batch-item strong {
    color: var(--text-primary);
}

.promotion-batch-position {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--color-blue) 12%, var(--bg-secondary));
    color: var(--color-blue-dark);
    font-size: 12px;
    font-weight: 800;
}

.profile-location-form {
    flex-wrap: wrap;
}

.profile-location-form .profile-name-input {
    width: min(180px, 24vw) !important;
}

@media (min-width: 769px) and (max-width: 1200px) {
    .promotion-toolbar {
        grid-template-columns: minmax(220px, 1fr) minmax(170px, 1fr) auto;
    }

    .promotion-top-count {
        grid-column: 1 / 2;
    }
}

.promotion-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.promotion-field > span {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.promotion-field .form-input,
.promotion-field .form-select {
    width: 100%;
}

.promotion-generate-button {
    min-height: 42px;
    gap: 7px;
    justify-content: center;
}

.promotion-workspace {
    display: grid;
    grid-template-columns: minmax(260px, 350px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.promotion-video-column {
    min-width: 0;
}

.promotion-person {
    display: flex;
    min-height: 54px;
    margin-bottom: 12px;
    align-items: center;
    gap: 10px;
}

.promotion-person-avatar {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 800;
}

.promotion-person-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promotion-person strong,
.promotion-person small {
    display: block;
}

.promotion-person strong {
    color: var(--text-primary);
    font-size: 15px;
}

.promotion-person small {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 12px;
}

.promotion-preview-shell {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: #f7f8fc;
    box-shadow: 0 12px 30px var(--shadow);
    aspect-ratio: 9 / 16;
}

.promotion-preview-shell canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.promotion-player {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    margin-top: 12px;
    align-items: center;
}

.promotion-player .icon-only {
    width: 42px;
    height: 42px;
    padding: 0;
}

.promotion-player input[type="range"] {
    width: 100%;
    accent-color: var(--color-blue);
}

.promotion-player output {
    color: var(--text-secondary);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.promotion-download-button {
    width: 100%;
    margin-top: 10px;
    gap: 7px;
    justify-content: center;
}

.promotion-status {
    min-height: 20px;
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

.promotion-copy-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 14px;
}

.promotion-copy-card {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.promotion-copy-card:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.promotion-copy-header {
    display: flex;
    margin-bottom: 8px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.promotion-copy-header strong,
.promotion-copy-header small {
    display: block;
}

.promotion-copy-header strong {
    color: var(--text-primary);
    font-size: 15px;
}

.promotion-copy-header small {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 11px;
}

.promotion-copy-header .btn {
    flex: 0 0 auto;
    gap: 6px;
}

.promotion-copy-text {
    width: 100%;
    min-height: 132px;
    resize: vertical;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 980px) {
    .promotion-toolbar {
        grid-template-columns: minmax(0, 1fr) 170px;
    }

    .promotion-generate-button {
        grid-column: 1 / -1;
    }

    .promotion-workspace {
        grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .admin-favicon-control,
    .admin-sound-control,
    .admin-toast-control,
    .admin-session-control,
    .admin-leaderboard-control {
        width: 100%;
        gap: 8px;
        justify-content: flex-start;
    }

    .admin-favicon-control .btn,
    .admin-sound-control .btn,
    .admin-toast-control .btn,
    .admin-session-control .btn,
    .admin-leaderboard-control .btn {
        padding-inline: 10px;
        font-size: 13px;
    }

    .admin-toast-control .form-input {
        flex-basis: 100%;
    }

    .admin-toast-type-select {
        width: 100%;
        flex-basis: 100%;
    }

    .admin-session-control .form-input {
        width: 100%;
        flex-basis: 100%;
    }

    .admin-number-field,
    .admin-leaderboard-control .btn {
        flex-basis: 100%;
        width: 100%;
    }

    .admin-audio-preview {
        flex-basis: 100%;
        max-width: 100%;
        order: 4;
    }

    .promotion-toolbar,
    .promotion-workspace {
        grid-template-columns: 1fr;
    }

    .promotion-toolbar {
        gap: 10px;
    }

    .promotion-generate-button {
        grid-column: auto;
    }

    .promotion-preview-shell {
        width: min(100%, 300px);
        margin-inline: auto;
    }

    .promotion-person {
        width: min(100%, 300px);
        margin-inline: auto;
        margin-bottom: 12px;
    }

    .promotion-player,
    .promotion-download-button,
    .promotion-status {
        width: min(100%, 300px);
        margin-inline: auto;
    }

    .promotion-download-button {
        margin-top: 10px;
    }

    .promotion-copy-column {
        margin-top: 4px;
    }
}

.settings-segmented {
    display: inline-flex;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--bg-secondary);
}

.settings-segment {
    min-height: 34px;
    padding: 7px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
}

.settings-segment.active {
    background-color: var(--accent);
    color: white;
}

.settings-nav-avatar {
    width: 20px;
    height: 20px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
}

.profile-avatar-row {
    align-items: flex-start;
}

.profile-inline-form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.profile-name-input {
    width: min(280px, 42vw);
}

.profile-action-link {
    text-decoration: none;
}

.avatar-settings-form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.avatar-preview {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--bg-secondary);
    font-size: 24px;
    overflow: hidden;
    flex: 0 0 auto;
}

.avatar-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.avatar-file-input {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 2px dashed var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.avatar-file-input:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.avatar-file-input input {
    display: none;
}

.avatar-delete-form {
    margin-left: auto;
}

@media (max-width: 900px) {
    .shopping-quick-form {
        grid-template-columns: 1fr 1fr;
    }

    .shopping-note-input {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .settings-sidebar {
        width: 100%;
    }

    .settings-row {
        align-items: stretch;
        flex-direction: column;
    }

    .avatar-settings-form,
    .avatar-delete-form,
    .profile-inline-form,
    .settings-segmented {
        width: 100%;
    }

    .profile-inline-form {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-name-input {
        width: 100%;
    }

    .avatar-delete-form {
        margin-left: 0;
    }

    .avatar-delete-form .btn,
    .profile-inline-form .btn,
    .profile-action-link,
    .avatar-file-input {
        width: 100%;
    }

    .settings-segment {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .shopping-header,
    .shopping-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .shopping-summary {
        width: 100%;
    }

    .shopping-summary-card {
        flex: 1;
    }

    .shopping-section {
        padding: 16px;
    }

    .shopping-quick-form {
        grid-template-columns: 1fr;
    }

    .shopping-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .shopping-item-actions {
        grid-column: 2;
        justify-content: flex-end;
    }
}

/* Habits Page Styles */
.habits-page {
    width: 100%;
    max-width: none;
    margin: 0;
}

.habits-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 16px;
}

.habits-header .page-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-primary);
}

/* Calendar Styles */
.calendar-section {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-top: 24px;
    box-shadow: 0 2px 8px var(--shadow);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.calendar-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    max-width: 560px;
}

.calendar-day-header {
    text-align: center;
    font-weight: 600;
    font-size: 11px;
    color: var(--text-secondary);
    padding: 4px;
}

.calendar-day {
    width: 100%;
    max-width: 64px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    border-radius: 8px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border);
    position: relative;
    transition: all 0.2s;
}

.calendar-day:not(.empty):hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px var(--shadow);
}

.calendar-day.today {
    outline: 1px solid var(--accent);
    outline-offset: 1px;
}

.calendar-day.empty {
    background: transparent;
}

.calendar-progress {
    width: 42px;
    height: 42px;
}

.calendar-day-number {
    font-size: 11px;
    font-weight: 600;
    fill: var(--text-primary);
    text-anchor: middle;
    dominant-baseline: middle;
}

/* Habits Table Styles */
.habits-section {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px var(--shadow);
}

.habits-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.habits-section .section-header h2 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 4px;
}

.week-range {
    color: var(--text-secondary);
    font-size: 14px;
    white-space: nowrap;
}

.habits-table-container {
    margin-top: 20px;
    overflow-x: auto;
}

.habits-table-header {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto 88px;
    gap: 16px;
    padding: 12px 16px;
    background-color: var(--bg-tertiary);
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.habit-days-col {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
}

.day-header {
    width: 32px;
    text-align: center;
}

.habit-actions-col {
    width: 88px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

.habit-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto 88px;
    gap: 16px;
    padding: 16px;
    background-color: var(--bg-primary);
    border: 2px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    border-left: 5px solid var(--habit-color, var(--accent));
    transition: all 0.2s;
}

.habit-row:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px var(--shadow);
}

.habit-name-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.habit-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.habit-description {
    font-size: 14px;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.habit-checkbox {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.habit-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 32px;
    width: 32px;
    background-color: var(--bg-primary);
    border: 2px solid var(--border);
    border-radius: 6px;
    transition: all 0.2s;
}

.habit-checkbox:hover .checkmark {
    border-color: var(--habit-color, var(--accent));
    box-shadow: 0 2px 8px var(--shadow);
}

.habit-checkbox.is-completed .checkmark {
    background-color: var(--habit-color, var(--accent));
    border-color: var(--habit-color, var(--accent));
}

.habit-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.habit-checkbox.is-completed .checkmark:after {
    display: block;
}

.habit-checkbox .checkmark:after {
    left: 10px;
    top: 6px;
    width: 8px;
    height: 14px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.habit-actions-col .btn-icon,
.shopping-item-actions .btn-icon {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 6px;
    transition: all 0.2s;
}

.habit-actions-col .btn-icon:hover,
.shopping-item-actions .btn-icon:hover {
    background-color: var(--bg-tertiary);
    transform: scale(1.1);
}

.form-control-color {
    width: 100%;
    height: 48px;
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    padding: 4px;
    background-color: var(--bg-primary);
}

.form-control-color:hover {
    border-color: var(--accent);
}

.habit-delete-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 24px;
}

.habit-delete-actions .btn {
    min-width: 110px;
    padding: 12px 32px;
    font-size: 16px;
}

.habit-day-label,
.habit-inline-actions,
.habit-calendar-toggle {
    display: none;
}

.delete-confirm-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.delete-confirm-option input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.delete-confirm-option label {
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    user-select: none;
}

@media (min-width: 1201px) {
    .habits-page {
        --habits-mint: #5aa98d;
        --habits-mint-bg: rgba(90, 169, 141, 0.1);
        --habits-mint-border: rgba(90, 169, 141, 0.16);
        --habits-mint-shadow: rgba(90, 169, 141, 0.13);
        --habits-blue: #4f7fd8;
        --habits-blue-bg: rgba(79, 127, 216, 0.1);
        --habits-blue-border: rgba(79, 127, 216, 0.16);
        --habits-blue-shadow: rgba(79, 127, 216, 0.13);
        --habits-red: #d96f72;
        --habits-red-bg: rgba(217, 111, 114, 0.1);
        --habits-red-border: rgba(217, 111, 114, 0.16);
        --habits-red-shadow: rgba(217, 111, 114, 0.13);
        --habits-amber: #c08a3a;
        --habits-amber-bg: rgba(192, 138, 58, 0.11);
        --habits-amber-border: rgba(192, 138, 58, 0.17);
        --habits-surface-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12));
    }

    .habits-page .btn,
    .habits-page .habit-row,
    .habits-page .habit-checkbox .checkmark,
    .habits-page .habit-actions-menu-btn,
    .habits-page .calendar-day,
    .habits-page .habit-calendar-toggle {
        box-sizing: border-box;
    }

    .habits-page .habits-header .page-title {
        color: var(--text-primary);
        letter-spacing: 0;
    }

    .habits-page .habits-section,
    .habits-page .calendar-section {
        background:
            var(--habits-surface-gradient),
            color-mix(in srgb, var(--bg-secondary) 92%, white);
        border-color: var(--habits-mint-border);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.06);
    }

    .habits-page .calendar-section {
        border-color: var(--habits-blue-border);
    }

    .habits-page .habits-section .section-header h2,
    .habits-page .calendar-header h2 {
        color: var(--text-primary);
    }

    .habits-page .week-range {
        color: var(--habits-mint);
        font-weight: 700;
    }

    .habits-page .btn,
    .habits-page .habit-calendar-toggle {
        border: 1px solid var(--habits-btn-border, var(--habits-mint-border));
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.08)),
            var(--habits-btn-bg, var(--habits-mint-bg));
        color: var(--habits-btn-color, var(--habits-mint));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 8px 18px var(--habits-btn-shadow, var(--habits-mint-shadow));
        font-weight: 700;
        transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }

    .habits-page .btn:hover,
    .habits-page .habit-calendar-toggle:hover {
        border-color: color-mix(in srgb, var(--habits-btn-border, var(--habits-mint-border)) 62%, var(--habits-btn-color, var(--habits-mint)));
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.12)),
            color-mix(in srgb, var(--habits-btn-bg, var(--habits-mint-bg)) 88%, var(--habits-btn-color, var(--habits-mint)));
        color: var(--habits-btn-color, var(--habits-mint));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 10px 22px var(--habits-btn-shadow, var(--habits-mint-shadow));
        transform: translateY(-1px);
    }

    .habits-page .btn-primary {
        --habits-btn-color: var(--habits-mint);
        --habits-btn-bg: var(--habits-mint-bg);
        --habits-btn-border: var(--habits-mint-border);
        --habits-btn-shadow: var(--habits-mint-shadow);
    }

    .habits-page .btn-secondary,
    .habits-page .habit-calendar-toggle {
        --habits-btn-color: var(--text-secondary);
        --habits-btn-bg: rgba(148, 163, 184, 0.1);
        --habits-btn-border: rgba(148, 163, 184, 0.22);
        --habits-btn-shadow: rgba(148, 163, 184, 0.12);
    }

    .habits-page .btn-danger {
        --habits-btn-color: var(--habits-red);
        --habits-btn-bg: var(--habits-red-bg);
        --habits-btn-border: var(--habits-red-border);
        --habits-btn-shadow: var(--habits-red-shadow);
    }

    .habits-page .habits-table-header {
        border: 1px solid rgba(148, 163, 184, 0.18);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.08)),
            rgba(148, 163, 184, 0.08);
        color: var(--text-secondary);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    /* The header and every habit row must share the same seven day columns. */
    .habits-page .habit-days-col {
        display: grid;
        grid-template-columns: repeat(7, 32px);
        gap: 12px;
        justify-content: end;
    }

    .habits-page .habit-day-cell {
        width: 32px;
    }

    .habits-page .habit-row {
        border: 1px solid rgba(148, 163, 184, 0.24);
        border-left: 4px solid color-mix(in srgb, var(--habit-color, var(--habits-mint)) 76%, var(--habits-mint-border));
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.06)),
            var(--bg-primary);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .habits-page .habit-row:hover {
        border-color: color-mix(in srgb, var(--habit-color, var(--habits-mint)) 52%, rgba(148, 163, 184, 0.24));
        border-left-color: var(--habit-color, var(--habits-mint));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 10px 24px rgba(15, 23, 42, 0.08);
        transform: translateY(-1px);
    }

    .habits-page .habit-checkbox .checkmark {
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 10px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.08)),
            rgba(148, 163, 184, 0.07);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    .habits-page .habit-checkbox:hover .checkmark {
        border-color: color-mix(in srgb, var(--habit-color, var(--habits-mint)) 62%, rgba(148, 163, 184, 0.28));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 8px 18px rgba(15, 23, 42, 0.08);
    }

    .habits-page .habit-checkbox.is-completed .checkmark {
        border: 2px solid color-mix(in srgb, var(--habit-color, var(--habits-mint)) 78%, var(--habits-mint-border));
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.08)),
            color-mix(in srgb, var(--habit-color, var(--habits-mint)) 13%, white);
    }

    .habits-page .habit-checkbox .checkmark:after {
        border-color: var(--habit-color, var(--habits-mint));
    }

    .habits-page .habit-actions-menu-btn {
        border: 1px solid rgba(148, 163, 184, 0.2);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.08)),
            rgba(148, 163, 184, 0.08);
        color: var(--text-secondary);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54);
    }

    .habits-page .habit-actions-menu-btn:hover {
        border-color: var(--habits-mint-border);
        background-color: var(--habits-mint-bg);
        color: var(--habits-mint);
        transform: translateY(-1px);
    }

    .habits-page .habit-inline-actions {
        display: grid;
        position: absolute;
        top: calc(100% - 12px);
        right: 16px;
        z-index: 20;
        min-width: 156px;
        gap: 6px;
        padding: 8px;
        border-radius: 10px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.06)),
            var(--bg-primary);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 10px 24px rgba(15, 23, 42, 0.08);
    }

    .habits-page .habit-row {
        position: relative;
    }

    .habits-page .habit-row.habit-row-actions-open {
        z-index: 30;
    }

    .habits-page .habit-inline-action-btn {
        min-height: 36px;
        padding: 8px 12px;
        border-radius: 8px;
        cursor: pointer;
        font: inherit;
        font-size: 13px;
        font-weight: 800;
        border: 1px solid var(--habits-blue-border);
        background-color: var(--habits-blue-bg);
        color: var(--habits-blue);
    }

    .habits-page .habit-inline-action-btn.danger {
        border-color: var(--habits-red-border);
        background-color: var(--habits-red-bg);
        color: var(--habits-red);
    }

    .habits-page .calendar-day {
        border-color: rgba(148, 163, 184, 0.22);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.08)),
            var(--bg-primary);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54);
    }

    .habits-page .calendar-day:not(.empty):hover {
        border-color: var(--habits-blue-border);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 8px 18px var(--habits-blue-shadow);
    }

    .habits-page .calendar-day.today {
        outline: 2px solid color-mix(in srgb, var(--habits-blue) 78%, var(--habits-blue-border));
        outline-offset: 2px;
    }

    .habits-page .calendar-progress-bg {
        stroke: rgba(148, 163, 184, 0.22);
    }

    .habits-page .delete-confirm-option {
        color: var(--text-secondary);
    }
}

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

.empty-state p {
    font-size: 16px;
    margin: 0;
}

@media (min-width: 769px) {
    .habit-actions-popover {
        display: grid;
        position: fixed;
        z-index: 1000;
        min-width: 156px;
        gap: 6px;
        padding: 8px;
        border-radius: 10px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.06)),
            var(--bg-primary);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 10px 24px rgba(15, 23, 42, 0.12);
    }

    .habit-actions-popover[hidden] {
        display: none;
    }

    .habit-actions-popover .habit-inline-action-btn {
        min-height: 36px;
        padding: 8px 12px;
        border-radius: 8px;
        cursor: pointer;
        font: inherit;
        font-size: 13px;
        font-weight: 800;
        border: 1px solid var(--habits-blue-border, rgba(79, 127, 216, 0.16));
        background-color: var(--habits-blue-bg, rgba(79, 127, 216, 0.1));
        color: var(--habits-blue, #4f7fd8);
    }

    .habit-actions-popover .habit-inline-action-btn.danger {
        border-color: var(--habits-red-border, rgba(217, 111, 114, 0.16));
        background-color: var(--habits-red-bg, rgba(217, 111, 114, 0.1));
        color: var(--habits-red, #d96f72);
    }
}

@media (max-width: 768px) {
    .habits-header {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    
    .calendar-grid {
        gap: 4px;
    }

    .calendar-section,
    .habits-section {
        padding: 12px;
    }
    
    .calendar-day-number {
        font-size: 10px;
    }

    .calendar-progress {
        width: 34px;
        height: 34px;
    }

    .habits-section .section-header {
        align-items: flex-start;
        flex-direction: column;
    }
    
    .habit-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .habits-table-header {
        display: none;
    }
    
    .habit-days-col {
        justify-content: space-between;
    }
    
    .habit-actions-col {
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }
}

/* Responsive hardening */
@media (max-width: 768px) {
    .stats-bar {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 14px;
    }

    .stat-card {
        padding: 16px;
    }

    .section {
        padding: 22px;
    }
}

@media (max-width: 1024px) {
    .app-layout,
    .page-content {
        padding: 16px;
    }

    .sidebar {
        top: 16px;
    }

    .project-list,
    .settings-nav {
        max-height: 260px;
        overflow-y: auto;
    }

    .app-layout > .sidebar:not(.settings-sidebar) .project-list {
        max-height: none;
    }

    .badge-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (max-width: 768px) {
    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    .app-container {
        height: 100dvh;
        min-height: 100dvh;
        background: linear-gradient(180deg, rgba(59, 130, 246, 0.04), var(--bg-primary) 180px);
    }

    .mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-shrink: 0;
        padding: calc(env(safe-area-inset-top, 0px) + 16px) 14px 10px;
        background-color: rgba(243, 244, 246, 0.88);
        backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(209, 213, 219, 0.58);
        position: relative;
        z-index: 45;
    }

    [data-theme="dark"] .mobile-topbar {
        background-color: rgba(31, 41, 55, 0.88);
        border-bottom-color: rgba(75, 85, 99, 0.58);
    }

    .mobile-topbar-title {
        min-width: 0;
        flex: 1;
        text-align: center;
        font-size: 18px;
        font-weight: 800;
        color: var(--text-primary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-topbar-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-topbar-btn {
        width: 42px;
        height: 42px;
        border: none;
        border-radius: 15px;
        background-color: var(--bg-primary);
        color: var(--text-primary);
        box-shadow: 0 6px 20px var(--shadow);
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        flex-shrink: 0;
    }

    .mobile-topbar-btn span {
        width: 22px;
        height: 2px;
        border-radius: 999px;
        background-color: currentColor;
    }

    .mobile-topbar-btn.icon-only {
        font-size: 20px;
        gap: 0;
        font-weight: 800;
    }

    .mobile-topbar-btn.icon-only .bi-icon {
        --bi-size: 21px;
    }

    .mobile-topbar-btn[onclick*="toggleTheme"] {
        border: 1px solid rgba(79, 70, 229, 0.18);
        background-color: #eef2ff;
        color: #4f46e5;
        box-shadow: 0 8px 22px rgba(79, 70, 229, 0.14);
    }

    [data-theme="dark"] .mobile-topbar-btn[onclick*="toggleTheme"] {
        border-color: rgba(245, 158, 11, 0.28);
        background-color: rgba(245, 158, 11, 0.16);
        color: #fbbf24;
        box-shadow: 0 8px 22px rgba(245, 158, 11, 0.16);
    }

    .mobile-topbar-btn[onclick*="focusActiveTask"] {
        border: 1px solid rgba(5, 150, 105, 0.18);
        background-color: #ecfdf5;
        color: #059669;
        box-shadow: 0 8px 22px rgba(5, 150, 105, 0.14);
    }

    [data-theme="dark"] .mobile-topbar-btn[onclick*="focusActiveTask"] {
        border-color: rgba(5, 150, 105, 0.28);
        background-color: rgba(5, 150, 105, 0.16);
        color: #34d399;
        box-shadow: 0 8px 22px rgba(5, 150, 105, 0.16);
    }

    .tool-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: auto;
        min-height: calc(72px + env(safe-area-inset-bottom, 0px));
        z-index: 50;
        border: 1px solid var(--border);
        border-right: 0;
        border-left: 0;
        border-bottom: 0;
        border-radius: 0;
        background-color: var(--bg-primary);
        box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.1);
        flex-shrink: 0;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        align-items: stretch;
        justify-content: stretch;
        gap: 8px;
        padding: 8px 8px max(8px, env(safe-area-inset-bottom, 0px));
        overflow: hidden;
    }

    [data-theme="dark"] .tool-nav {
        background-color: var(--bg-primary);
        border-color: var(--border);
    }

    .tool-nav-item {
        width: auto;
        height: auto;
        min-width: 0;
        min-height: 56px;
        padding: 8px 4px;
        border-radius: 12px;
        display: grid;
        gap: 5px;
        place-items: center;
        align-content: center;
        color: var(--text-secondary);
        font-size: 20px;
    }

    .tool-nav-avatar {
        display: none;
    }

    .tool-nav-spacer {
        display: none;
    }

    .tool-nav-item:hover {
        transform: none;
        background-color: rgba(59, 130, 246, 0.1);
        color: var(--accent);
    }

    .tool-nav-item.active {
        background: linear-gradient(135deg, var(--accent), var(--accent-hover));
        color: white;
        box-shadow: 0 12px 28px rgba(59, 130, 246, 0.24);
    }

    .tool-nav-item .bi-icon {
        --bi-size: 22px;
    }

    .tool-nav-label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        color: currentColor;
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-layout,
    .page-content {
        flex: 1;
        height: auto;
        min-height: 0;
        overflow-y: auto;
        padding: 14px 14px calc(94px + env(safe-area-inset-bottom, 0px));
    }

    .app-layout {
        gap: 14px;
    }

    .section,
    .shopping-section,
    .calendar-section,
    .habits-section {
        padding: 16px;
        border-radius: 22px;
        margin-bottom: 16px;
        box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
    }

    .app-layout > .sidebar:not(.settings-sidebar) {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 70;
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: none;
        padding: calc(env(safe-area-inset-top, 0px) + 16px) 14px calc(env(safe-area-inset-bottom, 0px) + 16px);
        border-radius: 0;
        border-left: none;
        transform: translateX(-104%);
        transition: transform 0.24s ease;
        overflow-y: auto;
        box-shadow: none;
        display: flex;
        flex-direction: column;
    }

    .mobile-drawer-head {
        align-items: center;
        display: flex;
        gap: 8px;
        margin-bottom: 14px;
    }

    .mobile-drawer-profile {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        min-width: 0;
        margin-bottom: 0;
        color: var(--text-primary);
        text-decoration: none;
    }

    .mobile-drawer-avatar {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        border-radius: 50%;
        background-color: var(--bg-tertiary);
        box-shadow: 0 8px 22px var(--shadow);
        overflow: hidden;
        font-size: 20px;
        font-weight: 800;
    }

    .mobile-drawer-avatar img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .mobile-drawer-username {
        min-width: 0;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 17px;
        font-weight: 800;
    }

    .mobile-drawer-close {
        align-items: center;
        background-color: var(--bg-primary);
        border: 1px solid var(--border);
        border-radius: 12px;
        color: var(--text-primary);
        cursor: pointer;
        display: inline-flex;
        flex: 0 0 38px;
        font-size: 24px;
        font-weight: 700;
        height: 38px;
        justify-content: center;
        line-height: 1;
        width: 38px;
    }

    .mobile-drawer-close-icon {
        display: block;
        height: 21px;
        position: relative;
        width: 21px;
    }

    .mobile-drawer-close-icon::before,
    .mobile-drawer-close-icon::after {
        background-color: currentColor;
        border-radius: 999px;
        content: "";
        height: 2px;
        left: 50%;
        position: absolute;
        top: 50%;
        transform-origin: center;
        width: 21px;
    }

    .mobile-drawer-close-icon::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .mobile-drawer-close-icon::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .app-layout > .sidebar:not(.settings-sidebar) .project-list {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 2px 2px 12px;
    }

    .app-layout > .sidebar:not(.settings-sidebar) .sidebar-footer {
        flex-shrink: 0;
    }

    .app-layout > .sidebar:not(.settings-sidebar) .sidebar-actions {
        display: none;
    }

    .app-layout > .sidebar:not(.settings-sidebar) .sidebar-header {
        margin-bottom: 12px;
    }

    .app-layout > .sidebar:not(.settings-sidebar) .sidebar-title {
        font-size: 17px;
    }

    .app-layout > .sidebar:not(.settings-sidebar) .project-item {
        display: grid;
        grid-template-columns: 12px minmax(0, 1fr) minmax(30px, auto) 38px;
        column-gap: 10px;
        row-gap: 0;
        min-height: 48px;
        padding: 8px 8px;
    }

    .app-layout > .sidebar:not(.settings-sidebar) .project-color {
        grid-column: 1;
    }

    .app-layout > .sidebar:not(.settings-sidebar) .project-name {
        font-size: 14px;
        grid-column: 2;
    }

    .app-layout > .sidebar:not(.settings-sidebar) .project-count {
        align-items: center;
        display: inline-flex;
        grid-column: 3;
        height: 26px;
        justify-content: center;
        min-width: 30px;
        padding: 2px 7px;
    }

    .app-layout > .sidebar:not(.settings-sidebar) .project-actions {
        align-items: center;
        justify-content: center;
        position: static;
        display: flex;
        flex: 0 0 38px;
        grid-column: 4;
        justify-self: end;
        margin-left: 0;
        overflow: visible;
        position: relative;
        right: auto;
        width: 38px;
    }

    .app-layout > .sidebar:not(.settings-sidebar) .project-item:hover .project-favorite-icon,
    .app-layout > .sidebar:not(.settings-sidebar) .project-item:hover .project-count {
        display: inline-flex;
    }

    .app-layout > .sidebar:not(.settings-sidebar) .project-action-btn {
        background-color: var(--bg-tertiary);
        color: var(--text-primary);
        font-size: 20px;
        height: 34px;
        line-height: 1;
        opacity: 1;
        width: 34px;
    }

    .mobile-project-menu-open .app-layout > .sidebar:not(.settings-sidebar) {
        transform: translateX(0);
    }

    .mobile-drawer-overlay {
        position: fixed;
        inset: 0;
        z-index: 65;
        background-color: rgba(17, 24, 39, 0.54);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }

    .mobile-project-menu-open .mobile-drawer-overlay {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-project-menu-open {
        overflow: hidden;
    }

    .mobile-fab-stack {
        position: fixed;
        right: 24px;
        bottom: 72px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
        z-index: 55;
        display: flex;
        width: 64px;
        height: 64px;
        align-items: center;
        justify-content: center;
    }

    .mobile-fab {
        width: 64px;
        height: 64px;
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        cursor: pointer;
    }

    .mobile-fab svg {
        width: 30px;
        height: 30px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mobile-fab {
        border: 2px solid rgba(29, 78, 216, 0.28);
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(219, 234, 254, 0.98)),
            #dbeafe;
        color: #1d4ed8;
        box-shadow:
            0 0 0 7px rgba(37, 99, 235, 0.1),
            0 18px 38px rgba(37, 99, 235, 0.34),
            inset 0 1px 0 rgba(255, 255, 255, 0.92);
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
        transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    }

    .mobile-fab:active {
        transform: scale(0.96);
        box-shadow:
            0 0 0 5px rgba(37, 99, 235, 0.08),
            0 12px 26px rgba(37, 99, 235, 0.26),
            inset 0 1px 0 rgba(255, 255, 255, 0.86);
    }

    [data-theme="dark"] .mobile-fab {
        border-color: rgba(147, 197, 253, 0.34);
        background:
            linear-gradient(145deg, rgba(59, 130, 246, 0.42), rgba(37, 99, 235, 0.22)),
            rgba(37, 99, 235, 0.34);
        color: #93c5fd;
        box-shadow:
            0 0 0 7px rgba(96, 165, 250, 0.1),
            0 18px 38px rgba(37, 99, 235, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
        text-shadow: none;
    }

    .section-header,
    .shopping-header,
    .habits-header,
    .calendar-header {
        gap: 12px;
    }

    .section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .section-header > div {
        flex-wrap: wrap;
    }

    .section-title,
    .habits-section .section-header h2 {
        font-size: 21px;
    }

    .stats-bar {
        grid-template-columns: repeat(4, minmax(86px, 1fr));
        gap: 8px;
        margin-bottom: 16px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    .stat-card {
        min-width: 86px;
        padding: 10px 8px;
        min-width: 0;
        border-radius: 16px;
        box-shadow: none;
        text-align: center;
    }

    .stat-label {
        font-size: 10px;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    .stat-value {
        font-size: 16px;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .stat-icon {
        font-size: 16px;
        margin-bottom: 4px;
    }

    .task-date-filters,
    .badge-filter-row,
    .shopping-filter-group {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    .task-date-filter,
    .shopping-filter,
    .badge-filter-row .btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .task-item {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 34px;
        align-items: start;
        gap: 10px;
        padding: 12px;
        border-width: 1px;
        border-radius: 14px;
        cursor: pointer;
        box-shadow: none;
    }

    .task-timer-btn {
        width: 40px;
        height: 40px;
        border-width: 2px;
        font-size: 18px;
    }

    .task-actions {
        width: auto;
        justify-content: flex-end;
        align-self: start;
    }

    .task-actions .btn-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background-color: transparent;
        color: var(--danger);
        font-size: 17px;
        box-shadow: none;
    }

    .task-actions .btn-icon:hover {
        background-color: rgba(239, 68, 68, 0.1);
        transform: none;
    }

    .task-title {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 8px;
        line-height: 1.25;
    }

    .task-meta {
        gap: 6px;
        font-size: 12px;
        line-height: 1.2;
    }

    .task-recurrence,
    .task-overdue,
    .task-date {
        padding: 3px 6px;
        border-radius: 6px;
        font-size: 11px;
    }

    .note-list,
    .badge-grid {
        grid-template-columns: 1fr;
    }

    .badges-page {
        padding: 12px 12px calc(84px + env(safe-area-inset-bottom, 0px));
    }

    .badges-page .stats-bar {
        display: none;
    }

    .badges-mobile-summary {
        align-items: center;
        background-color: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: none;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        min-height: 58px;
        padding: 10px 12px;
    }

    .badges-mobile-summary-label {
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 800;
        line-height: 1.1;
    }

    .badges-mobile-summary-value {
        color: var(--text-primary);
        font-size: 20px;
        font-weight: 900;
        line-height: 1.1;
        margin-top: 3px;
    }

    .badges-mobile-summary-percent {
        align-items: center;
        background-color: rgba(59, 130, 246, 0.12);
        border-radius: 999px;
        color: var(--accent);
        display: inline-flex;
        font-size: 18px;
        font-weight: 900;
        justify-content: center;
        min-height: 38px;
        min-width: 70px;
        padding: 6px 12px;
    }

    .badges-page .section {
        border-radius: 12px;
        box-shadow: none;
        margin-bottom: 10px;
        padding: 12px;
    }

    .badges-board-header {
        display: block;
        margin-bottom: 12px;
    }

    .badges-board-header .section-title {
        display: none;
    }

    .badges-page .badge-filter-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding-bottom: 0;
        width: 100%;
    }

    .badges-page .badge-filter-row .btn {
        flex: none;
        justify-content: center;
        min-height: 42px;
        min-width: 0;
        padding: 9px 10px;
        width: 100%;
    }

    .badges-page .badge-grid {
        gap: 8px;
    }

    .badges-page .badge-card {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-areas:
            "icon main status"
            "icon footer footer";
        gap: 8px 10px;
        min-height: 0;
        padding: 12px;
        text-align: left;
        border-width: 1px;
        border-radius: 12px;
        box-shadow: none;
    }

    .badges-page .badge-card:hover {
        box-shadow: none;
        transform: none;
    }

    .badges-page .badge-icon {
        align-items: center;
        border-radius: 14px;
        display: flex;
        font-size: 24px;
        grid-area: icon;
        height: 44px;
        justify-content: center;
        margin: 0;
        width: 44px;
    }

    .badges-page .badge-card.earned .badge-icon {
        background-color: rgba(34, 197, 94, 0.14);
    }

    .badges-page .badge-card.in-progress .badge-icon {
        background-color: rgba(245, 158, 11, 0.14);
    }

    .badges-page .badge-status {
        align-self: start;
        grid-area: status;
        margin: 0;
        min-height: 26px;
        padding: 4px 8px;
        white-space: nowrap;
    }

    .badges-page .badge-main {
        grid-area: main;
        min-width: 0;
    }

    .badges-page .badge-name {
        font-size: 16px;
        line-height: 1.2;
        margin: 0 0 3px;
        overflow-wrap: anywhere;
    }

    .badges-page .badge-description {
        color: var(--text-secondary);
        font-size: 13px;
        line-height: 1.3;
        min-height: 0;
    }

    .badges-page .badge-footer {
        grid-area: footer;
        margin-top: 0;
        padding-top: 0;
    }

    .badges-page .badge-requirement {
        margin-top: 0;
    }

    .badges-page .badge-progress {
        height: 7px;
        margin-top: 8px;
    }

    .badges-page .badge-progress-meta {
        font-size: 11px;
        line-height: 1.2;
        margin-top: 6px;
    }

    .badges-page .badge-progress-meta span:first-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .badges-page .empty-state {
        padding: 28px 12px;
    }

    .badges-page .empty-state-icon {
        width: 58px;
        height: 58px;
        font-size: 38px;
        margin-bottom: 10px;
        border-radius: 18px;
    }

    .badges-page .empty-state-text {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .badges-help-section {
        padding: 0;
    }

    .badges-help-summary {
        align-items: center;
        display: flex;
        font-size: 15px;
        justify-content: space-between;
        min-height: 44px;
        padding: 0;
    }

    .badges-help-summary::after {
        float: none;
        font-size: 22px;
    }

    .badges-help-content {
        font-size: 13px;
        line-height: 1.45;
        margin-top: 2px;
    }

    .badges-help-content p {
        margin: 8px 0;
    }

    .shopping-summary {
        gap: 8px;
    }

    .shopping-summary-card {
        min-width: 0;
        padding: 12px;
    }

    .shopping-summary-value {
        font-size: 24px;
    }

    .calendar-grid {
        max-width: none;
        width: 100%;
    }

    .calendar-day {
        max-width: none;
    }

    .modal {
        align-items: stretch;
        padding: 10px;
        overflow-x: hidden;
    }

    .modal-content {
        width: 100%;
        max-width: none;
        max-height: calc(100dvh - 20px);
        padding: 18px;
        border-radius: 10px;
        overflow-x: hidden;
    }

    .confirm-modal .compact-confirm-content {
        width: auto !important;
        min-width: min(320px, calc(100vw - 32px));
        max-width: min(400px, calc(100vw - 32px)) !important;
    }

    .modal-content.task-modal-content,
    .modal-content.note-modal-content {
        width: 100%;
        height: calc(100dvh - 20px);
        max-height: calc(100dvh - 20px);
    }

    .modal-content.task-modal-content {
        padding: 16px;
    }

    .task-modal-content .modal-header {
        font-size: 24px;
        line-height: 1.15;
        margin-bottom: 14px;
    }

    .task-modal-scroll {
        padding: 3px 6px 3px 3px;
    }

    .task-modal-content .form-group {
        margin-bottom: 14px;
    }

    .task-modal-content .form-label {
        margin-bottom: 6px;
        font-size: 14px;
        font-weight: 700;
    }

    .task-modal-content .form-input,
    .task-modal-content .form-textarea,
    .task-modal-content .form-select {
        min-height: 44px;
        padding: 10px 12px;
        border-width: 1px;
        border-radius: 8px;
        font-size: 15px;
    }

    .task-modal-content #editTaskDescription {
        min-height: 78px;
    }

    .task-modal-content .recurring-edit-panel {
        padding: 12px;
        margin-bottom: 12px;
        border-radius: 10px;
    }

    .task-modal-content .recurring-edit-header {
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 0;
    }

    .task-modal-content .recurring-edit-header p {
        display: none;
    }

    .task-modal-content .recurring-toggle {
        gap: 7px;
        white-space: normal;
        font-size: 14px;
        line-height: 1.2;
    }

    .task-modal-content .recurrence-options {
        padding: 10px;
        margin-top: 12px;
        margin-bottom: 12px;
        border-radius: 10px;
    }

    .task-modal-content .form-actions {
        gap: 10px;
        padding-top: 12px;
        margin-top: 10px;
        padding-bottom: max(0px, env(safe-area-inset-bottom));
        flex-wrap: nowrap;
    }

    .form-actions,
    .modal-footer {
        flex-wrap: wrap;
    }

    .form-actions .btn,
    .modal-footer .btn {
        min-width: 120px;
    }

    .notification-container {
        left: 12px;
        right: 12px;
        top: 12px;
    }

    .notification {
        max-width: none;
    }

    .chart-container {
        height: 240px;
        margin: 12px 0;
    }

    .statistics-page {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }

    .statistics-filter-section,
    .statistics-history-section,
    .statistics-projects-section,
    .statistics-chart-section,
    .statistics-heatmap-section {
        padding: 12px;
    }

    .statistics-header {
        gap: 8px;
    }

    .statistics-header .settings-description {
        display: none;
    }

    .statistics-toolbar-actions {
        justify-content: stretch;
        width: 100%;
        gap: 6px;
    }

    .statistics-toolbar-actions .btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 38px;
        padding: 8px 6px;
        font-size: 13px;
    }

    .statistics-filter-grid {
        display: grid;
        gap: 6px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 10px;
    }

    .statistics-period {
        min-height: 36px;
        font-size: 12px;
        min-width: 0;
        padding: 8px 7px;
    }

    .statistics-custom-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 8px;
    }

    .statistics-custom-form label {
        min-width: 0;
    }

    .statistics-custom-form .statistics-project-field,
    .statistics-custom-form .statistics-submit-btn {
        grid-column: 1 / -1;
        flex-basis: auto;
        width: 100%;
    }

    .statistics-custom-form .statistics-date-field {
        flex: none;
        width: 100%;
    }

    .statistics-custom-form label span {
        font-size: 12px;
        line-height: 1;
    }

    .statistics-custom-form .form-input {
        display: block;
        inline-size: 100%;
        min-width: 0;
        min-inline-size: 0;
        max-width: 100%;
        max-inline-size: 100%;
        min-height: 40px;
        padding: 8px 10px;
        border-width: 1px;
        font-size: 14px;
    }

    .statistics-custom-form input[type="date"] {
        width: 100%;
        inline-size: 100%;
        min-width: 0;
        min-inline-size: 0;
        max-width: 100%;
        max-inline-size: 100%;
        cursor: pointer;
    }

    .statistics-custom-form input[type="date"]::-webkit-date-and-time-value {
        min-width: 0;
        text-align: left;
    }

    .statistics-custom-form input[type="date"]::-webkit-datetime-edit {
        min-width: 0;
    }

    .statistics-custom-form input[type="date"]::-webkit-calendar-picker-indicator {
        flex-shrink: 0;
        margin-left: 0;
        cursor: pointer;
        opacity: 1;
    }

    .statistics-summary {
        grid-template-columns: 1fr;
        gap: 6px;
        margin-bottom: 12px;
    }

    .statistics-summary .stat-card {
        min-height: 40px;
        grid-template-columns: 30px minmax(0, 1fr) minmax(74px, auto);
        column-gap: 8px;
        padding: 7px 9px;
        border-radius: 8px;
    }

    .statistics-summary .stat-icon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
    }

    .statistics-summary .stat-icon .bi-icon {
        --bi-size: 15px;
    }

    .statistics-summary .stat-label {
        font-size: 12px;
        line-height: 1.15;
    }

    .statistics-summary .stat-value {
        max-width: 148px;
        font-size: 17px;
        line-height: 1.08;
        overflow-wrap: anywhere;
        text-align: right;
        white-space: normal;
    }

    .statistics-summary .statistics-best-day {
        max-width: 170px;
        font-size: 14px;
    }

    .statistics-comparison-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 12px;
    }

    .statistics-comparison-card {
        padding: 12px;
        border-radius: 10px;
    }

    .statistics-comparison-value {
        font-size: 24px;
        line-height: 1.05;
    }

    .statistics-comparison-detail {
        font-size: 13px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .statistics-heatmap-scroll {
        margin-left: -2px;
        padding-bottom: 6px;
    }

    .statistics-heatmap-card {
        padding: 12px 10px;
    }

    .statistics-day-card,
    .statistics-project-row {
        padding: 9px 10px;
    }

    .statistics-day-main {
        align-items: flex-start;
    }

    .statistics-day-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .statistics-day-date,
    .statistics-project-name {
        font-size: 14px;
        margin-bottom: 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .statistics-day-metrics {
        font-size: 14px;
    }

    .statistics-project-percent {
        font-size: 18px;
    }

    .statistics-project-row {
        gap: 8px;
        min-height: 40px;
    }

    .statistics-project-metrics {
        font-size: 13px;
    }

    .statistics-modal-overlay {
        align-items: flex-end;
        padding: 10px 10px calc(86px + env(safe-area-inset-bottom, 0px));
    }

    .statistics-modal {
        border-radius: 12px;
        max-height: 72vh;
        padding: 16px;
    }

    .statistics-task-row {
        align-items: flex-start;
    }

    .leaderboard-page {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }

    .leaderboard-section {
        padding: 12px;
    }

    .leaderboard-header {
        align-items: stretch;
        gap: 10px;
    }

    .leaderboard-period-tabs {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .leaderboard-period-tabs .btn {
        font-size: 14px;
        min-height: 40px;
        min-width: 0;
        padding: 8px 10px;
    }

    .leaderboard-user-position {
        margin-bottom: 12px;
        padding: 14px;
    }

    .leaderboard-user-label {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .leaderboard-user-main {
        gap: 12px;
    }

    .leaderboard-user-rank {
        font-size: 36px;
        min-width: 76px;
    }

    .leaderboard-user-meta {
        font-size: 14px;
    }

    .leaderboard-stats-grid {
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 14px;
    }

    .leaderboard-stat-card {
        padding: 10px;
    }

    .leaderboard-stat-icon {
        width: 34px;
        height: 34px;
        border-radius: 12px;
        font-size: 18px;
        margin-bottom: 4px;
    }

    .leaderboard-stat-label {
        font-size: 12px;
    }

    .leaderboard-stat-value {
        font-size: 15px;
    }

    .leaderboard-item {
        gap: 8px;
        grid-template-columns: 34px 28px minmax(0, 1fr) auto;
        min-height: 58px;
        padding: 10px;
    }

    .leaderboard-rank {
        font-size: 16px;
    }

    .leaderboard-rank.top-1 {
        font-size: 20px;
    }

    .leaderboard-avatar {
        font-size: 22px;
    }

    .leaderboard-name {
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .leaderboard-time {
        font-size: 14px;
    }
}

@media (max-width: 520px) {
    .app-layout,
    .page-content {
        padding: 10px;
    }

    .stats-bar {
        grid-template-columns: repeat(4, minmax(78px, 1fr));
        gap: 6px;
    }

    .stat-card {
        min-width: 78px;
        padding: 9px 6px;
    }

    .section,
    .shopping-section,
    .calendar-section,
    .habits-section {
        padding: 12px;
    }

    .btn {
        padding: 9px 12px;
        font-size: 14px;
    }

    .task-item {
        grid-template-columns: 38px minmax(0, 1fr) 32px;
    }

    .task-actions {
        grid-column: auto;
        justify-content: flex-end;
    }

    .task-timer-btn {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .task-actions .btn-icon {
        width: 32px;
        height: 32px;
    }

    .task-title,
    .habit-name {
        font-size: 16px;
    }

    .shopping-item-main {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .settings-row {
        padding: 12px;
    }

    .calendar-header {
        flex-wrap: wrap;
    }

    .calendar-header h2 {
        order: -1;
        width: 100%;
    }

    .calendar-progress {
        width: 30px;
        height: 30px;
    }

    .habit-days-col {
        gap: 6px;
    }

    .habit-checkbox,
    .habit-checkbox .checkmark {
        width: 30px;
        height: 30px;
    }

    .modal-content {
        padding: 14px;
    }

    .modal-content.task-modal-content {
        padding: 14px;
    }

    .task-modal-content .modal-header {
        font-size: 22px;
    }

    .task-modal-content .form-group {
        margin-bottom: 12px;
    }

    .task-modal-content .form-input,
    .task-modal-content .form-textarea,
    .task-modal-content .form-select {
        min-height: 42px;
        padding: 9px 11px;
    }

    .task-modal-content #editTaskDescription {
        min-height: 68px;
    }

    .task-modal-content .recurring-edit-header {
        flex-direction: column;
    }

    .task-modal-content .form-actions .btn {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .tool-nav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: auto !important;
        height: 64px !important;
        min-height: 64px !important;
        z-index: 50 !important;
        border: 0 !important;
        border-top: 1px solid rgba(209, 213, 219, 0.72) !important;
        border-radius: 0 !important;
        background-color: rgba(255, 255, 255, 0.9) !important;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12) !important;
        backdrop-filter: blur(18px);
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        padding: 8px 8px max(8px, env(safe-area-inset-bottom, 0px)) !important;
        overflow: hidden !important;
    }

    [data-theme="dark"] .tool-nav {
        background-color: rgba(31, 41, 55, 0.92) !important;
        border-color: rgba(75, 85, 99, 0.72) !important;
    }

    .tool-nav-spacer {
        display: none !important;
    }

    .tool-nav-item {
        flex: none !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 56px !important;
        padding: 8px 4px !important;
        border-radius: 12px !important;
        display: grid !important;
        gap: 5px !important;
        place-items: center !important;
        align-content: center !important;
    }

    .tool-nav-avatar {
        order: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .app-layout,
    .page-content {
        padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 760px) {
    .performance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .task-list {
        gap: 10px;
    }

    .task-item {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "content actions";
        align-items: start;
        gap: 10px;
        padding: 12px;
        border-radius: 14px;
    }

    .task-content {
        grid-area: content;
        min-width: 0;
        width: 100%;
    }

    .task-title {
        display: block;
        margin: 0 0 6px;
        font-size: 16px;
        line-height: 1.25;
        overflow: visible;
        overflow-wrap: anywhere;
        word-break: normal;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
    }

    .task-description {
        display: -webkit-box;
        margin: 0 0 8px;
        color: var(--text-primary);
        font-size: 14px;
        line-height: 1.45;
        overflow: hidden;
        overflow-wrap: anywhere;
        word-break: normal;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }

    .task-meta {
        gap: 6px;
        align-items: flex-start;
        font-size: 12px;
        line-height: 1.25;
    }

    .task-meta > span {
        max-width: 100%;
        min-height: 24px;
        padding: 4px 7px;
        border-radius: 7px;
        background-color: var(--bg-secondary);
        display: inline-flex;
        align-items: center;
        gap: 4px;
        overflow-wrap: anywhere;
    }

    .task-meta .task-project {
        max-width: 100%;
    }

    .task-time {
        white-space: nowrap;
    }

    .timer-running {
        color: var(--success);
        font-weight: 700;
    }

    .task-actions {
        grid-area: actions;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 7px;
        width: auto;
        min-width: max-content;
    }

    .task-actions .btn {
        min-height: 34px;
        padding: 8px 11px;
        border-radius: 9px;
        font-size: 13px;
        line-height: 1;
        white-space: nowrap;
    }

    .task-item.completed .task-actions {
        min-width: 0;
    }
}

@media (max-width: 380px) {
    .performance-grid {
        grid-template-columns: 1fr;
    }

    .task-item {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "actions"
            "content";
    }

    .task-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .mobile-daily-dashboard {
        display: grid;
        gap: 10px;
        margin: 0 0 10px;
    }

    .mobile-daily-panel {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 8px;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--bg-secondary);
        box-shadow: 0 8px 18px var(--shadow);
        cursor: pointer;
        transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }

    .mobile-daily-panel:hover,
    .mobile-daily-panel:focus-visible {
        border-color: rgba(79, 127, 216, 0.4);
        box-shadow: 0 10px 22px var(--shadow);
        outline: none;
        transform: translateY(-1px);
    }

    .mobile-daily-panel-header {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 30px;
    }

    .mobile-daily-panel-header .stat-icon {
        width: 25px;
        height: 25px;
        margin: 0;
        border-radius: 8px;
    }

    .mobile-daily-panel-header .stat-icon .bi-icon {
        --bi-size: 14px;
    }

    .mobile-daily-panel-header h2 {
        margin: 0;
        color: var(--text-primary);
        font-size: 15px;
        line-height: 1.2;
    }

    .mobile-habits-panel .mobile-daily-panel-header .stat-icon {
        border-color: rgba(90, 169, 141, 0.26);
        background: rgba(90, 169, 141, 0.1);
        color: #5aa98d;
    }

    .mobile-shopping-panel .mobile-daily-panel-header .stat-icon {
        border-color: rgba(192, 138, 58, 0.26);
        background: rgba(192, 138, 58, 0.1);
        color: #c08a3a;
    }

    .mobile-daily-badges {
        display: flex;
        min-width: 0;
        flex-wrap: wrap;
        gap: 6px;
        max-height: 120px;
        overflow: hidden;
    }

    .mobile-daily-badge {
        display: inline-flex;
        min-width: 0;
        max-width: 100%;
        align-items: center;
        gap: 5px;
        min-height: 28px;
        padding: 3px 8px 3px 5px;
        border: 1px solid rgba(148, 163, 184, 0.3);
        border-radius: 8px;
        background: rgba(148, 163, 184, 0.08);
        color: var(--text-secondary);
        cursor: pointer;
        font: inherit;
        font-size: 12px;
        font-weight: 750;
        line-height: 1.2;
        text-align: left;
    }

    .mobile-daily-badge:hover,
    .mobile-daily-badge:focus-visible {
        border-color: rgba(79, 127, 216, 0.38);
        color: var(--text-primary);
        outline: none;
    }

    .mobile-daily-badge.is-completed {
        border-color: rgba(90, 169, 141, 0.3);
        background: rgba(90, 169, 141, 0.12);
        color: #4f9b7e;
    }

    .mobile-daily-badge .desktop-daily-check {
        display: inline-grid;
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        place-items: center;
        border: 1.5px solid currentColor;
        border-radius: 50%;
        font-size: 10px;
        font-weight: 900;
    }

    .mobile-daily-badge .desktop-daily-badge-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-daily-badges .desktop-daily-empty {
        color: var(--text-secondary);
        font-size: 12px;
    }

    .stats-bar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 10px;
        overflow: visible;
        padding: 0;
    }

    .stat-card {
        min-width: 0;
        min-height: 46px;
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr) auto;
        grid-template-areas:
            "icon label value";
        align-items: center;
        column-gap: 7px;
        padding: 8px 9px;
        text-align: left;
        border-radius: 9px;
    }

    .stat-icon {
        grid-area: icon;
        margin: 0;
        width: 28px;
        height: 28px;
        border-radius: 9px;
        font-size: 17px;
        line-height: 1;
    }

    .stat-icon .bi-icon {
        --bi-size: 15px;
    }

    .stat-label {
        grid-area: label;
        margin: 0;
        min-width: 0;
        font-size: 11px;
        line-height: 1.15;
        color: var(--text-secondary);
    }

    .stat-value {
        grid-area: value;
        justify-self: end;
        font-size: 15px;
        line-height: 1.1;
        white-space: nowrap;
    }

    .stats-accordion {
        display: block;
        margin-bottom: 10px;
    }

    .desktop-stats-bar {
        display: none;
    }

    .stats-accordion-summary {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 5px;
        min-height: 58px;
        padding: 8px 9px;
        border-radius: 10px;
        overflow: hidden;
    }

    .stats-compact-metrics {
        display: flex;
        grid-column: 2;
        min-width: 0;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

    .stats-compact-item {
        flex: 0 1 auto;
        justify-content: flex-start;
        gap: 4px;
    }

    .stats-compact-item .stat-icon {
        width: 28px;
        height: 28px;
        border-radius: 9px;
    }

    .stats-compact-item .stat-icon .bi-icon {
        --bi-size: 15px;
    }

    .stats-compact-metrics > .stats-compact-item:nth-child(1) .stat-icon {
        border-color: rgba(90, 169, 141, 0.26);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0)),
            rgba(90, 169, 141, 0.1);
        color: #5aa98d;
    }

    .stats-compact-metrics > .stats-compact-item:nth-child(2) .stat-icon {
        border-color: rgba(192, 138, 58, 0.26);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0)),
            rgba(192, 138, 58, 0.12);
        color: #c08a3a;
    }

    .stats-compact-value {
        min-width: 0;
        font-size: 12px;
    }

    .stats-compact-divider {
        width: 1px;
        height: 22px;
        flex: 0 0 1px;
        align-self: center;
        background: color-mix(in srgb, var(--border) 82%, var(--text-secondary));
    }

    .stats-compact-extra {
        display: inline-flex;
        min-width: 0;
        flex: 0 1 auto;
        align-items: center;
        gap: 3px;
        white-space: nowrap;
    }

    .stats-compact-extra-icon {
        display: inline-grid;
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        place-items: center;
        border: 1px solid rgba(245, 158, 11, 0.22);
        border-radius: 9px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0)),
            rgba(245, 158, 11, 0.14);
        color: var(--warning);
    }

    .stats-compact-habits .stats-compact-extra-icon {
        border-color: rgba(90, 169, 141, 0.26);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0)),
            rgba(90, 169, 141, 0.1);
        color: #5aa98d;
    }

    .stats-compact-shopping .stats-compact-extra-icon {
        border-color: rgba(192, 138, 58, 0.26);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0)),
            rgba(192, 138, 58, 0.12);
        color: #c08a3a;
    }

    .stats-compact-extra-icon .bi-icon {
        --bi-size: 15px;
    }

    .stats-compact-extra-value {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .stats-accordion-arrow {
        margin-left: auto;
        grid-column: 3;
        justify-self: end;
        flex: 0 0 auto;
        font-size: 20px;
    }

    .stats-accordion-details {
        margin-top: 6px;
        padding: 7px 10px;
        border-radius: 10px;
    }

    .stats-detail-row {
        min-height: 32px;
    }

    .stats-detail-label {
        display: inline-flex;
        min-width: 0;
        align-items: center;
        gap: 7px;
    }

    .stats-detail-label .stat-icon {
        display: inline-grid;
        width: 25px;
        height: 25px;
        flex: 0 0 25px;
        place-items: center;
        border-radius: 8px;
    }

    .stats-detail-label .stat-icon .bi-icon {
        --bi-size: 14px;
    }

    .stats-detail-label .stat-label {
        font-size: 13px;
    }

    .stats-accordion-details .mobile-daily-dashboard {
        margin: 7px 0 0;
        padding-top: 7px;
        border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    }

    .stats-accordion-details .mobile-daily-panel {
        min-height: 0;
        padding: 5px 0 7px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
    }

    .stats-accordion-details .mobile-daily-panel:hover,
    .stats-accordion-details .mobile-daily-panel:focus-visible {
        border-color: transparent;
        box-shadow: none;
        background: transparent;
        transform: none;
    }

    .stats-accordion-details .mobile-shopping-panel {
        padding-top: 8px;
        border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    }

    .stats-detail-row .stat-label {
        font-size: 13px;
    }

    .stats-detail-row .stat-value {
        font-size: 14px;
    }

    .task-section-title-row {
        display: flex;
        flex: 1 1 auto;
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    .task-section-title-row .section-title {
        font-size: 22px;
        white-space: normal;
    }

    .task-filter-trigger {
        display: inline-grid;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        box-shadow: none;
    }

    .tasks-layout .task-filter-dropdown {
        position: relative;
        display: inline-flex;
        flex: 0 0 auto;
        grid-column: auto;
    }

    .tasks-layout .task-filter-trigger {
        display: inline-grid;
    }

    .task-filter-menu {
        left: auto;
        right: 0;
        min-width: min(230px, calc(100vw - 44px));
    }

    .tasks-layout .task-filter-menu {
        position: absolute;
        top: calc(100% + 8px);
        left: auto;
        right: 0;
        z-index: 30;
        display: none;
        min-width: min(230px, calc(100vw - 44px));
        padding: 8px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background-color: var(--bg-secondary);
        box-shadow: 0 16px 36px var(--shadow);
    }

    .tasks-layout .task-filter-menu.open {
        display: grid;
        gap: 6px;
    }

    .tasks-layout .task-filter-menu .task-date-filter {
        width: 100%;
        min-height: 40px;
        border-radius: 9px;
        text-align: left;
    }

    .task-date-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding-bottom: 0;
    }

    .task-date-filter,
    .task-filter-more,
    .task-filter-more-button {
        width: 100%;
        min-width: 0;
    }

    .task-date-filter {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 9px 10px;
        font-size: 13px;
        line-height: 1.1;
    }

    .task-date-filter span {
        margin-left: 0;
    }

    .task-filter-more-menu {
        left: 0;
        right: auto;
        width: min(210px, calc(100vw - 46px));
    }

    .task-item {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "content"
            "actions" !important;
        gap: 12px;
        padding: 14px;
        border-radius: 12px;
    }

    .task-content {
        grid-area: content;
    }

    .task-actions {
        grid-area: actions;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        min-width: 0;
    }

    .task-actions .btn {
        width: 100%;
        min-height: 46px;
        padding: 10px 12px;
        border-radius: 9px;
        font-size: 14px;
        line-height: 1.1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .task-item.completed .task-actions {
        grid-template-columns: 1fr;
    }

    .project-actions {
        overflow: visible;
    }

    .app-layout > .sidebar:not(.settings-sidebar) .project-actions {
        display: flex;
        position: relative;
        justify-self: end;
        margin-left: 0;
        right: auto;
    }

    .app-layout > .sidebar:not(.settings-sidebar) .project-action-btn {
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 11px;
        background-color: var(--bg-tertiary);
        opacity: 1;
        font-size: 20px;
        line-height: 1;
    }

    .app-layout > .sidebar:not(.settings-sidebar) .project-item.active .project-action-btn {
        background-color: rgba(255, 255, 255, 0.18);
        color: white;
    }

    .project-action-menu {
        border-radius: 10px;
        box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18);
        min-width: 168px;
        right: 0;
        top: calc(100% + 6px);
        z-index: 90;
    }

    .project-item.actions-open .project-action-menu {
        display: flex;
    }

    .project-action-menu-btn {
        min-height: 38px;
    }

    .app-layout > .sidebar:not(.settings-sidebar) .sidebar-footer {
        border-top-style: solid;
        margin-top: 10px;
        padding-top: 10px;
    }

    .app-layout > .sidebar:not(.settings-sidebar) .show-archived-btn {
        background-color: var(--bg-primary);
        border-style: solid;
    }

    .mobile-fab-stack {
        display: flex;
    }

    .task-section-actions {
        display: none !important;
    }

    .mobile-fab-menu {
        position: absolute;
        right: 0;
        bottom: calc(100% + 12px);
        display: none;
        flex-direction: column;
        gap: 8px;
        align-items: flex-end;
    }

    .mobile-fab-menu.open {
        display: flex;
    }

    .mobile-fab-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 44px;
        padding: 10px 14px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background-color: var(--bg-secondary);
        color: var(--text-primary);
        box-shadow: 0 10px 24px var(--shadow);
        font: inherit;
        font-size: 14px;
        font-weight: 800;
        white-space: nowrap;
        cursor: pointer;
    }

    .mobile-fab-action-icon,
    .mobile-fab-action .focus-mode-state-icon {
        --bi-size: 16px;
        flex: 0 0 16px;
    }

    .mobile-fab-action:first-child {
        border-color: rgba(59, 130, 246, 0.35);
        background-color: var(--accent);
        color: #fff;
    }

    .mobile-fab-action.note {
        border-color: rgba(139, 92, 246, 0.35);
        background-color: #8b5cf6;
        color: #fff;
    }

    .mobile-fab-action.report {
        border-color: rgba(47, 141, 163, 0.35);
        background-color: #2f8da3;
        color: #fff;
    }

    .mobile-fab-action.focus {
        border-color: rgba(16, 185, 129, 0.35);
        background-color: var(--success);
        color: #fff;
    }

    .mobile-fab-action.danger {
        border-color: rgba(195, 91, 91, 0.35);
        background-color: #c35b5b;
        color: #fff;
    }

    .mobile-fab {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }

    .mobile-fab-stack {
        width: 56px;
        height: 56px;
    }

    .modal-close-btn {
        top: 10px;
        right: 10px;
        width: 44px;
        height: 44px;
        font-size: 26px;
    }

    .modal-header {
        padding-right: 46px;
    }

    .form-actions .btn,
    .modal-footer .btn,
    .project-report-actions .btn {
        min-height: 46px;
        padding-top: 11px;
        padding-bottom: 11px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 380px) {
    .stat-card {
        grid-template-columns: 20px minmax(0, 1fr) auto;
        column-gap: 6px;
        padding: 8px;
    }

    .task-actions {
        justify-content: stretch;
    }
}

@media (max-width: 768px) {
    .shopping-page {
        padding-bottom: 112px;
    }

    .shopping-header {
        gap: 10px;
        margin-bottom: 12px;
    }

    .shopping-header .page-title {
        display: none;
    }

    .shopping-subtitle {
        margin: 0;
        font-size: 13px;
        line-height: 1.35;
    }

    .shopping-summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .shopping-summary-card {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 0;
        min-height: 42px;
        padding: 9px 10px;
        border-radius: 10px;
        box-shadow: none;
    }

    .shopping-summary-value {
        order: 2;
        font-size: 16px;
        line-height: 1;
    }

    .shopping-summary-label {
        order: 1;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        text-transform: capitalize;
    }

    .shopping-summary-label::after {
        content: ":";
    }

    .shopping-section {
        padding: 12px;
        border-radius: 12px;
        box-shadow: none;
    }

    .shopping-quick-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 86px 42px;
        gap: 8px;
        margin-bottom: 12px;
        align-items: stretch;
    }

    .shopping-quick-form .form-input,
    .shopping-quick-form .btn {
        min-height: 44px;
    }

    .shopping-name-input,
    .shopping-quantity-input {
        grid-row: 1;
    }

    .shopping-note-toggle {
        display: inline-flex;
        grid-column: 1 / 3;
        min-height: 38px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: 8px;
        background-color: var(--bg-primary);
        color: var(--text-secondary);
        cursor: pointer;
        font: inherit;
        font-size: 13px;
        font-weight: 800;
    }

    .shopping-note-input {
        display: none;
        grid-column: 1 / -1;
    }

    .shopping-quick-form.show-note .shopping-note-input {
        display: block;
    }

    .shopping-quick-form .btn-primary {
        grid-column: 3;
        grid-row: 1 / 3;
        min-width: 42px;
        padding: 0;
        font-size: 0;
        border-radius: 10px;
    }

    .shopping-quick-form .btn-primary::before {
        content: "+";
        font-size: 26px;
        line-height: 1;
        font-weight: 800;
    }

    .shopping-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        margin-bottom: 12px;
        align-items: center;
    }

    .shopping-filter-group {
        min-width: 0;
        overflow-x: auto;
        padding: 3px;
        border-radius: 10px;
        scrollbar-width: none;
    }

    .shopping-filter-group::-webkit-scrollbar {
        display: none;
    }

    .shopping-filter {
        flex: 1 0 auto;
        min-height: 36px;
        padding: 7px 10px;
        font-size: 13px;
        white-space: nowrap;
    }

    .shopping-toolbar .btn-secondary {
        width: 42px;
        min-width: 42px;
        min-height: 40px;
        padding: 0;
        overflow: hidden;
        border-radius: 10px;
        font-size: 0;
    }

    .shopping-toolbar .btn-secondary::before {
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        background-color: currentColor;
        mask: url('/static/icons/bootstrap/trash3.svg') center / contain no-repeat;
        -webkit-mask: url('/static/icons/bootstrap/trash3.svg') center / contain no-repeat;
    }

    .shopping-list {
        gap: 8px;
    }

    .shopping-item {
        grid-template-columns: 34px minmax(0, 1fr) 36px;
        gap: 10px;
        align-items: start;
        padding: 12px;
        border-width: 1px;
        border-radius: 12px;
        box-shadow: none;
    }

    .shopping-check {
        width: 32px;
        height: 32px;
        margin-top: 2px;
    }

    .shopping-check input:checked + span::after {
        left: 10px;
        top: 5px;
    }

    .shopping-item-main {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .shopping-item-name {
        font-size: 16px;
        line-height: 1.28;
    }

    .shopping-item-quantity {
        padding: 3px 7px;
        font-size: 12px;
    }

    .shopping-item-note {
        margin-top: 5px;
        font-size: 13px;
        line-height: 1.35;
    }

    .shopping-item-actions {
        grid-column: 3;
        justify-content: flex-end;
        align-self: start;
    }

    .shopping-actions-menu-btn {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background-color: var(--bg-tertiary);
        color: var(--text-secondary);
        font-size: 21px;
        font-weight: 900;
        line-height: 1;
        box-shadow: none;
    }

    .shopping-inline-actions {
        display: grid;
        grid-column: 2 / 4;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 2px;
        padding: 8px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background-color: var(--bg-primary);
    }

    .shopping-inline-action-btn {
        min-height: 40px;
        border: none;
        border-radius: 8px;
        background-color: var(--bg-tertiary);
        color: var(--text-primary);
        cursor: pointer;
        font: inherit;
        font-size: 13px;
        font-weight: 800;
    }

    .shopping-inline-action-btn.danger {
        color: var(--danger);
        background-color: rgba(239, 68, 68, 0.1);
    }
}

@media (max-width: 768px) {
    .habits-page {
        padding-bottom: 112px;
    }

    .habits-header {
        display: none;
    }

    .habits-section {
        padding: 12px;
        border-radius: 12px;
        box-shadow: none;
    }

    .habits-section .section-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 8px;
        align-items: center;
        margin-bottom: 12px;
    }

    .habits-section .section-header > div {
        min-width: 0;
    }

    .habits-section .section-header h2 {
        margin: 0;
        font-size: 18px;
        line-height: 1.2;
    }

    .week-range {
        margin-top: 2px;
        font-size: 12px;
        line-height: 1.2;
    }

    .habits-section .section-header .btn-primary {
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        overflow: hidden;
        border-radius: 11px;
        font-size: 0;
        justify-self: end;
    }

    .habits-section .section-header .btn-primary::before {
        content: "+";
        font-size: 28px;
        line-height: 1;
        font-weight: 800;
    }

    .habits-table-container {
        margin-top: 0;
        overflow-x: visible;
    }

    .habits-table-header {
        display: none;
    }

    .habit-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 36px;
        gap: 10px;
        align-items: start;
        padding: 12px;
        border-width: 1px;
        border-left-width: 4px;
        border-radius: 12px;
        margin-bottom: 8px;
        box-shadow: none;
    }

    .habit-name-col {
        gap: 3px;
    }

    .habit-name {
        font-size: 16px;
        line-height: 1.25;
    }

    .habit-description {
        font-size: 13px;
        line-height: 1.35;
    }

    .habit-days-col {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 6px;
        justify-content: stretch;
        align-items: start;
    }

    .habit-day-cell {
        display: grid;
        gap: 4px;
        justify-items: center;
        min-width: 0;
    }

    .habit-day-label {
        display: block;
        color: var(--text-secondary);
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
    }

    .habit-checkbox,
    .habit-checkbox .checkmark {
        width: 32px;
        height: 32px;
    }

    .habit-checkbox .checkmark {
        border-radius: 8px;
    }

    .habit-actions-col {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        justify-content: flex-end;
        align-self: start;
    }

    .habit-actions-menu-btn {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background-color: var(--bg-tertiary);
        color: var(--text-secondary);
        font-size: 21px;
        font-weight: 900;
        line-height: 1;
        box-shadow: none;
    }

    .habit-inline-actions {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 8px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background-color: var(--bg-primary);
    }

    .habit-inline-action-btn {
        min-height: 40px;
        border: none;
        border-radius: 8px;
        background-color: var(--bg-tertiary);
        color: var(--text-primary);
        cursor: pointer;
        font: inherit;
        font-size: 13px;
        font-weight: 800;
    }

    .habit-inline-action-btn.danger {
        color: var(--danger);
        background-color: rgba(239, 68, 68, 0.1);
    }

    .calendar-section {
        padding: 12px;
        margin-top: 12px;
        border-radius: 12px;
        box-shadow: none;
    }

    .calendar-header {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        gap: 8px;
        align-items: center;
        margin-bottom: 0;
    }

    .calendar-header h2 {
        order: 0;
        width: auto;
        font-size: 16px;
        line-height: 1.2;
    }

    .calendar-header .btn {
        min-height: 40px;
        padding: 0;
        border-radius: 10px;
    }

    .habit-calendar-toggle {
        display: flex;
        grid-column: 1 / -1;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: 10px;
        background-color: var(--bg-primary);
        color: var(--text-primary);
        cursor: pointer;
        font: inherit;
        font-size: 14px;
        font-weight: 800;
    }

    .habit-calendar-collapsed .calendar-header {
        grid-template-columns: 1fr;
    }

    .habit-calendar-collapsed .calendar-header .btn,
    .habit-calendar-collapsed .calendar-header h2,
    .habit-calendar-collapsed .calendar-grid {
        display: none;
    }

    .calendar-grid {
        width: 100%;
        max-width: none;
        gap: 4px;
        margin-top: 12px;
    }

    .calendar-day {
        max-width: none;
        border-radius: 8px;
    }

    .calendar-progress {
        width: 30px;
        height: 30px;
    }

    #createHabitModal,
    #editHabitModal {
        align-items: center;
        justify-content: center;
        padding: 14px;
    }

    .habit-form-modal-content {
        width: min(332px, 100%);
        max-width: 332px;
        height: auto;
        min-height: 0;
        max-height: calc(100dvh - 28px);
        padding: 18px;
        border-radius: 14px;
    }

    .habit-form-modal-content .modal-header {
        padding: 0;
        margin: 0 0 14px;
    }

    .habit-form-modal-content .modal-header h2 {
        margin: 0;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 800;
    }

    .habit-form-modal-content .form-group {
        margin-bottom: 12px;
    }

    .habit-form-modal-content .form-label {
        margin-bottom: 6px;
        font-size: 14px;
        font-weight: 700;
    }

    .habit-form-modal-content .form-input,
    .habit-form-modal-content .form-textarea {
        min-height: 44px;
        padding: 10px 12px;
        border-radius: 10px;
        font-size: 15px;
    }

    .habit-form-modal-content .form-textarea {
        min-height: 86px;
        resize: vertical;
    }

    .habit-form-modal-content .form-control-color {
        width: 100%;
        height: 42px;
        padding: 5px;
        border-radius: 10px;
    }

    .habit-form-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 16px;
    }

    .habit-form-actions .btn {
        min-width: 0;
        min-height: 44px;
        padding: 10px 12px;
        border-radius: 10px;
        font-size: 15px;
        justify-content: center;
    }

    #deleteHabitModal {
        align-items: center;
        justify-content: center;
        padding: 16px;
    }

    .habit-delete-modal-content {
        width: min(328px, 100%);
        max-width: 328px;
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 20px;
        border-radius: 14px;
        text-align: center;
    }

    .habit-delete-modal-content .modal-header {
        padding: 0;
        margin: 0;
    }

    .habit-delete-modal-content .modal-header h2 {
        margin: 0;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 800;
    }

    .habit-delete-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 18px;
    }

    .habit-delete-actions .btn {
        min-width: 0;
        min-height: 44px;
        padding: 10px 12px;
        border-radius: 10px;
        font-size: 15px;
        justify-content: center;
    }

    .delete-confirm-option {
        justify-content: center;
        gap: 8px;
        margin-top: 14px;
        color: var(--text-secondary);
        font-size: 13px;
    }

    .delete-confirm-option input {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }
}

.focus-project-color {
    background: linear-gradient(135deg, var(--accent), #22c55e);
}

.focus-project-item:hover .project-count {
    display: inline-block;
}

.task-item.focused {
    border-color: rgba(37, 99, 235, 0.58);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.task-item.focus-mode {
    align-items: flex-start;
}

.task-focus-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 36px;
    margin-top: 1px;
    cursor: pointer;
}

.task-focus-checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.task-focus-box {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-radius: 7px;
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.task-focus-checkbox:hover .task-focus-box {
    border-color: var(--accent);
}

.task-focus-checkbox input:checked + .task-focus-box {
    border-color: var(--accent);
    background-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}

.task-focus-checkbox input:checked + .task-focus-box::after {
    content: "";
    display: block;
    width: 7px;
    height: 12px;
    margin: 2px 0 0 7px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

@media (max-width: 760px) {
    .task-item.focus-mode {
        grid-template-columns: 30px minmax(0, 1fr) auto !important;
        grid-template-areas:
            "focus content actions" !important;
    }

    .task-item.focus-mode .task-focus-checkbox {
        grid-area: focus;
    }

    .task-item.focus-mode .task-content {
        grid-area: content;
    }

    .task-item.focus-mode .task-actions {
        grid-area: actions;
    }
}

@media (max-width: 420px) {
    .task-item.focus-mode {
        grid-template-columns: 30px minmax(0, 1fr) !important;
        grid-template-areas:
            "focus content"
            "focus actions" !important;
    }

    .task-item.focus-mode .task-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .tool-nav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        width: 100% !important;
        height: auto !important;
        min-height: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 7px 7px max(7px, env(safe-area-inset-bottom, 0px)) !important;
        gap: 5px !important;
        overflow: hidden !important;
        border: 0 !important;
        border-top: 1px solid var(--border) !important;
        border-radius: 0 !important;
        background-color: var(--bg-primary) !important;
        box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.1) !important;
        backdrop-filter: none !important;
    }

    .tool-nav-spacer,
    .tool-nav-avatar {
        display: none !important;
    }

    .tool-nav-item {
        display: grid !important;
        flex: none !important;
        place-items: center !important;
        align-content: center !important;
        gap: 4px !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 54px !important;
        padding: 7px 2px !important;
        border-radius: 12px !important;
        color: var(--text-secondary) !important;
        font-size: 20px !important;
        text-decoration: none !important;
        transform: none !important;
    }

    .tool-nav-item.active {
        background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important;
        color: white !important;
        box-shadow: 0 10px 24px rgba(59, 130, 246, 0.22) !important;
    }

    .tool-nav-item .bi-icon {
        --bi-size: 21px;
    }

    .tool-nav-label {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        color: currentColor !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .app-layout,
    .page-content {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 420px) {
    .tool-nav {
        min-height: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 7px 7px max(7px, env(safe-area-inset-bottom, 0px)) !important;
    }

    .tool-nav-item {
        min-height: 48px !important;
        padding: 6px 2px !important;
    }

    .tool-nav-label {
        display: none !important;
    }

    .tool-nav-item .bi-icon {
        --bi-size: 23px;
    }

    .app-layout,
    .page-content {
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 768px) {
    .tool-nav-avatar {
        display: none !important;
    }
}

@media (max-width: 760px) {
    .task-item {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "content"
            "mobile-actions" !important;
        padding: 12px !important;
    }

    .task-item.mobile-selected {
        border-color: var(--accent) !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    }

    .task-item .task-actions {
        display: none !important;
    }

    .mobile-task-inline-actions {
        grid-area: mobile-actions;
        display: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-top: 0;
        padding-top: 10px;
        border-top: 1px solid var(--border);
    }

    .task-item.mobile-selected .mobile-task-inline-actions {
        display: grid;
    }

    .mobile-task-inline-btn {
        min-width: 0;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 9px 8px;
        border: 1px solid var(--border);
        border-radius: 10px;
        color: #fff;
        cursor: pointer;
        font: inherit;
        font-size: 12px;
        font-weight: 900;
        line-height: 1;
    }

    .mobile-task-inline-btn .bi-icon {
        --bi-size: 15px;
    }

    .mobile-task-inline-btn.primary {
        border-color: rgba(59, 130, 246, 0.35);
        background-color: var(--accent);
    }

    .mobile-task-inline-btn.success {
        border-color: rgba(16, 185, 129, 0.35);
        background-color: var(--success);
    }

    .mobile-task-inline-btn.secondary {
        border-color: rgba(245, 158, 11, 0.38);
        background-color: var(--warning);
        color: #fff;
    }
}

@media (max-width: 768px) {
    .statistics-page {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .statistics-page .statistics-filter-section {
        padding: 10px !important;
    }

    .statistics-page .statistics-filter-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
    }

    .statistics-page .statistics-period {
        min-height: 34px !important;
        padding: 7px 6px !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
    }

    .statistics-page .statistics-custom-form {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .statistics-page .statistics-custom-form[hidden] {
        display: none !important;
    }

    .statistics-page .statistics-custom-form .statistics-project-field,
    .statistics-page .statistics-custom-form .statistics-submit-btn {
        grid-column: 1 / -1 !important;
    }

    .statistics-page .statistics-custom-form .statistics-date-field {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .statistics-page .statistics-custom-form label span {
        font-size: 12px !important;
        line-height: 1 !important;
    }

    .statistics-page .statistics-custom-form .form-input {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 38px !important;
        padding: 7px 9px !important;
        border-width: 1px !important;
        font-size: 14px !important;
    }

    .statistics-page .statistics-custom-form input[type="date"] {
        display: block !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        width: 100% !important;
        inline-size: 100% !important;
        min-width: 0 !important;
        min-inline-size: 0 !important;
        max-width: 100% !important;
        max-inline-size: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .statistics-page .statistics-custom-form input[type="date"]::-webkit-date-and-time-value,
    .statistics-page .statistics-custom-form input[type="date"]::-webkit-datetime-edit {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-align: left !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .statistics-page .stats-bar.statistics-summary {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        margin-bottom: 12px !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .statistics-page .statistics-summary .stat-card {
        min-width: 0 !important;
        min-height: 40px !important;
        display: grid !important;
        grid-template-columns: 28px minmax(0, 1fr) minmax(70px, auto) !important;
        grid-template-areas: "icon label value" !important;
        align-items: center !important;
        column-gap: 8px !important;
        padding: 7px 9px !important;
        border-radius: 8px !important;
        text-align: left !important;
    }

    .statistics-page .statistics-summary .stat-icon {
        grid-area: icon !important;
        width: 26px !important;
        height: 26px !important;
        margin: 0 !important;
        border-radius: 8px !important;
    }

    .statistics-page .statistics-summary .stat-icon .bi-icon {
        --bi-size: 14px;
    }

    .statistics-page .statistics-summary .stat-label {
        grid-area: label !important;
        min-width: 0 !important;
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
    }

    .statistics-page .statistics-summary .stat-value {
        grid-area: value !important;
        justify-self: end !important;
        max-width: 168px !important;
        font-size: 17px !important;
        line-height: 1.08 !important;
        text-align: right !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .statistics-page .statistics-summary .statistics-best-day {
        max-width: 178px !important;
        font-size: 14px !important;
    }

    .statistics-page .statistics-comparison-grid {
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .statistics-page .statistics-comparison-card {
        padding: 12px !important;
        border-radius: 10px !important;
    }

    .statistics-page .statistics-comparison-value {
        font-size: 24px !important;
        line-height: 1.05 !important;
    }

    .statistics-page .statistics-comparison-detail {
        font-size: 13px !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere !important;
    }

    .statistics-page .statistics-projects-list {
        gap: 6px !important;
    }

    .statistics-page .statistics-projects-section {
        padding: 10px !important;
    }

    .statistics-page .statistics-accordion-toggle .section-title {
        font-size: 18px !important;
    }

    .statistics-page .statistics-title-icon {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
        border-radius: 10px !important;
    }

    .statistics-page .statistics-title-icon .bi-icon {
        --bi-size: 18px;
    }

    .statistics-page .statistics-heatmap-section .statistics-heatmap-scroll,
    .statistics-page .statistics-projects-section .statistics-projects-list {
        margin-top: 8px !important;
    }

    .statistics-page .statistics-project-row {
        min-height: 38px !important;
        padding: 8px 10px !important;
        gap: 8px !important;
        border-radius: 8px !important;
    }

    .statistics-page .statistics-project-name {
        min-width: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 14px !important;
        line-height: 1.15 !important;
    }

    .statistics-page .statistics-project-metrics {
        flex: 0 0 auto !important;
        max-width: 62% !important;
        overflow: hidden !important;
        text-align: right !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        line-height: 1.15 !important;
    }

    .statistics-page .statistics-heatmap-scroll {
        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    .statistics-page .statistics-mobile-months {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .statistics-page .statistics-month-card {
        min-width: 0 !important;
        padding: 9px !important;
        border: 1px solid var(--border) !important;
        border-radius: 10px !important;
        background-color: var(--bg-primary) !important;
    }

    .statistics-page .statistics-month-title {
        margin-bottom: 7px !important;
        color: var(--text-primary) !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    .statistics-page .statistics-month-grid {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 3px !important;
    }

    .statistics-page .statistics-month-day {
        position: relative !important;
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        min-width: 0 !important;
        border: 1px solid #ebedf0 !important;
        border-radius: 4px !important;
        background-color: #fff !important;
        color: transparent !important;
        cursor: default !important;
        padding: 0 !important;
    }

    .statistics-page .statistics-month-day span {
        position: absolute !important;
        inset: 0 !important;
        display: grid !important;
        place-items: center !important;
        color: rgba(17, 24, 39, 0.45) !important;
        font-size: 6px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        pointer-events: none !important;
    }

    [data-theme="dark"] .statistics-page .statistics-month-day span {
        color: rgba(249, 250, 251, 0.5) !important;
    }

    .statistics-page .statistics-month-day.is-empty {
        border-color: transparent !important;
        background: transparent !important;
        cursor: default !important;
    }

    .statistics-page .statistics-month-day.level-1 {
        background-color: #dcfce7 !important;
        border-color: #d1fae5 !important;
    }

    .statistics-page .statistics-month-day.level-2 {
        background-color: #bbf7d0 !important;
        border-color: #a7f3d0 !important;
    }

    .statistics-page .statistics-month-day.level-3 {
        background-color: #86efac !important;
        border-color: #6ee7b7 !important;
    }

    .statistics-page .statistics-month-day.level-4 {
        background-color: #4ade80 !important;
        border-color: #34d399 !important;
    }

    .statistics-page .statistics-month-day.level-5 {
        background-color: #16a34a !important;
        border-color: #15803d !important;
    }
}

@media (max-width: 430px) {
    .statistics-page .statistics-custom-form {
        grid-template-columns: 1fr !important;
    }

    .statistics-page .statistics-custom-form .statistics-date-field {
        grid-column: 1 / -1 !important;
    }

    .statistics-page .statistics-mobile-months {
        grid-template-columns: 1fr !important;
    }

    .statistics-page .statistics-month-card {
        padding: 10px !important;
    }

    .statistics-page .statistics-month-day span {
        font-size: 9px !important;
    }
}

@media (min-width: 901px) {
    .habits-page,
    .shopping-page,
    .statistics-page,
    .leaderboard-page,
    .badges-page {
        --desktop-surface: color-mix(in srgb, var(--bg-secondary) 92%, white);
        --desktop-card: rgba(255, 255, 255, 0.72);
        --desktop-card-strong: rgba(255, 255, 255, 0.86);
        --desktop-border: rgba(148, 163, 184, 0.28);
        --desktop-border-soft: rgba(148, 163, 184, 0.22);
        --desktop-shadow: rgba(15, 23, 42, 0.06);
        --desktop-shadow-hover: rgba(15, 23, 42, 0.08);
        --desktop-surface-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12));
    }

    .habits-page .section,
    .habits-page .habits-section,
    .shopping-page .section,
    .shopping-page .shopping-section,
    .statistics-page .section,
    .statistics-page .statistics-filter-section,
    .statistics-page .statistics-heatmap-section,
    .statistics-page .statistics-projects-section,
    .leaderboard-page .leaderboard-section,
    .badges-page > .section {
        border-color: var(--desktop-border);
        background:
            var(--desktop-surface-gradient),
            var(--desktop-surface);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px var(--desktop-shadow);
    }

    .habits-page .stat-card,
    .shopping-page .shopping-summary-card,
    .statistics-page .statistics-summary .stat-card,
    .leaderboard-page .leaderboard-stat-card,
    .badges-page .stats-bar .stat-card {
        background:
            var(--desktop-surface-gradient),
            var(--desktop-surface);
        border-width: 1px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px var(--desktop-shadow);
    }

    .statistics-page .statistics-summary .stat-card:nth-child(1),
    .badges-page .stats-bar .stat-card:nth-child(1) {
        border-color: rgba(79, 127, 216, 0.16);
    }

    .statistics-page .statistics-summary .stat-card:nth-child(2),
    .leaderboard-page .leaderboard-stat-card:nth-child(2),
    .badges-page .stats-bar .stat-card:nth-child(2) {
        border-color: rgba(90, 169, 141, 0.16);
    }

    .statistics-page .statistics-summary .stat-card:nth-child(3),
    .leaderboard-page .leaderboard-stat-card:nth-child(1),
    .badges-page .stats-bar .stat-card:nth-child(1) {
        border-color: rgba(192, 138, 58, 0.17);
    }

    .statistics-page .statistics-summary .stat-card:nth-child(4),
    .badges-page .stats-bar .stat-card:nth-child(3) {
        border-color: rgba(217, 111, 114, 0.16);
    }

    .leaderboard-page .leaderboard-stat-card:nth-child(3),
    .badges-page .stats-bar .stat-card:nth-child(4) {
        border-color: rgba(102, 114, 184, 0.16);
    }

    .leaderboard-page .leaderboard-stat-card:nth-child(4) {
        border-color: rgba(217, 111, 114, 0.16);
    }

    .habits-page .habit-row,
    .shopping-page .shopping-item,
    .statistics-page .statistics-comparison-card,
    .statistics-page .statistics-heatmap-card,
    .statistics-page .statistics-project-row,
    .leaderboard-page .leaderboard-user-position,
    .leaderboard-page .leaderboard-item,
    .badges-page .badge-card {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.06)),
            var(--desktop-card-strong);
        border-color: var(--desktop-border-soft);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .habits-page .habit-row:hover,
    .shopping-page .shopping-item:hover,
    .statistics-page .statistics-project-row:hover,
    .leaderboard-page .leaderboard-item:hover,
    .badges-page .badge-card:hover {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 10px 24px var(--desktop-shadow-hover);
    }

    .statistics-page .statistics-filter-dropdown .task-filter-trigger,
    .statistics-page .statistics-submit-btn,
    .leaderboard-page .leaderboard-period-tabs .btn-primary,
    .leaderboard-page .leaderboard-show-more,
    .badges-page .badge-filter-row .btn-primary {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.08)),
            rgba(79, 127, 216, 0.08);
        border-color: rgba(79, 127, 216, 0.16);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 8px 18px rgba(79, 127, 216, 0.1);
    }

    .leaderboard-page .leaderboard-period-tabs,
    .badges-page .badge-filter-row {
        background: rgba(255, 255, 255, 0.62);
        border-color: var(--desktop-border-soft);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    .leaderboard-page .leaderboard-period-tabs .btn-secondary,
    .badges-page .badge-filter-row .btn-secondary {
        background: transparent;
        color: var(--text-secondary);
    }

    .statistics-page .statistics-title-icon,
    .statistics-page .statistics-title-icon-calendar,
    .statistics-page .statistics-title-icon-projects,
    .leaderboard-page .section-title > .bi-icon,
    .badges-page .badges-board-header .section-title > .bi-icon,
    .statistics-page .statistics-accordion-arrow,
    .badges-page .badges-help-summary::after {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.08)),
            color-mix(in srgb, currentColor 10%, transparent);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 8px 18px rgba(15, 23, 42, 0.05);
    }

    .badges-page .badge-card.earned,
    .badges-page .badge-card.in-progress,
    .badges-page .badge-card.locked {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.06)),
            var(--desktop-card-strong);
    }

    .badges-page .badge-card.earned {
        border-color: rgba(90, 169, 141, 0.16);
    }

    .badges-page .badge-card.in-progress {
        border-color: rgba(192, 138, 58, 0.17);
    }

    .badges-page .badge-card.locked {
        border-color: var(--desktop-border-soft);
    }

    .statistics-page .statistics-comparison-card:nth-child(2),
    .statistics-page .statistics-projects-section,
    .badges-page .badges-help-section {
        border-color: rgba(102, 114, 184, 0.16);
    }

    .statistics-page .statistics-heatmap-section {
        border-color: rgba(90, 169, 141, 0.16);
    }

    .shopping-page .shopping-item.purchased {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.06)),
            var(--desktop-card-strong);
        border-color: rgba(90, 169, 141, 0.16);
    }

    .badges-page > .section:not(.badges-help-section),
    .badges-page > .section.badges-help-section {
        background:
            var(--desktop-surface-gradient),
            var(--desktop-surface);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px var(--desktop-shadow);
    }

    .badges-page > .section:not(.badges-help-section) {
        border-color: var(--desktop-border);
    }

    .badges-page > .section.badges-help-section {
        border-color: rgba(102, 114, 184, 0.16);
    }
}

@media (min-width: 901px) {
    .habits-page,
    .shopping-page,
    .statistics-page,
    .leaderboard-page,
    .badges-page {
        --desktop-neutral-panel: color-mix(in srgb, var(--bg-secondary) 92%, white);
        --desktop-neutral-card: var(--bg-primary);
        --desktop-neutral-card-soft: rgba(255, 255, 255, 0.88);
        --desktop-neutral-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12));
    }

    .habits-page .section,
    .habits-page .habits-section,
    .shopping-page .section,
    .shopping-page .shopping-section,
    .statistics-page .section,
    .statistics-page .statistics-filter-section,
    .statistics-page .statistics-heatmap-section,
    .statistics-page .statistics-projects-section,
    .leaderboard-page .section,
    .leaderboard-page .leaderboard-section,
    .badges-page > .section,
    .badges-page > .section:not(.badges-help-section),
    .badges-page > .section.badges-help-section {
        background:
            var(--desktop-neutral-gradient),
            var(--desktop-neutral-panel);
    }

    .habits-page .stat-card,
    .shopping-page .shopping-summary-card,
    .statistics-page .statistics-summary .stat-card,
    .leaderboard-page .leaderboard-stat-card,
    .badges-page .stats-bar .stat-card {
        background:
            var(--desktop-neutral-gradient),
            var(--desktop-neutral-panel);
    }

    .habits-page .habit-row,
    .shopping-page .shopping-item,
    .shopping-page .shopping-item.purchased,
    .statistics-page .statistics-comparison-card,
    .statistics-page .statistics-heatmap-card,
    .statistics-page .statistics-project-row,
    .leaderboard-page .leaderboard-user-position,
    .leaderboard-page .leaderboard-stat-card,
    .leaderboard-page .leaderboard-item,
    .leaderboard-page .leaderboard-item.user,
    .badges-page .badge-card,
    .badges-page .badge-card.earned,
    .badges-page .badge-card.in-progress,
    .badges-page .badge-card.locked {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.06)),
            var(--desktop-neutral-card);
    }

    .leaderboard-page .leaderboard-user-position {
        border-color: rgba(79, 127, 216, 0.16);
    }

    .leaderboard-page .leaderboard-item.user {
        border-color: rgba(79, 127, 216, 0.2);
    }

    .statistics-page .statistics-filter-dropdown .task-filter-trigger,
    .statistics-page .statistics-submit-btn,
    .leaderboard-page .leaderboard-period-tabs .btn-primary,
    .leaderboard-page .leaderboard-show-more,
    .badges-page .badge-filter-row .btn-primary {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08)),
            var(--desktop-neutral-card-soft);
    }

    .leaderboard-page .leaderboard-rank.top-1,
    .leaderboard-page .leaderboard-rank.top-2,
    .leaderboard-page .leaderboard-rank.top-3,
    .badges-page .badge-card.earned .badge-status,
    .badges-page .badge-card.in-progress .badge-status {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08)),
            var(--desktop-neutral-card-soft);
    }

    .badges-page .badge-card.earned .badge-icon,
    .badges-page .badge-card.in-progress .badge-icon,
    .leaderboard-page .leaderboard-avatar,
    .leaderboard-page .leaderboard-rank {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08)),
            var(--desktop-neutral-card-soft);
    }

    .statistics-page .stats-bar.statistics-summary .stat-card,
    .statistics-page .stats-bar.statistics-summary .stat-card:nth-child(1),
    .statistics-page .stats-bar.statistics-summary .stat-card:nth-child(2),
    .statistics-page .stats-bar.statistics-summary .stat-card:nth-child(3),
    .statistics-page .stats-bar.statistics-summary .stat-card:nth-child(4),
    .statistics-page .statistics-comparison-grid .statistics-comparison-card,
    .statistics-page .statistics-comparison-grid .statistics-comparison-card:nth-child(1),
    .statistics-page .statistics-comparison-grid .statistics-comparison-card:nth-child(2) {
        background:
            var(--desktop-neutral-gradient),
            var(--desktop-neutral-panel);
    }

    .tasks-layout .desktop-stats-bar .stat-card:nth-child(1) {
        border-color: rgba(148, 163, 184, 0.28);
    }

    .leaderboard-page .leaderboard-stats-grid .leaderboard-stat-card,
    .leaderboard-page .leaderboard-stats-grid .leaderboard-stat-card:nth-child(1),
    .leaderboard-page .leaderboard-stats-grid .leaderboard-stat-card:nth-child(2),
    .leaderboard-page .leaderboard-stats-grid .leaderboard-stat-card:nth-child(3),
    .leaderboard-page .leaderboard-stats-grid .leaderboard-stat-card:nth-child(4),
    .badges-page .stats-bar .stat-card,
    .badges-page .stats-bar .stat-card:nth-child(1),
    .badges-page .stats-bar .stat-card:nth-child(2),
    .badges-page .stats-bar .stat-card:nth-child(3),
    .badges-page .stats-bar .stat-card:nth-child(4) {
        background:
            var(--desktop-neutral-gradient),
            var(--desktop-neutral-panel);
    }

    .leaderboard-page .section-title > .bi-icon,
    .badges-page .badges-board-header .section-title > .bi-icon {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08)),
            var(--desktop-neutral-card-soft);
    }
}

@media (min-width: 901px) {
    .tasks-layout {
        --tasks-reference-bg: color-mix(in srgb, var(--bg-secondary) 92%, white);
        --tasks-reference-border: rgba(148, 163, 184, 0.28);
        --tasks-reference-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12));
        --tasks-reference-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.06);
    }

    .tasks-layout .tasks-sidebar,
    .tasks-layout .section,
    .tasks-layout .desktop-stats-bar .stat-card,
    .tasks-layout .stats-accordion-summary,
    .tasks-layout .stats-accordion-details {
        background:
            var(--tasks-reference-gradient),
            var(--tasks-reference-bg);
        border-color: var(--tasks-reference-border);
        border-radius: 12px;
        box-shadow: var(--tasks-reference-shadow);
    }

    .tasks-layout .desktop-stats-bar .stat-card:nth-child(1),
    .tasks-layout .desktop-stats-bar .stat-card:nth-child(2),
    .tasks-layout .desktop-stats-bar .stat-card:nth-child(3),
    .tasks-layout .desktop-stats-bar .stat-card:nth-child(4) {
        border-color: var(--tasks-reference-border);
    }

    .tasks-layout .task-item,
    .tasks-layout .note-card {
        background:
            var(--tasks-reference-gradient),
            var(--bg-primary);
        border: 1px solid var(--tasks-reference-border);
        border-radius: 12px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .tasks-layout .note-card {
        border-left-width: 1px;
    }
}

@media (min-width: 901px) {
    .habits-page {
        --habits-reference-bg: color-mix(in srgb, var(--bg-secondary) 92%, white);
        --habits-reference-border: rgba(148, 163, 184, 0.28);
        --habits-reference-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12));
        --habits-reference-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.06);
    }

    .habits-page .habits-section,
    .habits-page .calendar-section {
        background:
            var(--habits-reference-gradient),
            var(--habits-reference-bg);
        border-color: var(--habits-reference-border);
        border-radius: 12px;
        box-shadow: var(--habits-reference-shadow);
    }

    .habits-page .habits-table-header {
        background:
            var(--habits-reference-gradient),
            var(--habits-reference-bg);
        border: 1px solid var(--habits-reference-border);
        border-radius: 12px;
        box-shadow: var(--habits-reference-shadow);
    }

    .habits-page .habit-row,
    .habits-page .calendar-day {
        background:
            var(--habits-reference-gradient),
            var(--bg-primary);
        border: 1px solid var(--habits-reference-border);
        border-radius: 12px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .habits-page .calendar-day.empty {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }
}

@media (min-width: 901px) {
    .shopping-page {
        --shopping-reference-bg: color-mix(in srgb, var(--bg-secondary) 92%, white);
        --shopping-reference-border: rgba(148, 163, 184, 0.28);
        --shopping-reference-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12));
        --shopping-reference-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.06);
    }

    .shopping-page .shopping-summary-card,
    .shopping-page .shopping-section,
    .shopping-page .shopping-filter-group {
        background:
            var(--shopping-reference-gradient),
            var(--shopping-reference-bg);
        border: 1px solid var(--shopping-reference-border);
        border-radius: 12px;
        box-shadow: var(--shopping-reference-shadow);
    }

    .shopping-page .shopping-summary-card:nth-child(1),
    .shopping-page .shopping-summary-card:nth-child(2) {
        border-color: var(--shopping-reference-border);
    }

    .shopping-page .shopping-filter-group {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .shopping-page .shopping-item,
    .shopping-page .shopping-item.purchased {
        background:
            var(--shopping-reference-gradient),
            var(--bg-primary);
        border: 1px solid var(--shopping-reference-border);
        border-radius: 12px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .shopping-page .shopping-item:hover,
    .shopping-page .shopping-item.purchased:hover {
        border-color: var(--shopping-reference-border);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 10px 24px rgba(15, 23, 42, 0.08);
    }
}

@media (min-width: 901px) {
    .statistics-page {
        --statistics-reference-bg: color-mix(in srgb, var(--bg-secondary) 92%, white);
        --statistics-reference-border: rgba(148, 163, 184, 0.28);
        --statistics-reference-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12));
        --statistics-reference-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.06);
    }

    .statistics-page .statistics-filter-section,
    .statistics-page .statistics-summary .stat-card,
    .statistics-page .statistics-comparison-card,
    .statistics-page .statistics-heatmap-section,
    .statistics-page .statistics-projects-section {
        background:
            var(--statistics-reference-gradient),
            var(--statistics-reference-bg);
        border: 1px solid var(--statistics-reference-border);
        border-radius: 12px;
        box-shadow: var(--statistics-reference-shadow);
    }

    .statistics-page .statistics-summary .stat-card:nth-child(1),
    .statistics-page .statistics-summary .stat-card:nth-child(2),
    .statistics-page .statistics-summary .stat-card:nth-child(3),
    .statistics-page .statistics-summary .stat-card:nth-child(4),
    .statistics-page .statistics-comparison-card:nth-child(1),
    .statistics-page .statistics-comparison-card:nth-child(2),
    .statistics-page .statistics-heatmap-section,
    .statistics-page .statistics-projects-section {
        border-color: var(--statistics-reference-border);
        box-shadow: var(--statistics-reference-shadow) !important;
    }

    .statistics-page .statistics-heatmap-card,
    .statistics-page .statistics-project-row {
        background:
            var(--statistics-reference-gradient),
            var(--bg-primary);
        border: 1px solid var(--statistics-reference-border);
        border-radius: 12px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .statistics-page .statistics-project-row:hover {
        border-color: var(--statistics-reference-border);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 10px 24px rgba(15, 23, 42, 0.08);
    }

    .statistics-page .statistics-filter-section {
        padding: 20px;
    }

    .statistics-page .statistics-filter-section .statistics-header {
        margin-bottom: 0;
    }
}

@media (min-width: 901px) {
    .leaderboard-page {
        --leaderboard-reference-bg: color-mix(in srgb, var(--bg-secondary) 92%, white);
        --leaderboard-reference-border: rgba(148, 163, 184, 0.28);
        --leaderboard-reference-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12));
        --leaderboard-reference-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.06);
    }

    .leaderboard-page .leaderboard-section,
    .leaderboard-page .leaderboard-period-tabs,
    .leaderboard-page .leaderboard-user-position,
    .leaderboard-page .leaderboard-stat-card,
    .leaderboard-page .leaderboard-show-more {
        background:
            var(--leaderboard-reference-gradient),
            var(--leaderboard-reference-bg);
        border: 1px solid var(--leaderboard-reference-border);
        border-radius: 12px;
        box-shadow: var(--leaderboard-reference-shadow);
    }

    .leaderboard-page .leaderboard-stat-card:nth-child(1),
    .leaderboard-page .leaderboard-stat-card:nth-child(2),
    .leaderboard-page .leaderboard-stat-card:nth-child(3),
    .leaderboard-page .leaderboard-stat-card:nth-child(4),
    .leaderboard-page .leaderboard-user-position,
    .leaderboard-page .leaderboard-item.user {
        border-color: var(--leaderboard-reference-border);
        box-shadow: var(--leaderboard-reference-shadow) !important;
    }

    .leaderboard-page .leaderboard-item,
    .leaderboard-page .leaderboard-item.user {
        background:
            var(--leaderboard-reference-gradient),
            var(--bg-primary);
        border: 1px solid var(--leaderboard-reference-border);
        border-radius: 12px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .leaderboard-page .leaderboard-item:hover,
    .leaderboard-page .leaderboard-item.user:hover {
        border-color: var(--leaderboard-reference-border);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 10px 24px rgba(15, 23, 42, 0.08);
    }

    .leaderboard-page .leaderboard-header .section-title > .bi-icon {
        --leaderboard-title-color: #d96f72;
        --leaderboard-title-bg: rgba(217, 111, 114, 0.1);
        --leaderboard-title-border: rgba(217, 111, 114, 0.16);
        --leaderboard-title-shadow: rgba(217, 111, 114, 0.13);
        position: relative;
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border: 1px solid var(--leaderboard-title-border);
        border-radius: 14px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08)),
            var(--leaderboard-title-bg);
        color: var(--leaderboard-title-color);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 8px 18px var(--leaderboard-title-shadow);
        mask: none;
        -webkit-mask: none;
    }

    .leaderboard-page .leaderboard-header .section-title > .bi-icon::before {
        content: "";
        width: 22px;
        height: 22px;
        background-color: currentColor;
        mask: var(--bi-icon) center / contain no-repeat;
        -webkit-mask: var(--bi-icon) center / contain no-repeat;
    }
}

@media (min-width: 901px) {
    .badges-page {
        --badges-reference-bg: color-mix(in srgb, var(--bg-secondary) 92%, white);
        --badges-reference-border: rgba(148, 163, 184, 0.28);
        --badges-reference-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12));
        --badges-reference-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.06);
    }

    .badges-page .stats-bar .stat-card,
    .badges-page > .section,
    .badges-page > .section:not(.badges-help-section),
    .badges-page > .section.badges-help-section,
    .badges-page .badge-filter-row {
        background:
            var(--badges-reference-gradient),
            var(--badges-reference-bg);
        border: 1px solid var(--badges-reference-border);
        border-radius: 12px;
        box-shadow: var(--badges-reference-shadow);
    }

    .badges-page .stats-bar .stat-card:nth-child(1),
    .badges-page .stats-bar .stat-card:nth-child(2),
    .badges-page .stats-bar .stat-card:nth-child(3),
    .badges-page .stats-bar .stat-card:nth-child(4),
    .badges-page > .section:not(.badges-help-section),
    .badges-page > .section.badges-help-section {
        border-color: var(--badges-reference-border);
        box-shadow: var(--badges-reference-shadow) !important;
    }

    .badges-page .badge-card,
    .badges-page .badge-card.earned,
    .badges-page .badge-card.in-progress,
    .badges-page .badge-card.locked,
    .badges-page .empty-state {
        background:
            var(--badges-reference-gradient),
            var(--bg-primary);
        border: 1px solid var(--badges-reference-border);
        border-radius: 12px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .badges-page .badge-card:hover,
    .badges-page .badge-card.earned:hover,
    .badges-page .badge-card.in-progress:hover,
    .badges-page .badge-card.locked:hover {
        border-color: var(--badges-reference-border);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 10px 24px rgba(15, 23, 42, 0.08);
    }

    .badges-page .badges-board-header .section-title > .bi-icon {
        --badges-title-color: #9b78c8;
        --badges-title-bg: rgba(155, 120, 200, 0.1);
        --badges-title-border: rgba(155, 120, 200, 0.16);
        --badges-title-shadow: rgba(155, 120, 200, 0.13);
        position: relative;
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border: 1px solid var(--badges-title-border);
        border-radius: 14px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08)),
            var(--badges-title-bg);
        color: var(--badges-title-color);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 8px 18px var(--badges-title-shadow);
        mask: none;
        -webkit-mask: none;
    }

    .badges-page .badges-board-header .section-title > .bi-icon::before {
        content: "";
        width: 22px;
        height: 22px;
        background-color: currentColor;
        mask: var(--bi-icon) center / contain no-repeat;
        -webkit-mask: var(--bi-icon) center / contain no-repeat;
    }
}

@media (max-width: 768px) {
    .tool-nav .tool-nav-item:not(.tool-nav-avatar) {
        --tool-nav-color: #4f7fd8;
        --tool-nav-bg: rgba(79, 127, 216, 0.1);
        --tool-nav-border: rgba(79, 127, 216, 0.16);
        --tool-nav-shadow: rgba(79, 127, 216, 0.14);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0)),
            var(--tool-nav-bg) !important;
        border: 1px solid var(--tool-nav-border) !important;
        color: var(--tool-nav-color) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), 0 8px 18px rgba(15, 23, 42, 0.06) !important;
    }

    .tool-nav .tool-nav-item.active:not(.tool-nav-avatar) {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.08)),
            color-mix(in srgb, var(--tool-nav-bg) 86%, white) !important;
        border: 1px solid var(--tool-nav-border) !important;
        color: var(--tool-nav-color) !important;
        outline: 1px solid color-mix(in srgb, var(--tool-nav-color) 78%, var(--tool-nav-border)) !important;
        outline-offset: -1px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 10px 22px var(--tool-nav-shadow) !important;
    }

    .tool-nav .tool-nav-item.tool-nav-tasks {
        --tool-nav-color: #4f7fd8;
        --tool-nav-bg: rgba(79, 127, 216, 0.1);
        --tool-nav-border: rgba(79, 127, 216, 0.16);
        --tool-nav-shadow: rgba(79, 127, 216, 0.14);
    }

    .tool-nav .tool-nav-item.tool-nav-habits {
        --tool-nav-color: #5aa98d;
        --tool-nav-bg: rgba(90, 169, 141, 0.1);
        --tool-nav-border: rgba(90, 169, 141, 0.16);
        --tool-nav-shadow: rgba(90, 169, 141, 0.13);
    }

    .tool-nav .tool-nav-item.tool-nav-shopping {
        --tool-nav-color: #c08a3a;
        --tool-nav-bg: rgba(192, 138, 58, 0.11);
        --tool-nav-border: rgba(192, 138, 58, 0.17);
        --tool-nav-shadow: rgba(192, 138, 58, 0.13);
    }

    .tool-nav .tool-nav-item.tool-nav-analytics {
        --tool-nav-color: #6672b8;
        --tool-nav-bg: rgba(102, 114, 184, 0.1);
        --tool-nav-border: rgba(102, 114, 184, 0.16);
        --tool-nav-shadow: rgba(102, 114, 184, 0.13);
    }

    .tool-nav .tool-nav-item.tool-nav-leaderboard {
        --tool-nav-color: #d96f72;
        --tool-nav-bg: rgba(217, 111, 114, 0.1);
        --tool-nav-border: rgba(217, 111, 114, 0.16);
        --tool-nav-shadow: rgba(217, 111, 114, 0.13);
    }

    .tool-nav .tool-nav-item.tool-nav-badges {
        --tool-nav-color: #9b78c8;
        --tool-nav-bg: rgba(155, 120, 200, 0.1);
        --tool-nav-border: rgba(155, 120, 200, 0.16);
        --tool-nav-shadow: rgba(155, 120, 200, 0.13);
    }

    [data-theme="dark"] .tool-nav .tool-nav-item:not(.tool-nav-avatar) {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
            color-mix(in srgb, var(--tool-nav-bg) 72%, #020617) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.18) !important;
    }

    [data-theme="dark"] .tool-nav .tool-nav-item.active:not(.tool-nav-avatar) {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)),
            color-mix(in srgb, var(--tool-nav-bg) 64%, #020617) !important;
        border-color: color-mix(in srgb, var(--tool-nav-border) 54%, var(--tool-nav-color)) !important;
        color: var(--tool-nav-color) !important;
        outline-color: color-mix(in srgb, var(--tool-nav-border) 54%, var(--tool-nav-color)) !important;
    }
}

@media (max-width: 420px) {
    .tool-nav {
        min-height: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 4px !important;
    }

    .tool-nav-item {
        min-height: 54px !important;
        gap: 3px !important;
        padding: 6px 1px !important;
    }

    .tool-nav-label {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        color: currentColor !important;
        font-size: 8px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .tool-nav-item .bi-icon {
        --bi-size: 20px;
    }
}

@media (max-width: 768px) {
    .tasks-layout {
        --mobile-tasks-reference-bg: color-mix(in srgb, var(--bg-secondary) 92%, white);
        --mobile-tasks-reference-border: rgba(148, 163, 184, 0.28);
        --mobile-tasks-reference-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12));
        --mobile-tasks-reference-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.06);
        --mobile-tasks-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .tasks-layout .tasks-sidebar,
    .tasks-layout .section,
    .tasks-layout .stats-accordion-summary,
    .tasks-layout .stats-accordion-details {
        background:
            var(--mobile-tasks-reference-gradient),
            var(--mobile-tasks-reference-bg) !important;
        border: 1px solid var(--mobile-tasks-reference-border) !important;
        border-radius: 12px !important;
        box-shadow: var(--mobile-tasks-reference-shadow) !important;
    }

    .tasks-layout .task-item,
    .tasks-layout .task-item.completed,
    .tasks-layout .note-card,
    .tasks-layout .empty-state,
    .tasks-layout .project-item {
        background:
            var(--mobile-tasks-reference-gradient),
            var(--bg-primary) !important;
        border: 1px solid var(--mobile-tasks-reference-border) !important;
        border-radius: 12px !important;
        box-shadow: var(--mobile-tasks-inner-shadow) !important;
    }

    .tasks-layout .task-item:hover,
    .tasks-layout .task-item.running,
    .tasks-layout .task-item.running:hover,
    .tasks-layout .note-card:hover,
    .tasks-layout .note-card:focus,
    .tasks-layout .project-item:hover {
        border-color: var(--mobile-tasks-reference-border) !important;
        box-shadow: var(--mobile-tasks-inner-shadow), 0 10px 24px rgba(15, 23, 42, 0.08) !important;
    }

    .tasks-layout .project-item.active {
        border-color: color-mix(in srgb, var(--accent) 42%, var(--mobile-tasks-reference-border)) !important;
        box-shadow: var(--mobile-tasks-inner-shadow), 0 10px 24px rgba(59, 130, 246, 0.12) !important;
    }

    .tasks-layout .project-item.active .project-name {
        color: var(--text-primary) !important;
    }

    .tasks-layout .project-item.active .project-count {
        background-color: var(--bg-tertiary) !important;
        color: var(--text-secondary) !important;
    }

    .tasks-layout .project-item.active .project-action-btn {
        background-color: var(--bg-tertiary) !important;
        color: var(--text-primary) !important;
    }

    .tasks-layout .note-card {
        border-left-width: 1px !important;
    }

    [data-theme="dark"] .tasks-layout {
        --mobile-tasks-reference-bg: color-mix(in srgb, var(--bg-secondary) 86%, #020617);
        --mobile-tasks-reference-border: rgba(148, 163, 184, 0.2);
        --mobile-tasks-reference-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
        --mobile-tasks-reference-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 26px rgba(0, 0, 0, 0.22);
        --mobile-tasks-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

@media (max-width: 768px) {
    .habits-page {
        --mobile-habits-reference-bg: color-mix(in srgb, var(--bg-secondary) 92%, white);
        --mobile-habits-reference-border: rgba(148, 163, 184, 0.28);
        --mobile-habits-reference-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12));
        --mobile-habits-reference-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.06);
        --mobile-habits-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .habits-page .habits-section,
    .habits-page .calendar-section,
    .habits-page .habits-table-header {
        background:
            var(--mobile-habits-reference-gradient),
            var(--mobile-habits-reference-bg) !important;
        border: 1px solid var(--mobile-habits-reference-border) !important;
        border-radius: 12px !important;
        box-shadow: var(--mobile-habits-reference-shadow) !important;
    }

    .habits-page .habit-row,
    .habits-page .calendar-day,
    .habits-page .empty-state,
    .habits-page .habit-inline-actions {
        background:
            var(--mobile-habits-reference-gradient),
            var(--bg-primary) !important;
        border: 1px solid var(--mobile-habits-reference-border) !important;
        border-radius: 12px !important;
        box-shadow: var(--mobile-habits-inner-shadow) !important;
    }

    .habits-page .habit-row {
        border-left: 1px solid var(--mobile-habits-reference-border) !important;
    }

    .habits-page .habit-row:hover,
    .habits-page .calendar-day:not(.empty):hover {
        border-color: var(--mobile-habits-reference-border) !important;
        box-shadow: var(--mobile-habits-inner-shadow), 0 10px 24px rgba(15, 23, 42, 0.08) !important;
    }

    .habits-page .calendar-day.empty {
        background:
            var(--mobile-habits-reference-gradient),
            color-mix(in srgb, var(--bg-primary) 88%, transparent) !important;
        border-color: rgba(148, 163, 184, 0.16) !important;
        box-shadow: none !important;
    }

    [data-theme="dark"] .habits-page {
        --mobile-habits-reference-bg: color-mix(in srgb, var(--bg-secondary) 86%, #020617);
        --mobile-habits-reference-border: rgba(148, 163, 184, 0.2);
        --mobile-habits-reference-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
        --mobile-habits-reference-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 26px rgba(0, 0, 0, 0.22);
        --mobile-habits-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

@media (max-width: 768px) {
    .shopping-page {
        --mobile-shopping-reference-bg: color-mix(in srgb, var(--bg-secondary) 92%, white);
        --mobile-shopping-reference-border: rgba(148, 163, 184, 0.28);
        --mobile-shopping-reference-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12));
        --mobile-shopping-reference-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.06);
        --mobile-shopping-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .shopping-page .shopping-summary-card,
    .shopping-page .shopping-section,
    .shopping-page .shopping-filter-group {
        background:
            var(--mobile-shopping-reference-gradient),
            var(--mobile-shopping-reference-bg) !important;
        border: 1px solid var(--mobile-shopping-reference-border) !important;
        border-radius: 12px !important;
        box-shadow: var(--mobile-shopping-reference-shadow) !important;
    }

    .shopping-page .shopping-item,
    .shopping-page .shopping-item.purchased,
    .shopping-page .shopping-inline-actions,
    .shopping-page .empty-state {
        background:
            var(--mobile-shopping-reference-gradient),
            var(--bg-primary) !important;
        border: 1px solid var(--mobile-shopping-reference-border) !important;
        border-radius: 12px !important;
        box-shadow: var(--mobile-shopping-inner-shadow) !important;
    }

    .shopping-page .shopping-item:hover,
    .shopping-page .shopping-item.purchased:hover {
        border-color: var(--mobile-shopping-reference-border) !important;
        box-shadow: var(--mobile-shopping-inner-shadow), 0 10px 24px rgba(15, 23, 42, 0.08) !important;
    }

    [data-theme="dark"] .shopping-page {
        --mobile-shopping-reference-bg: color-mix(in srgb, var(--bg-secondary) 86%, #020617);
        --mobile-shopping-reference-border: rgba(148, 163, 184, 0.2);
        --mobile-shopping-reference-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
        --mobile-shopping-reference-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 26px rgba(0, 0, 0, 0.22);
        --mobile-shopping-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

@media (max-width: 768px) {
    .statistics-page {
        --mobile-statistics-reference-bg: color-mix(in srgb, var(--bg-secondary) 92%, white);
        --mobile-statistics-reference-border: rgba(148, 163, 184, 0.28);
        --mobile-statistics-reference-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12));
        --mobile-statistics-reference-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.06);
        --mobile-statistics-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .statistics-page .statistics-filter-section,
    .statistics-page .statistics-summary .stat-card,
    .statistics-page .statistics-comparison-card,
    .statistics-page .statistics-heatmap-section,
    .statistics-page .statistics-projects-section {
        background:
            var(--mobile-statistics-reference-gradient),
            var(--mobile-statistics-reference-bg) !important;
        border: 1px solid var(--mobile-statistics-reference-border) !important;
        border-radius: 12px !important;
        box-shadow: var(--mobile-statistics-reference-shadow) !important;
    }

    .statistics-page .statistics-heatmap-card,
    .statistics-page .statistics-project-row,
    .statistics-page .statistics-month-card,
    .statistics-page .statistics-filter-menu,
    .statistics-page .statistics-task-row {
        background:
            var(--mobile-statistics-reference-gradient),
            var(--bg-primary) !important;
        border: 1px solid var(--mobile-statistics-reference-border) !important;
        border-radius: 12px !important;
        box-shadow: var(--mobile-statistics-inner-shadow) !important;
    }

    .statistics-page .statistics-project-row:hover {
        border-color: var(--mobile-statistics-reference-border) !important;
        box-shadow: var(--mobile-statistics-inner-shadow), 0 10px 24px rgba(15, 23, 42, 0.08) !important;
    }

    .statistics-page .statistics-month-day.is-empty {
        border-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    [data-theme="dark"] .statistics-page {
        --mobile-statistics-reference-bg: color-mix(in srgb, var(--bg-secondary) 86%, #020617);
        --mobile-statistics-reference-border: rgba(148, 163, 184, 0.2);
        --mobile-statistics-reference-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
        --mobile-statistics-reference-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 26px rgba(0, 0, 0, 0.22);
        --mobile-statistics-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

@media (max-width: 768px) {
    .leaderboard-page {
        --mobile-leaderboard-reference-bg: color-mix(in srgb, var(--bg-secondary) 92%, white);
        --mobile-leaderboard-reference-border: rgba(148, 163, 184, 0.28);
        --mobile-leaderboard-reference-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12));
        --mobile-leaderboard-reference-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.06);
        --mobile-leaderboard-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .leaderboard-page .leaderboard-section,
    .leaderboard-page .leaderboard-period-tabs,
    .leaderboard-page .leaderboard-user-position,
    .leaderboard-page .leaderboard-stat-card,
    .leaderboard-page .leaderboard-show-more {
        background:
            var(--mobile-leaderboard-reference-gradient),
            var(--mobile-leaderboard-reference-bg) !important;
        border: 1px solid var(--mobile-leaderboard-reference-border) !important;
        border-radius: 12px !important;
        box-shadow: var(--mobile-leaderboard-reference-shadow) !important;
    }

    .leaderboard-page .leaderboard-item,
    .leaderboard-page .leaderboard-item.user,
    .leaderboard-page .empty-state,
    .leaderboard-page .loading {
        background:
            var(--mobile-leaderboard-reference-gradient),
            var(--bg-primary) !important;
        border: 1px solid var(--mobile-leaderboard-reference-border) !important;
        border-radius: 12px !important;
        box-shadow: var(--mobile-leaderboard-inner-shadow) !important;
    }

    .leaderboard-page .leaderboard-item:hover,
    .leaderboard-page .leaderboard-item.user:hover {
        border-color: var(--mobile-leaderboard-reference-border) !important;
        box-shadow: var(--mobile-leaderboard-inner-shadow), 0 10px 24px rgba(15, 23, 42, 0.08) !important;
    }

    [data-theme="dark"] .leaderboard-page {
        --mobile-leaderboard-reference-bg: color-mix(in srgb, var(--bg-secondary) 86%, #020617);
        --mobile-leaderboard-reference-border: rgba(148, 163, 184, 0.2);
        --mobile-leaderboard-reference-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
        --mobile-leaderboard-reference-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 26px rgba(0, 0, 0, 0.22);
        --mobile-leaderboard-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

@media (max-width: 768px) {
    .badges-page {
        --mobile-badges-reference-bg: color-mix(in srgb, var(--bg-secondary) 92%, white);
        --mobile-badges-reference-border: rgba(148, 163, 184, 0.28);
        --mobile-badges-reference-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12));
        --mobile-badges-reference-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.06);
        --mobile-badges-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .badges-page .stats-bar .stat-card,
    .badges-page .badges-mobile-summary,
    .badges-page > .section,
    .badges-page .badge-filter-row {
        background:
            var(--mobile-badges-reference-gradient),
            var(--mobile-badges-reference-bg) !important;
        border: 1px solid var(--mobile-badges-reference-border) !important;
        border-radius: 12px !important;
        box-shadow: var(--mobile-badges-reference-shadow) !important;
    }

    .badges-page .badge-card,
    .badges-page .badge-card.earned,
    .badges-page .badge-card.in-progress,
    .badges-page .badge-card.locked,
    .badges-page .empty-state,
    .badges-page .loading {
        background:
            var(--mobile-badges-reference-gradient),
            var(--bg-primary) !important;
        border: 1px solid var(--mobile-badges-reference-border) !important;
        border-radius: 12px !important;
        box-shadow: var(--mobile-badges-inner-shadow) !important;
    }

    .badges-page .badge-card:hover,
    .badges-page .badge-card.earned:hover,
    .badges-page .badge-card.in-progress:hover,
    .badges-page .badge-card.locked:hover {
        border-color: var(--mobile-badges-reference-border) !important;
        box-shadow: var(--mobile-badges-inner-shadow), 0 10px 24px rgba(15, 23, 42, 0.08) !important;
    }

    [data-theme="dark"] .badges-page {
        --mobile-badges-reference-bg: color-mix(in srgb, var(--bg-secondary) 86%, #020617);
        --mobile-badges-reference-border: rgba(148, 163, 184, 0.2);
        --mobile-badges-reference-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
        --mobile-badges-reference-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 26px rgba(0, 0, 0, 0.22);
        --mobile-badges-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

@media (max-width: 760px) {
    .task-item:not(.mobile-selected) {
        padding-top: 8px !important;
        padding-bottom: 12px !important;
        row-gap: 0 !important;
    }

    .task-item:not(.mobile-selected) .task-title {
        margin-bottom: 8px !important;
    }

    .task-item:not(.mobile-selected) .task-meta {
        gap: 5px !important;
    }

    .task-item:not(.mobile-selected) .task-meta > span {
        min-height: 20px !important;
        padding: 3px 6px !important;
    }
}

@media (min-width: 769px) {
    #createTaskModal .task-modal-content,
    #editTaskModal .task-modal-content,
    #createNoteModal .modal-content,
    #editNoteModal .note-modal-content {
        width: 80vw;
        max-width: none;
        height: auto;
        max-height: 80dvh;
    }

    #createTaskModal .task-modal-content,
    #editTaskModal .task-modal-content {
        overflow: hidden;
    }

    #createTaskModal .task-modal-content form,
    #editTaskModal .task-modal-content form {
        flex: 0 1 auto;
    }

    #createTaskModal .task-modal-scroll,
    #editTaskModal .task-modal-scroll {
        flex: 0 1 auto;
        max-height: calc(80dvh - 160px);
        overflow-y: auto;
    }

    #createTaskModal .task-title-project-row,
    #editTaskModal .task-title-project-row {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
        gap: 16px;
        align-items: start;
        row-gap: 10px;
    }

    #createTaskModal .task-title-project-row > .form-group,
    #editTaskModal .task-title-project-row > .form-group {
        min-width: 0;
        margin-bottom: 0;
    }

    #createTaskModal .task-title-project-row + .form-group,
    #editTaskModal .task-title-project-row + .form-group {
        margin-top: 12px;
    }

    #createTaskModal .copyable-field.has-scrollbar .form-textarea + .field-copy-btn,
    #editTaskModal .copyable-field.has-scrollbar .form-textarea + .field-copy-btn {
        right: 18px;
    }

    #createTaskModal .task-title-project-row > .project-badge-menu,
    #editTaskModal .task-title-project-row > .project-badge-menu {
        display: none;
    }

    #createTaskModal .task-title-project-row > .project-badge-menu.is-open,
    #editTaskModal .task-title-project-row > .project-badge-menu.is-open {
        position: static;
        top: auto;
        right: auto;
        left: auto;
        display: flex;
        grid-column: 1 / -1;
        grid-row: 2;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
        margin-top: 0;
        padding: 10px;
        border: 1px solid rgba(148, 163, 184, 0.24);
        border-radius: 12px;
        background: rgba(148, 163, 184, 0.05);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    #createTaskModal .task-title-project-row > .project-badge-menu .custom-select-option,
    #editTaskModal .task-title-project-row > .project-badge-menu .custom-select-option {
        width: auto;
        min-height: 32px;
        flex: 0 0 auto;
        padding: 6px 10px;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.58);
        color: var(--text-secondary);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
    }

    #createTaskModal .task-title-project-row > .project-badge-menu .custom-select-option:hover,
    #editTaskModal .task-title-project-row > .project-badge-menu .custom-select-option:hover,
    #createTaskModal .task-title-project-row > .project-badge-menu .custom-select-option[aria-selected="true"],
    #editTaskModal .task-title-project-row > .project-badge-menu .custom-select-option[aria-selected="true"] {
        border-color: rgba(79, 127, 216, 0.32);
        background: rgba(79, 127, 216, 0.11);
        color: #4f7fd8;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    #createTaskModal textarea[name="description"],
    #editTaskModal textarea[name="description"] {
        min-height: 64px;
        max-height: none;
    }

    /* Open task pickers participate in the form height instead of being clipped by its scroller. */
    #createTaskModal .custom-date-picker.is-open .custom-date-menu,
    #editTaskModal .custom-date-picker.is-open .custom-date-menu,
    #createTaskModal .custom-select.is-open .custom-select-menu,
    #editTaskModal .custom-select.is-open .custom-select-menu {
        position: static;
        top: auto;
        right: auto;
        left: auto;
        margin-top: 6px;
    }

    #createTaskModal .custom-select.is-open .custom-select-menu,
    #editTaskModal .custom-select.is-open .custom-select-menu {
        width: 100%;
    }

    #createNoteModal .modal-content {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #createNoteModal form {
        display: flex;
        flex: 1;
        min-height: 0;
        flex-direction: column;
    }

    #createNoteModal .form-group:has(textarea[name="content"]) {
        display: flex;
        flex: 1;
        min-height: 0;
        flex-direction: column;
    }

    #createNoteModal textarea[name="content"] {
        flex: 0 0 auto;
        height: 64px;
        min-height: 64px;
        max-height: none;
        resize: none;
    }

    #createNoteModal .modal-content,
    #editNoteModal .note-modal-content {
        overflow: hidden;
    }

    #createNoteModal form,
    #editNoteModal form {
        flex: 0 1 auto;
        min-height: 0;
    }

    #createNoteModal .note-modal-scroll-shell,
    #editNoteModal .note-modal-scroll-shell {
        display: block;
        flex: 0 1 auto;
        max-height: none;
        overflow: visible;
    }

    #createNoteModal .note-modal-scroll,
    #editNoteModal .note-modal-scroll {
        flex: 0 1 auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }

    #createNoteModal .note-modal-content .note-textarea,
    #editNoteModal .note-modal-content .note-textarea {
        max-height: calc(80dvh - 280px);
        min-height: 64px;
        padding-right: 64px;
    }

    #createNoteModal .copyable-field.has-scrollbar .note-textarea + .field-copy-btn,
    #editNoteModal .copyable-field.has-scrollbar .note-textarea + .field-copy-btn {
        right: 18px;
    }

    #createNoteModal .copyable-field .note-textarea + .field-copy-btn,
    #editNoteModal .copyable-field .note-textarea + .field-copy-btn {
        right: 8px;
    }

    #createNoteModal .form-actions,
    #editNoteModal .modal-footer {
        flex-shrink: 0;
        position: relative;
        z-index: 2;
        background-color: var(--bg-secondary);
    }

    #createNoteModal .form-actions {
        background-color: transparent;
        border-top: 0;
    }

    #createNoteModal .note-modal-scroll,
    #editNoteModal .note-modal-scroll {
        flex: 0 1 auto;
        max-height: calc(80dvh - 160px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 4px;
        padding-left: 4px;
    }

    #createNoteModal .note-modal-scroll-shell,
    #editNoteModal .note-modal-scroll-shell {
        display: block;
        flex: 0 1 auto;
        max-height: none;
        overflow: visible;
    }

    #createNoteModal .note-modal-scroll-shell .note-modal-scroll,
    #editNoteModal .note-modal-scroll-shell .note-modal-scroll {
        min-width: 0;
        flex: 0 1 auto;
        max-height: none;
        overflow: visible;
        padding-right: 0;
        padding-left: 0;
    }

    #createNoteModal .note-modal-content .note-textarea,
    #editNoteModal .note-modal-content .note-textarea {
        max-height: calc(80dvh - 330px);
        overflow-y: auto;
        scrollbar-width: none;
        scrollbar-color: transparent transparent;
        scrollbar-gutter: auto;
    }

    #createNoteModal .note-modal-content .note-textarea::-webkit-scrollbar,
    #editNoteModal .note-modal-content .note-textarea::-webkit-scrollbar {
        display: none;
        width: 5px;
    }

    #createNoteModal .note-modal-content .note-textarea::-webkit-scrollbar-track,
    #editNoteModal .note-modal-content .note-textarea::-webkit-scrollbar-track {
        background: transparent;
    }

    #createNoteModal .note-modal-content .note-textarea::-webkit-scrollbar-thumb,
    #editNoteModal .note-modal-content .note-textarea::-webkit-scrollbar-thumb {
        border: 1px solid transparent;
        border-radius: 999px;
        background-clip: padding-box;
        background-color: rgba(100, 116, 139, 0.42);
    }

    #createNoteModal .note-modal-content .note-textarea::-webkit-scrollbar-thumb:hover,
    #editNoteModal .note-modal-content .note-textarea::-webkit-scrollbar-thumb:hover {
        background-color: rgba(79, 127, 216, 0.58);
    }

    #createNoteModal .copyable-field.has-scrollbar .note-textarea,
    #editNoteModal .copyable-field.has-scrollbar .note-textarea {
        scrollbar-width: thin;
        scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
    }

    #createNoteModal .copyable-field.has-scrollbar .note-textarea::-webkit-scrollbar,
    #editNoteModal .copyable-field.has-scrollbar .note-textarea::-webkit-scrollbar {
        display: block;
    }

    #createNoteModal .copyable-field.has-scrollbar .note-textarea + .field-copy-btn,
    #editNoteModal .copyable-field.has-scrollbar .note-textarea + .field-copy-btn {
        right: 18px;
    }

    #createNoteModal .form-actions,
    #editNoteModal .modal-footer {
        padding-right: 4px;
    }

    #createNoteModal .note-title-project-row,
    #editNoteModal .note-title-project-row {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
        gap: 16px;
        align-items: start;
        row-gap: 10px;
    }

    #createNoteModal .note-title-project-row > .form-group,
    #editNoteModal .note-title-project-row > .form-group {
        min-width: 0;
        margin-bottom: 0;
    }

    #createNoteModal .note-title-project-row + .form-group,
    #editNoteModal .note-title-project-row + .form-group {
        margin-top: 12px;
    }

    #createNoteModal .note-title-project-row .project-badge-picker.is-open .custom-select-menu,
    #editNoteModal .note-title-project-row .project-badge-picker.is-open .custom-select-menu {
        position: static;
        width: 100%;
        margin-top: 8px;
    }

    #createNoteModal .note-title-project-row .project-badge-picker.is-open,
    #editNoteModal .note-title-project-row .project-badge-picker.is-open {
        display: contents;
    }

    #createNoteModal .note-title-project-row .project-badge-picker.is-open .custom-select-trigger,
    #editNoteModal .note-title-project-row .project-badge-picker.is-open .custom-select-trigger {
        grid-column: 2;
        width: 100%;
    }

    #createNoteModal .note-title-project-row .project-badge-picker.is-open .custom-select-menu,
    #editNoteModal .note-title-project-row .project-badge-picker.is-open .custom-select-menu {
        grid-column: 1 / -1;
    }

    #createNoteModal .note-title-project-row > .form-group:has(.project-badge-picker.is-open),
    #editNoteModal .note-title-project-row > .form-group:has(.project-badge-picker.is-open) {
        display: contents;
    }

    #createNoteModal .note-title-project-row > .form-group:has(.project-badge-picker.is-open) > .form-label,
    #editNoteModal .note-title-project-row > .form-group:has(.project-badge-picker.is-open) > .form-label {
        grid-column: 2;
        grid-row: 1;
    }

    #createNoteModal .note-title-project-row .project-badge-picker.is-open .custom-select-trigger,
    #editNoteModal .note-title-project-row .project-badge-picker.is-open .custom-select-trigger {
        grid-column: 2;
        grid-row: 2;
    }

    #createNoteModal .note-title-project-row .project-badge-picker.is-open .custom-select-menu,
    #editNoteModal .note-title-project-row .project-badge-picker.is-open .custom-select-menu {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    #createNoteModal .note-title-project-row > .project-badge-menu,
    #editNoteModal .note-title-project-row > .project-badge-menu {
        display: none;
    }

    #createNoteModal .note-title-project-row > .project-badge-menu.is-open,
    #editNoteModal .note-title-project-row > .project-badge-menu.is-open {
        position: static;
        grid-column: 1 / -1;
        grid-row: 3;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
        max-height: none;
        overflow: visible;
        margin-top: 8px;
        padding: 10px;
        border: 1px solid rgba(148, 163, 184, 0.24);
        border-radius: 12px;
        background: rgba(148, 163, 184, 0.05);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    #createNoteModal .form-group:has(.note-textarea),
    #editNoteModal .form-group:has(.note-textarea) {
        display: block;
        flex: 0 0 auto;
        min-height: 0;
    }

    #createNoteModal .note-textarea,
    #editNoteModal .note-textarea {
        display: block;
        flex: 0 0 auto;
        height: 64px;
        min-height: 64px;
        max-height: none;
        overflow-y: hidden;
        resize: none;
    }

    #createNoteModal .note-modal-scroll .custom-select.is-open .custom-select-menu,
    #editNoteModal .note-modal-scroll .custom-select.is-open .custom-select-menu {
        position: static;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
        margin-top: 6px;
    }

    #createTaskModal .project-badge-picker,
    #editTaskModal .project-badge-picker,
    #createNoteModal .project-badge-picker,
    #editNoteModal .project-badge-picker {
        width: 100%;
    }

    #createTaskModal .project-badge-picker .custom-select-trigger,
    #editTaskModal .project-badge-picker .custom-select-trigger,
    #createNoteModal .project-badge-picker .custom-select-trigger,
    #editNoteModal .project-badge-picker .custom-select-trigger {
        display: flex;
    }

    #createTaskModal .project-badge-picker .custom-select-menu,
    #editTaskModal .project-badge-picker .custom-select-menu,
    #createNoteModal .project-badge-picker .custom-select-menu,
    #editNoteModal .project-badge-picker .custom-select-menu {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        left: 0;
        display: none;
        z-index: 80;
    }

    #createTaskModal .project-badge-picker.is-open .custom-select-menu,
    #editTaskModal .project-badge-picker.is-open .custom-select-menu,
    #createNoteModal .project-badge-picker.is-open .custom-select-menu,
    #editNoteModal .project-badge-picker.is-open .custom-select-menu {
        position: static;
        top: auto;
        right: auto;
        left: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
        max-height: none;
        overflow: visible;
        margin-top: 8px;
        padding: 10px;
        border: 1px solid rgba(148, 163, 184, 0.24);
        border-radius: 12px;
        background: rgba(148, 163, 184, 0.05);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    #createTaskModal .project-badge-picker .custom-select-option,
    #editTaskModal .project-badge-picker .custom-select-option,
    #createNoteModal .project-badge-picker .custom-select-option,
    #editNoteModal .project-badge-picker .custom-select-option {
        width: auto;
        min-height: 32px;
        flex: 0 0 auto;
        padding: 6px 10px;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.58);
        color: var(--text-secondary);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
    }

    #createTaskModal .project-badge-picker .custom-select-option:hover,
    #editTaskModal .project-badge-picker .custom-select-option:hover,
    #createNoteModal .project-badge-picker .custom-select-option:hover,
    #editNoteModal .project-badge-picker .custom-select-option:hover,
    #createTaskModal .project-badge-picker .custom-select-option[aria-selected="true"],
    #editTaskModal .project-badge-picker .custom-select-option[aria-selected="true"],
    #createNoteModal .project-badge-picker .custom-select-option[aria-selected="true"],
    #editNoteModal .project-badge-picker .custom-select-option[aria-selected="true"] {
        border-color: rgba(79, 127, 216, 0.32);
        background: rgba(79, 127, 216, 0.11);
        color: #4f7fd8;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    #createNoteModal .project-badge-menu .custom-select-option,
    #editNoteModal .project-badge-menu .custom-select-option {
        width: auto;
        min-height: 32px;
        flex: 0 0 auto;
        padding: 6px 10px;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.58);
        color: var(--text-secondary);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
    }

    #createNoteModal .project-badge-menu .custom-select-option:hover,
    #editNoteModal .project-badge-menu .custom-select-option:hover,
    #createNoteModal .project-badge-menu .custom-select-option[aria-selected="true"],
    #editNoteModal .project-badge-menu .custom-select-option[aria-selected="true"] {
        border-color: rgba(79, 127, 216, 0.32);
        background: rgba(79, 127, 216, 0.11);
        color: #4f7fd8;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    /* Keep the project label and trigger together; only the expanded menu gets a new row. */
    #createNoteModal .note-title-project-row > .form-group:has(.project-badge-picker.is-open),
    #editNoteModal .note-title-project-row > .form-group:has(.project-badge-picker.is-open),
    #createNoteModal .note-title-project-row .project-badge-picker.is-open {
        display: block;
    }

    #editNoteModal .note-title-project-row .project-badge-picker.is-open {
        display: block;
    }

    #createNoteModal .note-title-project-row .project-badge-picker.is-open .custom-select-trigger,
    #editNoteModal .note-title-project-row .project-badge-picker.is-open .custom-select-trigger {
        grid-column: auto;
        grid-row: auto;
    }

    #createNoteModal .note-title-project-row > .project-badge-menu.is-open,
    #editNoteModal .note-title-project-row > .project-badge-menu.is-open {
        grid-row: 2;
        margin-top: 0;
    }

    #createTaskModal .form-actions,
    #editTaskModal .form-actions {
        position: static;
        padding-top: 0;
        margin-top: 0;
        border-top: 0;
        background-color: transparent;
    }

    /* The creation dialog has one primary action, so keep it visually centered. */
    #createTaskModal .form-actions {
        justify-content: center;
    }

    #createTaskModal,
    #editTaskModal,
    #createNoteModal,
    #editNoteModal {
        background-color: rgba(15, 23, 42, 0.48);
        padding: 24px;
    }

    #createTaskModal .modal-content,
    #editTaskModal .modal-content,
    #createNoteModal .modal-content,
    #editNoteModal .modal-content {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12)),
            color-mix(in srgb, var(--bg-secondary) 92%, white);
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 12px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.1);
    }

    #createTaskModal .modal-header,
    #editTaskModal .modal-header,
    #createNoteModal .modal-header,
    #editNoteModal .modal-header {
        margin-bottom: 18px;
        color: var(--text-primary);
        font-size: 22px;
    }

    #createTaskModal .form-input,
    #createTaskModal .form-textarea,
    #createTaskModal .form-select,
    #editTaskModal .form-input,
    #editTaskModal .form-textarea,
    #editTaskModal .form-select,
    #createNoteModal .form-input,
    #createNoteModal .form-textarea,
    #createNoteModal .form-select,
    #editNoteModal .form-input,
    #editNoteModal .form-textarea,
    #editNoteModal .form-select {
        border: 1px solid rgba(148, 163, 184, 0.38);
        border-radius: 8px;
        background-color: var(--bg-primary);
        padding: 11px 12px;
    }

    #createTaskModal .form-input:focus,
    #createTaskModal .form-textarea:focus,
    #createTaskModal .form-select:focus,
    #editTaskModal .form-input:focus,
    #editTaskModal .form-textarea:focus,
    #editTaskModal .form-select:focus,
    #createNoteModal .form-input:focus,
    #createNoteModal .form-textarea:focus,
    #createNoteModal .form-select:focus,
    #editNoteModal .form-input:focus,
    #editNoteModal .form-textarea:focus,
    #editNoteModal .form-select:focus {
        border-color: rgba(79, 127, 216, 0.55);
        box-shadow: 0 0 0 3px rgba(79, 127, 216, 0.12);
    }

    #createTaskModal .modal-close-btn,
    #editTaskModal .modal-close-btn,
    #createNoteModal .modal-close-btn,
    #editNoteModal .modal-close-btn,
    #taskSetupPickerModal .modal-close-btn {
        width: 36px;
        height: 36px;
        border: 1px solid rgba(217, 111, 114, 0.22);
        border-radius: 8px;
        background-color: rgba(217, 111, 114, 0.1);
        color: #d96f72;
        font-size: 0;
        position: absolute;
    }

    #createTaskModal .modal-close-btn:hover,
    #editTaskModal .modal-close-btn:hover,
    #createNoteModal .modal-close-btn:hover,
    #editNoteModal .modal-close-btn:hover,
    #taskSetupPickerModal .modal-close-btn:hover {
        border-color: rgba(217, 111, 114, 0.38);
        background-color: rgba(217, 111, 114, 0.16);
        color: #d96f72;
    }

    #createTaskModal .modal-close-btn::before,
    #createTaskModal .modal-close-btn::after,
    #editTaskModal .modal-close-btn::before,
    #editTaskModal .modal-close-btn::after,
    #createNoteModal .modal-close-btn::before,
    #createNoteModal .modal-close-btn::after,
    #editNoteModal .modal-close-btn::before,
    #editNoteModal .modal-close-btn::after,
    #taskSetupPickerModal .modal-close-btn::before,
    #taskSetupPickerModal .modal-close-btn::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 2px;
        border-radius: 999px;
        background-color: currentColor;
        content: "";
        transform-origin: center;
    }

    #createTaskModal .modal-close-btn::before,
    #editTaskModal .modal-close-btn::before,
    #createNoteModal .modal-close-btn::before,
    #editNoteModal .modal-close-btn::before,
    #taskSetupPickerModal .modal-close-btn::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    #createTaskModal .modal-close-btn::after,
    #editTaskModal .modal-close-btn::after,
    #createNoteModal .modal-close-btn::after,
    #editNoteModal .modal-close-btn::after,
    #taskSetupPickerModal .modal-close-btn::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    #createTaskModal .form-actions,
    #editTaskModal .form-actions,
    #createNoteModal .form-actions {
        gap: 10px;
    }

    #createTaskModal .form-actions .btn,
    #editTaskModal .form-actions .btn,
    #createNoteModal .form-actions .btn {
        min-height: 40px;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 8px;
        box-shadow: none;
    }

    #createTaskModal .form-actions .btn-secondary,
    #editTaskModal .form-actions .btn-secondary,
    #createNoteModal .form-actions .btn-secondary {
        background-color: rgba(148, 163, 184, 0.1);
        color: var(--text-primary);
    }

    #createTaskModal .form-actions .btn-primary,
    #editTaskModal .form-actions .btn-primary,
    #createNoteModal .form-actions .btn-primary {
        border-color: rgba(79, 127, 216, 0.28);
        background-color: rgba(79, 127, 216, 0.12);
        color: #4f7fd8;
    }

    #editNoteModal .modal-footer {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 16px;
        padding-top: 0;
        border-top: 0;
        background-color: transparent;
    }

    #editNoteModal .modal-footer .btn {
        min-height: 40px;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 8px;
        box-shadow: none;
    }

    #editNoteModal .modal-footer .btn-primary {
        border-color: rgba(79, 127, 216, 0.28);
        background-color: rgba(79, 127, 216, 0.12);
        color: #4f7fd8;
    }

    #editNoteModal .modal-footer .btn-danger {
        border-color: rgba(217, 111, 114, 0.22);
        background-color: rgba(217, 111, 114, 0.1);
        color: #d96f72;
    }

    #editNoteModal .modal-footer .btn-danger:hover {
        border-color: rgba(217, 111, 114, 0.38);
        background-color: rgba(217, 111, 114, 0.16);
        color: #d96f72;
    }

    #editTaskModal .form-actions .btn-danger {
        border-color: rgba(217, 111, 114, 0.22);
        background-color: rgba(217, 111, 114, 0.1);
        color: #d96f72;
    }

    #editTaskModal .form-actions .btn-danger:hover {
        border-color: rgba(217, 111, 114, 0.38);
        background-color: rgba(217, 111, 114, 0.16);
        color: #d96f72;
    }

    .task-focus-checkbox .task-focus-box,
    .task-repeat-toggle .checkmark {
        border: 1px solid rgba(148, 163, 184, 0.38);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08)),
            rgba(148, 163, 184, 0.08);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .task-focus-checkbox .task-focus-box {
        position: relative;
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        border-radius: 7px;
    }

    #createTaskModal .task-repeat-toggle .checkmark {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        border-radius: 7px;
    }

    #createTaskModal .task-repeat-toggle {
        margin-left: -8px;
    }

    #editTaskModal .task-repeat-toggle {
        margin-left: -8px;
    }

    #editTaskModal .task-repeat-toggle .checkmark {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        border-radius: 7px;
    }

    #createTaskModal .form-select,
    #editTaskModal .form-select {
        appearance: none;
        padding-right: 44px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
        background-position: right 14px center;
        background-repeat: no-repeat;
        background-size: 18px 18px;
    }

    #createTaskModal input[type="date"],
    #editTaskModal input[type="date"],
    #createTaskModal input[type="number"],
    #editTaskModal input[type="number"] {
        min-height: 44px;
    }

    #createTaskModal input[type="date"]::-webkit-calendar-picker-indicator,
    #editTaskModal input[type="date"]::-webkit-calendar-picker-indicator {
        cursor: pointer;
        opacity: 0.62;
    }

    #createTaskModal .form-label,
    #editTaskModal .form-label {
        margin-bottom: 8px;
        color: var(--text-primary);
        font-size: 15px;
        font-weight: 700;
    }

    #createTaskModal .recurrence-options,
    #editTaskModal .recurrence-options,
    #editTaskModal .recurring-edit-panel {
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 12px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.08)),
            rgba(148, 163, 184, 0.06);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

    .task-focus-checkbox:hover .task-focus-box,
    .task-repeat-toggle:hover .checkmark {
        border-color: rgba(79, 127, 216, 0.58);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.12)),
            rgba(79, 127, 216, 0.1);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 6px 14px rgba(79, 127, 216, 0.12);
    }

    .task-focus-checkbox input:focus-visible + .task-focus-box,
    .task-repeat-toggle input:focus-visible ~ .checkmark {
        outline: 3px solid rgba(79, 127, 216, 0.16);
        outline-offset: 2px;
    }

    .task-focus-checkbox input:checked + .task-focus-box,
    .task-repeat-toggle input:checked ~ .checkmark {
        border: 2px solid #4f7fd8;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08)),
            rgba(79, 127, 216, 0.16);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 0 0 3px rgba(79, 127, 216, 0.12);
    }

    .task-focus-checkbox input:checked + .task-focus-box::after,
    .task-repeat-toggle input:checked ~ .checkmark::after {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 6px;
        height: 10px;
        margin: 0;
        border-width: 0 2px 2px 0;
        border-color: #4f7fd8;
        transform: translate(-50%, -58%) rotate(45deg);
    }

    .task-focus-checkbox input:checked + .task-focus-box {
        border: 2px solid #4f7fd8;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08)),
            rgba(79, 127, 216, 0.16);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 0 0 3px rgba(79, 127, 216, 0.12);
    }

    .task-focus-checkbox input:checked + .task-focus-box::after {
        border-color: #4f7fd8;
    }
}

@media (max-width: 768px) {
    .app-container:has(.tasks-layout),
    #createTaskModal,
    #editTaskModal,
    #createProjectModal,
    #editProjectModal,
    #deleteProjectModal,
    #createNoteModal,
    #editNoteModal,
    #projectReportModal {
        --mobile-task-button-blue: #4f7fd8;
        --mobile-task-button-blue-bg: rgba(79, 127, 216, 0.1);
        --mobile-task-button-blue-border: rgba(79, 127, 216, 0.16);
        --mobile-task-button-blue-shadow: rgba(79, 127, 216, 0.14);
        --mobile-task-button-mint: #5aa98d;
        --mobile-task-button-mint-bg: rgba(90, 169, 141, 0.1);
        --mobile-task-button-mint-border: rgba(90, 169, 141, 0.16);
        --mobile-task-button-mint-shadow: rgba(90, 169, 141, 0.13);
        --mobile-task-button-lavender: #9b78c8;
        --mobile-task-button-lavender-bg: rgba(155, 120, 200, 0.1);
        --mobile-task-button-lavender-border: rgba(155, 120, 200, 0.16);
        --mobile-task-button-lavender-shadow: rgba(155, 120, 200, 0.13);
        --mobile-task-button-indigo: #6672b8;
        --mobile-task-button-indigo-bg: rgba(102, 114, 184, 0.1);
        --mobile-task-button-indigo-border: rgba(102, 114, 184, 0.16);
        --mobile-task-button-indigo-shadow: rgba(102, 114, 184, 0.13);
        --mobile-task-button-amber: #c08a3a;
        --mobile-task-button-amber-bg: rgba(192, 138, 58, 0.11);
        --mobile-task-button-amber-border: rgba(192, 138, 58, 0.17);
        --mobile-task-button-amber-shadow: rgba(192, 138, 58, 0.13);
        --mobile-task-button-red: #d96f72;
        --mobile-task-button-red-bg: rgba(217, 111, 114, 0.1);
        --mobile-task-button-red-border: rgba(217, 111, 114, 0.16);
        --mobile-task-button-red-shadow: rgba(217, 111, 114, 0.13);
        --mobile-task-button-slate: var(--text-secondary);
        --mobile-task-button-slate-bg: rgba(148, 163, 184, 0.1);
        --mobile-task-button-slate-border: rgba(148, 163, 184, 0.22);
        --mobile-task-button-slate-shadow: rgba(148, 163, 184, 0.12);
    }

    .app-container:has(.tasks-layout) .mobile-topbar-btn,
    .app-container:has(.tasks-layout) .task-filter-trigger,
    .app-container:has(.tasks-layout) .tasks-layout .task-filter-menu .task-date-filter,
    .app-container:has(.tasks-layout) .mobile-fab,
    .app-container:has(.tasks-layout) .mobile-fab-action,
    .app-container:has(.tasks-layout) .mobile-task-inline-btn,
    .app-container:has(.tasks-layout) .tasks-sidebar .sidebar-icon-btn,
    .app-container:has(.tasks-layout) .mobile-drawer-close,
    .app-container:has(.tasks-layout) .show-archived-btn,
    .app-container:has(.tasks-layout) .project-action-btn,
    .app-container:has(.tasks-layout) .project-action-menu-btn,
    #createTaskModal .btn,
    #editTaskModal .btn,
    #createProjectModal .btn,
    #editProjectModal .btn,
    #deleteProjectModal .btn,
    #createNoteModal .btn,
    #editNoteModal .btn,
    #projectReportModal .btn,
    #createTaskModal .modal-close-btn,
    #editTaskModal .modal-close-btn,
    #createProjectModal .modal-close-btn,
    #editProjectModal .modal-close-btn,
    #deleteProjectModal .modal-close-btn,
    #createNoteModal .modal-close-btn,
    #editNoteModal .modal-close-btn,
    #projectReportModal .modal-close-btn,
    #editNoteModal .field-copy-btn,
    #editTaskModal .field-copy-btn {
        --mobile-task-button-color: var(--mobile-task-button-slate);
        --mobile-task-button-bg: var(--mobile-task-button-slate-bg);
        --mobile-task-button-border: var(--mobile-task-button-slate-border);
        --mobile-task-button-shadow: var(--mobile-task-button-slate-shadow);
        border: 1px solid var(--mobile-task-button-border) !important;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.06)),
            var(--mobile-task-button-bg) !important;
        color: var(--mobile-task-button-color) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 8px 18px var(--mobile-task-button-shadow) !important;
        font-weight: 800;
        transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }

    .app-container:has(.tasks-layout) .mobile-topbar-btn:hover,
    .app-container:has(.tasks-layout) .task-filter-trigger:hover,
    .app-container:has(.tasks-layout) .task-filter-trigger[aria-expanded="true"],
    .app-container:has(.tasks-layout) .tasks-layout .task-filter-menu .task-date-filter:hover,
    .app-container:has(.tasks-layout) .tasks-layout .task-filter-menu .task-date-filter.active,
    .app-container:has(.tasks-layout) .mobile-fab:hover,
    .app-container:has(.tasks-layout) .mobile-fab-action:hover,
    .app-container:has(.tasks-layout) .mobile-task-inline-btn:hover,
    .app-container:has(.tasks-layout) .tasks-sidebar .sidebar-icon-btn:hover,
    .app-container:has(.tasks-layout) .mobile-drawer-close:hover,
    .app-container:has(.tasks-layout) .show-archived-btn:hover,
    .app-container:has(.tasks-layout) .project-action-btn:hover,
    .app-container:has(.tasks-layout) .project-action-menu-btn:hover,
    #createTaskModal .btn:hover,
    #editTaskModal .btn:hover,
    #createProjectModal .btn:hover,
    #editProjectModal .btn:hover,
    #deleteProjectModal .btn:hover,
    #createNoteModal .btn:hover,
    #editNoteModal .btn:hover,
    #projectReportModal .btn:hover {
        border-color: color-mix(in srgb, var(--mobile-task-button-border) 62%, var(--mobile-task-button-color)) !important;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.1)),
            color-mix(in srgb, var(--mobile-task-button-bg) 88%, var(--mobile-task-button-color)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 10px 22px var(--mobile-task-button-shadow) !important;
        transform: translateY(-1px);
    }

    .app-container:has(.tasks-layout) .mobile-topbar-btn:first-child,
    .app-container:has(.tasks-layout) .task-filter-trigger,
    .app-container:has(.tasks-layout) .tasks-layout .task-filter-menu .task-date-filter.active,
    .app-container:has(.tasks-layout) .mobile-fab,
    .app-container:has(.tasks-layout) .mobile-fab-action:first-child,
    .app-container:has(.tasks-layout) .mobile-task-inline-btn.primary,
    .app-container:has(.tasks-layout) .tasks-sidebar .sidebar-icon-btn:not(.focus-active-btn),
    #createTaskModal .btn-primary,
    #editTaskModal .btn-primary,
    #createProjectModal .btn-primary,
    #editProjectModal .btn-primary,
    #createNoteModal .btn-primary,
    #editNoteModal .btn-primary,
    #projectReportModal .btn-primary {
        --mobile-task-button-color: var(--mobile-task-button-blue);
        --mobile-task-button-bg: var(--mobile-task-button-blue-bg);
        --mobile-task-button-border: var(--mobile-task-button-blue-border);
        --mobile-task-button-shadow: var(--mobile-task-button-blue-shadow);
    }

    .app-container:has(.tasks-layout) .mobile-topbar-btn[onclick*="focusActiveTask"],
    .app-container:has(.tasks-layout) .mobile-fab-action.focus,
    .app-container:has(.tasks-layout) .mobile-task-inline-btn.success,
    .app-container:has(.tasks-layout) .tasks-sidebar .focus-active-btn,
    #createTaskModal .btn-success,
    #editTaskModal .btn-success {
        --mobile-task-button-color: var(--mobile-task-button-mint);
        --mobile-task-button-bg: var(--mobile-task-button-mint-bg);
        --mobile-task-button-border: var(--mobile-task-button-mint-border);
        --mobile-task-button-shadow: var(--mobile-task-button-mint-shadow);
    }

    .app-container:has(.tasks-layout) .mobile-topbar-btn[onclick*="toggleTheme"],
    .app-container:has(.tasks-layout) .mobile-fab-action.note,
    #createNoteModal .btn-primary,
    #editNoteModal .btn-primary {
        --mobile-task-button-color: var(--mobile-task-button-lavender);
        --mobile-task-button-bg: var(--mobile-task-button-lavender-bg);
        --mobile-task-button-border: var(--mobile-task-button-lavender-border);
        --mobile-task-button-shadow: var(--mobile-task-button-lavender-shadow);
    }

    .app-container:has(.tasks-layout) .mobile-fab-action.report,
    #projectReportModal .btn-primary {
        --mobile-task-button-color: var(--mobile-task-button-indigo);
        --mobile-task-button-bg: var(--mobile-task-button-indigo-bg);
        --mobile-task-button-border: var(--mobile-task-button-indigo-border);
        --mobile-task-button-shadow: var(--mobile-task-button-indigo-shadow);
    }

    .app-container:has(.tasks-layout) .mobile-task-inline-btn.secondary,
    .app-container:has(.tasks-layout) .project-action-menu-btn:not(.danger) {
        --mobile-task-button-color: var(--mobile-task-button-amber);
        --mobile-task-button-bg: var(--mobile-task-button-amber-bg);
        --mobile-task-button-border: var(--mobile-task-button-amber-border);
        --mobile-task-button-shadow: var(--mobile-task-button-amber-shadow);
    }

    .app-container:has(.tasks-layout) .mobile-fab-action.danger,
    .app-container:has(.tasks-layout) .mobile-drawer-close,
    .app-container:has(.tasks-layout) .project-action-menu-btn.danger,
    #editTaskModal .btn-danger,
    #editProjectModal .btn-danger,
    #deleteProjectModal .btn-danger,
    #editNoteModal .btn-danger {
        --mobile-task-button-color: var(--mobile-task-button-red);
        --mobile-task-button-bg: var(--mobile-task-button-red-bg);
        --mobile-task-button-border: var(--mobile-task-button-red-border);
        --mobile-task-button-shadow: var(--mobile-task-button-red-shadow);
    }

    .app-container:has(.tasks-layout) .mobile-fab-action {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.16)),
            color-mix(in srgb, var(--mobile-task-button-color) 10%, var(--bg-secondary)) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    [data-theme="dark"] .app-container:has(.tasks-layout) .mobile-topbar-btn,
    [data-theme="dark"] .app-container:has(.tasks-layout) .task-filter-trigger,
    [data-theme="dark"] .app-container:has(.tasks-layout) .tasks-layout .task-filter-menu .task-date-filter,
    [data-theme="dark"] .app-container:has(.tasks-layout) .mobile-fab,
    [data-theme="dark"] .app-container:has(.tasks-layout) .mobile-fab-action,
    [data-theme="dark"] .app-container:has(.tasks-layout) .mobile-task-inline-btn,
    [data-theme="dark"] .app-container:has(.tasks-layout) .tasks-sidebar .sidebar-icon-btn,
    [data-theme="dark"] .app-container:has(.tasks-layout) .mobile-drawer-close,
    [data-theme="dark"] .app-container:has(.tasks-layout) .show-archived-btn,
    [data-theme="dark"] .app-container:has(.tasks-layout) .project-action-btn,
    [data-theme="dark"] .app-container:has(.tasks-layout) .project-action-menu-btn {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
            color-mix(in srgb, var(--mobile-task-button-bg) 72%, #020617) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.18) !important;
    }
}

@media (max-width: 768px) {
    #createTaskModal .task-title-project-row,
    #editTaskModal .task-title-project-row {
        display: contents;
    }

    #createTaskModal .task-title-project-row > .form-group:first-child,
    #editTaskModal .task-title-project-row > .form-group:first-child {
        order: 1;
    }

    #createTaskModal .task-modal-scroll > .form-group:has(textarea),
    #editTaskModal .task-modal-scroll > .form-group:has(textarea) {
        order: 2;
    }

    #createTaskModal .task-modal-scroll > .form-group:has(input[type="date"]),
    #editTaskModal .task-modal-scroll > .form-group:has(input[type="date"]) {
        order: 3;
    }

    #createTaskModal .task-title-project-row > .form-group:nth-child(2),
    #editTaskModal .task-title-project-row > .form-group:nth-child(2) {
        order: 4;
    }

    #createNoteModal .note-modal-scrollbar,
    #editNoteModal .note-modal-scrollbar {
        display: none !important;
    }

    /* Keep the original mobile order after the desktop-only title/project row. */
    #createNoteModal .note-modal-scroll,
    #editNoteModal .note-modal-scroll {
        display: flex;
        flex-direction: column;
    }

    #createNoteModal .note-title-project-row,
    #editNoteModal .note-title-project-row {
        display: contents;
    }

    #createNoteModal .note-title-project-row > .form-group:first-child,
    #editNoteModal .note-title-project-row > .form-group:first-child {
        order: 1;
    }

    #createNoteModal .note-modal-scroll > .form-group:has(.note-textarea),
    #editNoteModal .note-modal-scroll > .form-group:has(.note-textarea) {
        order: 2;
    }

    #createNoteModal .note-title-project-row > .form-group:nth-child(2),
    #editNoteModal .note-title-project-row > .form-group:nth-child(2) {
        order: 3;
    }

    .tasks-layout {
        --tasks-blue: #4f7fd8;
        --tasks-blue-bg: rgba(79, 127, 216, 0.1);
        --tasks-blue-border: rgba(79, 127, 216, 0.16);
        --tasks-mint: #5aa98d;
        --tasks-mint-bg: rgba(90, 169, 141, 0.1);
        --tasks-mint-border: rgba(90, 169, 141, 0.16);
        --tasks-amber: #c08a3a;
        --tasks-amber-bg: rgba(192, 138, 58, 0.11);
        --tasks-amber-border: rgba(192, 138, 58, 0.17);
        --tasks-indigo: #6672b8;
        --tasks-indigo-bg: rgba(102, 114, 184, 0.1);
        --tasks-indigo-border: rgba(102, 114, 184, 0.16);
        --tasks-lavender: #9b78c8;
        --tasks-lavender-bg: rgba(155, 120, 200, 0.1);
        --tasks-lavender-border: rgba(155, 120, 200, 0.16);
        --tasks-red: #d96f72;
        --tasks-red-bg: rgba(217, 111, 114, 0.1);
        --tasks-red-border: rgba(217, 111, 114, 0.16);
    }

    .tasks-layout .task-meta > span.task-date.today {
        border-color: var(--tasks-mint-border) !important;
        background-color: var(--tasks-mint-bg) !important;
        color: var(--tasks-mint) !important;
    }

    .tasks-layout .task-meta > span.task-date.tomorrow {
        border-color: var(--tasks-blue-border) !important;
        background-color: var(--tasks-blue-bg) !important;
        color: var(--tasks-blue) !important;
    }

    .tasks-layout .task-meta > span.task-date.future {
        border-color: var(--tasks-amber-border) !important;
        background-color: var(--tasks-amber-bg) !important;
        color: var(--tasks-amber) !important;
    }

    .tasks-layout .task-meta > span.task-date.overdue,
    .tasks-layout .task-meta > span.task-overdue {
        border-color: var(--tasks-red-border) !important;
        background-color: var(--tasks-red-bg) !important;
        color: var(--tasks-red) !important;
    }

    .tasks-layout .task-meta > span.task-recurrence {
        border-color: var(--tasks-indigo-border) !important;
        background-color: var(--tasks-indigo-bg) !important;
        color: var(--tasks-indigo) !important;
    }

}

@media (max-width: 768px) {
    .tasks-layout {
        --tasks-lavender-shadow: rgba(155, 120, 200, 0.13);
        --tasks-red-shadow: rgba(217, 111, 114, 0.13);
    }

    .tasks-layout #notesSection {
        border-color: var(--tasks-lavender-border) !important;
    }

    .tasks-layout .note-card {
        gap: 12px !important;
        padding: 16px !important;
        border: 1px solid var(--tasks-lavender-border) !important;
        border-left: 4px solid color-mix(in srgb, var(--tasks-lavender) 76%, var(--tasks-lavender-border)) !important;
        border-radius: 12px !important;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.06)),
            var(--bg-primary) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
    }

    .tasks-layout .note-card:hover,
    .tasks-layout .note-card:focus {
        border-color: color-mix(in srgb, var(--tasks-lavender) 66%, var(--tasks-lavender-border)) !important;
        border-left-color: var(--tasks-lavender) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 10px 24px var(--tasks-lavender-shadow) !important;
    }

    .tasks-layout .note-title {
        color: var(--text-primary) !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }

    .tasks-layout .note-project {
        min-height: 30px !important;
        padding: 6px 10px !important;
        border: 1px solid var(--tasks-lavender-border) !important;
        border-radius: 999px !important;
        background-color: var(--tasks-lavender-bg) !important;
        color: var(--tasks-lavender) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    .tasks-layout .note-delete-btn {
        min-height: 30px !important;
        padding: 7px 10px !important;
        border: 1px solid var(--tasks-red-border) !important;
        border-radius: 8px !important;
        background-color: var(--tasks-red-bg) !important;
        color: var(--tasks-red) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
    }

    .tasks-layout .note-delete-btn:hover {
        border-color: color-mix(in srgb, var(--tasks-red) 68%, var(--tasks-red-border)) !important;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.08)),
            var(--tasks-red-bg) !important;
        color: var(--tasks-red) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 8px 18px var(--tasks-red-shadow) !important;
    }

    .tasks-layout .note-card {
        gap: 10px !important;
        padding: 12px !important;
        border: 1px solid var(--mobile-tasks-reference-border) !important;
        border-left-width: 1px !important;
        border-radius: 12px !important;
        background:
            var(--mobile-tasks-reference-gradient),
            var(--bg-primary) !important;
        box-shadow: var(--mobile-tasks-inner-shadow) !important;
    }

    .tasks-layout .note-card:hover,
    .tasks-layout .note-card:focus {
        border-color: var(--mobile-tasks-reference-border) !important;
        border-left-color: var(--mobile-tasks-reference-border) !important;
        box-shadow: var(--mobile-tasks-inner-shadow), 0 10px 24px rgba(15, 23, 42, 0.08) !important;
    }

    .tasks-layout .note-title {
        margin: 0 0 6px !important;
        color: var(--text-primary) !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
    }

    .tasks-layout .note-content {
        display: -webkit-box !important;
        margin: 0 0 8px !important;
        overflow: hidden !important;
        color: var(--text-primary) !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    .tasks-layout .note-card-footer {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .tasks-layout .note-project {
        min-height: 20px !important;
        max-width: 100% !important;
        overflow: hidden !important;
        padding: 3px 6px !important;
        border: 1px solid var(--mobile-tasks-reference-border) !important;
        border-radius: 7px !important;
        background-color: color-mix(in srgb, var(--text-secondary) 9%, var(--bg-primary)) !important;
        color: var(--text-secondary) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .tasks-layout .note-project .project-dot {
        display: none !important;
    }

    .tasks-layout .note-delete-btn {
        display: none !important;
    }
}

/* Mobile task and note dialogs use the same compact controls as desktop. */
@media (max-width: 768px) {
    #createTaskModal,
    #editTaskModal {
        padding: 5px !important;
        overflow: hidden !important;
    }

    #createTaskModal .task-modal-content,
    #editTaskModal .task-modal-content {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: calc(100dvh - 10px) !important;
        padding: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12)),
            color-mix(in srgb, var(--bg-secondary) 92%, white) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 12px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.1) !important;
    }

    #createTaskModal .task-modal-content form,
    #editTaskModal .task-modal-content form {
        min-height: 0 !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #createTaskModal .task-modal-scroll,
    #editTaskModal .task-modal-scroll {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
    }

    #createTaskModal .form-label,
    #editTaskModal .form-label,
    #createNoteModal .form-label,
    #editNoteModal .form-label {
        margin-bottom: 6px !important;
        line-height: 1.25 !important;
    }

    #createTaskModal .form-input,
    #createTaskModal .form-textarea,
    #createTaskModal .form-select,
    #editTaskModal .form-input,
    #editTaskModal .form-textarea,
    #editTaskModal .form-select,
    #createNoteModal .form-input,
    #createNoteModal .form-textarea,
    #createNoteModal .form-select,
    #editNoteModal .form-input,
    #editNoteModal .form-textarea,
    #editNoteModal .form-select {
        border-radius: 8px !important;
    }

    #createTaskModal #createTaskDescription,
    #editTaskModal #editTaskDescription,
    #createNoteModal .note-textarea,
    #editNoteModal .note-textarea {
        min-height: 64px !important;
        max-height: calc(80dvh - 180px) !important;
        overflow-y: hidden !important;
        resize: none !important;
    }

    #createTaskModal .copyable-field.has-scrollbar #createTaskDescription,
    #editTaskModal .copyable-field.has-scrollbar #editTaskDescription,
    #createNoteModal .copyable-field.has-scrollbar .note-textarea,
    #editNoteModal .copyable-field.has-scrollbar .note-textarea {
        overflow-y: auto !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
    }

    #createTaskModal .form-actions,
    #editTaskModal .form-actions {
        flex-shrink: 0 !important;
        margin-top: 14px !important;
        padding: 0 !important;
        border-top: 0 !important;
        background: transparent !important;
    }

    #createTaskModal .form-actions,
    #editTaskModal .form-actions {
        justify-content: center !important;
    }

    #createTaskModal .form-actions .btn,
    #editTaskModal .form-actions .btn {
        align-self: center !important;
        min-height: 40px !important;
        padding: 9px 16px !important;
        border-radius: 8px !important;
    }

    #createTaskModal .custom-select,
    #editTaskModal .custom-select,
    #createNoteModal .custom-select,
    #editNoteModal .custom-select {
        position: relative;
        width: 100%;
    }

    #createTaskModal .custom-select-native,
    #editTaskModal .custom-select-native,
    #createNoteModal .custom-select-native,
    #editNoteModal .custom-select-native,
    #createNoteModal .note-project-native,
    #editNoteModal .note-project-native {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        border: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    #createTaskModal .custom-select-trigger,
    #editTaskModal .custom-select-trigger,
    #createNoteModal .custom-select-trigger,
    #editNoteModal .custom-select-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 42px;
        padding: 9px 11px;
        border: 1px solid rgba(148, 163, 184, 0.38);
        border-radius: 8px;
        background: var(--bg-primary);
        color: var(--text-primary);
        font: inherit;
        font-size: 16px;
        line-height: 1.25;
        text-align: left;
    }

    #createTaskModal .custom-select.is-open .custom-select-trigger,
    #editTaskModal .custom-select.is-open .custom-select-trigger,
    #createNoteModal .custom-select.is-open .custom-select-trigger,
    #editNoteModal .custom-select.is-open .custom-select-trigger {
        border-color: rgba(79, 127, 216, 0.55);
        box-shadow: 0 0 0 3px rgba(79, 127, 216, 0.12);
    }

    #createTaskModal .custom-select-chevron,
    #editTaskModal .custom-select-chevron,
    #createNoteModal .custom-select-chevron,
    #editNoteModal .custom-select-chevron {
        flex: 0 0 auto;
        width: 9px;
        height: 9px;
        margin: -4px 3px 0 0;
        border-right: 2px solid var(--text-secondary);
        border-bottom: 2px solid var(--text-secondary);
        transform: rotate(45deg);
    }

    #createTaskModal .custom-select.is-open .custom-select-chevron,
    #editTaskModal .custom-select.is-open .custom-select-chevron,
    #createNoteModal .custom-select.is-open .custom-select-chevron,
    #editNoteModal .custom-select.is-open .custom-select-chevron {
        margin-top: 5px;
        border-color: var(--accent);
        transform: rotate(225deg);
    }

    #createTaskModal .custom-select-menu,
    #editTaskModal .custom-select-menu,
    #createNoteModal .custom-select-menu,
    #editNoteModal .custom-select-menu {
        position: absolute;
        z-index: 80;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        max-height: min(240px, 40dvh);
        overflow-y: auto;
        padding: 6px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg-primary);
        box-shadow: 0 16px 34px rgba(15, 23, 42, .16);
    }

    #createTaskModal .project-badge-picker.is-open .custom-select-menu,
    #editTaskModal .project-badge-picker.is-open .custom-select-menu,
    #createNoteModal .project-badge-picker.is-open .custom-select-menu,
    #editNoteModal .project-badge-picker.is-open .custom-select-menu {
        position: static;
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        max-height: none;
        overflow: visible;
        margin-top: 8px;
        padding: 10px;
        border: 1px solid rgba(148, 163, 184, 0.24);
        border-radius: 12px;
        background: rgba(148, 163, 184, 0.05);
    }

    #createTaskModal .custom-select-option,
    #editTaskModal .custom-select-option,
    #createNoteModal .custom-select-option,
    #editNoteModal .custom-select-option {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 38px;
        padding: 8px 10px;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: var(--text-primary);
        font: inherit;
        font-size: 15px;
        line-height: 1.25;
        text-align: left;
    }

    #createTaskModal .project-badge-picker .custom-select-option,
    #editTaskModal .project-badge-picker .custom-select-option,
    #createNoteModal .project-badge-picker .custom-select-option,
    #editNoteModal .project-badge-picker .custom-select-option {
        width: auto;
        min-height: 32px;
        padding: 6px 10px;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.58);
        color: var(--text-secondary);
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
    }

    #createTaskModal .custom-select-option:hover,
    #editTaskModal .custom-select-option:hover,
    #createNoteModal .custom-select-option:hover,
    #editNoteModal .custom-select-option:hover,
    #createTaskModal .custom-select-option[aria-selected="true"],
    #editTaskModal .custom-select-option[aria-selected="true"],
    #createNoteModal .custom-select-option[aria-selected="true"],
    #editNoteModal .custom-select-option[aria-selected="true"] {
        border-color: rgba(79, 127, 216, 0.32);
        background: rgba(79, 127, 216, 0.11);
        color: #4f7fd8;
    }
}

/* Task descriptions use the same internal-scroll behavior as note descriptions. */
@media (min-width: 769px) {
    #createTaskModal .task-modal-content form,
    #editTaskModal .task-modal-content form {
        overflow: visible;
    }

    #createTaskModal .task-modal-scroll,
    #editTaskModal .task-modal-scroll {
        flex: 0 1 auto;
        max-height: none;
        overflow: visible;
        padding-top: 0;
        padding-bottom: 0;
    }

    #createTaskModal .task-modal-content .form-group:has(#createTaskDescription),
    #editTaskModal .task-modal-content .form-group:has(#editTaskDescription) {
        min-height: 0;
    }

    #createTaskModal #createTaskDescription,
    #editTaskModal #editTaskDescription {
        height: auto !important;
        min-height: 96px;
        max-height: max(96px, calc(80dvh - 460px)) !important;
        overflow-y: hidden;
        resize: none;
        scrollbar-width: none;
        scrollbar-color: transparent transparent;
    }

    #createTaskModal .copyable-field.has-scrollbar #createTaskDescription,
    #editTaskModal .copyable-field.has-scrollbar #editTaskDescription {
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
    }

    #createTaskModal #createTaskDescription::-webkit-scrollbar,
    #editTaskModal #editTaskDescription::-webkit-scrollbar {
        display: none;
        width: 5px;
    }

    #createTaskModal .copyable-field.has-scrollbar #createTaskDescription::-webkit-scrollbar,
    #editTaskModal .copyable-field.has-scrollbar #editTaskDescription::-webkit-scrollbar {
        display: block;
    }

    #createTaskModal #createTaskDescription::-webkit-scrollbar-track,
    #editTaskModal #editTaskDescription::-webkit-scrollbar-track {
        background: transparent;
    }

    #createTaskModal #createTaskDescription::-webkit-scrollbar-thumb,
    #editTaskModal #editTaskDescription::-webkit-scrollbar-thumb {
        border: 1px solid transparent;
        border-radius: 999px;
        background-clip: padding-box;
        background-color: rgba(100, 116, 139, 0.42);
    }

    #createTaskModal .copyable-field.has-scrollbar #createTaskDescription + .field-copy-btn,
    #editTaskModal .copyable-field.has-scrollbar #editTaskDescription + .field-copy-btn {
        right: 18px;
    }
}

/* Keep the four task/note forms visually consistent on desktop. */
@media (min-width: 769px) {
    #createTaskModal .task-modal-content,
    #editTaskModal .task-modal-content,
    #createNoteModal .note-modal-content,
    #editNoteModal .note-modal-content {
        width: 80vw;
        max-width: none;
        height: auto;
        max-height: 80dvh;
        padding: 30px;
        overflow: hidden;
    }

    #createTaskModal .modal-header,
    #editTaskModal .modal-header,
    #createNoteModal .modal-header,
    #editNoteModal .modal-header {
        margin: 0 0 24px;
        line-height: 1.2;
    }

    #createTaskModal form,
    #editTaskModal form,
    #createNoteModal form,
    #editNoteModal form {
        display: flex;
        min-height: 0;
        flex-direction: column;
        flex: 0 1 auto;
    }

    #createTaskModal .task-title-project-row + .form-group,
    #editTaskModal .task-title-project-row + .form-group,
    #createNoteModal .note-title-project-row + .form-group,
    #editNoteModal .note-title-project-row + .form-group {
        margin-top: 24px;
    }

    #createTaskModal .form-label,
    #editTaskModal .form-label,
    #createNoteModal .form-label,
    #editNoteModal .form-label {
        margin-bottom: 8px;
        line-height: 1.25;
    }

    #createTaskModal .form-input,
    #createTaskModal .form-textarea,
    #createTaskModal .form-select,
    #editTaskModal .form-input,
    #editTaskModal .form-textarea,
    #editTaskModal .form-select,
    #createNoteModal .form-input,
    #createNoteModal .form-textarea,
    #createNoteModal .form-select,
    #editNoteModal .form-input,
    #editNoteModal .form-textarea,
    #editNoteModal .form-select {
        min-height: 44px;
    }

    #createTaskModal .form-actions,
    #editTaskModal .form-actions,
    #createNoteModal .form-actions,
    #editNoteModal .modal-footer {
        flex-shrink: 0;
        align-items: center;
        min-height: 40px;
        margin-top: 24px;
        padding-top: 0;
        padding-right: 0;
        border-top: 0;
        background: transparent;
    }

    #createTaskModal .form-actions .btn,
    #editTaskModal .form-actions .btn,
    #createNoteModal .form-actions .btn,
    #editNoteModal .modal-footer .btn {
        min-height: 40px;
        padding: 9px 16px;
    }

    #createTaskModal .task-modal-scroll,
    #editTaskModal .task-modal-scroll,
    #createNoteModal .note-modal-scroll,
    #editNoteModal .note-modal-scroll {
        min-width: 0;
        padding-top: 0;
        padding-bottom: 0;
        max-height: calc(80dvh - 190px);
    }
}

/* Desktop recurrence settings use the same floating treatment as the date calendar. */
@media (min-width: 769px) {
    #createTaskModal #createRecurringOptions,
    #editTaskModal #editCreateRecurringOptions {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: min(680px, calc(100vw - 24px)) !important;
        margin: 0 !important;
        z-index: 100 !important;
        box-shadow: 0 16px 34px rgba(15, 23, 42, .16), 0 0 0 1px rgba(148, 163, 184, .08);
    }
}

/* Final desktop date overlay: selecting a date does not reflow the task form. */
@media (min-width: 769px) {
    #createTaskModal .custom-date-picker.is-open .custom-date-menu,
    #editTaskModal .custom-date-picker.is-open .custom-date-menu {
        position: fixed !important;
        top: 0 !important;
        right: auto !important;
        left: 0 !important;
        width: 300px !important;
        margin-top: 0 !important;
        z-index: 100 !important;
    }
}

/* Final desktop override: task descriptions grow until the popup reaches 80dvh. */
@media (min-width: 769px) {
    #createTaskModal .task-modal-content,
    #editTaskModal .task-modal-content {
        height: auto !important;
        max-height: 80dvh !important;
        overflow: hidden !important;
    }

    #createTaskModal .task-modal-content form,
    #editTaskModal .task-modal-content form {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    #createTaskModal .task-modal-scroll,
    #editTaskModal .task-modal-scroll {
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #createTaskModal #createTaskDescription,
    #editTaskModal #editTaskDescription {
        height: 96px;
        min-height: 96px;
        max-height: none !important;
        overflow-y: hidden;
    }
}

/* Desktop task setup: compact buttons with dedicated centered pickers. */
@media (min-width: 769px) {
    #createTaskModal .task-attribute-button,
    #editTaskModal .task-attribute-button {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 44px;
        padding: 10px 14px;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 10px;
        background: rgba(148, 163, 184, 0.08);
        color: var(--text-secondary);
        font: inherit;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.25;
        text-align: left;
        cursor: pointer;
        transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
    }

    #createTaskModal .task-attribute-button:hover,
    #editTaskModal .task-attribute-button:hover {
        border-color: rgba(79, 127, 216, 0.42);
        background: rgba(79, 127, 216, 0.08);
        color: #356fc7;
    }

    #createTaskModal .task-attribute-button.is-active,
    #editTaskModal .task-attribute-button.is-active {
        border-color: rgba(79, 127, 216, 0.34);
        background: rgba(79, 127, 216, 0.12);
        color: #356fc7;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    #createTaskModal .task-title-project-row > .form-group:nth-child(2) .form-select,
    #editTaskModal .task-title-project-row > .form-group:nth-child(2) .form-select,
    #createTaskModal .task-date-repeat-row > .form-group:first-child > .form-input,
    #editTaskModal .task-date-repeat-row > .form-group:first-child > .form-input,
    #createTaskModal .task-attribute-native-control,
    #editTaskModal .task-attribute-native-control,
    #createTaskModal #createRecurringOptions,
    #editTaskModal #editCreateRecurringOptions {
        display: none !important;
    }

    #createTaskModal .task-date-repeat-row .task-repeat-group,
    #editTaskModal .task-date-repeat-row .task-repeat-group {
        display: block;
        min-height: 0;
    }

    #createTaskModal .task-date-repeat-row,
    #editTaskModal .task-date-repeat-row { align-items: start; }

    .task-setup-picker-modal {
        z-index: 1300;
        padding: 24px;
        background: rgba(15, 23, 42, 0.42);
    }

    .task-setup-picker-modal .task-setup-picker-content {
        position: relative;
        width: min(640px, calc(100vw - 48px));
        max-width: 640px;
        min-height: 0;
        max-height: min(640px, calc(100dvh - 48px));
        margin: 0;
        padding: 28px;
        overflow: auto;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 14px;
        background: var(--surface, #fff);
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
    }

    .task-setup-picker-modal .modal-header { margin: 0 44px 22px 0; font-size: 24px; }
    .task-setup-project-list { display: flex; flex-wrap: wrap; gap: 10px; }

    .task-setup-project-chip {
        min-height: 38px;
        padding: 8px 12px;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 9px;
        background: rgba(148, 163, 184, 0.06);
        color: var(--text-secondary);
        font: inherit;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
    }

    .task-setup-project-chip:hover,
    .task-setup-project-chip.is-selected {
        border-color: rgba(79, 127, 216, 0.38);
        background: rgba(79, 127, 216, 0.12);
        color: #356fc7;
    }

    .task-setup-calendar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 16px;
        color: var(--text-primary);
        font-size: 18px;
    }

    .task-setup-calendar-head > span { display: flex; gap: 6px; }
    .task-setup-calendar-nav {
        width: 34px;
        height: 34px;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 8px;
        background: rgba(148, 163, 184, 0.06);
        color: #356fc7;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
    }

    .task-setup-calendar-weekdays,
    .task-setup-calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 6px;
        text-align: center;
    }

    .task-setup-calendar-weekdays {
        margin-bottom: 8px;
        color: var(--text-secondary);
        font-size: 13px;
        font-weight: 700;
    }

    .task-setup-calendar-day {
        aspect-ratio: 1;
        min-height: 34px;
        border: 1px solid transparent;
        border-radius: 8px;
        background: transparent;
        color: var(--text-primary);
        font: inherit;
        cursor: pointer;
    }

    .task-setup-calendar-day:hover,
    .task-setup-calendar-day.is-selected {
        border-color: rgba(79, 127, 216, 0.36);
        background: rgba(79, 127, 216, 0.13);
        color: #356fc7;
    }

    .task-setup-calendar-day.is-outside { color: rgba(100, 116, 139, 0.46); }
    .task-setup-calendar-day.is-today:not(.is-selected) { box-shadow: inset 0 0 0 1px rgba(79, 127, 216, 0.36); }
    .task-setup-calendar-footer,
    .task-setup-picker-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

    .task-setup-calendar-footer button {
        border: 0;
        background: transparent;
        color: #356fc7;
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

    .task-setup-repeat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .task-setup-repeat-grid .form-group { margin-bottom: 0; }
}

@media (max-width: 768px) {
    #createTaskModal .task-attribute-button,
    #editTaskModal .task-attribute-button,
    #createTaskModal .task-repeat-group > .task-attribute-label,
    #editTaskModal .task-repeat-group > .task-attribute-label {
        display: none;
    }
}

/* Desktop create-task quick setup: project, date and repeat share one equal row. */
@media (min-width: 769px) {
    #createTaskModal .task-title-project-row {
        grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
        align-items: end;
    }

    #createTaskModal .task-start-immediately-group {
        display: flex;
        align-items: center;
        min-height: 44px;
        margin-bottom: 0;
    }

    #createTaskModal .task-start-immediately-toggle {
        min-height: 44px;
        margin: 0 !important;
        white-space: nowrap;
    }

    #createTaskModal .task-date-repeat-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 16px;
    }

    #createTaskModal .task-date-repeat-row .task-project-group .form-select,
    #createTaskModal .task-date-repeat-row .task-date-group > .form-input {
        display: none !important;
    }

    /* Editing follows the same compact two-row task setup as creation. */
    #editTaskModal .task-title-project-row {
        grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
        align-items: end;
    }

    #editTaskModal .task-start-immediately-group {
        display: flex;
        align-items: center;
        min-height: 44px;
        margin-bottom: 0;
    }

    #editTaskModal .task-start-immediately-toggle {
        min-height: 44px;
        margin: 0 !important;
        white-space: nowrap;
    }

    #editTaskModal .task-date-repeat-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 16px;
    }

    #editTaskModal .task-date-repeat-row .task-project-group .form-select,
    #editTaskModal .task-date-repeat-row .task-date-group > .form-input {
        display: none !important;
    }

    #editTaskModal .form-actions {
        justify-content: center;
    }

    #editTaskModal .form-actions .btn-primary,
    #editNoteModal .modal-footer .btn-primary {
        order: 1;
    }

    #editTaskModal .form-actions .btn-danger,
    #editNoteModal .modal-footer .btn-danger {
        order: 2;
    }
}

/* Moving the project control is desktop-only; preserve the mobile form sequence. */
@media (max-width: 768px) {
    /* Creation uses the same project/date/repeat pickers as desktop. */
    #createTaskModal .task-date-repeat-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }

    #createTaskModal .task-date-repeat-row > .task-project-group { order: 1 !important; }
    #createTaskModal .task-date-repeat-row > .task-date-group { order: 2 !important; }
    #createTaskModal .task-date-repeat-row > .task-repeat-group { order: 3 !important; }

    #createTaskModal .task-attribute-label,
    #createTaskModal .task-attribute-native-control,
    #createTaskModal .task-project-group > .form-select,
    #createTaskModal .task-date-group > .form-input,
    #createTaskModal #createRecurringOptions {
        display: none !important;
    }

    #createTaskModal .task-attribute-button {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 44px !important;
        padding: 10px 14px !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 10px !important;
        background: rgba(148, 163, 184, 0.08) !important;
        color: var(--text-secondary) !important;
        font: inherit !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        text-align: left !important;
    }

    #createTaskModal .task-setup-picker-modal {
        z-index: 1300 !important;
        padding: 5px !important;
    }

    #taskSetupPickerModal {
        padding: 5px !important;
    }

    #taskSetupPickerModal .task-setup-picker-content {
        width: 100% !important;
        max-width: none !important;
        max-height: calc(100dvh - 10px) !important;
        padding: 14px !important;
        overflow-y: auto !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 12px !important;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12)),
            color-mix(in srgb, var(--bg-secondary) 92%, white) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.1) !important;
    }

    #taskSetupPickerModal .modal-header {
        margin: 0 42px 14px 0 !important;
        font-size: 20px !important;
    }

    #taskSetupPickerModal .task-setup-project-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    #taskSetupPickerModal .task-setup-project-chip {
        min-height: 34px !important;
        padding: 7px 10px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
    }

    #taskSetupPickerModal .task-setup-repeat-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    #taskSetupPickerModal .task-setup-calendar-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
        font-size: 16px !important;
    }

    #taskSetupPickerModal .task-setup-calendar-head > span {
        display: flex !important;
        gap: 6px !important;
    }

    #taskSetupPickerModal .task-setup-calendar-nav {
        width: 32px !important;
        height: 32px !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 8px !important;
        background: rgba(148, 163, 184, 0.06) !important;
        color: #356fc7 !important;
        font-size: 22px !important;
        line-height: 1 !important;
    }

    #taskSetupPickerModal .task-setup-calendar-weekdays,
    #taskSetupPickerModal .task-setup-calendar-grid {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 4px !important;
        text-align: center !important;
    }

    #taskSetupPickerModal .task-setup-calendar-weekdays {
        margin-bottom: 4px !important;
        color: var(--text-secondary) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    #taskSetupPickerModal .task-setup-calendar-day {
        aspect-ratio: 1 !important;
        min-height: 34px !important;
        border: 1px solid transparent !important;
        border-radius: 7px !important;
        background: transparent !important;
        color: var(--text-primary) !important;
        font: inherit !important;
        font-size: 14px !important;
    }

    #taskSetupPickerModal .task-setup-calendar-footer {
        display: flex !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-top: 12px !important;
    }

    #taskSetupPickerModal .task-setup-calendar-footer button {
        border: 0 !important;
        background: transparent !important;
        color: #356fc7 !important;
        font: inherit !important;
        font-weight: 700 !important;
    }

    #taskSetupPickerModal .task-setup-picker-actions {
        justify-content: center !important;
        margin-top: 14px !important;
    }
}

@media (max-width: 768px) {
    #createTaskModal .task-start-immediately-group {
        display: none !important;
    }

    #editTaskModal .task-start-immediately-group {
        display: none !important;
    }

    #createTaskModal .task-date-repeat-row > .task-project-group { order: 2; }
    #createTaskModal .task-date-repeat-row > .task-date-group { order: 4; }
    #editTaskModal .task-date-repeat-row > .task-project-group { order: 2; }
    #editTaskModal .task-date-repeat-row > .task-date-group { order: 4; }
    #createTaskModal .task-date-repeat-row > .task-repeat-group { order: 5; }
}

/* Desktop task setup popups: compact calendar and a quiet primary action. */
@media (min-width: 769px) {
    .task-setup-picker-modal[data-picker-type="date"] .task-setup-picker-content {
        width: min(396px, calc(100vw - 48px));
        padding: 22px;
    }

    .task-setup-picker-modal[data-picker-type="date"] .modal-header {
        margin-bottom: 16px;
        font-size: 21px;
    }

    .task-setup-picker-modal[data-picker-type="date"] .task-setup-calendar-head {
        gap: 10px;
        margin-bottom: 10px;
        font-size: 16px;
    }

    .task-setup-picker-modal[data-picker-type="date"] .task-setup-calendar-nav {
        width: 30px;
        height: 30px;
        font-size: 21px;
    }

    .task-setup-picker-modal[data-picker-type="date"] .task-setup-calendar-weekdays,
    .task-setup-picker-modal[data-picker-type="date"] .task-setup-calendar-grid {
        gap: 4px;
    }

    .task-setup-picker-modal[data-picker-type="date"] .task-setup-calendar-weekdays {
        margin-bottom: 4px;
        font-size: 12px;
    }

    .task-setup-picker-modal[data-picker-type="date"] .task-setup-calendar-day {
        min-height: 30px;
        border-radius: 7px;
        font-size: 14px;
    }

    .task-setup-picker-modal[data-picker-type="date"] .task-setup-calendar-footer {
        margin-top: 14px;
    }

    .task-setup-picker-actions .task-setup-apply-btn {
        min-height: 40px;
        padding: 9px 16px;
        border: 1px solid rgba(79, 127, 216, 0.3);
        border-radius: 9px;
        background: rgba(79, 127, 216, 0.1);
        color: #4f7fd8;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
    }

    .task-setup-picker-actions .task-setup-apply-btn:hover {
        border-color: rgba(79, 127, 216, 0.44);
        background: rgba(79, 127, 216, 0.15);
        color: #356fc7;
    }
}

.modal-close-btn.shopping-desktop-modal-close,
.shopping-desktop-delete-copy {
    display: none;
}

/* Final mobile picker overrides: prevent native button chrome and restore the close icon. */
@media (max-width: 768px) {
    #taskSetupPickerModal .modal-close-btn::before,
    #taskSetupPickerModal .modal-close-btn::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 20px !important;
        height: 2px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: currentColor !important;
        transform-origin: center !important;
    }

    #taskSetupPickerModal .modal-close-btn::before {
        transform: translate(-50%, -50%) rotate(45deg) !important;
    }

    #taskSetupPickerModal .modal-close-btn::after {
        transform: translate(-50%, -50%) rotate(-45deg) !important;
    }

    #taskSetupPickerModal .task-setup-project-chip {
        appearance: none !important;
        -webkit-appearance: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.08)),
            rgba(148, 163, 184, 0.06) !important;
        color: var(--text-secondary) !important;
        font-family: inherit !important;
        line-height: 1.2 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
    }

    #taskSetupPickerModal .task-setup-project-chip:hover,
    #taskSetupPickerModal .task-setup-project-chip:focus-visible,
    #taskSetupPickerModal .task-setup-project-chip.is-selected {
        border-color: rgba(79, 127, 216, 0.38) !important;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.08)),
            rgba(79, 127, 216, 0.12) !important;
        color: #356fc7 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 14px rgba(79, 127, 216, 0.08) !important;
    }
}

/* Mobile project picker: content-sized dialog with the same quiet controls as desktop. */
@media (max-width: 768px) {
    #taskSetupPickerModal {
        align-items: center !important;
        justify-content: center !important;
        padding: 5px !important;
        overflow: hidden !important;
    }

    #taskSetupPickerModal .task-setup-picker-content {
        box-sizing: border-box !important;
        width: calc(100vw - 10px) !important;
        max-width: calc(100vw - 10px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 10px) !important;
        margin: 0 !important;
        padding: 18px !important;
        overflow-y: auto !important;
        border-radius: 12px !important;
    }

    #taskSetupPickerModal .modal-close-btn {
        top: 14px !important;
        right: 14px !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 8px !important;
        font-size: 0 !important;
    }

    #taskSetupPickerModal .modal-close-btn::before,
    #taskSetupPickerModal .modal-close-btn::after {
        width: 20px !important;
        height: 2px !important;
        border-radius: 999px !important;
    }

    #taskSetupPickerModal .task-setup-project-list {
        gap: 10px !important;
    }

    #taskSetupPickerModal .task-setup-project-chip {
        min-height: 38px !important;
        padding: 8px 12px !important;
        border-radius: 9px !important;
        background: rgba(148, 163, 184, 0.06) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
    }
}

/* Desktop shopping actions and dialogs mirror the habits interaction pattern. */
@media (min-width: 769px) {
    .shopping-actions-popover {
        position: fixed;
        z-index: 1000;
        display: grid;
        min-width: 156px;
        gap: 6px;
        padding: 8px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 10px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.06)),
            var(--bg-primary);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 10px 24px rgba(15, 23, 42, 0.12);
    }

    .shopping-actions-popover[hidden] {
        display: none;
    }

    .shopping-actions-popover .shopping-inline-action-btn {
        min-height: 36px;
        padding: 8px 12px;
        border: 1px solid rgba(79, 127, 216, 0.16);
        border-radius: 8px;
        background-color: rgba(79, 127, 216, 0.1);
        color: #4f7fd8;
        cursor: pointer;
        font: inherit;
        font-size: 13px;
        font-weight: 800;
    }

    .shopping-actions-popover .shopping-inline-action-btn.danger {
        border-color: rgba(217, 111, 114, 0.16);
        background-color: rgba(217, 111, 114, 0.1);
        color: #d96f72;
    }

    #editShoppingModal,
    #deleteShoppingModal {
        padding: 24px;
        background-color: rgba(15, 23, 42, 0.48);
    }

    #editShoppingModal .shopping-edit-modal-content {
        width: min(560px, calc(100vw - 48px));
        max-width: 560px;
        height: auto;
        min-height: 0;
        max-height: min(80dvh, 680px);
        padding: 28px;
        overflow-y: auto;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 12px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12)),
            color-mix(in srgb, var(--bg-secondary) 92%, white);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.1);
    }

    #editShoppingModal .modal-header {
        margin: 0 52px 22px 0;
        color: var(--text-primary);
        font-size: 22px;
        line-height: 1.25;
    }

    #editShoppingModal form {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr);
        gap: 14px;
    }

    #editShoppingModal .form-group {
        margin: 0;
    }

    #editShoppingModal .form-group:has(#editShoppingNote),
    #editShoppingModal .shopping-edit-actions {
        grid-column: 1 / -1;
    }

    #editShoppingModal .form-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    #editShoppingModal .form-input,
    #editShoppingModal .form-textarea {
        width: 100%;
        padding: 11px 14px;
        border: 1px solid rgba(148, 163, 184, 0.38);
        border-radius: 8px;
        background-color: var(--bg-primary);
        color: var(--text-primary);
        font-size: 15px;
    }

    #editShoppingModal .form-input {
        min-height: 50px;
    }

    #editShoppingModal .form-textarea {
        min-height: 96px;
        resize: vertical;
    }

    #editShoppingModal .form-input:focus,
    #editShoppingModal .form-textarea:focus {
        border-color: rgba(192, 138, 58, 0.58);
        box-shadow: 0 0 0 3px rgba(192, 138, 58, 0.12);
    }

    #editShoppingModal .form-input::placeholder,
    #editShoppingModal .form-textarea::placeholder {
        color: var(--text-secondary);
        opacity: 0.72;
    }

    #editShoppingModal .shopping-edit-actions {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding: 4px 0 0;
        margin: 0;
        border: 0;
        background: transparent;
    }

    #editShoppingModal .shopping-modal-cancel {
        display: none;
    }

    #editShoppingModal .shopping-edit-actions .btn-primary {
        min-width: 126px;
        min-height: 40px;
        padding: 9px 18px;
        border: 1px solid rgba(192, 138, 58, 0.28);
        border-radius: 8px;
        background-color: rgba(192, 138, 58, 0.11);
        color: #c08a3a;
        box-shadow: none;
    }

    #editShoppingModal .shopping-edit-actions .btn-primary:hover {
        border-color: rgba(192, 138, 58, 0.44);
        background-color: rgba(192, 138, 58, 0.16);
        color: #a8752e;
    }

    #editShoppingModal .shopping-desktop-modal-close,
    #deleteShoppingModal .shopping-desktop-modal-close {
        position: absolute;
        display: inline-flex;
        width: 36px;
        height: 36px;
        border: 1px solid rgba(217, 111, 114, 0.22);
        border-radius: 8px;
        background-color: rgba(217, 111, 114, 0.1);
        color: #d96f72;
        font-size: 0;
    }

    #editShoppingModal .shopping-desktop-modal-close::before,
    #editShoppingModal .shopping-desktop-modal-close::after,
    #deleteShoppingModal .shopping-desktop-modal-close::before,
    #deleteShoppingModal .shopping-desktop-modal-close::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 2px;
        border-radius: 999px;
        background-color: currentColor;
        content: "";
        transform-origin: center;
    }

    #editShoppingModal .shopping-desktop-modal-close::before,
    #deleteShoppingModal .shopping-desktop-modal-close::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    #editShoppingModal .shopping-desktop-modal-close::after,
    #deleteShoppingModal .shopping-desktop-modal-close::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    #editShoppingModal .shopping-desktop-modal-close:hover,
    #deleteShoppingModal .shopping-desktop-modal-close:hover {
        border-color: rgba(217, 111, 114, 0.38);
        background-color: rgba(217, 111, 114, 0.16);
        color: #d96f72;
    }

    #deleteShoppingModal .shopping-delete-modal-content {
        width: min(420px, calc(100vw - 48px));
        max-width: 420px;
        height: auto;
        min-height: 0;
        padding: 28px;
        overflow: visible;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 12px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12)),
            color-mix(in srgb, var(--bg-secondary) 92%, white);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 26px rgba(15, 23, 42, 0.1);
        text-align: center;
    }

    #deleteShoppingModal .shopping-delete-title {
        padding: 0;
        margin: 0 48px;
    }

    #deleteShoppingModal .shopping-delete-title h2 {
        margin: 0;
        color: var(--text-primary);
        font-size: 22px;
        line-height: 1.25;
    }

    #deleteShoppingModal .shopping-desktop-delete-copy {
        display: block;
        margin: 10px 0 0;
        color: var(--text-secondary);
        font-size: 14px;
    }

    #deleteShoppingModal .shopping-delete-actions {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding: 0;
        margin: 20px 0 0;
        border: 0;
        background: transparent;
    }

    #deleteShoppingModal .shopping-delete-actions .btn {
        min-width: 112px;
        min-height: 40px;
        padding: 9px 16px;
        border-radius: 8px;
        box-shadow: none;
    }

    #deleteShoppingModal .shopping-delete-actions .btn-danger {
        border: 1px solid rgba(217, 111, 114, 0.28);
        background-color: rgba(217, 111, 114, 0.1);
        color: #d96f72;
    }

    #deleteShoppingModal .shopping-delete-actions .btn-secondary {
        border: 1px solid rgba(148, 163, 184, 0.3);
        background-color: rgba(148, 163, 184, 0.1);
        color: var(--text-secondary);
    }

    #deleteShoppingModal .shopping-delete-option {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
        color: var(--text-secondary);
        font-size: 13px;
    }

    #deleteShoppingModal .shopping-delete-option input {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: #d96f72;
    }
}

/* Desktop settings page aligned with the restrained application card language. */
@media (min-width: 769px) {
    .app-container:has(.settings-content) .app-layout {
        gap: 18px;
        padding: 18px;
    }

    .app-container:has(.settings-content) .settings-sidebar {
        width: 252px;
        top: 18px;
        padding: 16px;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 8px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08)),
            color-mix(in srgb, var(--bg-secondary) 94%, white);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 10px 26px rgba(15, 23, 42, 0.06);
    }

    .app-container:has(.settings-content) .settings-sidebar .sidebar-header {
        padding: 2px 4px 14px;
        margin: 0 0 8px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    }

    .app-container:has(.settings-content) .settings-sidebar .sidebar-title {
        margin: 0;
        color: var(--text-primary);
        font-size: 18px;
        line-height: 1.2;
    }

    .app-container:has(.settings-content) .settings-nav {
        gap: 6px;
        max-height: none;
        overflow: visible;
    }

    .app-container:has(.settings-content) .settings-nav-item {
        --settings-nav-color: var(--color-blue);
        --settings-nav-bg: rgba(79, 127, 216, 0.09);
        --settings-nav-border: rgba(79, 127, 216, 0.2);
        min-height: 46px;
        gap: 10px;
        padding: 5px 10px 5px 6px;
        border: 1px solid transparent;
        border-radius: 8px;
        background: transparent;
        color: var(--text-secondary);
        box-shadow: none;
        font: inherit;
        font-size: 14px;
        font-weight: 750;
        text-decoration: none;
        transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    }

    .app-container:has(.settings-content) .settings-nav-item[data-section="confirmations"] {
        --settings-nav-color: var(--color-green);
        --settings-nav-bg: rgba(90, 169, 141, 0.1);
        --settings-nav-border: rgba(90, 169, 141, 0.2);
    }

    .app-container:has(.settings-content) .settings-nav-item[data-section="profile"] {
        --settings-nav-color: var(--color-purple);
        --settings-nav-bg: rgba(155, 120, 200, 0.1);
        --settings-nav-border: rgba(155, 120, 200, 0.2);
    }

    .app-container:has(.settings-content) .settings-nav-item[data-section="advanced"] {
        --settings-nav-color: var(--color-amber);
        --settings-nav-bg: rgba(192, 138, 58, 0.1);
        --settings-nav-border: rgba(192, 138, 58, 0.2);
    }

    .app-container:has(.settings-content) .settings-nav-item[href="/admin"],
    .app-container:has(.settings-content) .settings-nav-danger {
        --settings-nav-color: var(--color-red);
        --settings-nav-bg: rgba(217, 111, 114, 0.09);
        --settings-nav-border: rgba(217, 111, 114, 0.2);
    }

    .app-container:has(.settings-content) .settings-nav-icon {
        display: inline-grid;
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        place-items: center;
        overflow: hidden;
        border: 1px solid var(--settings-nav-border);
        border-radius: 8px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.05)),
            color-mix(in srgb, var(--settings-nav-color) 13%, transparent);
        color: var(--settings-nav-color);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
    }

    .app-container:has(.settings-content) .settings-nav-icon .bi-icon {
        --bi-size: 19px;
        color: inherit;
    }

    .app-container:has(.settings-content) .settings-nav-item:hover {
        border-color: var(--settings-nav-border);
        background-color: var(--settings-nav-bg);
        color: var(--settings-nav-color);
        box-shadow: none;
    }

    .app-container:has(.settings-content) .settings-nav-item.active {
        border: 2px solid color-mix(in srgb, var(--settings-nav-color) 74%, var(--settings-nav-border));
        padding: 4px 9px 4px 5px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.06)),
            var(--settings-nav-bg);
        color: var(--settings-nav-color);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 8px 18px color-mix(in srgb, var(--settings-nav-color) 12%, transparent);
    }

    .app-container:has(.settings-content) .settings-nav-item.active .settings-nav-icon,
    .app-container:has(.settings-content) .settings-nav-item.active .bi-icon {
        color: currentColor;
    }

    .app-container:has(.settings-content) .settings-logout-form {
        padding-top: 8px;
        margin-top: 6px;
        border-top: 1px solid rgba(148, 163, 184, 0.2);
    }

    .app-container:has(.settings-content) .settings-content {
        min-width: 0;
    }

    .app-container:has(.settings-content) .settings-content > .section:not(.settings-panel),
    .app-container:has(.settings-content) .settings-panel {
        padding: 24px;
        margin: 0 0 18px;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 8px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08)),
            color-mix(in srgb, var(--bg-secondary) 94%, white);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 10px 26px rgba(15, 23, 42, 0.06);
    }

    .app-container:has(.settings-content) .settings-panel > .section-header {
        min-height: 50px;
        padding: 0 0 18px;
        margin: 0 0 16px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    }

    .app-container:has(.settings-content) .settings-panel .section-title {
        color: var(--text-primary);
        font-size: 22px;
        line-height: 1.2;
    }

    .app-container:has(.settings-content) .settings-description {
        margin: 4px 0 0;
        color: var(--text-secondary);
        font-size: 13px;
        line-height: 1.4;
    }

    .app-container:has(.settings-content) .settings-list {
        gap: 10px;
    }

    .app-container:has(.settings-content) .settings-row {
        min-height: 70px;
        padding: 12px 14px;
        border: 1px solid rgba(148, 163, 184, 0.26);
        border-radius: 8px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.05)),
            var(--bg-primary);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54);
    }

    .app-container:has(.settings-content) .settings-row:hover {
        border-color: rgba(79, 127, 216, 0.3);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 8px 20px rgba(15, 23, 42, 0.06);
    }

    .app-container:has(.settings-content) .settings-row > div:first-child {
        min-width: 0;
    }

    .app-container:has(.settings-content) .settings-row-title {
        color: var(--text-primary);
        font-size: 15px;
        font-weight: 800;
        line-height: 1.3;
    }

    .app-container:has(.settings-content) .settings-row-description {
        margin-top: 3px;
        color: var(--text-secondary);
        font-size: 12px;
        line-height: 1.35;
    }

    .app-container:has(.settings-content) .btn,
    .app-container:has(.settings-content) .avatar-file-input {
        min-height: 38px;
        padding: 8px 13px;
        border: 1px solid rgba(148, 163, 184, 0.24);
        border-radius: 8px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.06)),
            rgba(148, 163, 184, 0.08);
        color: var(--text-secondary);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
        font-size: 13px;
        font-weight: 800;
        transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }

    .app-container:has(.settings-content) .btn:hover,
    .app-container:has(.settings-content) .avatar-file-input:hover {
        border-color: rgba(148, 163, 184, 0.4);
        color: var(--text-primary);
        transform: translateY(-1px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 8px 18px rgba(15, 23, 42, 0.06);
    }

    .app-container:has(.settings-content) .btn-primary {
        border-color: rgba(79, 127, 216, 0.24);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.05)),
            rgba(79, 127, 216, 0.1);
        color: #4f7fd8;
    }

    .app-container:has(.settings-content) .btn-danger {
        border-color: rgba(217, 111, 114, 0.24);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.05)),
            rgba(217, 111, 114, 0.1);
        color: #d96f72;
    }

    .app-container:has(.settings-content) .settings-btn-with-icon,
    .app-container:has(.settings-content) .avatar-file-input {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
    }

    .app-container:has(.settings-content) .settings-btn-with-icon .bi-icon,
    .app-container:has(.settings-content) .avatar-file-input .bi-icon {
        --bi-size: 15px;
        flex: 0 0 auto;
    }

    .app-container:has(.settings-content) .settings-segmented {
        min-width: 238px;
        padding: 4px;
        border: 1px solid rgba(148, 163, 184, 0.24);
        border-radius: 8px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.04)),
            rgba(148, 163, 184, 0.08);
    }

    .app-container:has(.settings-content) .settings-segment {
        flex: 1;
        min-height: 34px;
        padding: 7px 12px;
        border: 1px solid transparent;
        border-radius: 6px;
        color: var(--text-secondary);
        font-size: 13px;
    }

    .app-container:has(.settings-content) .settings-segment:hover {
        color: #4f7fd8;
    }

    .app-container:has(.settings-content) .settings-segment.active {
        border-color: rgba(79, 127, 216, 0.24);
        background: rgba(79, 127, 216, 0.1);
        color: #4f7fd8;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    .app-container:has(.settings-content) .profile-inline-form {
        gap: 8px;
    }

    .app-container:has(.settings-content) .profile-name-input {
        width: min(320px, 34vw);
        min-height: 42px;
        padding: 9px 12px;
        border: 1px solid rgba(148, 163, 184, 0.3);
        border-radius: 8px;
        background-color: var(--bg-primary);
        color: var(--text-primary);
        font-size: 14px;
    }

    .app-container:has(.settings-content) .profile-name-input:focus {
        border-color: rgba(79, 127, 216, 0.52);
        box-shadow: 0 0 0 3px rgba(79, 127, 216, 0.11);
    }

    .app-container:has(.settings-content) .profile-avatar-row {
        display: grid;
        grid-template-columns: minmax(210px, 1fr) auto auto;
        align-items: center;
    }

    .app-container:has(.settings-content) .avatar-settings-form {
        gap: 8px;
        flex-wrap: nowrap;
    }

    .app-container:has(.settings-content) .avatar-preview {
        width: 48px;
        height: 48px;
        border: 1px solid rgba(155, 120, 200, 0.24);
        border-radius: 8px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.05)),
            rgba(155, 120, 200, 0.09);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    .app-container:has(.settings-content) .avatar-file-input {
        border-style: solid;
        cursor: pointer;
    }

    .app-container:has(.settings-content) .avatar-delete-form {
        margin-left: 0;
    }

    .app-container:has(.settings-content) .settings-panel[data-section-panel="advanced"] .empty-state {
        padding: 52px 24px;
        border: 1px dashed rgba(148, 163, 184, 0.28);
        border-radius: 8px;
        background: rgba(148, 163, 184, 0.04);
    }

    .settings-toast {
        position: fixed;
        right: 22px;
        bottom: 22px;
        z-index: 1000;
        min-width: 220px;
        padding: 12px 16px;
        border: 1px solid rgba(90, 169, 141, 0.26);
        border-radius: 8px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.06)),
            color-mix(in srgb, var(--bg-secondary) 92%, rgba(90, 169, 141, 0.1));
        color: #5aa98d;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 12px 28px rgba(15, 23, 42, 0.12);
        font-size: 14px;
        font-weight: 800;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .app-container:has(.settings-content) .settings-sidebar {
        width: 220px;
    }

    .app-container:has(.settings-content) .profile-avatar-row {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .app-container:has(.settings-content) .profile-avatar-row {
        display: grid;
    }

    .app-container:has(.settings-content) .profile-inline-form,
    .app-container:has(.settings-content) .avatar-settings-form {
        justify-content: flex-start;
    }

    .app-container:has(.settings-content) .profile-name-input {
        width: min(100%, 420px);
    }
}

@media (max-width: 768px) {
    .profile-location-form .profile-name-input {
        width: 100% !important;
    }

    /* The create-task dialog should size to its fields instead of filling the viewport. */
    #createTaskModal .task-modal-content {
        align-self: center !important;
        height: auto !important;
        max-height: calc(100dvh - 10px) !important;
    }

    #createTaskModal .task-modal-content form {
        flex: 0 1 auto !important;
    }

    #createTaskModal .task-modal-scroll {
        flex: 0 1 auto !important;
    }

    #createTaskModal .form-actions .btn {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 120px !important;
    }
}

@media (max-width: 768px) {
    /* Keep task setup controls below the description in a compact two-column grid. */
    #createTaskModal .task-modal-scroll {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-areas:
            "title title"
            "description description"
            "project date"
            "repeat start"
            "recurring recurring" !important;
        gap: 10px !important;
        flex: 0 1 auto !important;
    }

    #createTaskModal .task-title-project-row,
    #createTaskModal .task-date-repeat-row {
        display: contents !important;
    }

    #createTaskModal .task-title-project-row > .form-group:first-child {
        grid-area: title !important;
        margin: 0 !important;
    }

    #createTaskModal .task-start-immediately-group {
        display: flex !important;
        align-items: center !important;
        grid-area: start !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #createTaskModal .task-start-immediately-toggle {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 44px !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    #createTaskModal .task-date-repeat-row > .task-project-group {
        grid-area: project !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #createTaskModal .task-date-repeat-row > .task-date-group {
        grid-area: date !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #createTaskModal .task-date-repeat-row > .task-repeat-group {
        grid-area: repeat !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #createTaskModal .task-modal-scroll > .form-group:has(#createTaskDescription) {
        grid-area: description !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #createTaskModal #createRecurringOptions {
        grid-area: recurring !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
}

@media (max-width: 768px) {
    /* Match the mobile project actions menu to its desktop visual treatment. */
    .app-container:has(.tasks-layout) .tasks-layout .tasks-sidebar {
        border-radius: 0 !important;
    }

    .app-container:has(.tasks-layout) .archived-project-item {
        opacity: 1;
    }

    .app-container:has(.tasks-layout) .archived-project-item > .project-color,
    .app-container:has(.tasks-layout) .archived-project-item > .project-name,
    .app-container:has(.tasks-layout) .archived-project-item > .project-count {
        opacity: 0.72;
    }

    .app-container:has(.tasks-layout) .archived-project-item .project-actions,
    .app-container:has(.tasks-layout) .archived-project-item .project-action-btn,
    .app-container:has(.tasks-layout) .archived-project-item .project-action-menu,
    .app-container:has(.tasks-layout) .archived-project-item .project-action-menu-btn {
        opacity: 1;
    }

    .app-container:has(.tasks-layout) .project-action-menu {
        opacity: 1;
        background: var(--bg-secondary) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .app-container:has(.tasks-layout) .project-action-menu-btn,
    [data-theme="dark"] .app-container:has(.tasks-layout) .project-action-menu-btn {
        border: 1px solid transparent !important;
        background: var(--bg-primary) !important;
        color: var(--text-primary) !important;
        box-shadow: none !important;
        opacity: 1;
        font-weight: 700;
        transform: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .app-container:has(.tasks-layout) .project-action-menu-btn.archive {
        color: var(--color-amber, #c08a3a) !important;
    }

    .app-container:has(.tasks-layout) .project-action-menu-btn.restore {
        color: var(--color-green, #5aa98d) !important;
    }

    .app-container:has(.tasks-layout) .project-action-menu-btn.danger {
        color: var(--color-red, #d96f72) !important;
    }

    .app-container:has(.tasks-layout) .project-action-menu-btn:hover,
    [data-theme="dark"] .app-container:has(.tasks-layout) .project-action-menu-btn:hover {
        border-color: transparent !important;
        background: var(--bg-tertiary) !important;
        box-shadow: none !important;
        transform: none;
    }
}

/* Final task-page typography guard: legacy component rules must use the shared scale. */
.app-container:has(.tasks-layout) .tasks-layout .section-title {
    font-size: var(--font-size-section-title) !important;
    font-weight: var(--font-weight-extra-bold) !important;
    line-height: var(--line-height-tight) !important;
}

.app-container:has(.tasks-layout) .tasks-layout .task-title,
.app-container:has(.tasks-layout) .tasks-layout .note-title {
    font-size: var(--font-size-card-title) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: var(--line-height-ui) !important;
}

.app-container:has(.tasks-layout) .tasks-layout .task-description,
.app-container:has(.tasks-layout) .tasks-layout .note-content,
.app-container:has(.tasks-layout) .tasks-layout .empty-state-text,
.app-container:has(.tasks-layout) .tasks-layout .loading {
    font-size: var(--font-size-body) !important;
    font-weight: var(--font-weight-regular) !important;
    line-height: var(--line-height-body) !important;
}

.app-container:has(.tasks-layout) .tasks-layout .task-meta,
.app-container:has(.tasks-layout) .tasks-layout .project-name {
    font-size: var(--font-size-small) !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: var(--line-height-ui) !important;
}

.app-container:has(.tasks-layout) .tasks-layout .task-meta > span,
.app-container:has(.tasks-layout) .tasks-layout .task-recurrence,
.app-container:has(.tasks-layout) .tasks-layout .task-overdue,
.app-container:has(.tasks-layout) .tasks-layout .task-date,
.app-container:has(.tasks-layout) .tasks-layout .note-project,
.app-container:has(.tasks-layout) .tasks-layout .project-count {
    font-size: var(--font-size-badge) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--line-height-ui) !important;
}

.app-container:has(.tasks-layout) .tasks-layout .btn,
.app-container:has(.tasks-layout) .tasks-layout .task-date-filter,
.app-container:has(.tasks-layout) .tasks-layout .task-filter-trigger,
.app-container:has(.tasks-layout) .tasks-layout .mobile-fab-action,
.app-container:has(.tasks-layout) .tasks-layout .mobile-task-inline-btn {
    font-size: var(--font-size-body) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: var(--line-height-ui) !important;
}

.app-container:has(.tasks-layout) .tasks-layout .completed-count {
    margin-left: 8px;
    color: var(--text-secondary);
    font-size: var(--font-size-subtitle) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--line-height-ui) !important;
}

#createTaskModal .modal-header,
#editTaskModal .modal-header,
#createNoteModal .modal-header,
#editNoteModal .modal-header,
#taskSetupPickerModal .modal-header,
#createProjectModal .modal-header,
#editProjectModal .modal-header,
#deleteProjectModal .modal-header {
    font-size: var(--font-size-modal-title) !important;
    font-weight: var(--font-weight-extra-bold) !important;
    line-height: var(--line-height-tight) !important;
}

#createTaskModal .form-label,
#editTaskModal .form-label,
#createNoteModal .form-label,
#editNoteModal .form-label,
#taskSetupPickerModal .form-label,
#createProjectModal .form-label,
#editProjectModal .form-label {
    font-size: var(--font-size-body) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: var(--line-height-ui) !important;
}

#createTaskModal :is(.form-input, .form-textarea, .form-select),
#editTaskModal :is(.form-input, .form-textarea, .form-select),
#createNoteModal :is(.form-input, .form-textarea, .form-select),
#editNoteModal :is(.form-input, .form-textarea, .form-select),
#taskSetupPickerModal :is(.form-input, .form-select),
#createProjectModal :is(.form-input, .form-textarea),
#editProjectModal :is(.form-input, .form-textarea) {
    font-size: var(--font-size-control) !important;
    font-weight: var(--font-weight-regular) !important;
    line-height: var(--line-height-body) !important;
}

#createTaskModal .btn,
#editTaskModal .btn,
#createNoteModal .btn,
#editNoteModal .btn,
#taskSetupPickerModal .btn,
#createProjectModal .btn,
#editProjectModal .btn,
#deleteProjectModal .btn {
    font-size: var(--font-size-body) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: var(--line-height-ui) !important;
}

@media (max-width: 768px) {
    #createTaskModal :is(.form-input, .form-textarea, .form-select),
    #editTaskModal :is(.form-input, .form-textarea, .form-select),
    #createNoteModal :is(.form-input, .form-textarea, .form-select),
    #editNoteModal :is(.form-input, .form-textarea, .form-select),
    #taskSetupPickerModal :is(.form-input, .form-select),
    #createProjectModal :is(.form-input, .form-textarea),
    #editProjectModal :is(.form-input, .form-textarea) {
        font-size: 16px !important;
    }
}

/* Mobile create-task close button mirrors the projects drawer. */
@media (max-width: 768px) {
    #createTaskModal .modal-close-btn,
    #editTaskModal .modal-close-btn,
    #createNoteModal .modal-close-btn,
    #editNoteModal .modal-close-btn {
        top: 14px !important;
        right: 14px !important;
        width: 38px !important;
        height: 38px !important;
        border: 1px solid var(--mobile-task-button-red-border) !important;
        border-radius: 12px !important;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.06)),
            var(--mobile-task-button-red-bg) !important;
        color: var(--mobile-task-button-red) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 8px 18px var(--mobile-task-button-red-shadow) !important;
        font-size: 0 !important;
    }

    #createTaskModal .modal-close-btn::before,
    #createTaskModal .modal-close-btn::after,
    #editTaskModal .modal-close-btn::before,
    #editTaskModal .modal-close-btn::after,
    #createNoteModal .modal-close-btn::before,
    #createNoteModal .modal-close-btn::after,
    #editNoteModal .modal-close-btn::before,
    #editNoteModal .modal-close-btn::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 21px !important;
        height: 2px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: currentColor !important;
        transform-origin: center !important;
    }

    #createTaskModal .modal-close-btn::before,
    #editTaskModal .modal-close-btn::before,
    #createNoteModal .modal-close-btn::before,
    #editNoteModal .modal-close-btn::before {
        transform: translate(-50%, -50%) rotate(45deg) !important;
    }

    #createTaskModal .modal-close-btn::after,
    #editTaskModal .modal-close-btn::after,
    #createNoteModal .modal-close-btn::after,
    #editNoteModal .modal-close-btn::after {
        transform: translate(-50%, -50%) rotate(-45deg) !important;
    }

    #createTaskModal .modal-close-btn:hover,
    #editTaskModal .modal-close-btn:hover,
    #createNoteModal .modal-close-btn:hover,
    #editNoteModal .modal-close-btn:hover {
        border-color: color-mix(in srgb, var(--mobile-task-button-red-border) 62%, var(--mobile-task-button-red)) !important;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.1)),
            color-mix(in srgb, var(--mobile-task-button-red-bg) 88%, var(--mobile-task-button-red)) !important;
        color: var(--mobile-task-button-red) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 10px 22px var(--mobile-task-button-red-shadow) !important;
    }
}

/* Mobile edit-task and note dialogs grow with their content up to the viewport. */
@media (max-width: 768px) {
    #editTaskModal,
    #createNoteModal,
    #editNoteModal {
        padding: 5px !important;
        overflow: hidden !important;
    }

    #editTaskModal .task-modal-content,
    #createNoteModal .note-modal-content,
    #editNoteModal .note-modal-content {
        align-self: center !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: calc(100dvh - 10px) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #editTaskModal .task-modal-content form,
    #createNoteModal .note-modal-content form,
    #editNoteModal .note-modal-content form {
        display: flex !important;
        flex: 0 1 auto !important;
        min-height: 0 !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #editTaskModal .task-modal-scroll {
        flex: 0 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #createNoteModal .note-modal-scroll-shell,
    #editNoteModal .note-modal-scroll-shell {
        display: flex !important;
        flex: 0 1 auto !important;
        min-height: 0 !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #createNoteModal .note-modal-scroll,
    #editNoteModal .note-modal-scroll {
        flex: 0 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #editTaskModal .form-actions,
    #createNoteModal .form-actions,
    #editNoteModal .modal-footer {
        flex-shrink: 0 !important;
    }
}

/* Keep the day-story dialog independent from the shared modal overrides above. */
.modal-content.day-story-modal-content {
    width: min(960px, calc(100vw - 32px));
    max-width: 960px;
    height: auto;
    max-height: calc(100dvh - 32px);
    overflow: hidden;
}

@media (max-width: 768px) {
    .modal.day-story-modal {
        align-items: center;
        padding: 5px;
    }

    .modal-content.day-story-modal-content {
        width: 100%;
        max-width: none;
        height: auto;
        max-height: calc(100dvh - 10px);
        padding: 20px 16px 16px;
        overflow-y: auto;
    }
}