:root {
  --workspace-color: #ee9416;
  --workspace-contrast: #1f2328;
  --orange: var(--workspace-color);
  --orange-2: color-mix(in srgb, var(--workspace-color) 72%, white 28%);
  --orange-soft: color-mix(in srgb, var(--workspace-color) 12%, white 88%);
  --ink: #282b30;
  --muted: #747a83;
  --line: #e6e7e9;
  --surface: #ffffff;
  --canvas: #f4f5f6;
  --danger: #bb3535;
  --success: #2a8457;
  --shadow: 0 12px 36px rgba(24, 28, 35, .16);
  --hour-height: 96px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { overflow: hidden; color: var(--ink); background: var(--canvas); font: 14.5px/1.48 Inter, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, textarea, select { color: inherit; font: inherit; }
button { cursor: pointer; }
button, input, textarea, select, .treeRow, .taskRow, .fastAdd, .toolButton, .accentButton { transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease, transform .14s ease; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid color-mix(in srgb, var(--workspace-color) 48%, white 52%); outline-offset: 2px; }
.hidden { display: none !important; }
.mobileOnly { display: none !important; }

.app { height: 100%; display: flex; flex-direction: column; }
.topbar {
  height: 66px; flex: 0 0 66px; display: flex; align-items: center; gap: 12px;
  padding: 0 17px; background: linear-gradient(100deg, var(--orange), var(--orange-2));
  border-bottom: 1px solid rgba(0,0,0,.08); z-index: 30;
}
.brand { border: 0; background: transparent; display: flex; align-items: center; gap: 10px; padding: 0; text-align: left; }
.brandMark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: #202226; color: #fff; font-size: 21px; font-weight: 800; }
.brandText strong, .brandText small { display: block; }
.brandText strong { font-size: 19px; line-height: 1.1; }
.brandText small { margin-top: 3px; color: #3e3528; font-size: 11px; max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topActions { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.workspacePicker { display: grid; gap: 1px; min-width: 145px; color: #443827; font-size: 9px; }
.workspacePicker select { max-width: 190px; border: 1px solid rgba(0,0,0,.12); border-radius: 9px; background: rgba(255,255,255,.83); padding: 5px 8px; font-size: 12px; font-weight: 700; outline: 0; }
.userButton { min-height: 40px; display: flex; align-items: center; gap: 6px; border: 0; border-radius: 10px; background: rgba(255,255,255,.18); padding: 4px 8px; }
.userButton #currentUserBadge { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: #292c31; color: #fff; font-weight: 800; }
.userButton .settingsGear { display:none; }
.userButton b { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.iconButton, .smallIcon, .dangerIcon { border: 0; background: transparent; border-radius: 9px; }
.iconButton { min-width: 40px; min-height: 40px; padding: 7px; font-size: 24px; line-height: 1; }
.iconButton:hover, .smallIcon:hover { background: rgba(255,255,255,.24); }
.quickTop { border: 1px solid rgba(0,0,0,.12); border-radius: 11px; background: rgba(255,255,255,.86); padding: 8px 13px; display: flex; align-items: center; gap: 7px; box-shadow: 0 1px 3px #0002; }
.quickTop:hover { background: #fff; }
.offlineBanner { position: fixed; top: 66px; left: 0; right: 0; z-index: 29; padding: 7px 14px; text-align: center; background: #594a38; color: #fff; font-size: 12px; }

.workspace { --sidebar-width: 330px; --plan-width: 40%; flex: 1; min-height: 0; display: grid; grid-template-columns: var(--sidebar-width) 7px minmax(420px, 1fr) 7px var(--plan-width); }
.sidebar, .mainPane, .planPane { min-width: 0; min-height: 0; background: var(--surface); }
.columnSplitter { position: relative; z-index: 15; min-width: 7px; cursor: col-resize; background: #f5f6f7; touch-action: none; }
.columnSplitter::after { content: ""; position: absolute; top: 50%; left: 2px; width: 3px; height: 46px; margin-top: -23px; border-radius: 3px; background: #c9cdd2; opacity: .6; transition: opacity .14s ease, background .14s ease; }
.columnSplitter:hover::after, .columnSplitter.active::after { opacity: 1; background: var(--workspace-color); }
body.columnResizing { cursor: col-resize !important; user-select: none; }
body.columnResizing * { cursor: col-resize !important; }
.sidebar { overflow: auto; border-right: 0; padding: 12px 11px 30px; }
.mainPane { position: relative; overflow: auto; border-right: 0; }
.planPane { overflow: hidden; display: flex; flex-direction: column; }

.miniCalendar { margin-bottom: 11px; }
.calendarHead { display: flex; align-items: center; justify-content: space-between; min-height: 35px; padding: 0 4px; }
.calendarHead strong { text-transform: capitalize; }
.calendarHead button { border: 0; background: transparent; padding: 6px 10px; font-size: 20px; }
.calendarGrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.calendarGrid > b { padding: 3px 0; font-size: 10px; color: var(--muted); }
.calendarDay { position: relative; height: 30px; border: 0; border-radius: 9px; background: transparent; font-size: 12px; }
.calendarDay:hover { background: #f1f2f3; }
.calendarDay.outside { color: #bdc0c5; }
.calendarDay.today { font-weight: 800; color: color-mix(in srgb, var(--workspace-color) 72%, #222 28%); }
.calendarDay.selected { background: var(--orange-soft); outline: 2px solid var(--orange); }
.calendarDay.hasTasks::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--orange); }

.quickNav { display: grid; gap: 2px; }
.quickNav button { width: 100%; min-height: 39px; border: 0; border-radius: 9px; background: transparent; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; padding: 5px 8px; text-align: left; }
.quickNav button:hover, .quickNav button.active { background: var(--orange-soft); }
.quickNav .navIcon { font-size: 17px; color: #5a5f67; }
.quickNav em, .treeCount { min-width: 23px; border-radius: 12px; padding: 2px 6px; background: #eceef0; color: #555c65; text-align: center; font-size: 11px; font-style: normal; }
.sideHeading { display: flex; align-items: center; justify-content: space-between; margin: 15px 4px 6px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.smallIcon { min-width: 30px; min-height: 30px; font-size: 20px; }
.projectMenuButton { min-width: 36px; height: 36px; border: 1px solid #d9dcdf; border-radius: 10px; background: #fff; color: #4c535b; font-size: 24px; line-height: 1; display: grid; place-items: center; padding: 0 0 5px; }
.projectMenuButton:hover { background: #f4f6f5; border-color: color-mix(in srgb, var(--workspace-color) 34%, #d9dcdf 66%); }
.mobileProjectMenu { display: none; }
.projectSearch { height: 36px; margin: 0 2px 6px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 9px; padding: 0 9px; color: var(--muted); }
.projectSearch input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; }
.projectTree { font-size: 14.5px; }
.treeRow { min-height: 39px; display: flex; align-items: center; gap: 6px; border-radius: 9px; padding-right: 7px; user-select: none; }
.treeRow:hover { background: #f5f6f7; }
.treeRow.active { background: color-mix(in srgb, var(--workspace-color) 10%, white 90%); box-shadow: inset 3px 0 0 var(--workspace-color); }
.treeRow.dragOver { background: var(--orange-soft); outline: 2px dashed var(--orange); }
.treeTwisty { width: 22px; height: 28px; flex: 0 0 22px; display: grid; place-items: center; border: 0; background: transparent; color: #8b9097; }
.treeFolder { color: var(--project-color, #7a8089); font-size: 14px; }
.treeTitle { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; font-weight: 550; letter-spacing: .003em; }
.treeObject { display: none; }
.treeEmpty { padding: 10px; color: var(--muted); }
.markerList { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 3px; }
.markerChip { border: 1px solid var(--marker-color, #ccc); border-radius: 14px; background: #fff; padding: 4px 8px; font-size: 11px; }
.markerChip.active { box-shadow: inset 0 0 0 2px var(--marker-color, #aaa); }
.archiveHeading { margin-top: 18px; padding-top: 9px; border-top: 1px solid var(--line); }
.archiveHeading button { width: 100%; border: 0; background: transparent; padding: 8px 5px; display: flex; justify-content: space-between; color: #6d727a; text-align: left; }
.archiveTree { opacity: .86; }

.mainHeader { min-height: 74px; position: sticky; top: 0; z-index: 12; display: flex; align-items: center; gap: 12px; padding: 10px 15px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); backdrop-filter: blur(7px); }
.titleBlock { min-width: 0; flex: 1; }
.titleBlock h1 { margin: 0; font-size: 19px; line-height: 1.22; font-weight: 720; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titleBlock small { display: block; margin-top: 3px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewModes { display: flex; align-items: center; gap: 7px; }
.segmented { display: flex; overflow: hidden; border: 1px solid #d5d7da; border-radius: 9px; background: #fff; }
.segmented button { border: 0; border-right: 1px solid #e1e2e4; background: transparent; padding: 7px 10px; }
.segmented button:last-child { border-right: 0; }
.segmented button.active { background: var(--workspace-color); color: var(--workspace-contrast, #fff); }
.segmented.compact button { padding: 6px 8px; font-size: 12px; }
.toolButton, .accentButton { min-height: 34px; border-radius: 9px; padding: 6px 10px; }
.toolButton { border: 1px solid #d5d7da; background: #fff; }
.accentButton { border: 0; background: var(--orange); color: #fff; font-weight: 700; }
.objectActions { display: flex; align-items: center; gap: 7px; }

.filterBar { position: sticky; top: 74px; z-index: 11; display: flex; align-items: end; gap: 9px; flex-wrap: wrap; padding: 9px 14px; background: #fafafa; border-bottom: 1px solid var(--line); }
.filterBar label { display: grid; gap: 3px; color: var(--muted); font-size: 10px; }
.filterBar select { min-width: 120px; border: 1px solid #d7d9dc; border-radius: 7px; background: #fff; padding: 6px; font-size: 12px; }
.filterBar .checkLabel { display: flex; align-items: center; gap: 5px; padding-bottom: 6px; color: var(--ink); font-size: 12px; }
.linkButton { border: 0; background: transparent; color: color-mix(in srgb, var(--workspace-color) 72%, #222 28%); padding: 7px; }
.fastAdd { display: flex; align-items: center; gap: 8px; margin: 11px 13px; border: 1px solid var(--line); border-radius: 11px; padding: 0 10px; background: #fff; box-shadow: 0 1px 2px #00000008; }
.fastAdd > span { color: var(--orange); font-size: 20px; }
.fastAdd input { flex: 1; min-width: 0; height: 43px; border: 0; outline: 0; background: transparent; }
.fastAdd button { border: 0; border-radius: 7px; background: var(--orange-soft); padding: 6px 10px; color: color-mix(in srgb, var(--workspace-color) 72%, #222 28%); }
.mainContent { padding-bottom: 95px; }
.emptyState { max-width: 430px; margin: 58px auto; padding: 20px; text-align: center; color: var(--muted); }
.emptyState strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: 17px; }

.taskList { border-top: 1px solid var(--line); }
.taskRow { --task-color: #d9dce0; position: relative; min-height: 66px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 2px; align-items: start; border-bottom: 1px solid var(--line); padding: 10px 10px 9px 0; background: #fff; }
.taskRow::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--task-color); }
.taskRow:hover { background: #fafcfb; box-shadow: inset 0 0 0 1px #eef1ef; }
.taskRow.dragging { opacity: .45; }
.taskRow.conflict { background: #fff3f3; }
.taskCheck { display: grid; place-items: center; padding-top: 2px; }
.taskCheck input { width: 20px; height: 20px; accent-color: var(--orange); }
.taskBody { min-width: 0; cursor: pointer; }
.taskTitle { font-size: 15px; word-break: break-word; }
.taskTitle.done { color: #969aa0; text-decoration: line-through; }
.taskStar { color: #c67500; }
.taskMeta { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 5px; color: var(--muted); font-size: 11px; }
.taskMeta span { white-space: nowrap; }
.taskNote { margin-top: 4px; color: #6d727a; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.taskActions { display: flex; align-items: center; gap: 2px; }
.taskActions button { width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: #767b82; }
.taskActions button:hover { background: #eceef0; }
.subtaskIndent { margin-left: 20px; border-left: 2px solid #eceef0; }
.contactStrip { display: flex; align-items: center; gap: 7px; margin-top: 6px; padding: 5px 7px; border-radius: 7px; background: #f7f2e9; font-size: 11px; }
.contactStrip a { color: #8d5105; font-weight: 700; text-decoration: none; }
.taskMenu { position: fixed; z-index: 80; width: 190px; display: grid; padding: 6px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: var(--shadow); }
.taskMenu button { border: 0; border-radius: 7px; background: transparent; padding: 8px 9px; text-align: left; }
.taskMenu button:hover { background: #f1f2f3; }
.taskMenu hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
.taskMenu .dangerMenu { color: var(--danger); }


.inboxIntro { margin: 0 13px 10px; border-radius: 11px; padding: 10px 12px; background: var(--orange-soft); color: #764a10; }
.triagePanel { grid-column: 1 / -1; display: grid; grid-template-columns: 1.7fr 1fr 1fr .8fr auto; gap: 7px; padding: 10px; background: #f7f8f9; border-top: 1px dashed #d5d7da; }
.triagePanel label { display: grid; gap: 3px; color: var(--muted); font-size: 10px; }
.triagePanel input, .triagePanel select { min-width: 0; width: 100%; border: 1px solid #d7d9dc; border-radius: 7px; background: #fff; padding: 7px; }
.triagePanel button { align-self: end; border: 0; border-radius: 8px; background: var(--orange); color: #fff; padding: 8px 11px; }

.searchPanel { padding: 0 13px; }
.searchInput { width: 100%; border: 1px solid #d4d6d9; border-radius: 11px; padding: 12px; font-size: 16px; }
.searchOptions { display: flex; justify-content: flex-end; padding: 8px 2px 0; color: var(--muted); font-size: 12px; }
.searchOptions label { display: flex; align-items: center; gap: 6px; }
.searchGroup h2 { margin: 19px 0 6px; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.searchResult { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 48px; border: 0; border-bottom: 1px solid var(--line); background: #fff; padding: 7px 4px; text-align: left; }
.searchResult > span:first-child { width: 28px; color: var(--orange); font-size: 18px; text-align: center; }
.searchResult div { min-width: 0; }
.searchResult b, .searchResult small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchResult small { color: var(--muted); }

.contactsPanel { padding: 5px 13px 30px; }
.contactsToolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.contactCard { margin: 8px 0; border: 1px solid var(--line); border-radius: 11px; padding: 11px; }
.contactCardHead { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; }
.contactCardHead a { color: #975700; text-decoration: none; font-weight: 700; }
.callButton { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; border-radius: 9px; padding: 7px 10px; background: var(--orange-soft); color: #8c5005; text-decoration: none; font-weight: 700; }
.contactCard select { border: 1px solid #d6d8da; border-radius: 7px; padding: 5px; }
.contactCard p { margin: 7px 0 0; color: #656a72; }
.historyList { margin: 9px 0 0; padding-left: 20px; color: #656a72; }
.historyList li { margin: 5px 0; }

.fab { position: fixed; right: calc(var(--plan-width, 40%) + 31px); bottom: 25px; z-index: 18; width: 58px; height: 58px; border: 0; border-radius: 19px; background: var(--orange); color: #fff; box-shadow: 0 8px 20px #0004; font-size: 32px; }
.fab:hover { transform: translateY(-1px); }

.planPane { background: #fbfbfc; }
.planHeader { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #dedfe2; padding: 6px 10px; text-align: center; background: #fff; }
.planHeader strong, .planHeader small { display: block; }
.planHeader strong { font-size: 14px; font-weight: 700; }
.planHeader small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.planTools { display: flex; gap: 6px; padding: 7px 10px; border-bottom: 1px solid #e4e5e7; background: #fafafa; }
.planTools button { min-height: 32px; border: 1px solid #d9dbde; border-radius: 8px; background: #fff; padding: 6px 9px; font-size: 11px; box-shadow: 0 1px 1px #00000008; }
.planTools button:hover { border-color: #c7c9cd; background: #f7f7f8; }
.unscheduledHost { max-height: 116px; overflow: auto; border-bottom: 1px solid var(--line); background: #fafafa; }
.unscheduledTitle { display: flex; justify-content: space-between; padding: 6px 9px 3px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.unscheduledTask { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin: 4px 8px; border: 1px solid #e0e1e3; border-left: 4px solid var(--task-color, #bbb); border-radius: 7px; background: #fff; padding: 6px 8px; font-size: 11px; cursor: grab; }
.unscheduledTask button { border: 0; border-radius: 6px; background: var(--orange-soft); color: #8c5107; }
.planScroll { flex: 1; min-height: 0; overflow: auto; position: relative; background: #fff; scrollbar-color: #c9ccd0 transparent; scrollbar-width: thin; }
.timeline { position: relative; margin-left: 62px; border-left: 1px solid #d6d8dc; background: #fff; }
.hourLabel { position: absolute; left: -60px; width: 53px; color: #70757d; font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; transform: translateY(-9px); }
.hourLine, .slotLine { position: absolute; left: 0; right: 0; pointer-events: none; }
.hourLine { border-top: 1px solid #d9dce0; }
.slotLine { border-top: 1px solid #f0f1f3; }
.planTask { position: absolute; z-index: 2; min-width: 58px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--task-color, #f0a126) 58%, #777 42%); border-left: 5px solid var(--task-color, #f0a126); border-radius: 7px; padding: 5px 8px 8px; background: color-mix(in srgb, var(--task-color, #f0a126) 84%, white 16%); color: var(--task-text, #212326); box-shadow: 0 1px 2px #00000020; touch-action: pan-y; cursor: grab; transition: box-shadow .12s ease, filter .12s ease; }
.planTask:hover { z-index: 6; filter: saturate(1.04); box-shadow: 0 4px 10px #00000028; }
.planTask.moving { z-index: 8; opacity: .88; box-shadow: 0 9px 20px #0004; }
.planTask b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; line-height: 1.2; }
.planTask small { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 500; line-height: 1.15; opacity: .82; font-variant-numeric: tabular-nums; }
.planTask.compact { border-left-width: 4px; padding: 2px 6px 3px; border-radius: 5px; }
.planTask.compact b { font-size: 11.5px; line-height: 1.25; }
.planTask.compact small { display: none; }
.resizeHandle { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; background: linear-gradient(transparent, rgba(0,0,0,.08)); }
.nowLine { position: absolute; left: 0; right: 0; z-index: 7; border-top: 2px solid #ed315a; pointer-events: none; }
.nowLine::before { content: ""; position: absolute; left: -5px; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: #ed315a; }
.timeline.dropReady { outline: 2px dashed var(--orange); outline-offset: -3px; }

.backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: rgba(24,27,32,.55); }
.modal { width: min(780px, 96vw); max-height: min(900px, 94vh); overflow: auto; border-radius: 15px; background: #fff; box-shadow: var(--shadow); }
.modalHeader { position: sticky; top: 0; z-index: 3; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 9px; border-bottom: 1px solid var(--line); padding: 7px 13px; background: rgba(255,255,255,.97); }
.modalHeader strong { font-size: 16px; }
.dangerIcon { padding: 7px 9px; color: var(--danger); }
.modalBody { padding: 15px; }
.formGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.field { display: grid; gap: 5px; margin-bottom: 11px; }
.field.full { grid-column: 1 / -1; }
.field > span, .field > label { color: var(--muted); font-size: 11px; }
.field input, .field textarea, .field select, .titleEditor { width: 100%; min-width: 0; border: 1px solid #d8dade; border-radius: 9px; background: #fff; padding: 9px 10px; outline: 0; }
.field input:focus, .field textarea:focus, .field select:focus, .titleEditor:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(238,148,22,.13); }
.titleEditor { margin-bottom: 13px; border-width: 0 0 1px; border-radius: 0; padding: 7px 0 11px; font-size: 22px; }
.primaryButton, .secondaryButton, .dangerButton { min-height: 42px; border: 0; border-radius: 9px; padding: 9px 13px; font-weight: 700; }
.primaryButton { background: var(--orange); color: #fff; }
.secondaryButton { background: #eceef0; }
.dangerButton { background: #faeaea; color: var(--danger); }
.formActions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.formActions button { min-width: 130px; }
.formSection { margin: 15px 0 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.formSection h3 { margin: 0 0 9px; font-size: 13px; }
.checklistRows { display: grid; gap: 5px; }
.checklistRow { display: grid; grid-template-columns: 25px 1fr 30px; align-items: center; gap: 5px; }
.checklistRow input[type="text"] { border: 1px solid #d8dade; border-radius: 7px; padding: 7px; }
.checklistRow button { border: 0; background: transparent; color: var(--danger); }
.attachmentList { display: grid; gap: 5px; }
.attachmentItem { display: flex; align-items: center; justify-content: space-between; gap: 7px; border-radius: 7px; padding: 6px 8px; background: #f2f3f4; }
.attachmentItem a { color: #8b5109; }
.comment { margin: 5px 0; border-radius: 8px; padding: 7px 9px; background: #f5f6f7; }
.comment small { display: block; color: var(--muted); }
.relatedContact { border-radius: 10px; padding: 10px; background: var(--orange-soft); }
.relatedContact a { color: #8c5005; font-weight: 700; }
.auditList { display: grid; gap: 5px; color: #626871; font-size: 12px; }
.auditItem { display: grid; grid-template-columns: 105px 1fr; gap: 8px; border-radius: 7px; padding: 6px 8px; background: #f5f6f7; }
.accessRows, .accessList { display: grid; gap: 6px; }
.accessRow { display: grid; grid-template-columns: 1fr 145px; gap: 8px; align-items: center; }
.accessRow span, .memberRow span { min-width: 0; }
.accessRow b, .accessRow small, .memberRow b, .memberRow small { display: block; }
.accessRow small, .memberRow small, .mutedText { color: var(--muted); font-size: 11px; }
.accessRow select { border: 1px solid #d8dade; border-radius: 8px; padding: 7px; background: #fff; }
.settingsIdentity { display: flex; align-items: center; gap: 11px; border-radius: 12px; padding: 11px; background: var(--orange-soft); }
.settingsIdentity b, .settingsIdentity small { display: block; }
.settingsIdentity small { color: var(--muted); }
.userAvatar { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; background: var(--orange); color: #fff; font-size: 20px; font-weight: 800; }
.memberList { display: grid; gap: 6px; }
.memberRow { display: grid; grid-template-columns: minmax(0,1fr) 140px auto; gap: 7px; align-items: center; border-bottom: 1px solid var(--line); padding: 7px 0; }
.memberRow select { min-width: 0; border: 1px solid #d8dade; border-radius: 8px; padding: 8px; background: #fff; }
.memberRow .secondaryButton { min-height: 36px; padding: 6px 9px; }
.embeddedForm { display: grid; gap: 9px; margin-top: 10px; border-radius: 10px; padding: 11px; background: #f6f7f8; }
.inlineForm { display: flex; gap: 7px; }
.inlineForm input { flex: 1; min-width: 0; border: 1px solid #d8dade; border-radius: 9px; padding: 9px; }
.memberTable { width: 100%; border-collapse: collapse; font-size: 12px; }
.memberTable th, .memberTable td { border-bottom: 1px solid var(--line); padding: 7px 5px; text-align: left; }
.memberTable button { border: 0; border-radius: 7px; padding: 5px 7px; background: #f7e8e8; color: var(--danger); }

.loginPage { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 0, #ffd38b, #f4f5f6 48%); }
.loginCard { width: min(410px, 94vw); display: grid; gap: 13px; border: 1px solid #ddd; border-radius: 18px; padding: 24px; background: rgba(255,255,255,.97); box-shadow: var(--shadow); }
.loginBrand { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.loginBrand strong, .loginBrand small { display: block; }
.loginBrand strong { font-size: 21px; }
.loginBrand small, .loginCard > small { color: var(--muted); }
.loginCard > label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.loginCard input { width: 100%; border: 1px solid #d5d7da; border-radius: 9px; padding: 11px; outline: 0; font-size: 16px; }
.loginCard input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(238,148,22,.14); }
.loginError { min-height: 19px; margin: 0; color: var(--danger); }
.loginKeyDetails { border-top: 1px solid var(--line); padding-top: 10px; color: var(--muted); }
.loginKeyDetails summary { cursor: pointer; color: #8c5309; font-size: 12px; }
.loginKeyDetails label { display: grid; gap: 5px; margin-top: 10px; font-size: 12px; }
.loginKeyDetails small { display: block; margin-top: 6px; font-size: 10px; }

.actionSheet { width: min(430px, 94vw); border-radius: 15px; padding: 8px; background: #fff; box-shadow: var(--shadow); }
.actionSheet header { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px 8px; }
.actionSheet > button { width: 100%; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 7px; border: 0; border-radius: 10px; background: transparent; padding: 10px; text-align: left; }
.actionSheet > button:hover { background: #f3f4f5; }
.actionSheet > button > span { color: var(--orange); font-size: 23px; text-align: center; }
.actionSheet b, .actionSheet small { display: block; }
.actionSheet small { color: var(--muted); }

.quickPage { position: fixed; inset: 0; z-index: 130; overflow: auto; background: radial-gradient(circle at 50% -20%, #ffd894, #fff 42%); }
.quickPage > header { height: 68px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(0,0,0,.08); padding: 0 18px; background: rgba(255,255,255,.62); backdrop-filter: blur(10px); }
.quickPage > header div { flex: 1; }
.quickPage > header strong, .quickPage > header small { display: block; }
.quickPage > header small { color: var(--muted); }
.quickBadge { border-radius: 14px; padding: 5px 9px; background: var(--orange-soft); color: #895006; font-size: 11px; }
.quickForm { width: min(610px, 92vw); margin: 7vh auto; border: 1px solid rgba(0,0,0,.08); border-radius: 18px; padding: 24px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.quickTextLabel { display: grid; gap: 9px; font-size: 18px; font-weight: 700; }
.quickTextLabel textarea { width: 100%; resize: vertical; border: 2px solid #dadcdf; border-radius: 13px; padding: 13px; font-size: 20px; line-height: 1.35; outline: 0; }
.quickTextLabel textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(238,148,22,.14); }
.optionalToggle { margin: 13px 0 6px; border: 0; background: transparent; color: #8e5409; padding: 6px 0; }
.quickOptional { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 8px 0 13px; }
.quickOptional .full { grid-column: 1 / -1; }
.quickOptional label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; }
.quickOptional input, .quickOptional textarea, .quickOptional select { width: 100%; min-width: 0; border: 1px solid #d8dade; border-radius: 9px; background: #fff; padding: 9px; }
.quickForm > .primaryButton { width: 100%; min-height: 49px; margin-top: 9px; font-size: 16px; }
.quickResult { min-height: 21px; margin: 10px 0 0; color: var(--success); text-align: center; font-weight: 700; }
.quickFootnote { margin: 6px 0 0; color: var(--muted); text-align: center; font-size: 11px; }

.toastHost { position: fixed; right: 18px; bottom: 18px; z-index: 160; display: grid; gap: 7px; }
.toast { width: min(380px, calc(100vw - 36px)); border-radius: 10px; padding: 10px 13px; background: #282b30; color: #fff; box-shadow: var(--shadow); animation: toastIn .18s ease-out; }
.toast.error { background: #8f3030; }
.toast.success { background: #276f4d; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }

.bottomNav { display: none; }

@media (max-width: 1180px) {
  .workspace { --sidebar-width: 275px; --plan-width: 360px; grid-template-columns: var(--sidebar-width) 7px minmax(400px, 1fr) 7px var(--plan-width); }
  .fab { right: calc(var(--plan-width, 360px) + 31px); }
  .objectActions .accentButton { font-size: 0; width: 36px; padding: 0; }
  .objectActions .accentButton::after { content: "☎"; font-size: 18px; }
}

@media (max-width: 950px) and (min-width: 761px) {
  .workspace { grid-template-columns: 270px 7px 1fr; }
  .rightSplitter, .planPane { display: none; }
  .fab { right: 24px; }
}

@media (max-width: 760px) {
  body { overflow: hidden; background: #fff; }
  .mobileOnly { display: flex !important; }
  .topbar { height: 62px; flex-basis: 62px; padding: 0 8px; gap: 4px; }
  .brandMark { width: 35px; height: 35px; border-radius: 11px; font-size: 18px; }
  .brandText { display: none; }
  .topActions { min-width: 0; }
  .topActions #globalSearchBtn, .topActions #syncBtn { display: none; }
  .quickTop { padding: 7px 9px; }
  .quickTop b { display: none; }
  .topActions .iconButton { min-width: 36px; font-size: 21px; }
  .workspacePicker { min-width: 0; }
  .workspacePicker > span { display: none; }
  .workspacePicker select { width: 96px; max-width: 96px; padding: 5px; font-size: 10px; }
  .userButton { min-width: 36px; padding: 4px; }
  .userButton b { display: none; }
  .offlineBanner { top: 62px; }
  .workspace { display: block; height: calc(100vh - 62px - 64px); }
  .columnSplitter { display: none !important; }
  .mobileScreen { display: none; width: 100%; height: 100%; border: 0; }
  .mobileScreen.mobileActive { display: block; }
  .sidebar { overflow: auto; padding: 10px 11px 90px; }
  .mainPane { overflow: auto; }
  .planPane.mobileActive { display: flex; }
  .mainHeader { min-height: 62px; padding: 8px 10px; }
  .titleBlock h1 { font-size: 17px; }
  .viewModes { gap: 4px; }
  .viewModes .segmented button { padding: 6px 7px; font-size: 11px; }
  .toolButton { width: 34px; padding: 0; overflow: hidden; font-size: 0; }
  .toolButton::after { content: "☷"; font-size: 17px; }
  #editProjectBtn { display: none !important; }
  .mobileProjectMenu:not(.hidden) { display: grid; margin-left: auto; flex: 0 0 36px; }
  .projectMenu { min-width: min(300px, calc(100vw - 16px)); }
  .objectActions { position: absolute; right: 9px; top: 61px; z-index: 4; padding: 6px; border-radius: 0 0 0 10px; background: #fff; box-shadow: 0 2px 5px #0002; }
  .objectActions + .viewModes { margin-left: auto; }
  .filterBar { top: 62px; padding: 7px 9px; }
  .filterBar label { flex: 1 1 42%; }
  .filterBar select { width: 100%; min-width: 0; }
  .fastAdd { margin: 9px; }
  .fastAdd input { height: 40px; }
  .fastAdd button { display: none; }
  .taskRow { min-height: 72px; grid-template-columns: 40px minmax(0,1fr) 32px; padding-right: 5px; }
  .taskTitle { font-size: 16px; line-height: 1.35; }
  .taskMeta { gap: 7px; }
  .subtaskIndent { margin-left: 12px; }
  .triagePanel { grid-template-columns: 1fr 1fr; }
  .triagePanel label:first-child { grid-column: 1 / -1; }
  .triagePanel button { grid-column: 1 / -1; }
  .contactCardHead { grid-template-columns: 1fr auto; }
  .contactCardHead select, .contactCardHead .toolButton { width: 100%; min-height: 38px; font-size: 12px; }
  .fab { right: 17px; bottom: 79px; width: 56px; height: 56px; border-radius: 18px; }
  .planHeader { min-height: 54px; }
  .planTools { overflow-x: auto; }
  .planTools button { white-space: nowrap; }
  .unscheduledHost { max-height: 135px; }
  .timeline { margin-left: 50px; }
  .bottomNav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(64px + env(safe-area-inset-bottom)); display: grid !important; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); background: rgba(255,255,255,.98); }
  .bottomNav button { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #6f747c; }
  .bottomNav button b { font-size: 19px; line-height: 1; }
  .bottomNav button span { font-size: 9px; }
  .bottomNav button.active { color: color-mix(in srgb, var(--workspace-color) 72%, #222 28%); }
  .bottomNav .captureNav b { width: 36px; height: 36px; display: grid; place-items: center; margin-top: -17px; border-radius: 13px; background: var(--orange); color: #fff; box-shadow: 0 4px 10px #0003; font-size: 24px; }
  .backdrop { padding: 0; align-items: end; }
  .modal { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
  .modalHeader { min-height: 58px; }
  .modalBody { padding: 13px; }
  .formGrid { grid-template-columns: 1fr; gap: 0; }
  .accessRow { grid-template-columns: 1fr 125px; }
  .memberRow { grid-template-columns: 1fr 125px; }
  .memberRow .secondaryButton { grid-column: 1 / -1; }
  .memberTable { font-size: 11px; }
  .formActions { position: sticky; bottom: 0; margin: 15px -13px -13px; padding: 9px 13px calc(9px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }
  .formActions button { flex: 1; min-width: 0; }
  .actionSheet { width: 100vw; border-radius: 16px 16px 0 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .quickPage > header { height: 62px; padding: 0 9px; }
  .quickPage > header strong { font-size: 14px; }
  .quickPage > header small { font-size: 10px; }
  .quickBadge { display: none; }
  .quickForm { width: 100%; min-height: calc(100vh - 62px); margin: 0; border: 0; border-radius: 0; padding: 18px 14px calc(25px + env(safe-area-inset-bottom)); box-shadow: none; }
  .quickTextLabel { font-size: 16px; }
  .quickTextLabel textarea { min-height: 150px; font-size: 19px; }
  .toastHost { left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .toast { width: 100%; }
}

@media (max-width: 380px) {
  .segmented.compact { display: none; }
}

/* v2.0.3: LeaderTask-like task-card tabs with inline clickable rich notes */
.taskTabs { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; margin: 0 0 14px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.98); }
.taskTab { min-height: 44px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #6c7077; padding: 9px 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.taskTab:hover { background: #f7f7f8; }
.taskTab.active { border-bottom-color: var(--orange); color: #2c2f33; background: #fffaf2; }
.taskTabPanel.hidden { display: none !important; }
.notesTabIntro { margin: 2px 0 9px; color: var(--muted); font-size: 12px; }
.taskNotesEditor { width: 100%; min-height: 360px; max-height: 720px; overflow: auto; border: 1px solid #cfd3d8; border-radius: 9px; background: #fff; padding: 13px 14px; outline: 0; color: #24272b; font: inherit; font-size: 15px; line-height: 1.52; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.taskNotesEditor:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(238,148,22,.13); }
.taskNotesEditor:empty::before { content: attr(data-placeholder); color: #9b9fa5; pointer-events: none; }
.taskNotesEditor a { color: #1266c3; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.taskNotesEditor a[href^="tel:"] { color: #176d4d; font-weight: 600; }

.notesEmpty { color: #8b9097; font-style: italic; }
.discussionSection { margin-top: 0; border-top: 0; padding-top: 0; }
.discussionEmpty { padding: 18px 4px; }

@media (max-width: 760px) {
  .taskTabs { margin: -2px -13px 13px; padding: 0 8px; }
  .taskTab { min-height: 48px; padding: 10px 6px; font-size: 12px; }
  .taskNotesEditor { min-height: 55vh; max-height: none; font-size: 16px; }
}

/* v2.0.4: deliberate long-press task movement, visual pickers and quick widget */
.taskRow, .unscheduledTask, .planTask { -webkit-user-drag: none; }
.taskRow.longPressArmed, .unscheduledTask.longPressArmed, .planTask.longPressArmed { outline: 1px solid transparent; }
.taskRow.longPressDragging, .unscheduledTask.longPressDragging, .planTask.longPressDragging { opacity: .58; filter: saturate(.8); }
.taskDragGhost { position: fixed !important; top: var(--drag-top,0px) !important; left: var(--drag-left,0px) !important; right:auto !important; bottom:auto !important; z-index: 240 !important; pointer-events: none !important; margin: 0 !important; opacity: .93 !important; transform-origin: top left; box-shadow: 0 14px 34px #0005 !important; border-radius: 10px !important; }
[data-view].dragOver, [data-view].dropReady { background: var(--orange-soft) !important; outline: 2px dashed var(--orange); outline-offset: -2px; }
.resizeHandle { touch-action: none; }

.colorPickerButton, .timePickerButton { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 9px; border: 1px solid #d8dade; border-radius: 9px; background: #fff; padding: 8px 10px; color: #25282d; font: inherit; text-align: left; }
.colorPickerButton:hover, .timePickerButton:hover { border-color: #babec4; }
.colorPickerSwatch { width: 24px; height: 24px; flex: 0 0 24px; border: 1px solid #0002; border-radius: 6px; }
.colorPickerChevron { margin-left: auto; color: #777d85; font-size: 22px; line-height: 1; }

.pickerBackdrop { position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; padding: 18px; background: #0009; }
.pickerPanel { width: min(560px, 94vw); max-height: min(780px, 92vh); display: flex; flex-direction: column; overflow: hidden; border-radius: 13px; background: #fff; box-shadow: 0 22px 54px #0007; }
.pickerPanel > header { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #e0e1e4; }
.pickerPanel > header strong { font-size: 26px; font-weight: 500; }
.pickerPanel > footer { display: flex; justify-content: flex-end; gap: 16px; padding: 13px 18px; border-top: 1px solid #e0e1e4; }
.pickerPanel > footer button, .pickerClear { border: 0; background: transparent; color: #16181b; padding: 8px 12px; font: inherit; font-weight: 600; }
.pickerClear { color: #8a5209; }
.colorChoiceList { overflow: auto; }
.colorChoice { width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; border: 0; border-bottom: 1px solid #ffffff80; padding: 12px 18px; font: inherit; font-size: 20px; text-align: left; }
.colorChoiceCheck { width: 34px; height: 34px; display: grid; place-items: center; border: 3px solid currentColor; border-radius: 5px; font-size: 22px; line-height: 1; opacity: .7; }
.colorChoice.selected .colorChoiceCheck { opacity: 1; }

.timePickerPanel { width: min(390px, 94vw); }
.timeWheelWrap { position: relative; display: grid; grid-template-columns: 1fr 42px 1fr; align-items: center; min-height: 250px; padding: 28px 42px; background: linear-gradient(#fafafa, #fff 38%, #fff 62%, #fafafa); }
.timeWheelWrap::before, .timeWheelWrap::after { content: ""; position: absolute; left: 42px; right: 42px; height: 1px; background: #64c6de; pointer-events: none; }
.timeWheelWrap::before { top: calc(50% - 26px); }
.timeWheelWrap::after { top: calc(50% + 26px); }
.timeWheel { box-sizing: border-box; height: 156px; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; padding: 52px 0; }
.timeWheel::-webkit-scrollbar { display: none; }
.timeWheelItem { width: 100%; height: 52px; display: grid; place-items: center; scroll-snap-align: center; border: 0; background: transparent; color: #9da1a6; font: inherit; font-size: 26px; font-variant-numeric: tabular-nums; }
.timeWheelItem.selected { color: #111417; font-size: 31px; }
.timeColon { text-align: center; font-size: 28px; color: #64c6de; }

.quickInstallButton { border: 1px solid #d9b47b; border-radius: 9px; background: #fff8ea; color: #8a5209; padding: 7px 10px; font-weight: 700; }
.quickPage.widgetMode .quickOptional, .quickPage.widgetMode #quickOptionalToggle { display: none !important; }
.quickPage.widgetMode .quickForm { max-width: 560px; }
.quickPage.widgetMode .quickTextLabel textarea { min-height: 170px; }
.quickPage.widgetMode .quickFootnote::after { content: "  После установки этот экран можно открыть отдельной иконкой «Новая задача»."; }

@media (max-width: 760px) {
  .pickerBackdrop { padding: 0; align-items: end; }
  .pickerPanel { width: 100vw; max-height: 92vh; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .pickerPanel > header strong { font-size: 24px; }
  .colorChoice { min-height: 66px; font-size: 19px; }
  .timePickerPanel { width: 100vw; }
  .timeWheelWrap { min-height: 280px; padding: 42px 50px; }
  .quickPage.widgetMode > header { min-height: 62px; }
  .quickInstallButton { padding: 6px 8px; font-size: 12px; }
}

body.taskDragging { user-select: none; -webkit-user-select: none; }

/* v2.0.5 — LeaderTask-like task card, recurrence sheets and day swiping */
.planTodayTop { min-height: 34px; border: 0; border-radius: 8px; background: transparent; padding: 6px 9px; color: #7a7e84; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.planTodayTop:not(.isToday) { color: #9b5a08; background: var(--orange-soft); }
.planScroll { touch-action: pan-y; }
.planPane.swipeNext .timeline { animation: planSlideNext .18s ease; }
.planPane.swipePrev .timeline { animation: planSlidePrev .18s ease; }
@keyframes planSlideNext { from { transform: translateX(16px); opacity: .76; } to { transform: translateX(0); opacity: 1; } }
@keyframes planSlidePrev { from { transform: translateX(-16px); opacity: .76; } to { transform: translateX(0); opacity: 1; } }

.taskModal { width: min(650px, 96vw); }
.taskModal .modalBody { padding: 0; background: #f4f4f4; }
.taskModal .modalHeader { border-bottom: 0; background: #fff; }
.leaderTaskForm { min-height: 100%; background: #f4f4f4; }
.leaderTaskTitle { width: 100%; border: 0; outline: 0; background: #fff; padding: 24px 30px 18px; color: #121212; font: inherit; font-size: 27px; font-weight: 400; line-height: 1.25; }
.leaderTaskTitle::placeholder { color: #a2a2a2; }
.leaderTaskNote { min-height: 116px; border: 0; border-bottom: 1px solid #dedede; outline: 0; background: #fff; padding: 28px 48px 26px; color: #333; font-size: 18px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.leaderTaskNote:empty::before { content: attr(data-placeholder); color: #969696; pointer-events: none; }
.leaderTaskNote a { color: #1266c3; text-decoration: underline; }
.relatedContact { margin: 0 22px 12px; }
.taskPropertyList { background: #f2f2f2; }
.taskPropertyRow { width: 100%; min-height: 68px; display: grid; grid-template-columns: 74px minmax(0,1fr) 28px; align-items: center; border: 0; background: transparent; padding: 0 22px 0 0; color: #111; text-align: left; font: inherit; cursor: pointer; }
.taskPropertyRow:hover { background: #ededed; }
.taskPropertyIcon { display: grid; place-items: center; color: #909090; font-size: 29px; line-height: 1; }
.taskPropertyRow.important .taskPropertyIcon { color: #b55a10; }
.taskPropertyValue { min-width: 0; display: flex; align-items: center; gap: 10px; overflow: hidden; color: #151515; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.taskPropertyChevron { color: #a2a2a2; font-size: 26px; opacity: .55; }
.taskMarkerSwatch { width: 16px; height: 16px; flex: 0 0 16px; border: 1px solid #0002; border-radius: 4px; background: var(--marker,#d9dce0); }
.taskCreated { padding: 25px 26px 32px; color: #606060; font-size: 12px; text-align: center; }
.taskExtraSection { border-top: 1px solid #ddd; background: #fff; }
.taskExtraSection > summary { padding: 15px 22px; color: #585858; font-size: 13px; font-weight: 700; cursor: pointer; }
.compactSection { margin: 0; border: 0; padding: 10px 22px 18px; }
.taskParentButton { width: 100%; text-align: left; }
.taskFastAdd { margin: 10px 0 0; }
.taskMessageBar { position: sticky; bottom: 0; z-index: 3; display: grid; grid-template-columns: 52px minmax(0,1fr) 52px; align-items: center; min-height: 64px; border-top: 1px solid #d9d9d9; background: rgba(255,255,255,.98); padding: 5px 8px calc(5px + env(safe-area-inset-bottom)); }
.taskMessageBar button { height: 48px; border: 0; background: transparent; color: #7e7e7e; font-size: 24px; }
.taskMessageBar input { min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; color: #333; font-size: 17px; }
.taskMessageBar input::placeholder { color: #777; }
.taskFormActions { margin: 0; border-top: 1px solid #e0e0e0; padding: 10px 14px; background: #fff; }
.taskMobileTopActions { display: none; }

.choicePickerPanel { width: min(520px, 94vw); }
.pickerSearch { padding: 10px 14px; border-bottom: 1px solid #e6e6e6; background: #fff; }
.pickerSearch input { width: 100%; border: 1px solid #d2d4d8; border-radius: 8px; padding: 10px 12px; font: inherit; }
.choiceList { overflow: auto; }
.choiceRow { width: 100%; min-height: 62px; display: grid; grid-template-columns: 42px minmax(0,1fr) 34px; align-items: center; gap: 8px; border: 0; border-bottom: 1px solid #ececec; background: #fff; padding: 9px 16px; text-align: left; font: inherit; }
.choiceRow:hover { background: #f6f6f6; }
.choiceRow.selected { background: #fff8ef; }
.choiceRow > i { width: 25px; height: 25px; border: 1px solid #0002; border-radius: 5px; background: var(--choice-swatch); }
.choiceIcon { width: 32px; color: #7d8187; font-size: 23px; text-align: center; }
.choiceRow b, .choiceRow small { display: block; }
.choiceRow b { color: #171717; font-size: 17px; font-weight: 500; }
.choiceRow small { margin-top: 2px; color: #84878c; font-size: 11px; }
.choiceRow em { color: #c27718; font-size: 23px; font-style: normal; text-align: center; }
.pickerEmpty { padding: 28px; color: #888; text-align: center; }

.schedulePickerPanel { width: min(460px, 94vw); }
.schedulePickerBody { display: grid; gap: 13px; padding: 16px 18px 20px; }
.scheduleQuick { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.scheduleQuick button { min-height: 38px; border: 1px solid #e1bb8c; border-radius: 8px; background: #fff6ea; color: #8b520d; }
.schedulePickerBody label { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 10px; color: #63666b; }
.schedulePickerBody input, .schedulePickerBody select { width: 100%; min-height: 43px; border: 1px solid #d5d7da; border-radius: 8px; background: #fff; padding: 8px 10px; font: inherit; }
.schedulePreview { border-radius: 8px; background: #f7f7f7; padding: 11px 12px; color: #27292d; font-weight: 600; }

.repeatPickerPanel { width: min(610px, 94vw); }
.repeatPickerBody { padding: 0 10px 14px; }
.repeatKindSelect { width: 100%; min-height: 58px; margin: 0 0 18px; border: 0; background: #f9b677; padding: 10px 18px; color: #181818; font: inherit; font-size: 20px; }
.repeatDetails { min-height: 132px; display: grid; align-content: center; gap: 18px; padding: 4px 12px 18px; }
.repeatEmpty { color: #777; font-size: 15px; text-align: center; }
.repeatSentence { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 20px; }
.repeatSentence input { width: 72px; border: 0; border-bottom: 2px solid #aaa; background: transparent; padding: 7px; font: inherit; text-align: center; }
.repeatControls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.repeatControls label { display: flex; align-items: center; gap: 7px; }
.repeatControls input, .repeatControls select, .repeatControls > select { min-height: 46px; border: 0; border-bottom: 2px solid #aaa; background: transparent; padding: 7px 9px; font: inherit; font-size: 18px; }
.repeatControls input { width: 70px; text-align: center; }
.repeatMode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.repeatMode button { min-height: 40px; border: 1px solid #e2ae75; background: #fff6ec; color: #8a510f; }
.repeatMode button.active { background: #f9b677; color: #20180f; font-weight: 700; }
.weekdayChecks { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; }
.weekdayChecks label { display: inline-flex; align-items: center; gap: 4px; }
.weekdayChecks input { width: 25px; height: 25px; accent-color: #ef9a35; }
.weekdayChecks span { font-size: 17px; }
.repeatPreview { margin: 0 8px; border-radius: 8px; background: #f5f5f5; padding: 10px 12px; color: #575b60; font-size: 12px; }

@media (max-width: 760px) {
  .planHeader { gap: 2px; padding: 6px 5px; }
  .planHeader > div { min-width: 0; flex: 1; }
  .planHeader strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  .planHeader small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .planTodayTop { padding: 6px 5px; font-size: 10px; }
  .taskModal .modalHeader strong { display: none; }
  .taskModal .modalHeader { min-height: 62px; }
  .taskMobileTopActions { position: sticky; top: 62px; z-index: 4; display: flex; justify-content: flex-end; border-bottom: 1px solid #e0e0e0; padding: 7px 12px; background: rgba(255,255,255,.98); backdrop-filter: blur(8px); }
  .taskMobileSaveButton { min-height: 40px; min-width: 124px; padding: 8px 16px; }
  .taskModal .dangerIcon { font-size: 12px; }
  .leaderTaskTitle { padding: 20px 30px 14px; font-size: 25px; }
  .leaderTaskNote { min-height: 132px; padding: 26px 48px 24px; font-size: 17px; }
  .taskPropertyRow { min-height: 67px; grid-template-columns: 72px minmax(0,1fr) 22px; padding-right: 14px; }
  .taskPropertyIcon { font-size: 27px; }
  .taskPropertyValue { font-size: 18px; }
  .taskCreated { padding: 24px 18px 34px; }
  .taskFormActions { position: static; margin: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .pickerPanel.repeatPickerPanel, .pickerPanel.schedulePickerPanel, .pickerPanel.choicePickerPanel { max-height: 90vh; }
  .repeatKindSelect { min-height: 58px; font-size: 20px; }
  .repeatControls { gap: 7px; }
  .repeatControls input, .repeatControls select, .repeatControls > select { font-size: 17px; }
}
@media (max-width: 760px) {
  .taskPropertyRow { min-height: 56px; grid-template-columns: 58px minmax(0,1fr) 20px; }
  .taskPropertyIcon { font-size: 23px; }
  .taskPropertyValue { font-size: 17px; }
  .leaderTaskTitle { padding-top: 17px; padding-bottom: 12px; }
  .leaderTaskNote { min-height: 112px; padding-top: 20px; padding-bottom: 18px; }
  .taskCreated { padding-top: 18px; padding-bottom: 22px; }
}

/* 2.0.6 mobile planner safety: no accidental duration resize or native callout. */
@media (max-width: 760px) {
  .planTask { -webkit-touch-callout: none; user-select: none; }
  .planTask .resizeHandle { display: none !important; pointer-events: none !important; }
}

/* 2.0.7 account and role controls */
.settingsNotice{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid #ddd;border-radius:12px;background:#fafafa;margin:0 0 12px}
.settingsNotice small,.memberAccessHint{color:#68707a;font-size:12px}
.rightsQuick{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px}
.managerAllButton{font-weight:700}
.memberRow>span{min-width:150px}

/* 2.0.8 — mobile ergonomics, incoming calls and denser compact planner */
.hourLabel.firstHourLabel { transform: translateY(3px); }

.callPage { position: fixed; inset: 0; z-index: 135; overflow: auto; background: #fff; }
.callPage > header { min-height: 68px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding: 0 18px; background: linear-gradient(100deg, #fff7e8, #fff); }
.callPage > header div { flex: 1; min-width: 0; }
.callPage > header strong, .callPage > header small { display: block; }
.callPage > header strong { font-size: 18px; }
.callPage > header small { margin-top: 2px; color: var(--muted); }
.callForm { width: min(620px, 92vw); margin: 5vh auto; display: grid; gap: 15px; border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: 24px; box-shadow: var(--shadow); }
.callField { display: grid; gap: 6px; font-weight: 700; }
.callField > span small { color: var(--muted); font-weight: 400; }
.callField input, .callField select, .callField textarea { width: 100%; min-height: 48px; border: 1px solid #d5d8dc; border-radius: 11px; background: #fff; padding: 11px 12px; outline: 0; font-size: 16px; }
.callField textarea { min-height: 104px; resize: vertical; }
.callField input:focus, .callField select:focus, .callField textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(238,148,22,.12); }
.callPhoneActions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: -7px; }
.callPhoneActions button { min-height: 45px; }
.callSaveButton { min-height: 52px; font-size: 17px; }
.callFootnote { margin: -5px 0 0; color: var(--muted); font-size: 12px; text-align: center; }

@media (max-width: 760px) {
  .workspace { height: calc(100vh - 62px - 72px); }
  .bottomNav { height: calc(72px + env(safe-area-inset-bottom)); }
  .bottomNav button { min-height: 52px; gap: 4px; }
  .bottomNav button b { font-size: 22px; }
  .bottomNav button span { font-size: 10px; font-weight: 600; }
  .bottomNav .captureNav b { width: 42px; height: 42px; margin-top: -18px; border-radius: 14px; font-size: 27px; }
  .fab { bottom: 88px; width: 60px; height: 60px; }
  .planHeader .iconButton { min-width: 44px; min-height: 44px; padding: 8px; }
  .planTodayTop { min-height: 44px; padding: 8px 7px; font-size: 11px; }
  .planTools { padding: 8px 10px; gap: 8px; }
  .planTools button { min-height: 44px; padding: 8px 12px; font-size: 12px; border-radius: 10px; }
  .viewModes .segmented button { min-height: 42px; padding: 8px 10px; font-size: 12px; }
  .toolButton { min-width: 42px; min-height: 42px; }
  .fastAdd { min-height: 48px; }
  .fastAdd input { height: 46px; font-size: 16px; }
  .taskRow { min-height: 68px; }
  .callPage > header { min-height: 62px; padding: 0 10px; }
  .callPage > header strong { font-size: 16px; }
  .callPage > header small { font-size: 11px; }
  .callForm { width: 100%; min-height: calc(100vh - 62px); margin: 0; border: 0; border-radius: 0; padding: 18px 14px calc(24px + env(safe-area-inset-bottom)); box-shadow: none; align-content: start; }
  .callField { gap: 7px; font-size: 15px; }
  .callField input, .callField select, .callField textarea { min-height: 52px; border-radius: 12px; padding: 12px 13px; font-size: 17px; }
  .callField textarea { min-height: 110px; }
  .callPhoneActions { grid-template-columns: 1fr 1fr; gap: 9px; }
  .callPhoneActions button { min-height: 50px; font-size: 14px; }
  .callPhoneActions #callPasteBtn { grid-column: 1 / -1; }
  .callSaveButton { min-height: 56px; border-radius: 13px; font-size: 18px; }
  .toastHost { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* 2.0.10 — workspace theming, denser planner, smoother mobile UX */
.topbar { background: linear-gradient(100deg, var(--workspace-color), color-mix(in srgb, var(--workspace-color) 72%, white 28%)); transition: background .24s ease; }
.brandMark, .captureNav b, .fab, .primaryButton, .accentButton { transition: transform .14s ease, box-shadow .14s ease, background-color .2s ease; }
.brandText strong { transition: opacity .16s ease; }
.modal, .pickerPanel, .actionSheet, .callPage, .quickPage { animation: softAppear .16s ease-out; }
@keyframes softAppear { from { opacity: .25; transform: translateY(4px) scale(.995); } to { opacity: 1; transform: none; } }
.taskRow, .planTask, .memberRow { transition: background-color .16s ease, box-shadow .16s ease, transform .12s ease, opacity .12s ease; }
.workspacePicker select { transition: border-color .15s ease, box-shadow .15s ease; }
.workspacePicker select:focus { border-color: rgba(0,0,0,.25); box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.workspaceManageRow { display:grid; grid-template-columns:minmax(150px,1fr) auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.workspaceManageActions { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; }
.workspaceColorDot { width:14px; height:14px; border-radius:50%; display:inline-block; vertical-align:-2px; margin-right:6px; border:1px solid #0002; }
.credentialsBox { border:1px solid var(--line); border-radius:12px; padding:10px; background:#fafafa; margin-top:10px; }
.credentialsLine { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; white-space:pre-wrap; word-break:break-word; padding:8px; border-radius:8px; background:#fff; border:1px solid var(--line); }
.credentialsActions { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.credentialsFields { display:grid; gap:8px; margin-top:10px; }
.credentialsFields > div { display:grid; grid-template-columns:72px minmax(0,1fr); gap:8px; align-items:start; padding:8px 10px; background:#fff; border:1px solid var(--line); border-radius:8px; }
.credentialsFields span { color:var(--muted); }
.credentialsFields b { word-break:break-word; white-space:pre-wrap; }
.markerAdminList { display:grid; gap:8px; }
.markerAdminRow { display:grid; grid-template-columns:42px minmax(120px,1fr) auto; gap:8px; align-items:center; }
.markerAdminRow input[type="color"] { width:42px; height:38px; padding:2px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.markerAdminRow input[type="text"] { min-height:38px; border:1px solid #d7d9dc; border-radius:9px; padding:7px 9px; }
.planDensityRange { display:grid; gap:6px; }
.planDensityRange input[type="range"] { width:100%; accent-color:var(--workspace-color); }
.planDensityValue { font-size:12px; color:var(--muted); }
.callFallbackList { display:grid; gap:7px; max-height:44vh; overflow:auto; margin-top:8px; }
.callFallbackItem { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; width:100%; border:1px solid var(--line); border-radius:10px; padding:9px 10px; background:#fff; text-align:left; }
.callFallbackItem small { display:block; color:var(--muted); }

@media (max-width:760px) {
  .topbar { gap:6px; }
  .brandText { display:none; }
  .workspacePicker { flex:1; display:block; }
  .workspacePicker > span { display:none; }
  .workspacePicker select { width:100%; max-width:none; min-height:42px; padding:8px 10px; font-size:13px; border-radius:11px; }
  .topActions { flex:1; min-width:0; }
  #globalSearchBtn { display:none; }
  .desktopAdvanced { display:none !important; }
  .actionSheet > button { min-height:64px; grid-template-columns:50px 1fr; padding:12px; }
  .actionSheet > button > span { font-size:28px; }
  .actionSheet b { font-size:16px; }
  .actionSheet small { font-size:12px; }
  .planTask.compact { padding:1px 5px 2px; border-radius:5px; }
  .planTask.compact b { font-size:10.5px; line-height:1.15; }
  .planScroll { touch-action: pan-y pinch-zoom; }
  .workspaceManageRow { grid-template-columns:1fr; }
  .workspaceManageActions { justify-content:flex-start; }
  .markerAdminRow { grid-template-columns:44px minmax(0,1fr) auto; }
}
.callChoiceOverlay { position:fixed; inset:0; z-index:180; display:grid; place-items:end center; background:rgba(0,0,0,.38); padding:12px; }
.callChoiceOverlay > section { width:min(520px,100%); max-height:72vh; overflow:hidden; border-radius:16px; background:#fff; padding:12px; box-shadow:var(--shadow); animation:softAppear .14s ease-out; }
.callChoiceOverlay header { display:flex; align-items:center; justify-content:space-between; padding:2px 2px 8px; }
.callChoiceOverlay header strong { font-size:17px; }
.callChoiceOverlay header button { width:40px; height:40px; border:0; border-radius:10px; background:#f2f3f4; font-size:24px; }
.hourLabel.firstHourLabel { transform:translateY(8px); z-index:5; background:#fff; padding-left:3px; }
@media (max-width:760px){ .planScroll { touch-action:pan-y; } }

/* 2.0.10 list clarity */
.taskRow.taskRowColored { background: var(--task-row-bg) !important; color: var(--task-row-fg) !important; }
.taskRow.taskRowColored .taskTitle,
.taskRow.taskRowColored .taskMeta,
.taskRow.taskRowColored .taskNote,
.taskRow.taskRowColored .taskActions button,
.taskRow.taskRowColored .contactStrip,
.taskRow.taskRowColored .contactStrip a { color: var(--task-row-fg) !important; }
.taskRow.taskRowColored::before { width: 7px; background: color-mix(in srgb, var(--task-row-bg) 65%, #000); }
.overdueBadge { display:inline-block; margin:3px 0 4px; padding:2px 5px; border:2px solid #d10000; color:#d10000; background:#fff; font-weight:800; line-height:1.1; font-size:13px; }
.taskRow.taskRowColored .overdueBadge { color:#d10000 !important; background:#fff !important; }
.callManualButton { margin-top:8px; }


/* 2.0.11 — full workspace palette + visible color swatches */
input[type="color"] {
  -webkit-appearance: none; appearance: none;
  width: 48px; min-width: 48px; height: 40px;
  padding: 2px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; overflow: hidden; cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 6px; }
input[type="color"]::-moz-color-swatch { border: 0; border-radius: 6px; }
.inlineForm input[type="color"] { flex: 0 0 48px; width: 48px; min-width: 48px; padding: 2px; }
.field input[type="color"] { width: 100%; min-width: 76px; height: 42px; padding: 2px; }
.markerAdminRow input[type="color"] { width: 42px; min-width: 42px; height: 38px; padding: 2px; }
.fab, .captureNav b, .primaryButton, .accentButton, .fastAdd > span { color: var(--workspace-contrast, #fff); }
.fastAdd > span { color: var(--workspace-color); }
.treeRow.dragOver { background: var(--orange-soft); outline-color: var(--workspace-color); }
.calendarDay.selected { background: var(--orange-soft); outline-color: var(--workspace-color); }
.calendarDay.hasTasks::after { background: var(--workspace-color); }
.planDensityRange input[type="range"] { accent-color: var(--workspace-color); }

/* 2.0.12 — mobile navigation clarity (kept for compatibility) */
@media (max-width:760px) {
  /* The old letter badge and hamburger both opened Overview. Keep the familiar
     hamburger and the explicit user/settings button; remove the duplicate C. */
  #brandBtn { display:none !important; }
  #overviewBtn { flex:0 0 48px; min-width:48px; height:48px; border-radius:12px; font-size:27px; }
  .topActions { flex:1 1 auto; }
  .workspacePicker select { min-height:48px; font-size:15px; }
  .userButton { min-width:48px; height:48px; border-radius:12px; }

  /* Do not let the title push List/Board/Filter outside the viewport. */
  .mainHeader { flex-wrap:wrap; align-items:center; row-gap:7px; min-height:auto; padding:10px 12px; }
  .mainHeader .titleBlock { flex:1 1 100%; }
  .mainHeader .viewModes { display:flex !important; width:100%; justify-content:flex-start; gap:8px; }
  .mainHeader .viewModes .segmented { flex:1 1 auto; }
  .mainHeader .viewModes .segmented button { flex:1 1 50%; min-height:42px; font-size:13px; }
  .mainHeader .viewModes .toolButton { width:auto; min-width:92px; min-height:42px; padding:8px 12px; font-size:13px; overflow:visible; }
  .mainHeader .viewModes .toolButton::after { content:none; }
  .filterBar { top:111px; }
  .shareLoginButton { border-color:color-mix(in srgb, var(--workspace-color) 45%, #d5d7da 55%); }
}


/* 2.0.13 — one-list workflow + app-native mobile pickers */
.viewModes { margin-left:auto; }
.filterOnlyButton { min-width:110px; }
.treeFolder { color:var(--project-color,var(--workspace-color)); }
.styledSelectOverlay { position:fixed; inset:0; z-index:240; display:grid; align-items:end; background:rgba(8,14,18,.46); padding:12px; backdrop-filter:blur(2px); }
.styledSelectPanel { width:min(620px,100%); max-height:min(76vh,720px); margin:0 auto; display:grid; grid-template-rows:auto auto minmax(0,1fr); background:#fff; color:#24272b; border-radius:18px; overflow:hidden; box-shadow:0 18px 60px rgba(0,0,0,.24); animation:softAppear .16s ease-out; }
.styledSelectPanel > header { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:58px; padding:10px 12px 8px 18px; border-bottom:1px solid var(--line); }
.styledSelectPanel > header strong { font-size:18px; }
.styledSelectClose { width:42px; height:42px; border:0; border-radius:12px; background:#f0f1f2; font-size:25px; }
.styledSelectSearch { margin:10px 12px 4px; min-height:46px; display:flex; align-items:center; gap:8px; padding:0 12px; border:1px solid #d7d9dd; border-radius:12px; background:#fafafa; }
.styledSelectSearch input { width:100%; min-width:0; border:0; outline:0; background:transparent; font-size:16px; }
.styledSelectOptions { overflow:auto; overscroll-behavior:contain; padding:6px 8px 12px; }
.styledSelectOption { width:100%; min-height:52px; display:grid; grid-template-columns:minmax(0,1fr) 28px; gap:8px; align-items:center; border:0; border-bottom:1px solid #eceef0; background:#fff; padding:10px 12px; text-align:left; font-size:16px; color:#24272b; }
.styledSelectOption:last-child { border-bottom:0; }
.styledSelectOption.selected { background:var(--orange-soft); color:color-mix(in srgb,var(--workspace-color) 72%,#111 28%); font-weight:700; }
.styledSelectOption.selected b { color:var(--workspace-color); font-size:20px; }
.styledSelectOption:disabled { opacity:.42; }
.styledSelectEmpty { padding:28px 16px; color:var(--muted); text-align:center; }
.selectPickerOpen { overflow:hidden; }
@media (max-width:760px) {
  .mainHeader .viewModes { width:auto; margin-left:0; }
  .mainHeader .viewModes .filterOnlyButton { min-width:118px; min-height:46px; font-size:15px; }
  .styledSelectOverlay { padding:0; align-items:end; }
  .styledSelectPanel { width:100%; max-height:82vh; border-radius:20px 20px 0 0; padding-bottom:env(safe-area-inset-bottom); }
  .styledSelectPanel > header { min-height:62px; }
  .styledSelectOption { min-height:58px; font-size:17px; }
}

/* 2.0.18 — explicit root/subproject creation from Projects + */
.projectCreateChoices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:8px 0 14px}
.projectCreateChoice{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:16px;text-align:left;cursor:pointer;min-height:82px;color:var(--text)}
.projectCreateChoice b{display:block;font-size:15px;margin-bottom:6px;color:var(--text)}
.projectCreateChoice small{display:block;color:var(--muted);line-height:1.35}
.projectCreateChoice:hover,.projectCreateChoice:focus-visible{border-color:var(--workspace-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--workspace-color) 18%,transparent);outline:none}
@media(max-width:720px){.projectCreateChoices{grid-template-columns:1fr}.projectCreateChoice{min-height:72px;padding:15px}}

/* 2.2.0 — project actions, resizable desktop columns, UI polish */
.projectMenu { min-width: 250px; max-width: min(310px, calc(100vw - 16px)); }
.projectMenu button { min-height: 40px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }


/* 2.3.0 — product-grade readability, broader flexible layout, calm visual hierarchy */
:root {
  --font-sans: InterVariable, Inter, "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  --ink: #202620;
  --muted: #626d65;
  --line: #e3e8e4;
  --surface: #ffffff;
  --canvas: #f5f7f5;
  --shadow-soft: 0 8px 28px rgba(28, 37, 31, .09);
  --shadow-float: 0 16px 44px rgba(28, 37, 31, .16);
}
body { color: var(--ink); background: var(--canvas); font-family: var(--font-sans); font-size: 15px; line-height: 1.48; letter-spacing: -.004em; }
button, input, textarea, select { font-family: var(--font-sans); }

.topbar { height: 60px; flex-basis: 60px; padding: 0 14px; gap: 10px; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.brandMark { width: 38px; height: 38px; border-radius: 12px; font-size: 19px; }
.brandText strong { font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.brandText small { color: color-mix(in srgb, var(--workspace-contrast, #222) 72%, transparent); font-size: 10.5px; }
.userButton { min-height: 38px; border-radius: 12px; }
.userButton b { font-size: 12px; }
.workspacePicker select { min-height: 34px; border-radius: 10px; font-size: 12.5px; }
.iconButton { min-width: 38px; min-height: 38px; border-radius: 11px; font-size: 21px; }
.offlineBanner { top: 60px; }

.workspace { --sidebar-width: 300px; --plan-width: 42%; grid-template-columns: var(--sidebar-width) 9px minmax(360px, 1fr) 9px var(--plan-width); background: var(--canvas); }
.columnSplitter { min-width: 9px; background: var(--canvas); }
.columnSplitter::after { left: 4px; width: 1px; height: 64px; margin-top: -32px; background: #bcc5bf; opacity: .68; }
.columnSplitter::before { content:""; position:absolute; inset:0 -3px; z-index:-1; }
.columnSplitter:hover { background: color-mix(in srgb, var(--workspace-color) 5%, var(--canvas) 95%); }
.splitterToggle { position:absolute; top:50%; left:50%; z-index:3; width:24px; height:32px; transform:translate(-50%,-50%); display:grid; place-items:center; border:1px solid #dce2dd; border-radius:9px; background:#fff; color:#68736b; box-shadow:0 2px 8px rgba(0,0,0,.07); padding:0; font-size:18px; line-height:1; opacity:0; }
.columnSplitter:hover .splitterToggle, .splitterToggle:focus-visible, .leftPaneCollapsed .leftSplitter .splitterToggle, .rightPaneCollapsed .rightSplitter .splitterToggle { opacity:1; }
.workspace.leftPaneCollapsed { grid-template-columns: 0 9px minmax(360px,1fr) 9px var(--plan-width); }
.workspace.rightPaneCollapsed { grid-template-columns: var(--sidebar-width) 9px minmax(360px,1fr) 9px 0; }
.workspace.leftPaneCollapsed.rightPaneCollapsed { grid-template-columns: 0 9px minmax(360px,1fr) 9px 0; }
.workspace.leftPaneCollapsed .sidebar, .workspace.rightPaneCollapsed .planPane { visibility:hidden; overflow:hidden; padding:0; border:0; }
.workspace.rightPaneCollapsed .fab { right:28px; }

.sidebar, .mainPane, .planPane { background: var(--surface); }
.sidebar { padding: 14px 12px 34px; box-shadow: inset -1px 0 0 var(--line); }
.miniCalendar { margin-bottom: 14px; }
.calendarHead { min-height: 38px; padding: 0 5px; }
.calendarHead strong { font-size: 14px; font-weight: 650; }
.calendarDay { height: 32px; border-radius: 10px; font-size: 12.5px; }
.quickNav { gap: 4px; }
.quickNav button { min-height: 42px; border-radius: 11px; padding: 6px 9px; font-size: 14.5px; }
.quickNav .navIcon { font-size: 18px; }
.quickNav em, .treeCount { background:#eef1ef; color:#56615a; font-size:11.5px; }
.sideHeading { margin: 18px 5px 8px; color:#727d75; font-size:11px; letter-spacing:.065em; }
.projectSearch { height: 40px; margin:0 2px 8px; border-color:#dfe5e0; border-radius:11px; background:#fafbfa; padding:0 10px; }
.projectSearch:focus-within { border-color: color-mix(in srgb,var(--workspace-color) 45%,#ccd4ce 55%); box-shadow:0 0 0 3px color-mix(in srgb,var(--workspace-color) 10%,transparent); background:#fff; }
.projectTree { font-size:15px; }
.treeRow { min-height:42px; gap:6px; border-radius:10px; padding-right:8px; }
.treeRow:hover { background:#f4f7f5; }
.treeRow.active { background:color-mix(in srgb,var(--workspace-color) 9%,#fff 91%); box-shadow:inset 3px 0 0 var(--workspace-color); font-weight:600; }
.treeTitle { line-height:1.3; }

.mainHeader { min-height: 68px; padding: 10px 16px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.96); backdrop-filter:blur(14px) saturate(1.1); }
.titleBlock h1 { font-size:20px; font-weight:700; letter-spacing:-.02em; }
.titleBlock small { margin-top:3px; color:#6d776f; font-size:12px; }
.toolButton, .accentButton { min-height:38px; border-radius:10px; padding:7px 11px; font-size:13px; }
.toolButton { border-color:#dce2dd; background:#fff; }
.toolButton:hover { background:#f6f8f6; border-color:#cdd5cf; }
.accentButton { box-shadow:0 2px 8px color-mix(in srgb,var(--workspace-color) 22%,transparent); }
.filterBar { padding:10px 14px; gap:9px; background:#f8faf8; border-bottom:1px solid var(--line); }
.filterBar label { font-size:11px; }
.filterBar select { min-height:36px; border-color:#dce2dd; border-radius:9px; font-size:13px; }

.fastAdd { min-height:48px; margin:13px 16px 4px; border-color:#dce3de; border-radius:13px; padding:0 12px; box-shadow:0 2px 8px rgba(26,36,29,.04); }
.fastAdd:focus-within { border-color:color-mix(in srgb,var(--workspace-color) 48%,#cfd8d1 52%); box-shadow:0 0 0 4px color-mix(in srgb,var(--workspace-color) 9%,transparent),0 5px 16px rgba(26,36,29,.06); }
.fastAdd > span { font-size:22px; }
.fastAdd input { height:46px; font-size:15.5px; }
.fastAdd button { min-height:32px; border-radius:9px; padding:6px 12px; font-weight:600; }
.fastAddHint { height:20px; margin:0 18px 3px; color:#8a948d; font-size:10.5px; opacity:0; transition:opacity .15s ease; }
.fastAdd:focus-within + .fastAddHint { opacity:1; }

.taskList { border-top:0; padding:6px 10px 90px; }
.taskRow { min-height:72px; grid-template-columns:42px minmax(0,1fr) auto; margin:4px 0; border:1px solid transparent; border-bottom-color:#edf0ee; border-radius:10px; padding:10px 10px 10px 0; }
.taskRow::before { width:4px; border-radius:10px 0 0 10px; }
.taskRow:hover { background:#fbfcfb; border-color:#e7ece8; box-shadow:0 4px 14px rgba(28,37,31,.045); }
.taskCheck input { width:21px; height:21px; }
.taskTitle { color:#202620; font-size:15.5px; font-weight:600; line-height:1.36; }
.taskTitle.done { color:#8b958e; font-weight:500; }
.taskMeta { gap:10px; margin-top:5px; color:#6d776f; font-size:12px; }
.taskNote { margin-top:5px; color:#68736c; font-size:12.5px; }
.taskActions button { width:32px; height:32px; border-radius:9px; }
.contactStrip { margin-top:7px; padding:6px 9px; border-radius:9px; font-size:12px; }
.emptyState { margin:72px auto; color:#758078; }
.emptyState strong { font-size:18px; }
.inboxIntro { margin:8px 16px 6px; border-radius:12px; padding:11px 13px; }

.planPane { background:#fff; box-shadow:inset 1px 0 0 var(--line); }
.planHeader { min-height:60px; padding:7px 12px; border-bottom-color:var(--line); }
.planHeader strong { font-size:14.5px; font-weight:700; }
.planHeader small { color:#6d776f; font-size:10.5px; }
.unscheduledHost { max-height:132px; background:#f8faf8; }
.timeline { margin-left:64px; border-left-color:#dfe4e0; }
.hourLabel { left:-62px; width:54px; color:#657068; font-size:12.5px; }
.hourLine { border-top-color:#dfe4e0; }
.slotLine { border-top-color:#f1f3f1; }
.planTask { border-radius:8px; padding:6px 8px 8px; box-shadow:0 2px 7px rgba(0,0,0,.11); }
.planTask:hover { box-shadow:0 6px 16px rgba(0,0,0,.16); }
.planTask b { font-size:13px; font-weight:700; }
.planTask small { font-size:10.5px; }
.nowLine { border-top-width:2px; }

.modal { border-radius:18px; box-shadow:var(--shadow-float); }
.modalHeader { min-height:60px; padding:8px 14px; backdrop-filter:blur(12px); }
.modalHeader strong { font-size:17px; }
.modalBody { padding:17px; }
.field > span, .field > label { color:#667169; font-size:12px; font-weight:550; }
.field input, .field textarea, .field select, .titleEditor { min-height:42px; border-color:#dce2dd; border-radius:10px; padding:10px 11px; font-size:14.5px; }
.formSection h3 { font-size:14px; }
.primaryButton, .secondaryButton, .dangerButton { min-height:43px; border-radius:10px; padding:9px 14px; }
.secondaryButton { background:#eef1ef; }
.taskModal { width:min(680px,96vw); }
.leaderTaskTitle { padding:24px 30px 17px; font-size:25px; font-weight:520; letter-spacing:-.02em; }
.leaderTaskNote { min-height:110px; padding:23px 42px; font-size:16.5px; line-height:1.55; }
.taskPropertyRow { min-height:62px; grid-template-columns:66px minmax(0,1fr) 28px; padding-right:22px; }
.taskPropertyIcon { font-size:25px; }
.taskPropertyValue { font-size:17px; font-weight:500; }
.taskPropertyChevron { font-size:23px; }
.taskMenu { border-color:#dfe5e0; border-radius:13px; box-shadow:var(--shadow-float); }
.taskMenu button { min-height:39px; border-radius:9px; font-size:14px; }

.searchInput { min-height:46px; border-color:#dce2dd; border-radius:12px; font-size:15.5px; }
.searchResult { min-height:54px; border-bottom-color:#e9edea; }
.searchResult b { font-size:14.5px; }
.contactCard { border-color:#dfe5e0; border-radius:13px; padding:13px; }
.toast { border-radius:12px; padding:11px 14px; box-shadow:var(--shadow-float); }

@media (max-width: 1180px) and (min-width: 951px) {
  .workspace { --sidebar-width:260px; --plan-width:350px; grid-template-columns:var(--sidebar-width) 9px minmax(340px,1fr) 9px var(--plan-width); }
}
@media (max-width: 950px) and (min-width: 761px) {
  .workspace { grid-template-columns:260px 9px minmax(360px,1fr); }
}
@media (max-width: 760px) {
  body { font-size:16px; line-height:1.5; }
  .topbar { height:60px; flex-basis:60px; padding:0 8px; }
  .offlineBanner { top:60px; }
  .workspace { height:calc(100vh - 60px - 68px); }
  .splitterToggle { display:none !important; }
  .sidebar { padding:12px 12px 92px; box-shadow:none; }
  .quickNav button { min-height:48px; font-size:16px; }
  .projectSearch { height:46px; }
  .projectTree { font-size:16px; }
  .treeRow { min-height:48px; }
  .mainHeader { min-height:60px; padding:8px 11px; }
  .titleBlock h1 { font-size:18px; }
  .titleBlock small { font-size:11.5px; }
  .fastAdd { min-height:50px; margin:10px 10px 3px; }
  .fastAdd input { height:48px; font-size:16px; }
  .fastAddHint { display:none; }
  .taskList { padding:4px 7px 92px; }
  .taskRow { min-height:76px; margin:3px 0; border-radius:10px; }
  .taskTitle { font-size:16px; }
  .taskMeta { font-size:12.5px; }
  .planHeader { min-height:56px; }
  .bottomNav { height:calc(68px + env(safe-area-inset-bottom)); }
  .bottomNav button span { font-size:10px; font-weight:550; }
  .bottomNav button b { font-size:20px; }
  .modalHeader strong { font-size:17px; }
  .leaderTaskTitle { padding:21px 18px 15px; font-size:23px; }
  .leaderTaskNote { padding:19px 22px; font-size:16px; }
  .taskPropertyRow { min-height:60px; grid-template-columns:58px minmax(0,1fr) 24px; padding-right:14px; }
  .taskPropertyValue { font-size:16.5px; }
  .callField > span { font-size:13px; }
  .callField input, .callField textarea, .callField select { font-size:16px; }
}

/* 2.3.0 responsive guard: desktop pane-collapse preferences must never hide mobile screens. */
@media (max-width: 950px) and (min-width: 761px) {
  .workspace.leftPaneCollapsed { grid-template-columns: 0 9px minmax(360px,1fr); }
  .workspace.rightPaneCollapsed { grid-template-columns: 260px 9px minmax(360px,1fr); }
  .workspace.leftPaneCollapsed.rightPaneCollapsed { grid-template-columns: 0 9px minmax(360px,1fr); }
}
@media (max-width: 760px) {
  .workspace.leftPaneCollapsed, .workspace.rightPaneCollapsed, .workspace.leftPaneCollapsed.rightPaneCollapsed { display:block; }
  .workspace.leftPaneCollapsed .sidebar { visibility:visible; overflow:auto; padding:12px 12px 92px; border:0; }
  .workspace.rightPaneCollapsed .planPane { visibility:visible; overflow:hidden; padding:0; border:0; }
}


/* ==========================================================================
   2.4.0 — Market UX / Operational Command Center
   Goal: keep the existing workflow, but make hierarchy, speed and readability
   feel like a commercial product rather than an internal admin interface.
   ========================================================================== */

:root {
  --text-strong: #172019;
  --text-soft: #5d6961;
  --surface-soft: #f7f9f7;
  --surface-tint: color-mix(in srgb, var(--workspace-color) 5%, #ffffff 95%);
  --ring: color-mix(in srgb, var(--workspace-color) 18%, transparent);
}

/* Calm shell: workspace color becomes an accent instead of a large visual block. */
.topbar {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--workspace-color) 11%, #ffffff 89%),
      #ffffff 43%,
      color-mix(in srgb, var(--workspace-color) 5%, #ffffff 95%));
  border-bottom: 1px solid #dfe5e1;
  box-shadow: 0 1px 0 rgba(20,35,25,.04);
  color: var(--text-strong);
}
.topbar::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background:var(--workspace-color);
  opacity:.82;
  pointer-events:none;
}
.brandMark {
  background: var(--workspace-color);
  color: var(--workspace-contrast, #fff);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--workspace-color) 22%, transparent);
}
.brandText strong { color: var(--text-strong); }
.brandText small { color: #657068; }
.iconButton { color:#3d4941; }
.iconButton:hover { background: color-mix(in srgb, var(--workspace-color) 9%, #ffffff 91%); }
.userButton { background:#ffffff; border:1px solid #e0e5e1; box-shadow:0 2px 8px rgba(20,30,24,.04); }
.userButton:hover { background:#fbfcfb; border-color:#cfd7d1; }
.workspacePicker { color:#6b756e; }
.workspacePicker select { background:#fff; border-color:#dce3de; color:#273129; }

/* Product hierarchy and readability */
.sidebar { background:#fbfcfb; }
.quickNav button { color:#2b352e; font-weight:560; }
.quickNav button.active {
  background: color-mix(in srgb, var(--workspace-color) 11%, #fff 89%);
  box-shadow: inset 3px 0 0 var(--workspace-color);
}
.quickNav em, .treeCount { font-weight:650; }
.treeFolder { opacity:.88; }
.treeTitle { color:#273129; font-weight:560; }
.treeRow.active .treeTitle { color:#172019; }
.sideHeading { color:#727c75; font-weight:750; }

.mainHeader {
  box-shadow: 0 4px 14px rgba(21,33,25,.035);
}
.titleBlock h1 { color:var(--text-strong); font-size:21px; }
.titleBlock small { color:var(--text-soft); }
.viewStats { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; min-height:0; }
.viewStat {
  display:inline-flex; align-items:center; gap:5px;
  min-height:24px; border:1px solid #e1e7e2; border-radius:999px;
  background:#f7f9f7; padding:3px 8px;
  color:#617068; font-size:11px; font-weight:650;
}
.viewStat strong { color:#28362c; font-weight:750; }

.fastAdd {
  min-height:54px; border-width:1px; background:#fff;
}
.fastAdd > span { color:var(--workspace-color); font-weight:700; }
.fastAdd input { height:52px; font-size:16px; color:#1c251f; }
.fastAdd input::placeholder { color:#8b958e; }
.fastAdd:focus-within {
  transform:translateY(-1px);
  box-shadow:0 0 0 4px var(--ring),0 10px 26px rgba(25,37,29,.07);
}
.fastCallButton {
  width:38px; height:38px; flex:0 0 38px;
  display:grid; place-items:center;
  border:1px solid #dce4de !important; border-radius:10px !important;
  background:#f8faf8 !important; color:#45614f !important;
  padding:0 !important; font-size:18px !important;
}
.fastCallButton:hover { background:color-mix(in srgb,var(--workspace-color) 10%,#fff 90%) !important; color:var(--workspace-color) !important; }
.fastAddSubmit { min-width:86px; }

.taskList { padding-top:8px; }
.taskRow { min-height:74px; }
.taskRow:hover { transform:translateY(-1px); }
.taskTitle { font-size:15.8px; color:#18221b; }
.taskMeta { color:#66746b; font-size:12.2px; }
.taskNote { color:#6d7871; }

.emptyState {
  width:min(520px,calc(100% - 36px));
  margin:74px auto;
  border:1px dashed #d8e0da;
  border-radius:18px;
  padding:30px 24px;
  background:linear-gradient(180deg,#fbfcfb,#f7f9f7);
  text-align:center;
}
.emptyState strong { display:block; color:#253129; font-size:20px; }
.emptyState span { display:block; margin-top:6px; color:#77827a; }
.emptyActions { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:18px; }
.emptyActions button {
  min-height:40px; border:1px solid #dce3de; border-radius:11px;
  background:#fff; padding:8px 13px; color:#35423a; font-weight:650;
}
.emptyActions button.primary {
  border-color:var(--workspace-color);
  background:var(--workspace-color); color:var(--workspace-contrast,#fff);
}

/* The agenda is the visual anchor of the product. Preserve all task colors,
   but make time and workload easier to scan. */
.planHeader {
  min-height:66px;
  background:linear-gradient(180deg,#fff,#fbfcfb);
  box-shadow:0 4px 16px rgba(25,37,29,.035);
}
.planHeader strong { font-size:15px; }
.planHeader small { color:#69766d; font-size:11px; }
.planLoadBadge {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:30px; max-width:150px;
  border:1px solid #dfe6e1; border-radius:999px;
  background:#f7f9f7; padding:4px 9px;
  color:#59675f; font-size:10.5px; font-weight:700;
  white-space:nowrap;
}
.planLoadBadge.busy {
  border-color:color-mix(in srgb,var(--workspace-color) 36%,#dfe6e1 64%);
  background:color-mix(in srgb,var(--workspace-color) 8%,#fff 92%);
  color:#3d4b42;
}
.planLoadBadge.overload {
  border-color:#e9c0b9; background:#fff2ef; color:#9b4538;
}
.hourLabel { font-weight:600; }
.planTask { border:1px solid rgba(0,0,0,.08); }
.planTask b { font-size:13.3px; letter-spacing:-.005em; }
.nowLine { border-top-color:#ef4d5d; box-shadow:0 1px 0 rgba(255,255,255,.8); }

/* Focus button mirrors the existing safe splitter behavior. */
.desktopFocusButton.active {
  background:color-mix(in srgb,var(--workspace-color) 13%,#fff 87%);
  color:var(--workspace-color);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--workspace-color) 25%,transparent);
}

/* User-controlled reading density. Default is intentionally readable even on
   displays where the browser is set to ~80-90% zoom. */
body.uiSizeLarge { font-size:15.8px; }
body.uiSizeLarge .quickNav button,
body.uiSizeLarge .projectTree { font-size:15.4px; }
body.uiSizeLarge .calendarDay { font-size:13px; }
body.uiSizeLarge .taskTitle { font-size:16.2px; }
body.uiSizeLarge .taskMeta { font-size:12.6px; }
body.uiSizeLarge .treeRow { min-height:44px; }
body.uiSizeLarge .quickNav button { min-height:44px; }

body.uiSizeXL { font-size:16.6px; }
body.uiSizeXL .quickNav button,
body.uiSizeXL .projectTree { font-size:16px; }
body.uiSizeXL .calendarDay { font-size:13.5px; }
body.uiSizeXL .taskTitle { font-size:16.8px; }
body.uiSizeXL .taskMeta { font-size:13px; }
body.uiSizeXL .treeRow { min-height:46px; }
body.uiSizeXL .quickNav button { min-height:46px; }
body.uiSizeXL .mainHeader { min-height:74px; }
body.uiSizeXL .titleBlock h1 { font-size:22px; }

body.uiDensityCompact .treeRow { min-height:36px; }
body.uiDensityCompact .quickNav button { min-height:37px; }
body.uiDensityCompact .taskRow { min-height:60px; padding-top:7px; padding-bottom:7px; }
body.uiDensityCompact .taskList { padding-top:3px; }
body.uiDensityCompact .taskMeta { margin-top:3px; }
body.uiDensityComfort .treeRow { min-height:44px; }
body.uiDensityComfort .quickNav button { min-height:44px; }
body.uiDensityComfort .taskRow { min-height:76px; }

/* Settings preview block */
.uiSettingsGrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.uiSettingsPreview {
  grid-column:1/-1; display:grid; gap:7px;
  border:1px solid #e0e6e1; border-radius:13px;
  background:#f8faf8; padding:12px;
}
.uiSettingsPreview b { color:#253129; }
.uiSettingsPreview small { color:#6e7a72; }

/* Better desktop use of wide screens without making the center unreadably huge */
@media (min-width: 1450px) {
  .workspace { --sidebar-width:320px; --plan-width:40%; }
  .sidebar { padding-left:14px; padding-right:14px; }
  .mainHeader { padding-left:18px; padding-right:18px; }
  .fastAdd { margin-left:18px; margin-right:18px; }
}

/* Tablet keeps product hierarchy; mobile remains intentionally task-first. */
@media (max-width: 950px) and (min-width: 761px) {
  .desktopFocusButton { display:none; }
  .viewStats { display:none; }
  .planLoadBadge { display:none; }
}
@media (max-width: 760px) {
  .desktopFocusButton { display:none !important; }
  .topbar { background:color-mix(in srgb,var(--workspace-color) 12%,#fff 88%); }
  .viewStats { margin-top:4px; gap:4px; }
  .viewStat { min-height:21px; padding:2px 6px; font-size:10px; }
  .fastAdd { min-height:52px; }
  .fastCallButton { width:40px; height:40px; flex-basis:40px; }
  .planLoadBadge { max-width:92px; min-height:26px; padding:3px 7px; font-size:9.5px; }
  .emptyState { margin:46px auto; padding:24px 18px; }
  .emptyActions { gap:7px; }
  .emptyActions button { min-height:44px; }
  .uiSettingsGrid { grid-template-columns:1fr; }
}


/* 2.4.1 — compact mobile agenda axis.
   Keep the familiar coloured agenda, but stop the hour rail from consuming
   ~15–18% of a phone screen. */
@media (max-width:760px) {
  .timeline {
    margin-left: 36px;
    border-left-color: #dfe4e0;
  }
  .hourLabel {
    left: -35px;
    width: 30px;
    padding: 0;
    color: #5f6a62;
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-align: right;
    transform: translateY(-7px);
  }
  .hourLabel.firstHourLabel {
    transform: translateY(5px);
    background: transparent;
    padding-left: 0;
  }
  .planTask {
    border-left-width: 4px;
    padding: 4px 7px 5px;
    border-radius: 7px;
  }
  .planTask b {
    font-size: 13.6px;
    line-height: 1.18;
    font-weight: 700;
  }
  .planTask small {
    display: none;
  }
  .planTask.compact {
    padding: 2px 5px 3px;
  }
  .planTask.compact b {
    font-size: 11.6px;
    line-height: 1.14;
  }
}

/* 2.5.0 — productivity layer: smart capture, command palette, guided planning */
.smartAddPreview {
  margin:-3px 18px 7px;
  min-height:30px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  color:#566158;
  font-size:12px;
}
.smartAddPreview.hidden { display:none; }
.smartAddPreview .smartAddTitle { font-weight:700; color:#4c594f; }
.smartAddPreview small { color:#7b857e; margin-left:2px; }
.smartChip {
  display:inline-flex; align-items:center; min-height:25px; padding:3px 8px;
  border:1px solid #d9e2db; border-radius:999px; background:#f8faf8;
  color:#344139; font-weight:650; line-height:1;
}
.smartChip-project { border-color:color-mix(in srgb,var(--workspace-color) 24%,#d9e2db); color:var(--workspace-color); }
.smartChip-important { border-color:#efd8a7; background:#fff8e8; color:#8c5b00; }
.smartChip-repeat { background:#f2f4fb; border-color:#dce0ef; color:#4b5572; }

.commandGroup { margin-bottom:12px; }
.commandResult { position:relative; }
.commandResult kbd {
  margin-left:auto; border:1px solid #d9dfda; border-bottom-width:2px; border-radius:6px;
  background:#fafbfa; color:#7a837c; font:600 11px/1 system-ui,sans-serif; padding:4px 6px;
}
.searchEmpty { margin-top:20px; }

.seriesScopeRow { background:color-mix(in srgb,var(--workspace-color) 5%,#fff); }
.seriesScopeRow .taskPropertyValue { display:grid; gap:2px; }
.seriesScopeRow .taskPropertyValue b { font-size:13px; color:#4e5b52; }
.seriesScopeRow .taskPropertyValue small { color:var(--workspace-color); font-weight:700; }

.dailyPlanningButton {
  min-height:30px; border:1px solid color-mix(in srgb,var(--workspace-color) 20%,#dfe5e0);
  background:color-mix(in srgb,var(--workspace-color) 6%,#fff); color:var(--workspace-color);
  border-radius:9px; padding:5px 9px; font-weight:750; cursor:pointer; white-space:nowrap;
}
.unscheduledTitle { gap:8px; }
.unscheduledTitle > span { display:flex; align-items:center; gap:5px; }
.unscheduledTitle button {
  margin-left:auto; border:0; border-radius:8px; padding:5px 8px;
  background:color-mix(in srgb,var(--workspace-color) 9%,#fff); color:var(--workspace-color);
  font-weight:750; cursor:pointer;
}
.dailyPlanModal { display:grid; gap:16px; }
.dailyPlanModal > header { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.dailyPlanModal > header strong { font-size:20px; text-transform:capitalize; }
.dailyPlanModal > header small { color:#78827b; }
.dailyPlanMetrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.dailyPlanMetrics > div {
  min-height:82px; display:grid; align-content:center; gap:4px; padding:12px;
  border:1px solid #e0e6e1; border-radius:13px; background:#fafbfa;
}
.dailyPlanMetrics b { font-size:18px; color:#263229; }
.dailyPlanMetrics span { color:#748078; font-size:12px; }
.dailyPlanMetrics .overload { border-color:#ebc9c9; background:#fff7f7; }
.dailyPlanMetrics .overload b { color:#a03f3f; }
.dailyPlanTaskList { display:grid; gap:5px; max-height:280px; overflow:auto; }
.dailyPlanTaskList > div { display:flex; justify-content:space-between; gap:12px; padding:8px 10px; border-radius:9px; background:#f6f8f6; }
.dailyPlanTaskList small { color:#78827b; white-space:nowrap; }
.dailyPlanReady { padding:16px; border-radius:12px; background:#f0f7f2; color:#2f6d49; font-weight:700; }
.dailyPlanActions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }

.undoToast { display:flex; align-items:center; justify-content:space-between; gap:14px; width:auto; max-width:min(520px, calc(100vw - 24px)); justify-self:end; }
.undoToast button {
  flex:0 0 auto; border:0; border-radius:8px; padding:7px 10px; background:#fff; color:#27312a;
  font-weight:800; cursor:pointer;
}
.shortcutHelp { display:grid; gap:4px; }
.shortcutHelp > p { color:#6c776f; margin:0 0 8px; }
.shortcutHelp > div { display:grid; grid-template-columns:150px 1fr; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid #eef1ee; }
.shortcutHelp kbd { justify-self:start; border:1px solid #d7ddd8; border-bottom-width:2px; border-radius:7px; background:#fafbfa; padding:6px 8px; font-weight:750; }

@media (max-width:760px) {
  .smartAddPreview { margin:0 12px 7px; font-size:11px; }
  .smartAddPreview small { width:100%; }
  .dailyPlanningButton { font-size:0; width:34px; min-width:34px; padding:0; }
  .dailyPlanningButton::after { content:"✨"; font-size:15px; }
  .unscheduledTitle button { min-height:32px; }
  .dailyPlanMetrics { grid-template-columns:1fr 1fr; }
  .dailyPlanMetrics > div { min-height:70px; }
  .dailyPlanModal > header { display:grid; gap:3px; }
  .dailyPlanActions { display:grid; grid-template-columns:1fr; }
  .shortcutHelp > div { grid-template-columns:120px 1fr; }
  .seriesScopeRow .taskPropertyValue b { font-size:12px; }
}

/* 2.6.0 multi-tenant platform administration */
.platformHero{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border:1px solid var(--line,#d9e2dc);border-radius:16px;background:linear-gradient(135deg,#f4faf6,#fff)}
.platformHero>div{display:flex;flex-direction:column;gap:4px}.platformHero b{font-size:18px}.platformHero span{color:var(--muted,#65736b)}
.sectionHeading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.sectionHeading h3{margin:0 0 4px}.sectionHeading p{margin:0}
.platformWorkspaceGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-top:12px}
.platformWorkspaceCard{border:1px solid var(--line,#d9e2dc);border-radius:14px;padding:14px;background:#fff;box-shadow:0 4px 18px rgba(24,56,37,.05)}
.platformWorkspaceCard.isInactive{opacity:.68;background:#f6f7f6}.platformWorkspaceCard header{display:flex;gap:10px;align-items:center}.platformWorkspaceCard header i{width:10px;height:34px;border-radius:8px;background:var(--tenant-accent,#0b6b37)}
.platformWorkspaceCard header span,.platformAdminLine{display:flex;flex-direction:column;gap:2px}.platformWorkspaceCard header b{font-size:16px}.platformWorkspaceCard small{color:var(--muted,#65736b)}
.platformAdminLine{margin:12px 0;padding:10px 12px;border-radius:10px;background:#f6f8f6}.platformAdminLine>span{font-size:12px;color:var(--muted,#65736b);text-transform:uppercase;letter-spacing:.04em}.platformAdminLine>b{font-size:14px}
.platformWorkspaceCard footer{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.platformEntry{border-left:4px solid var(--workspace-accent,#0b6b37)}
@media(max-width:700px){.platformWorkspaceGrid{grid-template-columns:1fr}.platformHero{align-items:flex-start;flex-direction:column}.sectionHeading{align-items:stretch;flex-direction:column}.platformWorkspaceCard footer button{flex:1 1 45%}}

/* 2.6.1: stable marker editor layout after multi-tenant settings refresh */
.markerAdminActions{display:flex;gap:7px;align-items:center;justify-content:flex-end;white-space:nowrap}
.markerAdminRow>input[type="text"]{width:100%;min-width:0}
@media(max-width:700px){
  .markerAdminRow{grid-template-columns:44px minmax(0,1fr);align-items:center}
  .markerAdminActions{grid-column:1/-1;justify-content:flex-start;flex-wrap:wrap}
}

/* 2.6.2 — mobile pull-to-refresh. Kept outside the content flow so layout never jumps. */
.pullRefreshIndicator{display:none}
@media(max-width:760px){
  .pullRefreshIndicator{position:fixed;z-index:38;left:50%;top:calc(64px + env(safe-area-inset-top));transform:translate(-50%,calc(-46px + var(--pull-distance,0px)));height:36px;min-width:178px;padding:0 13px;border:1px solid color-mix(in srgb,var(--workspace-color) 20%,#dbe3dd 80%);border-radius:18px;background:rgba(255,255,255,.97);box-shadow:0 5px 18px rgba(17,40,25,.12);display:flex;align-items:center;justify-content:center;gap:8px;opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease;color:#526057;font-size:12px;font-weight:650}
  .pullRefreshIndicator.visible{opacity:1}
  .pullRefreshIndicator.ready{color:color-mix(in srgb,var(--workspace-color) 82%,#18231b 18%)}
  .pullRefreshIndicator.loading{opacity:1;transform:translate(-50%,18px)}
  .pullRefreshSpinner{font-size:17px;line-height:1;transition:transform .15s ease}
  .pullRefreshIndicator.ready .pullRefreshSpinner{transform:rotate(180deg)}
  .pullRefreshIndicator.loading .pullRefreshSpinner{animation:sosediPullSpin .7s linear infinite}
}
@keyframes sosediPullSpin{to{transform:rotate(360deg)}}

/* 2.6.4.1 — compact mobile timeline gutter.
   Gives task cards more horizontal room while preserving readable hour labels. */
@media (max-width: 760px) {
  .planScroll { overflow-x: hidden; }
  .timeline { margin-left: 34px; }
  .hourLabel {
    left: -34px;
    width: 30px;
    padding-right: 2px;
    color: #626870;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: -0.1px;
    transform: translateY(-6px);
  }
  .hourLabel.firstHourLabel { transform: translateY(2px); }
}
@media (max-width: 380px) {
  .timeline { margin-left: 32px; }
  .hourLabel { left: -32px; width: 28px; font-size: 10px; }
}


/* 2.7.0 — Voice Add */
.fastVoiceButton {
  width:38px; height:38px; flex:0 0 38px;
  display:grid; place-items:center;
  border:1px solid #dce4de !important; border-radius:10px !important;
  background:#f8faf8 !important; color:#45614f !important;
  padding:0 !important; font-size:17px !important;
}
.fastVoiceButton:hover { background:color-mix(in srgb,var(--workspace-color) 10%,#fff 90%) !important; color:var(--workspace-color) !important; }
.fastVoiceButton.listening { background:color-mix(in srgb,var(--workspace-color) 16%,#fff 84%) !important; color:var(--workspace-color) !important; box-shadow:0 0 0 4px color-mix(in srgb,var(--workspace-color) 10%,transparent); animation:voicePulse 1s ease-in-out infinite; }
@keyframes voicePulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
.voiceReview { display:grid; gap:14px; }
.voiceReviewLead { margin:0; color:#5f6c64; font-size:13px; line-height:1.45; }
.voiceReviewField { display:grid; gap:7px; font-weight:700; color:#2b372f; }
.voiceReviewField textarea { width:100%; min-height:96px; resize:vertical; border:1px solid #d9e1db; border-radius:12px; padding:12px 13px; font:inherit; font-size:16px; line-height:1.4; outline:0; background:#fff; }
.voiceReviewField textarea:focus { border-color:color-mix(in srgb,var(--workspace-color) 46%,#cfd8d1 54%); box-shadow:0 0 0 4px color-mix(in srgb,var(--workspace-color) 9%,transparent); }
.voiceReviewPreview { min-height:38px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:10px 11px; border:1px solid #e2e7e3; border-radius:11px; background:#f8faf8; }
.voiceReviewPreview .voiceTitle { width:100%; color:#59665e; font-size:12px; }
.voiceReviewActions { display:flex; gap:8px; justify-content:flex-end; }
.voiceReviewActions button { min-height:42px; }
@media (max-width:760px) {
  .fastAdd .fastVoiceButton, .fastAdd .fastCallButton { display:grid !important; width:40px; height:40px; flex-basis:40px; }
  .voiceReviewActions { display:grid; grid-template-columns:1fr; }
  .voiceReviewActions button { width:100%; min-height:48px; }
}

/* 2.8.0 — Projects UX */
.projectSideHeading .sideHeadingActions{display:flex;align-items:center;gap:4px}
.treeRowActions{margin-left:auto;display:flex;align-items:center;gap:2px;opacity:0;pointer-events:none}
.treeRow:hover .treeRowActions,.treeRow.active .treeRowActions,.treeRow:focus-within .treeRowActions{opacity:1;pointer-events:auto}
.treeMiniAction{width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:#59615c;font-size:18px;line-height:1;display:grid;place-items:center;padding:0;cursor:pointer}
.treeMiniAction:hover,.treeMiniAction:focus-visible{background:color-mix(in srgb,var(--workspace-color) 10%,#fff 90%);color:var(--workspace-color);outline:none}
.projectMenuCaption{padding:8px 12px 10px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.projectMenuCaption b{font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.projectMenuCaption small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menuMore{border-top:0;margin:0;padding:0}
.menuMore>summary{list-style:none;cursor:pointer;padding:10px 12px;color:var(--muted);font-size:13px}
.menuMore>summary::-webkit-details-marker{display:none}
.menuMore[open]>summary{background:#f5f7f6;color:var(--text)}
.menuMore button{width:100%}
.projectManagerIntro{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:4px 0 14px;border-bottom:1px solid var(--line)}
.projectManagerIntro>div{display:flex;flex-direction:column;gap:4px}
.projectManagerIntro b{font-size:16px}
.projectManagerIntro span{color:var(--muted);font-size:13px;line-height:1.4}
.projectManagerList{display:flex;flex-direction:column;padding-top:8px}
.projectManagerRow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;min-height:52px;border-bottom:1px solid #eef0ef}
.projectManagerIndent{width:calc(var(--project-depth) * 18px)}
.projectManagerName{min-width:0;display:grid;grid-template-columns:10px minmax(0,1fr);column-gap:8px;align-items:center}
.projectManagerName i{width:8px;height:8px;border-radius:2px;background:var(--project-color)}
.projectManagerName b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.projectManagerName small{grid-column:2;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.projectManagerActions{display:flex;align-items:center;gap:5px}
.projectManagerActions button{min-height:34px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 10px;color:var(--text);cursor:pointer}
.projectManagerActions button:hover{border-color:color-mix(in srgb,var(--workspace-color) 34%,var(--line));background:#f7faf8}
.deleteProjectPanel{display:flex;flex-direction:column;gap:10px}
.dangerNotice{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:#fff5f4;border:1px solid #f3d4d0}
.dangerNotice b{color:#8d2924}.dangerNotice span{color:var(--muted);font-size:12px}
.deleteChoice{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;text-align:left;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
.deleteChoice b{font-size:14px;color:var(--text)}.deleteChoice span{font-size:12px;line-height:1.4;color:var(--muted)}
.deleteChoice.safe{border-color:#cfe2d5;background:#f7fbf8}.deleteChoice.danger{border-color:#efc9c5;background:#fff8f7}.deleteChoice.danger b{color:#a12e28}
.androidUpdateRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#f8faf9}
.androidUpdateRow>span{display:flex;flex-direction:column;gap:2px}.androidUpdateRow small{color:var(--muted)}

@media(max-width:720px){
  .treeRowActions{opacity:1;pointer-events:auto}
  .treeMiniAction{width:36px;height:36px;font-size:20px}
  .projectAddChildButton{font-size:13px;min-height:38px;padding:0 11px}
  .projectManagerIntro{align-items:stretch;flex-direction:column}
  .projectManagerRow{grid-template-columns:auto minmax(0,1fr);padding:6px 0;min-height:64px}
  .projectManagerActions{grid-column:2;justify-content:flex-start;flex-wrap:wrap;padding-bottom:4px}
  .projectManagerActions button{min-height:38px}
  .androidUpdateRow{align-items:stretch;flex-direction:column}
}


/* 2.8.1 — crisp agenda + direct-manipulation drag/drop */
.planPane, .planScroll, .timeline { transform:none; filter:none; }
.timeline { background:#fff; }
.hourLine, .slotLine { border-top:0; height:1px; }
.hourLine { background:#d8ded9; }
.slotLine { background:#edf1ee; }
.hourLabel {
  color:#505c53;
  font-size:12.5px;
  font-weight:600;
  line-height:1;
  letter-spacing:0;
  text-rendering:auto;
  opacity:1;
}
.planTask {
  border:1px solid color-mix(in srgb,var(--task-color,#d9dce0) 42%,#aeb6b0 58%);
  border-left:4px solid var(--task-color,#d9dce0);
  background:color-mix(in srgb,var(--task-color,#d9dce0) 60%,#fff 40%);
  color:var(--task-text,#1f2521);
  box-shadow:0 1px 2px rgba(20,29,23,.12);
  filter:none;
  transition:box-shadow .12s ease,border-color .12s ease,background-color .12s ease;
  text-rendering:auto;
}
.planTask:hover { filter:none; box-shadow:0 4px 12px rgba(20,29,23,.16); }
.planTask b {
  color:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1.24;
  letter-spacing:0;
  opacity:1;
  text-shadow:none;
}
.planTask small {
  margin-top:3px;
  color:color-mix(in srgb,var(--task-text,#1f2521) 78%,#4f5b53 22%);
  font-size:11.5px;
  font-weight:600;
  line-height:1.15;
  opacity:1;
  letter-spacing:0;
  text-shadow:none;
}
.planTask.compact { padding:3px 7px 4px; }
.planTask.compact b { font-size:12.5px; line-height:1.2; }
.timeline.dropReady { outline:none !important; box-shadow:none !important; }
.taskRow.longPressDragging, .unscheduledTask.longPressDragging { opacity:.24; filter:none; }
.planTask.longPressDragging { opacity:.08; filter:none; }
.taskDragGhost {
  position:fixed !important;
  z-index:240 !important;
  pointer-events:none !important;
  margin:0 !important;
  top:var(--drag-top,0px) !important;
  left:var(--drag-left,0px) !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  opacity:.97 !important;
  border-radius:8px !important;
  box-shadow:0 12px 28px rgba(24,34,27,.24) !important;
  cursor:grabbing !important;
  will-change:left,top;
}
body.taskDragging, body.taskDragging * { cursor:grabbing !important; }
.taskDropPreview {
  position:absolute;
  z-index:5;
  overflow:hidden;
  pointer-events:none;
  border:2px solid color-mix(in srgb,var(--task-color,#667) 76%,#1f2a22 24%);
  border-radius:8px;
  background:color-mix(in srgb,var(--task-color,#d9dce0) 22%,#fff 78%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
  opacity:.9;
}
.taskDropPreview b {
  display:block;
  overflow:hidden;
  padding:5px 7px;
  color:#253028;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.taskDropTimeBadge {
  position:absolute;
  z-index:9;
  left:7px;
  min-width:46px;
  height:24px;
  display:grid;
  place-items:center;
  pointer-events:none;
  border:1px solid #cad5cd;
  border-radius:7px;
  background:#fff;
  color:#344039;
  box-shadow:0 3px 10px rgba(20,29,23,.10);
  font-size:11px;
  font-weight:750;
  font-variant-numeric:tabular-nums;
}
body.taskDragging .treeRow.dragOver,
body.taskDragging [data-view].dragOver,
body.taskDragging [data-view].dropReady {
  outline:none !important;
  background:color-mix(in srgb,var(--workspace-color) 8%,#fff 92%) !important;
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--workspace-color) 42%,transparent) !important;
}
@media(max-width:760px) {
  .planTask b { font-size:13.8px; }
  .planTask.compact b { font-size:12px; }
  .taskDropTimeBadge { left:4px; min-width:40px; font-size:10.5px; }
}


/* 2.8.2 — compact task card, persistent save action, fast completion */
.modalHeaderActions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.modalSaveButton{min-height:34px;border-radius:9px;padding:6px 14px;font-size:13.5px;font-weight:750}
.taskModal{width:min(620px,96vw);max-height:min(820px,92vh)}
.taskModal .modalHeader{min-height:52px;border-bottom:1px solid #e7eae7;padding:6px 11px;background:#fff;backdrop-filter:none}
.taskModal .modalHeader strong{font-size:15px;font-weight:750}
.taskTitleRow{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:4px;background:#fff;padding:10px 16px 6px}
.taskCompleteToggle{width:31px;height:31px;display:grid;place-items:center;border:2px solid #a9b0ab;border-radius:8px;background:#fff;color:#fff;font:800 18px/1 system-ui,sans-serif;cursor:pointer;transition:background .12s ease,border-color .12s ease,transform .12s ease}
.taskCompleteToggle:hover{border-color:var(--workspace-color);transform:translateY(-1px)}
.taskCompleteToggle.isDone{border-color:var(--workspace-color);background:var(--workspace-color)}
.leaderTaskTitle{min-height:42px;padding:6px 4px 7px;font-size:22px;line-height:1.22;font-weight:600}
.relatedContact{margin:0 18px 7px}
.leaderTaskNote{min-height:66px;padding:10px 20px 12px 62px;font-size:15px;line-height:1.4}
.taskPropertyList{padding:4px 0;background:#f6f7f6}
.taskPropertyRow{min-height:45px;grid-template-columns:48px minmax(0,1fr) 22px;padding:0 14px 0 0}
.taskPropertyIcon{font-size:20px}
.taskPropertyValue{gap:8px;font-size:15px;font-weight:550}
.taskPropertyChevron{font-size:19px}
.taskCreated{padding:10px 16px 12px;font-size:11px}
.taskExtraSection>summary{padding:10px 16px;font-size:12.5px}
.compactSection{padding:8px 16px 12px}
.taskMessageBar{min-height:50px;grid-template-columns:42px minmax(0,1fr) 42px;padding:2px 6px calc(2px + env(safe-area-inset-bottom))}
.taskMessageBar button{height:42px;font-size:20px}
.taskMessageBar input{height:42px;font-size:15px}
.taskFormActions{padding:7px 10px}
.taskFormActions .primaryButton,.taskFormActions .secondaryButton{min-height:38px;padding:7px 13px}
.compactChoicePicker{width:min(390px,92vw)}
.compactChoicePicker>header{min-height:48px;padding:8px 14px}
.compactChoicePicker .choiceRow{min-height:46px;grid-template-columns:34px minmax(0,1fr) 28px;gap:6px;padding:6px 12px}
.compactChoicePicker .choiceIcon{width:28px;font-size:19px}
.compactChoicePicker .choiceRow b{font-size:15px;font-weight:600}
.compactChoicePicker .choiceRow em{font-size:19px}
@media (max-width:760px){
  .taskModal .modalHeader{min-height:52px}
  .taskModal .modalHeader strong{display:block;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .modalHeaderActions{gap:5px}
  .modalSaveButton{min-height:34px;padding:6px 10px;font-size:13px}
  .taskModal .dangerIcon{padding:6px 5px;font-size:11px}
  .taskTitleRow{grid-template-columns:38px minmax(0,1fr);padding:8px 12px 5px}
  .taskCompleteToggle{width:29px;height:29px;border-radius:7px}
  .leaderTaskTitle{padding:5px 2px 6px;font-size:21px}
  .leaderTaskNote{min-height:58px;padding:9px 16px 10px 50px;font-size:15px}
  .taskPropertyRow{min-height:44px;grid-template-columns:44px minmax(0,1fr) 20px;padding-right:10px}
  .taskPropertyIcon{font-size:19px}
  .taskPropertyValue{font-size:14.5px}
  .taskCreated{padding:8px 12px 10px}
  .taskExtraSection>summary{padding:9px 13px}
  .taskFormActions{padding-bottom:calc(7px + env(safe-area-inset-bottom))}
}


/* 2.8.3 — whole-card compact layout: bottom save by default, top save only when scrolling */
.taskModal{width:min(610px,96vw);max-height:calc(100vh - 26px);overflow-y:auto;overscroll-behavior:contain;border-radius:14px}
.taskModal .modalHeader{min-height:46px;padding:5px 10px;border-bottom:1px solid #e5e9e6}
.taskModal .modalHeader strong{font-size:14.5px}
.taskModal .modalBody{background:#fff}
.taskTitleRow{grid-template-columns:34px minmax(0,1fr);align-items:start;gap:7px;padding:9px 14px 7px;border-bottom:1px solid #eef0ee}
.taskCompleteToggle{width:27px;height:27px;margin-top:4px;border-width:1.5px;border-radius:6px;font-size:15px}
.taskTitleMain{min-width:0}
.leaderTaskTitle{min-height:34px;padding:2px 0 3px;font-size:19px;line-height:1.2;font-weight:600}
.taskTitleMeta{display:flex;align-items:center;gap:10px;min-height:27px;margin-top:2px;overflow:hidden}
.taskStatusChip{display:inline-flex;align-items:center;gap:6px;max-width:190px;min-height:26px;border:1px solid #dce1dd;border-radius:999px;background:#f7f8f7;padding:3px 9px;color:#4e5751;font:600 12.5px/1.15 system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.taskStatusChip:hover{background:#f0f4f1;border-color:#c7d0ca}
.taskStatusChip[data-status="doing"]{background:#eef5ff;border-color:#cdddf5;color:#355c91}
.taskStatusChip[data-status="waiting"]{background:#fff8e8;border-color:#ead8a9;color:#775c18}
.taskStatusChip[data-status="done"]{background:#edf7ee;border-color:#bfd8c3;color:#2d6938}
.taskStatusChipIcon{font-size:13px;line-height:1}
.taskStatusChipChevron{font-size:11px;opacity:.7}
.taskCreatedInline{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8a918c;font-size:10.5px}
.relatedContact{margin:4px 14px 6px;font-size:12.5px}
.leaderTaskNote{min-height:42px;padding:8px 16px 9px 55px;border-bottom:1px solid #e6e9e6;font-size:14px;line-height:1.36;background:#fff}
.taskPropertyList{padding:0;background:#fff;border-top:0}
.taskPropertyRow{min-height:38px;grid-template-columns:43px minmax(0,1fr) 18px;padding:0 12px 0 0;border-bottom:1px solid #edf0ed;background:#fff}
.taskPropertyRow:hover{background:#f7f9f7}
.taskPropertyIcon{font-size:17px}
.taskPropertyValue{gap:7px;font-size:14px;font-weight:550}
.taskPropertyChevron{font-size:17px}
.taskMarkerSwatch{width:13px;height:13px;flex-basis:13px}
.taskCreated{display:none}
.taskExtraSection{border-top:0;border-bottom:1px solid #e6e9e6}
.taskExtraSection>summary{min-height:34px;display:flex;align-items:center;padding:6px 14px;color:#555e58;font-size:12px}
.compactSection{padding:7px 14px 10px}
.discussionSection .taskMessageBar{margin:8px -6px -3px;position:static}
.taskMessageBar{min-height:44px;grid-template-columns:38px minmax(0,1fr) 38px;padding:1px 4px;background:#fff}
.taskMessageBar button{height:38px;font-size:18px}
.taskMessageBar input{height:38px;font-size:14px}
.taskFormActions{display:flex;justify-content:flex-end;gap:8px;margin:0;padding:7px 10px 8px;border-top:0;background:#fff}
.taskFormActions .primaryButton,.taskFormActions .secondaryButton{min-height:36px;padding:6px 16px;font-size:13px}
.modalSaveButton{min-height:32px;padding:5px 12px;font-size:12.5px}
.compactChoicePicker{width:min(340px,92vw)}
.compactChoicePicker>header{min-height:42px;padding:7px 12px}
.compactChoicePicker>header strong{font-size:18px}
.compactChoicePicker .choiceRow{min-height:40px;grid-template-columns:30px minmax(0,1fr) 24px;padding:5px 10px}
.compactChoicePicker .choiceIcon{width:24px;font-size:16px}
.compactChoicePicker .choiceRow b{font-size:14px}
.compactChoicePicker .choiceRow em{font-size:16px}
@media(max-width:760px){
  .taskModal{width:100vw;max-height:100vh;height:auto;min-height:0;border-radius:0}
  .taskModal .modalHeader{min-height:46px}
  .taskModal .modalHeader strong{display:block;max-width:130px;font-size:13.5px}
  .taskTitleRow{grid-template-columns:32px minmax(0,1fr);padding:8px 11px 6px}
  .taskCompleteToggle{width:26px;height:26px}
  .leaderTaskTitle{font-size:18px}
  .taskTitleMeta{gap:7px}
  .taskCreatedInline{font-size:10px}
  .leaderTaskNote{min-height:40px;padding:7px 13px 8px 48px;font-size:14px}
  .taskPropertyRow{min-height:37px;grid-template-columns:40px minmax(0,1fr) 17px;padding-right:9px}
  .taskPropertyIcon{font-size:16px}
  .taskPropertyValue{font-size:13.5px}
  .taskExtraSection>summary{min-height:33px;padding:5px 12px}
  .taskFormActions{padding-bottom:calc(7px + env(safe-area-inset-bottom))}
}


/* 2.8.4 — unified product branding */
.brandMark{background:transparent!important;color:transparent!important;box-shadow:none!important;overflow:hidden;}
.brandMark img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.loginBrand .brandMark{flex:0 0 auto;}


/* 2.8.5 — mobile task card: keyboard-safe compact layout */
.modalHeaderActions{position:relative}
.modalMoreButton{width:32px;height:32px;min-height:32px;border:0;border-radius:8px;background:transparent;color:#626a65;font-size:21px;line-height:1;padding:0}
.modalMoreButton:hover{background:#f0f3f1}
.modalMoreMenu{position:absolute;top:38px;right:0;z-index:20;min-width:158px;border:1px solid #dfe4e0;border-radius:10px;background:#fff;padding:5px;box-shadow:0 10px 28px #0002}
.modalMoreMenu button{width:100%;min-height:36px;border:0;border-radius:7px;background:#fff;color:#b13b31;padding:7px 10px;text-align:left;font:600 13px/1.2 system-ui,sans-serif}
.modalMoreMenu button:hover{background:#fff0ee}

@media(max-width:760px){
  body.taskCardOpen #modalBackdrop{align-items:flex-start;justify-items:stretch;padding:0}
  body.taskCardOpen .taskModal{
    width:100vw;
    height:var(--task-visible-height,100dvh);
    max-height:var(--task-visible-height,100dvh);
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:0;
  }
  body.taskCardOpen .taskModal .modalHeader{
    flex:0 0 auto;
    min-height:40px;
    padding:4px 7px;
    border-bottom:1px solid #e7ebe8;
  }
  body.taskCardOpen .taskModal .modalHeader strong{
    display:block;
    max-width:108px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12.5px;
    font-weight:700;
  }
  body.taskCardOpen .taskModal .modalBody{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:#fff;
  }
  body.taskCardOpen .modalSaveButton{
    height:30px;
    min-height:30px;
    border-radius:7px;
    padding:3px 9px;
    font-size:12px;
    font-weight:750;
    box-shadow:none;
  }
  body.taskCardOpen .modalMoreButton{width:30px;height:30px;min-height:30px;font-size:20px}
  body.taskCardOpen .taskTitleRow{
    grid-template-columns:26px minmax(0,1fr);
    gap:6px;
    padding:6px 10px 5px;
    border-bottom:1px solid #edf0ee;
  }
  body.taskCardOpen .taskCompleteToggle{
    width:23px;
    height:23px;
    margin-top:3px;
    border-width:1.5px;
    border-radius:5px;
    font-size:13px;
  }
  body.taskCardOpen .leaderTaskTitle{
    min-height:29px;
    padding:1px 0 2px;
    font-size:17px;
    line-height:1.18;
    font-weight:600;
  }
  body.taskCardOpen .taskTitleMeta{min-height:23px;margin-top:0;gap:5px}
  body.taskCardOpen .taskStatusChip{
    min-height:23px;
    max-width:155px;
    padding:2px 7px;
    gap:4px;
    font-size:11.5px;
  }
  body.taskCardOpen .taskStatusChipIcon{font-size:12px}
  body.taskCardOpen .taskCreatedInline{display:none}
  body.taskCardOpen .relatedContact{margin:2px 10px 4px;padding:6px 8px;font-size:11.5px}
  body.taskCardOpen .leaderTaskNote{
    min-height:34px;
    max-height:104px;
    overflow-y:auto;
    padding:7px 11px 8px;
    border-bottom:1px solid #e8ebe9;
    font-size:13.5px;
    line-height:1.34;
  }
  body.taskCardOpen .taskPropertyList{padding:0;background:#fff}
  body.taskCardOpen .taskPropertyRow{
    min-height:34px;
    grid-template-columns:34px minmax(0,1fr) 16px;
    padding:0 8px 0 0;
    border-bottom:1px solid #eef1ef;
  }
  body.taskCardOpen .taskPropertyIcon{font-size:15px}
  body.taskCardOpen .taskPropertyValue{gap:5px;font-size:13px;font-weight:550}
  body.taskCardOpen .taskPropertyValue small{font-size:10px}
  body.taskCardOpen .taskPropertyChevron{font-size:15px}
  body.taskCardOpen .taskMarkerSwatch{width:11px;height:11px;flex-basis:11px}
  body.taskCardOpen .taskExtraSection>summary{
    min-height:30px;
    padding:5px 10px;
    font-size:11.5px;
  }
  body.taskCardOpen .compactSection{padding:6px 10px 9px}
  body.taskCardOpen .taskMessageBar{min-height:40px;grid-template-columns:34px minmax(0,1fr) 34px;padding:1px 3px}
  body.taskCardOpen .taskMessageBar button{height:34px;font-size:17px}
  body.taskCardOpen .taskMessageBar input{height:34px;font-size:13px}
  body.taskCardOpen .taskFormActions{
    gap:6px;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    border-top:1px solid #edf0ee;
  }
  body.taskCardOpen .taskFormActions .primaryButton,
  body.taskCardOpen .taskFormActions .secondaryButton{
    min-height:34px;
    padding:5px 13px;
    font-size:12.5px;
  }
  body.taskCardOpen .compactChoicePicker{width:min(320px,94vw)}
  body.taskCardOpen .compactChoicePicker>header{min-height:40px;padding:6px 10px}
  body.taskCardOpen .compactChoicePicker .choiceRow{min-height:38px;grid-template-columns:28px minmax(0,1fr) 22px;padding:4px 9px}
  body.taskCardOpen .compactChoicePicker .choiceRow b{font-size:13px}
}

/* 2.8.6 — mobile completion: same one-tap mechanic as Web task list */
@media(max-width:760px){
  body.taskCardOpen .taskCompleteToggle{
    width:26px;
    height:26px;
    min-width:26px;
    min-height:26px;
    margin-top:1px;
    border:1.5px solid #9fa8a2;
    border-radius:6px;
    background:#fff;
    box-shadow:0 0 0 6px transparent;
    transition:background .12s ease,border-color .12s ease,transform .08s ease,box-shadow .12s ease;
    touch-action:manipulation;
  }
  body.taskCardOpen .taskCompleteToggle:active{transform:scale(.92)}
  body.taskCardOpen .taskCompleteToggle:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--workspace-color) 22%,transparent)}
  body.taskCardOpen .taskCompleteToggle.isDone{
    border-color:var(--workspace-color);
    background:var(--workspace-color);
    color:#fff;
  }
  body.taskCardOpen .taskCompleteToggle:disabled{opacity:.62;cursor:wait}
}


/* 2.8.8 — notes grow with content; discussion and history stay collapsed */
@media(max-width:760px){
  body.taskCardOpen .leaderTaskNote{
    min-height:34px;
    max-height:none;
    height:auto;
    overflow:visible;
    overflow-y:visible;
    resize:none;
  }
}

/* 2.8.10 — status is visually separated from the title and opens as a true contextual popover. */
body.taskCardOpen .taskTitleMeta{
  margin-top:8px;
  min-height:26px;
  padding-bottom:2px;
}
body.taskCardOpen .taskTitleRow{padding-bottom:9px}
#choicePickerBackdrop.anchoredPickerBackdrop{
  display:block;
  padding:0;
  align-items:initial;
  place-items:initial;
  background:rgba(0,0,0,.16);
}
#choicePickerBackdrop.anchoredPickerBackdrop .anchoredChoicePanel{
  position:fixed;
  margin:0;
  width:min(300px,calc(100vw - 20px));
  max-height:min(340px,72dvh);
  padding-bottom:0;
  border-radius:12px;
  box-shadow:0 14px 36px rgba(0,0,0,.28);
  overflow:hidden;
  z-index:1;
}
#choicePickerBackdrop.anchoredPickerBackdrop .anchoredChoicePanel>header{
  min-height:40px;
  padding:6px 11px;
}
#choicePickerBackdrop.anchoredPickerBackdrop .anchoredChoicePanel>header strong{font-size:16px}
#choicePickerBackdrop.anchoredPickerBackdrop .anchoredChoicePanel .choiceRow{
  min-height:42px;
}
@media(max-width:760px){
  body.taskCardOpen .taskTitleMeta{margin-top:10px;min-height:27px}
  body.taskCardOpen .taskTitleRow{padding-bottom:10px}
  #choicePickerBackdrop.anchoredPickerBackdrop{background:rgba(0,0,0,.18)}
  #choicePickerBackdrop.anchoredPickerBackdrop .anchoredChoicePanel{
    width:min(310px,calc(100vw - 20px));
    max-height:min(340px,68dvh);
  }
}


/* 2.8.13 — project menu: viewport-safe, readable, consistent on mobile and desktop */
.projectMenu {
  width: min(330px, calc(100vw - 20px));
  min-width: min(280px, calc(100vw - 20px));
  max-width: calc(100vw - 20px);
  max-height: calc(100dvh - 20px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 7px;
  box-sizing: border-box;
}
.projectMenu button,
.projectMenu .menuMore > summary {
  width: 100%;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.projectMenu button { min-height: 42px; padding: 9px 11px; }
.projectMenu hr { flex: 0 0 auto; }
.projectMenu .menuMore { width: 100%; }
.projectMenu .menuMore[open] { max-width: 100%; }
.projectMenuCaption { box-sizing: border-box; width: 100%; }

/* Do not let the generic mobile .toolButton rule cut “Подпроект” down to “Под”. */
@media (max-width:760px) {
  .mainHeader .projectAddChildButton {
    width: auto;
    min-width: 116px;
    max-width: 132px;
    min-height: 42px;
    padding: 0 11px;
    overflow: visible;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
  }
  .mainHeader .projectAddChildButton::after { content: none; }
  .mainHeader .mobileProjectMenu {
    width: 42px;
    min-width: 42px;
    height: 42px;
    flex-basis: 42px;
    margin-left: 0;
  }
  .projectMenu {
    width: min(360px, calc(100vw - 20px));
    min-width: min(300px, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
    border-radius: 14px;
  }
  .projectMenu button { min-height: 46px; font-size: 15px; }
  .projectMenu .menuMore > summary { min-height: 44px; display:flex; align-items:center; }
}


/* 2.8.13 — UI Stability across Web, Android WebView and Windows WebView.
   These are geometry guards only: no business logic or data behavior changes. */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

/* Hidden file controls must never participate in viewport geometry. */
#attachmentInput {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* Every floating surface stays inside the visible viewport, including small
   Android screens and narrowed Windows/Web panes. */
.taskMenu,
.projectMenu,
.pickerPanel,
.choicePickerPanel,
.repeatPickerPanel,
.schedulePickerPanel,
.timePickerPanel,
.compactChoicePicker {
  max-width: calc(100dvw - 16px) !important;
  max-height: calc(100dvh - 16px) !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.taskMenu button,
.projectMenu button,
.projectMenu .menuMore > summary,
.choiceRow,
.projectMenuCaption,
.projectMenuCaption b,
.projectMenuCaption small {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}
.modal, .taskModal, .callForm {
  max-width: calc(100dvw - 16px);
}
.leaderTaskNote,
.comment,
.historyList,
.compactSection,
.taskPropertyValue,
.taskPropertyValue * {
  overflow-wrap: anywhere;
}

/* The plan header must never push Today/next-day outside a narrowed pane. */
.planPane { min-width: 0; }
.planHeader { min-width: 0; overflow: hidden; }
.planHeader > div { min-width: 0; flex: 1 1 84px; }
.planHeader > button,
.planHeader > .planLoadBadge { flex: 0 0 auto; }
.planHeader #planHint { max-width: 100%; }

/* At tablet / narrow desktop widths preserve all important actions but turn
   the planning button into its icon and remove the informational load badge. */
@media (max-width: 1100px) {
  .planHeader { gap: 4px; padding-inline: 6px; }
  #planLoadBadge { display: none !important; }
  #dailyPlanningBtn {
    width: 36px;
    min-width: 36px;
    padding-inline: 0;
    font-size: 0;
  }
  #dailyPlanningBtn::before { content: "✨"; font-size: 14px; }
  #planTodayBtn { min-width: 42px; padding-inline: 5px; }
}

@media (max-width: 760px) {
  /* Mobile plan header is deliberately terse; arrows and Today remain visible. */
  .planHeader { gap: 2px; padding-inline: 4px; }
  .planHeader #planHint {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    font-size: 9.5px;
  }
  .planHeader .iconButton { min-width: 38px; width: 38px; }
  #dailyPlanningBtn { width: 34px; min-width: 34px; }
  #planTodayBtn { min-width: 40px; max-width: 48px; font-size: 9.5px; }

  /* Time labels get enough width instead of drawing beyond their own box. */
  .timeline { margin-left: 50px; }
  .hourLabel { left: -48px; width: 42px; font-size: 11px; }

  /* Long project names/actions wrap inside the menu, never under/over it. */
  .projectMenu { width: min(300px, calc(100dvw - 16px)); }
  .projectMenu button,
  .projectMenu .menuMore > summary { white-space: normal; line-height: 1.25; }
}

@media (max-width: 360px) {
  .planHeader strong { font-size: 12px; }
  .planHeader #planHint { font-size: 9px; }
  .planHeader .iconButton { min-width: 34px; width: 34px; min-height: 40px; }
  #dailyPlanningBtn { width: 32px; min-width: 32px; }
  #planTodayBtn { min-width: 38px; max-width: 42px; padding-inline: 3px; }
}

/* 2.8.13 task metadata safety: long project/contact text may not widen a row. */
.taskBody { min-width: 0; }
.taskMeta span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* 2.8.14 — iPhone / iOS installed PWA ergonomics. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--visual-viewport-height:100dvh}
.appUpdateBanner{position:fixed;z-index:210;left:50%;bottom:calc(14px + var(--safe-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:min(520px,calc(100vw - 24px));padding:10px 11px 10px 14px;border:1px solid #cdd9d1;border-radius:14px;background:rgba(255,255,255,.98);box-shadow:0 12px 30px rgba(13,45,25,.18);color:#26382c;font-weight:700}
.appUpdateBanner button{border:0;border-radius:10px;background:#166534;color:#fff;padding:8px 12px;font-weight:800}
.iosInstallHint{position:fixed;z-index:205;left:max(10px,var(--safe-left));right:max(10px,var(--safe-right));bottom:calc(10px + var(--safe-bottom));display:flex;align-items:center;gap:10px;min-height:62px;border:1px solid #d9e4dc;border-radius:16px;background:rgba(255,255,255,.97);box-shadow:0 10px 30px rgba(17,50,29,.18);padding:8px 10px;text-align:left}
.iosInstallHint img{width:44px;height:44px;border-radius:10px}.iosInstallHint span{display:grid;gap:1px;flex:1;min-width:0}.iosInstallHint b{font-size:14px}.iosInstallHint small{color:#6b756e;font-size:11px}.iosInstallHint em{font-style:normal;color:#166534;font-weight:800;font-size:13px}
.iosInstallSheet{position:fixed;inset:0;z-index:260;display:none;align-items:flex-end;justify-content:center;background:rgba(10,18,13,.42);padding:0}.iosInstallSheet.show{display:flex}.iosInstallSheet section{position:relative;width:min(560px,100%);max-height:calc(var(--visual-viewport-height) - 8px);overflow:auto;border-radius:22px 22px 0 0;background:#fff;padding:24px 22px calc(24px + var(--safe-bottom));box-shadow:0 -12px 50px rgba(0,0,0,.24)}.iosInstallClose{position:absolute;right:12px;top:10px;width:38px;height:38px;border:0;border-radius:50%;background:#eef2ef;font-size:26px;line-height:1}.iosInstallIcon img{width:68px;height:68px;border-radius:15px}.iosInstallSheet h2{margin:12px 0 4px;font-size:24px}.iosInstallSheet p{margin:0 0 16px;color:#647068}.iosInstallSheet ol{margin:0 0 20px;padding-left:22px}.iosInstallSheet li{margin:10px 0;line-height:1.45}.iosInstallDone{width:100%;min-height:48px}
@media(max-width:760px){
  html,body{height:100dvh;min-height:100dvh}
  .app{height:var(--visual-viewport-height,100dvh);min-height:0}
  body.iosStandalone .topbar{height:calc(62px + var(--safe-top));flex-basis:calc(62px + var(--safe-top));padding-top:var(--safe-top);padding-left:max(8px,var(--safe-left));padding-right:max(8px,var(--safe-right))}
  body.iosStandalone .offlineBanner{top:calc(62px + var(--safe-top))}
  body.iosStandalone .workspace{height:calc(var(--visual-viewport-height,100dvh) - 62px - var(--safe-top) - 68px - var(--safe-bottom))}
  body.iosStandalone .bottomNav{padding-left:var(--safe-left);padding-right:var(--safe-right)}
  body.iosStandalone .modal{height:var(--visual-viewport-height,100dvh);max-height:var(--visual-viewport-height,100dvh)}
  body.iosStandalone .modalHeader,body.iosStandalone .quickPage>header,body.iosStandalone .callPage>header{padding-top:var(--safe-top);min-height:calc(58px + var(--safe-top))}
  body.iosStandalone .quickPage,body.iosStandalone .callPage,body.iosStandalone .loginPage{height:var(--visual-viewport-height,100dvh);max-height:var(--visual-viewport-height,100dvh)}
  body.iosDevice input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),body.iosDevice textarea{font-size:16px}
  body.iosDevice .iosInstallHint{bottom:calc(76px + var(--safe-bottom))}
  body.iosStandalone .iosInstallHint{display:none}
  body.iosDevice .appUpdateBanner{bottom:calc(76px + var(--safe-bottom))}
}


/* 2.8.15 — compact, readable task color picker across Web / Windows / Android / iPhone. */
.colorPickerPanel {
  width: min(368px, calc(100vw - 32px));
  max-height: min(520px, calc(100dvh - 36px));
  border-radius: 16px;
}
.colorPickerPanel > header {
  min-height: 0;
  padding: 15px 16px 11px;
  align-items: flex-start;
}
.colorPickerHeaderText { display: grid; gap: 2px; min-width: 0; }
.colorPickerPanel > header strong { font-size: 18px; font-weight: 750; line-height: 1.25; }
.colorPickerPanel > header small { color: #6d737a; font-size: 12px; line-height: 1.35; }
.colorPickerPanel .colorChoiceList {
  display: grid;
  gap: 2px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 6px;
  background: #fff;
}
.colorPickerPanel .colorChoice {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 20px minmax(0,1fr) 22px;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #fff;
  padding: 7px 9px;
  color: #24282d;
  font: inherit;
  font-size: 14px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.colorPickerPanel .colorChoice:hover,
.colorPickerPanel .colorChoice:focus-visible { background: #f5f7f6; outline: none; }
.colorPickerPanel .colorChoice:focus-visible { box-shadow: inset 0 0 0 2px rgba(22,101,52,.22); }
.colorPickerPanel .colorChoice.selected { border-color: #d5e1d8; background: #f1f6f2; font-weight: 700; }
.colorChoiceDot {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 50%;
  background: var(--choice-color,#d9dce0);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.colorChoiceLabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colorPickerPanel .colorChoiceCheck {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1.5px solid #c3c9ce;
  border-radius: 6px;
  background: #fff;
  color: transparent;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  opacity: 1;
}
.colorPickerPanel .colorChoice.selected .colorChoiceCheck { border-color: #166534; background: #166534; color: #fff; }
.colorChoiceEmpty { padding: 18px 14px; color: #757b82; font-size: 13px; text-align: center; }
.colorPickerPanel > footer { gap: 8px; padding: 10px 12px 12px; }
.colorPickerPanel > footer button {
  min-height: 38px;
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 750;
}
.colorPickerPanel > footer [data-picker-cancel] { color: #555d64; }
.colorPickerPanel > footer [data-picker-ok] { background: #166534; color: #fff; }
.colorPickerPanel > footer [data-picker-ok]:hover { background: #12562c; }

@media (max-width: 760px) {
  .colorPickerBackdrop {
    align-items: center;
    padding: max(12px, env(safe-area-inset-top,0px)) 12px max(12px, env(safe-area-inset-bottom,0px));
  }
  .colorPickerBackdrop .colorPickerPanel {
    width: min(420px, 100%);
    max-height: min(70dvh, 520px);
    border-radius: 18px;
    padding-bottom: 0;
  }
  .colorPickerPanel > header { padding: 14px 14px 10px; }
  .colorPickerPanel > header strong { font-size: 17px; }
  .colorPickerPanel .colorChoiceList { padding: 5px; }
  .colorPickerPanel .colorChoice { min-height: 42px; grid-template-columns: 20px minmax(0,1fr) 22px; padding: 6px 8px; font-size: 14px; }
  .colorPickerPanel > footer { padding: 9px 10px 10px; }
  .colorPickerPanel > footer button { min-height: 40px; }
}

@media (max-width: 360px) {
  .colorPickerBackdrop { padding-inline: 8px; }
  .colorPickerBackdrop .colorPickerPanel { max-height: 68dvh; }
  .colorPickerPanel .colorChoice { min-height: 40px; gap: 8px; font-size: 13px; }
}

/* 2.8.16 — unified compact task-property dialogs across Web / Windows / Android / iPhone. */
#choicePickerBackdrop:not(.anchoredPickerBackdrop),
#schedulePickerBackdrop,
#repeatPickerBackdrop,
#timePickerBackdrop {
  place-items: center;
  align-items: center;
  padding: 16px;
}

#choicePickerBackdrop:not(.anchoredPickerBackdrop) .choicePickerPanel,
#schedulePickerBackdrop .schedulePickerPanel,
#repeatPickerBackdrop .repeatPickerPanel,
#timePickerBackdrop .timePickerPanel {
  width: min(420px, calc(100vw - 32px));
  max-height: min(620px, calc(100dvh - 32px));
  border-radius: 16px;
  padding-bottom: 0;
  overflow: hidden;
}

#choicePickerBackdrop:not(.anchoredPickerBackdrop) .pickerPanel > header,
#schedulePickerBackdrop .pickerPanel > header,
#repeatPickerBackdrop .pickerPanel > header,
#timePickerBackdrop .pickerPanel > header {
  min-height: 0;
  padding: 13px 15px 10px;
}

#choicePickerBackdrop:not(.anchoredPickerBackdrop) .pickerPanel > header strong,
#schedulePickerBackdrop .pickerPanel > header strong,
#repeatPickerBackdrop .pickerPanel > header strong,
#timePickerBackdrop .pickerPanel > header strong {
  font-size: 18px;
  line-height: 1.25;
  font-weight: 750;
}

#choicePickerBackdrop:not(.anchoredPickerBackdrop) .pickerPanel > footer,
#schedulePickerBackdrop .pickerPanel > footer,
#repeatPickerBackdrop .pickerPanel > footer,
#timePickerBackdrop .pickerPanel > footer {
  gap: 8px;
  padding: 9px 11px 11px;
}

#choicePickerBackdrop:not(.anchoredPickerBackdrop) .pickerPanel > footer button,
#schedulePickerBackdrop .pickerPanel > footer button,
#repeatPickerBackdrop .pickerPanel > footer button,
#timePickerBackdrop .pickerPanel > footer button,
#timePickerBackdrop .pickerClear {
  min-height: 38px;
  border-radius: 9px;
  padding: 7px 11px;
  font-size: 13px;
  font-weight: 750;
}

#choicePickerBackdrop:not(.anchoredPickerBackdrop) .pickerPanel > footer [data-picker-ok],
#schedulePickerBackdrop .pickerPanel > footer [data-picker-ok],
#repeatPickerBackdrop .pickerPanel > footer [data-picker-ok],
#timePickerBackdrop .pickerPanel > footer [data-picker-ok] {
  background: #166534;
  color: #fff;
}

#choicePickerBackdrop:not(.anchoredPickerBackdrop) .pickerPanel > footer [data-picker-cancel],
#schedulePickerBackdrop .pickerPanel > footer [data-picker-cancel],
#repeatPickerBackdrop .pickerPanel > footer [data-picker-cancel],
#timePickerBackdrop .pickerPanel > footer [data-picker-cancel] {
  color: #596169;
}

/* Choice dialogs: assignee, importance, project, parent task and similar lists. */
#choicePickerBackdrop:not(.anchoredPickerBackdrop) .choicePickerPanel {
  width: min(390px, calc(100vw - 32px));
  max-height: min(560px, calc(100dvh - 32px));
}
#choicePickerBackdrop:not(.anchoredPickerBackdrop) .pickerSearch {
  padding: 7px 10px;
}
#choicePickerBackdrop:not(.anchoredPickerBackdrop) .pickerSearch input {
  min-height: 40px;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
}
#choicePickerBackdrop:not(.anchoredPickerBackdrop) .choiceList {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 6px;
}
#choicePickerBackdrop:not(.anchoredPickerBackdrop) .choiceRow {
  min-height: 50px;
  grid-template-columns: 30px minmax(0,1fr) 24px;
  gap: 8px;
  border: 1px solid transparent;
  border-bottom-color: #eef0f1;
  border-radius: 9px;
  padding: 7px 9px;
}
#choicePickerBackdrop:not(.anchoredPickerBackdrop) .choiceRow:hover {
  background: #f6f8f7;
}
#choicePickerBackdrop:not(.anchoredPickerBackdrop) .choiceRow.selected {
  border-color: #dbe6de;
  background: #f2f7f3;
}
#choicePickerBackdrop:not(.anchoredPickerBackdrop) .choiceIcon {
  width: 28px;
  font-size: 20px;
}
#choicePickerBackdrop:not(.anchoredPickerBackdrop) .choiceRow b {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 650;
}
#choicePickerBackdrop:not(.anchoredPickerBackdrop) .choiceRow small {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.3;
}
#choicePickerBackdrop:not(.anchoredPickerBackdrop) .choiceRow em {
  font-size: 19px;
  color: #166534;
}

/* Date/time dialog: dense two-column form, no oversized sheet. */
#schedulePickerBackdrop .schedulePickerPanel { width: min(390px, calc(100vw - 32px)); }
#schedulePickerBackdrop .schedulePickerBody {
  gap: 9px;
  padding: 11px 13px 13px;
}
#schedulePickerBackdrop .scheduleQuick { gap: 6px; }
#schedulePickerBackdrop .scheduleQuick button {
  min-height: 35px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 650;
}
#schedulePickerBackdrop .schedulePickerBody label {
  grid-template-columns: 76px minmax(0,1fr);
  gap: 8px;
  font-size: 13px;
}
#schedulePickerBackdrop .schedulePickerBody input,
#schedulePickerBackdrop .schedulePickerBody select,
#schedulePickerBackdrop .timePickerButton {
  min-height: 40px;
  border-radius: 9px;
  padding: 7px 9px;
  font-size: 14px;
}
#schedulePickerBackdrop .schedulePreview {
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.3;
}

/* Repeat dialog: remove the old orange full-width strip and large empty space. */
#repeatPickerBackdrop .repeatPickerPanel { width: min(410px, calc(100vw - 32px)); }
#repeatPickerBackdrop .repeatPickerBody {
  min-height: 0;
  overflow-y: auto;
  padding: 9px 12px 12px;
}
#repeatPickerBackdrop .repeatKindSelect {
  width: 100%;
  min-height: 41px;
  margin: 0 0 8px;
  border: 1px solid #d4d8da;
  border-radius: 9px;
  background: #fff;
  padding: 7px 10px;
  color: #202428;
  font-size: 14px;
}
#repeatPickerBackdrop .repeatDetails {
  min-height: 0;
  align-content: start;
  gap: 10px;
  padding: 7px 3px 9px;
}
#repeatPickerBackdrop .repeatEmpty {
  padding: 10px 4px;
  color: #6f767c;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
}
#repeatPickerBackdrop .repeatSentence {
  justify-content: flex-start;
  gap: 8px;
  font-size: 14px;
}
#repeatPickerBackdrop .repeatSentence input,
#repeatPickerBackdrop .repeatControls input,
#repeatPickerBackdrop .repeatControls select,
#repeatPickerBackdrop .repeatControls > select {
  min-height: 38px;
  border: 1px solid #d4d8da;
  border-radius: 8px;
  background: #fff;
  padding: 6px 8px;
  font-size: 14px;
}
#repeatPickerBackdrop .repeatSentence input,
#repeatPickerBackdrop .repeatControls input { width: 64px; }
#repeatPickerBackdrop .repeatControls {
  justify-content: flex-start;
  gap: 7px;
}
#repeatPickerBackdrop .repeatMode {
  gap: 5px;
}
#repeatPickerBackdrop .repeatMode button {
  min-height: 36px;
  border-radius: 8px;
  font-size: 12px;
}
#repeatPickerBackdrop .repeatMode button.active {
  border-color: #8fb39a;
  background: #edf5ef;
  color: #1d5c31;
}
#repeatPickerBackdrop .weekdayChecks {
  justify-content: flex-start;
  gap: 7px;
}
#repeatPickerBackdrop .weekdayChecks label {
  min-height: 34px;
  border: 1px solid #e2e5e6;
  border-radius: 8px;
  padding: 4px 6px;
}
#repeatPickerBackdrop .weekdayChecks input {
  width: 18px;
  height: 18px;
  accent-color: #166534;
}
#repeatPickerBackdrop .weekdayChecks span { font-size: 12px; }
#repeatPickerBackdrop .repeatPreview {
  margin: 3px 0 0;
  padding: 8px 9px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.35;
}

/* Time wheel follows the same compact surface. */
#timePickerBackdrop .timePickerPanel { width: min(330px, calc(100vw - 32px)); }
#timePickerBackdrop .pickerClear {
  min-height: 34px;
  color: #6d7379;
  background: #f2f4f3;
}
#timePickerBackdrop .timeWheelWrap {
  min-height: 190px;
  grid-template-columns: 1fr 30px 1fr;
  padding: 18px 34px;
}
#timePickerBackdrop .timeWheelWrap::before,
#timePickerBackdrop .timeWheelWrap::after { left: 34px; right: 34px; }
#timePickerBackdrop .timeWheelItem { font-size: 22px; }
#timePickerBackdrop .timeWheelItem.selected { font-size: 26px; }
#timePickerBackdrop .timeColon { font-size: 24px; }

@media (max-width: 760px) {
  #choicePickerBackdrop:not(.anchoredPickerBackdrop),
  #schedulePickerBackdrop,
  #repeatPickerBackdrop,
  #timePickerBackdrop {
    align-items: center;
    padding: max(10px, env(safe-area-inset-top,0px)) 10px max(10px, env(safe-area-inset-bottom,0px));
  }
  #choicePickerBackdrop:not(.anchoredPickerBackdrop) .choicePickerPanel,
  #schedulePickerBackdrop .schedulePickerPanel,
  #repeatPickerBackdrop .repeatPickerPanel,
  #timePickerBackdrop .timePickerPanel {
    width: min(420px, 100%);
    max-height: min(70dvh, 540px);
    border-radius: 18px;
    padding-bottom: 0;
  }
  #choicePickerBackdrop:not(.anchoredPickerBackdrop) .choicePickerPanel { max-height: min(68dvh, 500px); }
  #schedulePickerBackdrop .schedulePickerPanel { max-height: min(62dvh, 430px); }
  #repeatPickerBackdrop .repeatPickerPanel { max-height: min(68dvh, 500px); }
  #timePickerBackdrop .timePickerPanel { width: min(340px, 100%); max-height: min(64dvh, 430px); }

  #choicePickerBackdrop:not(.anchoredPickerBackdrop) .pickerPanel > header strong,
  #schedulePickerBackdrop .pickerPanel > header strong,
  #repeatPickerBackdrop .pickerPanel > header strong,
  #timePickerBackdrop .pickerPanel > header strong { font-size: 17px; }

  #choicePickerBackdrop:not(.anchoredPickerBackdrop) .choiceRow {
    min-height: 47px;
    grid-template-columns: 28px minmax(0,1fr) 22px;
    padding: 6px 8px;
  }
  #choicePickerBackdrop:not(.anchoredPickerBackdrop) .choiceRow b { font-size: 14px; }
  #choicePickerBackdrop:not(.anchoredPickerBackdrop) .choiceRow small { font-size: 10.5px; }
  #choicePickerBackdrop:not(.anchoredPickerBackdrop) .choiceIcon { font-size: 19px; }

  #schedulePickerBackdrop .schedulePickerBody { gap: 8px; padding: 10px 11px 11px; }
  #schedulePickerBackdrop .schedulePickerBody label { grid-template-columns: 70px minmax(0,1fr); }
  #schedulePickerBackdrop .scheduleQuick button { font-size: 12px; }

  #repeatPickerBackdrop .repeatPickerBody { padding: 8px 10px 10px; }
  #repeatPickerBackdrop .repeatEmpty { padding: 7px 3px; }
  #repeatPickerBackdrop .repeatDetails { padding: 5px 2px 7px; }
}

@media (max-width: 360px) {
  #choicePickerBackdrop:not(.anchoredPickerBackdrop) .choicePickerPanel,
  #schedulePickerBackdrop .schedulePickerPanel,
  #repeatPickerBackdrop .repeatPickerPanel,
  #timePickerBackdrop .timePickerPanel { max-width: calc(100vw - 16px); }
  #schedulePickerBackdrop .schedulePickerBody label { grid-template-columns: 64px minmax(0,1fr); }
  #schedulePickerBackdrop .scheduleQuick { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #schedulePickerBackdrop .scheduleQuick button { padding-inline: 5px; font-size: 11.5px; }
}


/* 2.8.17 — stable Plan-day controls + attachment-free task card.
   One shared frontend is used by Web, Windows WebView, Android WebView and iPhone PWA. */
.planHeader {
  display:grid !important;
  grid-template-columns:36px minmax(0,1fr) auto 36px;
  grid-template-areas:"prev date actions next";
  align-items:center;
  gap:6px;
  min-width:0;
  overflow:visible;
  padding:7px 8px;
}
#prevPlanDay { grid-area:prev; }
#nextPlanDay { grid-area:next; }
.planDateBlock { grid-area:date; min-width:0; text-align:center; }
.planDateBlock strong,
.planDateBlock small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.planHeaderActions {
  grid-area:actions;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  min-width:0;
}
.planDayArrow {
  width:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  height:34px;
  display:grid;
  place-items:center;
  padding:0 !important;
  border-radius:10px;
  color:#4c5851;
  font-size:24px;
  line-height:1;
}
.planTodayTop,
.dailyPlanningButton {
  min-height:30px !important;
  height:30px;
  border:1px solid #dce3de;
  border-radius:9px;
  background:#f7f9f7;
  padding:0 9px !important;
  color:#4a574f;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:750;
  text-transform:none;
  white-space:nowrap;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
}
.planTodayTop:not(.isToday) {
  color:var(--workspace-color);
  border-color:color-mix(in srgb,var(--workspace-color) 22%,#dce3de);
  background:color-mix(in srgb,var(--workspace-color) 7%,#fff);
}
.dailyPlanningButton {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
#dailyPlanningBtn::before,
#dailyPlanningBtn::after { content:none !important; }
.planAutoIcon {
  width:14px;
  height:14px;
  display:inline-block;
  border:1.5px solid currentColor;
  border-radius:3px;
  background:
    linear-gradient(currentColor,currentColor) 3px 3px/2px 2px no-repeat,
    linear-gradient(currentColor,currentColor) 8px 3px/2px 2px no-repeat,
    linear-gradient(currentColor,currentColor) 3px 8px/2px 2px no-repeat,
    linear-gradient(currentColor,currentColor) 8px 8px/2px 2px no-repeat;
  opacity:.78;
}

/* Attachments were intentionally removed from the task UI in 2.8.17.
   Old attachment payloads are preserved silently for backward compatibility. */
.attachmentList,
.attachmentItem,
#attachmentInput,
#taskAttachQuickBtn { display:none !important; }
.taskMessageBar.taskMessageBarNoAttach {
  grid-template-columns:minmax(0,1fr) 38px !important;
  gap:7px;
  min-height:46px;
  padding:4px 2px calc(4px + var(--safe-bottom,0px));
  background:#fff;
}
.taskMessageBar.taskMessageBarNoAttach input {
  height:38px !important;
  border:1px solid #dfe4e0 !important;
  border-radius:10px;
  background:#f8faf8 !important;
  padding:0 11px;
  font-size:14px !important;
}
.taskMessageBar.taskMessageBarNoAttach #taskMessageSend {
  width:36px;
  height:36px !important;
  border-radius:10px;
  background:var(--workspace-color);
  color:var(--workspace-contrast,#fff);
  font-size:20px !important;
  font-weight:800;
  line-height:1;
}

@media (max-width:760px) {
  .planHeader {
    grid-template-columns:34px minmax(0,1fr) 34px !important;
    grid-template-areas:
      "prev date next"
      "actions actions actions" !important;
    row-gap:4px;
    column-gap:5px;
    min-height:72px;
    padding:5px 8px 6px !important;
  }
  .planDateBlock strong { font-size:14px !important; }
  .planDateBlock small { font-size:10px !important; }
  .planHeaderActions {
    justify-content:center;
    gap:6px;
    width:100%;
  }
  #planLoadBadge { display:none !important; }
  .planDayArrow {
    width:32px !important;
    min-width:32px !important;
    height:32px;
    min-height:32px !important;
    font-size:22px;
  }
  .planTodayTop,
  .dailyPlanningButton {
    height:28px;
    min-height:28px !important;
    padding:0 10px !important;
    font-size:11px !important;
  }
  .dailyPlanningButton .planAutoIcon { width:13px; height:13px; }
  body.taskCardOpen .taskMessageBar.taskMessageBarNoAttach {
    grid-template-columns:minmax(0,1fr) 36px !important;
    min-height:42px;
    padding:3px 0 calc(3px + var(--safe-bottom,0px));
  }
}

@media (max-width:360px) {
  .planHeader { padding-inline:6px !important; }
  .planDateBlock strong { font-size:13px !important; }
  .planTodayTop,
  .dailyPlanningButton { padding-inline:8px !important; font-size:10.5px !important; }
}

/* 2.8.18 — calm, single project toolbar across Web / Windows / Android / iPhone.
   One visible hierarchy: title -> optional object tabs -> Subproject / Filter / More.
   Duplicated call/edit/FAB/voice controls are deliberately removed from project headers. */
.mainPane.projectView .mainHeader {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  min-height:auto;
  padding:10px 14px;
}
.mainPane.projectView .mainHeader .titleBlock {
  order:1;
  flex:1 1 100%;
  min-width:0;
}
.mainPane.projectView .mainHeader .objectActions {
  order:2;
  position:static;
  flex:0 1 auto;
  min-width:0;
  padding:0;
  box-shadow:none;
  background:transparent;
}
.mainPane.projectView .mainHeader .projectAddChildButton { order:3; }
.mainPane.projectView .mainHeader .viewModes { order:4; margin:0 0 0 auto; width:auto; }
.mainPane.projectView .mainHeader .mobileProjectMenu { order:5; }
.mainPane.projectView #newInquiryBtn,
.mainPane.projectView #editProjectBtn { display:none !important; }
.mainPane.projectView .mobileProjectMenu:not(.hidden) {
  display:grid;
  width:40px;
  min-width:40px;
  height:40px;
  flex-basis:40px;
  margin:0;
  border-radius:10px;
}
.mainPane.projectView .projectAddChildButton,
.mainPane.projectView .filterOnlyButton {
  min-height:40px;
  height:40px;
  border-radius:10px;
  white-space:nowrap;
  overflow:visible;
  font-size:13px;
}
.mainPane.projectView .projectAddChildButton { width:auto; min-width:112px; padding:0 12px; }
.mainPane.projectView .projectAddChildButton::after { content:none; }
.mainPane.projectView .filterOnlyButton { width:auto; min-width:78px; padding:0 11px; }
.mainPane.projectView .filterOnlyButton::after { content:none; }
.mainPane.projectView .objectActions .accentButton { display:none !important; }
.mainPane.projectView .objectActions .segmented.compact { display:flex; }
.mainPane.projectView .objectActions .segmented.compact button { min-height:38px; padding:6px 9px; font-size:12px; }

/* The quick-add row already adds a task. In a project it should not repeat
   Voice + Call + floating Plus at the same time. Those remain available from
   the global Add command and, for object calls, from the project menu. */
.mainPane.projectView .fastVoiceButton,
.mainPane.projectView .fastCallButton { display:none !important; }
.mainPane.projectView #fab { display:none !important; }
.mainPane.projectView .fastAdd { gap:6px; }

@media (max-width:760px) {
  .mainPane.projectView .mainHeader {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:7px;
    min-height:auto;
    padding:9px 12px 8px;
  }
  .mainPane.projectView .mainHeader .titleBlock {
    order:1;
    flex:1 1 100%;
  }
  /* Object task/contact switching moves to the More menu on phones: one row
     of actions is easier to understand and cannot collide with the title. */
  .mainPane.projectView .mainHeader .objectActions { display:none !important; }
  .mainPane.projectView .mainHeader .projectAddChildButton {
    order:2;
    width:auto;
    min-width:112px;
    max-width:none;
    height:42px;
    min-height:42px;
    padding:0 12px;
    font-size:14px;
  }
  .mainPane.projectView .mainHeader .viewModes {
    order:3;
    display:flex !important;
    width:auto !important;
    margin-left:auto;
  }
  .mainPane.projectView .mainHeader .filterOnlyButton {
    width:auto;
    min-width:84px !important;
    height:42px;
    min-height:42px !important;
    padding:0 11px !important;
    font-size:14px !important;
    overflow:visible;
  }
  .mainPane.projectView .mainHeader .mobileProjectMenu:not(.hidden) {
    order:4;
    width:42px;
    min-width:42px;
    height:42px;
    flex-basis:42px;
    margin:0;
  }
  .mainPane.projectView .fastAdd {
    min-height:50px;
    margin:9px 11px 5px;
    padding:0 7px 0 10px;
  }
  .mainPane.projectView .fastAdd input { height:48px; }
  .mainPane.projectView .fastAddSubmit {
    display:grid !important;
    place-items:center;
    width:40px;
    min-width:40px;
    height:40px;
    min-height:40px;
    padding:0 !important;
    border-radius:10px;
    background:var(--workspace-color);
    color:var(--workspace-contrast,#fff);
    font-size:0;
  }
  .mainPane.projectView .fastAddSubmit::after { content:"→"; font-size:19px; line-height:1; }
}

@media (max-width:360px) {
  .mainPane.projectView .mainHeader { gap:6px; padding-inline:9px; }
  .mainPane.projectView .mainHeader .projectAddChildButton { min-width:104px; padding-inline:9px; font-size:13px; }
  .mainPane.projectView .mainHeader .filterOnlyButton { min-width:76px !important; padding-inline:8px !important; font-size:13px !important; }
}

/* ========================================================================== 
   2.8.20 — Book Calendar Flip
   Deliberately visible electronic-book / paper-calendar page turns on mobile.
   Bottom navigation stays fixed; only the content sheet flips. Desktop is unchanged.
   ========================================================================== */
@media (max-width:760px) {
  html.mobileViewTransitionActive { view-transition-name:none; }
  .mobileScreen.mobileActive {
    view-transition-name:planner-mobile-page;
    background:var(--surface,#fff);
    transform-style:preserve-3d;
    backface-visibility:hidden;
  }
  .workspace { perspective:1600px; perspective-origin:50% 48%; }

  /* During a finger swipe the current day behaves like a real sheet being lifted. */
  #planPane.calendarDragging > .planHeader,
  #planPane.calendarDragging > .unscheduledHost,
  #planPane.calendarDragging > .planScroll {
    transform:translate3d(var(--calendar-drag-x,0),0,0) perspective(1500px) rotateY(var(--calendar-drag-rotate,0deg));
    transform-origin:var(--calendar-drag-origin,left center);
    will-change:transform,filter;
    filter:brightness(var(--calendar-drag-brightness,1)) drop-shadow(12px 2px 20px rgba(17,43,27,.18));
    backface-visibility:hidden;
  }
  #planPane.calendarSnapBack > .planHeader,
  #planPane.calendarSnapBack > .unscheduledHost,
  #planPane.calendarSnapBack > .planScroll {
    transition:transform .26s cubic-bezier(.18,.8,.2,1),filter .26s ease;
    transform:translate3d(0,0,0) perspective(1500px) rotateY(0deg);
    filter:none;
  }
  #planScroll { overscroll-behavior-x:contain; }

  /* Bottom navigation remains anchored while the page above it turns. */
  .bottomNav { isolation:isolate; }
  .bottomNav button.active b { transform:translateY(-1px); }
}

/* Native View Transitions: make the old screen a physical-looking sheet.
   Strong angles and moving shadow are intentional: this is the visual signature. */
::view-transition-group(planner-mobile-page) {
  animation-timing-function:cubic-bezier(.18,.72,.18,1);
  perspective:1700px;
  overflow:visible;
}
::view-transition-image-pair(planner-mobile-page) {
  isolation:isolate;
  perspective:1700px;
  overflow:visible;
}
::view-transition-old(planner-mobile-page),
::view-transition-new(planner-mobile-page) {
  backface-visibility:hidden;
  transform-style:preserve-3d;
  mix-blend-mode:normal;
  overflow:hidden;
  border-radius:0;
}

/* Bottom-navigation pages: unmistakable but quicker than a day turn. */
html[data-mobile-transition="forward"][data-mobile-transition-kind="nav"]::view-transition-old(planner-mobile-page) {
  transform-origin:left center;
  z-index:2;
  animation:plannerBookNavOldForward .46s cubic-bezier(.18,.72,.18,1) both;
}
html[data-mobile-transition="forward"][data-mobile-transition-kind="nav"]::view-transition-new(planner-mobile-page) {
  z-index:1;
  animation:plannerBookNavUnderForward .46s cubic-bezier(.18,.72,.18,1) both;
}
html[data-mobile-transition="back"][data-mobile-transition-kind="nav"]::view-transition-old(planner-mobile-page) {
  transform-origin:right center;
  z-index:2;
  animation:plannerBookNavOldBack .46s cubic-bezier(.18,.72,.18,1) both;
}
html[data-mobile-transition="back"][data-mobile-transition-kind="nav"]::view-transition-new(planner-mobile-page) {
  z-index:1;
  animation:plannerBookNavUnderBack .46s cubic-bezier(.18,.72,.18,1) both;
}

/* Plan-day pages: a full, obvious book/calendar leaf turn. */
html[data-mobile-transition="forward"][data-mobile-transition-kind="day"]::view-transition-old(planner-mobile-page) {
  transform-origin:left center;
  z-index:3;
  animation:plannerBookDayOldForward .58s cubic-bezier(.16,.74,.16,1) both;
}
html[data-mobile-transition="forward"][data-mobile-transition-kind="day"]::view-transition-new(planner-mobile-page) {
  z-index:1;
  animation:plannerBookDayUnderForward .58s cubic-bezier(.16,.74,.16,1) both;
}
html[data-mobile-transition="back"][data-mobile-transition-kind="day"]::view-transition-old(planner-mobile-page) {
  transform-origin:right center;
  z-index:3;
  animation:plannerBookDayOldBack .58s cubic-bezier(.16,.74,.16,1) both;
}
html[data-mobile-transition="back"][data-mobile-transition-kind="day"]::view-transition-new(planner-mobile-page) {
  z-index:1;
  animation:plannerBookDayUnderBack .58s cubic-bezier(.16,.74,.16,1) both;
}

@keyframes plannerBookNavOldForward {
  0%   { opacity:1; transform:perspective(1500px) rotateY(0deg) translateZ(0) scale(1); filter:brightness(1); box-shadow:0 0 0 rgba(17,43,27,0); }
  38%  { opacity:.98; transform:perspective(1500px) rotateY(-22deg) translateZ(10px) scaleX(.992); filter:brightness(.92); box-shadow:18px 2px 28px rgba(17,43,27,.17); }
  72%  { opacity:.88; transform:perspective(1500px) rotateY(-54deg) translateZ(5px) scaleX(.965); filter:brightness(.80); box-shadow:28px 4px 42px rgba(17,43,27,.24); }
  100% { opacity:.30; transform:perspective(1500px) rotateY(-82deg) translateZ(0) scaleX(.90); filter:brightness(.66); box-shadow:34px 5px 48px rgba(17,43,27,.28); }
}
@keyframes plannerBookNavOldBack {
  0%   { opacity:1; transform:perspective(1500px) rotateY(0deg) translateZ(0) scale(1); filter:brightness(1); box-shadow:0 0 0 rgba(17,43,27,0); }
  38%  { opacity:.98; transform:perspective(1500px) rotateY(22deg) translateZ(10px) scaleX(.992); filter:brightness(.92); box-shadow:-18px 2px 28px rgba(17,43,27,.17); }
  72%  { opacity:.88; transform:perspective(1500px) rotateY(54deg) translateZ(5px) scaleX(.965); filter:brightness(.80); box-shadow:-28px 4px 42px rgba(17,43,27,.24); }
  100% { opacity:.30; transform:perspective(1500px) rotateY(82deg) translateZ(0) scaleX(.90); filter:brightness(.66); box-shadow:-34px 5px 48px rgba(17,43,27,.28); }
}
@keyframes plannerBookNavUnderForward {
  0% { opacity:.66; transform:translateX(3.5%) scale(.985); filter:brightness(.78); }
  58% { opacity:.84; transform:translateX(1.2%) scale(.993); filter:brightness(.90); }
  100% { opacity:1; transform:translateX(0) scale(1); filter:brightness(1); }
}
@keyframes plannerBookNavUnderBack {
  0% { opacity:.66; transform:translateX(-3.5%) scale(.985); filter:brightness(.78); }
  58% { opacity:.84; transform:translateX(-1.2%) scale(.993); filter:brightness(.90); }
  100% { opacity:1; transform:translateX(0) scale(1); filter:brightness(1); }
}

@keyframes plannerBookDayOldForward {
  0%   { opacity:1; transform:perspective(1550px) rotateY(0deg) translateZ(0) scale(1); filter:brightness(1) saturate(1); box-shadow:0 0 0 rgba(17,43,27,0); }
  24%  { opacity:1; transform:perspective(1550px) rotateY(-14deg) translateZ(15px) scaleX(.996); filter:brightness(.97) saturate(.99); box-shadow:14px 1px 24px rgba(17,43,27,.14); }
  52%  { opacity:.98; transform:perspective(1550px) rotateY(-38deg) translateZ(18px) scaleX(.982); filter:brightness(.88) saturate(.96); box-shadow:24px 3px 38px rgba(17,43,27,.22); }
  78%  { opacity:.82; transform:perspective(1550px) rotateY(-67deg) translateZ(7px) scaleX(.945); filter:brightness(.72) saturate(.90); box-shadow:36px 5px 54px rgba(17,43,27,.31); }
  100% { opacity:.22; transform:perspective(1550px) rotateY(-89deg) translateZ(0) scaleX(.86); filter:brightness(.58) saturate(.84); box-shadow:42px 7px 62px rgba(17,43,27,.35); }
}
@keyframes plannerBookDayOldBack {
  0%   { opacity:1; transform:perspective(1550px) rotateY(0deg) translateZ(0) scale(1); filter:brightness(1) saturate(1); box-shadow:0 0 0 rgba(17,43,27,0); }
  24%  { opacity:1; transform:perspective(1550px) rotateY(14deg) translateZ(15px) scaleX(.996); filter:brightness(.97) saturate(.99); box-shadow:-14px 1px 24px rgba(17,43,27,.14); }
  52%  { opacity:.98; transform:perspective(1550px) rotateY(38deg) translateZ(18px) scaleX(.982); filter:brightness(.88) saturate(.96); box-shadow:-24px 3px 38px rgba(17,43,27,.22); }
  78%  { opacity:.82; transform:perspective(1550px) rotateY(67deg) translateZ(7px) scaleX(.945); filter:brightness(.72) saturate(.90); box-shadow:-36px 5px 54px rgba(17,43,27,.31); }
  100% { opacity:.22; transform:perspective(1550px) rotateY(89deg) translateZ(0) scaleX(.86); filter:brightness(.58) saturate(.84); box-shadow:-42px 7px 62px rgba(17,43,27,.35); }
}
@keyframes plannerBookDayUnderForward {
  0% { opacity:.58; transform:translateX(5%) scale(.977); filter:brightness(.68) saturate(.94); }
  48% { opacity:.72; transform:translateX(2.4%) scale(.986); filter:brightness(.80) saturate(.97); }
  82% { opacity:.92; transform:translateX(.6%) scale(.996); filter:brightness(.94); }
  100% { opacity:1; transform:translateX(0) scale(1); filter:brightness(1); }
}
@keyframes plannerBookDayUnderBack {
  0% { opacity:.58; transform:translateX(-5%) scale(.977); filter:brightness(.68) saturate(.94); }
  48% { opacity:.72; transform:translateX(-2.4%) scale(.986); filter:brightness(.80) saturate(.97); }
  82% { opacity:.92; transform:translateX(-.6%) scale(.996); filter:brightness(.94); }
  100% { opacity:1; transform:translateX(0) scale(1); filter:brightness(1); }
}

@media (prefers-reduced-motion:reduce) {
  #planPane.calendarDragging > .planHeader,
  #planPane.calendarDragging > .unscheduledHost,
  #planPane.calendarDragging > .planScroll { transform:none !important; filter:none !important; }
  ::view-transition-group(planner-mobile-page),
  ::view-transition-old(planner-mobile-page),
  ::view-transition-new(planner-mobile-page) { animation-duration:.01ms !important; animation-name:none !important; }
}

/* ========================================================================== 
   2.8.21 — Signature Page Curl
   Tactile, premium calendar/book turn.  No canvas/WebGL: one DOM snapshot,
   3D transform, a moving crease and one gradient shadow.  Designed to feel
   special while remaining light enough for ordinary Android/iPhone hardware.
   ========================================================================== */
@media (max-width:760px) {
  .signatureCurlOverlay {
    position:fixed;
    z-index:39;
    pointer-events:none;
    overflow:hidden;
    perspective:1180px;
    perspective-origin:50% 48%;
    transform-style:preserve-3d;
    contain:layout paint style;
    isolation:isolate;
    background:transparent;
  }
  .signatureCurlStage,
  .signatureCurlSheet,
  .signatureCurlFace {
    position:absolute;
    inset:0;
  }
  .signatureCurlStage { transform-style:preserve-3d; }
  .signatureCurlSheet {
    z-index:2;
    transform-style:preserve-3d;
    backface-visibility:hidden;
    will-change:transform,opacity,clip-path;
  }
  .signatureCurlOverlay.forward .signatureCurlSheet { transform-origin:left center; }
  .signatureCurlOverlay.back .signatureCurlSheet { transform-origin:right center; }
  .signatureCurlFace {
    overflow:hidden;
    backface-visibility:hidden;
    transform-style:preserve-3d;
    background:#fff;
  }
  .signatureCurlFront { z-index:2; }
  .signatureCurlBack {
    z-index:1;
    transform:rotateY(180deg);
    background:
      linear-gradient(90deg,rgba(255,255,255,.94),rgba(250,249,245,.99) 42%,rgba(245,244,239,.98)),
      repeating-linear-gradient(0deg,rgba(24,48,31,.018) 0 1px,transparent 1px 28px);
  }
  .signatureCurlOverlay.forward .signatureCurlBack {
    border-left:2px solid color-mix(in srgb,var(--workspace-color) 16%,#d8ddd9 84%);
  }
  .signatureCurlOverlay.back .signatureCurlBack {
    border-right:2px solid color-mix(in srgb,var(--workspace-color) 16%,#d8ddd9 84%);
  }
  .signaturePaperBack {
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:color-mix(in srgb,var(--workspace-color) 15%,#aeb5b0 85%);
    font:700 11px/1 Inter,"Segoe UI",sans-serif;
    letter-spacing:.22em;
    opacity:.28;
  }
  .signatureCurlClone {
    pointer-events:none !important;
    user-select:none !important;
    -webkit-user-select:none !important;
    overscroll-behavior:none !important;
  }
  /* Bright paper edge + soft reflected light.  The opacity is driven from JS
     by the same progress value as the 3D turn, so it visually follows the curl. */
  .signatureCurlFront::before,
  .signatureCurlFront::after {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    z-index:20;
    pointer-events:none;
  }
  .signatureCurlFront::before {
    width:2px;
    opacity:var(--signature-edge,0);
    background:rgba(255,255,255,.94);
    box-shadow:0 0 6px rgba(255,255,255,.72);
  }
  .signatureCurlFront::after {
    width:18%;
    opacity:var(--signature-sheen,0);
  }
  .signatureCurlOverlay.forward .signatureCurlFront::before { right:0; }
  .signatureCurlOverlay.forward .signatureCurlFront::after {
    right:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.20) 40%,rgba(255,255,255,.62) 88%,rgba(255,255,255,.90));
  }
  .signatureCurlOverlay.back .signatureCurlFront::before { left:0; }
  .signatureCurlOverlay.back .signatureCurlFront::after {
    left:0;
    background:linear-gradient(90deg,rgba(255,255,255,.90),rgba(255,255,255,.62) 12%,rgba(255,255,255,.20) 60%,transparent);
  }
  .signatureCurlShadow {
    position:absolute;
    z-index:1;
    top:0;
    bottom:0;
    width:24px;
    left:0;
    opacity:0;
    will-change:left,width,opacity;
    background:linear-gradient(90deg,transparent,rgba(18,31,22,.30) 46%,rgba(18,31,22,.13) 68%,transparent);
    filter:blur(.35px);
  }
  .signatureCurlUnder {
    will-change:transform,opacity;
    backface-visibility:hidden;
  }

  /* A tiny physical response on the active bottom item completes the illusion
     without moving the navigation bar itself. */
  html.mobileViewTransitionActive .bottomNav button.active b {
    transform:translateY(-1px) scale(1.035);
  }
}

@media (prefers-reduced-motion:reduce) {
  .signatureCurlOverlay { display:none !important; }
  .signatureCurlUnder { transform:none !important; opacity:1 !important; }
}

/* ========================================================================== 
   2.8.22 — Premium Paper Surface
   A deliberately restrained premium-paper substrate for mobile.  The grain is
   a tiny tiled PNG (128px, ~18 KB), while light/depth use static CSS gradients.
   No canvas/WebGL/filter animation: controls stay clean and text contrast stays
   identical; the paper becomes more apparent only when a page is physically
   lifted by Signature Page Curl.
   ========================================================================== */
@media (max-width:760px) {
  :root {
    --premium-paper:#faf8f3;
    --premium-paper-deep:#f5f1e9;
    --premium-paper-texture:url('/paper-grain-v2822.png');
  }

  /* Large content surfaces feel like one continuous high-grade planner sheet.
     UI controls/buttons remain opaque, so grain never competes with labels. */
  .mobileScreen.mobileActive,
  #planPane.mobileActive,
  .mainPane.mobileActive {
    background-color:var(--premium-paper) !important;
    background-image:
      radial-gradient(ellipse at 50% -8%,rgba(255,255,255,.62) 0,rgba(255,255,255,0) 48%),
      linear-gradient(90deg,rgba(84,67,43,.016),transparent 14%,transparent 86%,rgba(84,67,43,.018)),
      var(--premium-paper-texture) !important;
    background-size:auto,auto,128px 128px !important;
    background-repeat:no-repeat,no-repeat,repeat !important;
  }

  /* The day grid is transparent over the physical sheet.  Existing hour/grid
     lines remain untouched and therefore retain exactly the same readability. */
  #planPane.mobileActive .planScroll,
  #planPane.mobileActive .timeline {
    background-color:transparent !important;
    background-image:none !important;
  }

  #planPane.mobileActive .planHeader {
    background-color:rgba(250,248,243,.965) !important;
    background-image:var(--premium-paper-texture) !important;
    background-size:128px 128px !important;
    box-shadow:0 1px 0 rgba(78,68,49,.055),0 6px 18px rgba(54,46,31,.018);
  }
  #planPane.mobileActive .unscheduledHost {
    background-color:rgba(247,244,237,.88) !important;
    background-image:var(--premium-paper-texture) !important;
    background-size:128px 128px !important;
  }

  /* Empty/project/task-list space may show the substrate, while rows/cards keep
     their normal opaque surfaces. */
  .mainPane.mobileActive .mainContent,
  .mainPane.mobileActive .taskList { background:transparent !important; }

  /* Task card gets only the faint substrate in the large body; property rows,
     inputs and action bars stay clean white/neutral for maximum legibility. */
  body.taskCardOpen .taskModal .modalBody {
    background-color:#fbfaf7 !important;
    background-image:var(--premium-paper-texture) !important;
    background-size:128px 128px !important;
  }

  /* Signature turn: the lifted leaf gains a tactile front/back surface. */
  .signatureCurlFace {
    background-color:var(--premium-paper) !important;
    background-image:
      radial-gradient(ellipse at 45% 3%,rgba(255,255,255,.58),rgba(255,255,255,0) 46%),
      var(--premium-paper-texture) !important;
    background-size:auto,128px 128px !important;
    background-repeat:no-repeat,repeat !important;
  }
  .signatureCurlBack {
    background-color:var(--premium-paper-deep) !important;
    background-image:
      linear-gradient(90deg,rgba(255,255,255,.50),rgba(247,243,234,.10) 38%,rgba(87,69,43,.055) 100%),
      radial-gradient(ellipse at 48% 45%,rgba(255,255,255,.26),rgba(255,255,255,0) 60%),
      var(--premium-paper-texture) !important;
    background-size:auto,auto,128px 128px !important;
    background-repeat:no-repeat,no-repeat,repeat !important;
  }
  .signatureCurlOverlay.forward .signatureCurlBack {
    box-shadow:inset 4px 0 8px rgba(75,60,39,.035),inset 1px 0 0 rgba(255,255,255,.82);
  }
  .signatureCurlOverlay.back .signatureCurlBack {
    box-shadow:inset -4px 0 8px rgba(75,60,39,.035),inset -1px 0 0 rgba(255,255,255,.82);
  }
  .signaturePaperBack::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      repeating-linear-gradient(8deg,rgba(91,76,53,.012) 0 1px,transparent 1px 17px),
      repeating-linear-gradient(94deg,rgba(255,255,255,.045) 0 1px,transparent 1px 31px);
    opacity:calc(.42 + var(--signature-paper-depth,0) * .22);
  }

  /* A slightly thicker warm-white edge makes the leaf read as real stock, not
     a glass card.  Width stays tiny so it cannot look decorative when static. */
  .signatureCurlOverlay.day .signatureCurlFront::before {
    width:3px;
    background:linear-gradient(90deg,#f2eee5 0,#fffdf8 45%,#ffffff 100%);
    box-shadow:0 0 7px rgba(255,253,247,.86),0 0 2px rgba(92,73,42,.14);
  }
}

@media (prefers-reduced-motion:reduce) and (max-width:760px) {
  /* Paper texture is static and remains safe/readable even when motion is off. */
  .mobileScreen.mobileActive { background-attachment:scroll !important; }
}

/* ========================================================================== 
   2.8.23 — Atelier Paper Experience
   A premium, quiet paper system inspired by high-end e-paper products: warm
   cotton stock, subtle front-light, restrained depth and tactile micro-motion.
   The same paper colour is used on desktop/Web and mobile.  Static gradients
   + one tiny seamless texture only; no Canvas/WebGL/continuous animation.
   ========================================================================== */
:root {
  --atelier-paper:#f8f5ee;
  --atelier-paper-light:#fcfaf5;
  --atelier-paper-deep:#f1ece1;
  --atelier-paper-ink:#252a26;
  --atelier-paper-muted:#72766f;
  --atelier-paper-line:rgba(72,67,54,.115);
  --atelier-paper-fibre:url('/paper-cotton-v2823.png');
  --atelier-paper-shadow:0 8px 24px rgba(46,40,28,.065),0 1px 2px rgba(46,40,28,.055);
  --atelier-paper-float:0 16px 42px rgba(42,36,25,.12),0 2px 8px rgba(42,36,25,.07);
}

/* One visual material across Web/Windows/mobile.  Controls remain clean; only
   the large working surfaces become the page. */
body {
  color:var(--atelier-paper-ink);
  background:#ebe7de;
}
.sidebar,
.mainPane,
.planPane {
  background-color:var(--atelier-paper) !important;
  background-image:
    radial-gradient(ellipse at 45% -10%,rgba(255,255,255,.78) 0,rgba(255,255,255,.18) 35%,rgba(255,255,255,0) 64%),
    linear-gradient(90deg,rgba(86,69,43,.022),transparent 13%,transparent 87%,rgba(86,69,43,.020)),
    var(--atelier-paper-fibre) !important;
  background-size:auto,auto,256px 256px !important;
  background-repeat:no-repeat,no-repeat,repeat !important;
  box-shadow:inset 0 0 96px rgba(82,67,42,.020);
}
.sidebar { background-color:#f7f4ed !important; }
.mainPane .mainContent,
.mainPane .taskList { background:transparent !important; }

/* The plan behaves like a real planner sheet: warm stock, hairline grid and a
   subtle front-light from above. */
.planScroll,
.timeline {
  background-color:transparent !important;
  background-image:none !important;
}
.timeline { border-left-color:var(--atelier-paper-line) !important; }
.planHeader {
  background-color:rgba(250,248,242,.94) !important;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.56),rgba(255,255,255,.08)),
    var(--atelier-paper-fibre) !important;
  background-size:auto,256px 256px !important;
  border-bottom-color:var(--atelier-paper-line) !important;
  box-shadow:0 1px 0 rgba(62,54,39,.05),0 8px 22px rgba(52,44,29,.026);
  backdrop-filter:blur(7px);
}
.unscheduledHost {
  background-color:rgba(247,244,236,.82) !important;
  background-image:var(--atelier-paper-fibre) !important;
  background-size:256px 256px !important;
}

/* Non-coloured task/project surfaces sit on the stock like lightly raised paper
   slips.  Coloured task semantics are deliberately untouched. */
.taskRow:not(.taskRowColored) {
  background:rgba(255,254,250,.76);
  border-color:rgba(74,68,56,.055);
  box-shadow:0 1px 2px rgba(51,44,31,.025);
}
.treeRow.active {
  background:color-mix(in srgb,var(--workspace-color) 7%,rgba(255,253,247,.94) 93%);
}
.projectSearch,
.fastAdd,
.quickTop,
.workspacePicker select,
input,
textarea,
select {
  background-color:rgba(255,255,252,.88);
}

/* Desktop: a whisper of depth on the material, not glossy app chrome. */
@media (min-width:761px) {
  .sidebar,
  .mainPane,
  .planPane { background-attachment:local,local,local; }
  .mainPane { box-shadow:inset 0 0 110px rgba(79,65,40,.017); }
  .planPane { box-shadow:inset 0 0 120px rgba(79,65,40,.020); }
  .modal {
    background-color:var(--atelier-paper-light);
    box-shadow:var(--atelier-paper-float);
  }
  .modalHeader {
    background:rgba(252,250,245,.965);
    border-bottom-color:var(--atelier-paper-line);
  }
}

/* Mobile: same colour/material as desktop, but a slightly stronger paper read
   because the screen is held closer to the eye. */
@media (max-width:760px) {
  :root {
    --premium-paper:var(--atelier-paper);
    --premium-paper-deep:var(--atelier-paper-deep);
    --premium-paper-texture:var(--atelier-paper-fibre);
  }
  .mobileScreen.mobileActive,
  #planPane.mobileActive,
  .mainPane.mobileActive {
    background-color:var(--atelier-paper) !important;
    background-image:
      radial-gradient(ellipse at 42% -7%,rgba(255,255,255,.82) 0,rgba(255,255,255,.12) 47%,rgba(255,255,255,0) 67%),
      linear-gradient(90deg,rgba(79,64,40,.022),transparent 12%,transparent 88%,rgba(79,64,40,.020)),
      var(--atelier-paper-fibre) !important;
    background-size:auto,auto,256px 256px !important;
  }
  body.taskCardOpen .taskModal .modalBody {
    background-color:#faf8f2 !important;
    background-image:var(--atelier-paper-fibre) !important;
    background-size:256px 256px !important;
  }
  .bottomNav {
    background:rgba(251,249,244,.965) !important;
    border-top-color:rgba(72,67,54,.11) !important;
    box-shadow:0 -8px 26px rgba(50,43,30,.035);
    backdrop-filter:blur(12px);
  }
  .bottomNav button { position:relative; }
  .bottomNav button:not(.captureNav)::after {
    content:"";
    position:absolute;
    left:50%;
    bottom:4px;
    width:0;
    height:2px;
    border-radius:99px;
    background:color-mix(in srgb,var(--workspace-color) 72%,#506058 28%);
    opacity:0;
    transform:translateX(-50%);
    transition:width .18s cubic-bezier(.2,.75,.25,1),opacity .18s ease;
  }
  .bottomNav button.active:not(.captureNav)::after { width:18px; opacity:.72; }
}

/* Tactile joy: tiny physical responses that make repeated work feel pleasant.
   Only transform/box-shadow are animated and only on direct interaction. */
@media (hover:hover) and (pointer:fine) {
  .taskRow:not(.taskRowColored):hover,
  .treeRow:hover,
  .quickNav button:hover,
  .projectCreateChoice:hover {
    transform:translateY(-1px);
    box-shadow:var(--atelier-paper-shadow);
  }
  .planTask:hover {
    transform:translateY(-1px) scale(1.003);
    box-shadow:0 8px 18px rgba(36,31,22,.14);
  }
  .planTools button:hover,
  .toolButton:hover,
  .projectMenuButton:hover,
  .emptyActions button:hover {
    transform:translateY(-1px);
    box-shadow:0 5px 14px rgba(48,41,28,.075);
  }
}

button:not(:disabled):active,
.taskRow:active,
.treeRow:active,
.planTask:active {
  transform:translateY(.5px) scale(.986);
  transition-duration:.055s !important;
}

input:focus,
textarea:focus,
select:focus {
  box-shadow:0 0 0 3px color-mix(in srgb,var(--workspace-color) 8%,rgba(111,94,63,.06) 92%);
}

/* Modal/picker movement should feel like lifting a thin sheet from the desk. */
@keyframes atelierPaperRise {
  0% { opacity:0; transform:translateY(7px) scale(.992); box-shadow:0 4px 14px rgba(42,36,25,.05); }
  72% { opacity:1; transform:translateY(-.5px) scale(1.001); }
  100% { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:no-preference) and (min-width:761px) {
  .modal,
  .pickerPanel,
  .actionSheet { animation:atelierPaperRise .19s cubic-bezier(.18,.82,.28,1) both; }
}
@media (prefers-reduced-motion:no-preference) and (max-width:760px) {
  .pickerPanel,
  .actionSheet { animation:atelierPaperRise .17s cubic-bezier(.18,.82,.28,1) both; }
}

/* Calendar numbers and selected days feel printed/pressed into the page rather
   than floating on a glass dashboard. */
.calendarDay {
  color:#3b403b;
}
.calendarDay:hover { background:rgba(84,72,51,.045); }
.calendarDay.active,
.calendarDay.today {
  box-shadow:inset 0 0 0 1px rgba(49,66,54,.16),0 1px 2px rgba(52,44,31,.045);
}

/* Signature Page Curl: richer paper optics without heavier rendering.  The
   crease, edge thickness and reflected light all reuse existing progress vars. */
@media (max-width:760px) {
  .signatureCurlOverlay {
    perspective:1360px;
    perspective-origin:50% 46%;
  }
  .signatureCurlFace {
    background-color:var(--atelier-paper) !important;
    background-image:
      radial-gradient(ellipse at 44% 1%,rgba(255,255,255,.72),rgba(255,255,255,0) 50%),
      linear-gradient(90deg,rgba(93,76,49,.012),transparent 16%,transparent 84%,rgba(93,76,49,.015)),
      var(--atelier-paper-fibre) !important;
    background-size:auto,auto,256px 256px !important;
    box-shadow:inset 0 0 42px rgba(79,64,39,.022);
  }
  .signatureCurlBack {
    background-color:var(--atelier-paper-deep) !important;
    background-image:
      linear-gradient(90deg,rgba(255,255,255,.62),rgba(250,247,239,.16) 38%,rgba(89,70,43,.065) 100%),
      radial-gradient(ellipse at 46% 42%,rgba(255,255,255,.30),rgba(255,255,255,0) 58%),
      var(--atelier-paper-fibre) !important;
    background-size:auto,auto,256px 256px !important;
  }
  .signatureCurlFront::before {
    width:4px !important;
    background:linear-gradient(90deg,#eee8dc 0,#fbf7ef 32%,#fffefa 68%,#fff 100%) !important;
    box-shadow:0 0 9px rgba(255,253,247,.94),0 0 3px rgba(84,66,38,.17) !important;
  }
  .signatureCurlFront::after {
    width:27% !important;
    filter:saturate(.86);
  }
  .signatureCurlShadow {
    width:38px;
    background:linear-gradient(90deg,transparent,rgba(30,27,21,.36) 38%,rgba(30,27,21,.17) 58%,rgba(30,27,21,.035) 82%,transparent);
    filter:blur(.55px);
  }
  .signatureCurlSheet::after {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    z-index:24;
    width:12%;
    pointer-events:none;
    opacity:calc(.03 + var(--signature-paper-depth,0) * .44);
    mix-blend-mode:multiply;
  }
  .signatureCurlOverlay.forward .signatureCurlSheet::after {
    right:0;
    background:linear-gradient(90deg,transparent,rgba(88,70,43,.025) 28%,rgba(65,51,31,.13) 74%,rgba(255,255,255,.15));
  }
  .signatureCurlOverlay.back .signatureCurlSheet::after {
    left:0;
    background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(65,51,31,.13) 26%,rgba(88,70,43,.025) 72%,transparent);
  }
  .signaturePaperBack {
    color:rgba(57,68,59,.30);
    letter-spacing:.26em;
  }
}

@media (prefers-reduced-motion:reduce) {
  button,
  .taskRow,
  .treeRow,
  .planTask,
  .modal,
  .pickerPanel,
  .actionSheet { animation:none !important; transition-duration:.01ms !important; }
}

/* 2.8.24 — Page themes + checklist simplification */
html[data-page-theme="paper"] {
  --atelier-paper:#f8f5ee;
  --atelier-paper-light:#fcfaf5;
  --atelier-paper-deep:#f1ece1;
  --atelier-paper-ink:#252a26;
  --atelier-paper-muted:#72766f;
  --atelier-paper-line:rgba(72,67,54,.115);
  --atelier-paper-fibre:url('/paper-cotton-v2823.png');
}
html[data-page-theme="white"] {
  --atelier-paper:#ffffff;
  --atelier-paper-light:#ffffff;
  --atelier-paper-deep:#f4f5f3;
  --atelier-paper-ink:#202522;
  --atelier-paper-muted:#737975;
  --atelier-paper-line:rgba(29,38,31,.10);
  --atelier-paper-fibre:none;
}
html[data-page-theme="ivory"] {
  --atelier-paper:#f4eddd;
  --atelier-paper-light:#fbf7ed;
  --atelier-paper-deep:#e9dfc9;
  --atelier-paper-ink:#292720;
  --atelier-paper-muted:#797365;
  --atelier-paper-line:rgba(91,78,54,.12);
  --atelier-paper-fibre:url('/paper-cotton-v2823.png');
}

.taskChecklistPrimary {
  margin:8px 0 10px;
  padding:10px 12px 8px;
  border:1px solid var(--atelier-paper-line,rgba(0,0,0,.08));
  border-radius:14px;
  background:color-mix(in srgb,var(--atelier-paper-light,#fff) 92%,transparent);
  box-shadow:0 2px 10px rgba(36,31,22,.035);
}
.taskChecklistHeading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:34px;
  margin-bottom:4px;
}
.taskChecklistHeading strong { font-size:14px; font-weight:700; }
.taskChecklistHeading span {
  min-width:34px;
  text-align:center;
  font-size:12px;
  color:var(--atelier-paper-muted,#72766f);
  background:rgba(128,128,128,.08);
  border-radius:999px;
  padding:3px 8px;
}
.taskChecklistPrimary .checklistRow {
  min-height:40px;
  margin:0;
  border-top:1px solid var(--atelier-paper-line,rgba(0,0,0,.07));
}
.taskChecklistPrimary .checklistRow:first-child { border-top:0; }
.taskChecklistPrimary .linkButton { margin-top:4px; }
.taskChecklistCollapsed { margin-top:8px; }
@media (max-width:760px) {
  .taskChecklistPrimary { margin:6px 12px 8px; padding:8px 10px 7px; border-radius:12px; }
  .taskChecklistPrimary .checklistRow { min-height:42px; }
}


/* 2.8.25 — simple three-destination navigation + book ivory theme */
.taskSideHeading { margin-top:2px; margin-bottom:2px; }
@media (max-width:760px) {
  .bottomNav.simpleBottomNav {
    grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr) !important;
    height:calc(70px + env(safe-area-inset-bottom));
    padding:0 12px env(safe-area-inset-bottom);
    background:color-mix(in srgb,var(--atelier-paper-light,#fff) 94%,transparent) !important;
    border-top:1px solid color-mix(in srgb,var(--atelier-paper-line,rgba(0,0,0,.1)) 92%,transparent);
    box-shadow:0 -8px 28px rgba(42,36,25,.055);
    backdrop-filter:blur(14px);
  }
  .bottomNav.simpleBottomNav button {
    min-width:0; min-height:58px; gap:4px;
    border-radius:18px; color:#70756f;
    transition:transform .16s ease,color .16s ease,background .16s ease;
  }
  .bottomNav.simpleBottomNav button b { font-size:21px; font-weight:500; }
  .bottomNav.simpleBottomNav button span { font-size:11px; font-weight:650; letter-spacing:.01em; }
  .bottomNav.simpleBottomNav button.active:not(.captureNav) {
    color:color-mix(in srgb,var(--workspace-color) 78%,#1f2b23 22%);
    background:color-mix(in srgb,var(--workspace-color) 7%,transparent);
  }
  .bottomNav.simpleBottomNav .captureNav { overflow:visible; }
  .bottomNav.simpleBottomNav .captureNav b {
    width:50px; height:50px; margin-top:-22px; border-radius:17px;
    background:color-mix(in srgb,var(--workspace-color) 86%,#07561e 14%);
    color:#fff; box-shadow:0 7px 18px rgba(20,74,39,.24),0 1px 0 rgba(255,255,255,.28) inset;
    font-size:31px; font-weight:350;
  }
  .bottomNav.simpleBottomNav .captureNav:active b { transform:scale(.94); }
  /* The central + is the only floating create affordance on mobile. */
  .fab { display:none !important; }
}


/* 2.8.26 — mobile Overview navigation: one home, one create, one plan */
@media (max-width:760px) {
  /* The bottom Overview is the only entry to mobile navigation; no duplicate hamburger. */
  #overviewBtn { display:none !important; }
  .topbar { gap:8px; }
  .topActions { width:100%; min-width:0; }
  .workspacePicker { flex:1 1 auto; min-width:0; }
  .workspacePicker select { width:100%; max-width:none; }
  .userButton { flex:0 0 auto; }
  .bottomNav.simpleBottomNav .overviewNavIcon { width:23px; height:23px; display:grid; place-items:center; }
  .bottomNav.simpleBottomNav .overviewNavIcon svg { width:23px; height:23px; display:block; }
  .bottomNav.simpleBottomNav button.active .overviewNavIcon { transform:translateY(-1px); }
  #overviewPane.mobileActive { scroll-behavior:smooth; }
}

/* ========================================================================== 
   2.8.27 — Smooth reader motion
   Book = e-reader page turn, Paper = loose sheet, Smartphone = launcher swipe.
   During animation only transform/opacity are changed; no animated blur/filter.
   ========================================================================== */
@media (max-width:760px) {
  .signatureCurlSheet {
    will-change:transform,opacity !important;
    clip-path:none !important;
    -webkit-clip-path:none !important;
  }
  .signatureCurlShadow {
    left:0 !important;
    filter:none !important;
    will-change:transform,opacity !important;
    transform-origin:center center;
    background:linear-gradient(90deg,transparent,rgba(31,28,23,.28) 36%,rgba(31,28,23,.12) 62%,transparent) !important;
  }
  .signatureCurlOverlay.book { perspective:1500px; }
  .signatureCurlOverlay.book .signatureCurlSheet { transform-origin:left center; }
  .signatureCurlOverlay.book.back .signatureCurlSheet { transform-origin:right center; }
  .signatureCurlOverlay.book .signatureCurlFront::before { opacity:.48 !important; }
  .signatureCurlOverlay.book .signatureCurlFront::after { opacity:.24 !important; filter:none !important; width:16% !important; }
  .signatureCurlOverlay.book .signatureCurlSheet::after { opacity:.12 !important; mix-blend-mode:normal !important; }
  .signatureCurlOverlay.paper .signatureCurlFront::before { opacity:.62 !important; }
  .signatureCurlOverlay.paper .signatureCurlFront::after { opacity:.38 !important; filter:none !important; width:22% !important; }
  .signatureCurlOverlay.paper .signatureCurlSheet::after { opacity:.22 !important; mix-blend-mode:normal !important; }
  .smartphonePageDragging {
    will-change:transform;
    backface-visibility:hidden;
    transform-style:flat !important;
    contain:paint;
  }
  html[data-page-effect="smartphone"] #planPane,
  html[data-page-effect="smartphone"] .mobileScreen.mobileActive {
    backface-visibility:hidden;
  }
}


/* 2.8.28 — mobile settings affordance: clear gear instead of ambiguous initial */
@media (max-width:760px) {
  #settingsBtn {
    width:48px; min-width:48px; height:48px; padding:0;
    display:grid; place-items:center;
    border:1px solid color-mix(in srgb,var(--workspace-color) 12%,#d9dfda 88%);
    background:rgba(255,255,255,.92);
    box-shadow:0 2px 8px rgba(20,30,24,.05);
  }
  #settingsBtn #currentUserBadge, #settingsBtn #currentUserName { display:none !important; }
  #settingsBtn .settingsGear {
    width:25px; height:25px; display:grid; place-items:center;
    color:color-mix(in srgb,var(--workspace-color) 74%,#2b332e 26%);
    background:transparent; border:0; border-radius:0;
  }
  #settingsBtn .settingsGear svg { width:25px; height:25px; display:block; fill:none; stroke:currentColor; }
  #settingsBtn:active .settingsGear { transform:rotate(18deg) scale(.94); }
}


/* ========================================================================== 
   2.8.29 — True 3D Reader Book
   Calendar keeps the existing loose-sheet motion. Book is now a genuine
   two-sided page rotating past 90°: front -> paper backside -> lay-down.
   No animated blur/filter/canvas/WebGL; transform/opacity stay compositor-only.
   ========================================================================== */
@media (max-width:760px) {
  .signatureCurlOverlay.book {
    perspective:1850px !important;
    perspective-origin:50% 50% !important;
    overflow:visible !important;
  }
  .signatureCurlOverlay.book .signatureCurlStage {
    transform-style:preserve-3d !important;
    overflow:visible !important;
  }
  .signatureCurlOverlay.book .signatureCurlSheet {
    transform-style:preserve-3d !important;
    backface-visibility:visible !important;
    -webkit-backface-visibility:visible !important;
    will-change:transform !important;
  }
  .signatureCurlOverlay.book .signatureCurlFace {
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    transform-style:preserve-3d !important;
  }
  .signatureCurlOverlay.book .signatureCurlFront {
    transform:translateZ(.35px);
    background:var(--atelier-paper,#f8f5ee) !important;
  }
  .signatureCurlOverlay.book .signatureCurlBack {
    transform:rotateY(180deg) translateZ(.35px) !important;
    background-color:var(--atelier-paper-deep,#f1ece1) !important;
    background-image:
      linear-gradient(90deg,rgba(255,255,255,.26),transparent 34%,rgba(42,36,25,.045) 100%),
      var(--atelier-paper-fibre) !important;
    box-shadow:inset 0 0 0 1px rgba(72,67,54,.045);
  }
  .signatureCurlOverlay.book .signaturePaperBack {
    opacity:.16 !important;
    letter-spacing:.24em;
  }
  /* A fixed, subtle binding shadow gives the eye a stable spine while the page
     rotates. It is static: zero per-frame layout/paint work. */
  .signatureCurlOverlay.book .signatureCurlStage::before {
    content:"";
    position:absolute;
    top:0; bottom:0;
    width:12px;
    z-index:5;
    pointer-events:none;
    opacity:.42;
  }
  .signatureCurlOverlay.book.forward .signatureCurlStage::before {
    left:-2px;
    background:linear-gradient(90deg,rgba(35,31,24,.16),rgba(35,31,24,.055) 32%,transparent);
  }
  .signatureCurlOverlay.book.back .signatureCurlStage::before {
    right:-2px;
    background:linear-gradient(270deg,rgba(35,31,24,.16),rgba(35,31,24,.055) 32%,transparent);
  }
  .signatureCurlOverlay.book .signatureCurlFront::before { opacity:.34 !important; }
  .signatureCurlOverlay.book .signatureCurlFront::after { opacity:.16 !important; width:11% !important; }
  .signatureCurlOverlay.book .signatureCurlSheet::after { opacity:.08 !important; }
}


/* 2.8.30 — mobile checklist editor stays stable above the software keyboard. */
@media (max-width:760px) {
  body.taskCardOpen { overflow:hidden; overscroll-behavior:none; }
  body.taskCardOpen #modalBackdrop {
    inset:auto 0 auto 0 !important;
    top:var(--task-visible-top,0px) !important;
    height:var(--task-visible-height,100dvh) !important;
    min-height:0 !important;
    overflow:hidden !important;
    padding:0 !important;
  }
  body.taskCardOpen .taskModal {
    height:100% !important;
    max-height:100% !important;
    min-height:0 !important;
  }
  body.taskCardOpen .taskModal .modalHeader { position:relative; top:auto; flex:0 0 auto; }
  body.taskCardOpen .taskModal .modalBody { min-height:0; flex:1 1 auto; overflow-y:auto !important; }
  body.taskCardOpen .taskChecklistPrimary { overflow:visible; }
  body.taskCardOpen .taskChecklistPrimary .checklistRows { gap:0; }
  body.taskCardOpen .taskChecklistPrimary .checklistRow {
    grid-template-columns:32px minmax(0,1fr) 34px;
    gap:7px; min-width:0; padding:3px 0; min-height:44px;
  }
  body.taskCardOpen .taskChecklistPrimary .checklistRow input[type="checkbox"] {
    width:22px; height:22px; margin:0; justify-self:center;
  }
  body.taskCardOpen .taskChecklistPrimary .checklistRow input[type="text"] {
    width:100%; min-width:0; height:38px; min-height:38px;
    padding:6px 9px; border-radius:9px; font-size:16px; line-height:1.2;
    box-sizing:border-box;
  }
  body.taskCardOpen .taskChecklistPrimary .checklistRow button[data-remove-check] {
    width:34px; height:34px; min-width:34px; min-height:34px;
    padding:0; border-radius:8px; font-size:22px; line-height:1; touch-action:manipulation;
  }
  body.taskCardOpen .taskChecklistPrimary .linkButton { min-height:36px; padding:5px 4px; font-size:14px; }
  body.taskCardOpen.taskKeyboardOpen .taskChecklistPrimary {
    margin:4px 8px 6px; padding:6px 8px 5px; border-radius:11px;
  }
  body.taskCardOpen.taskKeyboardOpen .taskChecklistHeading { min-height:28px; margin-bottom:1px; }
  body.taskCardOpen.taskKeyboardOpen .taskChecklistHeading strong { font-size:13px; }
  body.taskCardOpen.taskKeyboardOpen .taskChecklistHeading span { padding:2px 7px; font-size:11px; }
  body.taskCardOpen.taskKeyboardOpen .taskFormActions { display:none !important; }
}

/* ========================================================================== 
   2.8.31 — True Corner Page Curl
   Book mode now starts from the free lower corner, like a physical book:
   triangular paper back + diagonal crease + cast shadow precede the spine turn.
   The fold layers have fixed geometry; animation changes transform/opacity only.
   ========================================================================== */
@media (max-width:760px) {
  .signatureCurlOverlay.book .signatureBookCorner,
  .signatureCurlOverlay.book .signatureBookCornerShadow,
  .signatureCurlOverlay.book .signatureBookCornerCrease {
    display:block;
    position:absolute;
    pointer-events:none;
    opacity:0;
    will-change:transform,opacity;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .signatureCurlOverlay.book .signatureBookCorner {
    z-index:8;
    bottom:-2px;
    width:48%;
    height:38%;
    transform-style:preserve-3d;
    background-color:var(--atelier-paper-deep,#f1ece1);
    background-image:
      linear-gradient(135deg,rgba(255,255,255,.78) 0,rgba(255,255,255,.20) 34%,rgba(74,61,42,.08) 70%,rgba(45,38,28,.16) 100%),
      var(--atelier-paper-fibre);
    background-size:auto,256px 256px;
    box-shadow:inset 0 0 0 1px rgba(80,65,43,.06),0 3px 8px rgba(32,28,22,.08);
  }
  .signatureCurlOverlay.book.forward .signatureBookCorner {
    right:-1px;
    transform-origin:100% 100%;
    clip-path:polygon(100% 100%,0 100%,32% 78%,62% 48%,88% 20%,100% 0);
    -webkit-clip-path:polygon(100% 100%,0 100%,32% 78%,62% 48%,88% 20%,100% 0);
  }
  .signatureCurlOverlay.book.back .signatureBookCorner {
    left:-1px;
    transform-origin:0 100%;
    clip-path:polygon(0 100%,100% 100%,68% 78%,38% 48%,12% 20%,0 0);
    -webkit-clip-path:polygon(0 100%,100% 100%,68% 78%,38% 48%,12% 20%,0 0);
    background-image:
      linear-gradient(225deg,rgba(255,255,255,.78) 0,rgba(255,255,255,.20) 34%,rgba(74,61,42,.08) 70%,rgba(45,38,28,.16) 100%),
      var(--atelier-paper-fibre);
  }
  .signatureCurlOverlay.book .signatureBookCorner::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.58),transparent 38%,rgba(58,48,34,.14) 74%,rgba(25,22,18,.22));
    opacity:.72;
  }
  .signatureCurlOverlay.book.back .signatureBookCorner::after {
    background:linear-gradient(225deg,rgba(255,255,255,.58),transparent 38%,rgba(58,48,34,.14) 74%,rgba(25,22,18,.22));
  }
  .signatureCurlOverlay.book .signatureBookCornerShadow {
    z-index:6;
    bottom:0;
    width:50%;
    height:40%;
    background:linear-gradient(135deg,transparent 42%,rgba(30,26,20,.08) 54%,rgba(30,26,20,.30) 78%,transparent 100%);
  }
  .signatureCurlOverlay.book.forward .signatureBookCornerShadow {
    right:0;
    transform-origin:100% 100%;
    clip-path:polygon(100% 100%,0 100%,32% 78%,62% 48%,88% 20%,100% 0);
    -webkit-clip-path:polygon(100% 100%,0 100%,32% 78%,62% 48%,88% 20%,100% 0);
  }
  .signatureCurlOverlay.book.back .signatureBookCornerShadow {
    left:0;
    transform-origin:0 100%;
    clip-path:polygon(0 100%,100% 100%,68% 78%,38% 48%,12% 20%,0 0);
    -webkit-clip-path:polygon(0 100%,100% 100%,68% 78%,38% 48%,12% 20%,0 0);
    background:linear-gradient(225deg,transparent 42%,rgba(30,26,20,.08) 54%,rgba(30,26,20,.30) 78%,transparent 100%);
  }
  .signatureCurlOverlay.book .signatureBookCornerCrease {
    z-index:9;
    bottom:4%;
    width:2px;
    height:46%;
    border-radius:2px;
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.92) 16%,rgba(112,92,61,.22) 52%,rgba(35,30,23,.34) 78%,transparent);
    box-shadow:0 0 5px rgba(255,255,255,.66),0 0 5px rgba(38,31,23,.12);
  }
  .signatureCurlOverlay.book.forward .signatureBookCornerCrease {
    right:9%;
    transform-origin:50% 100%;
  }
  .signatureCurlOverlay.book.back .signatureBookCornerCrease {
    left:9%;
    transform-origin:50% 100%;
  }
  /* Book's first visible action is the corner peel, not the calendar-like edge. */
  .signatureCurlOverlay.book .signatureCurlFront::after { opacity:.08 !important; width:7% !important; }
  .signatureCurlOverlay.book .signatureCurlFront::before { opacity:.22 !important; }
}


/* 2.8.32 — compact accordion settings for Web + mobile */
.settingsModal .modalBody{padding:12px 14px 84px}
.settingsModal .settingsIdentityCompact{padding:9px 11px;margin-bottom:7px;border:1px solid color-mix(in srgb,var(--workspace-color) 10%,#e4e8e5 90%);background:color-mix(in srgb,var(--paper-base,#f8f5ee) 82%,#fff 18%)}
.settingsModal .settingsIdentityCompact .userAvatar{width:38px;height:38px;border-radius:11px;font-size:17px}
.settingsWorkspacePill{margin:4px 2px 10px;color:var(--muted);font-size:12px}
.settingsAccordion{margin:8px 0;border:1px solid #dde3df;border-radius:13px;background:rgba(255,255,255,.72);overflow:hidden;box-shadow:0 1px 0 rgba(20,40,27,.02)}
.settingsAccordion>summary{list-style:none;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.settingsAccordion>summary::-webkit-details-marker{display:none}
.settingsAccordion>summary:hover{background:color-mix(in srgb,var(--workspace-color) 4%,#fff 96%)}
.settingsAccordion[open]>summary{border-bottom:1px solid #e5e9e6;background:color-mix(in srgb,var(--workspace-color) 5%,#fff 95%)}
.settingsAccordionText{min-width:0;display:flex;flex-direction:column;gap:2px}
.settingsAccordionText>b{font-size:15px;line-height:1.15;font-weight:730;color:#222a25}
.settingsAccordionText>small{max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:#748078}
.settingsAccordionSide{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.settingsAccordionChevron{width:9px;height:9px;border-right:1.8px solid #657068;border-bottom:1.8px solid #657068;transform:rotate(45deg) translateY(-2px);transition:transform .16s ease}
.settingsAccordion[open] .settingsAccordionChevron{transform:rotate(225deg) translate(-1px,-1px)}
.settingsColorDots{display:flex;align-items:center}
.settingsColorDots i{width:12px;height:12px;border-radius:50%;background:var(--dot);border:1.5px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(40,55,45,.09);margin-left:-3px}
.settingsColorDots i:first-child{margin-left:0}
.settingsAccordionPanel.formSection{margin:0;border-top:0;padding:12px;background:transparent}
.settingsAccordionOriginalTitle{display:none!important}
.settingsAccordionPanel>.mutedText:first-of-type{margin-top:0}
.settingsAccordionPanel .memberList,.settingsAccordionPanel .markerAdminList{margin-top:4px}
.settingsUtilityActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid #e5e9e6}
.settingsUtilityActions button{min-width:0;flex:1 1 150px}
.settingsModal .settingsSaveActions{z-index:4}
.settingsModal .settingsSaveActions button{min-width:140px}
.settingsModal .settingsSaveActions .primaryButton{margin-left:auto}
.settingsAccordionPanel.platformEntry{border-left:0}
@media(max-width:760px){
  .settingsModal .modalBody{padding:9px 10px calc(74px + env(safe-area-inset-bottom))}
  .settingsModal .settingsIdentityCompact{margin:0 0 7px;padding:8px 10px}
  .settingsWorkspacePill{margin:3px 2px 8px;font-size:11.5px}
  .settingsAccordion{margin:6px 0;border-radius:12px}
  .settingsAccordion>summary{min-height:50px;padding:8px 11px}
  .settingsAccordionText>b{font-size:14.5px}
  .settingsAccordionText>small{max-width:235px;font-size:11px}
  .settingsAccordionPanel.formSection{padding:10px}
  .settingsAccordionPanel .memberRow{padding:8px 0}
  .settingsAccordionPanel .markerAdminRow{gap:6px}
  .settingsModal .settingsSaveActions{position:sticky;bottom:0;margin:10px -10px calc(-1 * (74px + env(safe-area-inset-bottom)));padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid #e0e5e1;backdrop-filter:blur(10px)}
  .settingsModal .settingsSaveActions button{flex:1;min-width:0}
}


/* ========================================================================== 
   2.8.33 — Reader curl continuity + clear page appearance settings
   Book fold belongs to the page itself; colour themes visibly affect Web,
   Windows and mobile working surfaces. Motion setting is explicitly mobile-only.
   ========================================================================== */
:root {
  --atelier-shell:#ebe7de;
  --atelier-sidebar:#f7f4ed;
  --atelier-control:rgba(255,255,252,.90);
  --atelier-header:rgba(250,248,242,.95);
  --atelier-unscheduled:rgba(247,244,236,.84);
  --atelier-bottom:rgba(251,249,244,.97);
  --atelier-modal:#fcfaf5;
}
html[data-page-theme="paper"] {
  --atelier-shell:#ebe7de;
  --atelier-sidebar:#f7f4ed;
  --atelier-control:rgba(255,255,252,.90);
  --atelier-header:rgba(250,248,242,.95);
  --atelier-unscheduled:rgba(247,244,236,.84);
  --atelier-bottom:rgba(251,249,244,.97);
  --atelier-modal:#fcfaf5;
}
html[data-page-theme="ivory"] {
  --atelier-shell:#e6dece;
  --atelier-sidebar:#f0e8d8;
  --atelier-control:#fbf7ee;
  --atelier-header:rgba(247,241,228,.97);
  --atelier-unscheduled:rgba(241,232,214,.88);
  --atelier-bottom:rgba(248,242,230,.98);
  --atelier-modal:#fbf7ed;
}
html[data-page-theme="white"] {
  --atelier-shell:#edf0ee;
  --atelier-sidebar:#ffffff;
  --atelier-control:#ffffff;
  --atelier-header:rgba(255,255,255,.98);
  --atelier-unscheduled:rgba(250,251,250,.96);
  --atelier-bottom:rgba(255,255,255,.985);
  --atelier-modal:#ffffff;
}
body { background:var(--atelier-shell) !important; }
.sidebar { background-color:var(--atelier-sidebar) !important; }
.mainPane,.planPane { background-color:var(--atelier-paper) !important; }
.planHeader { background-color:var(--atelier-header) !important; }
.unscheduledHost { background-color:var(--atelier-unscheduled) !important; }
.projectSearch,.fastAdd,.quickTop,.workspacePicker select,input,textarea,select { background-color:var(--atelier-control) !important; }
.modal,.settingsModal,.settingsModal .modalBody { background-color:var(--atelier-modal) !important; }
@media (max-width:760px) {
  .bottomNav { background:var(--atelier-bottom) !important; }
  body.taskCardOpen .taskModal .modalBody { background-color:var(--atelier-modal) !important; }
}

/* The reader fold is clipped out of the real front face and its underside is a
   child of the same 3D sheet. Unlike 2.8.31 there is no independent floating
   triangle in the stage, so fold, shadow and page cannot drift apart. */
@media (max-width:760px) {
  .signatureCurlOverlay.book .signatureBookCorner,
  .signatureCurlOverlay.book .signatureBookCornerShadow,
  .signatureCurlOverlay.book .signatureBookCornerCrease { display:none !important; }
  .signatureCurlOverlay.book .signatureCurlSheet { overflow:visible !important; }
  .signatureCurlOverlay.book .signatureCurlFront { will-change:transform,clip-path; }
  .signatureCurlOverlay.book .signatureBookFold,
  .signatureCurlOverlay.book .signatureBookFoldShade,
  .signatureCurlOverlay.book .signatureBookFoldCrease {
    display:block; position:absolute; bottom:0; pointer-events:none;
    opacity:0; will-change:transform,opacity; transform-style:preserve-3d;
  }
  .signatureCurlOverlay.book .signatureBookFold {
    z-index:31; width:44%; height:34%;
    background-color:var(--atelier-paper-deep,#f1ece1);
    background-image:
      radial-gradient(ellipse at 72% 74%,rgba(255,255,255,.62),transparent 44%),
      linear-gradient(135deg,rgba(255,255,255,.40),rgba(103,83,54,.075) 56%,rgba(42,35,26,.16)),
      var(--atelier-paper-fibre);
    background-size:auto,auto,256px 256px;
    box-shadow:inset 0 0 0 1px rgba(92,73,45,.055);
  }
  .signatureCurlOverlay.book.forward .signatureBookFold {
    right:0; transform-origin:100% 100%;
    clip-path:polygon(100% 100%,0 100%,100% 0);
    -webkit-clip-path:polygon(100% 100%,0 100%,100% 0);
  }
  .signatureCurlOverlay.book.back .signatureBookFold {
    left:0; transform-origin:0 100%;
    clip-path:polygon(0 100%,0 0,100% 100%);
    -webkit-clip-path:polygon(0 100%,0 0,100% 100%);
    background-image:
      radial-gradient(ellipse at 28% 74%,rgba(255,255,255,.62),transparent 44%),
      linear-gradient(225deg,rgba(255,255,255,.40),rgba(103,83,54,.075) 56%,rgba(42,35,26,.16)),
      var(--atelier-paper-fibre);
  }
  .signatureCurlOverlay.book .signatureBookFoldShade {
    z-index:29; width:45%; height:35%;
    background:linear-gradient(135deg,transparent 39%,rgba(35,29,21,.055) 52%,rgba(35,29,21,.28) 76%,transparent 100%);
  }
  .signatureCurlOverlay.book.forward .signatureBookFoldShade {
    right:0; transform-origin:100% 100%;
    clip-path:polygon(100% 100%,0 100%,100% 0);
  }
  .signatureCurlOverlay.book.back .signatureBookFoldShade {
    left:0; transform-origin:0 100%;
    clip-path:polygon(0 100%,0 0,100% 100%);
    background:linear-gradient(225deg,transparent 39%,rgba(35,29,21,.055) 52%,rgba(35,29,21,.28) 76%,transparent 100%);
  }
  .signatureCurlOverlay.book .signatureBookFoldCrease {
    z-index:32; width:2px; height:43%;
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.84) 15%,rgba(116,94,62,.26) 54%,rgba(42,34,24,.32) 80%,transparent);
    box-shadow:0 0 4px rgba(255,255,255,.48),0 0 3px rgba(39,32,23,.10);
  }
  .signatureCurlOverlay.book.forward .signatureBookFoldCrease { right:8%; transform-origin:50% 100%; }
  .signatureCurlOverlay.book.back .signatureBookFoldCrease { left:8%; transform-origin:50% 100%; }
}

.pageAppearanceSettings { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:stretch; }
.pageSettingCard { min-width:0; padding:13px; border:1px solid color-mix(in srgb,var(--workspace-color) 8%,#dfe4e0 92%); border-radius:13px; background:color-mix(in srgb,var(--atelier-paper-light,#fff) 88%,#fff 12%); }
.pageSettingHead { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.pageSettingHead>span { min-width:0; display:flex; flex-direction:column; gap:2px; }
.pageSettingHead b { font-size:14px; line-height:1.2; }
.pageSettingHead small { color:var(--muted); font-size:11.5px; line-height:1.25; }
.pageSettingHead em { flex:0 0 auto; padding:3px 7px; border-radius:999px; background:color-mix(in srgb,var(--workspace-color) 7%,#eef2ef 93%); color:#59645d; font-size:10.5px; font-style:normal; font-weight:650; white-space:nowrap; }
.pageSettingCard .field { margin:0; }
.pageSettingCard .field>span { font-size:12px; color:#59645d; }
.pageSettingCard select { width:100%; min-height:44px; }
.pageSettingCard select:disabled { opacity:.72; cursor:not-allowed; }
.pageSettingCard .field>small { display:block; margin-top:7px; color:var(--muted); font-size:11.5px; line-height:1.42; }
@media (max-width:760px) {
  .pageAppearanceSettings { grid-template-columns:1fr; gap:9px; }
  .pageSettingCard { padding:11px; }
  .pageSettingHead { margin-bottom:8px; }
}


/* ========================================================================== 
   2.8.34 — clear desktop View menu + true cross-platform paper themes +
   mobile working viewport bounded between fixed chrome.
   ========================================================================== */
.visuallyHidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Desktop header: four purposeful controls, no developer-looking icon pile. */
.desktopViewControl{position:relative;display:flex;align-items:center}
.headerTextButton{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid rgba(31,52,38,.11);border-radius:10px;background:rgba(255,255,255,.72);padding:6px 10px;color:#344038;font-weight:700;line-height:1;white-space:nowrap}
.headerTextButton:hover{background:#fff;border-color:rgba(31,52,38,.18)}
.headerTextButton .layoutIcon{font-size:16px;line-height:1}.headerChevron{font-size:12px;color:#6c756f}.settingsHeaderButton .settingsGear{display:grid;width:18px;height:18px;place-items:center}.settingsHeaderButton .settingsGear svg{width:18px;height:18px;display:block}.headerUserBadge{width:23px;height:23px;display:grid;place-items:center;border-radius:7px;background:#29302c;color:#fff;font-size:11px;font-weight:800}.headerSearchButton{font-size:22px}.headerSyncButton{display:none!important}
.headerMenu{position:absolute;z-index:90;right:0;top:calc(100% + 7px);width:286px;padding:6px;border:1px solid #dce3de;border-radius:13px;background:rgba(255,255,255,.985);box-shadow:0 16px 42px rgba(25,43,31,.17);backdrop-filter:blur(14px)}
.headerMenu>button{width:100%;min-height:55px;display:grid;grid-template-columns:42px minmax(0,1fr) 20px;align-items:center;gap:9px;border:0;border-radius:10px;background:transparent;padding:7px 8px;text-align:left;color:#29322c}
.headerMenu>button:hover,.headerMenu>button.active{background:color-mix(in srgb,var(--workspace-color) 7%,#f5f8f6 93%)}
.headerMenu>button>span:nth-child(2){display:grid;gap:2px}.headerMenu b{font-size:13px}.headerMenu small{font-size:11px;color:#788078}.headerMenu i{font-style:normal;color:var(--workspace-color);opacity:0;font-weight:800}.headerMenu>button.active i{opacity:1}
.layoutMini{width:34px;height:25px;display:grid;border:1px solid #c9d0cb;border-radius:5px;overflow:hidden;background:#f3f5f3;position:relative}
.layoutMini::before,.layoutMini::after{content:"";position:absolute;inset-block:0;border-right:1px solid #c9d0cb;background:#fff}
.layoutMiniFull::before{left:0;width:26%}.layoutMiniFull::after{right:0;width:34%;border-right:0;border-left:1px solid #c9d0cb}
.layoutMiniWork::before{display:none}.layoutMiniWork::after{right:0;width:42%;border-right:0;border-left:1px solid #c9d0cb}
.layoutMiniProjects::before{left:0;width:34%}.layoutMiniProjects::after{display:none}
.layoutMiniAgenda::before{left:0;width:36%}.layoutMiniAgenda::after{display:none}.layoutMiniAgenda{background:linear-gradient(90deg,#fff 0 36%,#f3f5f3 36%)}

@media (min-width:951px){
  .workspace.layoutFull{grid-template-columns:var(--sidebar-width) 7px minmax(360px,1fr) 7px var(--plan-width)}
  .workspace.layoutFull #overviewPane{grid-column:1}.workspace.layoutFull #leftSplitter{grid-column:2}.workspace.layoutFull #taskPane{grid-column:3}.workspace.layoutFull #rightSplitter{grid-column:4}.workspace.layoutFull #planPane{grid-column:5}
  .workspace.layoutWork{grid-template-columns:minmax(420px,1fr) 7px minmax(390px,var(--plan-width))}
  .workspace.layoutWork #overviewPane,.workspace.layoutWork #leftSplitter{display:none!important}
  .workspace.layoutWork #taskPane{grid-column:1}.workspace.layoutWork #rightSplitter{grid-column:2}.workspace.layoutWork #planPane{grid-column:3}
  .workspace.layoutProjects{grid-template-columns:var(--sidebar-width) 7px minmax(440px,1fr)}
  .workspace.layoutProjects #rightSplitter,.workspace.layoutProjects #planPane{display:none!important}
  .workspace.layoutProjects #overviewPane{grid-column:1}.workspace.layoutProjects #leftSplitter{grid-column:2}.workspace.layoutProjects #taskPane{grid-column:3}
  .workspace.layoutAgenda{grid-template-columns:minmax(260px,var(--sidebar-width)) 7px minmax(520px,1fr)}
  .workspace.layoutAgenda #taskPane,.workspace.layoutAgenda #rightSplitter{display:none!important}
  .workspace.layoutAgenda #overviewPane{grid-column:1}.workspace.layoutAgenda #leftSplitter{grid-column:2}.workspace.layoutAgenda #planPane{grid-column:3;display:flex!important}
}
@media (max-width:950px){.desktopViewControl{display:none!important}}

/* Real paper colour: large working surfaces use the selected stock itself.
   Each theme is intentionally distinct enough to be obvious at one glance. */
html[data-page-theme="paper"],body.pageThemePaper{
  --page-stock:#f7f1e6;--page-stock-soft:#fbf8f1;--page-stock-side:#f3ede2;--page-stock-deep:#e9e0d0;--page-stock-line:rgba(82,69,48,.13);--page-stock-fibre:url('/paper-cotton-v2823.png');--page-light:rgba(255,255,255,.42)
}
html[data-page-theme="ivory"],body.pageThemeIvory{
  --page-stock:#efe1c3;--page-stock-soft:#f6ecd7;--page-stock-side:#eadbbb;--page-stock-deep:#decba4;--page-stock-line:rgba(102,80,45,.16);--page-stock-fibre:url('/paper-cotton-v2823.png');--page-light:rgba(255,251,238,.34)
}
html[data-page-theme="white"],body.pageThemeWhite{
  --page-stock:#ffffff;--page-stock-soft:#ffffff;--page-stock-side:#fafbfa;--page-stock-deep:#f1f3f1;--page-stock-line:rgba(29,38,31,.10);--page-stock-fibre:none;--page-light:rgba(255,255,255,0)
}
body{--atelier-paper:var(--page-stock);--atelier-paper-light:var(--page-stock-soft);--atelier-paper-deep:var(--page-stock-deep);--atelier-paper-line:var(--page-stock-line);--atelier-paper-fibre:var(--page-stock-fibre);background:var(--page-stock-deep)!important}
.sidebar{background-color:var(--page-stock-side)!important;background-image:var(--page-stock-fibre)!important;background-size:256px 256px!important}
.mainPane,.planPane,.mobileScreen.mobileActive{background-color:var(--page-stock)!important;background-image:linear-gradient(180deg,var(--page-light),transparent 28%),var(--page-stock-fibre)!important;background-size:auto,256px 256px!important;background-repeat:no-repeat,repeat!important}
.mainHeader,.planHeader{background-color:color-mix(in srgb,var(--page-stock-soft) 94%,#fff 6%)!important;background-image:var(--page-stock-fibre)!important;background-size:256px 256px!important;border-color:var(--page-stock-line)!important}
.planScroll,.timeline,.mainContent{background-color:transparent!important;background-image:none!important}.timeline{border-left-color:var(--page-stock-line)!important}.unscheduledHost{background-color:color-mix(in srgb,var(--page-stock-soft) 88%,transparent)!important;background-image:var(--page-stock-fibre)!important;background-size:256px 256px!important}
.settingsModal,.settingsModal .modalBody,.modal{background-color:var(--page-stock-soft)!important}.settingsModal .settingsAccordionPanel{background:transparent}.settingsModal .settingsAccordion>summary{background:color-mix(in srgb,var(--page-stock-soft) 94%,#fff 6%)}
.pageThemeWhite .sidebar,.pageThemeWhite .mainPane,.pageThemeWhite .planPane,.pageThemeWhite .mobileScreen.mobileActive{background-image:none!important}

/* Mobile pages live strictly BETWEEN the top app bar and bottom navigation.
   The bottom book corner therefore remains visible and never curls behind nav. */
@media (max-width:760px){
  :root{--mobile-appbar-h:62px;--mobile-bottomnav-h:70px}
  .app{height:var(--visual-viewport-height,100dvh)!important;min-height:0!important;overflow:hidden}
  .topbar{position:relative;z-index:45;flex:0 0 calc(var(--mobile-appbar-h) + var(--safe-top));height:calc(var(--mobile-appbar-h) + var(--safe-top));padding-top:var(--safe-top)}
  .workspace{flex:1 1 auto!important;height:auto!important;min-height:0!important;margin-bottom:calc(var(--mobile-bottomnav-h) + var(--safe-bottom));overflow:hidden;perspective-origin:50% 50%}
  .mobileScreen{height:100%!important;max-height:100%!important;overflow:hidden}
  #overviewPane.mobileActive,.mainPane.mobileActive{overflow:auto}
  #planPane.mobileActive{overflow:hidden}
  .bottomNav.simpleBottomNav{height:calc(var(--mobile-bottomnav-h) + var(--safe-bottom))!important;min-height:calc(var(--mobile-bottomnav-h) + var(--safe-bottom));padding-bottom:var(--safe-bottom)!important}
  .signatureCurlOverlay{overflow:visible;contain:layout style;}
  body.iosStandalone .topbar{height:calc(var(--mobile-appbar-h) + var(--safe-top))!important;flex-basis:calc(var(--mobile-appbar-h) + var(--safe-top))!important}
  body.iosStandalone .workspace{height:auto!important;margin-bottom:calc(var(--mobile-bottomnav-h) + var(--safe-bottom))!important}
  .topActions .desktopViewControl,.topActions .headerSearchButton,.topActions .headerSyncButton{display:none!important}
  .settingsHeaderButton{min-width:48px;width:48px;height:48px;padding:0;border:0;background:rgba(255,255,255,.34);border-radius:14px}
  .settingsHeaderButton>span:not(.settingsGear),.settingsHeaderButton .headerUserBadge{display:none!important}
  .settingsHeaderButton .settingsGear{display:grid!important;width:25px;height:25px}.settingsHeaderButton .settingsGear svg{width:25px;height:25px}
}

/* 2.8.34: account identity lives inside Settings, not in permanent desktop chrome. */
.settingsHeaderButton .headerUserBadge{display:none!important}


/* ========================================================================== 
   2.8.36 — one seamless paper surface + aligned desktop command bar
   ========================================================================== */
:root{
  --paper-canvas:#f7f4ec;
  --paper-control:#fbfaf6;
  --paper-line:rgba(55,61,56,.105);
}
/* One material, one colour. The texture belongs to the workspace canvas, not
   to individual columns, so there are no beige blocks or visible seams. */
html[data-page-theme],body.pageThemePaper,body.pageThemeIvory,body.pageThemeWhite{
  --page-stock:var(--paper-canvas)!important;
  --page-stock-soft:var(--paper-canvas)!important;
  --page-stock-side:var(--paper-canvas)!important;
  --page-stock-deep:var(--paper-canvas)!important;
  --page-stock-line:var(--paper-line)!important;
  --page-stock-fibre:url('/paper-cotton-v2823.png')!important;
  --page-light:rgba(255,255,255,0)!important;
}
body{background:var(--paper-canvas)!important}
.workspace{
  background-color:var(--paper-canvas)!important;
  background-image:var(--page-stock-fibre)!important;
  background-size:256px 256px!important;
  background-repeat:repeat!important;
}
.sidebar,.mainPane,.planPane,.mobileScreen.mobileActive,
.mainHeader,.planHeader,.mainContent,.planScroll,.timeline,.unscheduledHost{
  background-color:transparent!important;
  background-image:none!important;
}
.mainHeader,.planHeader{border-color:var(--paper-line)!important}
.sidebar{border-color:var(--paper-line)!important}
.columnSplitter{background:color-mix(in srgb,var(--paper-canvas) 78%,#dfe5df 22%)!important}
.settingsModal,.settingsModal .modalBody,.modal{background-color:var(--paper-control)!important}
.settingsModal .settingsAccordion>summary{background:var(--paper-control)!important}
.paperFixedSetting{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 12px;border:1px solid var(--paper-line);border-radius:12px;background:rgba(255,255,255,.34)}
.paperFixedSetting>span:last-child{display:grid;gap:3px;min-width:0}.paperFixedSetting b{font-size:14px}.paperFixedSetting small{font-size:11.5px;line-height:1.4;color:var(--muted)}
.paperSwatch{width:36px;height:36px;flex:0 0 36px;border-radius:10px;border:1px solid rgba(55,61,56,.13);background-color:var(--paper-canvas);background-image:var(--page-stock-fibre);background-size:128px 128px;box-shadow:inset 0 1px rgba(255,255,255,.55)}

/* Desktop command bar: every control shares one baseline, height and visual
   weight. The small 'Сообщество' caption is redundant and was the main source
   of vertical drift. */
@media (min-width:951px){
  .topbar{align-items:center!important}
  .topActions{display:flex!important;align-items:center!important;gap:8px!important;height:40px!important;margin-left:auto!important}
  .workspacePicker{display:flex!important;align-items:center!important;min-width:0!important;height:36px!important;font-size:inherit!important}
  .workspacePicker>span{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  .workspacePicker select,.headerTextButton,.headerSearchButton{
    box-sizing:border-box!important;height:36px!important;min-height:36px!important;border:1px solid #d8dfda!important;border-radius:10px!important;background:rgba(255,255,255,.76)!important;color:#334039!important;box-shadow:none!important;margin:0!important;vertical-align:middle!important
  }
  .workspacePicker select{width:132px!important;max-width:132px!important;padding:0 31px 0 11px!important;font-size:12px!important;font-weight:700!important;line-height:34px!important}
  .headerTextButton{padding:0 11px!important;gap:7px!important;font-size:12px!important;line-height:34px!important}
  .desktopViewControl{height:36px!important;align-items:center!important}
  .headerSearchButton{display:grid!important;place-items:center!important;width:36px!important;min-width:36px!important;padding:0!important;font-size:20px!important;line-height:1!important}
  .settingsHeaderButton{min-width:112px!important}
  .settingsHeaderButton .settingsGear{width:17px!important;height:17px!important}.settingsHeaderButton .settingsGear svg{width:17px!important;height:17px!important}
  .headerTextButton:hover,.headerSearchButton:hover,.workspacePicker select:hover{background:#fff!important;border-color:#cbd5ce!important}
}


/* ========================================================================== 
   2.8.36 — compact mobile chrome + one-row Plan-day controls
   Android/WebView already owns the system status-bar inset. Apply safe-top
   only to installed iOS PWA, otherwise Android gets a large empty band.
   ========================================================================== */
@media (max-width:760px){
  :root{--mobile-appbar-h:54px;--mobile-planheader-h:50px}

  /* Android / mobile Web: no duplicated status-bar padding. */
  .topbar{
    box-sizing:border-box!important;
    flex:0 0 var(--mobile-appbar-h)!important;
    height:var(--mobile-appbar-h)!important;
    min-height:var(--mobile-appbar-h)!important;
    padding:5px 8px!important;
    padding-top:5px!important;
    align-items:center!important;
    gap:7px!important;
  }
  .topActions{height:44px!important;align-items:center!important;gap:7px!important}
  .workspacePicker{height:44px!important;display:flex!important;align-items:center!important}
  .workspacePicker select{
    height:44px!important;min-height:44px!important;
    padding:0 34px 0 12px!important;
    border-radius:12px!important;font-size:14px!important;line-height:42px!important;
  }
  .settingsHeaderButton{
    width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;
    border-radius:12px!important;padding:0!important;
  }
  .settingsHeaderButton .settingsGear{width:23px!important;height:23px!important}
  .settingsHeaderButton .settingsGear svg{width:23px!important;height:23px!important}

  /* iPhone installed PWA still needs the notch / Dynamic Island inset. */
  body.iosStandalone .topbar{
    flex-basis:calc(var(--mobile-appbar-h) + var(--safe-top))!important;
    height:calc(var(--mobile-appbar-h) + var(--safe-top))!important;
    min-height:calc(var(--mobile-appbar-h) + var(--safe-top))!important;
    padding-top:calc(5px + var(--safe-top))!important;
    padding-left:max(8px,var(--safe-left))!important;
    padding-right:max(8px,var(--safe-right))!important;
  }

  /* Date, Today and Auto-plan share ONE row. The range remains under the date
     inside the same compact cell, not as a second toolbar row. */
  .planHeader{
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:28px minmax(104px,1fr) auto auto 28px!important;
    grid-template-areas:"prev date today auto next"!important;
    align-items:center!important;
    column-gap:4px!important;row-gap:0!important;
    min-height:var(--mobile-planheader-h)!important;
    height:var(--mobile-planheader-h)!important;
    padding:3px 6px!important;
    overflow:visible!important;
  }
  #prevPlanDay{grid-area:prev!important}
  #nextPlanDay{grid-area:next!important}
  .planDateBlock{grid-area:date!important;min-width:0!important;text-align:center!important;align-self:center!important}
  .planDateBlock strong{
    display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    font-size:12.5px!important;line-height:1.15!important;font-weight:750!important;
  }
  .planDateBlock small{
    display:block!important;margin-top:2px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    font-size:9.5px!important;line-height:1.05!important;color:#69736c!important;
  }
  .planHeaderActions{display:contents!important}
  #planLoadBadge{display:none!important}
  .planTodayTop{grid-area:today!important}
  .dailyPlanningButton{grid-area:auto!important}
  .planTodayTop,.dailyPlanningButton{
    box-sizing:border-box!important;height:30px!important;min-height:30px!important;
    padding:0 7px!important;border-radius:9px!important;
    font-size:10.5px!important;line-height:28px!important;font-weight:750!important;
    gap:4px!important;white-space:nowrap!important;
  }
  .dailyPlanningButton .planAutoIcon{width:12px!important;height:12px!important;flex:0 0 12px!important}
  .planDayArrow{
    box-sizing:border-box!important;width:28px!important;min-width:28px!important;height:30px!important;min-height:30px!important;
    padding:0!important;border-radius:9px!important;font-size:20px!important;line-height:1!important;
  }

  /* The workspace still starts immediately below the real app bar and ends
     above bottom navigation; only the chrome itself got shorter. */
  .workspace{margin-bottom:calc(var(--mobile-bottomnav-h) + var(--safe-bottom))!important}
}

@media (max-width:360px){
  .planHeader{grid-template-columns:26px minmax(92px,1fr) auto auto 26px!important;column-gap:3px!important;padding-inline:4px!important}
  .planDateBlock strong{font-size:12px!important}
  .planDateBlock small{font-size:9px!important}
  .planTodayTop,.dailyPlanningButton{padding-inline:6px!important;font-size:10px!important}
  .planDayArrow{width:26px!important;min-width:26px!important}
}

/* 2.8.38 — independent deadlines and reminders */
.reminderQuick { flex-wrap: wrap; }
.reminderQuick > button { flex: 1 1 82px; min-width: 74px; }
.pickerHint { display:block; margin-top:4px; color:var(--muted,#6f746f); font-size:12px; line-height:1.35; }
.taskPropertyRow#taskDeadlineRow .taskPropertyIcon { font-size:17px; }
.taskPropertyRow#taskReminderRow .taskPropertyIcon { font-size:16px; }
@media (max-width:760px) {
  .reminderQuick { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .reminderQuick > button:last-child { grid-column:1 / -1; }
  .pickerHint { font-size:11.5px; }
}


/* 2.8.39 — notification center + quick reminder controls */
.notificationCenter{display:grid;gap:14px;max-width:920px;margin:0 auto;padding:2px 0 28px}
.notificationCenterHead{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;border:1px solid var(--paper-line,#d9ddd8);border-radius:14px;background:rgba(255,255,255,.42)}
.notificationCenterHead>div{display:grid;gap:3px;min-width:0}.notificationCenterHead b{font-size:15px}.notificationCenterHead span{font-size:12px;line-height:1.35;color:var(--muted)}
.notificationCenterHead>button{flex:0 0 auto;min-height:34px;padding:0 11px;border:1px solid #cfd7d1;border-radius:10px;background:rgba(255,255,255,.76);font-weight:700;font-size:12px}
.notificationSection{border:1px solid var(--paper-line,#d9ddd8);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.30)}
.notificationSection>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--paper-line,#d9ddd8)}
.notificationSection>header>div{display:grid;gap:1px}.notificationSection h2{margin:0;font-size:14px;line-height:1.2}.notificationSection header small{font-size:11px;color:var(--muted)}
.notificationSection>header>span{min-width:25px;padding:2px 7px;border-radius:999px;background:#edf0ed;text-align:center;font-size:11px;font-weight:750;color:#536057}
.notificationSection.isEmpty>header{border-bottom:0;opacity:.70}
.notificationList{display:grid}
.notificationCard{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid color-mix(in srgb,var(--paper-line,#d9ddd8) 78%,transparent)}
.notificationCard:last-child{border-bottom:0}.notificationCard.isLate{box-shadow:inset 3px 0 #c94e42}
.notificationMain{min-width:0;border:0;background:transparent;padding:2px;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:7px;text-align:left;color:inherit}
.notificationGlyph{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:rgba(76,110,88,.09);font-size:16px;color:#486657}
.notificationText{display:grid;min-width:0;gap:2px}.notificationText b{font-size:13.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notificationText small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notificationActions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px;max-width:360px}.notificationActions button{min-height:30px;padding:0 8px;border:1px solid #d4dad6;border-radius:9px;background:rgba(255,255,255,.68);font-size:10.5px;font-weight:700;white-space:nowrap}.notificationActions .notificationDone{border-color:color-mix(in srgb,var(--workspace-color,#4c7b5e) 34%,#d4dad6);color:#335342}
@media(max-width:760px){
  .notificationCenter{gap:10px;padding-bottom:18px}.notificationCenterHead{padding:10px;align-items:flex-start}.notificationCenterHead>button{min-height:32px;padding:0 8px;font-size:10.5px}.notificationCenterHead b{font-size:13.5px}.notificationCenterHead span{font-size:10.5px}
  .notificationSection>header{padding:8px 9px}.notificationSection h2{font-size:13px}.notificationSection header small{font-size:10px}
  .notificationCard{grid-template-columns:minmax(0,1fr);gap:6px;padding:8px 9px}.notificationMain{grid-template-columns:25px minmax(0,1fr)}.notificationGlyph{width:24px;height:24px;font-size:14px}.notificationText b{font-size:12.5px}.notificationText small{font-size:10.5px}
  .notificationActions{justify-content:flex-start;max-width:none;padding-left:32px}.notificationActions button{min-height:29px;padding:0 7px;font-size:10px}
}
@media(max-width:340px){.notificationCenterHead{display:grid}.notificationCenterHead>button{justify-self:start}.notificationActions{padding-left:0}.notificationActions button{flex:1 1 auto}}

/* 2.8.41 — Clean Task List / context-aware density
   Keep the row comfortable to tap, but remove avoidable vertical and metadata noise. */
.taskRow { min-height:64px; padding-top:8px; padding-bottom:8px; }
.taskMeta { gap:7px; margin-top:3px; }
.taskNote { margin-top:3px; }
@media (max-width:760px) {
  .taskRow { min-height:62px; grid-template-columns:40px minmax(0,1fr) 38px; margin:2px 0; padding:8px 6px 8px 0; }
  .taskMeta { gap:6px; margin-top:3px; font-size:11.5px; line-height:1.25; }
  .taskNote { margin-top:3px; font-size:12px; }
  .taskActions button { width:38px; height:38px; }
}

/* 2.8.42 — Fast Task Card / progressive disclosure */
.taskOptionalDetails{
  border:0;
  border-bottom:1px solid #e6e9e6;
  background:#fff;
}
.taskOptionalDetails>summary{
  min-height:36px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) 16px;
  align-items:center;
  gap:9px;
  padding:6px 12px 6px 14px;
  cursor:pointer;
  list-style:none;
  color:#505954;
  background:#fafbfa;
  user-select:none;
}
.taskOptionalDetails>summary::-webkit-details-marker{display:none}
.taskOptionalDetails>summary>span{font-size:12.5px;font-weight:700}
.taskOptionalDetails>summary>small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8a918c;font-size:10.5px;font-weight:500}
.taskOptionalDetails>summary::after{content:"›";font-size:16px;line-height:1;color:#8b928e;transform:rotate(90deg);transition:transform .12s ease}
.taskOptionalDetails[open]>summary{background:#f7f9f7;border-bottom:1px solid #edf0ed}
.taskOptionalDetails[open]>summary::after{transform:rotate(-90deg)}
.taskOptionalProperties .taskPropertyRow:last-child{border-bottom:0}
.taskPrimaryProperties .taskPropertyRow:last-child{border-bottom:0}

@media(max-width:760px){
  body.taskCardOpen .taskOptionalDetails>summary{
    min-height:30px;
    grid-template-columns:auto minmax(0,1fr) 14px;
    gap:7px;
    padding:4px 8px 4px 10px;
  }
  body.taskCardOpen .taskOptionalDetails>summary>span{font-size:11.5px}
  body.taskCardOpen .taskOptionalDetails>summary>small{font-size:9.5px}
  body.taskCardOpen .taskOptionalDetails>summary::after{font-size:14px}
}
\n\n/* 2.8.43 — Quick Capture / one-step mobile task creation */\n.quickSmartPreview{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:9px 0 2px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--orange-soft) 62%,#fff 38%);font-size:11px}\n.quickPreviewLabel{font-weight:700;color:#805018}.quickPreviewHint{color:var(--muted)}\n.quickActionBar{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0 1px}\n.quickActionBar button{min-height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-weight:650;color:var(--text);padding:7px 6px}\n.quickActionBar button:active{transform:scale(.98)}\n@media(max-width:760px){\n  .quickForm{padding-top:14px!important}\n  .quickTextLabel textarea{min-height:92px!important;max-height:180px;font-size:18px!important;resize:none}\n  .quickActionBar{position:relative;z-index:1}\n  .quickActionBar button{min-height:42px;font-size:12px}\n  .optionalToggle{margin-top:7px}\n  .quickForm>.primaryButton{margin-top:7px}\n}\n
/* 2.8.44 — Focused Today / overdue tasks stay visible without polluting Today */
.todayOverdueNotice {
  width: calc(100% - 24px);
  margin: 10px 12px 2px;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, #b86d50 28%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, #fff7f2 86%, transparent);
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  box-shadow: none;
}
.todayOverdueNotice > span:first-child { min-width: 0; display: flex; align-items: baseline; gap: 3px; flex-wrap: wrap; }
.todayOverdueNotice b { font-size: 12.5px; line-height: 1.2; }
.todayOverdueNotice small { font-size: 10.5px; color: var(--muted); }
.todayOverdueNotice > span:last-child { font-size: 22px; line-height: 1; opacity: .65; }
.todayOverdueNotice:active { transform: translateY(1px); }
@media (max-width:760px) {
  .todayOverdueNotice { width: calc(100% - 16px); margin: 7px 8px 1px; min-height: 38px; padding: 7px 10px; border-radius: 11px; }
  .todayOverdueNotice b { font-size: 12px; }
  .todayOverdueNotice small { font-size: 10px; }
}

/* 2.8.45 — Quick Schedule / assign date and time without opening the full card */
.quickScheduleBackdrop{
  position:fixed; inset:0; z-index:92; display:grid; place-items:center;
  padding:16px; background:rgba(22,28,24,.28); backdrop-filter:blur(2px);
}
.quickSchedulePanel{
  position:relative; width:min(390px,calc(100vw - 32px)); max-height:min(650px,calc(100dvh - 32px));
  overflow:auto; border:1px solid #dde3de; border-radius:16px; background:#fff;
  box-shadow:0 18px 48px rgba(22,37,27,.24); color:var(--text);
}
.quickSchedulePanel.anchored{position:fixed;margin:0;max-height:min(560px,calc(100vh - 20px))}
.quickSchedulePanel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px 13px 10px;border-bottom:1px solid #edf0ed}
.quickSchedulePanel>header>div{display:grid;min-width:0;gap:2px}.quickSchedulePanel>header strong{font-size:15px}.quickSchedulePanel>header small{max-width:310px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px}
.quickSchedulePanel>header>button{width:32px;height:32px;border:0;border-radius:9px;background:#f2f4f2;color:#667069;font-size:20px;line-height:1}
.quickSchedulePrimary{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:10px 11px 7px}
.quickSchedulePrimary>button{min-height:52px;display:grid;align-content:center;gap:2px;border:1px solid #dce3dd;border-radius:11px;background:#fafcfb;padding:7px 9px;text-align:left;color:inherit}
.quickSchedulePrimary>button span{font-size:12px;font-weight:800}.quickSchedulePrimary>button b{font-size:11px;color:var(--workspace-color);font-weight:750}
.quickSchedulePrimary>button[data-quick-week-toggle]{grid-column:1/-1;min-height:42px;grid-template-columns:1fr auto;align-items:center;align-content:center}.quickSchedulePrimary>button[data-quick-week-toggle] b{justify-self:end}
.quickScheduleWeek{display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:5px;padding:1px 11px 8px}
.quickScheduleWeek>button{min-height:48px;display:grid;place-items:center;align-content:center;gap:2px;border:1px solid #e1e6e2;border-radius:10px;background:#fff;color:inherit;padding:5px}
.quickScheduleWeek>button b{font-size:11px;text-transform:capitalize}.quickScheduleWeek>button small{font-size:9.5px;color:var(--muted)}
.quickScheduleCustom{display:grid;gap:7px;padding:8px 11px 4px;border-top:1px solid #edf0ed}
.quickScheduleCustom label{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:8px;color:var(--muted);font-size:11px}
.quickScheduleCustom input[type="date"],.quickScheduleCustom .timePickerButton{min-height:38px;width:100%;border:1px solid #d8ded9;border-radius:9px;background:#fff;padding:7px 9px;font:inherit;color:var(--text)}
.quickScheduleHint{padding:4px 11px 7px;color:var(--muted);font-size:10px;line-height:1.3}
.quickSchedulePanel>footer{display:flex;justify-content:space-between;gap:8px;padding:9px 11px 11px;border-top:1px solid #edf0ed}
.quickSchedulePanel>footer>button{min-height:38px;border:1px solid #d8ded9;border-radius:10px;background:#fff;padding:0 11px;font-weight:750}.quickSchedulePanel>footer>.primaryButton{border-color:var(--workspace-color);background:var(--workspace-color);color:#fff}
@media(max-width:760px){
  .quickScheduleBackdrop{place-items:end center;padding:0;background:rgba(22,28,24,.24)}
  .quickSchedulePanel{width:100%;max-height:min(76dvh,560px);border-radius:16px 16px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
  .quickSchedulePanel>header{padding:10px 11px 8px}.quickSchedulePanel>header strong{font-size:14px}.quickSchedulePanel>header small{font-size:10px;max-width:260px}
  .quickSchedulePrimary{padding:8px 9px 6px}.quickSchedulePrimary>button{min-height:48px}.quickSchedulePrimary>button[data-quick-week-toggle]{min-height:40px}
  .quickScheduleWeek{padding:0 9px 7px}.quickScheduleWeek>button{min-height:44px}
  .quickScheduleCustom{padding:7px 9px 3px}.quickScheduleCustom label{grid-template-columns:54px minmax(0,1fr)}
  .quickScheduleHint{padding:4px 9px 6px}.quickSchedulePanel>footer{padding:8px 9px calc(9px + env(safe-area-inset-bottom))}
}
@media(max-width:340px){
  .quickSchedulePrimary{grid-template-columns:1fr 1fr;gap:5px}.quickSchedulePrimary>button{padding-inline:6px}.quickScheduleWeek{grid-template-columns:repeat(4,minmax(0,1fr))}
}


/* 2.8.46 — Safe Day Plan / deliberate drag, edge autoscroll and overlap feedback */
.taskRow.longPressArmed, .unscheduledTask.longPressArmed, .planTask.longPressArmed {
  outline-color: color-mix(in srgb,var(--workspace-color) 34%,transparent);
  transition: outline-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .12s ease;
}
.planTask.longPressArmed { box-shadow:0 2px 10px rgba(20,29,23,.14); }
.taskDropPreview.hasConflict {
  border-color:#b86f12;
  background:color-mix(in srgb,#f3b95f 24%,#fff 76%);
}
.taskDropTimeBadge.hasConflict {
  min-width:104px;
  border-color:#d5a154;
  background:#fff8ea;
  color:#7b4b08;
}
@media (max-width:760px) {
  body.taskDragging .planScroll { overscroll-behavior:contain; }
  body.taskDragging .planTask.longPressDragging,
  body.taskDragging .taskRow.longPressDragging,
  body.taskDragging .unscheduledTask.longPressDragging { opacity:.10; }
  .taskDropPreview.hasConflict { border-width:2px; }
  .taskDropTimeBadge.hasConflict { left:4px; min-width:98px; font-size:10px; }
}

/* 2.8.47 — Next Actions / immediate follow-up without reopening menus */
.toast.warning { background:#8a6428; }
.undoToast { align-items:center; }
.undoToastMessage { min-width:0; line-height:1.25; }
.undoToastActions { margin-left:auto; display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.undoToast .undoToastNext { background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.35); }
.undoToast .undoToastNext:hover { background:rgba(255,255,255,.22); }
@media (max-width:420px) {
  .undoToast { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 10px; max-width:calc(100vw - 20px); justify-self:center; }
  .undoToastMessage { font-size:13px; }
  .undoToastActions { gap:6px; }
  .undoToast button { padding:7px 8px; font-size:12px; min-height:34px; }
}
@media (max-width:340px) {
  .undoToast { grid-template-columns:1fr; }
  .undoToastActions { margin-left:0; justify-content:flex-end; }
}

/* 2.8.48 — Smart Carryover / deliberate one-by-one cleanup of unfinished past tasks */
.carryoverIntro {
  margin: 7px 8px 8px;
  padding: 10px 11px;
  border: 1px solid #dfe6e0;
  border-radius: 12px;
  background: linear-gradient(180deg,#fbfdfb,#f5f8f5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.carryoverIntro > div { min-width: 0; display: grid; gap: 2px; }
.carryoverIntro b { font-size: 12.5px; }
.carryoverIntro span { color: var(--muted); font-size: 10.5px; line-height: 1.3; }
.carryoverIntro button {
  flex: 0 0 auto;
  min-height: 36px;
  border: 1px solid var(--workspace-color);
  border-radius: 10px;
  background: var(--workspace-color);
  color: #fff;
  padding: 0 11px;
  font-weight: 800;
  font-size: 11px;
}
.carryoverTriageBackdrop {
  position: fixed;
  inset: 0;
  z-index: 178;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(22,28,24,.20);
}
.carryoverTriagePanel {
  width: min(390px, calc(100vw - 24px));
  max-height: min(560px, calc(100dvh - 24px));
  overflow: auto;
  border: 1px solid #dfe5df;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(28,36,31,.22);
}
.carryoverTriagePanel.anchored { position: fixed; margin: 0; }
.carryoverTriagePanel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 13px 10px;
  border-bottom: 1px solid #edf0ed;
}
.carryoverTriagePanel > header > div { min-width: 0; display: grid; gap: 2px; }
.carryoverTriagePanel > header strong { font-size: 15px; }
.carryoverTriagePanel > header small { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
.carryoverTriagePanel > header > button { width: 32px; height: 32px; border: 0; border-radius: 9px; background: #f2f4f2; color: #667069; font-size: 20px; line-height: 1; }
.carryoverOriginal { display: grid; gap: 2px; padding: 9px 12px 5px; }
.carryoverOriginal span { color: var(--muted); font-size: 10px; }
.carryoverOriginal b { font-size: 12px; font-weight: 800; }
.carryoverPrimary { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 7px 11px; }
.carryoverPrimary > button {
  min-height: 50px;
  display: grid;
  align-content: center;
  gap: 2px;
  border: 1px solid #dce3dd;
  border-radius: 11px;
  background: #fafcfb;
  padding: 7px 9px;
  text-align: left;
  color: inherit;
}
.carryoverPrimary > button span { font-size: 12px; font-weight: 800; }
.carryoverPrimary > button b { font-size: 10.5px; color: var(--workspace-color); }
.carryoverPrimary > button[data-carryover-custom] { grid-column: 1 / -1; min-height: 40px; grid-template-columns: 1fr auto; align-items: center; align-content: center; }
.carryoverPrimary > button[data-carryover-custom] b { justify-self: end; }
.carryoverSecondary { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0 11px 9px; }
.carryoverSecondary button { min-height: 38px; border: 1px solid #dfe4e0; border-radius: 10px; background: #fff; color: inherit; font-weight: 750; font-size: 11px; }
.carryoverSecondary button[data-carryover-done] { background: #f5f8f5; }
.carryoverTriagePanel > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px 11px; border-top: 1px solid #edf0ed; }
.carryoverTriagePanel > footer button { min-height: 36px; border: 0; background: transparent; color: var(--muted); padding: 0 4px; font-weight: 750; font-size: 11px; }
.carryoverTriagePanel > footer small { color: var(--muted); font-size: 9.5px; text-align: right; }
@media (max-width: 700px) {
  .carryoverIntro { margin: 6px 8px 7px; padding: 8px 9px; border-radius: 11px; }
  .carryoverIntro b { font-size: 12px; }
  .carryoverIntro span { font-size: 10px; }
  .carryoverIntro button { min-height: 34px; padding: 0 9px; }
  .carryoverTriageBackdrop { place-items: end center; padding: 0; background: rgba(22,28,24,.24); }
  .carryoverTriagePanel { width: 100%; max-height: min(72dvh, 520px); border-radius: 16px 16px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  .carryoverTriagePanel > header { padding: 10px 11px 8px; }
  .carryoverTriagePanel > header strong { font-size: 14px; }
  .carryoverTriagePanel > header small { max-width: 245px; font-size: 10px; }
  .carryoverOriginal { padding: 8px 10px 4px; }
  .carryoverPrimary { padding: 6px 9px; gap: 6px; }
  .carryoverPrimary > button { min-height: 47px; padding: 6px 8px; }
  .carryoverSecondary { padding: 0 9px 7px; gap: 6px; }
  .carryoverTriagePanel > footer { padding: 8px 9px calc(9px + env(safe-area-inset-bottom)); }
}
@media (max-width: 340px) {
  .carryoverIntro { align-items: stretch; }
  .carryoverIntro button { align-self: center; }
  .carryoverTriagePanel > footer { align-items: flex-start; }
  .carryoverTriagePanel > footer small { max-width: 135px; }
}


/* 2.8.50 — Android birthday sync: personal, minimal contact data only */
.birthdayViewHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 12px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.58)}
.birthdayViewHead>div,.birthdaySyncSettings>span{display:flex;flex-direction:column;gap:3px;min-width:0}.birthdayViewHead small,.birthdayViewHead span,.birthdaySyncSettings small{color:var(--muted);font-size:12px}
.birthdayList{display:flex;flex-direction:column;gap:7px;padding-bottom:24px}.birthdayCard{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px 12px;border:1px solid #dfe5e0;border-radius:12px;background:rgba(255,255,255,.68)}
.birthdayCard.birthdayToday{border-color:color-mix(in srgb,var(--workspace-color) 48%,#dfe5e0 52%);background:color-mix(in srgb,var(--workspace-color) 7%,#fff 93%)}
.birthdayIcon{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.78);font-size:20px}.birthdayCard b,.birthdayCard small{display:block}.birthdayCard small{margin-top:2px;color:var(--muted);font-size:12px}.birthdayCard em{font-style:normal;font-size:12px;font-weight:750;color:#59645d;white-space:nowrap}
.birthdaySyncSettings{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.58)}
@media(max-width:680px){.birthdayViewHead{align-items:stretch;flex-direction:column;padding:10px}.birthdayViewHead button{width:100%}.birthdayCard{grid-template-columns:34px minmax(0,1fr) auto;padding:9px 10px}.birthdayIcon{width:32px;height:32px;font-size:18px}.birthdaySyncSettings{align-items:stretch;flex-direction:column}.birthdaySyncSettings button{width:100%}}

/* 2.8.51 — Birthday Focus / grouped birthdays + reminder center visibility */
.birthdayGroups{display:flex;flex-direction:column;gap:14px;padding-bottom:24px}
.birthdayGroup>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 7px;padding:0 2px}
.birthdayGroup>header h2{margin:0;font-size:14px;font-weight:780;color:var(--text)}
.birthdayGroup>header span{min-width:24px;height:24px;padding:0 7px;display:grid;place-items:center;border-radius:999px;background:rgba(40,90,55,.08);font-size:11px;font-weight:800;color:#526258}
.birthdayGroupMuted{opacity:.92}.birthdayGroupMuted .birthdayList{gap:6px}
.birthdayNotification .notificationGlyph{font-size:16px}.birthdayNotification .notificationActions button{white-space:nowrap}
@media(max-width:680px){.birthdayGroups{gap:12px}.birthdayGroup>header h2{font-size:13px}.birthdayNotification .notificationActions{justify-content:flex-start}}

/* 2.8.52 — Daily Quick Actions / context-aware task menu */

/* 2.8.53 — Calendar Drawer: compact month above Plan day */
.planCalendarToggle{
  flex:0 0 auto;width:36px;min-width:36px;height:36px;min-height:36px;padding:7px;
  border:1px solid color-mix(in srgb,var(--paper-line,#d9ddd8) 88%,#fff 12%);
  border-radius:10px;background:color-mix(in srgb,var(--page-stock-soft,#faf8f1) 86%,#fff 14%);
  color:#56625a;box-shadow:0 1px 2px rgba(46,38,26,.04);
  transition:transform .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.planCalendarToggle svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.planCalendarToggle .calendarGlyphDay{fill:currentColor;stroke:none;opacity:.72}
.planCalendarToggle:hover{background:color-mix(in srgb,var(--workspace-color) 8%,#fff 92%);color:var(--workspace-color)}
.planCalendarToggle.isOpen{color:var(--workspace-color);background:color-mix(in srgb,var(--workspace-color) 10%,#fff 90%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--workspace-color) 18%,transparent)}
.planCalendarToggle.isOpen svg{transform:translateY(1px)}

.planCalendarDrawer{
  flex:0 0 auto;max-height:0;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;
  transform:perspective(700px) rotateX(-7deg) translateY(-5px);transform-origin:50% 0;
  border-bottom:1px solid transparent;
  transition:max-height .30s cubic-bezier(.2,.78,.24,1),opacity .18s ease,transform .30s cubic-bezier(.2,.78,.24,1),visibility 0s linear .30s,border-color .2s ease;
}
.planCalendarDrawer.open{
  max-height:280px;opacity:1;visibility:visible;pointer-events:auto;transform:none;
  border-bottom-color:var(--paper-line,#d9ddd8);
  transition:max-height .30s cubic-bezier(.2,.78,.24,1),opacity .20s ease .03s,transform .30s cubic-bezier(.2,.78,.24,1),visibility 0s,border-color .2s ease;
}
.planCalendarSheet{
  position:relative;padding:6px 10px 9px;
  background:color-mix(in srgb,var(--page-stock-soft,#faf8f1) 94%,#fff 6%);
  background-image:var(--page-stock-fibre,none);background-size:256px 256px;
  box-shadow:inset 0 -1px 0 rgba(90,77,53,.035),0 5px 12px rgba(54,45,30,.045);
}
.planCalendarSheet::after{
  content:"";position:absolute;left:7%;right:7%;bottom:-1px;height:4px;pointer-events:none;
  background:linear-gradient(180deg,rgba(76,62,40,.055),transparent);opacity:.55;
}
.planCalendarMonthHead{height:34px;display:grid;grid-template-columns:36px 1fr 36px;align-items:center;gap:4px}
.planCalendarMonthHead strong{text-align:center;text-transform:capitalize;font-size:13px;line-height:1.1;color:#3c443e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.planCalendarMonthHead button{
  width:34px;height:32px;border:0;border-radius:9px;background:transparent;color:#667069;font-size:21px;line-height:1;padding:0;
}
.planCalendarMonthHead button:hover{background:rgba(79,68,48,.06);color:var(--workspace-color)}
.planCalendarGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;text-align:center}
.planCalendarGrid>b{height:18px;display:grid;place-items:center;color:#879087;font-size:9.5px;font-weight:750;text-transform:uppercase}
.planCalendarDay{
  position:relative;display:grid;place-items:center;min-width:0;height:31px;padding:0;border:0;border-radius:9px;
  background:transparent;color:#3f4741;font-size:11.5px;font-weight:580;line-height:1;cursor:pointer;
  transition:background-color .12s ease,transform .1s ease,color .12s ease,box-shadow .12s ease;
}
.planCalendarDay:hover{background:rgba(78,68,49,.055)}
.planCalendarDay:active{transform:scale(.94)}
.planCalendarDay.outside{color:#b9beb9}
.planCalendarDay.weekend:not(.outside){color:#6e766f}
.planCalendarDay.today{font-weight:800;color:var(--workspace-color);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--workspace-color) 42%,transparent)}
.planCalendarDay.selected{background:var(--workspace-color);color:#fff;font-weight:800;box-shadow:0 2px 7px color-mix(in srgb,var(--workspace-color) 22%,transparent)}
.planCalendarDay.selected.today{box-shadow:0 2px 7px color-mix(in srgb,var(--workspace-color) 24%,transparent),inset 0 0 0 2px rgba(255,255,255,.64)}
.planCalendarDay>i{position:absolute;left:50%;bottom:2px;width:3.5px;height:3.5px;margin-left:-1.75px;border-radius:50%;background:var(--workspace-color);opacity:.72}
.planCalendarDay.selected>i{background:#fff;opacity:.9}
.planTodayTop.isToday{opacity:.42;background:transparent!important;color:#69736c!important;box-shadow:none!important}
.planTodayTop:not(.isToday){opacity:1;box-shadow:0 1px 4px color-mix(in srgb,var(--workspace-color) 10%,transparent)}

@media (prefers-reduced-motion:reduce){
  .planCalendarDrawer,.planCalendarToggle{transition:none!important}
  .planCalendarDay{transition:none!important}
}

@media (max-width:760px){
  .planHeader{
    grid-template-columns:28px 26px minmax(76px,1fr) auto 26px!important;
    grid-template-areas:"calendar prev date today next"!important;
    column-gap:3px!important;
  }
  #planCalendarToggle{grid-area:calendar!important;width:28px!important;min-width:28px!important;height:30px!important;min-height:30px!important;padding:5px!important;border-radius:9px!important}
  .planCalendarDrawer.open{max-height:252px}
  .planCalendarSheet{padding:4px 7px 7px}
  .planCalendarMonthHead{height:31px;grid-template-columns:34px 1fr 34px}
  .planCalendarMonthHead strong{font-size:12.5px}
  .planCalendarMonthHead button{width:32px;height:29px;font-size:20px}
  .planCalendarGrid{gap:1px 2px}
  .planCalendarGrid>b{height:17px;font-size:9px}
  .planCalendarDay{height:30px;border-radius:8px;font-size:11.5px;touch-action:manipulation}
}

@media (max-width:360px){
  .planHeader{
    grid-template-columns:25px 24px minmax(67px,1fr) auto 24px!important;
    column-gap:2px!important;padding-inline:3px!important;
  }
  #planCalendarToggle{width:25px!important;min-width:25px!important;height:28px!important;min-height:28px!important;padding:4px!important}
  .planDayArrow{width:24px!important;min-width:24px!important;height:28px!important;min-height:28px!important}
  .planTodayTop,.dailyPlanningButton{height:28px!important;min-height:28px!important;padding-inline:5px!important;font-size:9.5px!important;line-height:26px!important}
  .planCalendarSheet{padding-inline:5px}
  .planCalendarDay{height:29px;font-size:11px}
}


/* 2.8.54 — Birthdays in Calendar / visible on dates without creating tasks */
.planCalendarMarkers{position:absolute;inset:0;pointer-events:none}
.planCalendarTaskDot{position:absolute;left:50%;bottom:2px;width:3.5px;height:3.5px;margin-left:-1.75px;border-radius:50%;background:var(--workspace-color);opacity:.72}
.planCalendarBirthdayMark{position:absolute;right:2px;top:1px;font-style:normal;font-size:8px;line-height:1;filter:saturate(.9);transform:translateZ(0)}
.planCalendarDay.selected .planCalendarTaskDot{background:#fff;opacity:.9}
.planCalendarDay.selected .planCalendarBirthdayMark{filter:saturate(.9) drop-shadow(0 1px 1px rgba(0,0,0,.12))}
.planBirthdayHost{flex:0 0 auto;display:none;padding:0 8px;background:color-mix(in srgb,var(--page-stock-soft,#faf8f1) 97%,#fff 3%)}
.planBirthdayHost.visible{display:block}
.planBirthdayStrip{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:start;gap:8px;margin:6px 0 5px;padding:8px 10px;border:1px solid color-mix(in srgb,#d8b058 32%,var(--paper-line,#d9ddd8) 68%);border-radius:11px;background:color-mix(in srgb,#fff8df 72%,#fff 28%);box-shadow:0 1px 3px rgba(95,72,27,.045)}
.planBirthdayStripIcon{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.74);font-size:17px;line-height:1}
.planBirthdayStrip>div{min-width:0}.planBirthdayStrip strong{display:block;font-size:11px;color:#725d2b;margin-bottom:3px}
.planBirthdayPeople{display:flex;gap:5px 10px;flex-wrap:wrap;min-width:0}
.planBirthdayPerson{display:inline-flex;align-items:baseline;gap:4px;min-width:0;font-size:12px;color:var(--text)}
.planBirthdayPerson b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}.planBirthdayPerson small{color:#8b7650;font-size:10px;white-space:nowrap}
@media(max-width:760px){.planCalendarBirthdayMark{right:1px;top:1px;font-size:7.5px}.planBirthdayHost{padding-inline:5px}.planBirthdayStrip{grid-template-columns:27px minmax(0,1fr);gap:6px;margin:4px 0;padding:7px 8px;border-radius:10px}.planBirthdayStripIcon{width:25px;height:25px;font-size:15px}.planBirthdayStrip strong{font-size:10px}.planBirthdayPerson{font-size:11px}.planBirthdayPerson b{max-width:150px}.planBirthdayPerson small{font-size:9.5px}}
@media(max-width:340px){.planBirthdayPerson b{max-width:125px}.planCalendarBirthdayMark{font-size:7px}}

/* 2.8.55 — Birthday Quick Add / overview calendar markers + manual personal birthdays */
.calendarDay.hasBirthdays .calendarBirthdayMark{
  position:absolute;right:2px;top:1px;font-size:8px;line-height:1;pointer-events:none;
  filter:saturate(.92);transform:translateZ(0)
}
.calendarDay.selected .calendarBirthdayMark{filter:saturate(.92) drop-shadow(0 1px 1px rgba(0,0,0,.12))}
.calendarDayNumber{position:relative;z-index:1}
.birthdayQuickAdd{display:flex;align-items:center;gap:11px;margin:9px 12px 5px;padding:9px 11px;border:1px solid color-mix(in srgb,#d8b058 28%,var(--line) 72%);border-radius:12px;background:color-mix(in srgb,#fff8df 56%,rgba(255,255,255,.74) 44%)}
.birthdayQuickAdd>span{min-width:0;color:var(--muted);font-size:11.5px;line-height:1.35}
.birthdayQuickAdd .primaryButton{flex:0 0 auto;min-height:38px;padding:8px 12px}
.birthdayDateFields{display:grid;grid-template-columns:minmax(72px,.7fr) minmax(130px,1.3fr) minmax(110px,1fr);gap:9px}
.birthdayEditorForm{display:grid;gap:12px}
.birthdayCard.birthdayManual{grid-template-columns:38px minmax(0,1fr) auto 30px}
.birthdayEditButton{width:30px;height:30px;border:0;border-radius:9px;background:transparent;color:#7a827c;font-size:18px;line-height:1;padding:0}
.birthdayEditButton:hover{background:rgba(60,70,63,.06);color:var(--text)}
@media(max-width:680px){
  .birthdayQuickAdd{align-items:stretch;flex-direction:column;margin:7px 8px 4px;padding:9px}
  .birthdayQuickAdd .primaryButton{width:100%}.birthdayQuickAdd>span{text-align:center;font-size:10.5px}
  .birthdayDateFields{grid-template-columns:.72fr 1.28fr;gap:7px}.birthdayDateFields .field:last-child{grid-column:1/-1}
  .birthdayCard.birthdayManual{grid-template-columns:34px minmax(0,1fr) auto 28px}.birthdayEditButton{width:28px;height:28px}
}
@media(max-width:340px){.calendarDay.hasBirthdays .calendarBirthdayMark{right:1px;font-size:7px}.birthdayQuickAdd{margin-inline:5px}}


/* ========================================================================== 
   2.9.0 — Daily Workflow / one coherent daily operating surface
   ========================================================================== */
.overviewDayCard{margin:0 0 14px;padding:9px;border:1px solid color-mix(in srgb,var(--workspace-color) 15%,var(--paper-line) 85%);border-radius:14px;background:rgba(255,255,255,.30);box-shadow:0 4px 16px rgba(35,44,38,.035)}
.overviewDayCardTop{display:flex;align-items:stretch;gap:7px}.overviewDayOpen{min-width:0;flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;border-radius:10px;background:transparent;padding:5px 6px;text-align:left;color:inherit}.overviewDayOpen:hover{background:rgba(255,255,255,.45)}.overviewDayOpen>span:first-child{min-width:0;display:grid;gap:2px}.overviewDayOpen b{font-size:13.5px}.overviewDayOpen small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:10.5px}.overviewDayOpen>span:last-child{font-size:22px;color:var(--workspace-color)}
.overviewTodayJump{border:0;border-radius:10px;background:color-mix(in srgb,var(--workspace-color) 10%,transparent);padding:0 9px;color:color-mix(in srgb,var(--workspace-color) 78%,#263028 22%);font-size:11px;font-weight:750}.overviewDayNext{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px;margin:6px 5px 3px;padding-top:7px;border-top:1px solid var(--paper-line);font-size:11px}.overviewNextLabel{color:var(--muted)}.overviewNextText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}.overviewDayMeta{min-height:28px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:3px 4px 0}.overviewDayMeta>span{font-size:10.5px;font-weight:650}.overviewBirthday{color:#9c5d00}.overviewCarryover{color:#9a4a31}.overviewDayMeta>button{margin-left:auto;border:0;border-radius:9px;background:rgba(255,255,255,.48);padding:6px 8px;color:#46534b;font-size:10.5px;font-weight:700}
.dayNavigator{display:flex;align-items:center;gap:6px;margin:8px 13px 0;padding:5px 6px;border:1px solid var(--paper-line);border-radius:12px;background:rgba(255,255,255,.28)}.dayNavigator.hidden{display:none!important}.dayNavigatorArrow{width:34px;height:34px;flex:0 0 34px;border:0;border-radius:9px;background:rgba(255,255,255,.5);font-size:20px;color:#475249}.dayNavigatorLabel{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:12px;font-weight:750}.dayNavigatorToday,.dayNavigatorPlan{min-height:34px;border:0;border-radius:9px;padding:0 9px;background:color-mix(in srgb,var(--workspace-color) 10%,rgba(255,255,255,.45));color:color-mix(in srgb,var(--workspace-color) 74%,#263028 26%);font-size:11px;font-weight:750}.dayNavigatorToday.hidden{display:none!important}
.inboxWorkflowIntro{display:flex!important;align-items:center;justify-content:space-between;gap:12px}.inboxWorkflowIntro>div{display:grid;gap:3px}.inboxWorkflowIntro span{color:var(--muted);font-size:11.5px}.inboxWorkflowIntro>button{flex:0 0 auto;min-height:36px;border:0;border-radius:10px;background:var(--workspace-color);padding:0 12px;color:var(--workspace-contrast,#fff);font-weight:750}
.smartChip-destination{background:color-mix(in srgb,var(--workspace-color) 10%,#fff 90%)!important;border-color:color-mix(in srgb,var(--workspace-color) 26%,#dfe5e1 74%)!important;color:color-mix(in srgb,var(--workspace-color) 76%,#263028 24%)!important;font-weight:700}
.birthdayViewHead small#birthdaySyncStatus{display:block;margin-top:4px;color:var(--muted);font-size:10.5px}
.notificationCard .notificationText small{line-height:1.35}
@media(min-width:761px){.dayNavigator{max-width:620px}.overviewDayCard{margin-left:1px;margin-right:1px}}
@media(max-width:760px){
  .overviewDayCard{margin:0 8px 12px;padding:8px}.overviewDayOpen{min-height:46px}.overviewTodayJump{min-height:46px}.overviewDayMeta>button{min-height:36px}
  .dayNavigator{position:sticky;top:60px;z-index:11;margin:6px 9px 0;padding:4px 5px;background:color-mix(in srgb,var(--paper-canvas) 92%,#fff 8%);backdrop-filter:blur(10px)}
  .dayNavigatorArrow{width:40px;height:40px;flex-basis:40px}.dayNavigatorToday,.dayNavigatorPlan{min-height:40px;padding:0 8px}.dayNavigatorLabel{font-size:11.5px}
  .mainPane:not(.projectView) .mainHeader{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:6px!important;padding:7px 10px!important}
  .mainPane:not(.projectView) .mainHeader .titleBlock{grid-column:1!important;min-width:0!important;flex:none!important}.mainPane:not(.projectView) .mainHeader .titleBlock h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:18px}.mainPane:not(.projectView) .mainHeader .titleBlock>small{display:none}.mainPane:not(.projectView) .mainHeader .viewStats{margin-top:2px}
  .mainPane:not(.projectView) .mainHeader .viewModes{grid-column:2!important;width:auto!important;margin:0!important}.mainPane:not(.projectView) .mainHeader .filterOnlyButton{min-width:74px!important;min-height:40px!important;padding:0 9px!important;font-size:12px!important}
  .fastAdd{margin-top:7px!important}.smartAddPreview{margin-left:10px!important;margin-right:10px!important}
  .inboxWorkflowIntro{align-items:stretch!important;flex-direction:column}.inboxWorkflowIntro>button{width:100%;min-height:44px}
}
@media(max-width:360px){.dayNavigator{gap:3px}.dayNavigatorPlan{font-size:0;width:40px;padding:0}.dayNavigatorPlan::after{content:"◷";font-size:18px}.dayNavigatorToday{padding:0 6px;font-size:10px}.dayNavigatorLabel{font-size:10.5px}.overviewDayMeta>button{margin-left:0}}

/* ========================================================================== 
   3.0.0 — Task context + integrations
   ========================================================================== */
.taskContextPrimary{display:grid;gap:7px;margin:0 0 10px}.taskContextLine{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;border:1px solid color-mix(in srgb,var(--workspace-color) 16%,var(--line) 84%);border-radius:12px;background:color-mix(in srgb,var(--workspace-color) 5%,#fff 95%);padding:8px 10px;text-align:left;color:var(--text)}.taskContextLine:hover{background:color-mix(in srgb,var(--workspace-color) 8%,#fff 92%)}.taskContextIcon{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--workspace-color) 11%,#fff 89%);font-size:17px;color:var(--workspace-color)}.taskContextLine>span:nth-child(2){min-width:0;display:grid;gap:2px}.taskContextLine b{font-size:12px}.taskContextLine small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:10.5px}.taskContextLine i{font-style:normal;font-size:10px;font-weight:750;color:var(--workspace-color)}
.taskContextPickerPanel{width:min(560px,calc(100vw - 24px))}.taskContextPicker{padding:12px 14px;display:grid;gap:11px}.contextPickerActions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.contextSavedContacts{display:grid;max-height:230px;overflow:auto;border-top:1px solid var(--line)}.contextSavedContacts button,.addressSuggestions button{display:grid;gap:2px;width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:9px 5px;text-align:left;color:var(--text)}.contextSavedContacts button:hover,.addressSuggestions button:hover{background:rgba(40,70,50,.045)}.contextSavedContacts small,.addressSuggestions small{color:var(--muted);font-size:10px}.addressSuggestions{max-height:245px;overflow:auto}.addressSuggestions:empty{display:none}
.integrationStack{display:grid;gap:12px}.integrationCard{display:grid;gap:9px;padding:11px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.35)}.integrationCard>div:first-child{display:grid;gap:3px}.integrationCard small{color:var(--muted);font-size:10.5px;line-height:1.35}.integrationStatus{display:grid;gap:3px;padding:8px 9px;border-radius:9px;background:rgba(80,90,84,.05)}.integrationStatus.connected{background:color-mix(in srgb,var(--workspace-color) 8%,#fff 92%)}.integrationToggle{display:flex;align-items:center;gap:8px;padding:6px 2px;font-size:12px}.integrationButtons{display:flex;gap:7px;flex-wrap:wrap}.integrationButtons button{min-height:34px}
.followUpPrompt{display:grid;gap:11px}.followUpHero{display:grid;gap:4px;padding:10px;border:1px solid color-mix(in srgb,var(--workspace-color) 15%,var(--line) 85%);border-radius:12px;background:color-mix(in srgb,var(--workspace-color) 5%,#fff 95%)}.followUpHero b{font-size:14px}.followUpHero small{color:var(--muted)}.followUpActions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.inlineTaskContext{display:inline-flex;align-items:center;gap:5px;max-width:100%;border:0;border-radius:8px;background:color-mix(in srgb,var(--workspace-color) 7%,transparent);padding:3px 6px;color:var(--muted);font-size:10px}.inlineTaskContext span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.smartChip-phone,.smartChip-address{background:color-mix(in srgb,var(--workspace-color) 7%,#fff 93%);border-color:color-mix(in srgb,var(--workspace-color) 20%,#dfe5e1 80%);color:color-mix(in srgb,var(--workspace-color) 70%,#263028 30%)}
@media(max-width:680px){.taskContextLine{grid-template-columns:31px minmax(0,1fr);padding:8px}.taskContextLine i{display:none}.contextPickerActions{grid-template-columns:1fr}.taskContextPicker{padding:10px}.followUpActions{grid-template-columns:1fr}.integrationButtons{display:grid;grid-template-columns:1fr}.integrationButtons button{width:100%}}

/* 3.2.0 — «Мой Планировщик»: personalization and optional magic */
:root{--my-accent:#2f8a5b;--my-surface:#f8f5ee}
body.myFontModern{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
body.myFontFriendly{font-family:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif}
body.myFontClassic{font-family:Georgia,"Times New Roman",system-ui,serif}
body.myFontClassic input,body.myFontClassic textarea,body.myFontClassic select,body.myFontClassic button{font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
body.mySkinClean{background:#f7faf8}
body.mySkinClean .workspace,body.mySkinClean .mainPane,body.mySkinClean .sidebar,body.mySkinClean .planPane{background:#fff!important;background-image:none!important}
body.mySkinSoft{background:color-mix(in srgb,var(--my-accent) 4%,#f7f6f1 96%)}
body.mySkinSoft .workspace,body.mySkinSoft .mainPane,body.mySkinSoft .sidebar,body.mySkinSoft .planPane{background-color:color-mix(in srgb,var(--my-accent) 3%,#fff 97%)!important}
#brandBtn .brandMark{position:relative;overflow:visible}
#brandBtn .brandMark::after{content:attr(data-personal-icon);position:absolute;right:-7px;bottom:-6px;display:grid;place-items:center;width:19px;height:19px;border-radius:9px;background:#fff;border:1px solid color-mix(in srgb,var(--my-accent) 25%,#dfe6e1 75%);box-shadow:0 3px 9px rgba(20,45,29,.16);font-size:11px;line-height:1}
.magicFull button,.magicFull .taskRow,.magicFull .projectTree button,.magicFull .modal,.magicFull .toast{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,background-color .25s ease,border-color .25s ease,color .2s ease}
.magicGentle button,.magicGentle .modal,.magicGentle .toast{transition:transform .12s ease,opacity .15s ease,background-color .2s ease}
.magicOff *, .magicOff *::before,.magicOff *::after{animation:none!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
.magicTouched{transform:scale(.975)!important}
.magicFull .magicTouched{box-shadow:0 0 0 5px color-mix(in srgb,var(--my-accent) 10%,transparent)!important}
.magicViewChange .mainPane.mobileActive,.magicViewChange .planPane.mobileActive,.magicViewChange .sidebar.mobileActive{animation:myViewIn .34s cubic-bezier(.2,.8,.2,1)}
.magicModalIn{animation:myModalIn .28s cubic-bezier(.16,1,.3,1)}
.magicToastIn{animation:myToastIn .3s cubic-bezier(.16,1,.3,1)}
.magicBurst{position:fixed;z-index:99999;width:1px;height:1px;pointer-events:none}
.magicBurst i{position:absolute;width:6px;height:6px;border-radius:99px;background:var(--my-accent);transform:rotate(calc(var(--i)*45deg)) translateY(-4px);animation:myBurst .72s cubic-bezier(.15,.8,.25,1) forwards}
.magicBurst-small i{width:4px;height:4px}.magicBurst-done i{width:7px;height:7px}
@keyframes myBurst{0%{opacity:1;transform:rotate(calc(var(--i)*45deg)) translateY(-5px) scale(.4)}100%{opacity:0;transform:rotate(calc(var(--i)*45deg)) translateY(-42px) scale(1)}}
@keyframes myModalIn{from{opacity:.2;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes myToastIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes myViewIn{from{opacity:.84;transform:translateY(4px)}to{opacity:1;transform:none}}

.myPlannerPersonalizer{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:20px;background:rgba(11,25,17,.22);backdrop-filter:blur(0);opacity:0;transition:opacity .25s ease,backdrop-filter .25s ease}
.myPlannerPersonalizer.shown{opacity:1;backdrop-filter:blur(8px)}
.myPlannerPersonalizer.personalClosing{opacity:0}.personalStage{width:min(920px,96vw);display:grid;grid-template-columns:minmax(250px,.8fr) minmax(360px,1.2fr);gap:18px;align-items:stretch}
.personalLivePreview{--preview-accent:var(--my-accent);border:1px solid rgba(255,255,255,.7);border-radius:28px;background:linear-gradient(155deg,color-mix(in srgb,var(--preview-accent) 12%,#fff 88%),#fff 64%);box-shadow:0 24px 70px rgba(17,43,26,.2);padding:20px;min-height:440px;overflow:hidden;position:relative}
.personalLivePreview::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-100px;bottom:-90px;background:color-mix(in srgb,var(--preview-accent) 16%,transparent);filter:blur(2px);transition:background .4s ease,transform .45s ease}
.magicFull .personalLivePreview::after{animation:previewFloat 4.5s ease-in-out infinite alternate}
@keyframes previewFloat{to{transform:translate(-18px,-15px) scale(1.08)}}
.personalPreviewTop{display:flex;align-items:center;gap:9px}.personalPreviewTop>span{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:#fff;box-shadow:0 5px 18px rgba(20,45,29,.12);font-size:21px}.personalPreviewTop b{font-size:17px}.personalPreviewTop em{margin-left:auto;font-style:normal;font-size:10px;padding:5px 8px;border-radius:999px;background:#fff;color:#66736a}
.personalPreviewBody{margin-top:86px}.personalPreviewBody small{display:block;color:#78847c;font-size:12px}.personalPreviewBody strong{display:block;margin-top:5px;font-size:32px;line-height:1.05;color:#19251d}.personalPreviewBody>div{display:grid;gap:9px;margin-top:32px}.personalPreviewBody i{display:block;height:54px;border-radius:16px;background:#fff;border-left:5px solid var(--preview-accent);box-shadow:0 5px 18px rgba(18,39,25,.07)}
.personalCard{border-radius:28px;background:rgba(255,255,255,.97);box-shadow:0 24px 80px rgba(13,35,22,.23);padding:28px;min-height:440px;display:flex;flex-direction:column}.personalStepPop{animation:personalStepIn .3s cubic-bezier(.16,1,.3,1)}@keyframes personalStepIn{from{opacity:.55;transform:translateX(9px)}to{opacity:1;transform:none}}
#personalStepBody{flex:1}.personalMagicIntro,.personalDone{min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.personalSpark{font-size:54px;filter:drop-shadow(0 8px 16px color-mix(in srgb,var(--my-accent) 26%,transparent));animation:personalSpark 1.8s ease-in-out infinite alternate}@keyframes personalSpark{to{transform:translateY(-5px) rotate(5deg) scale(1.06)}}
.personalMagicIntro h2,.personalDone h2,.personalQuestion h2{margin:12px 0 6px;font-size:28px;line-height:1.05}.personalMagicIntro p,.personalDone p,.personalQuestion p{margin:0 0 20px;color:#6f7a72}.personalBigButton{min-height:48px;border:0;border-radius:15px;padding:0 24px;background:var(--my-accent);color:#fff;font-weight:800;font-size:15px;box-shadow:0 10px 24px color-mix(in srgb,var(--my-accent) 24%,transparent)}.personalTextButton{margin-top:10px;border:0;background:transparent;color:#68736b;padding:9px}
.personalQuestion>small{display:inline-block;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--my-accent) 9%,#fff 91%);color:var(--my-accent);font-weight:800}.personalChoiceGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.personalChoiceGrid button,.personalStyleGrid button,.personalMagicGrid button{border:1px solid #dce4de;border-radius:16px;background:#fff;min-height:76px;padding:12px;text-align:left}.personalChoiceGrid button b{font-size:22px}.personalChoiceGrid button span{display:block;margin-top:4px;font-weight:750}.personalChoiceGrid button.selected,.personalStyleGrid button.selected,.personalMagicGrid button.selected,.personalFontGrid button.selected{border-color:var(--my-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--my-accent) 11%,transparent);background:color-mix(in srgb,var(--my-accent) 4%,#fff 96%)}
.personalColorGrid{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.personalColorGrid button{width:48px;height:48px;border-radius:50%;border:5px solid #fff;background:var(--c);box-shadow:0 0 0 1px #dce3de,0 5px 14px rgba(18,43,27,.12)}.personalColorGrid button.selected{box-shadow:0 0 0 3px var(--c),0 7px 20px color-mix(in srgb,var(--c) 25%,transparent);transform:scale(1.1)}
.personalStyleGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.personalStyleGrid i{display:block;height:68px;border-radius:11px;margin-bottom:9px;border:1px solid #e1e4e2}.stylePaper{background:linear-gradient(120deg,#faf7ef,#f5efe2)}.styleClean{background:#fff}.styleSoft{background:linear-gradient(120deg,color-mix(in srgb,var(--my-accent) 7%,#fff 93%),#fff)}.personalStyleGrid b,.personalStyleGrid span,.personalMagicGrid b,.personalMagicGrid span{display:block}.personalStyleGrid span,.personalMagicGrid span{font-size:11px;color:#748078;margin-top:3px}
.personalIconGrid{display:flex;gap:8px;flex-wrap:wrap}.personalIconGrid button{width:43px;height:43px;border:1px solid #dce3de;border-radius:13px;background:#fff;font-size:21px}.personalIconGrid button.selected{border-color:var(--my-accent);background:color-mix(in srgb,var(--my-accent) 7%,#fff 93%);transform:translateY(-3px);box-shadow:0 8px 18px color-mix(in srgb,var(--my-accent) 16%,transparent)}.personalQuestion h3{font-size:14px;margin:20px 0 8px}.personalFontGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.personalFontGrid button{min-height:42px;border:1px solid #dce3de;border-radius:12px;background:#fff;font-weight:700}
.personalMagicGrid{display:grid;gap:9px}.personalMagicGrid button{min-height:70px}.personalWizardFooter{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf0ee;margin-top:18px;padding-top:14px}.personalWizardFooter.hidden{display:none}.personalWizardFooter button{border:0;background:transparent;color:#48554c;font-weight:750;padding:10px}.personalWizardFooter button:last-child{color:var(--my-accent)}.personalWizardFooter span{font-size:11px;color:#95a099}.personalFinished .personalCard{animation:personalFinish .65s cubic-bezier(.16,1,.3,1)}@keyframes personalFinish{50%{transform:scale(1.025);box-shadow:0 28px 90px color-mix(in srgb,var(--my-accent) 22%,rgba(13,35,22,.2))}100%{transform:none}}
.myPlannerSettingsCard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;align-items:center;margin:10px 0 14px;padding:14px;border:1px solid color-mix(in srgb,var(--my-accent) 18%,#dfe5e0 82%);border-radius:17px;background:linear-gradient(135deg,color-mix(in srgb,var(--my-accent) 7%,#fff 93%),#fff);box-shadow:0 6px 20px rgba(17,40,25,.06)}.myPlannerSettingsCard>div:first-child{display:flex;gap:10px;align-items:center}.myPlannerSettingsCard>div span:last-child{display:grid}.myPlannerSettingsCard small{color:#758078;margin-top:2px}.settingsMagicIcon{width:39px;height:39px;border-radius:13px;background:#fff;display:grid!important;place-items:center;font-size:20px;box-shadow:0 5px 14px rgba(20,45,29,.1)}.quickMagicSwitch{grid-column:1/-1;display:grid!important;grid-template-columns:repeat(3,1fr);gap:6px}.quickMagicSwitch button{border:1px solid #dde4df;border-radius:10px;background:#fff;min-height:35px;font-weight:700;color:#5b675f}.quickMagicSwitch button.active{border-color:var(--my-accent);background:color-mix(in srgb,var(--my-accent) 8%,#fff 92%);color:var(--my-accent)}
@media(max-width:760px){.myPlannerPersonalizer{padding:8px}.personalStage{grid-template-columns:1fr;width:100%;max-width:520px}.personalLivePreview{min-height:120px;border-radius:21px;padding:13px}.personalPreviewBody{margin-top:18px}.personalPreviewBody strong{font-size:23px}.personalPreviewBody>div{display:none}.personalCard{min-height:430px;border-radius:22px;padding:20px}.personalMagicIntro h2,.personalDone h2,.personalQuestion h2{font-size:24px}.personalChoiceGrid{grid-template-columns:1fr 1fr}.personalStyleGrid{grid-template-columns:1fr}.personalStyleGrid i{height:38px}.personalStyleGrid button{min-height:60px;display:grid;grid-template-columns:58px 1fr;column-gap:10px;align-items:center}.personalStyleGrid i{grid-row:1/3;margin:0}.personalColorGrid{justify-content:center}.personalLivePreview .personalPreviewTop em{display:none}.myPlannerSettingsCard{grid-template-columns:1fr}.myPlannerSettingsCard>.primaryButton{width:100%}}
.personalNameField{display:grid;gap:6px;margin-top:14px}.personalNameField span{font-size:12px;font-weight:800;color:#667269}.personalNameField input{width:100%;min-height:48px;border:1px solid #d9e1db;border-radius:14px;padding:0 14px;font:inherit;font-size:17px;font-weight:800;color:#253229;background:#fff;outline:none}.personalNameField input:focus{border-color:var(--my-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--my-accent) 10%,transparent)}.personalNameIdeas{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.personalNameIdeas button{border:1px solid #dfe5e0;border-radius:999px;background:#fff;padding:8px 11px;font-weight:750;color:#58645c}.personalNameIdeas button:hover{border-color:var(--my-accent);color:var(--my-accent)}
.magicFull .magicItemIn{animation:myItemIn .46s cubic-bezier(.16,1,.3,1)}.magicGentle .magicItemIn{animation:myItemInGentle .2s ease-out}@keyframes myItemIn{0%{opacity:.45;transform:translateY(7px) scale(.985);box-shadow:0 0 0 0 color-mix(in srgb,var(--my-accent) 0%,transparent)}55%{box-shadow:0 0 0 5px color-mix(in srgb,var(--my-accent) 8%,transparent)}100%{opacity:1;transform:none;box-shadow:none}}@keyframes myItemInGentle{from{opacity:.72;transform:translateY(3px)}to{opacity:1;transform:none}}


/* 3.2.1 — visible mobile personalization entry */
.mobilePersonalizeBtn{display:none}
@media(max-width:760px){
  .mobilePersonalizeBtn{display:grid!important;place-items:center!important;width:44px!important;min-width:44px!important;height:44px!important;padding:0!important;border:1px solid color-mix(in srgb,var(--my-accent) 20%,#d8e1db 80%)!important;border-radius:14px!important;background:color-mix(in srgb,var(--my-accent) 8%,#fff 92%)!important;color:var(--my-accent)!important;font-size:20px!important;line-height:1!important;box-shadow:0 4px 14px rgba(20,45,29,.08)!important}
  .magicFull .mobilePersonalizeBtn{animation:mobileMagicGlow321 2.8s ease-in-out 2}
  .mobilePersonalizeBtn:active{transform:scale(.94)!important}
  .personalStage{max-height:calc(var(--vvh,100vh) - 16px);overflow:auto}
  .personalCard{min-height:min(430px,calc(var(--vvh,100vh) - 160px));}
}
@keyframes mobileMagicGlow321{0%,100%{box-shadow:0 4px 14px rgba(20,45,29,.08)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--my-accent) 11%,transparent),0 8px 22px color-mix(in srgb,var(--my-accent) 18%,transparent)}}


/* ==========================================================================
   3.2.3 — Personalization changes the REAL app chrome
   ========================================================================== */
:root{--ui-accent:var(--my-accent);--ui-accent-contrast:#fff}
.topbar{background:linear-gradient(90deg,color-mix(in srgb,var(--ui-accent) 12%,#fff 88%),#fff 44%,color-mix(in srgb,var(--ui-accent) 6%,#fff 94%))!important;transition:background .35s ease,border-color .25s ease!important}
.topbar::after{background:var(--ui-accent)!important;transition:background .35s ease!important}
.brandMark{background:var(--ui-accent)!important;color:var(--ui-accent-contrast,#fff)!important;box-shadow:0 5px 14px color-mix(in srgb,var(--ui-accent) 24%,transparent)!important}
.iconButton:hover,.headerTextButton:hover{background:color-mix(in srgb,var(--ui-accent) 9%,#fff 91%)!important}
.quickNav button.active{background:color-mix(in srgb,var(--ui-accent) 11%,#fff 89%)!important;box-shadow:inset 3px 0 0 var(--ui-accent)!important}
.primaryButton,.accentButton,.fab,.inboxWorkflowIntro>button{background:var(--ui-accent)!important;color:var(--ui-accent-contrast,#fff)!important}
.segmented button.active{background:var(--ui-accent)!important;color:var(--ui-accent-contrast,#fff)!important}
.fastAdd>span,.linkButton{color:var(--ui-accent)!important}
.calendarDay.selected{background:color-mix(in srgb,var(--ui-accent) 10%,#fff 90%)!important;outline-color:var(--ui-accent)!important}
.calendarDay.hasTasks::after{background:var(--ui-accent)!important}
.taskCheck input{accent-color:var(--ui-accent)!important}
.planDensityRange input[type="range"]{accent-color:var(--ui-accent)!important}
body.mySkinPaper .topbar{background:linear-gradient(90deg,color-mix(in srgb,var(--ui-accent) 11%,#fbf8f0 89%),#fbf8f0 48%,color-mix(in srgb,var(--ui-accent) 5%,#fbf8f0 95%))!important}
body.mySkinPaper .bottomNav{background:#fbf8f0!important}
body.mySkinClean .topbar{background:linear-gradient(90deg,color-mix(in srgb,var(--ui-accent) 10%,#fff 90%),#fff 52%,color-mix(in srgb,var(--ui-accent) 4%,#fff 96%))!important}
body.mySkinClean .bottomNav{background:#fff!important}
body.mySkinSoft .topbar{background:linear-gradient(90deg,color-mix(in srgb,var(--ui-accent) 16%,#fff 84%),color-mix(in srgb,var(--ui-accent) 5%,#fff 95%) 58%,#fff)!important}
body.mySkinSoft .bottomNav{background:color-mix(in srgb,var(--ui-accent) 5%,#fff 95%)!important}
body.myFontModern .topbar button,body.myFontModern .topbar select,body.myFontModern .quickNav button,body.myFontModern .bottomNav button{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important}
body.myFontFriendly .topbar button,body.myFontFriendly .topbar select,body.myFontFriendly .quickNav button,body.myFontFriendly .bottomNav button{font-family:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif!important}
body.myFontClassic .topbar button,body.myFontClassic .topbar select,body.myFontClassic .quickNav button,body.myFontClassic .bottomNav button{font-family:Georgia,"Times New Roman",serif!important}
.mobilePersonalizeBtn{display:none!important}
@media(max-width:760px){
  .bottomNav{border-top-color:color-mix(in srgb,var(--ui-accent) 14%,#dfe5e1 86%)!important;transition:background-color .35s ease,border-color .35s ease!important}
  .bottomNav button.active{color:color-mix(in srgb,var(--ui-accent) 82%,#202923 18%)!important}
  .bottomNav .captureNav b{background:var(--ui-accent)!important;color:var(--ui-accent-contrast,#fff)!important;box-shadow:0 5px 16px color-mix(in srgb,var(--ui-accent) 30%,transparent)!important;transition:background-color .35s ease,box-shadow .35s ease,transform .16s ease!important}
  .bottomNav button.active b{filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--ui-accent) 18%,transparent))}
}


/* ==========================================================================
   3.2.4 — ONE personal accent across the whole UI
   Community/project/task colours remain data colours; app controls follow --ui-accent.
   ========================================================================== */
:root{
  --ui-accent:#2f8a5b;
  --ui-accent-contrast:#fff;
  --ui-accent-soft:color-mix(in srgb,var(--ui-accent) 10%,#fff 90%);
  --ui-accent-softer:color-mix(in srgb,var(--ui-accent) 5%,#fff 95%);
  --ui-accent-line:color-mix(in srgb,var(--ui-accent) 28%,#dce3de 72%);
}
/* Inputs and focus */
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline-color:color-mix(in srgb,var(--ui-accent) 48%,#fff 52%)!important}
input[type="checkbox"],input[type="radio"],input[type="range"]{accent-color:var(--ui-accent)!important}
::selection{background:color-mix(in srgb,var(--ui-accent) 28%,#fff 72%);color:#202620}

/* Global actions, active states and links */
.primaryButton,.accentButton,.fab,.inboxWorkflowIntro>button,.mainPane.projectView .fastAddSubmit,.taskMessageBar.taskMessageBarNoAttach #taskMessageSend,.emptyActions button.primary{background:var(--ui-accent)!important;border-color:var(--ui-accent)!important;color:var(--ui-accent-contrast)!important}
.primaryButton:hover,.accentButton:hover,.fab:hover,.inboxWorkflowIntro>button:hover,.mainPane.projectView .fastAddSubmit:hover,.taskMessageBar.taskMessageBarNoAttach #taskMessageSend:hover{filter:brightness(.97)}
.segmented button.active,.viewModes button.active,.toggleGroup button.active{background:var(--ui-accent)!important;color:var(--ui-accent-contrast)!important}
.linkButton,.fastAdd>span,.pickerClear,.relatedContact a,.contactCardHead a,.optionalToggle{color:color-mix(in srgb,var(--ui-accent) 82%,#202620 18%)!important}
.fastAdd button,.callButton,.quickBadge,.planTodayTop:not(.isToday){background:var(--ui-accent-soft)!important;color:color-mix(in srgb,var(--ui-accent) 78%,#202620 22%)!important}
.quickInstallButton{border-color:var(--ui-accent-line)!important;background:var(--ui-accent-soft)!important;color:color-mix(in srgb,var(--ui-accent) 82%,#202620 18%)!important}

/* Navigation and selection on every layout */
.topbar{border-color:var(--ui-accent-line)!important}
.brandMark,.bottomNav .captureNav b{background:var(--ui-accent)!important;color:var(--ui-accent-contrast)!important}
.quickNav button.active,.treeRow.active,.calendarDay.selected,.styledSelectOption.selected,.pickerOption.selected,.settingsAccordion>summary:hover{background:var(--ui-accent-soft)!important}
.quickNav button.active,.treeRow.active{box-shadow:inset 3px 0 0 var(--ui-accent)!important}
.calendarDay.selected,.styledSelectOption.selected,.pickerOption.selected{outline-color:var(--ui-accent)!important;border-color:var(--ui-accent-line)!important}
.calendarDay.today,.calendarDay.hasTasks::after{color:color-mix(in srgb,var(--ui-accent) 78%,#222 22%)!important}
.calendarDay.hasTasks::after{background:var(--ui-accent)!important}
.columnSplitter:hover::after,.columnSplitter.active::after{background:var(--ui-accent)!important}
.projectMenuButton:hover,.shareLoginButton{border-color:var(--ui-accent-line)!important}
.treeRow.dragOver{background:var(--ui-accent-soft)!important;outline-color:var(--ui-accent)!important}

/* Mobile chrome */
@media(max-width:760px){
  .bottomNav{border-top-color:var(--ui-accent-line)!important}
  .bottomNav button.active{color:color-mix(in srgb,var(--ui-accent) 82%,#202923 18%)!important}
  .mobileTabs button.active,.mobileSectionTabs button.active{color:color-mix(in srgb,var(--ui-accent) 82%,#202923 18%)!important;border-color:var(--ui-accent)!important}
  .mainHeader .toolButton.active,.mainHeader .iconButton.active{background:var(--ui-accent-soft)!important;color:color-mix(in srgb,var(--ui-accent) 82%,#202923 18%)!important}
}

/* Personalization palette: exactly eight easy-to-understand choices. */
.personalColorGrid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:9px!important;justify-content:stretch!important}
.personalColorGrid button{width:auto!important;height:62px!important;min-width:0!important;border-radius:14px!important;padding:7px 5px 6px!important;display:grid!important;grid-template-rows:30px auto!important;place-items:center!important;gap:3px!important;background:#fff!important;border:1px solid #dce3de!important;box-shadow:none!important}
.personalColorGrid button i{display:block;width:29px;height:29px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 2px 7px rgba(0,0,0,.08)}
.personalColorGrid button span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9.5px;font-weight:750;color:#566158}
.personalColorGrid button.selected{border-color:var(--c)!important;background:color-mix(in srgb,var(--c) 8%,#fff 92%)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 34%,transparent),0 8px 18px color-mix(in srgb,var(--c) 12%,transparent)!important;transform:translateY(-2px)}
.personalColorHint{display:block;margin-top:10px;color:#7b867e;font-size:11px;line-height:1.4}
@media(max-width:420px){.personalColorGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.personalColorGrid button{height:58px!important;grid-template-columns:34px minmax(0,1fr)!important;grid-template-rows:1fr!important;justify-items:start!important;padding:8px 10px!important}.personalColorGrid button span{font-size:11px!important}}


/* 3.2.5 — simple mobile colour chooser + stable update banner */
.personalColorSectionLabel{margin:18px 0 8px;font-size:12px;font-weight:800;color:#667168}
.personalCustomColor{position:relative;margin-top:12px;min-height:64px;border:1px solid #dce3de;border-radius:16px;background:#fff;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;padding:10px 12px;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease,transform .16s ease}
.personalCustomColor:hover{transform:translateY(-1px)}
.personalCustomColor.selected{border-color:var(--ui-accent);background:color-mix(in srgb,var(--ui-accent) 7%,#fff 93%);box-shadow:0 0 0 2px color-mix(in srgb,var(--ui-accent) 24%,transparent)}
.personalCustomColor input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.personalCustomColorSwatch{width:38px;height:38px;border-radius:50%;background:var(--custom-color);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.1);pointer-events:none}
.personalCustomColor>span:not(.personalCustomColorSwatch){display:flex;min-width:0;flex-direction:column;gap:2px;pointer-events:none}
.personalCustomColor b{font-size:13px;color:#303a33}
.personalCustomColor small{font-size:11px;color:#778178}
.personalCustomColor em{font-style:normal;font-size:11px;font-weight:800;color:var(--ui-accent);pointer-events:none}
@media(max-width:420px){.personalCustomColor{min-height:60px;border-radius:14px;padding:9px 10px}.personalCustomColorSwatch{width:34px;height:34px}.personalColorSectionLabel{margin-top:14px}.personalColorGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}


/* ==========================================================================
   3.2.6 — USER ACCENT REALLY EVERYWHERE
   The chosen user colour owns app chrome in Personal plan AND every community.
   Explicit task labels / user-defined marker colours remain data colours.
   ========================================================================== */
:root{
  --community-color:#ee9416;
  --community-contrast:#fff;
}
/* Status / move / update notices: no stale fixed green/charcoal. */
.toast.success,
.toast.undoToast:not(.error):not(.warning){
  background:var(--ui-accent)!important;
  color:var(--ui-accent-contrast,#fff)!important;
  border-color:color-mix(in srgb,var(--ui-accent) 72%,#fff 28%)!important;
  box-shadow:0 10px 28px color-mix(in srgb,var(--ui-accent) 24%,transparent)!important;
}
.toast.undoToast:not(.error):not(.warning) button{
  color:color-mix(in srgb,var(--ui-accent) 82%,#1e2821 18%)!important;
}
.toast.undoToast:not(.error):not(.warning) .undoToastNext{
  color:#fff!important;
  border-color:rgba(255,255,255,.42)!important;
  background:rgba(255,255,255,.16)!important;
}
/* App update banner follows the same selected colour when it legitimately appears. */
.appUpdateBanner{border-color:var(--ui-accent-line)!important}
.appUpdateBanner button{background:var(--ui-accent)!important;color:var(--ui-accent-contrast,#fff)!important}

/* Project navigation markers are chrome, not per-project data colours. */
.projectTree .treeFolder,
.projectManagerName>i,
.treeRow .treeFolder{
  color:var(--ui-accent)!important;
  background-color:transparent;
}
.projectManagerName>i{background:var(--ui-accent)!important}
.treeRow.active{background:var(--ui-accent-soft)!important;box-shadow:inset 3px 0 0 var(--ui-accent)!important}
.treeMiniAction:hover,.treeMiniAction:focus-visible{background:var(--ui-accent-soft)!important;color:var(--ui-accent)!important}

/* Residual old orange/green text and focus rings from pre-personalization CSS. */
.inboxIntro,.callButton,.unscheduledTask button,.quickBadge,.planTodayTop:not(.isToday),
.relatedContact a,.quickPreviewLabel,.quickSchedulePrimary>button b{
  color:color-mix(in srgb,var(--ui-accent) 80%,#202620 20%)!important;
}
.field input:focus,.field textarea:focus,.field select:focus,.titleEditor:focus,
.loginCard input:focus,.quickTextLabel textarea:focus,.taskNotesEditor:focus,
.callField input:focus,.callField select:focus,.callField textarea:focus{
  border-color:var(--ui-accent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-accent) 14%,transparent)!important;
}
.quickTextLabel textarea:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-accent) 14%,transparent)!important}
.dailyPlanReady{
  background:var(--ui-accent-soft)!important;
  color:color-mix(in srgb,var(--ui-accent) 78%,#202620 22%)!important;
}
.quickResult{color:color-mix(in srgb,var(--ui-accent) 78%,#202620 22%)!important}

/* Any generic controls still wired to old --workspace/--orange vars are guaranteed
   to resolve to the user accent after every workspace switch. */
body{
  --workspace-color:var(--ui-accent)!important;
  --workspace-contrast:var(--ui-accent-contrast)!important;
  --orange:var(--ui-accent)!important;
  --orange-2:color-mix(in srgb,var(--ui-accent) 72%,white 28%)!important;
  --orange-soft:color-mix(in srgb,var(--ui-accent) 12%,white 88%)!important;
}

/* 3.2.6 audit pass: compact pickers and old green confirmation controls. */
.colorPickerPanel .colorChoice.selected .colorChoiceCheck,
.colorPickerPanel>footer [data-picker-ok],
#choicePickerBackdrop:not(.anchoredPickerBackdrop) .pickerPanel>footer [data-picker-ok],
#schedulePickerBackdrop .pickerPanel>footer [data-picker-ok],
#repeatPickerBackdrop .pickerPanel>footer [data-picker-ok],
#timePickerBackdrop .pickerPanel>footer [data-picker-ok]{
  background:var(--ui-accent)!important;
  border-color:var(--ui-accent)!important;
  color:var(--ui-accent-contrast,#fff)!important;
}
.colorPickerPanel>footer [data-picker-ok]:hover,
#choicePickerBackdrop:not(.anchoredPickerBackdrop) .pickerPanel>footer [data-picker-ok]:hover,
#schedulePickerBackdrop .pickerPanel>footer [data-picker-ok]:hover,
#repeatPickerBackdrop .pickerPanel>footer [data-picker-ok]:hover,
#timePickerBackdrop .pickerPanel>footer [data-picker-ok]:hover{filter:brightness(.96)}
#choicePickerBackdrop:not(.anchoredPickerBackdrop) .choiceRow.selected{
  border-color:var(--ui-accent-line)!important;
  background:var(--ui-accent-soft)!important;
}
#choicePickerBackdrop:not(.anchoredPickerBackdrop) .choiceRow em,
.iosInstallHint em{color:var(--ui-accent)!important}
#repeatPickerBackdrop .weekdayChecks input{accent-color:var(--ui-accent)!important}


/* 3.2.7 — main plan naming is part of personalization; Personal plan stays fixed */
.personalMainName{display:block;margin-top:18px}.personalMainName input{font-size:18px;font-weight:750}
.personalScopeHint{margin-top:14px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--ui-accent) 24%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--ui-accent) 6%,var(--panel));line-height:1.65}
.personalPreviewPrivate{display:block;margin-top:10px;color:var(--muted);font-size:12px}


/* ==========================================================================
   3.2.9 — TWO COLOURS, TWO JOBS
   --ui-accent: personal interface colour (per user)
   --community-color: shared workspace identity colour (for every member)
   ========================================================================== */

html[data-workspace-kind="community"] .workspacePicker select{
  border-left:5px solid var(--community-color)!important;
  box-shadow:inset 1px 0 0 color-mix(in srgb,var(--community-color) 18%,transparent)!important;
}
html[data-workspace-kind="personal"] .workspacePicker select{
  border-left-color:var(--ui-accent-line)!important;
}
html[data-workspace-kind="community"] .workspacePicker select:focus{
  border-left-color:var(--community-color)!important;
}

.platformWorkspaceCard{
  border-left:4px solid var(--tenant-accent,#0b6b37)!important;
  transition:border-color .2s ease,box-shadow .2s ease,transform .18s ease;
}
.platformWorkspaceCard header i{
  background:var(--tenant-accent,#0b6b37)!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--tenant-accent,#0b6b37) 12%,transparent)!important;
}
.platformWorkspaceCard:hover{
  box-shadow:0 8px 26px color-mix(in srgb,var(--tenant-accent,#0b6b37) 10%,rgba(24,56,37,.08))!important;
}

.communityIdentityPreview{
  --preview-community:#0b6b37;
  display:flex;align-items:center;gap:12px;
  min-height:72px;margin:0 0 15px;padding:13px 15px;
  border:1px solid color-mix(in srgb,var(--preview-community) 28%,var(--line,#d9e2dc) 72%);
  border-left:6px solid var(--preview-community);
  border-radius:16px;
  background:linear-gradient(100deg,color-mix(in srgb,var(--preview-community) 8%,#fff 92%),#fff 55%);
  box-shadow:0 8px 24px color-mix(in srgb,var(--preview-community) 10%,transparent);
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.communityIdentityPreview>i{
  width:38px;height:38px;flex:0 0 38px;border-radius:13px;
  background:var(--preview-community)!important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--preview-community) 24%,transparent);
}
.communityIdentityPreview>span{display:grid;gap:2px;min-width:0}
.communityIdentityPreview b{font-size:15px;color:#253129;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.communityIdentityPreview small{font-size:11px;color:#748078}
.communityColorLogic{
  display:grid;gap:5px;margin:12px 0 16px;padding:12px 13px;
  border:1px solid color-mix(in srgb,var(--ui-accent) 16%,var(--line,#d9e2dc) 84%);
  border-radius:14px;background:color-mix(in srgb,var(--ui-accent) 4%,#fff 96%);
}
.communityColorLogic>b{font-size:12px;color:#2f3a32}
.communityColorLogic>span{font-size:11px;line-height:1.55;color:#69756d}
.communityColorLogic strong{color:#354238}
@media(max-width:760px){
  .communityIdentityPreview{min-height:64px;padding:11px 12px;border-radius:14px}
  .communityIdentityPreview>i{width:34px;height:34px;flex-basis:34px;border-radius:11px}
}


/* 3.2.9 — the personal sign is identity, not decoration hidden in setup. */
#brandBtn .brandMark::after{display:none!important}
#brandBtn .brandPersonalSign{
  flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;margin-left:-5px;
  border-radius:10px;background:var(--ui-accent-soft,#eef6f1);border:1px solid var(--ui-accent-line,#cde0d3);
  box-shadow:0 4px 12px color-mix(in srgb,var(--ui-accent) 15%,transparent);font-size:16px;line-height:1;
  transition:transform .2s ease,background .25s ease,border-color .25s ease;
}
.magicFull #brandBtn .brandPersonalSign{animation:personalSignHello329 .46s cubic-bezier(.2,.9,.2,1) 1}
@keyframes personalSignHello329{0%{transform:scale(.72) rotate(-8deg);opacity:.45}75%{transform:scale(1.1) rotate(3deg)}100%{transform:none;opacity:1}}
.personalIconGroups{display:grid;gap:12px;margin-top:10px}
.personalIconGroups>section{display:grid;gap:6px}.personalIconGroups>section>b{font-size:12px;color:#69756d}
.personalIconGrid{display:grid;grid-template-columns:repeat(8,minmax(36px,1fr));gap:7px}
.personalIconGrid button{width:auto;min-width:0;height:43px}
@media(max-width:760px){
 #brandBtn .brandPersonalSign{width:24px;height:24px;margin-left:-7px;border-radius:9px;font-size:14px}
 .personalIconGrid{grid-template-columns:repeat(6,minmax(34px,1fr))}
}

/* 3.2.10 — shared community colour chooser + community accent precedence */
.communityColorChooser{display:grid;gap:10px;margin:12px 0 16px;padding:12px;border:1px solid var(--line,#dce3de);border-radius:16px;background:color-mix(in srgb,var(--preview-community,var(--ui-accent)) 4%,#fff 96%)}
.communityColorChooserTitle{font-size:12px;font-weight:850;color:#39463d}
.communityColorGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.communityColorGrid button{display:grid;justify-items:center;gap:5px;min-height:68px;padding:9px 5px;border:1px solid #dce3de;border-radius:13px;background:#fff;color:#526057;font:inherit;font-size:11px;font-weight:760;cursor:pointer;transition:.18s ease}
.communityColorGrid button i{width:29px;height:29px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 3px 10px color-mix(in srgb,var(--c) 20%,transparent)}
.communityColorGrid button.selected{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 12%,transparent);transform:translateY(-1px)}
.communityCustomColor{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px;padding:10px 12px;border:1px solid #dce3de;border-radius:13px;background:#fff;cursor:pointer}
.communityCustomColor.selected{border-color:var(--ui-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-accent) 10%,transparent)}
.communityCustomColor input[type="color"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.communityCustomSwatch{width:34px;height:34px;border-radius:11px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.communityCustomColor span:last-child{display:grid;gap:1px}.communityCustomColor b{font-size:13px}.communityCustomColor small{font-size:11px;color:#748078}
@media(max-width:600px){.communityColorGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.communityColorGrid button{grid-template-columns:auto 1fr;justify-items:start;align-items:center;min-height:48px;text-align:left}.communityColorGrid button i{width:25px;height:25px}}

/* ==========================================================================
   3.2.12 — ONE CLEAN IN-APP COLOUR PICKER
   Never open Android/Chromium native <input type=color> UI. Projects,
   markers, communities and personalisation all use the same picker.
   ========================================================================== */
.appColorTrigger{
  width:100%;min-height:46px;border:1px solid #dce3de;border-radius:12px;background:#fff;
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:7px 10px;text-align:left;color:#334038;font:inherit;cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease,transform .12s ease,background .16s ease;
}
.appColorTrigger:hover{border-color:var(--ui-accent);background:color-mix(in srgb,var(--ui-accent) 4%,#fff 96%)}
.appColorTrigger:active{transform:scale(.985)}
.appColorTriggerSwatch{width:30px;height:30px;border-radius:10px;background:var(--picked);box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),0 2px 7px rgba(0,0,0,.08)}
.appColorTrigger>span{display:grid;min-width:0;gap:1px}.appColorTrigger b{font-size:13px}.appColorTrigger small{font-size:11px;color:#78837b}.appColorTrigger em{font-style:normal;font-size:22px;color:#7d8880}
.appColorTrigger.compact{width:42px;min-width:42px;height:40px;min-height:40px;padding:4px;display:grid;place-items:center;border-radius:10px}
.appColorTrigger.compact .appColorTriggerSwatch{width:30px;height:30px;border-radius:8px}.appColorTrigger.compact>span,.appColorTrigger.compact>em{display:none}

.appColorPickerBackdrop{position:fixed;inset:0;z-index:1800;display:grid;place-items:center;padding:18px;background:rgba(14,20,16,.42);backdrop-filter:blur(5px);opacity:0;transition:opacity .16s ease}
.appColorPickerBackdrop.shown{opacity:1}
.appColorPicker{--picker-accent:var(--ui-accent);width:min(620px,96vw);max-height:min(840px,92dvh);overflow:auto;border:1px solid #e1e6e2;border-radius:22px;background:#fff;box-shadow:0 26px 80px rgba(0,0,0,.24);padding:18px;overscroll-behavior:contain}
.appColorPicker header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.appColorPicker header>div{display:grid;gap:2px}.appColorPicker header small{font-size:11px;font-weight:800;color:#7a867d;text-transform:uppercase;letter-spacing:.06em}.appColorPicker h3{margin:0;font-size:22px;color:#263129}
.appColorClose{width:38px;height:38px;border:0;border-radius:11px;background:#f2f5f3;color:#59645c;font-size:26px;line-height:1;cursor:pointer}
.appColorSelected{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:11px;padding:11px 12px;border:1px solid #e2e7e3;border-radius:14px;background:color-mix(in srgb,var(--c) 6%,#fff 94%);margin-bottom:15px}
.appColorSelected>i{width:40px;height:40px;border-radius:12px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 3px 10px color-mix(in srgb,var(--c) 25%,transparent)}
.appColorSelected>span{display:grid;gap:2px}.appColorSelected b{font-size:14px;color:#2d3931}.appColorSelected small{font-size:11px;color:#748078;line-height:1.35}
.appColorSectionTitle{margin:14px 2px 7px;font-size:12px;font-weight:850;color:#536158}
.appColorPopular{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.appColorMore{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.appColorTile{position:relative;min-width:0;border:1px solid #dfe5e1;border-radius:13px;background:#fff;padding:8px 5px 7px;display:grid;justify-items:center;gap:4px;color:#536057;font:inherit;cursor:pointer;transition:.14s ease}
.appColorTile:hover{transform:translateY(-1px);border-color:var(--c)}
.appColorTile>i{width:31px;height:31px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),0 2px 8px rgba(0,0,0,.08)}
.appColorTile>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9.5px;font-weight:750}
.appColorTile>b{display:none;position:absolute;top:5px;right:6px;width:18px;height:18px;border-radius:50%;place-items:center;background:#fff;color:#1d2a21;box-shadow:0 1px 5px #0002;font-size:11px}
.appColorTile.selected{border-color:var(--c);background:color-mix(in srgb,var(--c) 8%,#fff 92%);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 24%,transparent)}
.appColorTile.selected>b{display:grid}
.appColorPicker footer{position:sticky;bottom:-18px;display:flex;justify-content:flex-end;gap:8px;margin:18px -18px -18px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #e5e9e6;background:rgba(255,255,255,.96);backdrop-filter:blur(10px)}

/* Community chooser: quick eight + one clean route to the same large palette. */
.communityCustomColor{width:100%;grid-template-columns:34px minmax(0,1fr) auto!important;text-align:left;color:#354138;font:inherit}
.communityCustomColor .communityCustomSwatch{width:32px;height:32px}.communityCustomColor>em{font-style:normal;font-size:22px;color:#7b867e}.communityCustomColor.selected{border-color:var(--community-color,var(--ui-accent));box-shadow:0 0 0 3px color-mix(in srgb,var(--community-color,var(--ui-accent)) 10%,transparent)}

/* Personalisation uses a normal button, never a hidden native Android colour field. */
.personalCustomColor{display:block!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;min-height:0!important}
.personalCustomColor>button{width:100%;min-height:62px;border:1px solid #dce3de;border-radius:16px;background:#fff;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;padding:10px 12px;text-align:left;font:inherit;color:#303a33;cursor:pointer}
.personalCustomColor.selected>button{border-color:var(--ui-accent);background:color-mix(in srgb,var(--ui-accent) 7%,#fff 93%);box-shadow:0 0 0 2px color-mix(in srgb,var(--ui-accent) 24%,transparent)}
.personalCustomColor>button>span:not(.personalCustomColorSwatch){display:grid;gap:2px}.personalCustomColor>button>em{font-style:normal;font-size:22px;color:var(--ui-accent)}

/* Marker editor stays compact on phones. */
.markerAdminRow{grid-template-columns:42px minmax(100px,1fr) auto!important}.markerCreateRow{align-items:center}.markerCreateRow .appColorTrigger.compact{flex:0 0 42px}

@media(max-width:600px){
  .appColorPickerBackdrop{padding:0;align-items:end}
  .appColorPicker{width:100%;max-height:88dvh;border-radius:22px 22px 0 0;padding:14px 14px calc(8px + env(safe-area-inset-bottom))}
  .appColorPicker header{position:sticky;top:-14px;z-index:2;margin:-14px -14px 10px;padding:14px;background:rgba(255,255,255,.97);border-bottom:1px solid #edf0ee;backdrop-filter:blur(10px)}
  .appColorPicker h3{font-size:20px}
  .appColorPopular{grid-template-columns:repeat(2,minmax(0,1fr))}
  .appColorPopular .appColorTile{grid-template-columns:32px minmax(0,1fr);justify-items:start;align-items:center;min-height:48px;padding:7px 9px;text-align:left}
  .appColorPopular .appColorTile>i{width:28px;height:28px}.appColorPopular .appColorTile>span{font-size:11px}
  .appColorMore{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .appColorMore .appColorTile{min-height:58px;padding:7px 3px 6px}.appColorMore .appColorTile>i{width:30px;height:30px}.appColorMore .appColorTile>span{font-size:8.8px}
  .appColorPicker footer{bottom:calc(-8px - env(safe-area-inset-bottom));margin:14px -14px calc(-8px - env(safe-area-inset-bottom));padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .appColorPicker footer button{min-height:44px;flex:1}
  .markerAdminRow{grid-template-columns:42px minmax(0,1fr)!important}.markerAdminActions{grid-column:1/-1;display:flex;gap:7px}.markerAdminActions button{flex:1}
  .markerCreateRow{display:grid!important;grid-template-columns:minmax(0,1fr) 42px!important}.markerCreateRow>#addMarkerBtn{grid-column:1/-1;width:100%}
}


/* 3.3.0 — My People + one-block polish */
.peopleView{display:grid;gap:14px}.peopleToolbar{display:flex;gap:10px;align-items:center;position:sticky;top:0;z-index:5;padding:2px 0 8px;background:linear-gradient(var(--page-bg,#fff) 75%,transparent)}
.peopleToolbar label{display:flex;align-items:center;gap:8px;flex:1;min-width:0;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:0 12px}.peopleToolbar input{border:0;background:transparent;outline:0;width:100%;padding:11px 0;font:inherit;color:inherit}.peopleIntro{padding:12px 14px;border-radius:16px;background:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 7%,var(--panel));border:1px solid color-mix(in srgb,var(--ui-accent,var(--my-accent)) 18%,var(--line))}.peopleIntro div{display:grid;gap:3px}.peopleIntro span{color:var(--muted);font-size:13px}.peopleGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}.peopleCard{border:1px solid var(--line);background:var(--panel);border-radius:17px;overflow:hidden;box-shadow:0 8px 24px rgba(30,50,40,.05)}.peopleCardMain{width:100%;display:grid;grid-template-columns:46px 1fr auto;gap:11px;align-items:center;text-align:left;border:0;background:transparent;padding:13px;color:inherit}.personAvatar{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 14%,white);color:var(--ui-accent,var(--my-accent));font-weight:850;font-size:18px;border:1px solid color-mix(in srgb,var(--ui-accent,var(--my-accent)) 22%,transparent)}.personAvatar.large{width:58px;height:58px;border-radius:19px;font-size:22px}.peopleCardText{display:grid;gap:3px;min-width:0}.peopleCardText b{font-size:15px}.peopleCardText small,.peopleCardText em{font-style:normal;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.peopleCardText em{font-size:12px}.peopleArrow{font-size:24px;color:var(--muted)}.peopleProjectTags{display:flex;flex-wrap:wrap;gap:5px;padding:0 13px 10px}.peopleProjectTags span{font-size:11px;border-radius:999px;padding:4px 8px;background:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--ui-accent,var(--my-accent)) 14%,var(--line))}.peopleNextTask{width:100%;border:0;border-top:1px solid var(--line);background:transparent;padding:9px 13px;display:grid;grid-template-columns:auto 1fr auto;gap:8px;text-align:left;align-items:center;color:inherit}.peopleNextTask span,.peopleNextTask small{color:var(--muted);font-size:11px}.personDetail330{display:grid;gap:14px}.personDetailHead{display:flex;align-items:center;gap:12px}.personDetailHead h2,.personDetailHead p{margin:0}.personDetailHead p{color:var(--muted);margin-top:3px}.personDetailActions{display:flex;flex-wrap:wrap;gap:8px}.personNote330,.personBirthday330{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--panel)}.personNote330 p{margin:6px 0 0;white-space:pre-wrap}.personBirthday330{display:flex;justify-content:space-between;gap:10px;align-items:center}.personEditorActions{margin:4px 0 2px}.smartChip-birthday{background:#fff1f6!important;border-color:#f8bfd1!important;color:#9b3157!important}.selfCheckCard330>div{display:flex;justify-content:space-between;align-items:center;gap:12px}.selfCheckCard330 span{display:grid;gap:3px}.selfCheckCard330 small{color:var(--muted)}.selfCheck330{display:grid;gap:8px}.selfCheck330>div{display:flex;justify-content:space-between;gap:16px;padding:11px 12px;border-radius:12px;border:1px solid var(--line)}.selfCheck330 .ok{background:color-mix(in srgb,#22a35a 7%,var(--panel))}.selfCheck330 .warn{background:color-mix(in srgb,#e59a22 9%,var(--panel))}.selfCheck330 span{color:var(--muted)}
.magicFull .peopleCard{animation:myItemIn .42s cubic-bezier(.16,1,.3,1)}.magicFull .peopleCard:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(30,50,40,.09)}.magicGentle .peopleCard{transition:box-shadow .15s ease,transform .15s ease}
@media(max-width:760px){.peopleToolbar{align-items:stretch;flex-direction:column;top:0}.peopleToolbar .primaryButton{width:100%}.peopleGrid{grid-template-columns:1fr}.peopleNextTask{grid-template-columns:1fr}.peopleNextTask span{font-weight:700;color:var(--ui-accent,var(--my-accent))}.personDetailActions>*{flex:1;min-width:125px}.selfCheckCard330>div{align-items:stretch;flex-direction:column}.selfCheckCard330 button{width:100%}}


/* 3.3.1 — Scenario Composer */
.scenarioHidden331{display:none!important}
.scenarioCards331{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.scenarioCards331 button{position:relative;display:flex;align-items:center;gap:11px;min-height:86px;border:1px solid #dce4de;border-radius:17px;background:#fff;padding:13px;text-align:left;color:#243128}
.scenarioCards331 button>b{font-size:26px}.scenarioCards331 button span{display:grid;gap:2px}.scenarioCards331 button strong{font-size:15px}.scenarioCards331 button small{font-size:11px;color:#748078;line-height:1.25}.scenarioCards331 button>i{position:absolute;right:9px;top:8px;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:var(--my-accent);color:#fff;font-style:normal;font-size:11px;opacity:0;transform:scale(.7);transition:.2s ease}.scenarioCards331 button.selected{border-color:var(--my-accent);background:color-mix(in srgb,var(--my-accent) 5%,#fff 95%);box-shadow:0 0 0 3px color-mix(in srgb,var(--my-accent) 10%,transparent)}.scenarioCards331 button.selected>i{opacity:1;transform:scale(1)}
.scenarioResult331{margin:14px 0 4px;padding:11px 13px;border-radius:14px;background:color-mix(in srgb,var(--my-accent) 7%,#fff 93%);display:flex;gap:7px;align-items:flex-start;font-size:12px}.scenarioResult331 b{white-space:nowrap}.scenarioResult331 span{color:#526158}
.scenarioDetails331{margin-top:12px;border-top:1px solid #edf0ee;padding-top:10px}.scenarioDetails331 summary{cursor:pointer;color:var(--my-accent);font-weight:800}.scenarioDetails331>p{font-size:12px;margin:7px 0 10px!important}
.scenarioFeatureGrid331{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.scenarioFeatureGrid331 button{position:relative;display:flex;align-items:center;gap:8px;min-height:46px;border:1px solid #dfe5e0;border-radius:13px;background:#fff;padding:9px 10px;text-align:left}.scenarioFeatureGrid331 button>b{font-size:18px}.scenarioFeatureGrid331 button span{font-size:12px;font-weight:750}.scenarioFeatureGrid331 button>i{margin-left:auto;font-style:normal;opacity:0;color:var(--my-accent)}.scenarioFeatureGrid331 button.selected{border-color:var(--my-accent);background:color-mix(in srgb,var(--my-accent) 5%,#fff 95%)}.scenarioFeatureGrid331 button.selected>i{opacity:1}
.scenarioSettingsCard331{margin:12px 0;padding:16px;border:1px solid #dfe7e1;border-radius:18px;background:#fff;display:grid;gap:12px}.scenarioSettingsCard331>div:first-child{display:flex;align-items:center;gap:11px}.scenarioSettingsCard331>div:first-child>span:last-child{display:grid}.scenarioSettingsCard331 small{color:#728078}.scenarioMiniButtons331{display:flex;flex-wrap:wrap;gap:7px}.scenarioMiniButtons331 button{border:1px solid #dce4de;border-radius:999px;background:#fff;padding:8px 11px;font-weight:750}.scenarioMiniButtons331 button.active{border-color:var(--my-accent);color:var(--my-accent);background:color-mix(in srgb,var(--my-accent) 6%,#fff 94%)}
.scenarioFine331>p{color:#66736a}.scenarioFine331 .scenarioFeatureGrid331{grid-template-columns:repeat(2,1fr)}
.scenarioTeamHub331>p{color:#66736a}.scenarioTeamHub331>div{display:grid;gap:8px;margin:14px 0}.scenarioTeamPerson331{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid #e1e7e2;border-radius:13px}.scenarioTeamPerson331>span{width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,var(--ui-accent) 10%,#fff 90%);color:var(--ui-accent);display:grid;place-items:center;font-weight:900}.scenarioTeamPerson331>div{display:grid}.scenarioTeamPerson331 small{color:#748078}
@media(max-width:760px){.scenarioCards331{grid-template-columns:1fr}.scenarioCards331 button{min-height:68px}.scenarioFeatureGrid331,.scenarioFine331 .scenarioFeatureGrid331{grid-template-columns:1fr 1fr}.scenarioQuestion331{padding-bottom:4px}}

/* 3.3.2 — clear scenario states + mobile-safe fine tuning */
.scenarioSettingsCard332{overflow:hidden;min-width:0}
.scenarioSettingsCard332>div:first-child{min-width:0}
.scenarioSettingsCard332>div:first-child>span:last-child{min-width:0}
.scenarioSettingsCard332>div:first-child small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.scenarioSettingsCard332 .scenarioMiniButtons331{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;flex-wrap:initial!important;width:100%;min-width:0}
.scenarioSettingsCard332 .scenarioMiniButtons331 button{position:relative;min-width:0;min-height:76px!important;padding:9px 5px!important;border-radius:16px!important;display:flex!important;flex-direction:column;justify-content:center;align-items:center;gap:4px!important;text-align:center;font-size:13px;line-height:1.1;color:var(--ink,#253029);background:var(--panel,#fff);border:1px solid var(--line,#dce4de);overflow:hidden}
.scenarioSettingsCard332 .scenarioMiniButtons331 button>span{font-size:22px;line-height:1}
.scenarioSettingsCard332 .scenarioMiniButtons331 button>b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.scenarioSettingsCard332 .scenarioMiniButtons331 button>i{display:none;position:absolute;right:6px;top:5px;width:18px;height:18px;border-radius:50%;place-items:center;background:#fff;color:var(--ui-accent,var(--my-accent));font-style:normal;font-size:11px;font-weight:900}
.scenarioSettingsCard332 .scenarioMiniButtons331 button.active{background:var(--ui-accent,var(--my-accent))!important;border-color:var(--ui-accent,var(--my-accent))!important;color:#fff!important;box-shadow:0 5px 14px color-mix(in srgb,var(--ui-accent,var(--my-accent)) 22%,transparent)}
.scenarioSettingsCard332 .scenarioMiniButtons331 button.active>i{display:grid}
.scenarioCoreNote332{font-size:11px;color:var(--muted,#6d786f);line-height:1.35;padding:9px 10px;border-radius:12px;background:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 5%,var(--panel,#fff));border:1px solid color-mix(in srgb,var(--ui-accent,var(--my-accent)) 12%,var(--line,#dfe5e0))}
.scenarioFineButton332{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;box-sizing:border-box!important}
.scenarioFine332{width:100%;min-width:0;box-sizing:border-box;display:grid;gap:16px;padding-bottom:8px}
.scenarioCoreInfo332{display:flex;gap:6px;flex-direction:column;padding:12px 13px;border-radius:14px;background:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 7%,var(--panel,#fff));border:1px solid color-mix(in srgb,var(--ui-accent,var(--my-accent)) 18%,var(--line,#dfe5e0));min-width:0}
.scenarioCoreInfo332 b{font-size:13px}.scenarioCoreInfo332 span{font-size:12px;color:var(--muted,#66736a);line-height:1.35}.scenarioCoreInfo332.compact{margin-top:12px}
.scenarioFineSection332{display:grid;gap:8px;min-width:0}.scenarioFineSection332 h3{margin:0;font-size:16px}.scenarioFineSection332 p{margin:0 0 3px;color:var(--muted,#66736a);font-size:12px;line-height:1.35}
.scenarioFine332 .scenarioFeatureGrid331{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%;min-width:0}
.scenarioFine332 .scenarioFeatureGrid331 button{position:relative;box-sizing:border-box;width:100%;min-width:0;min-height:58px;border:1px solid var(--line,#dfe5e0);border-radius:14px;background:var(--panel,#fff);padding:9px 30px 9px 10px;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:8px;text-align:left;color:var(--ink,#253029);overflow:hidden}
.scenarioFine332 .scenarioFeatureGrid331 button>b{font-size:19px;line-height:1}.scenarioFine332 .scenarioFeatureGrid331 button>span{font-size:13px;font-weight:800;line-height:1.15;min-width:0;overflow-wrap:anywhere}
.scenarioFine332 .scenarioFeatureGrid331 button>i{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:transparent;color:transparent;font-style:normal;font-weight:900}
.scenarioFine332 .scenarioFeatureGrid331 button.selected{background:var(--ui-accent,var(--my-accent))!important;border-color:var(--ui-accent,var(--my-accent))!important;color:#fff!important;box-shadow:0 4px 12px color-mix(in srgb,var(--ui-accent,var(--my-accent)) 18%,transparent)}
.scenarioFine332 .scenarioFeatureGrid331 button.selected>i{background:#fff;color:var(--ui-accent,var(--my-accent))}
.scenarioFineActions332{position:sticky;bottom:0;background:var(--atelier-modal,var(--panel,#fff));padding:10px 0 calc(4px + env(safe-area-inset-bottom));margin-top:2px;z-index:3}
.scenarioQuestion332 .scenarioResult331{min-width:0}.scenarioQuestion332 .scenarioResult331 span{min-width:0;overflow-wrap:anywhere}.scenarioLater332{font-size:11px!important;color:var(--muted,#69756d)!important;margin-top:10px!important}
.scenarioQuestion332 .scenarioCards331 button.selected{background:var(--ui-accent,var(--my-accent))!important;border-color:var(--ui-accent,var(--my-accent))!important;color:#fff!important;box-shadow:0 5px 16px color-mix(in srgb,var(--ui-accent,var(--my-accent)) 20%,transparent)}
.scenarioQuestion332 .scenarioCards331 button.selected small{color:rgba(255,255,255,.82)!important}.scenarioQuestion332 .scenarioCards331 button.selected>i{background:#fff!important;color:var(--ui-accent,var(--my-accent))!important}
@media(max-width:760px){
  .scenarioSettingsCard332{padding:14px 12px!important}
  .scenarioSettingsCard332 .scenarioMiniButtons331{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .scenarioSettingsCard332 .scenarioMiniButtons331 button{min-height:72px!important;padding:8px 3px!important}
  .scenarioSettingsCard332 .scenarioMiniButtons331 button>b{font-size:12px}
  .scenarioFine332 .scenarioFeatureGrid331{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .scenarioFine332 .scenarioFeatureGrid331 button{min-height:60px;padding-left:9px;padding-right:28px}
  .scenarioFine332 .scenarioFeatureGrid331 button>span{font-size:12px}
}
@media(max-width:360px){
  .scenarioSettingsCard332 .scenarioMiniButtons331 button>b{font-size:11px}
  .scenarioSettingsCard332 .scenarioMiniButtons331 button>span{font-size:20px}
  .scenarioFine332 .scenarioFeatureGrid331{grid-template-columns:1fr!important}
}

/* 3.3.4 — compact instant scenario controls */
.scenarioSettingsCard334{gap:10px!important;padding:14px!important;overflow:visible!important}
.scenarioTitle334{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0}
.scenarioTitle334>span:nth-child(2){display:grid;min-width:0}.scenarioTitle334 small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted,#6d786f)}
.scenarioTitle334>em{font-style:normal;font-size:11px;color:var(--ui-accent,var(--my-accent));white-space:nowrap;min-width:54px;text-align:right}
.scenarioSegments334{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:100%}
.scenarioSegment334{position:relative;min-width:0;height:48px;border:1px solid var(--line,#dce4de);border-radius:13px;background:var(--panel,#fff);color:var(--ink,#253029);display:flex;align-items:center;justify-content:center;gap:6px;padding:0 6px;font-weight:800;transition:background .12s ease,border-color .12s ease,color .12s ease,transform .08s ease}
.scenarioSegment334:active{transform:scale(.985)}.scenarioSegment334>span{font-size:17px;line-height:1}.scenarioSegment334>b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scenarioSegment334>i{display:none;position:absolute;right:5px;top:4px;width:16px;height:16px;border-radius:50%;background:#fff;color:var(--ui-accent,var(--my-accent));place-items:center;font-size:10px;font-style:normal;font-weight:900}
.scenarioSegment334.active{background:var(--ui-accent,var(--my-accent));border-color:var(--ui-accent,var(--my-accent));color:#fff}.scenarioSegment334.active>i{display:grid}
.scenarioCoreNote334{font-size:11px;line-height:1.35;color:var(--muted,#6d786f);padding:8px 10px;border-radius:11px;background:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 5%,var(--panel,#fff));border:1px solid color-mix(in srgb,var(--ui-accent,var(--my-accent)) 12%,var(--line,#dfe5e0))}
.scenarioCoreNote334 b{font-weight:750;color:var(--ink,#253029)}
.scenarioFineToggle334{width:100%;height:42px;border:0;border-radius:12px;background:var(--soft,#f1f3f1);display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;color:var(--ink,#253029)}.scenarioFineToggle334 i{font-style:normal;transition:transform .15s ease}.scenarioFineToggle334.open i{transform:rotate(180deg)}
.scenarioFineInline334{display:grid;gap:14px;padding-top:2px}.scenarioFineInline334[hidden]{display:none!important}
.scenarioFineGroup334{display:grid;gap:7px}.scenarioFineHead334{display:grid;gap:2px}.scenarioFineHead334>b{font-size:13px}.scenarioFineHead334>small{font-size:11px;color:var(--muted,#6d786f);line-height:1.3}
.scenarioSwitchList334{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.scenarioSwitchRow334{min-width:0;height:42px;padding:0 9px;border:1px solid var(--line,#dfe5e0);border-radius:11px;background:var(--panel,#fff);display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--ink,#253029);transition:border-color .1s ease,background .1s ease}
.scenarioSwitchInfo334{display:flex;align-items:center;gap:7px;min-width:0}.scenarioSwitchInfo334>i{font-style:normal;width:19px;text-align:center;color:var(--ui-accent,var(--my-accent));font-size:15px}.scenarioSwitchInfo334>b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scenarioSwitch334{flex:0 0 auto;width:34px;height:20px;border-radius:999px;background:#cfd5d1;padding:2px;transition:background .12s ease;display:flex;align-items:center}.scenarioSwitch334>i{width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transform:translateX(0);transition:transform .12s ease}
.scenarioSwitchRow334.active{border-color:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 45%,var(--line,#dfe5e0));background:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 4%,var(--panel,#fff))}.scenarioSwitchRow334.active .scenarioSwitch334{background:var(--ui-accent,var(--my-accent))}.scenarioSwitchRow334.active .scenarioSwitch334>i{transform:translateX(14px)}
.taskMeta{display:flex;flex-wrap:wrap;gap:4px 7px!important;align-items:center}.taskMetaItem334{display:inline-flex!important;align-items:center;gap:3px;min-width:0}.taskMetaItem334>i{font-style:normal;color:currentColor;opacity:.72;width:12px;text-align:center;font-size:11px;line-height:1}.taskMetaItem334>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px){.scenarioSettingsCard334{padding:12px!important}.scenarioSegments334{gap:6px}.scenarioSegment334{height:46px;padding:0 4px}.scenarioSegment334>b{font-size:12px}.scenarioSegment334>span{font-size:16px}.scenarioSwitchList334{grid-template-columns:1fr}.scenarioSwitchRow334{height:44px}.scenarioTitle334>em{font-size:10px;min-width:48px}}
@media(max-width:360px){.scenarioSegment334>b{font-size:11px}.scenarioSegment334>span{font-size:15px}.scenarioSegment334>i{right:3px;top:3px}}

/* 3.3.5 — reliable touch targets + simple destructive action */
.scenarioSettingsCard335,.scenarioSettingsCard335 button{pointer-events:auto!important}
.scenarioSettingsCard335 button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}
.scenarioSettingsCard335 .scenarioSegment334,.scenarioSettingsCard335 .scenarioSwitchRow334,.scenarioSettingsCard335 .scenarioFineToggle334{position:relative;z-index:1}
.dangerGhostButton335{min-height:38px;padding:0 13px;border:1px solid #d98a86;border-radius:10px;background:#fff7f6;color:#a52d29;font-weight:750;touch-action:manipulation}
.dangerGhostButton335:active{transform:scale(.98)}
@media(max-width:760px){.scenarioSettingsCard335 .scenarioSegment334{min-height:48px}.scenarioSettingsCard335 .scenarioSwitchRow334{min-height:48px}.dangerGhostButton335{min-height:44px}}


/* 3.3.9 — reliable mobile controls / voice review */
.voiceReview336 textarea{touch-action:manipulation;-webkit-user-select:text;user-select:text}
.voiceReview336 textarea.voiceEditing336{outline:2px solid color-mix(in srgb,var(--app-accent,#2f8a5b) 42%,transparent);outline-offset:1px}
.voiceReviewStatus336{display:block;min-height:20px;margin:8px 2px 0;color:#68726b;font-size:13px;line-height:1.35}
.voiceReviewActions button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#voiceCreateTask[data-busy="1"]{opacity:.72;cursor:wait}
.scenarioSettingsCard335 button{touch-action:manipulation}
@media(max-width:760px){.voiceReviewActions{display:grid;grid-template-columns:1fr;gap:10px}.voiceReviewActions button{width:100%;min-height:50px}.voiceReviewStatus336{font-size:12.5px}}

/* 3.3.9 — global mobile tap hardening */
@media(max-width:760px){
  button,[role="button"],.clickable{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  #modalBackdrop button,#actionSheet button,#quickCapturePage button,#callCapturePage button{pointer-events:auto}
}


/* 3.3.9 — native, reliable scenario controls */
.scenarioSettingsCard337{gap:10px!important;padding:14px!important;overflow:visible!important}
.scenarioTitle337{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0}
.scenarioTitle337>span:nth-child(2){display:grid;min-width:0}.scenarioTitle337 small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted,#6d786f)}
.scenarioTitle337>em{font-style:normal;font-size:11px;color:var(--ui-accent,var(--my-accent));white-space:nowrap;min-width:54px;text-align:right}
.scenarioNativeTiles337{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.scenarioNativeTile337{position:relative;min-width:0;min-height:54px;border:1px solid var(--line,#dce4de);border-radius:13px;background:var(--panel,#fff);display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:6px;padding:7px 9px;cursor:pointer;user-select:none}
.scenarioNativeTile337>input{position:absolute;inset:auto 7px 7px auto;width:18px;height:18px;accent-color:var(--ui-accent,var(--my-accent));margin:0}
.scenarioNativeIcon337{grid-row:1/3;font-size:18px;line-height:1}.scenarioNativeTile337>b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scenarioNativeTile337>small{font-size:10px;color:var(--muted,#6d786f)}
.scenarioNativeTile337.active{border-color:var(--ui-accent,var(--my-accent));background:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 8%,var(--panel,#fff));box-shadow:inset 3px 0 0 var(--ui-accent,var(--my-accent))}.scenarioNativeTile337.active>b{color:var(--ui-accent,var(--my-accent))}.scenarioNativeTile337.active>small{color:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 80%,#263029 20%)}
.scenarioCoreNote337{font-size:11px;line-height:1.35;color:var(--muted,#6d786f);padding:8px 10px;border-radius:11px;background:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 5%,var(--panel,#fff));border:1px solid color-mix(in srgb,var(--ui-accent,var(--my-accent)) 12%,var(--line,#dfe5e0))}
.scenarioNativeDetails337{border:0}.scenarioNativeDetails337>summary{list-style:none;cursor:pointer;min-height:42px;border:0;border-radius:12px;background:var(--soft,#f1f3f1);display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;color:var(--ink,#253029);user-select:none}.scenarioNativeDetails337>summary::-webkit-details-marker{display:none}.scenarioNativeDetails337[open]>summary span{transform:rotate(180deg)}.scenarioNativeDetails337>summary span{transition:transform .15s ease}
.scenarioNativeFine337{display:grid;gap:15px;padding-top:12px}.scenarioNativeFine337 section{display:grid;gap:7px}.scenarioNativeFine337 h4{margin:0;font-size:13px}.scenarioNativeFine337 p{margin:0;color:var(--muted,#6d786f);font-size:11px}.scenarioNativeList337{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.scenarioNativeRow337{min-width:0;min-height:44px;padding:6px 8px;border:1px solid var(--line,#dfe5e0);border-radius:11px;background:var(--panel,#fff);display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;user-select:none}.scenarioNativeInfo337{display:flex;align-items:center;gap:7px;min-width:0}.scenarioNativeInfo337>i{font-style:normal;width:19px;text-align:center;color:var(--ui-accent,var(--my-accent));font-size:15px}.scenarioNativeInfo337>b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scenarioNativeRight337{display:flex;align-items:center;gap:7px;flex:0 0 auto}.scenarioNativeRight337>small{font-size:10px;color:var(--muted,#6d786f)}.scenarioNativeRight337>input{width:20px;height:20px;margin:0;accent-color:var(--ui-accent,var(--my-accent))}
.scenarioNativeRow337.active{border-color:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 45%,var(--line,#dfe5e0));background:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 5%,var(--panel,#fff))}.scenarioNativeRow337.active .scenarioNativeRight337>small{color:var(--ui-accent,var(--my-accent));font-weight:750}
@media(max-width:760px){.scenarioSettingsCard337{padding:12px!important}.scenarioNativeTiles337{gap:6px}.scenarioNativeTile337{min-height:58px;padding:7px 6px}.scenarioNativeTile337>b{font-size:12px}.scenarioNativeTile337>small{font-size:9.5px}.scenarioNativeList337{grid-template-columns:1fr}.scenarioNativeRow337{min-height:48px}.scenarioNativeRight337>input{width:22px;height:22px}.scenarioTitle337>em{font-size:10px;min-width:48px}}
@media(max-width:360px){.scenarioNativeTile337{grid-template-columns:1fr;grid-template-rows:auto auto auto;text-align:center;justify-items:center}.scenarioNativeIcon337{grid-row:auto}.scenarioNativeTile337>input{right:5px;bottom:5px}.scenarioNativeTile337>b{font-size:11px}}

/* 3.3.9 — compact scenario controls, one click path on every platform */
.scenarioSettingsCard338{display:grid;gap:10px!important;padding:14px!important;overflow:visible!important}
.scenarioHead338{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0}
.scenarioHead338>span:nth-child(2){display:grid;min-width:0}.scenarioHead338 small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted,#6d786f)}
.scenarioHead338>em{font-style:normal;font-size:11px;color:var(--ui-accent,var(--my-accent));white-space:nowrap;min-width:54px;text-align:right}
.scenarioChoices338{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.scenarioChoice338{position:relative;min-width:0;height:44px;border:1px solid var(--line,#dce4de);border-radius:11px;background:var(--panel,#fff);display:flex;align-items:center;justify-content:center;gap:6px;padding:0 8px;color:var(--ink,#253029);font:inherit;font-weight:800;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.scenarioChoice338>span{font-size:16px;line-height:1}.scenarioChoice338>b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scenarioChoice338>i{display:none;position:absolute;right:5px;top:4px;font-style:normal;font-size:10px}
.scenarioChoice338.active{background:var(--ui-accent,var(--my-accent));border-color:var(--ui-accent,var(--my-accent));color:var(--ui-accent-contrast,#fff);box-shadow:0 3px 10px color-mix(in srgb,var(--ui-accent,var(--my-accent)) 18%,transparent)}
.scenarioChoice338.active>i{display:block}.scenarioChoice338:active{transform:scale(.985)}
.scenarioCore338{font-size:11px;line-height:1.35;color:var(--muted,#6d786f);padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 5%,var(--panel,#fff));border:1px solid color-mix(in srgb,var(--ui-accent,var(--my-accent)) 12%,var(--line,#dfe5e0))}
.scenarioDetails338{border:0}.scenarioDetails338>summary{list-style:none;min-height:42px;border-radius:11px;background:var(--soft,#f1f3f1);display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;cursor:pointer;user-select:none;touch-action:manipulation}.scenarioDetails338>summary::-webkit-details-marker{display:none}.scenarioDetails338>summary span{transition:transform .15s ease}.scenarioDetails338[open]>summary span{transform:rotate(180deg)}
.scenarioFine338{display:grid;gap:14px;padding-top:11px}.scenarioFine338 section{display:grid;gap:7px}.scenarioFine338 h4{margin:0;font-size:13px}.scenarioFine338 p{margin:0;color:var(--muted,#6d786f);font-size:11px}.scenarioRows338{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.scenarioRow338{min-width:0;min-height:42px;padding:0 9px;border:1px solid var(--line,#dfe5e0);border-radius:10px;background:var(--panel,#fff);display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--ink,#253029);font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.scenarioRowLabel338{display:flex;align-items:center;gap:7px;min-width:0}.scenarioRowLabel338>i{font-style:normal;width:18px;text-align:center;color:var(--ui-accent,var(--my-accent));font-size:14px}.scenarioRowLabel338>b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scenarioSwitch338{flex:0 0 auto;width:32px;height:19px;border-radius:999px;background:#cfd5d1;padding:2px;display:flex;align-items:center;transition:background .12s ease}.scenarioSwitch338>i{display:block;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transform:translateX(0);transition:transform .12s ease}
.scenarioRow338.active{border-color:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 42%,var(--line,#dfe5e0));background:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 5%,var(--panel,#fff))}.scenarioRow338.active .scenarioSwitch338{background:var(--ui-accent,var(--my-accent))}.scenarioRow338.active .scenarioSwitch338>i{transform:translateX(13px)}
.scenarioRow338:active{transform:scale(.995)}
@media(max-width:760px){
  .scenarioSettingsCard338{padding:11px!important;gap:9px!important}
  .scenarioHead338{grid-template-columns:auto minmax(0,1fr);gap:8px}.scenarioHead338>em{grid-column:2;justify-self:start;min-width:0;font-size:10px}
  .scenarioChoices338{gap:5px}.scenarioChoice338{height:44px;padding:0 4px;gap:4px}.scenarioChoice338>span{font-size:15px}.scenarioChoice338>b{font-size:11.5px}.scenarioChoice338>i{right:3px;top:3px}
  .scenarioRows338{grid-template-columns:1fr}.scenarioRow338{min-height:46px;padding:0 10px}.scenarioRowLabel338>b{font-size:13px}.scenarioSwitch338{width:34px;height:20px}.scenarioSwitch338>i{width:16px;height:16px}.scenarioRow338.active .scenarioSwitch338>i{transform:translateX(14px)}
}
@media(max-width:350px){.scenarioChoice338>span{display:none}.scenarioChoice338>b{font-size:11px}}


/* 3.3.9 — isolated direct settings controls */
.scenarioSettingsCard339{display:grid!important;gap:10px!important;padding:14px!important;overflow:visible!important;pointer-events:auto!important}
.scenarioSettingsCard339 *{box-sizing:border-box}
.scenarioSettingsCard339 button,.scenarioSettingsCard339 summary{pointer-events:auto!important}
.scenarioHead339{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;min-width:0}
.scenarioHead339>span:nth-child(2){display:grid;min-width:0}.scenarioHead339 small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted,#6d786f)}
.scenarioHead339>em{font-style:normal;font-size:11px;color:var(--ui-accent,var(--my-accent));white-space:nowrap;min-width:54px;text-align:right}
.scenarioChoices339{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.scenarioChoice339{position:relative;min-width:0;height:44px;border:1px solid var(--line,#dce4de);border-radius:11px;background:var(--panel,#fff);display:flex;align-items:center;justify-content:center;gap:6px;padding:0 8px;color:var(--ink,#253029);font:inherit;font-weight:800;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;pointer-events:auto!important}
.scenarioChoice339>span{font-size:16px;line-height:1}.scenarioChoice339>b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scenarioChoice339>i{display:none;position:absolute;right:5px;top:4px;font-style:normal;font-size:10px}
.scenarioChoice339.active{background:var(--ui-accent,var(--my-accent));border-color:var(--ui-accent,var(--my-accent));color:var(--ui-accent-contrast,#fff);box-shadow:0 3px 10px color-mix(in srgb,var(--ui-accent,var(--my-accent)) 18%,transparent)}
.scenarioChoice339.active>i{display:block}.scenarioChoice339:active{transform:scale(.985)}
.scenarioCore339{font-size:11px;line-height:1.35;color:var(--muted,#6d786f);padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 5%,var(--panel,#fff));border:1px solid color-mix(in srgb,var(--ui-accent,var(--my-accent)) 12%,var(--line,#dfe5e0))}
.scenarioDetails339{border:0}.scenarioDetails339>summary{list-style:none;min-height:42px;border-radius:11px;background:var(--soft,#f1f3f1);display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;cursor:pointer;user-select:none;touch-action:manipulation}.scenarioDetails339>summary::-webkit-details-marker{display:none}.scenarioDetails339>summary span{transition:transform .15s ease}.scenarioDetails339[open]>summary span{transform:rotate(180deg)}
.scenarioFine339{display:grid;gap:14px;padding-top:11px}.scenarioFine339 section{display:grid;gap:7px}.scenarioFine339 h4{margin:0;font-size:13px}.scenarioFine339 p{margin:0;color:var(--muted,#6d786f);font-size:11px}.scenarioRows339{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.scenarioRow339{min-width:0;min-height:42px;padding:0 9px;border:1px solid var(--line,#dfe5e0);border-radius:10px;background:var(--panel,#fff);display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--ink,#253029);font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;pointer-events:auto!important}
.scenarioRowLabel339{display:flex;align-items:center;gap:7px;min-width:0}.scenarioRowLabel339>i{font-style:normal;width:18px;text-align:center;color:var(--ui-accent,var(--my-accent));font-size:14px}.scenarioRowLabel339>b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scenarioSwitch339{flex:0 0 auto;width:32px;height:19px;border-radius:999px;background:#cfd5d1;padding:2px;display:flex;align-items:center;transition:background .12s ease}.scenarioSwitch339>i{display:block;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transform:translateX(0);transition:transform .12s ease}
.scenarioRow339.active{border-color:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 42%,var(--line,#dfe5e0));background:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 5%,var(--panel,#fff))}.scenarioRow339.active .scenarioSwitch339{background:var(--ui-accent,var(--my-accent))}.scenarioRow339.active .scenarioSwitch339>i{transform:translateX(13px)}
.scenarioBuild339{text-align:right;font-size:10px;color:var(--muted,#7b847d);opacity:.78;padding-top:1px}
@media(max-width:760px){.scenarioSettingsCard339{padding:11px!important;gap:9px!important}.scenarioHead339{grid-template-columns:auto minmax(0,1fr);gap:8px}.scenarioHead339>em{grid-column:2;justify-self:start;min-width:0;font-size:10px}.scenarioChoices339{gap:5px}.scenarioChoice339{height:44px;padding:0 4px;gap:4px}.scenarioChoice339>span{font-size:15px}.scenarioChoice339>b{font-size:11.5px}.scenarioChoice339>i{right:3px;top:3px}.scenarioRows339{grid-template-columns:1fr}.scenarioRow339{min-height:46px;padding:0 10px}.scenarioRowLabel339>b{font-size:13px}.scenarioSwitch339{width:34px;height:20px}.scenarioSwitch339>i{width:16px;height:16px}.scenarioRow339.active .scenarioSwitch339>i{transform:translateX(14px)}}
@media(max-width:350px){.scenarioChoice339>span{display:none}.scenarioChoice339>b{font-size:11px}}

/* 3.3.10 — decoupled native draft settings */
.scenarioSettingsCard3310{display:grid!important;gap:10px!important;padding:14px!important;overflow:visible!important}
.scenarioHead3310{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;min-width:0}
.scenarioHead3310>span:nth-child(2){display:grid;min-width:0}.scenarioHead3310 small{color:var(--muted,#6d786f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scenarioHead3310>em{font-style:normal;font-size:11px;color:var(--ui-accent,var(--my-accent));white-space:nowrap}
.scenarioTiles3310{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.scenarioTile3310{position:relative;min-width:0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.scenarioTile3310>input{position:absolute;right:6px;top:6px;width:19px;height:19px;margin:0;appearance:none;-webkit-appearance:none;border:1.5px solid #cbd4ce;border-radius:50%;background:#fff;z-index:2;cursor:pointer}
.scenarioTile3310>input:checked{background:var(--ui-accent,var(--my-accent));border-color:var(--ui-accent,var(--my-accent))}
.scenarioTile3310>input:checked::after{content:"✓";display:grid;place-items:center;color:#fff;font-size:12px;font-weight:900;line-height:17px}
.scenarioTileVisual3310{min-height:52px;border:1px solid var(--line,#dce4de);border-radius:12px;background:var(--panel,#fff);display:flex;align-items:center;justify-content:center;gap:7px;padding:0 29px 0 8px;color:var(--ink,#253029);font-weight:800;transition:background .12s ease,border-color .12s ease,color .12s ease,transform .08s ease}
.scenarioTile3310>input:checked + .scenarioTileVisual3310{background:var(--ui-accent,var(--my-accent));border-color:var(--ui-accent,var(--my-accent));color:var(--ui-accent-contrast,#fff);box-shadow:0 3px 10px color-mix(in srgb,var(--ui-accent,var(--my-accent)) 18%,transparent)}
.scenarioTileVisual3310>span{font-size:17px}.scenarioTileVisual3310>b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scenarioTileVisual3310>i{display:none}
.scenarioTile3310:active .scenarioTileVisual3310{transform:scale(.99)}
.scenarioCore3310{font-size:11px;line-height:1.35;color:var(--muted,#6d786f);padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 5%,var(--panel,#fff));border:1px solid color-mix(in srgb,var(--ui-accent,var(--my-accent)) 12%,var(--line,#dfe5e0))}
.scenarioDetails3310{border:0}.scenarioDetails3310>summary{list-style:none;min-height:42px;border-radius:11px;background:var(--soft,#f1f3f1);display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;cursor:pointer;user-select:none;touch-action:manipulation}.scenarioDetails3310>summary::-webkit-details-marker{display:none}.scenarioDetails3310>summary span{transition:transform .15s ease}.scenarioDetails3310[open]>summary span{transform:rotate(180deg)}
.scenarioFine3310{display:grid;gap:14px;padding-top:11px}.scenarioFine3310 section{display:grid;gap:7px}.scenarioFine3310 h4{margin:0;font-size:13px}.scenarioFine3310 p{margin:0;color:var(--muted,#6d786f);font-size:11px}.scenarioRows3310{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.scenarioSwitchRow3310{position:relative;min-width:0;min-height:44px;padding:0 9px;border:1px solid var(--line,#dfe5e0);border-radius:10px;background:var(--panel,#fff);display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--ink,#253029);cursor:pointer;user-select:none}
.scenarioSwitchLabel3310{display:flex;align-items:center;gap:7px;min-width:0}.scenarioSwitchLabel3310>i{font-style:normal;width:18px;text-align:center;color:var(--ui-accent,var(--my-accent));font-size:14px}.scenarioSwitchLabel3310>b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scenarioSwitchRow3310>input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.scenarioSwitchVisual3310{flex:0 0 auto;width:34px;height:20px;border-radius:999px;background:#cfd5d1;padding:2px;display:flex;align-items:center;transition:background .12s ease}
.scenarioSwitchVisual3310>i{display:block;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transform:translateX(0);transition:transform .12s ease}
.scenarioSwitchRow3310>input:checked + .scenarioSwitchVisual3310{background:var(--ui-accent,var(--my-accent))}.scenarioSwitchRow3310>input:checked + .scenarioSwitchVisual3310>i{transform:translateX(14px)}
.scenarioSwitchRow3310:has(input:checked){border-color:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 42%,var(--line,#dfe5e0));background:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 5%,var(--panel,#fff))}
.scenarioApplyBar3310{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:2px}.scenarioApplyBar3310>small{color:var(--muted,#6d786f);font-size:10.5px;line-height:1.3}.scenarioApplyBar3310>button{min-width:132px}.scenarioApplyBar3310>button:disabled{opacity:.55;cursor:default}
.scenarioBuild3310{text-align:right;font-size:10px;color:var(--muted,#7b847d);opacity:.78}.scenarioHead3310>em[data-mode="dirty"]{color:#9a6500}.scenarioHead3310>em[data-mode="error"]{color:#b42318}
@media(max-width:760px){.scenarioSettingsCard3310{padding:11px!important;gap:9px!important}.scenarioHead3310{grid-template-columns:auto minmax(0,1fr);gap:8px}.scenarioHead3310>em{grid-column:2;justify-self:start;font-size:10px}.scenarioTiles3310{gap:5px}.scenarioTileVisual3310{min-height:50px;padding-left:5px;padding-right:26px;gap:4px}.scenarioTileVisual3310>span{font-size:15px}.scenarioTileVisual3310>b{font-size:11.5px}.scenarioTile3310>input{right:4px;top:4px;width:18px;height:18px}.scenarioRows3310{grid-template-columns:1fr}.scenarioSwitchRow3310{min-height:48px}.scenarioSwitchLabel3310>b{font-size:13px}.scenarioApplyBar3310{position:sticky;bottom:0;z-index:2;margin:0 -11px -11px;padding:9px 11px calc(9px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid #e3e8e4;backdrop-filter:blur(8px)}.scenarioApplyBar3310>small{display:none}.scenarioApplyBar3310>button{width:100%;min-height:46px}}


/* 3.3.11 — linked scenario presets */
.scenarioSettingsCard3311 [data-status-3311]{min-width:92px;text-align:right;font-size:12px;color:var(--ui-accent,#2f9464)}
.scenarioSettingsCard3311 .scenarioHead3310 small{display:block;white-space:normal}
.scenarioSettingsCard3311 .scenarioApplyBar3310 small{max-width:72ch}
@media (max-width:700px){
  .scenarioSettingsCard3311 [data-status-3311]{min-width:0;font-size:11px}
  .scenarioSettingsCard3311 .scenarioHead3310{align-items:flex-start}
}

/* 3.3.12 — linked scenario draft UI */
.scenarioSettingsCard3312{display:grid;gap:10px;padding:12px;border:1px solid var(--line,#dce4de);border-radius:16px;background:var(--panel,#fff)}
.scenario3312Head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center}.scenario3312Head>span:nth-child(2){display:grid}.scenario3312Head small{color:var(--muted,#69746d);font-size:11px}.scenario3312Head em{font-style:normal;font-size:11px;color:var(--ui-accent,var(--my-accent))}
.scenario3312Tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.scenario3312Tile{min-width:0;min-height:46px;border:1px solid var(--line,#dce4de);border-radius:12px;background:#fff;color:var(--ink,#253029);display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;cursor:pointer;font:inherit}.scenario3312Tile b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scenario3312Tile i{display:none}.scenario3312Tile.active{background:var(--ui-accent,var(--my-accent));border-color:var(--ui-accent,var(--my-accent));color:var(--ui-accent-contrast,#fff)}.scenario3312Tile.active i{display:inline;font-style:normal}
.scenario3312Core{border:1px solid color-mix(in srgb,var(--ui-accent,var(--my-accent)) 18%,#dce4de);border-radius:10px;padding:7px 9px;font-size:11px;background:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 5%,white)}
.scenario3312Details>summary{list-style:none;cursor:pointer;text-align:center;font-weight:800;background:#f3f5f3;border-radius:10px;padding:10px}.scenario3312Details>summary::-webkit-details-marker{display:none}.scenario3312Fine{display:grid;gap:14px;padding-top:10px}.scenario3312Fine section{display:grid;gap:7px}.scenario3312Fine h4,.scenario3312Fine p{margin:0}.scenario3312Fine p{color:var(--muted,#69746d);font-size:11px}.scenario3312Rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.scenario3312Row{min-width:0;min-height:40px;border:1px solid var(--line,#dce4de);border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;color:var(--ink,#253029);font:inherit;cursor:pointer}.scenario3312Row>span{min-width:0;display:flex;align-items:center;gap:7px}.scenario3312Row b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scenario3312Row.active{border-color:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 45%,#dce4de);background:color-mix(in srgb,var(--ui-accent,var(--my-accent)) 6%,white)}
.scenario3312Switch{flex:0 0 34px;width:34px;height:20px;border-radius:999px;background:#cfd5d1;padding:2px;display:flex;align-items:center;transition:background .12s ease}.scenario3312Switch>i{display:block;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transform:translateX(0);transition:transform .12s ease}.scenario3312Row.active .scenario3312Switch{background:var(--ui-accent,var(--my-accent))}.scenario3312Row.active .scenario3312Switch>i{transform:translateX(14px)}
.scenario3312Apply{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line,#e1e7e2);padding-top:10px}.scenario3312Apply small{color:var(--muted,#69746d);font-size:10px}.scenario3312Apply button{min-width:118px}.scenario3312Build{text-align:right;color:#9aa29d;font-size:9px}
@media(max-width:760px){.scenarioSettingsCard3312{padding:10px;gap:9px}.scenario3312Head{grid-template-columns:auto minmax(0,1fr)}.scenario3312Head em{grid-column:2}.scenario3312Tiles{gap:5px}.scenario3312Tile{padding:6px 4px;font-size:12px}.scenario3312Rows{grid-template-columns:1fr}.scenario3312Row{min-height:46px}.scenario3312Apply{position:sticky;bottom:0;z-index:3;margin:0 -10px -10px;padding:9px 10px calc(9px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);backdrop-filter:blur(8px)}.scenario3312Apply small{display:none}.scenario3312Apply button{width:100%;min-height:46px}}