:root {
  --bg: #1f1f1f;
  --panel: #242424;
  --panel-2: #2b2b2b;
  --text: #f3f3f3;
  --muted: #a5a5a5;
  --line: #363636;
  --accent: #e0524d;
  --accent-soft: #5a2424;
  --blue: #4b8ff5;
  --green: #37b36b;
  --gray: #8e8e8e;
  --sidebar: 270px;
  color-scheme: dark;
  --app-font: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  font-family: var(--app-font);
}

html[data-typography="inter-web"] { --app-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
html[data-typography="plex"] { --app-font: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
html[data-typography="golos"] { --app-font: "Golos Text", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
html[data-typography="rubik"] { --app-font: Rubik, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

html[data-background="neutral"] { --bg: #1d1d1d; --panel: #242424; --panel-2: #2b2b2b; --line: #363636; --neutral-sheet: #202020; --neutral-raised: #292929; --neutral-hover: #353535; --neutral-border: #464646; }
html[data-background="graphite"] { --bg: #181a1b; --panel: #202223; --panel-2: #282a2b; --line: #353839; --neutral-sheet: #1c1e1f; --neutral-raised: #27292a; --neutral-hover: #343637; --neutral-border: #454849; }
html[data-background="cool"] { --bg: #181b1f; --panel: #20242a; --panel-2: #292d33; --line: #363b42; --neutral-sheet: #1d2126; --neutral-raised: #282c32; --neutral-hover: #353a42; --neutral-border: #474d55; }
html[data-background="midnight"] { --bg: #131820; --panel: #1b222c; --panel-2: #242c37; --line: #333d49; --neutral-sheet: #171e27; --neutral-raised: #222a35; --neutral-hover: #303a47; --neutral-border: #43505f; }
html[data-background="warm"] { --bg: #201e1d; --panel: #282523; --panel-2: #302c29; --line: #3b3734; --neutral-sheet: #24211f; --neutral-raised: #2d2926; --neutral-hover: #393531; --neutral-border: #4a4541; }
html[data-background="oled"] { --bg: #0e0f10; --panel: #17191a; --panel-2: #202224; --line: #2d3032; --neutral-sheet: #121415; --neutral-raised: #1d1f21; --neutral-hover: #2a2d2f; --neutral-border: #3c4043; }

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); }
html { scrollbar-width: thin; scrollbar-color: #777 var(--bg); }
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track { background: var(--bg); }
html::-webkit-scrollbar-thumb { border: 2px solid var(--bg); border-radius: 999px; background: #747474; }
html::-webkit-scrollbar-thumb:hover { background: #969696; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.ui-icon { display: inline-block; flex: 0 0 auto; width: 14px; height: 14px; background: currentColor; mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; }
.ui-icon-tag { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 13 13 20 4 11V4h7l9 9Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.25' fill='black'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 13 13 20 4 11V4h7l9 9Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.25' fill='black'/%3E%3C/svg%3E"); }
.ui-icon-calendar { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M7 3v4M17 3v4M3 10h18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M7 3v4M17 3v4M3 10h18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ui-icon-tomorrow { color: #e9a91a; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.66 6.34l1.41-1.41' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.66 6.34l1.41-1.41' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ui-icon-weekend { color: #438be8; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11V9a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v2M4 11h16a2 2 0 0 1 2 2v5H2v-5a2 2 0 0 1 2-2ZM5 18v2M19 18v2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11V9a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v2M4 11h16a2 2 0 0 1 2 2v5H2v-5a2 2 0 0 1 2-2ZM5 18v2M19 18v2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ui-icon-next-week { color: #a66ae7; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M7 3v4M17 3v4M3 10h18M8 15h7M12 12l3 3-3 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M7 3v4M17 3v4M3 10h18M8 15h7M12 12l3 3-3 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ui-icon-no-date { color: #999; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='m7 17 10-10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='m7 17 10-10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.green { color: #45c875; }

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 45% 20%, #2a2a2a 0, var(--bg) 42%);
}
.login-panel {
  width: min(360px, calc(100vw - 32px));
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 70px rgba(0,0,0,.32);
}
.brand-dot, .avatar {
  width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center;
  background: #0d6aa8; border: 2px solid var(--accent); color: white; font-weight: 800;
}
.login-panel h1 { margin: 16px 0 24px; font-size: 34px; letter-spacing: 0; }
.login-panel label, .field { display: grid; gap: 8px; color: var(--muted); margin: 14px 0; }
.login-panel input, .settings input, .quick-add input, .quick-add textarea, select {
  width: 100%; border: 1px solid var(--line); border-radius: 6px; background: #1d1d1d; color: var(--text);
  padding: 10px 12px; outline: none;
}
.login-error { min-height: 20px; color: var(--accent); margin: 6px 0 10px; }
.login-panel button, .quick-add button[type="submit"] {
  width: 100%; border: 0; border-radius: 7px; padding: 11px 14px; background: var(--accent); color: white; font-weight: 700;
}

.app { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar); height: 100vh; padding: 16px 14px; background: var(--panel); border-right: 1px solid #292929;
  transition: transform .38s cubic-bezier(.22, 1, .36, 1), opacity .28s ease; z-index: 20;
}
.app.sidebar-collapsed .sidebar { transform: translateX(-100%); opacity: 0; pointer-events: none; }
.sidebar-top { display: flex; align-items: center; }
.profile { display: flex; align-items: center; gap: 9px; min-width: 0; height: 34px; padding: 2px 8px; border-radius: 6px; background: var(--panel); cursor: pointer; user-select: none; transition: background .16s ease; }
.profile:hover, .profile.active, .nav-item:hover, .small-link:hover { background: #353535; }
.chevron { width: 10px; height: 10px; margin-left: 1px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); color: transparent; transform: rotate(45deg) translateY(-2px); }
.sidebar-collapse, .sidebar-open { position: relative; width: 34px; height: 34px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); }
.sidebar-collapse:hover, .sidebar-open:hover { background: #343434; color: white; }
.sidebar-collapse::before, .sidebar-open::before { content: ""; position: absolute; inset: 8px; border: 1.5px solid currentColor; border-radius: 2px; }
.sidebar-collapse::after, .sidebar-open::after { content: ""; position: absolute; top: 8px; bottom: 8px; width: 1.5px; background: currentColor; }
.sidebar-collapse::after { right: 14px; }
.sidebar-open::after { left: 14px; }
.profile-menu {
  position: absolute; top: 56px; left: 10px; width: 282px; background: var(--panel-2); border: 1px solid #3b3b3b;
  border-radius: 8px; box-shadow: 0 16px 44px rgba(0,0,0,.35); overflow: hidden; z-index: 20;
}
.profile-menu button { width: 100%; background: transparent; color: var(--text); border: 0; display: flex; gap: 10px; align-items: center; padding: 14px 16px; text-align: left; }
.profile-menu button + button { border-top: 1px solid var(--line); }
.profile-summary { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 14px; border-bottom: 1px solid var(--line); }
.profile-summary .avatar { width: 30px; height: 30px; font-size: 12px; }
.profile-summary strong, .profile-summary span { display: block; }
.profile-summary span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.profile-summary i { display: block; height: 4px; margin-top: 8px; overflow: hidden; border-radius: 4px; background: #454545; }
.profile-summary i b { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.status-ring { width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--green); display: inline-block; }
.add-main {
  display: flex; align-items: center; gap: 8px; margin: 28px 0 14px; width: 100%; background: transparent; border: 0; color: var(--accent);
  font-weight: 700; text-align: left; padding: 7px 6px; border-radius: 6px;
}
.add-main span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-size: 17px; line-height: 1; }
.add-main:hover span { background: var(--accent); color: white; }
.nav { display: grid; gap: 3px; }
.nav { margin-top: 18px; }
.nav-item[data-view="projects"], .projects-section { display: none; }
.nav-item, .small-link {
  display: grid; grid-template-columns: 24px 1fr auto; align-items: center; width: 100%; min-height: 35px;
  border: 0; border-radius: 5px; background: transparent; color: var(--text); text-align: left; padding: 0 8px;
}
.nav-item b { color: var(--muted); font-size: 12px; font-weight: 500; }
.nav-item.active { color: #ff6b63; background: var(--accent-soft); }
.sidebar-section { margin-top: 24px; }
.sidebar-section h3 { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.small-link { grid-template-columns: 22px 1fr; color: #d9d9d9; }
.projects-heading { display: grid; grid-template-columns: 1fr 30px; align-items: center; min-height: 34px; border-radius: 5px; }
.projects-heading:hover, .projects-section:has(.project-menu:not(.hidden)) .projects-heading { background: #352424; }
.projects-toggle, .project-add-icon { border: 0; background: transparent; color: var(--muted); }
.projects-toggle { display: flex; align-items: center; justify-content: space-between; min-width: 0; height: 34px; padding: 0 8px; text-align: left; font-size: 13px; font-weight: 700; }
.projects-toggle i { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.projects-section.collapsed .projects-toggle i { transform: rotate(-45deg); }
.project-add-icon { width: 28px; height: 28px; border-radius: 5px; opacity: 0; font-size: 20px; }
.projects-heading:hover .project-add-icon { opacity: 1; }
.projects-section.collapsed #sidebarProjects { display: none; }
.focus-section { margin-top: 14px; }
.focus-heading { display: flex; align-items: center; min-height: 35px; border-radius: 5px; }
.focus-heading:hover { background: #303030; }
.focus-toggle { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; width: 100%; min-height: 35px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: var(--text); text-align: left; font-size: 14px; }
.focus-icon { color: #d8d8d8; font-size: 17px; line-height: 1; }
.focus-toggle i { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.focus-section.collapsed .focus-toggle i { transform: rotate(-45deg); }
.focus-section.collapsed #sidebarFocus { display: none; }
.focus-task { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; min-height: 31px; border-radius: 5px; }
.focus-drag-handle { color: #777; font-size: 15px; line-height: 1; opacity: 0; pointer-events: none; }
.focus-task:hover .focus-drag-handle { opacity: 1; }
.focus-link { width: 100%; min-width: 0; padding: 6px 8px 6px 3px; border: 0; border-radius: 5px; background: transparent; color: #d9d9d9; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.focus-task:hover .focus-link { background: #303030; color: var(--text); }
.focus-task.focus-dragging { opacity: .45; }
.focus-task.focus-drag-target::before { content: ""; position: absolute; top: -1px; right: 0; left: 0; height: 2px; border-radius: 2px; background: var(--accent); }
.sidebar-project { position: relative; }
.sidebar-project .small-link { grid-template-columns: 22px minmax(0, 1fr) 24px; padding-right: 32px; }
.sidebar-project .small-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-project .small-link b { min-width: 24px; color: var(--muted); font-size: 11px; font-weight: 500; text-align: right; }
.sidebar-project em { color: #e8b84b; font-style: normal; font-size: 10px; }
.project-hash { font-style: normal; color: #888; }
.project-hash.color-violet { color: #a36ce5; }
.project-hash.color-blue { color: #55a4ea; }
.project-hash.color-green { color: #60b873; }
.project-hash.color-red { color: #e0524d; }
.project-hash.color-yellow { color: #dca93b; }
.project-hash.color-berry { color: #dc3671; }
.project-hash.color-orange { color: #ff851b; }
.project-hash.color-olive { color: #a5ad32; }
.project-hash.color-lime { color: #72c936; }
.project-hash.color-mint { color: #4bc9b7; }
.project-hash.color-cyan { color: #1c9bbb; }
.project-hash.color-sky { color: #42b7df; }
.project-hash.color-lightblue { color: #9bc8ec; }
.project-hash.color-grape { color: #713bca; }
.project-hash.color-lavender { color: #df94bf; }
.project-hash.color-pink { color: #e34f91; }
.project-hash.color-rose { color: #ff8982; }
.project-hash.color-slate { color: #7d7d7d; }
.project-hash.color-taupe { color: #c5a68d; }
.project-menu-trigger { position: absolute; right: 3px; top: 4px; width: 28px; height: 27px; padding: 0; border: 0; border-radius: 5px; background: #3a3a3a; color: #ddd; opacity: 0; }
.sidebar-project:hover .project-menu-trigger, .project-menu-trigger:focus { opacity: 1; }
.project-menu { position: absolute; z-index: 35; left: calc(100% - 8px); top: 5px; width: 225px; padding: 5px; border: 1px solid #464646; border-radius: 8px; background: #2b2b2b; box-shadow: 0 12px 32px rgba(0,0,0,.42); }
.project-menu button { display: grid; grid-template-columns: 22px 1fr; gap: 6px; align-items: center; width: 100%; min-height: 36px; padding: 5px 8px; border: 0; border-radius: 5px; background: transparent; color: #ddd; text-align: left; font-size: 13px; }
.project-menu button:hover { background: #3a3a3a; }
.project-menu button.danger { color: #ff7770; }

.main { min-width: 0; width: 100%; max-width: 100%; margin-left: 0; padding-top: 52px; transition: width .38s cubic-bezier(.22, 1, .36, 1), margin-left .38s cubic-bezier(.22, 1, .36, 1); }
.app:not(.sidebar-collapsed) .main { width: calc(100% - var(--sidebar)); margin-left: var(--sidebar); }
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 15; height: 52px; display: flex; align-items: center; justify-content: center; padding: 0 22px; background: var(--bg); color: var(--muted);
}
.topbar-title { margin: 0; font-size: 13px; font-weight: 500; color: #ddd; opacity: 0; transition: opacity .18s ease; }
.app.scrolled .topbar-title { opacity: 1; }
.page-sync-status { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--muted); font-size: 11px; line-height: 1; white-space: nowrap; }
.page-sync-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #8a8a8a; }
.page-sync-status[data-status="pending"] { color: #c6941f; }
.page-sync-status[data-status="pending"]::before { background: #e9a91a; }
.page-sync-status[data-status="error"], .page-sync-status[data-status="offline"] { color: #de625c; }
.page-sync-status[data-status="error"]::before, .page-sync-status[data-status="offline"]::before { background: var(--accent); }
.mobile-view-switch { display: none; }
.mobile-bottom-nav { display: none; }
.sidebar-open { position: fixed; z-index: 30; top: 9px; left: calc(var(--sidebar) - 48px); visibility: visible; opacity: 1; transition: left .38s cubic-bezier(.22, 1, .36, 1), background .2s ease, color .2s ease; }
.app.sidebar-collapsed .sidebar-open { left: 12px; visibility: visible; opacity: 1; }
.icon-btn, .view-toggle, .ghost, .close {
  border: 0; background: transparent; color: var(--muted); border-radius: 6px; padding: 8px 10px;
}
.icon-btn:hover, .view-toggle:hover, .view-toggle.active, .ghost:hover, .close:hover { background: #303030; color: var(--text); }
.view-toggle { transition: background .18s ease .05s, color .18s ease .05s; }
.content { width: min(820px, calc(100vw - 32px)); margin: 18px auto 80px; }
.content.board-view, .sidebar-collapsed .content.board-view, .app:not(.sidebar-collapsed) .content.board-view { width: calc(100% - 48px); max-width: none; margin-left: 24px; margin-right: 24px; }
.display-control { position: absolute; right: 22px; }
.app.report-view .display-control { display: none; }
.display-panel { position: absolute; z-index: 40; right: 0; top: 39px; width: 300px; padding: 12px; border: 1px solid #464646; border-radius: 8px; background: #292929; box-shadow: 0 14px 36px rgba(0,0,0,.46); color: #ddd; opacity: 0; transform: translateY(-8px) scale(.98); transition: opacity .18s ease, transform .18s ease; }
.display-panel.display-ready { opacity: 1; transform: translateY(0) scale(1); }
body.display-open .app::before { content: ""; position: fixed; z-index: 14; inset: 0; background: rgba(0,0,0,.28); }
body.display-open .topbar::before { content: ""; position: absolute; z-index: 0; inset: 0; background: rgba(0,0,0,.28); pointer-events: none; }
body.display-open .display-control { z-index: 1; }
.display-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 13px; }
.layout-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 7px; background: #3a3a3a; }
.layout-switch button { display: grid; place-items: center; gap: 4px; min-height: 64px; padding: 7px; border: 0; border-radius: 6px; background: transparent; color: #bbb; font-size: 12px; }
.layout-switch button span { font-size: 18px; }
.layout-switch button.active { background: #242424; color: white; box-shadow: 0 0 0 1px #4b4b4b; }
.display-switch { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid #444; font-size: 12px; }
.display-switch input { position: absolute; opacity: 0; }
.display-switch i { position: relative; width: 32px; height: 19px; border-radius: 12px; background: #6a6a6a; }
.display-switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 13px; height: 13px; border-radius: 50%; background: white; transition: transform .16s ease; }
.display-switch input:checked + i { background: var(--accent); }
.display-switch input:checked + i::after { transform: translateX(13px); }
.display-switch:has(input:checked) > span { color: inherit; font-weight: inherit; }
.theme-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 7px; background: #3a3a3a; }
.theme-switch button { min-height: 32px; border: 0; border-radius: 5px; background: transparent; color: #bbb; font-size: 12px; }
.theme-switch button.active { background: #242424; color: white; box-shadow: 0 0 0 1px #4b4b4b; }
.display-section { padding: 13px 0 8px; font-size: 13px; }
.display-select { display: grid; grid-template-columns: 1fr 150px; align-items: center; gap: 10px; min-height: 41px; font-size: 12px; }
.display-select select { height: 31px; padding: 4px 8px; background: #242424; font-size: 12px; }
.page-head { display: flex; justify-content: space-between; align-items: start; gap: 18px; margin-bottom: 24px; }
.page-head-plain { margin-bottom: 24px; }
.page-head h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.1; letter-spacing: 0; }
.page-head p { margin: 0; color: var(--muted); font-size: 13px; }
.page-head .page-date { margin-bottom: 7px; color: var(--text); font-size: 16px; font-weight: 600; }
.task-count-icon { display: inline-grid; width: 13px; height: 13px; place-items: center; margin-right: 5px; border: 1px solid currentColor; border-radius: 50%; font-size: 9px; line-height: 1; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 5px 9px; border-radius: 6px;
  border: 1px solid var(--line); color: var(--muted); background: transparent; white-space: nowrap;
}
.pill.active { color: var(--text); border-color: #555; background: #2c2c2c; }
.pill:hover { border-color: #777; background: #393939; color: #fff; }

.task-list { border-top: 1px solid var(--line); }
.task-row {
  position: relative; display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: start; min-height: 58px;
  border-bottom: 1px solid var(--line); padding: 13px 0 11px; transition: background .12s ease, opacity .12s ease;
  user-select: none; cursor: grab;
}
.task-row, .task-row * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.task-row:hover { background: rgba(255,255,255,.022); }
.task-row.no-project { grid-template-columns: 26px minmax(0, 1fr); }
.task-row:active { cursor: grabbing; }
.task-row.dragging { background: #454545; opacity: .32; }
.drag-handle {
  position: absolute; left: -25px; top: 22.5px; width: 18px; height: 22px; display: grid; place-items: center;
  color: #aaa; font-size: 19px; line-height: 1; opacity: 0; pointer-events: none; transform: translateY(-50%); transition: opacity .14s ease;
}
.task-row:hover .drag-handle { opacity: 1; }
.task-row.drag-target::before { content: ""; position: absolute; left: -5px; right: 0; top: -2px; height: 2px; background: var(--accent); }
.task-row.drag-target::after { content: ""; position: absolute; left: -9px; top: -5px; width: 6px; height: 6px; border: 2px solid var(--accent); border-radius: 50%; background: var(--bg); }
.task-context-menu { position: fixed; z-index: 120; width: 176px; padding: 5px; border: 1px solid #464646; border-radius: 7px; background: #2b2b2b; box-shadow: 0 14px 34px rgba(0,0,0,.48); }
.task-context-menu button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px; padding: 7px 9px; border: 0; border-radius: 5px; background: transparent; color: #eee; text-align: left; font-size: 12px; }
.task-context-menu button:hover { background: #404040; }
.task-context-menu button.danger { color: #ff7770; }
.task-context-menu button.danger:hover { background: #542a2a; }
.task-menu-backdrop { position: fixed; z-index: 110; inset: 0; background: rgba(0,0,0,.58); opacity: 0; transition: opacity .18s ease; }
.task-menu-backdrop.menu-ready { opacity: 1; }
.drag-preview {
  position: fixed; left: -200vw; top: -200vh; z-index: 1000; min-height: 58px; padding: 13px 16px 11px;
  border: 1px solid #414141; border-radius: 4px; background: #242424; box-shadow: 0 10px 24px rgba(0,0,0,.48); opacity: .98;
}
.postpone-drop { display: none; height: 52px; margin-top: 30px; border: 1px dashed #777; align-items: center; justify-content: center; gap: 12px; color: #ddd; font-size: 13px; }
.postpone-drop span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); }
body.task-dragging .postpone-drop { display: flex; }
.postpone-drop.active { border-color: var(--accent); background: rgba(224,82,77,.08); }
.check {
  width: 19px; height: 19px; border-radius: 999px; border: 2px solid var(--gray); background: transparent; margin-top: 2px;
}
.check.urgent { border-color: var(--accent); }
.check.notUrgent { border-color: var(--blue); }
.check.noDate { border-color: var(--gray); }
.check::after { content: ""; display: block; width: 7px; height: 4px; margin: 4px 0 0 4px; border-left: 1.5px solid transparent; border-bottom: 1.5px solid transparent; transform: rotate(-45deg); }
.check:hover::after { border-color: #d8d8d8; }
.check.checked { border-color: #777; background: #777; }
.check.checked.urgent { border-color: var(--accent); background: var(--accent); }
.check.checked.notUrgent { border-color: var(--blue); background: var(--blue); }
.check.checked::after { border-color: white; }
.board-column .drag-handle { display: none; }
.task-row .check { margin-top: 0; }
.task-click { min-width: 0; }
.task-title { color: var(--text); font-size: 14px; font-weight: 400; line-height: 1.35; overflow-wrap: anywhere; }
.task-title.completed { color: #777; text-decoration: line-through; }
.task-meta { display: flex; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: 12px; margin-top: 8px; }
.task-subtask-progress { display: inline-flex; align-items: center; gap: 4px; color: #d0d0d0; }
.task-subtask-progress i { position: relative; display: inline-block; width: 12px; height: 12px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .95; }
.task-subtask-progress i::before, .task-subtask-progress i::after { content: ""; position: absolute; width: 3px; height: 3px; border: 1px solid currentColor; border-radius: 50%; background: var(--bg); }
.task-subtask-progress i::before { left: -2px; top: -2px; }
.task-subtask-progress i::after { right: -2px; bottom: -2px; }
.tag { border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; color: #d0d0d0; background: #252525; }
.task-label, .task-due { font-size: 12px; }
.task-label, .task-due { display: inline-flex; align-items: center; gap: 4px; }
.task-due { column-gap: 6px; }
.task-time-icon { display: inline-grid; place-items: center; }
.task-repeat { color: #aaa; font-size: 12px; }
.task-due { color: #45c875; }
.task-due.overdue { color: #ff625d; }
.label-berry { color: #dc3671 !important; }
.label-red { color: #e6534e !important; }
.label-orange { color: #ff851b !important; }
.label-yellow { color: #f1c40f !important; }
.label-olive { color: #a5ad32 !important; }
.label-lime { color: #72c936 !important; }
.label-green { color: #319c24 !important; }
.label-mint { color: #4bc9b7 !important; }
.label-cyan { color: #1c9bbb !important; }
.label-sky { color: #42b7df !important; }
.label-lightblue { color: #9bc8ec !important; }
.label-blue { color: #4a91df !important; }
.label-grape { color: #713bca !important; }
.label-violet { color: #9a65d5 !important; }
.label-lavender { color: #df94bf !important; }
.label-pink { color: #e34f91 !important; }
.label-rose { color: #ff8982 !important; }
.label-slate { color: #7d7d7d !important; }
.label-gray { color: #969696 !important; }
.label-taupe { color: #c5a68d !important; }
.project-link { min-width: 0; max-width: 220px; overflow: hidden; color: #cfcfcf; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; align-self: center; }
.completed-title { margin: 28px 0 8px; color: var(--muted); font-size: 13px; font-weight: 700; }
.completed-groups { display: grid; gap: 8px; }
.completed-groups .completed-title { margin-top: 24px; }
.inline-add { display: inline-flex; align-items: center; min-height: 46px; color: var(--muted); background: transparent; border: 0; padding: 14px 0; transition: color .16s ease; }
.inline-add span { display: inline-grid; width: 20px; height: 20px; place-items: center; margin-right: 7px; border-radius: 50%; color: var(--accent); font-size: 20px; line-height: 1; transition: background-color .16s ease, color .16s ease; }
.inline-add:hover { color: #ff716b; }
.inline-add:hover span { background: var(--accent); color: white; }
.empty { color: var(--muted); border-top: 1px solid var(--line); padding: 22px 0; }
.grouped-list { display: grid; gap: 29px; }
.task-group h2, .board-column h2 { margin: 0; padding-bottom: 9px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 500; text-transform: capitalize; }
.task-group h2 span, .board-column h2 span { margin-left: 4px; color: var(--muted); font-size: 11px; font-weight: 500; }
.task-group .task-list { border-top: 0; }
.task-board { display: grid; grid-auto-flow: column; grid-auto-columns: 260px; gap: 14px; align-items: start; min-height: 420px; overflow-x: auto; padding: 0 0 24px; }
.board-column { min-width: 0; }
.board-column .task-list { display: grid; gap: 8px; padding-top: 10px; border: 0; }
.board-column .task-row { grid-template-columns: 24px minmax(0,1fr); min-height: 68px; padding: 11px; border: 1px solid #454545; border-radius: 7px; background: #292929; box-shadow: 0 2px 7px rgba(0,0,0,.24); }
.board-column .task-row:hover { background: #303030; }
.board-column .project-link { grid-column: 2; justify-self: end; margin-top: 5px; }
.board-column .task-meta { margin-top: 6px; }
.board-column .inline-add { width: 100%; text-align: left; padding-left: 9px; }
.board-task-composer { display: grid; grid-template-columns: minmax(0, 1fr) 30px 30px; gap: 5px; margin: 8px 0 5px; padding: 6px; border: 1px solid #4a4a4a; border-radius: 6px; background: #303030; }
.board-task-composer input { min-width: 0; height: 30px; border: 0; border-bottom: 1px solid #626262; background: transparent; color: var(--text); outline: 0; }
.board-task-composer button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: #454545; color: #eee; font-size: 18px; }
.board-task-composer button[type="submit"] { background: var(--accent); color: white; }

.overdue-group { position: relative; margin-bottom: 30px; }
.overdue-group > header { display: flex; align-items: center; justify-content: space-between; min-height: 36px; border-bottom: 1px solid var(--line); }
.overdue-group h2 { margin: 0; font-size: 13px; }
.overdue-group h2 span { margin-left: 4px; color: var(--muted); font-size: 11px; font-weight: 500; }
.overdue-group > header button { border: 0; background: transparent; color: #ff625d; font-size: 12px; font-weight: 700; }
.move-overdue-popover { position: absolute; z-index: 35; right: 0; top: 38px; width: 250px; padding: 12px; border: 1px solid #494949; border-radius: 8px; background: #2b2b2b; box-shadow: 0 14px 36px rgba(0,0,0,.45); }
.move-overdue-popover > strong { display: block; margin-bottom: 10px; font-size: 13px; }
.move-overdue-popover > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.move-overdue-popover button, .move-overdue-popover input { min-height: 34px; border: 1px solid #484848; border-radius: 6px; background: #242424; color: #ddd; padding: 6px 9px; }
.move-overdue-popover label { display: grid; gap: 6px; margin: 11px 0; color: var(--muted); font-size: 11px; }
.move-overdue-popover .move-overdue-save { width: 100%; border-color: var(--accent); background: var(--accent); color: white; font-weight: 700; }

.composer-anchor-hidden { display: none !important; }
.inline-composer { position: relative; min-height: 90px; margin: 8px 0 14px; padding: 11px 12px 9px; border: 1px solid #666; border-radius: 10px; background: #292929; box-shadow: inset 0 0 0 1px rgba(255,255,255,.015); }
.composer-title { display: block; width: 100%; min-height: 31px; border: 0; background: transparent; color: var(--text); outline: 0; font-size: 16px; }
.composer-import-status { margin: 2px 0 0; color: #65c98b; font-size: 12px; }
.composer-import-status > strong { font-weight: 650; }
.composer-import-list { display: grid; gap: 2px; margin-top: 6px; }
.composer-import-list > div { display: grid; grid-template-columns: 56px minmax(0, 1fr) 24px; align-items: center; gap: 7px; min-height: 27px; border-bottom: 1px solid #3d3d3d; color: #9e9e9e; }
.composer-import-list time { color: #69c98b; font-size: 11px; white-space: nowrap; }
.composer-import-list input { width: 100%; min-width: 0; border: 0; background: transparent; color: #ddd; padding: 4px 0; outline: 0; font-size: 12px; }
.composer-import-list input:focus { color: #fff; }
.composer-import-list button { display: grid; width: 22px; height: 22px; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #999; font-size: 17px; line-height: 1; }
.composer-import-list button:hover { background: #4a3434; color: #ff7770; }
.composer-toolbar { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 7px; }
.composer-chip, .composer-close, .composer-submit { height: 31px; border: 1px solid #494949; border-radius: 7px; background: #343434; color: #ddd; }
.composer-close, .composer-submit { width: 34px; display: grid; place-items: center; padding: 0; line-height: 1; text-align: center; font-size: 24px; }
.composer-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 205px; padding: 0 9px; font-size: 12px; }
.composer-chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.composer-chip i { margin-left: 3px; color: #aaa; font-size: 15px; font-style: normal; }
.composer-due-chip { color: #45c875; }
.composer-spacer { flex: 1; }
.composer-close { position: relative; background: transparent; border-color: transparent; color: transparent; font-size: 0; }
.composer-close::before, .composer-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1px; background: #d0d0d0; transform-origin: center; }
.composer-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.composer-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.composer-close:hover { background: #3b3b3b; }
.composer-submit { border-color: var(--accent); background: var(--accent); color: white; font-weight: 700; transition: filter .14s ease, transform .1s ease; }
.composer-submit:hover { filter: brightness(1.12); }
.composer-submit:active { filter: brightness(.96); transform: translateY(1px); }
.composer-discard-dialog { position: fixed; z-index: 130; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.42); }
.composer-discard-dialog section { width: min(320px, 100%); padding: 18px; border: 1px solid #4a4a4a; border-radius: 8px; background: var(--panel-2); box-shadow: 0 16px 42px rgba(0,0,0,.4); }
.composer-discard-dialog strong { display: block; color: var(--text); font-size: 16px; }
.composer-discard-dialog section > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.composer-discard-dialog button { min-height: 34px; padding: 7px 11px; border: 1px solid #5a5a5a; border-radius: 6px; background: transparent; color: var(--text); }
.composer-discard-dialog [data-discard-draft] { border-color: var(--accent); background: var(--accent); color: white; }
.composer-option-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 31px; padding: 0 10px; border: 1px solid #494949; border-radius: 7px; background: #333; color: #ddd; font-size: 12px; }
.composer-option-chip b { color: #ddd; font-weight: 600; }
.composer-option-chip:hover, .composer-chip:hover, .composer-option-chip.active, .composer-chip.active, .repeat-toggle.active { border-color: #626262; background: #414141; }
.composer-popover { position: absolute; z-index: 45; top: calc(100% - 2px); width: 300px; padding: 8px; border: 1px solid #494949; border-radius: 8px; background: #2b2b2b; box-shadow: 0 16px 40px rgba(0,0,0,.48); }
.composer-project-popover { left: 0; }
.composer-chip[data-composer-project], .composer-project-popover, .quick-chip.project-chip, .detail-location, .detail-property[data-property="project"], .display-switch:has(#displayProjects) { display: none; }
#detailHeaderProject { display: none !important; }
.composer-due-popover { left: 0; }
.composer-priority-popover, .composer-label-popover { top: calc(100% - 2px); width: 260px; }
.composer-priority-popover { left: 285px; width: 200px; }
.composer-label-popover { left: 430px; width: 230px; }
.composer-project-list, .composer-priorities, .composer-labels { display: grid; max-height: 220px; overflow: auto; }
.composer-project-list button { display: grid; grid-template-columns: 22px minmax(0,1fr) 18px; align-items: center; gap: 6px; min-height: 36px; border: 0; border-radius: 5px; background: transparent; color: #ddd; text-align: left; }
.composer-project-list button:hover, .composer-priorities button:hover, .composer-labels label:hover { background: #3b3b3b; }
.composer-priorities { grid-template-columns: 1fr; }
.composer-priorities button, .priority-options button { min-height: 36px; border: 0; border-radius: 5px; background: transparent; color: var(--text); text-align: left; padding: 5px 8px; font-size: 13px; font-weight: 400; }
.composer-priorities button { display: grid; grid-template-columns: 18px minmax(0, 1fr) 18px; gap: 9px; align-items: center; width: 100%; padding: 7px 10px; }
.composer-priorities button > span:first-child { justify-self: center; }
.composer-priorities button > b { justify-self: end; }
.composer-priorities button.active { background: #424242; }
.composer-labels label { display: grid; grid-template-columns: 18px minmax(0, 1fr) 18px; align-items: center; gap: 8px; min-height: 32px; padding: 4px 8px; border-radius: 5px; font-size: 12px; }
.composer-labels label > span { justify-self: center; }
.composer-labels input { justify-self: end; width: 15px; height: 15px; margin: 0; }
.composer-popover.opens-up { top: auto; bottom: calc(100% - 2px); }
.time-toggle, .repeat-toggle { width: 100%; min-height: 34px; margin-top: 8px; border: 1px solid #494949; border-radius: 6px; background: transparent; color: #ccc; font-weight: 650; }
.repeat-toggle { margin-top: 7px; }
.time-toggle, .repeat-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; }
.time-toggle::before, .repeat-toggle::before { content: ""; display: inline-block; flex: 0 0 auto; width: 15px; height: 15px; background: currentColor; mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; }
.time-toggle::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7v5l3 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7v5l3 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.repeat-toggle::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m17 2 4 4-4 4M3 11V9a3 3 0 0 1 3-3h15M7 22l-4-4 4-4M21 13v2a3 3 0 0 1-3 3H3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m17 2 4 4-4 4M3 11V9a3 3 0 0 1 3-3h15M7 22l-4-4 4-4M21 13v2a3 3 0 0 1-3 3H3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.time-toggle i, .repeat-toggle i { display: grid; width: 24px; height: 24px; place-items: center; margin-left: auto; border-radius: 5px; color: #ddd; font-size: 18px; font-style: normal; font-weight: 400; line-height: 1; }
.time-toggle i:hover, .repeat-toggle i:hover { background: #4a4a4a; }
.repeat-menu { display: grid; margin-top: 7px; border: 1px solid #4a4a4a; border-radius: 7px; background: #303030; overflow: hidden; }
.repeat-menu button, .composer-repeat-popover button { min-height: 34px; padding: 6px 10px; border: 0; background: transparent; color: #eee; text-align: left; font-size: 12px; }
.repeat-menu button:hover, .composer-repeat-popover button:hover { background: #3f3f3f; }
.calendar-nav { display: inline-flex; align-items: center; gap: 3px; }
.calendar-nav button { display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #bbb; font-size: 0; line-height: 1; }
.calendar-nav button:hover { background: #414141; color: #fff; }
.calendar-nav button::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.calendar-nav button[data-composer-calendar-month="-1"]::after { transform: rotate(135deg); }
.calendar-nav button[data-composer-calendar-month="1"]::after { transform: rotate(-45deg); }
.calendar-nav button[data-composer-calendar-today]::after { width: 8px; height: 8px; border: 1.5px solid currentColor; border-radius: 50%; }
.calendar-day.repeat-day:not(.selected) { border: 1px dashed #a8a8a8; border-radius: 50%; }
.detail-property[data-property="due"] .property-popover, .composer-due-popover { overflow: visible; }
.due-time-editor { position: absolute; z-index: 10; top: calc(100% + 8px); left: 0; display: block; width: 305px; margin: 0; padding: 0; border: 1px solid #494949; border-radius: 8px; background: #2b2b2b; box-shadow: 0 14px 34px rgba(0,0,0,.46); overflow: hidden; }
.time-sheet-header { display: none; }
.time-editor-fields { padding: 13px; }
.due-time-editor label { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 12px; color: #eee; font-size: 12px; font-weight: 650; }
.due-time-editor input { width: 100%; min-height: 34px; border: 1px solid #555; border-radius: 6px; background: #252525; color: #eee; padding: 5px 8px; }
.time-desktop-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 13px; border-top: 1px solid var(--line); }
.due-time-editor .time-desktop-actions button { min-height: 34px; padding: 6px 12px; border: 0; border-radius: 6px; background: #555; color: white; font-weight: 700; }
.due-time-editor .time-desktop-actions button:last-child { background: var(--accent); }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.card { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: #222; }
.card h3 { margin: 0 0 8px; font-size: 16px; }
.card p { color: var(--muted); margin: 0; }
.labels-list { border-top: 1px solid var(--line); }
.label-card-row { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 34px; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); }
.label-open { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; width: 100%; min-height: 51px; border: 0; background: transparent; text-align: left; }
.label-open strong { color: var(--text); font-size: 14px; }
.label-open small { color: var(--muted); }
.label-edit { width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); opacity: 0; }
.label-card-row:hover .label-edit, .label-edit:focus { opacity: 1; }
.label-edit:hover { background: #363636; color: white; }
.report-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 49px; border-bottom: 1px solid var(--line); padding: 8px 8px; color: var(--muted); font-size: 12px; }
.report-row:hover { background: rgba(255,255,255,.025); }
.report-row strong { color: var(--text); font-weight: 600; }
.report-row .avatar { position: relative; width: 24px; height: 24px; border: 0; font-size: 11px; }
.report-row .avatar::after { content: "✓"; position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; display: grid; place-items: center; border-radius: 50%; background: #21a85a; color: white; font-size: 8px; }
.report-row .tag { display: inline-block; max-width: min(390px, 40vw); overflow: hidden; vertical-align: middle; text-overflow: ellipsis; white-space: nowrap; color: #ddd; font-size: 12px; }
.report-row > span:last-child { color: #d2d2d2; font-size: 11px; white-space: nowrap; }
.report-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: -10px 0 25px; }
.report-status { color: #d7d7d7; }
.report-popover { position: fixed; z-index: 25; width: 280px; padding: 10px; border: 1px solid #4b4b4b; border-radius: 7px; background: #292929; box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.report-popover header { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 7px; border-bottom: 1px solid #414141; }
.report-popover header button { width: auto; color: #ef655e; font-size: 11px; }
.report-popover strong, .report-popover label, .report-popover button { display: block; width: 100%; margin: 4px 0; text-align: left; }
.report-popover label { padding: 6px 4px; color: #ddd; font-size: 13px; }
.report-popover button { padding: 7px 6px; border: 0; border-radius: 4px; background: transparent; color: #ddd; }
.report-popover button:hover { background: #3b3b3b; }
.report-popover input[type="date"] { width: 100%; margin-top: 6px; padding: 6px; }
.report-date-range { display: grid; gap: 5px; margin-top: 8px; padding: 10px 4px 2px; border-top: 1px solid #414141; font-size: 12px; }
.report-group { margin: 0 0 34px; }
.report-group h3 { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 650; }
.report-group h3 span { color: var(--muted); font-weight: 400; }

.modal-backdrop {
  position: fixed; inset: 0; display: grid; place-items: start center; padding-top: 12vh; background: rgba(0,0,0,.58); z-index: 50;
  backdrop-filter: blur(1.5px);
}
#detailModal { opacity: 0; transition: opacity .2s ease; }
#detailModal.detail-backdrop-ready { opacity: 1; }
.quick-add, .task-detail, .settings {
  width: min(620px, calc(100vw - 28px)); border: 1px solid #3c3c3c; border-radius: 8px; background: var(--panel);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
}
.quick-add { position: relative; padding: 0; overflow: visible; }
.quick-fields { padding: 16px 16px 10px; }
.quick-add .quick-fields input, .quick-add .quick-fields textarea {
  display: block; width: 100%; border: 0; padding: 0; background: transparent; box-shadow: none; color: var(--text); resize: none;
}
.quick-add .quick-fields input { font-size: 17px; line-height: 24px; font-weight: 650; }
.quick-add .quick-fields textarea { min-height: 28px; margin-top: 5px; color: var(--muted); line-height: 20px; }
.quick-toolbar { display: flex; align-items: center; gap: 7px; padding: 0 16px 14px; flex-wrap: wrap; }
.quick-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; max-width: 185px; padding: 0 9px;
  border: 1px solid #454545; border-radius: 6px; background: transparent; color: #d0d0d0; font-size: 13px;
}
.quick-chip:hover { background: #303030; border-color: #555; }
.quick-chip select {
  width: auto; max-width: 145px; border: 0; padding: 0 18px 0 0; border-radius: 0; background: transparent; color: inherit;
  appearance: auto; font-size: 13px; outline: 0;
}
.quick-chip option { background: var(--panel-2); color: var(--text); }
.due-chip { color: #68c98b; }
.priority-chip { color: #ef7770; }
.label-popover {
  position: absolute; left: 16px; top: calc(100% - 51px); z-index: 4; width: 260px; padding: 7px;
  border: 1px solid #494949; border-radius: 8px; background: #2b2b2b; box-shadow: 0 16px 40px rgba(0,0,0,.42);
}
.label-popover label { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 5px 8px; border-radius: 5px; color: #ddd; font-size: 13px; }
.label-popover label:hover { background: #393939; }
.label-popover input { width: 15px; height: 15px; margin: 0; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); padding: 10px 12px; }
.form-actions button { width: auto !important; }
.quick-add .form-actions button[type="submit"] { padding: 8px 13px; font-size: 13px; }

.task-detail { position: relative; display: block; width: min(866px, calc(100vw - 28px)); min-height: min(760px, 86vh); overflow: visible; }
.detail-header { position: relative; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid var(--line); }
.detail-drag-handle { display: none; }
.detail-location, .detail-icon { border: 0; background: transparent; color: #ccc; }
.detail-location { display: flex; align-items: center; gap: 5px; padding: 7px 2px; font-size: 12px; font-weight: 650; }
.detail-header-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.detail-icon { min-width: 30px; height: 30px; padding: 0 7px; border-radius: 5px; font-size: 15px; }
.detail-icon:hover { background: #303030; }
.detail-icon:disabled { opacity: .28; cursor: default; }
.nav-arrow::before { content: ""; display: block; width: 7px; height: 7px; margin: 3px auto 0; border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor; transform: rotate(45deg); }
.nav-arrow.down::before { margin-top: -3px; transform: rotate(225deg); }
.detail-close { font-size: 23px; font-weight: 300; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; grid-template-rows: auto minmax(0, 1fr); min-height: calc(min(760px, 86vh) - 48px); }
.detail-main { grid-column: 1; grid-row: 1; padding: 18px 26px 0; }
.detail-side { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; padding: 12px 23px; background: #292929; border-left: 1px solid var(--line); overflow: visible; }
.detail-subtasks { grid-column: 1; grid-row: 2; align-self: start; padding: 0 26px 18px; }
.subtask-section-title { margin: 10px 0 6px; font-size: 14px; }
.detail-title { display: flex; gap: 12px; align-items: flex-start; }
.detail-title-input, .detail-description {
  width: 100%; border: 0; background: transparent; color: var(--text); outline: 0; resize: none; border-radius: 4px;
}
.detail-title-input { min-height: 31px; padding: 1px 4px; font-size: 18px; line-height: 1.35; font-weight: 700; }
.detail-description { min-height: 32px; margin: 2px 0 8px 31px; width: calc(100% - 31px); padding: 5px 4px; color: var(--muted); line-height: 1.45; }
.detail-title-input:hover, .detail-title-input:focus, .detail-description:hover, .detail-description:focus { background: rgba(255,255,255,.035); }
.subtask-head { display: flex; align-items: center; gap: 5px; width: 100%; margin: 10px 0 4px; padding: 0 0 9px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: #ddd; text-align: left; font-size: 12px; font-weight: 700; }
.subtask-count { color: var(--muted); font-weight: 500; }
.section-chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .14s ease; }
.subtask-head[aria-expanded="true"] .section-chevron { transform: rotate(45deg); margin-top: -3px; }
.subtask-row { position: relative; display: grid; grid-template-columns: 18px 22px minmax(0, 1fr) 28px; align-items: center; min-height: 40px; margin-left: 31px; border-bottom: 1px solid var(--line); }
.subtask-drag-handle { display: grid; width: 18px; height: 30px; place-items: center; padding: 0; border: 0; background: transparent; color: #777; cursor: grab; font-size: 16px; line-height: 1; opacity: 0; touch-action: none; }
.subtask-row:hover .subtask-drag-handle, .subtask-drag-handle:focus-visible { opacity: 1; }
.subtask-drag-handle:active { cursor: grabbing; }
.subtask-row.subtask-dragging, .subtask-row.subtask-touch-dragging { background: #3a3a3a; border-radius: 5px; opacity: .82; }
.subtask-row.subtask-drag-target::before { content: ""; position: absolute; top: -1px; right: 0; left: 0; height: 2px; background: var(--accent); }
.subtask-row input[type="checkbox"] { appearance: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid #9a9a9a; border-radius: 50%; background: transparent; }
.subtask-row input[type="checkbox"]:checked { border-color: #777; background: #777; box-shadow: inset 0 0 0 4px var(--panel); }
.subtask-row input[type="text"] { border: 0; background: transparent; color: var(--text); padding: 8px 4px; outline: 0; }
.subtask-row.done input[type="text"] { color: #777; text-decoration: line-through; }
.subtask-delete { border: 0; background: transparent; color: #777; opacity: 0; }
.subtask-row:hover .subtask-delete { opacity: 1; }
.subtask-add { width: calc(100% - 31px); margin: 4px 0 0 31px; }
.subtask-add:not(.has-subtasks) { margin-top: 12px; }
.subtask-start { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: #949494; font-size: 12px; font-weight: 600; }
.subtask-start > span:first-child { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; color: currentColor; font-size: 19px; font-weight: 400; line-height: 1; }
.subtask-start:hover { background: #444; color: #f1f1f1; }
.subtask-add.has-subtasks .subtask-start:hover { background: transparent; color: #ff716b; }
.subtask-add.has-subtasks .subtask-start:hover > span:first-child { background: var(--accent); color: white; font-size: 17px; }
.subtask-editor { display: grid; grid-template-columns: minmax(0, 200px) 30px; gap: 6px; align-items: center; }
.subtask-editor input { min-width: 0; height: 30px; border: 1px solid #555; border-radius: 5px; background: #242424; color: var(--text); padding: 5px 8px; outline: 0; font-size: 12px; }
.subtask-editor input:focus { border-color: #777; }
.subtask-editor button { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 5px; background: var(--accent); color: white; font-size: 17px; line-height: 1; }
.subtask-editor button:hover { background: #f06b65; }
.detail-property { position: relative; display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid #414141; }
.property-label { color: #aaa; font-size: 12px; font-weight: 650; }
.property-heading { display: flex; align-items: center; justify-content: space-between; min-height: 24px; }
.labels-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 28px; padding: 2px 8px 2px 5px; border: 0; border-radius: 5px; background: transparent; color: #aaa; text-align: left; }
.labels-title { font-size: 12px; font-weight: 700; }
.labels-trigger > .property-icon, .labels-trigger > .label-summary { display: none; }
.labels-trigger > span:last-child { font-size: 17px; line-height: 1; }
.labels-trigger:hover, .labels-property:has(.property-popover:not(.hidden)) .labels-trigger { background: #5a2929; color: #eee; }
.property-value { display: grid; grid-template-columns: 18px minmax(0, 1fr) 16px; gap: 5px; align-items: center; width: 100%; min-height: 29px; padding: 4px 3px; border: 0; border-radius: 5px; background: transparent; color: #eee; text-align: left; font-size: 12px; }
.property-value:hover, .detail-property:has(.property-popover:not(.hidden)) .property-value { background: #5a2929; }
.property-value > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.property-chevron { position: relative; width: 14px; height: 13px; margin-right: 4px; opacity: 0; color: transparent; transition: opacity .14s ease; }
.property-chevron::after { content: ""; position: absolute; left: 3px; top: 2px; width: 7px; height: 7px; border-right: 1.5px solid #d5d5d5; border-bottom: 1.5px solid #d5d5d5; transform: rotate(45deg); }
.property-value:hover .property-chevron, .detail-property:has(.property-popover:not(.hidden)) .property-chevron { opacity: 1; }
.password-message { margin: 0 0 12px; color: #ff7770; font-size: 12px; }
.password-message.success { color: #55c784; }
.property-popover, .more-popover { position: absolute; z-index: 80; border: 1px solid #4a4a4a; border-radius: 8px; background: #2b2b2b; box-shadow: 0 12px 32px rgba(0,0,0,.45); overflow: hidden; }
.property-popover { top: 64px; right: -12px; width: 300px; padding: 8px; }
.property-sheet-header, .property-sheet-cancel { display: none; }
.due-sheet-header, .mobile-next-calendar { display: none; }
.due-calendar-scroll, .due-sheet-footer { display: contents; }
.detail-property[data-property="priority"] .property-popover { left: 0; right: auto; width: 230px; }
.detail-property[data-property="due"] .property-popover { left: 0; right: auto; width: 250px; }
.labels-property .property-popover { top: 43px; left: 12px; right: auto; width: 300px; }
.more-popover { right: 44px; top: 40px; width: 170px; padding: 5px; }
.more-popover button { width: 100%; border: 0; border-radius: 5px; background: transparent; color: #ddd; padding: 9px 10px; text-align: left; }
.more-popover button:last-child { color: #ff7770; }
.more-popover button:hover { background: #3a3a3a; }
.popover-search { width: 100%; height: 34px; margin-bottom: 7px; border: 1px solid #5b5b5b; border-radius: 5px; background: #262626; color: var(--text); padding: 0 9px; outline: 0; font-size: 13px; }
.popover-options, .priority-options, .due-shortcuts { display: grid; }
.popover-options button, .priority-options button, .due-shortcuts button { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 7px; align-items: center; min-height: 36px; width: 100%; padding: 5px 7px; border: 0; border-radius: 5px; background: transparent; color: #ddd; text-align: left; font-size: 12px; }
.popover-options button:hover, .priority-options button:hover, .due-shortcuts button:hover { background: #3a3a3a; }
.popover-options b, .priority-options b { color: #ddd; }
.labels-property .label-chips { min-height: 0; padding: 2px 5px 0; }
.labels-property .label-chip { min-height: 25px; padding: 3px 7px; font-size: 11px; }
.labels-property .label-chip > span, .labels-property .label-chip > button { color: #eee; }
.popover-group { display: flex; align-items: center; gap: 7px; padding: 8px 7px 4px; color: #ddd; font-size: 12px; font-weight: 700; }
.mini-avatar { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: #147ab5; color: white; font-size: 10px; }
.due-shortcuts { margin: 0 -8px; padding: 0 8px 7px; border-bottom: 1px solid #454545; }
.due-shortcuts small { color: #bbb; }
.due-shortcut-icon { width: 17px; height: 17px; }
.sun, .flag-red { color: #ef5350; }
.violet { color: #a66ae7; }
.blue, .flag-blue { color: #438be8; }
.flag-gray { color: #8d8d8d; }
.mini-calendar { padding: 10px 5px 3px; }
.calendar-head { display: flex; justify-content: space-between; align-items: center; padding: 3px 2px 11px; text-transform: capitalize; font-size: 12px; }
.calendar-head span { color: #aaa; }
.calendar-week, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.calendar-week { color: #999; font-size: 9px; margin-bottom: 5px; }
.calendar-day { aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; color: #ddd; font-size: 11px; }
.calendar-day:hover { background: #414141; }
.calendar-day.today { background: var(--accent); color: white; font-weight: 700; }
.calendar-day.selected { outline: 1px solid var(--accent); }
.label-options { display: grid; max-height: 235px; overflow: auto; }
.label-options label { display: grid; grid-template-columns: 22px 1fr 18px; gap: 6px; align-items: center; min-height: 36px; padding: 5px 7px; border-radius: 5px; color: #ddd; font-size: 12px; }
.label-options label:hover { background: #3a3a3a; }
.label-options input { width: 15px; height: 15px; margin: 0; }
.label-not-found { min-height: 34px; padding: 9px 7px; color: #777; font-size: 12px; }
.label-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 4px; }
.label-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 27px; padding: 3px 6px 3px 9px; border-radius: 5px; background: color-mix(in srgb, currentColor 26%, #303030); color: #eee; font-size: 12px; }
.label-chip button { width: 17px; height: 17px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; opacity: .7; }
.label-chip button:hover { background: rgba(0,0,0,.18); opacity: 1; }
.label-chip.color-0 { background: #35625d; }
.label-chip.color-1 { background: #54506f; }
.label-chip.color-2 { background: #684f72; }
.label-chip.color-3 { background: #6a5539; }
.label-chip.color-4 { background: #425c74; }
.label-chip.color-5 { background: #496348; }
.label-create { display: grid; grid-template-columns: 22px 1fr; gap: 7px; align-items: center; width: calc(100% + 16px); min-height: 39px; margin: 7px -8px -8px; padding: 6px 15px; border: 0; border-top: 1px solid #454545; background: #393939; color: #eee; text-align: left; font-size: 12px; }
.label-create:hover { background: #424242; }
.danger { color: #ff7770; }

.project-modal { width: min(500px, calc(100vw - 28px)); border: 1px solid #444; border-radius: 8px; background: var(--panel); box-shadow: 0 24px 80px rgba(0,0,0,.48); overflow: hidden; }
.project-modal header { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid var(--line); }
.project-modal h2 { margin: 0; color: #fff; font-size: 18px; }
.project-modal header .close { font-size: 24px; }
.project-form-body { display: grid; gap: 16px; padding: 18px 15px; }
.project-form-body > label { display: grid; gap: 7px; color: #fff; font-size: 13px; font-weight: 700; }
.project-form-body input, .project-form-body textarea, .project-form-body select { width: 100%; border: 1px solid #4a4a4a; border-radius: 6px; background: #222; color: var(--text); padding: 10px 11px; outline: 0; }
.project-form-body #labelColor, .project-form-body #projectColor { font-size: 14px; }
.project-form-body #labelColor option, .project-form-body #projectColor option { min-height: 28px; font-size: 14px; font-weight: 600; }
.project-form-body textarea { resize: vertical; min-height: 82px; }
.repeat-every { display: grid; grid-template-columns: 72px 1fr; gap: 8px; }
.project-form-body input:focus, .project-form-body textarea:focus, .project-form-body select:focus { border-color: #4d86db; box-shadow: 0 0 0 1px #4d86db; }
#labelColor option[value="berry"], #projectColor option[value="berry"] { color: #dc3377; }
#labelColor option[value="red"], #projectColor option[value="red"] { color: #e45643; }
#labelColor option[value="orange"], #projectColor option[value="orange"] { color: #f58a1f; }
#labelColor option[value="yellow"], #projectColor option[value="yellow"] { color: #ffc617; }
#labelColor option[value="olive"], #projectColor option[value="olive"] { color: #b3b838; }
#labelColor option[value="lime"], #projectColor option[value="lime"] { color: #76c74b; }
#labelColor option[value="green"], #projectColor option[value="green"] { color: #279611; }
#labelColor option[value="mint"], #projectColor option[value="mint"] { color: #4ac7b9; }
#labelColor option[value="cyan"], #projectColor option[value="cyan"] { color: #2096b7; }
#labelColor option[value="sky"], #projectColor option[value="sky"] { color: #42b7df; }
#labelColor option[value="lightblue"], #projectColor option[value="lightblue"] { color: #9bc8ec; }
#labelColor option[value="blue"], #projectColor option[value="blue"] { color: #3676dc; }
#labelColor option[value="grape"], #projectColor option[value="grape"] { color: #713bca; }
#labelColor option[value="violet"], #projectColor option[value="violet"] { color: #773cc8; }
#labelColor option[value="lavender"], #projectColor option[value="lavender"] { color: #df94bf; }
#labelColor option[value="pink"], #projectColor option[value="pink"] { color: #e34f91; }
#labelColor option[value="rose"], #projectColor option[value="rose"] { color: #ff8982; }
#labelColor option[value="slate"], #projectColor option[value="slate"] { color: #7d7d7d; }
#labelColor option[value="gray"], #projectColor option[value="gray"] { color: #969696; }
#labelColor option[value="taupe"], #projectColor option[value="taupe"] { color: #c5a68d; }
#labelColor:has(option[value="berry"]:checked), #projectColor:has(option[value="berry"]:checked) { color: #dc3377; }
#labelColor:has(option[value="red"]:checked), #projectColor:has(option[value="red"]:checked) { color: #e45643; }
#labelColor:has(option[value="orange"]:checked), #projectColor:has(option[value="orange"]:checked) { color: #f58a1f; }
#labelColor:has(option[value="yellow"]:checked), #projectColor:has(option[value="yellow"]:checked) { color: #ffc617; }
#labelColor:has(option[value="olive"]:checked), #projectColor:has(option[value="olive"]:checked) { color: #b3b838; }
#labelColor:has(option[value="lime"]:checked), #projectColor:has(option[value="lime"]:checked) { color: #76c74b; }
#labelColor:has(option[value="green"]:checked), #projectColor:has(option[value="green"]:checked) { color: #279611; }
#labelColor:has(option[value="mint"]:checked), #projectColor:has(option[value="mint"]:checked) { color: #4ac7b9; }
#labelColor:has(option[value="cyan"]:checked), #projectColor:has(option[value="cyan"]:checked) { color: #2096b7; }
#labelColor:has(option[value="sky"]:checked), #projectColor:has(option[value="sky"]:checked) { color: #42b7df; }
#labelColor:has(option[value="lightblue"]:checked), #projectColor:has(option[value="lightblue"]:checked) { color: #9bc8ec; }
#labelColor:has(option[value="blue"]:checked), #projectColor:has(option[value="blue"]:checked) { color: #3676dc; }
#labelColor:has(option[value="grape"]:checked), #projectColor:has(option[value="grape"]:checked) { color: #713bca; }
#labelColor:has(option[value="violet"]:checked), #projectColor:has(option[value="violet"]:checked) { color: #773cc8; }
#labelColor:has(option[value="lavender"]:checked), #projectColor:has(option[value="lavender"]:checked) { color: #df94bf; }
#labelColor:has(option[value="pink"]:checked), #projectColor:has(option[value="pink"]:checked) { color: #e34f91; }
#labelColor:has(option[value="rose"]:checked), #projectColor:has(option[value="rose"]:checked) { color: #ff8982; }
#labelColor:has(option[value="slate"]:checked), #projectColor:has(option[value="slate"]:checked) { color: #7d7d7d; }
#labelColor:has(option[value="gray"]:checked), #projectColor:has(option[value="gray"]:checked) { color: #969696; }
#labelColor:has(option[value="taupe"]:checked), #projectColor:has(option[value="taupe"]:checked) { color: #c5a68d; }
#deleteTaskModal { place-items: center; padding: 16px; }
.counted-input { position: relative; }
.counted-input input { padding-right: 60px; }
.counted-input span { position: absolute; right: 10px; top: 11px; color: #bbb; font-weight: 400; }
.project-modal footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 15px; border-top: 1px solid var(--line); }
.project-modal footer button { min-height: 34px; padding: 7px 14px; border: 0; border-radius: 6px; font-weight: 700; }
.project-modal footer button[type="submit"] { background: var(--accent); color: white; }
.project-modal .project-cancel { background: #444; color: #ddd; }
.delete-project-body { padding: 20px 15px; }
.delete-project-body p { max-width: 400px; margin: 0; color: #e7e7e7; line-height: 1.55; font-size: 14px; }
.delete-project-modal footer { flex-wrap: wrap; }
.keep-project-tasks { background: #383838; color: #eee; }
.danger-delete { min-height: 34px; padding: 7px 14px; border: 0; border-radius: 6px; background: var(--accent); color: white; font-weight: 700; }
.project-description { display: block; margin: -12px 0 20px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 13px; text-align: left; }
button.project-description:hover { color: var(--text); text-decoration: underline; }
.add-project-card { border-style: dashed; text-align: left; color: var(--muted); }

.settings { width: min(1060px, calc(100vw - 28px)); min-height: 620px; display: grid; grid-template-columns: 230px 1fr; overflow: hidden; }
.settings aside { padding: 18px 12px; background: var(--panel-2); border-right: 1px solid var(--line); }
.settings h2 { margin: 0 0 16px; font-size: 18px; }
.settings-tab { width: 100%; border: 0; background: transparent; color: var(--text); text-align: left; padding: 10px 12px; border-radius: 6px; }
.settings-tab.active { background: var(--accent-soft); color: #ff746e; }
.settings-body { position: relative; padding: 24px; overflow: auto; max-height: 80vh; }
.settings-body .close { position: absolute; right: 14px; top: 12px; font-size: 24px; }
.settings-content { max-width: 520px; }
.account-photo { display: flex; align-items: center; gap: 16px; margin: 8px 0 18px; }
.account-photo .brand-dot { width: 76px; height: 76px; font-size: 34px; }
.account-photo p { margin: 9px 0 0; color: var(--muted); font-size: 12px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.account-photo .pill { margin-right: 0; cursor: pointer; }
.account-save { display: flex; justify-content: flex-end; margin-top: 42px; padding-top: 18px; border-top: 1px solid var(--line); }
.save-account { min-width: 108px; justify-content: center; border-color: #d9534f; background: #d9534f; color: white; font-weight: 700; }
.save-account:hover { border-color: #f26b65; background: #f26b65; color: white; }
.recovery-settings .ghost { margin: -4px 0 8px; }
.recovery-settings > .task-meta { margin: -12px 0 18px; }
.backup-list { display: grid; gap: 7px; max-height: 360px; overflow-y: auto; }
.backup-row { display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: 12px; align-items: center; width: 100%; min-height: 60px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--text); text-align: left; }
.backup-row:hover { background: var(--neutral-hover, #373737); }
.backup-row.active { border-color: var(--accent); background: var(--accent-soft); }
.backup-row strong, .backup-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backup-row strong { font-size: 13px; }
.backup-row small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.backup-row i { width: 16px; height: 16px; border: 1.5px solid var(--muted); border-radius: 50%; }
.backup-row.active i { border: 5px solid var(--accent); }
.backup-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.backup-actions .pill.active:disabled { cursor: not-allowed; opacity: .45; }
.backup-message { margin: 12px 0 0; color: #ff7770; font-size: 12px; }
.settings-content h2 { font-size: 20px; margin-bottom: 24px; }
.switch { display: flex; justify-content: space-between; gap: 14px; align-items: center; border-bottom: 1px solid var(--line); padding: 16px 0; }
.switch input { width: auto; }

body.light {
  --bg: #fffdfb; --panel: #faf8f5; --panel-2: #f1efeb; --text: #222; --muted: #716c66; --line: #ded9d1; --accent-soft: #ffe7e4;
  color-scheme: light;
}

.pull-refresh { display: none; }

@media (min-width: 821px) {
  .content.view-entering .task-group { animation: desktop-task-group-in .3s cubic-bezier(.22, 1, .36, 1) both; animation-delay: .08s; }
  .content.view-entering .task-group:nth-of-type(2) { animation-delay: .16s; }
  .content.view-entering .task-group:nth-of-type(3) { animation-delay: .24s; }
  .content.view-entering .task-group:nth-of-type(4) { animation-delay: .32s; }
  .content.view-entering .task-group:nth-of-type(5) { animation-delay: .4s; }
  .content.view-entering .grouped-list .task-row { animation: none; }
  .content.view-entering .task-row { animation: desktop-task-row-in .26s cubic-bezier(.22, 1, .36, 1) both; animation-delay: .08s; }
  .content.view-entering .task-row:nth-of-type(2) { animation-delay: .13s; }
  .content.view-entering .task-row:nth-of-type(3) { animation-delay: .18s; }
  .content.view-entering .task-row:nth-of-type(4) { animation-delay: .23s; }
  .content.view-entering .task-row:nth-of-type(5) { animation-delay: .28s; }
  .content.view-entering .task-row:nth-of-type(6) { animation-delay: .33s; }
  .content.view-entering .task-row:nth-of-type(7) { animation-delay: .38s; }
  .content.view-entering > .inline-add { animation: desktop-task-row-in .26s cubic-bezier(.22, 1, .36, 1) both; animation-delay: .5s; }
}

@keyframes desktop-task-group-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes desktop-task-row-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .content.view-entering .task-group, .content.view-entering .task-row, .content.view-entering > .inline-add { animation: none; }
}

@media (max-width: 820px) {
  .app, .app.sidebar-collapsed { display: block; }
  .sidebar, .app.sidebar-collapsed .sidebar, .sidebar-open { display: none; }
  .content, .content.board-view, .sidebar-collapsed .content.board-view { width: calc(100vw - 32px); margin: 10px 16px calc(166px + env(safe-area-inset-bottom)); padding-bottom: 18px; }
  .main, .app:not(.sidebar-collapsed) .main { width: 100%; min-height: 100dvh; margin-left: 0; padding-top: 78px; }
  .topbar { height: 78px; padding: 0 16px; justify-content: flex-start; }
  .topbar-title, .mobile-view-switch { display: none; }
  .pull-refresh { position: fixed; z-index: 45; top: 57px; left: 50%; display: grid; width: 38px; height: 38px; place-items: center; color: #a7a7a7; pointer-events: none; opacity: 0; transform: translate(-50%, -24px) scale(calc(.56 + var(--pull-progress, 0) * .44)); transition: opacity .15s ease, transform .15s ease, color .15s ease; }
  .pull-refresh.visible { opacity: 1; transform: translate(-50%, calc(-24px + var(--pull-progress, 0) * 30px)) scale(calc(.56 + var(--pull-progress, 0) * .44)); }
  .pull-refresh.ready, .pull-refresh.refreshing { color: var(--accent); }
  .pull-refresh.refreshing { opacity: 1; transform: translate(-50%, 6px) scale(1); }
  .pull-refresh span { display: block; font-size: 29px; line-height: 1; transform: rotate(calc(var(--pull-progress, 0) * 250deg)); transition: transform .08s linear; }
  .pull-refresh.refreshing span { animation: pull-refresh-spin .62s linear infinite; }
  .display-control { display: block; top: calc(50% - 2px); right: 16px; }
  .view-toggle, .view-toggle:hover, .view-toggle.active { width: 44px; min-height: 44px; padding: 10px; background: transparent; color: var(--accent); font-size: 0; }
  .view-toggle::before { content: ""; display: block; width: 22px; height: 19px; margin: auto; border: 1.75px solid currentColor; border-radius: 4px; background: linear-gradient(currentColor, currentColor) center 5px / 13px 1.75px no-repeat, linear-gradient(currentColor, currentColor) center 10px / 13px 1.75px no-repeat, linear-gradient(currentColor, currentColor) center 15px / 13px 1.75px no-repeat; }
  .layout-switch { display: none; }
  .mobile-bottom-nav { position: fixed; z-index: 40; left: 16px; right: 16px; bottom: calc(26px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid #454545; border-radius: 8px; background: #292929; box-shadow: 0 12px 36px rgba(0,0,0,.4); transition: opacity .16s ease; }
  .mobile-bottom-nav button { min-height: 36px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 13px; }
  .mobile-bottom-nav button.active { background: #404040; color: var(--text); }
  .display-panel { position: fixed; top: 84px; right: 10px; left: 10px; width: auto; }
  .content.view-leaving > * { animation: mobile-view-leave .18s ease forwards; pointer-events: none; }
  .content.view-entering .page-head { animation: mobile-view-heading .36s cubic-bezier(.22, 1, .36, 1) both; }
  .content.view-entering .task-group { animation: mobile-view-row .38s cubic-bezier(.22, 1, .36, 1) both; animation-delay: .14s; }
  .content.view-entering .task-group:nth-of-type(2) { animation-delay: .36s; }
  .content.view-entering .task-group:nth-of-type(3) { animation-delay: .58s; }
  .content.view-entering .task-group:nth-of-type(4) { animation-delay: .8s; }
  .content.view-entering .task-group:nth-of-type(5) { animation-delay: 1.02s; }
  .content.view-entering .grouped-list .task-row { animation: none; }
  .content.view-entering .task-row { animation: mobile-view-row .34s cubic-bezier(.22, 1, .36, 1) both; animation-delay: .14s; }
  .content.view-entering .task-row:nth-of-type(2) { animation-delay: .2s; }
  .content.view-entering .task-row:nth-of-type(3) { animation-delay: .26s; }
  .content.view-entering .task-row:nth-of-type(4) { animation-delay: .32s; }
  .content.view-entering .task-row:nth-of-type(5) { animation-delay: .38s; }
  .content.view-entering .task-row:nth-of-type(6) { animation-delay: .44s; }
  .content.view-entering .task-row:nth-of-type(7) { animation-delay: .5s; }
  .content.view-entering > .inline-add { animation: mobile-view-row .34s cubic-bezier(.22, 1, .36, 1) both; animation-delay: .84s; }
  @keyframes mobile-view-leave { to { opacity: 0; transform: translateY(-7px); } }
  @keyframes mobile-view-heading { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes mobile-view-row { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
  .page-head { display: block; }
  .toolbar { margin-top: 14px; }
  .task-row { grid-template-columns: 26px 1fr; }
  .task-row { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .task-row:not(.dragging):not(.touch-dragging):hover { background: transparent !important; }
  .task-row:hover .drag-handle { opacity: 0 !important; }
  .board-column .task-row:hover { background: #292929 !important; }
  body.light .task-row:not(.dragging):not(.touch-dragging):hover { background: transparent !important; }
  body.light .board-column .task-row:hover { background: var(--surface) !important; }
  .task-row.touch-dragging { position: relative; z-index: 8; background: #3a3a3a; box-shadow: 0 8px 22px rgba(0,0,0,.28); opacity: .92; touch-action: none; }
  body.task-menu-open { overflow: hidden; overscroll-behavior: none; }
  .task-row.mobile-context-target { position: relative; z-index: 115; border-radius: 7px; background: var(--neutral-raised, #292929); box-shadow: 0 7px 24px rgba(0,0,0,.34); pointer-events: none; }
  .mobile-task-context-menu { z-index: 120; width: min(280px, calc(100vw - 32px)); padding: 0; border-radius: 10px; opacity: 0; overflow: hidden; transform: translateY(8px) scale(.98); transition: opacity .18s ease, transform .2s cubic-bezier(.22, 1, .36, 1); }
  .mobile-task-context-menu.menu-ready { opacity: 1; transform: translateY(0) scale(1); }
  .mobile-task-context-menu button { min-height: 52px; padding: 12px 16px; border-radius: 0; font-size: 16px; }
  .mobile-task-context-menu button + button { border-top: 1px solid var(--line); }
  .task-list, .task-row, .task-click { justify-self: stretch; text-align: left; }
  .project-link { grid-column: 2; justify-self: end; max-width: 100%; }
  .task-click, .task-title { max-width: 100%; }
  .settings { grid-template-columns: 1fr; }
  .detail-layout { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
  .detail-main, .detail-side, .detail-subtasks { grid-column: auto; grid-row: auto; }
  .detail-side { border-left: 0; border-top: 1px solid var(--line); }
  .modal-backdrop:has(.task-detail) { place-items: end center; padding: 0; }
  html:has(body.composer-due-open), body.composer-due-open { overflow: hidden; overscroll-behavior: none; }
  .app:has(.inline-composer.mobile-composer-sheet)::after, .app:has(.inline-composer .composer-due-popover:not(.hidden))::after { content: ""; position: fixed; z-index: 90; inset: 0; background: rgba(0,0,0,.24); backdrop-filter: blur(1.5px); pointer-events: auto; }
  .task-detail { width: 100%; height: 59dvh; min-height: 0; max-height: calc(100dvh - 24px); overflow-y: auto; border-width: 1px 0 0; border-radius: 18px 18px 0 0; background: #202020; box-shadow: 0 -16px 50px rgba(0,0,0,.5); transform: translateY(105%); opacity: 0; transition: transform .26s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, height .22s ease; }
  .task-detail.sheet-ready { transform: none; opacity: 1; }
  .task-detail.sheet-closing, .property-popover.sheet-closing, .composer-due-popover.sheet-closing { pointer-events: none; }
  .task-detail.expanded { height: calc(100dvh - 24px); }
  .detail-header { position: sticky; top: 0; z-index: 5; height: 64px; justify-content: flex-end; padding: 20px 18px 0; border-bottom: 0; background: #202020; }
  .detail-drag-handle { position: absolute; top: 12px; left: 50%; display: block; width: 42px; height: 16px; margin-left: -21px; padding: 0; border: 0; background: transparent; touch-action: none; }
  .detail-drag-handle::after { content: ""; display: block; width: 34px; height: 4px; margin: 5px auto; border-radius: 5px; background: #777; }
  .detail-header-actions { gap: 4px; }
  .detail-header .nav-arrow { display: none; }
  .detail-icon { min-width: 34px; height: 34px; background: #353535; }
  .detail-main { padding: 8px 22px 0; }
  .detail-title { gap: 11px; }
  .detail-title-input { font-size: 19px; }
  .detail-description { margin-bottom: 4px; font-size: 16px; }
  .detail-side { padding: 0 22px; background: transparent; }
  .detail-property { padding: 0; }
  .detail-property[data-property="project"] { display: none; }
  .detail-property .property-label { display: none; }
  .property-value, .labels-trigger { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 62px; padding: 10px 2px; border-radius: 0; color: #eee; font-size: 17px; }
  .property-value:hover, .detail-property:has(.property-popover:not(.hidden)) .property-value, .labels-trigger:hover, .labels-property:has(.property-popover:not(.hidden)) .labels-trigger { background: transparent; }
  .property-icon, .labels-trigger > .property-icon { font-size: 23px; line-height: 1; color: #bdbdbd; }
  .labels-title { display: none; }
  .labels-trigger > .property-icon { display: block; }
  .property-icon.flag-red { color: #ef5350; }
  .property-icon.flag-blue { color: #438be8; }
  .property-icon.flag-gray { color: #8d8d8d; }
  .property-value[data-open-property="due"] .property-icon { color: #45c875; }
  .property-chevron, .labels-add { display: none; }
  .labels-trigger { width: 100%; text-align: left; }
  .labels-trigger > .label-summary { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
  .label-summary > span { display: inline-flex; min-height: 26px; align-items: center; padding: 2px 8px; border-radius: 5px; background: color-mix(in srgb, currentColor 24%, #303030); font-size: 14px; }
  .label-summary > .label-summary-empty { padding: 0; background: transparent; color: var(--muted); font-size: 16px; }
  .labels-property .label-chips { display: none; }
  .detail-subtasks { padding: 16px 22px 26px; }
  .subtask-section-title { margin: 0 0 8px; color: #ddd; font-size: 16px; font-weight: 700; }
  .subtask-head { width: 100%; margin: 0 0 4px; font-size: 16px; }
  .subtask-row { grid-template-columns: 20px 24px minmax(0, 1fr) 28px; min-height: 46px; margin-left: 0; }
  .subtask-drag-handle { width: 20px; height: 38px; color: #969696; opacity: 1; font-size: 17px; }
  .subtask-row input[type="text"], .subtask-editor input { font-size: 16px; }
  .subtask-add { width: 100%; margin: 7px 0 0; }
  .subtask-add:not(.has-subtasks) { margin-top: 0; }
  .subtask-start { min-height: 40px; padding: 0 4px; font-size: 15px; }
  .property-popover { position: fixed; left: 18px; right: 18px; top: 50%; width: auto; max-height: calc(100vh - 80px); overflow: auto; transform: translateY(-50%); }
  .task-detail:has(.detail-property[data-property="priority"] .property-popover:not(.hidden))::before, .task-detail:has(.labels-property .property-popover:not(.hidden))::before { content: ""; position: fixed; z-index: 70; inset: 0; background: rgba(0,0,0,.38); backdrop-filter: blur(1.5px); }
  .detail-property[data-property="priority"] .property-popover { position: fixed; z-index: 80; top: auto; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); left: 12px; width: auto; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 14px; background: #2b2b2b; overflow: hidden; transform: translateY(115%); opacity: 0; transition: transform .26s cubic-bezier(.22, 1, .36, 1), opacity .2s ease; box-shadow: 0 16px 42px rgba(0,0,0,.48); }
  .detail-property[data-property="priority"] .property-popover.sheet-ready { transform: translateY(0); opacity: 1; }
  .detail-property[data-property="priority"] .priority-options button { min-height: 58px; padding: 9px 18px; border-bottom: 1px solid #484848; border-radius: 0; font-size: 17px; }
  .detail-property[data-property="priority"] .priority-options button span:first-child { font-size: 22px; }
  .property-sheet-cancel { display: block; width: 100%; min-height: 66px; margin-top: 10px; border: 0; border-radius: 14px; background: #313131; color: #fff; font-size: 18px; font-weight: 650; }
  .labels-property .property-popover { position: fixed; z-index: 80; inset: auto 0 0; display: flex; flex-direction: column; width: 100%; height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); margin: 0; padding: 0 0 calc(10px + env(safe-area-inset-bottom)); border: 0; border-radius: 18px 18px 0 0; background: #202020; overflow: hidden; transform: translateY(105%); opacity: 0; transition: transform .26s cubic-bezier(.22, 1, .36, 1), opacity .2s ease; }
  .labels-property .property-popover.sheet-ready { transform: translateY(0); opacity: 1; }
  .property-sheet-header { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 74px; padding: 27px 20px 9px; background: #202020; }
  .property-sheet-header strong { grid-column: 2; color: #fff; font-size: 18px; }
  .property-sheet-header button { border: 0; background: transparent; color: #ff7a74; font-size: 16px; text-align: left; }
  .property-sheet-header button:last-child { text-align: right; }
  .label-sheet-content { flex: 1; min-height: 0; padding: 10px 28px 24px; overflow-y: auto; }
  .labels-property .popover-search { height: 52px; margin: 0 0 18px; border: 0; border-radius: 12px; background: #353535; font-size: 16px; }
  .labels-property .label-options { grid-template-columns: 1fr; max-height: none; overflow: hidden; border-radius: 12px; background: #2b2b2b; }
  .labels-property .label-options label { grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 10px; min-height: 62px; padding: 10px 16px; border-bottom: 1px solid #484848; border-radius: 0; font-size: 17px; }
  .labels-property .label-options label:last-child { border-bottom: 0; }
  .labels-property .label-options label > span { font-size: 22px; }
  .labels-property .label-options input { width: 28px; height: 28px; }
  .labels-property .label-options strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .detail-property[data-property="due"] .property-popover { position: fixed; inset: auto 0 0; display: flex; flex-direction: column; width: 100%; height: 72dvh; max-height: 72dvh; padding: 0 0 calc(10px + env(safe-area-inset-bottom)); border: 0; border-radius: 18px 18px 0 0; background: #202020; overflow: hidden; transform: translateY(105%); opacity: 0; transition: transform .26s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, height .22s ease; }
  .detail-property[data-property="due"] .property-popover.sheet-ready { transform: translateY(0); opacity: 1; }
  .detail-property[data-property="due"] .property-popover.expanded { height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); }
  .detail-property[data-property="due"] .due-sheet-header { position: sticky; top: 0; z-index: 4; display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 74px; padding: 27px 20px 9px; background: #202020; }
  .due-sheet-header { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 74px; padding: 27px 20px 9px; background: #202020; }
  .due-sheet-header strong { grid-column: 2; color: #fff; font-size: 18px; }
  .due-sheet-header > button:not(.due-sheet-handle) { border: 0; background: transparent; color: #ff7a74; font-size: 16px; text-align: left; }
  .due-sheet-header > [data-due-sheet-done], .due-sheet-header > [data-composer-due-done] { text-align: right !important; }
  .due-sheet-handle { position: absolute; top: 12px; left: 50%; width: 46px; height: 14px; margin-left: -23px; padding: 0; border: 0; background: transparent; touch-action: none; }
  .due-sheet-handle::after { content: ""; display: block; width: 34px; height: 4px; margin: 4px auto; border-radius: 4px; background: #777; }
  .due-calendar-scroll { display: block; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .due-sheet-footer { display: block; flex: 0 0 auto; border-top: 1px solid var(--line); background: #202020; }
  .detail-property[data-property="due"] .popover-search { width: calc(100% - 36px); height: 50px; margin: 0 18px 12px; border: 0; border-radius: 7px; background: #3b3b3b; font-size: 17px; }
  .detail-property[data-property="due"] .due-shortcuts { margin: 0; padding: 0 18px 12px; }
  .detail-property[data-property="due"] .due-shortcuts button { min-height: 55px; padding: 8px 5px; font-size: 16px; }
  .detail-property[data-property="due"] .due-shortcuts button strong { font-size: 16px; }
  .detail-property[data-property="due"] .due-shortcuts button small { font-size: 14px; }
  .detail-property[data-property="due"] .mini-calendar { padding: 13px 18px 8px; }
  .detail-property[data-property="due"] .calendar-head { font-size: 16px; }
  .detail-property[data-property="due"] .calendar-week { font-size: 14px; }
  .detail-property[data-property="due"] .calendar-day { font-size: 16px; }
  .mobile-next-calendar { display: block; border-top: 1px solid var(--line); }
  .detail-property[data-property="due"] .time-toggle, .detail-property[data-property="due"] .repeat-toggle { min-height: 54px; margin: 0; border-width: 0 0 1px; border-radius: 0; font-size: 16px; text-align: left; justify-content: flex-start; }
  .detail-property[data-property="due"] .calendar-nav, .detail-property[data-property="due"] .calendar-head > span { display: none; }
  .detail-property[data-property="due"] .repeat-menu { position: absolute; z-index: 6; right: 20px; bottom: 116px; left: 20px; margin: 0; border-radius: 12px; box-shadow: 0 14px 36px rgba(0,0,0,.48); }
  .detail-property[data-property="due"] .repeat-menu button { min-height: 52px; font-size: 16px; }
  .detail-property[data-property="due"] .due-time-editor { position: absolute; z-index: 7; inset: 0; display: block; width: auto; padding: 0 28px 28px; border: 0; border-radius: 0; background: #202020; box-shadow: none; }
  .detail-property[data-property="due"] .time-editor-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; padding: 0; }
  .detail-property[data-property="due"] .due-time-editor label { grid-template-columns: minmax(0, 1fr); gap: 5px; color: #eee; font-size: 16px; }
  .detail-property[data-property="due"] .due-time-editor input { min-width: 0; font-size: 16px; }
  .detail-property[data-property="due"] .time-desktop-actions { display: none; }
  .modal-backdrop { place-items: center; padding: 12px; }
  .quick-toolbar { align-items: stretch; }
  .quick-chip { max-width: calc(50% - 4px); }
  .project-chip { max-width: 100%; width: 100%; }
  .label-popover { top: 118px; max-height: 270px; overflow: auto; }
  .task-board { grid-auto-columns: min(82vw, 300px); }
  .project-menu { position: fixed; left: 14px; right: 14px; top: 180px; width: auto; }
  .composer-toolbar { flex-wrap: wrap; }
  .composer-mode [data-open], .composer-mode [data-inline-add], .composer-mode [data-board-add] { pointer-events: none; }
  .composer-mode .inline-composer, .composer-mode .inline-composer * { pointer-events: auto; }
  body.composer-open, body.detail-open { overflow: hidden; overscroll-behavior: none; }
  body.composer-open .mobile-bottom-nav, body.detail-open .mobile-bottom-nav { opacity: 0; pointer-events: none; }
  .inline-composer.mobile-composer-sheet { position: fixed; z-index: 95; top: auto; right: 0; bottom: 0; left: 0; width: 100%; min-height: 0; margin: 0; padding: 22px 16px 30px; border-width: 1px 0 0; border-radius: 14px 14px 0 0; box-shadow: 0 -12px 30px rgba(0,0,0,.28); }
  .inline-composer.mobile-composer-sheet.composer-docked { top: var(--composer-top); bottom: auto; }
  .inline-composer.mobile-composer-sheet .composer-close { display: none; }
  .inline-composer.mobile-composer-sheet .composer-submit { margin-left: auto; }
  .composer-chip { max-width: calc(50% - 22px); }
  .composer-spacer { display: none; }
  .composer-close { margin-left: auto; }
  .composer-popover { position: fixed; left: 12px; right: 12px; top: 96px; width: auto; max-height: calc(100vh - 120px); overflow: auto; }
  .inline-composer .composer-priority-popover { position: absolute; top: auto; right: 0; bottom: calc(100% + 8px); left: 0 !important; width: auto; max-height: none; overflow: hidden; z-index: 45; }
  .inline-composer .composer-label-popover { position: absolute; top: auto; right: 0; bottom: calc(100% + 8px); left: 0 !important; width: auto; max-height: min(280px, 42dvh); overflow-y: auto; z-index: 45; }
  .inline-composer .composer-priority-popover { position: fixed; z-index: 100; top: auto; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom) + var(--composer-keyboard-inset, 0px)); left: 12px !important; width: auto; margin: 0; padding: 0; border: 0; border-radius: 14px; background: #2b2b2b; overflow: hidden; transform: translateY(115%); opacity: 0; transition: transform .26s cubic-bezier(.22, 1, .36, 1), opacity .2s ease; box-shadow: 0 16px 42px rgba(0,0,0,.48); }
  .inline-composer .composer-priority-popover.sheet-ready { transform: translateY(0); opacity: 1; }
  .inline-composer .composer-priority-popover .composer-priorities { max-height: none; }
  .inline-composer .composer-priority-popover .composer-priorities button { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 58px; padding: 9px 18px; border: 0; border-bottom: 1px solid #484848; border-radius: 0; background: transparent; font-size: 17px; }
  .inline-composer .composer-priority-popover .composer-priorities button span:first-child { font-size: 22px; }
  .inline-composer .composer-priority-popover .composer-priorities button b { color: #ddd; }
  .inline-composer .composer-label-popover { position: fixed; z-index: 100; inset: auto 0 var(--composer-keyboard-inset, 0px); display: flex; flex-direction: column; width: 100%; height: calc(var(--composer-viewport-height, 100dvh) - 24px); max-height: calc(var(--composer-viewport-height, 100dvh) - 24px); margin: 0; padding: 0 0 calc(10px + env(safe-area-inset-bottom)); border: 0; border-radius: 18px 18px 0 0; background: #202020; overflow: hidden; transform: translateY(105%); opacity: 0; transition: transform .26s cubic-bezier(.22, 1, .36, 1), opacity .2s ease; }
  .inline-composer .composer-label-popover.sheet-ready { transform: translateY(0); opacity: 1; }
  .inline-composer .composer-label-sheet-content { flex: 1; min-height: 0; padding: 10px 28px 24px; overflow-y: auto; }
  .inline-composer .composer-label-popover .popover-search { width: 100%; height: 52px; margin: 0 0 18px; border: 0; border-radius: 12px; background: #353535; font-size: 16px; }
  .inline-composer .composer-label-popover .composer-labels { display: grid; max-height: none; overflow: hidden; border-radius: 12px; background: #2b2b2b; }
  .inline-composer .composer-label-popover .composer-labels label { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 10px; align-items: center; min-height: 62px; padding: 10px 16px; border-bottom: 1px solid #484848; border-radius: 0; font-size: 17px; }
  .inline-composer .composer-label-popover .composer-labels label:last-child { border-bottom: 0; }
  .inline-composer .composer-label-popover .composer-labels label > span { font-size: 22px; }
  .inline-composer .composer-label-popover .composer-labels input { width: 28px; height: 28px; }
  .inline-composer .composer-label-popover .composer-labels strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .inline-composer .composer-title, .inline-composer .composer-import-list input { scroll-margin-block: 34dvh; }
  .inline-composer .composer-due-popover { position: fixed; inset: auto 0 var(--composer-keyboard-inset, 0px); z-index: 100; display: flex; flex-direction: column; width: 100%; height: min(72dvh, calc(var(--composer-viewport-height, 100dvh) - 24px)); max-height: calc(var(--composer-viewport-height, 100dvh) - 24px); padding: 0 0 calc(10px + env(safe-area-inset-bottom)); border: 0; border-radius: 18px 18px 0 0; background: #202020; overflow: hidden; transform: translateY(105%); opacity: 0; transition: transform .26s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, height .22s ease; }
  .inline-composer .composer-due-popover.sheet-ready { transform: translateY(0); opacity: 1; }
  .inline-composer .composer-due-popover.opens-up { top: auto; bottom: var(--composer-keyboard-inset, 0px); }
  .inline-composer .composer-due-popover.expanded { height: calc(var(--composer-viewport-height, 100dvh) - 24px); max-height: calc(var(--composer-viewport-height, 100dvh) - 24px); }
  .inline-composer .composer-due-popover .due-calendar-scroll { display: block; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
  .inline-composer .composer-due-popover .due-sheet-footer { display: block; flex: 0 0 auto; border-top: 1px solid var(--line); background: #202020; }
  .inline-composer .composer-due-popover .popover-search { width: calc(100% - 36px); height: 50px; margin: 0 18px 12px; border: 0; border-radius: 7px; background: #3b3b3b; font-size: 17px; }
  .inline-composer .composer-due-popover .due-shortcuts { margin: 0; padding: 0 18px 12px; }
  .inline-composer .composer-due-popover .due-shortcuts button { min-height: 55px; padding: 8px 5px; font-size: 16px; }
  .inline-composer .composer-due-popover .due-shortcuts button strong { font-size: 16px; }
  .inline-composer .composer-due-popover .due-shortcuts button small { font-size: 14px; }
  .inline-composer .composer-due-popover .mini-calendar { padding: 13px 18px 8px; }
  .inline-composer .composer-due-popover .calendar-head { font-size: 16px; }
  .inline-composer .composer-due-popover .calendar-week { font-size: 14px; }
  .inline-composer .composer-due-popover .calendar-day { font-size: 16px; }
  .inline-composer .composer-due-popover .time-toggle, .inline-composer .composer-due-popover .repeat-toggle { min-height: 54px; margin: 0; border-width: 0 0 1px; border-radius: 0; font-size: 16px; text-align: left; justify-content: flex-start; }
  .inline-composer .composer-due-popover .calendar-nav, .inline-composer .composer-due-popover .calendar-head > span { display: none; }
  .inline-composer .composer-due-popover .repeat-menu { position: absolute; z-index: 6; right: 20px; bottom: 116px; left: 20px; margin: 0; border-radius: 12px; box-shadow: 0 14px 36px rgba(0,0,0,.48); }
  .inline-composer .composer-due-popover .repeat-menu button { min-height: 52px; font-size: 16px; }
  .inline-composer .composer-due-popover .due-time-editor { position: absolute; z-index: 7; inset: 0; display: block; width: auto; padding: 0 28px 28px; border: 0; border-radius: 0; background: #202020; box-shadow: none; }
  .inline-composer .composer-due-popover .time-editor-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; padding: 0; }
  .inline-composer .composer-due-popover .due-time-editor label { grid-template-columns: minmax(0, 1fr); gap: 5px; color: #eee; font-size: 16px; }
  .inline-composer .composer-due-popover .due-time-editor input { min-width: 0; font-size: 16px; }
  .inline-composer .composer-due-popover .time-desktop-actions { display: none; }
  .time-sheet-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 74px; margin: 0 -8px; padding: 27px 0 9px; }
  .time-sheet-header strong { grid-column: 2; color: #fff; font-size: 18px; }
  .due-time-editor .time-sheet-header button { min-height: 34px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #ff7a74; font-size: 16px; font-weight: 400; text-align: left; }
  .due-time-editor .time-sheet-header button:last-child { text-align: right; }
  .move-overdue-popover { position: fixed; left: 12px; right: 12px; top: 96px; width: auto; }
  .settings aside { display: flex; overflow-x: auto; gap: 6px; border-right: 0; border-bottom: 1px solid var(--line); }
  .settings-tab { min-width: max-content; }
}

@keyframes pull-refresh-spin {
  to { transform: rotate(360deg); }
}

/* Background presets only replace neutral surfaces and dividers. */
html[data-background] body:not(.light) :is(.display-panel, .project-menu, .task-context-menu, .move-overdue-popover, .composer-popover, .property-popover, .more-popover, .label-popover, .report-popover, .mobile-bottom-nav, .board-column .task-row, .inline-composer) {
  background: var(--neutral-raised);
  border-color: var(--neutral-border);
}
html[data-background] body:not(.light) :is(.task-detail, .labels-property .property-popover, .detail-property[data-property="due"] .property-popover, .inline-composer .composer-label-popover, .inline-composer .composer-due-popover, .detail-property[data-property="due"] .due-time-editor, .inline-composer .composer-due-popover .due-time-editor) {
  background: var(--neutral-sheet);
}
html[data-background] body:not(.light) :is(.detail-header, .property-sheet-header, .due-sheet-header, .due-sheet-footer, .inline-composer .composer-due-popover .due-sheet-footer) {
  background: var(--neutral-sheet);
}
html[data-background] body:not(.light) :is(.labels-property .label-options, .inline-composer .composer-label-popover .composer-labels, .detail-property[data-property="priority"] .property-popover, .inline-composer .composer-priority-popover, .detail-side) {
  background: var(--panel-2);
}
html[data-background] body:not(.light) :is(.labels-property .label-options label, .inline-composer .composer-label-popover .composer-labels label, .detail-property[data-property="priority"] .priority-options button, .inline-composer .composer-priority-popover .composer-priorities button) {
  border-color: var(--neutral-border);
}
html[data-background] body:not(.light) :is(.popover-search, .due-time-editor input) {
  background: var(--neutral-hover);
  border-color: var(--neutral-border);
}
html[data-background] body:not(.light) .repeat-menu {
  background: var(--neutral-raised);
  border-color: var(--neutral-border);
}
html[data-background] body:not(.light) .property-sheet-cancel {
  background: var(--neutral-hover);
}
html[data-background] body:not(.light) :is(.composer-chip, .composer-option-chip) {
  background: var(--neutral-raised);
  border-color: var(--neutral-border);
  color: var(--text);
}
html[data-background] body:not(.light) :is(.composer-chip, .composer-option-chip):hover,
html[data-background] body:not(.light) :is(.composer-chip, .composer-option-chip).active {
  background: var(--neutral-hover);
  border-color: color-mix(in srgb, var(--neutral-border) 72%, var(--text));
}
html[data-background] body:not(.light) :is(.label-options label:hover, .composer-labels label:hover, .priority-options button:hover, .composer-priorities button:hover, .repeat-menu button:hover, .due-shortcuts button:hover, .calendar-day:hover, .calendar-nav button:hover, .time-toggle i:hover, .repeat-toggle i:hover) {
  background: var(--neutral-hover);
}
html[data-background] body:not(.light) :is(.task-row.dragging, .task-row.touch-dragging) {
  background: var(--neutral-hover);
}
html[data-background] body:not(.light) .drag-preview {
  background: var(--neutral-raised);
  border-color: var(--neutral-border);
}
html[data-background] body:not(.light) :is(.layout-switch, .theme-switch) {
  background: var(--neutral-hover);
}
html[data-background] body:not(.light) :is(.layout-switch button.active, .theme-switch button.active) {
  background: var(--neutral-sheet);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--neutral-border);
}
html[data-background] body:not(.light) :is(.layout-switch button:not(.active):hover, .theme-switch button:not(.active):hover) {
  background: var(--neutral-raised);
  color: var(--text);
}
html[data-background] body:not(.light) .display-select select {
  background: var(--neutral-sheet);
  border-color: var(--neutral-border);
  color: var(--text);
}
html[data-background] body:not(.light) .display-select select option {
  background: var(--neutral-sheet);
  color: var(--text);
}
html[data-background] body:not(.light) .display-switch {
  border-color: var(--neutral-border);
}
html[data-background] body:not(.light) .display-switch input:not(:checked) + i {
  background: var(--neutral-border);
}
@media (min-width: 821px) {
  html[data-background] body:not(.light) :is(.labels-property .label-options, .inline-composer .composer-label-popover .composer-labels) {
    background: transparent;
  }
  html[data-background] body:not(.light) #displayButton:hover,
  html[data-background] body:not(.light) #displayButton.active {
    background: var(--neutral-raised);
    color: var(--text);
  }
}

/* Light surfaces are kept here so desktop popovers and mobile sheets share one palette. */
body.light {
  --bg: #fbfaf8;
  --panel: #fffdfb;
  --panel-2: #f5f2ee;
  --text: #292725;
  --muted: #716c66;
  --line: #ded9d1;
  --accent-soft: #ffe7e4;
  --surface: #fffdfb;
  --surface-raised: #f6f3ef;
  --surface-input: #fff;
  --surface-hover: #eeeae4;
  --surface-active: #e7e2dc;
  --control-border: #d3cdc4;
  --soft-text: #4c4844;
  --shadow: 0 14px 34px rgba(45, 39, 32, .16);
  --shadow-strong: 0 24px 70px rgba(45, 39, 32, .24);
}

html:has(body.light) { color-scheme: light; scrollbar-color: #aaa49c var(--bg); }
html:has(body.light)::-webkit-scrollbar { width: 8px; height: 8px; }
html:has(body.light)::-webkit-scrollbar-track { background: var(--bg); }
html:has(body.light)::-webkit-scrollbar-thumb { border: 2px solid var(--bg); border-radius: 999px; background: #aaa49c; }
html:has(body.light)::-webkit-scrollbar-thumb:hover { background: #827c74; }
body.light, body.light * { scrollbar-color: #aaa49c var(--surface); }
body.light::-webkit-scrollbar, body.light *::-webkit-scrollbar { width: 8px; height: 8px; }
body.light::-webkit-scrollbar-track, body.light *::-webkit-scrollbar-track { background: var(--surface); }
body.light::-webkit-scrollbar-thumb, body.light *::-webkit-scrollbar-thumb { border: 2px solid var(--surface); border-radius: 999px; background: #aaa49c; }
body.light::-webkit-scrollbar-thumb:hover, body.light *::-webkit-scrollbar-thumb:hover { background: #827c74; }
body.light :is(.label-options, .composer-labels, .label-sheet-content, .composer-label-sheet-content) { scrollbar-color: #aaa49c var(--surface); }
body.light :is(.label-options, .composer-labels, .label-sheet-content, .composer-label-sheet-content)::-webkit-scrollbar-track { background: var(--surface); }
body.light :is(.label-options, .composer-labels, .label-sheet-content, .composer-label-sheet-content)::-webkit-scrollbar-thumb { border-color: var(--surface); }
body.light .login-screen { background: radial-gradient(circle at 45% 20%, #fff 0, var(--bg) 48%); }
body.light .login-panel, body.light .project-modal, body.light .quick-add, body.light .task-detail, body.light .settings { border-color: var(--control-border); box-shadow: var(--shadow-strong); }
body.light .sidebar { border-color: var(--line); }
body.light .profile:hover, body.light .profile.active, body.light .nav-item:hover, body.light .small-link:hover,
body.light .icon-btn:hover, body.light .view-toggle:hover, body.light .view-toggle.active, body.light .ghost:hover, body.light .close:hover,
body.light .detail-icon:hover, body.light .label-edit:hover { background: var(--surface-hover); color: var(--text); }
body.light .sidebar-collapse:hover, body.light .sidebar-open:hover { background: var(--surface-hover); color: var(--text); }
body.light .profile-menu, body.light .project-menu, body.light .task-context-menu, body.light .display-panel,
body.light .move-overdue-popover, body.light .composer-popover, body.light .property-popover, body.light .more-popover,
body.light .label-popover, body.light .report-popover { background: var(--surface); border-color: var(--control-border); box-shadow: var(--shadow); color: var(--text); }
body.light .profile-summary i, body.light .display-switch i { background: #b9b3ab; }
body.light .projects-heading:hover, body.light .projects-section:has(.project-menu:not(.hidden)) .projects-heading { background: #f8e9e6; }
body.light .project-menu-trigger { background: var(--surface-active); color: var(--soft-text); }
body.light .project-menu button, body.light .task-context-menu button, body.light .more-popover button,
body.light .composer-project-list button, body.light .popover-options button, body.light .priority-options button,
body.light .due-shortcuts button, body.light .label-options label, body.light .label-popover label { color: var(--text); }
body.light .project-menu button:hover, body.light .task-context-menu button:hover, body.light .more-popover button:hover,
body.light .composer-project-list button:hover, body.light .composer-priorities button:hover, body.light .composer-labels label:hover,
body.light .popover-options button:hover, body.light .priority-options button:hover, body.light .due-shortcuts button:hover,
body.light .label-options label:hover, body.light .label-popover label:hover, body.light .report-popover button:hover { background: var(--surface-hover); }
body.light .task-context-menu button.danger:hover { background: #ffe8e5; }
body.light .focus-heading:hover { background: var(--surface-hover); }
body.light .focus-toggle { color: var(--text); }
body.light .focus-icon { color: var(--soft-text); }
body.light .focus-link { color: var(--soft-text); }
body.light .focus-task:hover .focus-link { background: var(--surface-hover); color: var(--text); }
body.light .topbar-title, body.light .small-link, body.light .project-link, body.light .task-subtask-progress,
body.light .subtask-head, body.light .property-value, body.light .popover-group { color: var(--soft-text); }
body.light .display-panel { color: var(--text); }
body.light .layout-switch { background: var(--surface-active); }
body.light .layout-switch button { color: var(--muted); }
body.light .layout-switch button.active { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--control-border); }
body.light .theme-switch { background: var(--surface-active); }
body.light .theme-switch button { color: var(--muted); }
body.light .theme-switch button.active { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--control-border); }
body.light .display-switch { border-color: var(--line); }
body.light .display-switch input:checked + i { background: var(--accent); }
body.light .display-select select, body.light .login-panel input, body.light .settings input, body.light .quick-add input,
body.light .quick-add textarea, body.light select, body.light .popover-search, body.light .move-overdue-popover input,
body.light .move-overdue-popover button, body.light .subtask-editor input, body.light .project-form-body input,
body.light .project-form-body textarea, body.light .project-form-body select, body.light .due-time-editor input { background: var(--surface-input); border-color: var(--control-border); color: var(--text); }
body.light .pill.active, body.light .composer-option-chip, body.light .composer-chip { border-color: var(--control-border); background: var(--surface-raised); color: var(--soft-text); }
body.light .pill:hover, body.light .composer-option-chip:hover, body.light .composer-chip:hover,
body.light .composer-option-chip.active, body.light .composer-chip.active, body.light .repeat-toggle.active { border-color: #bdb5ad; background: var(--surface-hover); color: var(--text); }
body.light .task-row:hover, body.light .report-row:hover { background: rgba(63, 52, 42, .035); }
body.light .quick-chip { border-color: var(--control-border); color: var(--soft-text); }
body.light .quick-chip:hover { background: var(--surface-hover); border-color: #bbb3aa; }
body.light .detail-icon { color: var(--soft-text); }
body.light .task-row.dragging, body.light .task-row.touch-dragging { background: var(--surface-active); box-shadow: 0 8px 22px rgba(47, 38, 28, .14); }
body.light .task-row.mobile-context-target { background: var(--surface); box-shadow: 0 8px 24px rgba(47, 38, 28, .18); }
body.light .drag-preview, body.light .board-column .task-row, body.light .card { background: var(--surface); border-color: var(--control-border); box-shadow: 0 2px 8px rgba(47, 38, 28, .08); }
body.light .board-column .task-row:hover { background: var(--surface-raised); }
body.light .board-task-composer, body.light .repeat-menu, body.light .due-time-editor { background: var(--surface-raised); border-color: var(--control-border); }

@media (hover: none) {
  .task-row:hover, body.light .task-row:hover { background: transparent; }
  .task-row:hover .drag-handle { opacity: 0; }
  .board-column .task-row:hover { background: #292929; }
  body.light .board-column .task-row:hover { background: var(--surface); }
}
body.light .time-desktop-actions { border-color: var(--control-border); }
body.light .due-time-editor .time-desktop-actions button:first-child { background: var(--surface-active); color: var(--text); }
body.light .board-task-composer input, body.light .composer-import-list input { color: var(--text); border-color: var(--control-border); }
body.light .board-task-composer button, body.light .repeat-toggle i:hover, body.light .calendar-nav button:hover,
body.light .calendar-day:hover { background: var(--surface-hover); color: var(--text); }
body.light .tag { background: var(--surface-raised); color: var(--soft-text); }
body.light .inline-composer { border-color: var(--control-border); background: var(--surface); box-shadow: inset 0 0 0 1px rgba(70, 58, 44, .03); }
body.light .composer-import-list > div { border-color: var(--line); color: var(--muted); }
body.light .composer-import-list input:focus { color: var(--text); }
body.light .composer-close::before, body.light .composer-close::after { background: var(--soft-text); }
body.light .composer-close:hover { background: var(--surface-hover); }
body.light .time-toggle, body.light .repeat-toggle { border-color: var(--control-border); color: var(--soft-text); }
body.light .repeat-menu button, body.light .composer-repeat-popover button { color: var(--text); }
body.light .repeat-menu button:hover, body.light .composer-repeat-popover button:hover { background: var(--surface-hover); }
body.light .calendar-head span, body.light .calendar-week, body.light .calendar-day { color: var(--soft-text); }
body.light .calendar-day.repeat-day:not(.selected) { border-color: #98928a; }
body.light .detail-side { background: var(--surface-raised); }
body.light .detail-title-input:hover, body.light .detail-title-input:focus, body.light .detail-description:hover, body.light .detail-description:focus { background: rgba(60, 49, 39, .05); }
body.light .subtask-start:hover { background: var(--surface-hover); color: var(--text); }
body.light .detail-property { border-color: var(--line); }
body.light .property-label, body.light .labels-trigger { color: var(--muted); }
body.light .labels-trigger:hover, body.light .labels-property:has(.property-popover:not(.hidden)) .labels-trigger,
body.light .property-value:hover, body.light .detail-property:has(.property-popover:not(.hidden)) .property-value { background: var(--accent-soft); color: var(--text); }
body.light .property-chevron::after { border-color: var(--soft-text); }
body.light .popover-search { color: var(--text); }
body.light .due-shortcuts, body.light .label-create { border-color: var(--line); }
body.light .due-shortcuts small { color: var(--muted); }
body.light .label-create { background: var(--surface-raised); color: var(--text); }
body.light .label-create:hover { background: var(--surface-hover); }
body.light .label-chip { background: color-mix(in srgb, currentColor 18%, #fff) !important; color: var(--soft-text); }
body.light .label-chip > span, body.light .label-chip > button { color: var(--text) !important; }
body.light .label-berry { color: #b11f58 !important; }
body.light .label-red { color: #be3733 !important; }
body.light .label-orange { color: #b45d00 !important; }
body.light .label-yellow { color: #967000 !important; }
body.light .label-olive { color: #697511 !important; }
body.light .label-lime { color: #4d851d !important; }
body.light .label-green { color: #247c31 !important; }
body.light .label-mint { color: #137b70 !important; }
body.light .label-cyan { color: #147995 !important; }
body.light .label-sky { color: #267ca4 !important; }
body.light .label-lightblue { color: #4c7fa5 !important; }
body.light .label-blue { color: #286ec4 !important; }
body.light .label-grape { color: #6030b3 !important; }
body.light .label-violet { color: #7040b0 !important; }
body.light .label-lavender { color: #a0547f !important; }
body.light .label-pink { color: #b52d70 !important; }
body.light .label-rose { color: #b65d5a !important; }
body.light .label-slate { color: #5e5e5e !important; }
body.light .label-gray { color: #686868 !important; }
body.light .label-taupe { color: #876b55 !important; }
body.light .project-modal h2, body.light .project-form-body > label, body.light .delete-project-body p { color: var(--text); }
body.light .project-modal .project-cancel, body.light .keep-project-tasks { background: var(--surface-active); color: var(--soft-text); }
body.light .backup-row { background: var(--surface); border-color: var(--control-border); }
body.light .backup-row:hover { background: var(--surface-hover); }
body.light .backup-row.active { background: var(--accent-soft); border-color: var(--accent); }
body.light .counted-input span { color: var(--muted); }
body.light .settings aside { background: var(--surface-raised); }
body.light .settings-tab.active { color: var(--accent); }
body.light .mobile-bottom-nav { border-color: var(--control-border); background: var(--surface); box-shadow: 0 12px 32px rgba(47, 38, 28, .18); }
body.light .mobile-bottom-nav button.active { background: var(--surface-active); color: var(--text); }
body.light .task-detail, body.light .detail-header, body.light .detail-property[data-property="due"] .property-popover,
body.light .inline-composer .composer-due-popover, body.light .due-sheet-header, body.light .due-sheet-footer,
body.light .detail-property[data-property="due"] .due-time-editor, body.light .inline-composer .composer-due-popover .due-time-editor { background: var(--panel); }
body.light .detail-property[data-property="due"] .popover-search, body.light .inline-composer .composer-due-popover .popover-search { background: var(--surface-input); }
body.light .detail-property[data-property="due"] .due-sheet-header,
body.light .inline-composer .composer-due-popover .due-sheet-header,
body.light .detail-property[data-property="due"] .due-calendar-scroll,
body.light .inline-composer .composer-due-popover .due-calendar-scroll { background: var(--surface); }
body.light .detail-property[data-property="due"] .due-calendar-scroll,
body.light .inline-composer .composer-due-popover .due-calendar-scroll { scrollbar-color: #aaa49c var(--surface); }
body.light .detail-property[data-property="due"] .due-calendar-scroll::-webkit-scrollbar-track,
body.light .inline-composer .composer-due-popover .due-calendar-scroll::-webkit-scrollbar-track { background: var(--surface); }
body.light .detail-property[data-property="due"] .due-calendar-scroll::-webkit-scrollbar-thumb,
body.light .inline-composer .composer-due-popover .due-calendar-scroll::-webkit-scrollbar-thumb { border-color: var(--surface); background: #aaa49c; }
body.light .detail-property[data-property="due"] .due-sheet-header strong, body.light .inline-composer .composer-due-popover .due-sheet-header strong,
body.light .detail-property[data-property="due"] .due-time-editor::before, body.light .inline-composer .composer-due-popover .due-time-editor::before,
body.light .detail-property[data-property="due"] .due-time-editor label, body.light .inline-composer .composer-due-popover .due-time-editor label { color: var(--text); }
body.light .time-sheet-header strong { color: var(--text); }
body.light .detail-side { background: var(--panel); }
body.light .detail-icon { background: var(--surface-active); }
body.light .detail-property[data-property="priority"] .property-popover,
body.light .labels-property .property-popover, body.light .inline-composer .composer-priority-popover,
body.light .inline-composer .composer-label-popover { background: var(--surface); border-color: var(--control-border); }
body.light .property-sheet-header, body.light .due-sheet-header { background: var(--surface); }
body.light .labels-property .label-options { background: var(--surface); }
body.light .inline-composer .composer-label-popover .composer-labels { background: var(--surface); }
body.light .inline-composer .composer-label-popover .property-sheet-header strong { color: var(--text); }
body.light .inline-composer .composer-label-popover .popover-search { background: var(--surface-input); border-color: var(--control-border); color: var(--text); }
body.light .labels-property .label-options label,
body.light .detail-property[data-property="priority"] .priority-options button,
body.light .inline-composer .composer-label-popover .composer-labels label,
body.light .inline-composer .composer-priority-popover .composer-priorities button { border-color: var(--line); }
body.light .property-sheet-cancel { background: var(--surface-active); color: var(--text); box-shadow: none; }
body.light .composer-priorities button.active { background: var(--surface-active); color: var(--text); }
body.light .composer-priorities button, body.light .composer-labels label, body.light .composer-chip b,
body.light .composer-option-chip b { color: var(--soft-text); }
body.light .detail-property[data-property="due"] .property-popover .due-sheet-footer,
body.light .inline-composer .composer-due-popover .due-sheet-footer { background: var(--panel); }
body.light .detail-property[data-property="due"] .time-toggle,
body.light .detail-property[data-property="due"] .repeat-toggle,
body.light .inline-composer .composer-due-popover .time-toggle,
body.light .inline-composer .composer-due-popover .repeat-toggle { background: var(--panel); color: var(--soft-text); border-color: var(--line); }
body.light .flag-red { color: #e0524d !important; }
body.light .flag-blue { color: #377edc !important; }
body.light .flag-gray { color: #74716d !important; }
body.light .subtask-section-title { color: var(--soft-text); }

@media (max-width: 820px) {
  .task-detail, .labels-property .label-options { scrollbar-width: none; }
  .task-detail::-webkit-scrollbar, .labels-property .label-options::-webkit-scrollbar { display: none; }
  body.light .label-summary > span:not(.label-summary-empty) { background: color-mix(in srgb, currentColor 18%, #fff); }
  .labels-property .label-options input, .inline-composer .composer-labels input {
    appearance: none;
    display: grid;
    place-items: center;
    margin: 0;
    border: 1.5px solid var(--muted);
    border-radius: 4px;
    background: var(--panel);
  }
  .labels-property .label-options input::after, .inline-composer .composer-labels input::after {
    content: "";
    width: 7px;
    height: 12px;
    margin-top: -3px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    opacity: 0;
    transform: rotate(45deg) scale(.7);
    transition: opacity .12s ease, transform .12s ease;
  }
  .labels-property .label-options input:checked, .inline-composer .composer-labels input:checked {
    border-color: var(--blue);
    background: var(--blue);
  }
  .labels-property .label-options input:checked::after, .inline-composer .composer-labels input:checked::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
  body.light .detail-property[data-property="due"] .popover-search,
  body.light .inline-composer .composer-due-popover .popover-search { border: 1px solid var(--control-border); }
}