:root {
    --bg: #f5f7fb;
    --surface: rgba(255,255,255,.72);
    --surface-strong: rgba(255,255,255,.88);
    --text: #111827;
    --muted: #687083;
    --line: rgba(31,41,55,.10);
    --shadow: 0 24px 80px rgba(31,41,55,.14);
    --blue: #007aff;
    --violet: #7c3aed;
    --green: #34c759;
    --orange: #ff9500;
    --red: #ff3b30;
    --gray: #8e8e93;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    background:
        radial-gradient(circle at 14% 8%, rgba(0,122,255,.18), transparent 30rem),
        radial-gradient(circle at 86% 4%, rgba(124,58,237,.14), transparent 30rem),
        linear-gradient(180deg, #fbfcff, var(--bg));
}

a { color: inherit; text-decoration: none; }

.wallpaper span {
    position: fixed;
    z-index: -1;
    width: 34rem;
    height: 34rem;
    border-radius: 999px;
    filter: blur(50px);
    opacity: .34;
}

.wallpaper span:nth-child(1) { left: -12rem; top: 3rem; background: #79b7ff; }
.wallpaper span:nth-child(2) { right: -14rem; top: 12rem; background: #d7b5ff; }
.wallpaper span:nth-child(3) { left: 26%; bottom: -20rem; background: #a7f3d0; }

.glass {
    border: 1px solid rgba(255,255,255,.75);
    background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.58));
    box-shadow: var(--shadow);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
}

.app-shell {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 100vh;
    gap: 22px;
    padding: 22px;
}

.sidebar {
    position: sticky;
    top: 22px;
    height: calc(100vh - 44px);
    border-radius: 32px;
    padding: 18px;
    display: flex;
    flex-direction: column;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    margin-bottom: 12px;
    font-weight: 800;
}

.logo b, .mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #111827, #3b82f6);
    color: white;
    letter-spacing: -.05em;
}

.nav-link {
    display: flex;
    width: 100%;
    align-items: center;
    border: 0;
    border-radius: 16px;
    padding: 12px 14px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.nav-link:hover, .nav-link.active {
    color: var(--text);
    background: rgba(255,255,255,.74);
}

.sidebar-bottom {
    margin-top: auto;
    display: grid;
    gap: 10px;
}

.mini-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(255,255,255,.55);
}

.avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: #111827;
    color: white;
    font-weight: 800;
}

.mini-user strong, .mini-user small {
    display: block;
}

.mini-user small {
    max-width: 160px;
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
}

.content {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 18px;
}

.hero {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    border-radius: 34px;
    padding: 18px;
}

.eyebrow {
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 12px;
    font-weight: 800;
}

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(34px, 5vw, 58px); line-height: .95; letter-spacing: -.07em; }
h2 { margin-bottom: 18px; letter-spacing: -.04em; }
h3 { margin-bottom: 10px; letter-spacing: -.03em; }
p { color: var(--muted); }

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.stat {
    border-radius: 26px;
    padding: 20px;
}

.stat span { display: block; color: var(--muted); }
.stat strong { font-size: 36px; letter-spacing: -.06em; }
.stat.hot strong { color: var(--red); }
.stat.warn strong { color: var(--orange); }
.stat.ok strong { color: var(--green); }

.grid-main {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 18px;
    align-items: start;
}

.panel {
    border-radius: 30px;
    padding: 22px;
}

.stack {
    display: grid;
    gap: 14px;
}

.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

label span {
    display: block;
    margin: 0 0 7px 2px;
    color: var(--muted);
    font-size: 13px;
}

input, textarea, select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px 13px;
    background: rgba(255,255,255,.76);
    color: var(--text);
    outline: none;
    font: inherit;
}

textarea { resize: vertical; }

input:focus, textarea:focus, select:focus {
    border-color: rgba(0,122,255,.55);
    box-shadow: 0 0 0 5px rgba(0,122,255,.11);
}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 16px;
    padding: 12px 16px;
    background: rgba(255,255,255,.82);
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(31,41,55,.08);
}

.button.primary {
    color: white;
    background: linear-gradient(135deg, #007aff, #5856d6);
}

.button.small { padding: 9px 12px; border-radius: 13px; font-size: 13px; }
.button.ghost { background: rgba(255,255,255,.42); }

.panel-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

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

.filters input { width: 180px; }
.filters select { width: 150px; }

.task-list, .calendar-list {
    display: grid;
    gap: 10px;
}

.task-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(255,255,255,.62);
}

.task-row.overdue, .task-row.critical {
    background: rgba(255,59,48,.08);
    border-color: rgba(255,59,48,.20);
}

.task-row.today, .task-row.soon {
    background: rgba(255,149,0,.08);
    border-color: rgba(255,149,0,.20);
}

.task-row.done {
    opacity: .64;
}

.task-row.done .task-row-title a {
    text-decoration: line-through;
}

.check {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(31,41,55,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.8);
    cursor: pointer;
    color: white;
    font-weight: 900;
}

.check.checked {
    background: var(--green);
    border-color: var(--green);
}

.task-row-title {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 7px;
    font-weight: 800;
}

.star { color: var(--orange); }

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--muted);
    font-size: 13px;
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255,255,255,.78);
}

.badge.overdue, .badge.critical, .prio.critical { color: #b42318; background: rgba(255,59,48,.12); }
.badge.today, .badge.soon, .prio.urgent { color: #a15c00; background: rgba(255,149,0,.14); }
.badge.future, .status { color: #055fb4; background: rgba(0,122,255,.10); }
.badge.done { color: #167d33; background: rgba(52,199,89,.12); }
.prio.high { color: #7335a8; background: rgba(124,58,237,.12); }
.prio.low { color: #667085; background: rgba(142,142,147,.14); }

.project.blue { color: #055fb4; }
.project.violet { color: #6332a3; }
.project.green { color: #167d33; }
.project.orange { color: #a15c00; }
.project.red { color: #b42318; }

.row-actions, .hero-actions, .project-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.icon {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 12px;
    background: rgba(255,255,255,.72);
    cursor: pointer;
}

.icon.danger { color: var(--red); }

.kanban {
    display: grid;
    grid-template-columns: repeat(5, minmax(190px, 1fr));
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.kanban-col {
    min-height: 320px;
    border-radius: 22px;
    padding: 12px;
    background: rgba(255,255,255,.46);
}

.kanban-col h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kanban-col small {
    color: var(--muted);
}

.task-card {
    display: grid;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 12px;
    margin-bottom: 10px;
    background: rgba(255,255,255,.72);
}

.task-card a {
    display: grid;
    gap: 8px;
}

.mini-actions select {
    padding: 8px;
    border-radius: 12px;
}

.empty {
    display: grid;
    place-items: center;
    min-height: 240px;
    color: var(--muted);
    text-align: center;
}

.date-head {
    margin-top: 12px;
    padding-left: 6px;
    color: var(--muted);
}

.task-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
}

.back {
    display: inline-flex;
    margin-bottom: 12px;
    color: var(--blue);
    font-weight: 700;
}

.checklist, .comments, .activity, .file-list, .project-grid, .table-like {
    display: grid;
    gap: 10px;
}

.checkline {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 9px;
    align-items: center;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255,255,255,.55);
}

.checkline.done span {
    color: var(--muted);
    text-decoration: line-through;
}

.inline-add {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 22px 0;
}

.file-list a, .comment, .activity div, .table-like div {
    padding: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.55);
}

.file-list small, .comment small, .activity span, .activity small, .table-like span {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-card {
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.58);
}

.progress {
    height: 9px;
    overflow: hidden;
    margin: 14px 0;
    border-radius: 999px;
    background: rgba(31,41,55,.08);
}

.progress span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #007aff, #34c759);
}

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 22px;
}

.auth-card {
    width: min(430px, 100%);
    padding: 30px;
    border-radius: 34px;
}

.mark {
    margin-bottom: 18px;
}

.alert {
    padding: 12px 14px;
    margin: 14px 0;
    border-radius: 16px;
    background: rgba(0,122,255,.10);
    color: #055fb4;
}

.alert.danger {
    color: #b42318;
    background: rgba(255,59,48,.10);
}

@media (max-width: 1100px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; }
    .grid-main, .task-detail-grid { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .app-shell { padding: 10px; }
    .hero, .panel-top { flex-direction: column; align-items: stretch; }
    .stats, .two, .project-grid { grid-template-columns: 1fr; }
    .filters input, .filters select { width: 100%; }
    .task-row { grid-template-columns: auto 1fr; }
    .row-actions { grid-column: 1 / -1; }
    h1 { font-size: 36px; }
}


body.theme-dark,
@media (prefers-color-scheme: dark) {
}

body.theme-dark {
    --bg: #0f172a;
    --surface: rgba(15,23,42,.74);
    --surface-strong: rgba(15,23,42,.90);
    --text: #f8fafc;
    --muted: #aab4c5;
    --line: rgba(255,255,255,.12);
    --shadow: 0 24px 80px rgba(0,0,0,.38);
    background:
        radial-gradient(circle at 14% 8%, rgba(0,122,255,.20), transparent 30rem),
        radial-gradient(circle at 86% 4%, rgba(124,58,237,.18), transparent 30rem),
        linear-gradient(180deg, #0b1120, var(--bg));
}

@media (prefers-color-scheme: dark) {
    body.theme-system {
        --bg: #0f172a;
        --surface: rgba(15,23,42,.74);
        --surface-strong: rgba(15,23,42,.90);
        --text: #f8fafc;
        --muted: #aab4c5;
        --line: rgba(255,255,255,.12);
        --shadow: 0 24px 80px rgba(0,0,0,.38);
        background:
            radial-gradient(circle at 14% 8%, rgba(0,122,255,.20), transparent 30rem),
            radial-gradient(circle at 86% 4%, rgba(124,58,237,.18), transparent 30rem),
            linear-gradient(180deg, #0b1120, var(--bg));
    }
}

body.theme-dark .glass,
body.theme-system .glass {
    border-color: rgba(255,255,255,.12);
}

body.theme-dark input,
body.theme-dark textarea,
body.theme-dark select,
body.theme-dark .nav-link:hover,
body.theme-dark .nav-link.active,
body.theme-dark .mini-user,
body.theme-dark .task-row,
body.theme-dark .task-card,
body.theme-dark .kanban-col,
body.theme-dark .project-card,
body.theme-dark .file-list a,
body.theme-dark .comment,
body.theme-dark .activity div,
body.theme-dark .table-like div,
body.theme-system input,
body.theme-system textarea,
body.theme-system select {
    background: rgba(15,23,42,.62);
    color: var(--text);
}

.compact-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border-radius: 24px;
    padding: 16px 18px;
}

.compact-head h1 {
    margin: 0;
    font-size: clamp(26px, 4vw, 40px);
}

.check-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.46);
}

.check-filter input {
    width: auto;
}

.draggable-row,
.draggable-card {
    cursor: grab;
}

.dragging {
    opacity: .45;
    transform: scale(.995);
}

.drag-over {
    outline: 2px dashed rgba(0,122,255,.55);
    outline-offset: 4px;
}

.kanban-col.drag-over {
    background: rgba(0,122,255,.08);
}


/* v4.3: readable dark theme hard overrides */
body.theme-dark {
    color: #f8fafc;
}

body.theme-dark .glass,
body.theme-dark .panel,
body.theme-dark .compact-head,
body.theme-dark .hero,
body.theme-dark .sidebar {
    background: linear-gradient(135deg, rgba(15,23,42,.92), rgba(15,23,42,.76)) !important;
    border-color: rgba(255,255,255,.14) !important;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark .task-row-title a,
body.theme-dark .logo,
body.theme-dark .nav-link.active,
body.theme-dark .nav-link:hover {
    color: #f8fafc !important;
}

body.theme-dark p,
body.theme-dark label span,
body.theme-dark .meta,
body.theme-dark .muted,
body.theme-dark .mini-user small,
body.theme-dark .activity span,
body.theme-dark .activity small,
body.theme-dark .table-like span,
body.theme-dark .file-list small {
    color: #b8c2d6 !important;
}

body.theme-dark input,
body.theme-dark textarea,
body.theme-dark select {
    background: rgba(255,255,255,.08) !important;
    color: #f8fafc !important;
    border-color: rgba(255,255,255,.16) !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color: rgba(248,250,252,.46) !important;
}

body.theme-dark select option {
    color: #111827;
    background: #ffffff;
}

body.theme-dark .task-row,
body.theme-dark .task-card,
body.theme-dark .kanban-col,
body.theme-dark .project-card,
body.theme-dark .mini-user,
body.theme-dark .file-list a,
body.theme-dark .comment,
body.theme-dark .activity div,
body.theme-dark .table-like div,
body.theme-dark .checkline {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.12) !important;
}

body.theme-dark .badge {
    background: rgba(255,255,255,.10) !important;
    color: #e5e7eb !important;
}

body.theme-dark .button {
    background: rgba(255,255,255,.12);
    color: #f8fafc;
}

body.theme-dark .button.primary {
    background: linear-gradient(135deg, #0a84ff, #7c3aed);
    color: #ffffff;
}

body.theme-dark .check-filter {
    background: rgba(255,255,255,.08);
    color: #f8fafc;
}

@media (prefers-color-scheme: dark) {
    body.theme-system {
        color: #f8fafc;
    }

    body.theme-system .glass,
    body.theme-system .panel,
    body.theme-system .compact-head,
    body.theme-system .hero,
    body.theme-system .sidebar {
        background: linear-gradient(135deg, rgba(15,23,42,.92), rgba(15,23,42,.76)) !important;
        border-color: rgba(255,255,255,.14) !important;
    }

    body.theme-system h1,
    body.theme-system h2,
    body.theme-system h3,
    body.theme-system strong,
    body.theme-system .task-row-title a {
        color: #f8fafc !important;
    }

    body.theme-system p,
    body.theme-system label span,
    body.theme-system .meta,
    body.theme-system .mini-user small {
        color: #b8c2d6 !important;
    }

    body.theme-system input,
    body.theme-system textarea,
    body.theme-system select {
        background: rgba(255,255,255,.08) !important;
        color: #f8fafc !important;
        border-color: rgba(255,255,255,.16) !important;
    }

    body.theme-system .task-row,
    body.theme-system .task-card,
    body.theme-system .kanban-col,
    body.theme-system .project-card,
    body.theme-system .mini-user,
    body.theme-system .file-list a,
    body.theme-system .comment,
    body.theme-system .activity div,
    body.theme-system .table-like div,
    body.theme-system .checkline {
        background: rgba(255,255,255,.07) !important;
        border-color: rgba(255,255,255,.12) !important;
    }

    body.theme-system .badge {
        background: rgba(255,255,255,.10) !important;
        color: #e5e7eb !important;
    }
}


/* v4.4 Mova-inspired dashboard */
body {
    background:
        radial-gradient(circle at 26% -10%, rgba(96, 96, 255, .18), transparent 34rem),
        radial-gradient(circle at 90% 0%, rgba(53, 214, 255, .14), transparent 30rem),
        linear-gradient(180deg, #fbfcff, #f4f7fb);
}

body.theme-dark {
    background:
        radial-gradient(circle at 30% -5%, rgba(106, 76, 255, .22), transparent 34rem),
        radial-gradient(circle at 92% 0%, rgba(53, 214, 255, .13), transparent 30rem),
        linear-gradient(180deg, #060b14, #090f1c);
}

.app-shell {
    grid-template-columns: 248px 1fr;
    gap: 16px;
    padding: 8px;
}

.sidebar {
    top: 8px;
    height: calc(100vh - 16px);
    border-radius: 0 26px 26px 0;
    border-left: 0;
    box-shadow: none;
}

.logo {
    font-size: 24px;
    letter-spacing: -.06em;
    margin-bottom: 26px;
}

.logo b {
    border-radius: 999px;
    background: conic-gradient(from 180deg, #35D6FF, #6D5BFF, #B257FF, #35D6FF);
}

.nav-link {
    gap: 12px;
    margin: 3px 0;
    font-weight: 650;
}

.content {
    gap: 18px;
    padding: 22px 22px 22px 0;
}

.mova-topbar {
    display: grid;
    grid-template-columns: minmax(280px, 740px) auto;
    gap: 18px;
    align-items: center;
}

.mova-search {
    height: 52px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 0 14px 0 18px;
    border-radius: 20px;
    box-shadow: 0 18px 60px rgba(31,41,55,.08);
}

.mova-search input {
    border: 0;
    padding: 0;
    background: transparent !important;
    box-shadow: none;
}

.mova-search button {
    border: 0;
    border-radius: 12px;
    padding: 8px 12px;
    color: var(--muted);
    background: rgba(31,41,55,.06);
}

.mova-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    align-items: center;
}

.bell {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #5b5ce2;
    font-size: 28px;
}

.mova-focus-card {
    position: relative;
    min-height: 300px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 26px;
    overflow: hidden;
    padding: 44px 38px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 78% 46%, color-mix(in srgb, var(--focus-b) 60%, transparent), transparent 18rem),
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--focus-a) 42%, transparent), transparent 22rem),
        linear-gradient(135deg, rgba(255,255,255,.78), rgba(245,248,255,.66)) !important;
}

body.theme-dark .mova-focus-card {
    background:
        radial-gradient(circle at 78% 46%, color-mix(in srgb, var(--focus-b) 48%, transparent), transparent 18rem),
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--focus-a) 45%, transparent), transparent 22rem),
        linear-gradient(135deg, rgba(12,16,34,.96), rgba(15,15,42,.86)) !important;
}

.mova-focus-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.08), transparent 60%),
        radial-gradient(circle at 78% 95%, color-mix(in srgb, var(--focus-a) 28%, transparent), transparent 20rem);
    pointer-events: none;
}

.focus-copy {
    position: relative;
    z-index: 1;
    max-width: 620px;
}

.focus-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 22px;
    border-radius: 999px;
    color: #3d55d7;
    background: rgba(255,255,255,.74);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 12px;
}

body.theme-dark .focus-pill {
    color: #cfd7ff;
    background: rgba(255,255,255,.08);
}

.focus-copy h1 {
    max-width: 620px;
    margin-bottom: 18px;
    font-size: clamp(34px, 4.8vw, 56px);
    line-height: 1.02;
    letter-spacing: -.055em;
}

.focus-copy p {
    max-width: 570px;
    font-size: 17px;
    line-height: 1.65;
}

.focus-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 28px;
    color: var(--muted);
}

.focus-meta i {
    width: 160px;
    height: 5px;
    display: block;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(100,116,139,.18);
}

.focus-meta i b {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--focus-a), var(--focus-b));
}

.priority-chip {
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(255,59,48,.08);
    color: #d93025;
    font-weight: 800;
}

.focus-art {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-height: 220px;
}

.focus-art img {
    max-width: 100%;
    max-height: 250px;
    object-fit: contain;
    filter: drop-shadow(0 30px 45px color-mix(in srgb, var(--focus-a) 35%, rgba(0,0,0,.28)));
}

.default-folders {
    position: relative;
    width: 300px;
    height: 210px;
    filter: drop-shadow(0 30px 40px color-mix(in srgb, var(--focus-a) 35%, rgba(0,0,0,.26)));
}

.default-folders span {
    position: absolute;
    width: 170px;
    height: 118px;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.44);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--focus-a) 70%, white), color-mix(in srgb, var(--focus-b) 68%, white));
    opacity: .86;
    transform: rotate(0deg);
}

.default-folders span:nth-child(1) { right: 0; top: 0; }
.default-folders span:nth-child(2) { right: 58px; top: 45px; background: linear-gradient(135deg, color-mix(in srgb, var(--focus-a) 60%, white), color-mix(in srgb, #35d6ff 72%, white)); }
.default-folders span:nth-child(3) { left: 0; bottom: 0; background: linear-gradient(135deg, color-mix(in srgb, #b257ff 65%, white), color-mix(in srgb, var(--focus-b) 72%, white)); }

.mova-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .95fr);
    gap: 18px;
    align-items: start;
}

.mova-task-panel {
    min-height: 450px;
}

.mova-right {
    display: grid;
    gap: 18px;
}

.compact-filters {
    justify-content: flex-end;
}

.mova-list .task-row {
    min-height: 72px;
    background: rgba(255,255,255,.70);
}

body.theme-dark .mova-list .task-row {
    background: rgba(255,255,255,.045) !important;
}

.upcoming-list {
    display: grid;
    gap: 12px;
}

.upcoming-list a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
}

.upcoming-list a span {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6D5BFF, #35D6FF);
}

.upcoming-list small {
    color: var(--muted);
}

.focus-summary .ring {
    --size: 150px;
    width: var(--size);
    height: var(--size);
    display: grid;
    place-items: center;
    margin: 18px auto;
    border-radius: 999px;
    background:
        radial-gradient(circle, var(--surface-strong) 55%, transparent 57%),
        conic-gradient(#6D5BFF calc(var(--done) * 1%), rgba(148,163,184,.20) 0);
}

.focus-summary .ring strong {
    display: block;
    font-size: 40px;
    line-height: 1;
    text-align: center;
}

.focus-summary .ring span {
    grid-column: 1;
    grid-row: 1;
    transform: translateY(34px);
    color: var(--muted);
    font-size: 12px;
}

.summary-counts {
    display: grid;
    gap: 10px;
}

.summary-counts span {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
}

.focus-preview {
    display: grid;
    place-items: center;
    min-height: 150px;
    border-radius: 22px;
    margin-bottom: 12px;
    background:
        radial-gradient(circle at 70% 40%, color-mix(in srgb, var(--focus-b) 48%, transparent), transparent 10rem),
        linear-gradient(135deg, color-mix(in srgb, var(--focus-a) 22%, transparent), rgba(255,255,255,.12));
}

.focus-preview img {
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
}

@media (max-width: 1200px) {
    .mova-focus-card,
    .mova-dashboard {
        grid-template-columns: 1fr;
    }

    .focus-art {
        min-height: 170px;
    }
}

@media (max-width: 760px) {
    .content {
        padding: 10px;
    }

    .mova-topbar {
        grid-template-columns: 1fr;
    }

    .mova-focus-card {
        padding: 24px;
        min-height: auto;
    }

    .focus-copy h1 {
        font-size: 34px;
    }

    .default-folders {
        transform: scale(.75);
    }
}


/* v4.5 fixes */
.nav-link {
    display: grid;
    grid-template-columns: 28px 1fr;
}

.nav-ico {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(99,102,241,.08);
    color: #6366f1;
}

body.theme-dark .nav-ico {
    background: rgba(255,255,255,.08);
    color: #b9c1ff;
}

.task-row,
.task-card,
.clickable-focus {
    cursor: pointer;
}

.timer.active {
    color: white;
    background: linear-gradient(135deg, #6D5BFF, #35D6FF);
}

.time-chip {
    align-self: center;
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--muted);
    background: rgba(99,102,241,.10);
    font-size: 12px;
    font-weight: 800;
}

.focus-library {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 12px 0;
}

.focus-lib-item {
    margin: 0;
}

.focus-lib-item button {
    width: 100%;
    aspect-ratio: 1 / .72;
    border: 1px solid var(--line);
    overflow: hidden;
    padding: 0;
    border-radius: 14px;
    cursor: pointer;
    background: rgba(255,255,255,.5);
}

.focus-lib-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.changelog div strong {
    min-width: 52px;
}

@media (max-width: 760px) {
    .focus-library {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* v4.6 project select, task row layout, modal, closer Mova polish */
select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 48px !important;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
    background-position:
        calc(100% - 23px) 50%,
        calc(100% - 16px) 50% !important;
    background-size: 7px 7px, 7px 7px !important;
    background-repeat: no-repeat !important;
}

select:focus {
    background-position:
        calc(100% - 23px) 50%,
        calc(100% - 16px) 50% !important;
}

.task-row {
    position: relative;
    overflow: hidden;
    min-height: 74px;
    padding-left: 18px;
    border-radius: 16px;
}

.task-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 16px 0 0 16px;
    background: #94a3b8;
}

.task-row.project-blue::before { background: #4F7CFF; }
.task-row.project-violet::before { background: #8B5CF6; }
.task-row.project-green::before { background: #34C759; }
.task-row.project-orange::before { background: #FF9500; }
.task-row.project-red::before { background: #FF3B30; }
.task-row.project-gray::before { background: #94A3B8; }

.task-row-title {
    justify-content: space-between;
    gap: 12px;
}

.row-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-wrap: wrap;
}

.tag-chip {
    display: inline-flex;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    background: rgba(99,102,241,.10);
    color: #4f46e5;
}

.tag-chip.green { color: #167d33; background: rgba(52,199,89,.12); }
.tag-chip.orange { color: #a15c00; background: rgba(255,149,0,.14); }
.tag-chip.red { color: #b42318; background: rgba(255,59,48,.12); }
.tag-chip.violet { color: #6332a3; background: rgba(124,58,237,.12); }
.tag-chip.gray { color: #667085; background: rgba(142,142,147,.14); }

.task-subline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 13px;
}

.project-under {
    font-weight: 700;
}

.project-under.blue { color: #315dcc; }
.project-under.violet { color: #7141d9; }
.project-under.green { color: #1d8f45; }
.project-under.orange { color: #bd6800; }
.project-under.red { color: #c9352d; }
.project-under.gray { color: #64748b; }

body.theme-dark .tag-chip {
    background: rgba(255,255,255,.08);
    color: #dbeafe;
}

body.theme-dark .project-under.blue { color: #8db3ff; }
body.theme-dark .project-under.violet { color: #c4b5fd; }
body.theme-dark .project-under.green { color: #86efac; }
body.theme-dark .project-under.orange { color: #fdba74; }
body.theme-dark .project-under.red { color: #fca5a5; }
body.theme-dark .project-under.gray { color: #cbd5e1; }

.modal-layer {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    z-index: 50;
    padding: 18px;
    background: rgba(15,23,42,.38);
    backdrop-filter: blur(12px);
}

.modal-layer.active {
    display: grid;
}

.modal-card {
    position: relative;
    width: min(460px, 100%);
    padding: 24px;
    border-radius: 28px;
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    background: rgba(100,116,139,.12);
    color: var(--text);
    font-size: 22px;
}

.mova-task-panel {
    border-radius: 28px;
}

.mova-list .task-row {
    box-shadow: none;
    border-color: rgba(31,41,55,.075);
}

body.theme-dark .mova-list .task-row {
    border-color: rgba(255,255,255,.09) !important;
}

.panel-top h2 {
    font-size: 20px;
    letter-spacing: -.03em;
}

.filters.compact-filters select {
    min-width: 150px;
}

@media (max-width: 760px) {
    .task-row-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .row-tags {
        margin-left: 0;
    }
}


/* v4.7 focus logic labels */
.focus-pill.missed {
    color: #b42318;
    background: rgba(255,59,48,.12);
}

.focus-pill.upcoming {
    color: #315dcc;
    background: rgba(79,124,255,.12);
}

.focus-pill.today-next {
    color: #7c3aed;
    background: rgba(124,58,237,.12);
}

body.theme-dark .focus-pill.missed {
    color: #fecaca;
    background: rgba(255,59,48,.16);
}

body.theme-dark .focus-pill.upcoming {
    color: #bfdbfe;
    background: rgba(79,124,255,.16);
}

body.theme-dark .focus-pill.today-next {
    color: #ddd6fe;
    background: rgba(124,58,237,.18);
}


/* v4.8 color picker / hex code support */
.color-field {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 10px;
    align-items: center;
}

.color-field input[type="color"] {
    width: 54px;
    height: 46px;
    padding: 3px !important;
    border-radius: 15px;
    cursor: pointer;
}

.color-field input[type="text"] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-transform: uppercase;
}

.task-row::before {
    background: var(--project-color, #94A3B8) !important;
}

.project-under {
    color: var(--project-color, #64748b) !important;
}

.tag-chip {
    color: var(--tag-color, #4F7CFF) !important;
    background: color-mix(in srgb, var(--tag-color, #4F7CFF) 14%, transparent) !important;
}

.project-card {
    border-color: color-mix(in srgb, var(--project-color, #4F7CFF) 22%, var(--line)) !important;
}

.project-card h3::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 999px;
    background: var(--project-color, #4F7CFF);
}


/* v4.9 app logo/title */
.logo img {
    width: 42px;
    height: 42px;
    display: block;
    object-fit: contain;
    border-radius: 14px;
    filter: drop-shadow(0 10px 18px rgba(79,124,255,.22));
}

.logo span {
    font-size: 24px;
    font-weight: 850;
    letter-spacing: -.055em;
}

body.theme-dark .logo img {
    filter: drop-shadow(0 10px 24px rgba(99,102,241,.35));
}


/* 0.5.1 small UI fixes */
.bell {
    font-size: 20px !important;
}

.focus-project-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.focus-project-name i {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    font-style: normal;
    color: #4F46E5;
    background: rgba(79,70,229,.10);
}

body.theme-dark .focus-project-name i {
    color: #c7d2fe;
    background: rgba(255,255,255,.10);
}

.nav-link .nav-ico {
    font-size: 16px;
    line-height: 1;
}


/* 0.5.2 dashboard structure closer to reference */
.target-layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .95fr);
    align-items: start;
}

.target-panel-top {
    margin-bottom: 14px;
}

.task-tabs {
    display: flex;
    align-items: center;
    gap: 22px;
    color: var(--muted);
    font-weight: 700;
}

.task-tabs a {
    position: relative;
    padding: 6px 0;
}

.task-tabs a.active {
    color: #4f46e5;
}

.task-tabs a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 2px;
    border-radius: 999px;
    background: #4f46e5;
}

.task-tabs button {
    border: 0;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font-size: 20px;
}

.collapsed-filters {
    display: none;
    margin-bottom: 14px;
    justify-content: flex-end;
}

.collapsed-filters.is-open {
    display: flex;
}

.target-task-list {
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255,255,255,.38);
}

.target-task-list .task-row {
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    min-height: 70px;
    background: rgba(255,255,255,.50);
}

.target-task-list .task-row:last-child {
    border-bottom: 0;
}

body.theme-dark .target-task-list {
    background: rgba(255,255,255,.035);
}

body.theme-dark .target-task-list .task-row {
    background: rgba(255,255,255,.035) !important;
    border-bottom-color: rgba(255,255,255,.08);
}

.inline-add-task {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding-top: 18px;
}

.add-task-link {
    border: 0;
    color: #4f46e5;
    background: transparent;
    cursor: pointer;
    font-weight: 800;
    font-size: 15px;
}

.inline-create-form {
    width: 100%;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255,255,255,.55);
}

body.theme-dark .inline-create-form {
    background: rgba(255,255,255,.045);
}

.target-right {
    display: grid;
    grid-template-rows: auto auto;
    gap: 18px;
}

.target-card {
    border-radius: 24px;
    min-height: 180px;
}

.upcoming-panel .panel-top {
    align-items: center;
}

.upcoming-list a {
    grid-template-columns: 10px 1fr auto;
    padding: 10px 0;
}

.focus-body {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: center;
    gap: 18px;
}

.focus-summary .ring {
    --size: 142px;
    margin: 8px 0;
}

.focus-start {
    width: 100%;
    margin-top: 12px;
}

.settings-dot {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(100,116,139,.10);
    color: var(--muted);
}

.mova-task-panel {
    min-height: 520px;
}

@media (max-width: 1200px) {
    .target-layout {
        grid-template-columns: 1fr;
    }

    .focus-body {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}


/* 0.5.3: compact add task block and larger app icon */
.inline-create-form[hidden] {
    display: none !important;
}

.inline-add-task {
    padding-top: 20px;
}

.add-task-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 14px;
}

.add-task-link:hover {
    background: rgba(79,70,229,.08);
}

.logo img {
    width: 50px !important;
    height: 50px !important;
}

.logo {
    gap: 12px;
}


/* 0.5.4 fixes */
.project-actions-split {
    justify-content: space-between;
    align-items: center;
}

.delete-project {
    color: #ff3b30 !important;
    background: rgba(255,59,48,.10) !important;
}

.delete-project:hover {
    background: rgba(255,59,48,.18) !important;
}

.focus-pill.no-date {
    color: #315dcc;
    background: rgba(79,124,255,.12);
}

body.theme-dark .focus-pill.no-date {
    color: #bfdbfe;
    background: rgba(79,124,255,.16);
}

.check {
    position: relative;
    z-index: 3;
}


/* 0.5.5 focus progress, standalone calendar and kanban */
.board-only {
    grid-template-columns: 1fr !important;
}

.board-only .mova-task-panel {
    min-height: 620px;
}

.calendar-board {
    border-radius: 28px;
    padding: 24px;
}

.calendar-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}

.calendar-head h1 {
    margin: 0;
    font-size: clamp(28px, 4vw, 42px);
}

.calendar-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.day-card {
    min-height: 280px;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 14px;
    background: rgba(255,255,255,.50);
}

body.theme-dark .day-card {
    background: rgba(255,255,255,.045);
}

.day-card.is-today {
    border-color: rgba(79,70,229,.38);
    box-shadow: inset 0 0 0 1px rgba(79,70,229,.16);
}

.day-card header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}

.day-card header strong {
    font-size: 20px;
}

.day-card header span {
    color: var(--muted);
}

.day-tasks {
    display: grid;
    gap: 8px;
}

.day-task {
    display: grid;
    gap: 4px;
    padding: 10px 10px 10px 12px;
    border-left: 3px solid var(--project-color, #94A3B8);
    border-radius: 12px;
    background: rgba(255,255,255,.62);
}

body.theme-dark .day-task {
    background: rgba(255,255,255,.07);
}

.day-task b {
    font-size: 13px;
}

.day-task small {
    color: var(--muted);
}

.day-tasks p {
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 1100px) {
    .week-grid {
        grid-template-columns: repeat(7, 220px);
    }

    .calendar-head {
        flex-direction: column;
    }
}


/* 0.5.6 calendar switcher and completed task styling */
.calendar-switcher {
    position: relative;
    display: inline-grid;
    grid-template-columns: 42px auto 42px;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.calendar-arrow {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--muted);
    font-size: 28px;
    font-weight: 800;
    background: rgba(100,116,139,.08);
}

.calendar-current {
    display: grid;
    grid-template-columns: 42px auto;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    border: 0;
    border-radius: 16px;
    padding: 8px 14px;
    cursor: pointer;
    color: var(--text);
    background: rgba(100,116,139,.08);
}

.calendar-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #22c55e;
    border: 1px solid rgba(34,197,94,.45);
    background: rgba(34,197,94,.10);
}

.calendar-current strong,
.calendar-current small {
    display: block;
    text-align: left;
}

.calendar-current small {
    color: var(--muted);
}

.month-popover {
    position: absolute;
    z-index: 20;
    left: 50px;
    top: calc(100% + 10px);
    width: 310px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(17,24,39,.94);
    color: #e5e7eb;
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
    backdrop-filter: blur(18px);
}

.month-popover[hidden] {
    display: none !important;
}

.month-popover header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.month-popover nav {
    display: flex;
    gap: 10px;
}

.month-popover nav a {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #e5e7eb;
    background: rgba(255,255,255,.07);
}

.month-weekdays,
.month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    text-align: center;
}

.month-weekdays {
    margin-bottom: 10px;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 800;
}

.month-grid a {
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #d1d5db;
    font-weight: 800;
}

.month-grid a.muted {
    color: #6b7280;
}

.month-grid a.today {
    outline: 1px solid rgba(34,197,94,.45);
}

.month-grid a.selected {
    color: white;
    background: #22c55e;
}

.calendar-week-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 14px;
    color: var(--muted);
    font-weight: 800;
}

.calendar-week-title a {
    color: #4f46e5;
}

.task-row.done,
.task-card.done,
.day-task.done {
    opacity: .46;
    filter: saturate(.55);
}

.task-row.done .task-row-title a,
.task-card.done strong,
.day-task.done b {
    text-decoration: line-through;
}

.task-row.done .badge,
.task-row.done .task-subline,
.task-card.done .badge,
.day-task.done small {
    opacity: .75;
}

.task-row.done::before {
    opacity: .35;
}


/* 0.5.7 visible select arrows */
select {
    padding-right: 52px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7L9 11L13 7' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: right 18px center !important;
    background-size: 18px 18px !important;
    background-repeat: no-repeat !important;
}

body.theme-dark select,
@media (prefers-color-scheme: dark) {
}

body.theme-dark select {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7L9 11L13 7' stroke='%23E5E7EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

@media (prefers-color-scheme: dark) {
    body.theme-system select {
        background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7L9 11L13 7' stroke='%23E5E7EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    }
}


/* 0.5.8 select arrow fix: remove repeated custom SVG/gradient arrows */
select {
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    background-image: none !important;
    background-repeat: initial !important;
    background-size: auto !important;
    background-position: initial !important;
    padding-right: 36px !important;
    color-scheme: light;
}

body.theme-dark select {
    background-image: none !important;
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    body.theme-system select {
        background-image: none !important;
        color-scheme: dark;
    }
}


/* 0.5.9 unified visual system */
:root {
    --app-accent: #6D5BFF;
    --app-accent-2: #35D6FF;
    --app-accent-soft: rgba(109,91,255,.12);
    --app-danger: #FF3B30;
    --app-warning: #FF9500;
    --app-success: #34C759;
}

/* hide native select, use custom dropdown */
.native-select-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.custom-select {
    position: relative;
    width: 100%;
}

.custom-select-button {
    width: 100%;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 0 18px 0 14px;
    color: var(--text);
    cursor: pointer;
    background: rgba(255,255,255,.76);
    font: inherit;
    text-align: left;
}

.custom-select-button i {
    font-style: normal;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    margin-left: auto;
}

.custom-select-menu {
    position: absolute;
    z-index: 60;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow: auto;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 24px 80px rgba(15,23,42,.18);
    backdrop-filter: blur(22px) saturate(150%);
}

.custom-select-option {
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 11px 12px;
    color: var(--text);
    cursor: pointer;
    background: transparent;
    font: inherit;
    text-align: left;
}

.custom-select-option:hover,
.custom-select-option.selected {
    color: var(--app-accent);
    background: var(--app-accent-soft);
}

body.theme-dark .custom-select-button {
    color: #f8fafc;
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.16);
}

body.theme-dark .custom-select-menu {
    background: rgba(15,23,42,.94);
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 24px 80px rgba(0,0,0,.42);
}

body.theme-dark .custom-select-option {
    color: #f8fafc;
}

body.theme-dark .custom-select-option:hover,
body.theme-dark .custom-select-option.selected {
    color: #d9ddff;
    background: rgba(109,91,255,.18);
}

/* unified accents */
.button.primary,
.focus-start {
    background: linear-gradient(135deg, var(--app-accent), var(--app-accent-2)) !important;
    color: white !important;
}

.task-tabs a.active,
.calendar-week-title a,
.add-task-link {
    color: var(--app-accent) !important;
}

.task-tabs a.active::after {
    background: var(--app-accent) !important;
}

.check.checked {
    background: var(--app-success) !important;
    border-color: var(--app-success) !important;
}

/* frosted glass menu and panels */
.sidebar.glass {
    background: linear-gradient(135deg, rgba(255,255,255,.74), rgba(255,255,255,.48)) !important;
    backdrop-filter: blur(30px) saturate(160%);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    border-right: 1px solid rgba(255,255,255,.55);
}

body.theme-dark .sidebar.glass {
    background: linear-gradient(135deg, rgba(15,23,42,.82), rgba(15,23,42,.58)) !important;
    border-right-color: rgba(255,255,255,.10);
}

.mova-right .panel,
.target-card {
    background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,255,255,.54)) !important;
    backdrop-filter: blur(24px) saturate(150%);
}

body.theme-dark .mova-right .panel,
body.theme-dark .target-card {
    background: linear-gradient(135deg, rgba(15,23,42,.82), rgba(15,23,42,.58)) !important;
}

/* checklist now belongs to the task body */
.task-checklist-main {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.task-checklist-main h2 {
    margin-bottom: 14px;
}

.task-checklist-main .inline-add {
    margin-top: 14px;
}

/* calendar datepicker uses app palette */
.calendar-icon {
    color: var(--app-accent) !important;
    border-color: color-mix(in srgb, var(--app-accent) 45%, transparent) !important;
    background: color-mix(in srgb, var(--app-accent) 12%, transparent) !important;
}

.month-grid a.today {
    outline-color: color-mix(in srgb, var(--app-accent) 55%, transparent) !important;
}

.month-grid a.selected {
    color: white !important;
    background: var(--app-accent) !important;
}

.month-popover nav a:hover,
.calendar-arrow:hover {
    color: var(--app-accent);
    background: var(--app-accent-soft);
}


/* 0.6.0 focus timer */
.focus-timer-widget {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.focus-live-timer {
    padding: 14px 16px;
    border-radius: 16px;
    text-align: center;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: .02em;
    background: rgba(109,91,255,.10);
    color: var(--app-accent);
}

.focus-live-timer.paused {
    color: var(--muted);
    background: rgba(100,116,139,.10);
}

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

.focus-timer-actions form,
.focus-timer-actions button {
    flex: 1;
}

.focus-timer-actions .button {
    width: 100%;
}

.danger-button {
    color: var(--app-danger) !important;
    background: rgba(255,59,48,.10) !important;
}

#focus-stop-modal .modal-card {
    width: min(520px, 100%);
}


/* 0.6.1 priority colors */
.prio.low {
    color: #64748b !important;
    background: rgba(100,116,139,.12) !important;
}

.prio.high,
.priority-chip.high {
    color: #b45309 !important;
    background: rgba(245,158,11,.16) !important;
}

.prio.urgent,
.priority-chip.urgent {
    color: #c2410c !important;
    background: rgba(249,115,22,.18) !important;
}

.prio.critical,
.priority-chip.critical {
    color: #b42318 !important;
    background: rgba(255,59,48,.16) !important;
}

.priority-chip.low {
    color: #64748b !important;
    background: rgba(100,116,139,.12) !important;
}

body.theme-dark .prio.low,
body.theme-dark .priority-chip.low {
    color: #cbd5e1 !important;
    background: rgba(148,163,184,.14) !important;
}

body.theme-dark .prio.high,
body.theme-dark .priority-chip.high {
    color: #fcd34d !important;
    background: rgba(245,158,11,.18) !important;
}

body.theme-dark .prio.urgent,
body.theme-dark .priority-chip.urgent {
    color: #fdba74 !important;
    background: rgba(249,115,22,.20) !important;
}

body.theme-dark .prio.critical,
body.theme-dark .priority-chip.critical {
    color: #fca5a5 !important;
    background: rgba(255,59,48,.20) !important;
}


/* 0.6.2 calendar drag/drop and unified task icons */
.sidebar {
    border-radius: 26px !important;
}

.day-card.drag-over {
    outline: 2px dashed var(--app-accent);
    outline-offset: -6px;
    background: color-mix(in srgb, var(--app-accent) 10%, rgba(255,255,255,.5));
}

.day-task.dragging {
    opacity: .45;
}

.row-actions {
    gap: 8px;
}

.row-actions .icon,
.task-row .check {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(109,91,255,.12);
    border-radius: 14px;
    background: rgba(109,91,255,.08);
    color: var(--app-accent);
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
}

.task-row .check {
    background: rgba(100,116,139,.08);
    color: transparent;
    border-color: rgba(100,116,139,.18);
}

.task-row .check.checked {
    color: white;
    background: var(--app-success) !important;
    border-color: var(--app-success) !important;
}

.row-actions .icon.timer.active {
    color: white !important;
    background: linear-gradient(135deg, var(--app-accent), var(--app-accent-2)) !important;
}

.row-actions .icon.danger,
.row-actions .icon.delete-project {
    color: var(--app-danger) !important;
    background: rgba(255,59,48,.10) !important;
    border-color: rgba(255,59,48,.12);
}

.row-actions .icon:hover,
.task-row .check:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(15,23,42,.10);
}

body.theme-dark .row-actions .icon,
body.theme-dark .task-row .check {
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.07);
}

body.theme-dark .row-actions .icon.danger {
    background: rgba(255,59,48,.16) !important;
}


/* 0.6.4 hover interactions and one-day calendar shift */
.button,
.icon,
.check,
.nav-link,
.bell,
.calendar-arrow,
.calendar-current,
.add-task-link,
.task-row,
.task-card,
.day-task,
.project-card,
.focus-lib-item button,
.month-grid a,
.modal-close,
.custom-select-button,
.custom-select-option {
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background .16s ease,
        border-color .16s ease,
        color .16s ease,
        opacity .16s ease;
}

.button:hover,
.bell:hover,
.calendar-arrow:hover,
.calendar-current:hover,
.custom-select-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(15,23,42,.12);
}

.task-row:hover,
.task-card:hover,
.day-task:hover,
.project-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(15,23,42,.10);
    border-color: color-mix(in srgb, var(--app-accent) 26%, var(--line)) !important;
}

.nav-link:hover {
    transform: translateX(2px);
}

.add-task-link:hover,
.month-grid a:hover,
.focus-lib-item button:hover,
.modal-close:hover {
    transform: translateY(-1px);
}

.month-grid a:hover {
    color: white;
    background: var(--app-accent);
}

.day-task.done:hover,
.task-row.done:hover,
.task-card.done:hover {
    opacity: .62;
}

body.theme-dark .button:hover,
body.theme-dark .bell:hover,
body.theme-dark .calendar-arrow:hover,
body.theme-dark .calendar-current:hover,
body.theme-dark .task-row:hover,
body.theme-dark .task-card:hover,
body.theme-dark .day-task:hover,
body.theme-dark .project-card:hover {
    box-shadow: 0 14px 34px rgba(0,0,0,.32);
}


/* 0.6.5 datepicker contrast, calmer hover, focus image delete */
.month-grid a.muted {
    opacity: .28 !important;
    color: var(--muted) !important;
    background: transparent !important;
    font-weight: 600 !important;
}

.month-grid a.muted:hover {
    opacity: .48 !important;
    color: var(--text) !important;
    background: rgba(100,116,139,.10) !important;
}

body.theme-dark .month-grid a.muted {
    opacity: .24 !important;
    color: #64748b !important;
}

.button:hover,
.icon:hover,
.check:hover,
.nav-link:hover,
.bell:hover,
.calendar-arrow:hover,
.calendar-current:hover,
.add-task-link:hover,
.task-row:hover,
.task-card:hover,
.day-task:hover,
.project-card:hover,
.focus-lib-item button:hover,
.month-grid a:hover,
.modal-close:hover,
.custom-select-button:hover,
.custom-select-option:hover,
.row-actions .icon:hover,
.task-row .check:hover {
    transform: none !important;
}

.button:hover,
.bell:hover,
.calendar-arrow:hover,
.calendar-current:hover,
.custom-select-button:hover {
    box-shadow: 0 10px 24px rgba(15,23,42,.10) !important;
}

.task-row:hover,
.task-card:hover,
.day-task:hover,
.project-card:hover {
    box-shadow: 0 10px 26px rgba(15,23,42,.08) !important;
}

.focus-delete-form {
    margin: 10px 0 14px;
}

.focus-delete-form .button {
    width: fit-content;
}


/* 0.6.6 calmer hover style, focus library delete, visible tags */
.button:hover,
.icon:hover,
.check:hover,
.bell:hover,
.calendar-arrow:hover,
.calendar-current:hover,
.custom-select-button:hover,
.row-actions .icon:hover,
.task-row .check:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: color-mix(in srgb, var(--app-accent) 34%, var(--line)) !important;
    filter: none !important;
}

.button:not(.primary):hover,
.icon:hover,
.bell:hover,
.calendar-arrow:hover,
.calendar-current:hover,
.custom-select-button:hover {
    background: color-mix(in srgb, var(--app-accent) 9%, transparent) !important;
    color: var(--app-accent);
}

.button.primary:hover,
.focus-start:hover {
    transform: none !important;
    box-shadow: inset 0 0 0 999px rgba(255,255,255,.08) !important;
    filter: none !important;
}

.nav-link:hover {
    transform: none !important;
    background: color-mix(in srgb, var(--app-accent) 10%, transparent) !important;
    color: var(--app-accent) !important;
}

.task-row:hover,
.task-card:hover,
.day-task:hover,
.project-card:hover {
    transform: none !important;
    box-shadow: none !important;
    background: color-mix(in srgb, var(--app-accent) 5%, transparent) !important;
}

.focus-lib-card {
    position: relative;
    display: inline-block;
}

.focus-lib-delete {
    position: absolute;
    right: -8px;
    top: -8px;
}

.focus-lib-delete button {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 999px;
    color: white;
    cursor: pointer;
    font-weight: 900;
    background: var(--app-danger);
    box-shadow: 0 8px 18px rgba(255,59,48,.22);
}

.selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.muted-note {
    color: var(--muted);
    margin: 0 0 14px;
}

.add-tag-form {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.progressive-box {
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.42);
    overflow: hidden;
}

.progressive-box summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    color: var(--text);
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}

.progressive-box summary::-webkit-details-marker {
    display: none;
}

.progressive-box summary::after {
    content: "⌄";
    color: var(--muted);
    font-weight: 900;
}

.progressive-box[open] summary {
    border-bottom: 1px solid var(--line);
}

.progressive-box[open] summary::after {
    transform: rotate(180deg);
}

.progressive-box > form,
.progressive-box > .focus-preview,
.progressive-box > .focus-library,
.progressive-box > .focus-delete-form {
    margin: 14px;
}

.tag-edit-trigger {
    border: 0;
    cursor: pointer;
    font: inherit;
}

.tag-edit-trigger:hover,
.tag-edit-trigger:focus-visible {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--tag-color, #4F7CFF) 18%, transparent);
}

.tag-editor {
    margin: 12px 0 14px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--app-accent) 24%, var(--line));
    border-radius: 18px;
    background: color-mix(in srgb, var(--app-accent) 6%, rgba(255,255,255,.62));
}

.tag-editor[hidden] {
    display: none !important;
}


/* 0.6.7 simplified task creation */
.quick-create-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    max-width: 760px;
    margin: 0 auto;
}

.quick-create-form[hidden] {
    display: none !important;
}

.quick-create-form input[name="title"] {
    min-height: 52px;
    border-radius: 18px;
}

.task-create-simple {
    max-width: 860px;
    margin: 0 auto;
}

.form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .quick-create-form {
        grid-template-columns: 1fr;
    }
}


/* 0.6.8 fixes: kanban project marker, project editing, subtasks as checklist */
.task-card {
    border-left: 4px solid var(--project-color, #94A3B8) !important;
}

.kanban-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kanban-title i {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 999px;
    background: var(--project-color, #94A3B8);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--project-color, #94A3B8) 16%, transparent);
}

.kanban-project-name {
    display: block;
    margin: 6px 0 8px;
    color: var(--muted);
    font-size: 12px;
}

.project-edit {
    margin: 14px 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.30);
}

.project-edit summary {
    cursor: pointer;
    color: var(--app-accent);
    font-weight: 800;
}

.project-edit form {
    margin-top: 12px;
}

body.theme-dark .project-edit {
    background: rgba(255,255,255,.05);
}


/* 0.7.0 kanban project color, styled date inputs, task preview modal */
.task-card {
    position: relative;
    overflow: hidden;
    border-left: 0 !important;
    padding-left: 18px !important;
}

.task-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    background: var(--project-color, #94A3B8);
}

.kanban-title i {
    width: 12px !important;
    height: 12px !important;
    background: var(--project-color, #94A3B8) !important;
}

input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="number"] {
    color: var(--text);
    background: rgba(255,255,255,.76);
    border: 1px solid var(--line);
    border-radius: 16px;
    min-height: 48px;
    padding: 0 14px;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    padding: 6px;
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--app-accent) 12%, transparent);
    filter: none;
}

body.theme-dark input[type="date"],
body.theme-dark input[type="datetime-local"],
body.theme-dark input[type="time"],
body.theme-dark input[type="number"] {
    color: #f8fafc;
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.16);
    color-scheme: dark;
}

.task-preview-modal.active {
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    background: rgba(2,6,23,.46);
}

.task-preview-card {
    width: min(720px, 96vw);
    max-height: min(82vh, 760px);
    overflow: auto;
}

.task-preview-content {
    display: grid;
    gap: 18px;
}

.preview-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.preview-project-dot {
    width: 16px;
    height: 16px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--project-color, #94A3B8);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--project-color, #94A3B8) 16%, transparent);
}

.preview-head h2 {
    margin: 2px 0 0;
    font-size: clamp(26px, 4vw, 38px);
}

.preview-head small,
.preview-meta,
.preview-subtask small {
    color: var(--muted);
}

.preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.task-preview-content section h3 {
    margin: 0 0 8px;
}

.task-preview-content section p {
    margin: 0;
    line-height: 1.6;
}

.preview-subtasks {
    display: grid;
    gap: 8px;
}

.preview-subtask {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.46);
}

.preview-subtask span {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(100,116,139,.12);
    color: white;
    font-weight: 900;
}

.preview-subtask.done {
    opacity: .58;
}

.preview-subtask.done b {
    text-decoration: line-through;
}

.preview-subtask.done span {
    background: var(--app-success);
}

.preview-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

body.theme-dark .preview-subtask {
    background: rgba(255,255,255,.06);
}


/* 0.7.2 full-row preview and preview timer */
[data-task-preview-row] {
    cursor: pointer;
}

.row-actions,
.row-actions *,
.task-row form,
.task-row form *,
.task-row .icon,
.task-card a[data-task-preview] {
    cursor: auto;
}

.task-card a[data-task-preview] {
    cursor: pointer;
}

.preview-timer-form {
    margin: 0;
}


/* 0.7.4 mobile layout */
.mobile-header,
.mobile-menu-backdrop {
    display: none;
}

@media (max-width: 860px) {
    body { overflow-x: hidden; }

    .mobile-header {
        position: fixed;
        top: 10px;
        left: 10px;
        right: 10px;
        z-index: 160;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 58px;
        padding: 8px 10px;
        border-radius: 22px;
        backdrop-filter: blur(22px) saturate(150%);
        -webkit-backdrop-filter: blur(22px) saturate(150%);
    }

    .mobile-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        font-weight: 900;
        color: var(--text);
    }

    .mobile-brand img {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .mobile-brand span {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-header-actions { display: flex; gap: 6px; align-items: center; }

    .mobile-icon {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 14px;
        color: var(--text);
        background: rgba(255,255,255,.58);
        font-size: 18px;
        font-weight: 900;
        cursor: pointer;
    }

    .mobile-new-task {
        color: white !important;
        background: linear-gradient(135deg, var(--app-accent), var(--app-accent-2));
        border-color: transparent;
    }

    body.theme-dark .mobile-icon {
        color: #f8fafc;
        background: rgba(255,255,255,.08);
        border-color: rgba(255,255,255,.12);
    }

    body.theme-dark .mobile-new-task { color: white !important; }

    .mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 130;
        background: rgba(2,6,23,.46);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .mobile-menu-backdrop.active { display: block; }

    .app-shell {
        display: block !important;
        padding-top: 82px;
    }

    .sidebar {
        position: fixed !important;
        z-index: 150;
        top: 10px;
        left: 10px;
        bottom: 10px;
        width: min(82vw, 320px) !important;
        max-height: calc(100vh - 20px);
        overflow-y: auto;
        transform: translateX(calc(-100% - 24px));
        transition: transform .22s ease;
        border-radius: 26px !important;
    }

    .sidebar.mobile-open { transform: translateX(0); }

    .content {
        width: 100% !important;
        max-width: none !important;
        padding: 0 10px 24px !important;
    }

    .mova-topbar { display: none !important; }

    body.mobile-search-open .mova-topbar {
        position: fixed;
        z-index: 155;
        top: 78px;
        left: 10px;
        right: 10px;
        display: block !important;
        padding: 0;
    }

    body.mobile-search-open .mova-topbar .mova-search {
        width: 100%;
        min-height: 54px;
    }

    body.mobile-search-open .mova-topbar .mova-actions { display: none !important; }

    .mova-dashboard,
    .target-layout,
    .grid-main,
    .task-detail-grid,
    .stats,
    .two { grid-template-columns: 1fr !important; }

    .hero,
    .compact-head,
    .glass.panel,
    .mova-focus-card,
    .calendar-board {
        border-radius: 22px !important;
        padding: 18px !important;
    }

    .mova-focus-card { grid-template-columns: 1fr !important; }
    .focus-art { min-height: 160px; }

    .task-row {
        grid-template-columns: auto 1fr !important;
        gap: 10px !important;
        padding: 14px !important;
    }

    .task-row .row-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .task-subline,
    .row-tags,
    .preview-meta,
    .form-actions { flex-wrap: wrap; }

    .quick-create-form { grid-template-columns: 1fr !important; }
    .week-grid { grid-template-columns: repeat(7, 220px) !important; }

    .calendar-switcher {
        width: 100%;
        grid-template-columns: 42px 1fr 42px;
    }

    .calendar-current { min-width: 0; }
    .month-popover { left: 0 !important; width: min(320px, calc(100vw - 40px)) !important; }
}


/* 0.7.5 positive task completion animation */
.task-row {
    position: relative;
}

.task-row.completing {
    animation: taskCompletePulse .42s ease;
    border-color: color-mix(in srgb, var(--app-success) 36%, var(--line)) !important;
}

.complete-spark {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: white;
    font-size: 12px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--app-success), var(--app-accent-2));
    box-shadow: 0 10px 20px rgba(52,199,89,.24);
    animation: taskSparkFly .72s ease-out forwards;
}

@keyframes taskCompletePulse {
    0% { box-shadow: 0 0 0 0 rgba(52,199,89,.0); }
    45% { box-shadow: 0 0 0 7px rgba(52,199,89,.12); }
    100% { box-shadow: 0 0 0 0 rgba(52,199,89,.0); }
}

@keyframes taskSparkFly {
    0% { opacity: 0; transform: translate(0, 0) scale(.65); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.05); }
}


/* 0.7.7 repair: stable macOS desktop and real mobile off-canvas menu */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

@media (min-width: 861px) {
    .app-shell {
        grid-template-columns: 280px minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .sidebar {
        position: sticky !important;
        top: 22px !important;
        left: auto !important;
        bottom: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: calc(100vh - 44px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: none !important;
        visibility: visible !important;
        pointer-events: auto !important;
        border-radius: 32px !important;
    }

    .content,
    .mova-dashboard,
    .target-layout,
    .board-only,
    .mova-task-panel,
    .calendar-board,
    .glass.panel {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .mova-task-panel,
    .calendar-board {
        overflow: hidden !important;
    }

    .kanban,
    .week-grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .kanban {
        grid-template-columns: repeat(5, minmax(220px, 1fr)) !important;
    }

    .week-grid {
        grid-template-columns: repeat(7, minmax(170px, 1fr)) !important;
    }
}

@media (max-width: 860px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        touch-action: pan-y;
    }

    .mobile-header {
        display: flex !important;
    }

    .app-shell {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 82px 10px 24px !important;
        overflow-x: hidden !important;
    }

    .content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    .sidebar {
        position: fixed !important;
        z-index: 170 !important;
        top: 10px !important;
        left: 10px !important;
        right: auto !important;
        bottom: 10px !important;
        width: min(82vw, 320px) !important;
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
        max-height: calc(100dvh - 20px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-radius: 26px !important;
        transform: translate3d(calc(-100% - 28px), 0, 0) !important;
        transition: transform .22s ease, visibility .22s ease !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .sidebar.mobile-open,
    body.mobile-menu-open .sidebar {
        transform: translate3d(0, 0, 0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .mobile-menu-backdrop {
        display: none !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 150 !important;
    }

    .mobile-menu-backdrop.active,
    body.mobile-menu-open .mobile-menu-backdrop {
        display: block !important;
    }

    .mova-topbar {
        display: none !important;
    }

    body.mobile-search-open .mova-topbar {
        display: block !important;
        position: fixed !important;
        z-index: 165 !important;
        top: 78px !important;
        left: 10px !important;
        right: 10px !important;
        max-width: calc(100vw - 20px) !important;
    }

    .mova-dashboard,
    .target-layout,
    .grid-main,
    .task-detail-grid,
    .stats,
    .two {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .hero,
    .compact-head,
    .glass.panel,
    .mova-focus-card,
    .calendar-board {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .kanban,
    .week-grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .kanban { grid-template-columns: repeat(5, 240px) !important; }
    .week-grid { grid-template-columns: repeat(7, 210px) !important; }

    .task-row,
    .day-card,
    .task-card {
        max-width: 100% !important;
    }
}


/* 0.7.8 sidebar scrollbar cleanup and mobile web-app status bar */
:root {
    --app-status-bg: #F4F7FB;
}

body.theme-dark,
body.theme-system {
    --app-status-bg: #111827;
}

html,
body {
    background-color: var(--app-status-bg) !important;
}

.sidebar {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.sidebar::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

@media (min-width: 861px) {
    .sidebar {
        overflow-y: auto !important;
        scrollbar-width: none !important;
    }
}

@media (max-width: 860px) {
    html,
    body {
        background-color: var(--app-status-bg) !important;
    }

    .mobile-header {
        top: max(10px, env(safe-area-inset-top)) !important;
    }

    .app-shell {
        padding-top: calc(82px + env(safe-area-inset-top)) !important;
        padding-left: max(10px, env(safe-area-inset-left)) !important;
        padding-right: max(10px, env(safe-area-inset-right)) !important;
        padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    }

    .sidebar {
        top: max(10px, env(safe-area-inset-top)) !important;
        left: max(10px, env(safe-area-inset-left)) !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px) !important;
    }

    body.mobile-search-open .mova-topbar {
        top: calc(78px + env(safe-area-inset-top)) !important;
        left: max(10px, env(safe-area-inset-left)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
    }
}


/* 0.7.9 remove internal sidebar scroll */
.sidebar {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

@media (min-width: 861px) {
    .sidebar {
        position: sticky !important;
        top: 22px !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
        overflow-x: visible !important;
    }
}

@media (max-width: 860px) {
    .sidebar {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
        overflow-x: visible !important;
    }
}


/* 0.8.2 desktop sidebar collapse */
.sidebar-toggle {
    display: none;
}

@media (min-width: 861px) {
    .sidebar-toggle {
        display: grid;
        box-shadow: none;
    }

    .sidebar-toggle:hover {
        color: var(--text);
        background: rgba(255,255,255,.74);
    }

    .sidebar-toggle .nav-ico {
        display: grid;
        place-items: center;
        line-height: 1;
    }

    body.sidebar-collapsed .app-shell {
        grid-template-columns: 86px 1fr !important;
    }

    body.sidebar-collapsed .sidebar {
        padding: 14px 12px !important;
    }

    body.sidebar-collapsed .logo {
        justify-content: center;
        padding: 10px 0;
        margin-bottom: 24px;
    }

    body.sidebar-collapsed .logo-text,
    body.sidebar-collapsed .nav-label,
    body.sidebar-collapsed .mini-user-text {
        display: none !important;
    }

    body.sidebar-collapsed .nav-link {
        grid-template-columns: 1fr !important;
        justify-items: center;
        padding: 12px 0;
    }

    body.sidebar-collapsed .nav-link .nav-ico {
        margin: 0;
    }

    body.sidebar-collapsed .mini-user {
        justify-content: center;
        padding: 8px 0;
        background: transparent;
    }

    body.sidebar-collapsed .avatar {
        width: 38px;
        height: 38px;
    }

    body.sidebar-collapsed .sidebar-toggle .nav-ico {
        transform: rotate(180deg);
    }

    body.sidebar-collapsed .sidebar-toggle {
        aspect-ratio: 1;
    }
}


/* 0.8.0 subtask anchor */
#subtasks {
    scroll-margin-top: 24px;
}