:root {
  color-scheme: light;
  --ink: #1e2d35;
  --muted-ink: #51636a;
  --paper: #f4f6f5;
  --canvas: #e7ece9;
  --line: #d1dad6;
  --card: #ffffff;
  --planned: #557c74;
  --progress: #c4664d;
  --backlog: #a17846;
  --done: #8f9c8b;
  --danger: #a7342c;
  --shadow: 0 16px 38px rgba(37, 47, 44, 0.08);
  font-family: "Manrope", "Avenir Next", Avenir, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--canvas); }

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 90% 5%, rgba(132, 163, 154, 0.12), transparent 29rem), var(--canvas);
  font-size: 14px;
  line-height: 1.5;
}

.connection-status { position: fixed; top: 12px; left: 50%; z-index: 12; display: flex; max-width: calc(100vw - 24px); align-items: center; gap: 10px; padding: 8px 9px 8px 12px; border: 1px solid #d9c7ab; border-radius: 9px; color: #69522e; background: #fffaf0; font-size: 13px; font-weight: 750; transform: translateX(-50%); }
.connection-status[hidden] { display: none; }
.connection-status button { flex: 0 0 auto; padding: 5px 8px; border: 0; border-radius: 6px; color: #554221; background: #efe2c9; font-size: 12px; font-weight: 800; }
.connection-status button:hover { background: #e8d5b4; }
.file-drop-guide { position: fixed; right: 20px; bottom: 20px; z-index: 20; display: flex; max-width: min(360px, calc(100vw - 40px)); align-items: center; gap: 10px; padding: 10px 13px 10px 11px; border: 1px solid #9eb9b0; border-radius: 11px; color: #294c4b; background: #f6fbf8; pointer-events: none; }
.file-drop-guide[hidden] { display: none; }
.file-drop-guide svg { flex: 0 0 auto; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.file-drop-guide span { display: grid; gap: 1px; }
.file-drop-guide strong { font-size: 12px; line-height: 1.25; }
.file-drop-guide small { color: #5d7270; font-size: 12px; line-height: 1.3; }

button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .58; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid #195b66; outline-offset: 3px; }

.shell { max-width: 1680px; min-height: var(--app-visible-height, 100vh); margin: 0 auto; padding: 20px 28px 32px; }

.topbar { display: grid; grid-template-columns: auto minmax(150px, 260px) minmax(210px, 1fr) auto; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.topbar-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.notification-center { position: relative; }
.notification-trigger { position: relative; display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 0; border-radius: 8px; color: var(--muted-ink); background: transparent; transition: color .15s ease, background .15s ease; }
.notification-trigger:hover, .notification-trigger[aria-expanded="true"] { color: var(--ink); background: rgba(255,255,255,.58); }
.notification-trigger svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.notification-count { position: absolute; top: -3px; right: -4px; display: grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px; border-radius: 999px; color: #fffdf9; background: #b24b3d; box-shadow: 0 2px 7px rgba(91,37,30,.22); font-size: 9px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.notification-count[hidden], .notification-panel[hidden], .notification-read-all[hidden] { display: none; }
.notification-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 6; display: grid; width: min(370px, calc(100vw - 28px)); max-height: min(520px, calc(var(--app-visible-height, 100vh) - 92px)); grid-template-rows: auto minmax(0, 1fr); border-radius: 14px; background: #fffdf9; box-shadow: 0 18px 46px rgba(31,45,47,.2); overflow: hidden; }
.notification-panel-header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 14px 12px 16px; border-bottom: 1px solid #e2e7e4; }
.notification-panel-header h2 { margin: 0; font-size: 16px; letter-spacing: -.025em; }
.notification-panel-header > div { display: flex; align-items: center; gap: 5px; }
.notification-read-all { padding: 6px 7px; border: 0; border-radius: 6px; color: #3f675e; background: transparent; font-size: 11px; font-weight: 800; }
.notification-read-all:hover { color: var(--ink); background: #edf3f0; }
.notification-close { width: 30px; height: 30px; border-color: transparent; }
.notification-list { min-height: 0; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b7c5c0 transparent; list-style: none; }
.notification-list::-webkit-scrollbar { width: 8px; }
.notification-list::-webkit-scrollbar-track { background: transparent; }
.notification-list::-webkit-scrollbar-thumb { border: 2px solid #fffdf9; border-radius: 999px; background: #b7c5c0; }
.notification-item { border-bottom: 1px solid #e7ebe8; }
.notification-item:last-child { border-bottom: 0; }
.notification-item-button { position: relative; display: grid; width: 100%; min-width: 0; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 13px 16px; border: 0; color: var(--ink); background: transparent; text-align: left; transition: background .15s ease; }
.notification-item-button:hover { background: #f1f5f3; }
.notification-item.is-unread .notification-item-button { background: #edf5f1; }
.notification-item.is-unread .notification-item-button:hover { background: #e4efea; }
.notification-item.is-unread .notification-item-button::after { position: absolute; top: 18px; right: 12px; width: 6px; height: 6px; border-radius: 50%; background: #4f8977; content: ""; }
.notification-item.is-deadline-alert .notification-item-button { background: #fff3ed; }
.notification-item.is-deadline-alert .notification-item-button:hover { background: #fbe9df; }
.notification-item.is-deadline-alert .notification-item-button::after { background: #bd6047; }
.notification-item .avatar { margin-top: 1px; }
.notification-copy { min-width: 0; padding-right: 8px; }
.notification-meta { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 4px; margin-bottom: 3px; color: var(--muted-ink); font-size: 10px; }
.notification-meta strong { max-width: 160px; color: #314548; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-meta time { margin-left: auto; font-variant-numeric: tabular-nums; }
.notification-task-title { margin: 0; padding-right: 7px; font-size: 12px; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.notification-body { display: -webkit-box; margin: 3px 0 0; color: var(--muted-ink); font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.notification-project { display: block; margin-top: 5px; color: #6a797d; font-size: 10px; font-weight: 700; }
.notification-empty { padding: 30px 24px 34px; color: var(--muted-ink); text-align: center; }
.notification-empty strong { display: block; margin-bottom: 5px; color: #3b5054; font-size: 13px; }
.notification-empty span { font-size: 11px; line-height: 1.5; }
.brand { display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: var(--ink); font-size: 16px; font-weight: 800; letter-spacing: -0.04em; text-decoration: none; }
.brand-mark { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; color: #fbfaf6; background: var(--ink); }
.brand-mark svg, .new-task-button svg, .refresh-button svg, .icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.brand-mark svg { width: 15px; height: 15px; }
.day-context { min-width: 210px; text-align: center; }
.calendar-trigger { display: grid; gap: 1px; width: 100%; min-width: 0; padding: 5px 10px; border: 1px solid transparent; border-radius: 9px; color: var(--ink); background: transparent; text-align: center; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.calendar-trigger:hover { border-color: rgba(171, 190, 183, .72); background: rgba(255,255,255,.38); }
.calendar-trigger.is-active { border-color: rgba(133,163,153,.72); background: rgba(255,255,255,.56); }
.calendar-trigger:hover #day-label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
#day-label { font-size: 13px; font-weight: 800; letter-spacing: -.02em; }
.task-summary { color: var(--muted-ink); font-size: 12px; font-weight: 600; }
.new-task-button { justify-self: end; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 0; border-radius: 8px; color: #fbfaf6; background: var(--ink); font-size: 12px; font-weight: 800; box-shadow: 0 4px 12px rgba(31, 45, 47, 0.14); transition: transform .2s ease, box-shadow .2s ease; }
.user-button { display: inline-flex; align-items: center; gap: 7px; max-width: 180px; padding: 4px 7px 4px 4px; border: 0; border-radius: 8px; color: var(--muted-ink); background: transparent; font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-button:hover { color: var(--ink); background: rgba(255,255,255,.52); }
.new-task-button:hover { transform: translateY(-1px); box-shadow: 0 7px 15px rgba(31, 45, 47, 0.18); }
.workspace-picker { min-width: 0; }
.workspace-picker select { height: 32px; padding: 0 36px 0 9px; border-color: transparent; border-radius: 7px; color: #40575b; background-color: rgba(255,255,255,.5); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='m3 5 4 4 4-4' stroke='%2340575b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px; font-size: 12px; font-weight: 800; text-overflow: ellipsis; appearance: none; -webkit-appearance: none; }
.workspace-picker select:hover { border-color: #c7d3ce; background-color: rgba(255,255,255,.76); }
.inbox-button { display: inline-flex; align-items: center; gap: 6px; }
.inbox-button span { display: grid; min-width: 18px; height: 18px; place-items: center; padding: 0 5px; border-radius: 6px; color: #536561; background: rgba(255,255,255,.72); font-size: 10px; font-variant-numeric: tabular-nums; }
.inbox-button span[hidden] { display: none; }

.calendar-view { display: grid; gap: 12px; margin-top: 18px; animation: calendar-enter .28s cubic-bezier(.16, 1, .3, 1); }
.calendar-view[hidden] { display: none; }
@keyframes calendar-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.shell.is-calendar-open .project-switcher, .shell.is-calendar-open .project-create-panel, .shell.is-calendar-open .intro, .shell.is-calendar-open .composer, .shell.is-calendar-open .board { display: none; }
.calendar-view-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.calendar-title-block { display: flex; min-width: 0; align-items: baseline; gap: 9px; }
.calendar-title-block h1 { margin: 0; font-size: clamp(25px, 2.2vw, 30px); line-height: 1; letter-spacing: -.04em; }
.calendar-title-block p { margin: 0; color: var(--muted-ink); font-size: 12px; font-weight: 700; white-space: nowrap; }
.calendar-controls { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.calendar-navigation, .calendar-mode-switcher { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid #ccd8d3; border-radius: 9px; background: rgba(255,255,255,.5); }
.calendar-nav-button, .calendar-today-button, .calendar-mode-switcher button { min-height: 30px; border: 0; border-radius: 6px; color: #506366; background: transparent; font-size: 12px; font-weight: 800; transition: color .15s ease, background .15s ease, box-shadow .15s ease; }
.calendar-nav-button { width: 30px; font-size: 17px; line-height: 1; }
.calendar-today-button, .calendar-mode-switcher button { padding: 0 9px; }
.calendar-range-label { display: inline-flex; min-width: 118px; align-items: center; justify-content: center; padding: 0 5px; color: var(--ink); font-size: 12px; font-weight: 850; letter-spacing: -.015em; white-space: nowrap; }
.calendar-nav-button:hover, .calendar-today-button:hover, .calendar-mode-switcher button:hover { color: var(--ink); background: rgba(255,255,255,.8); }
.calendar-mode-switcher button[aria-pressed="true"] { color: var(--ink); background: #fffdf9; box-shadow: 0 1px 3px rgba(37,47,44,.12); }
.calendar-content { min-width: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #b7c5c0 transparent; }
.calendar-content::-webkit-scrollbar { height: 8px; }
.calendar-content::-webkit-scrollbar-thumb { border: 2px solid var(--canvas); border-radius: 999px; background: #b7c5c0; }
.calendar-week-grid { display: grid; min-width: 980px; grid-template-columns: repeat(7, minmax(140px, 1fr)); border-top: 1px solid #cbd8d3; border-left: 1px solid #cbd8d3; background: rgba(255,255,255,.27); }
.calendar-week-day { display: grid; min-height: 380px; align-content: start; gap: 10px; padding: 11px; border-right: 1px solid #cbd8d3; border-bottom: 1px solid #cbd8d3; }
.calendar-day-grid { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.calendar-day-view { min-height: clamp(360px, calc(var(--app-visible-height, 100vh) - 300px), 620px); padding: 16px; }
.calendar-day-view .calendar-day-heading > span { font-size: 12px; }
.calendar-day-view .calendar-day-heading time { font-size: 16px; }
.calendar-day-view .calendar-task-list { width: min(100%, 780px); gap: 8px; }
.calendar-day-view .calendar-task { padding: 10px; }
.calendar-week-day.is-today, .calendar-month-day.is-today { background: rgba(232,243,238,.82); }
.calendar-day-heading { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 0 9px; border: 0; border-bottom: 1px solid rgba(197,211,205,.8); color: var(--ink); background: transparent; text-align: left; }
.calendar-day-heading:hover { color: #245c62; }
.calendar-day-heading > span { color: var(--muted-ink); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.calendar-day-heading time { font-size: 12px; font-weight: 800; letter-spacing: -.01em; }
.calendar-task-list, .calendar-month-task-list { display: grid; align-content: start; gap: 5px; }
.calendar-task { display: grid; min-width: 0; grid-template-columns: 6px minmax(0, 1fr); align-items: start; gap: 7px; padding: 7px; border: 1px solid transparent; border-radius: 8px; color: var(--ink); background: rgba(255,255,255,.68); text-align: left; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.calendar-task:hover { border-color: #b6c9c1; background: #fffdf9; transform: translateY(-1px); }
.calendar-task-marker { width: 6px; height: 6px; margin-top: 5px; border-radius: 50%; background: var(--planned); }
.calendar-task[data-status="in_progress"] .calendar-task-marker { background: var(--progress); }
.calendar-task[data-status="backlog"] .calendar-task-marker { background: var(--backlog); }
.calendar-task[data-kind="routine"] .calendar-task-marker, .calendar-routine-marker { background: #3b6f86; }
.calendar-task[data-kind="routine"] { background: rgba(235, 244, 246, .82); }
.calendar-task[data-kind="routine"]:hover { border-color: #a9c5cc; background: #f8fcfc; }
.calendar-task[data-priority="high"] .calendar-task-marker { box-shadow: 0 0 0 2px rgba(183,69,56,.13); }
.calendar-task > span:last-child { display: grid; min-width: 0; gap: 2px; }
.calendar-task strong { overflow: hidden; font-size: 11px; font-weight: 800; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.calendar-task small { overflow: hidden; color: var(--muted-ink); font-size: 10px; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.calendar-day-detail { display: grid; gap: 20px; width: min(100%, 900px); padding: 22px; border: 1px solid #cbd8d3; border-radius: 14px; background: rgba(255,255,255,.42); }
.calendar-day-detail > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 18px; padding-bottom: 17px; border-bottom: 1px solid #cbd8d3; }
.calendar-day-detail > header h2 { margin: 0; font-size: 25px; letter-spacing: -.035em; }
.calendar-day-detail > header p { grid-column: 1 / 2; margin: 0; color: var(--muted-ink); font-size: 13px; font-weight: 650; }
.calendar-day-create { grid-row: 1 / span 2; grid-column: 2; align-self: center; min-height: 36px; padding: 0 12px; border: 1px solid #779c91; border-radius: 8px; color: #2e5e56; background: #edf5f1; font-size: 12px; font-weight: 800; }
.calendar-day-create:hover { color: #fffdf9; border-color: #315f58; background: #315f58; }
.calendar-day-sections { display: grid; gap: 18px; }
.calendar-day-sections > section { display: grid; gap: 8px; }
.calendar-day-sections h3 { margin: 0; color: #54716a; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.calendar-empty { margin: 2px 0 0; color: #84918d; font-size: 11px; font-weight: 650; }
.calendar-month { min-width: 980px; border-top: 1px solid #cbd8d3; border-left: 1px solid #cbd8d3; }
.calendar-month-weekdays, .calendar-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-month-weekdays span { padding: 8px 10px; border-right: 1px solid #cbd8d3; border-bottom: 1px solid #cbd8d3; color: var(--muted-ink); font-size: 10px; font-weight: 850; text-align: right; text-transform: uppercase; }
.calendar-month-day { min-height: clamp(88px, 12vh, 116px); border-right: 1px solid #cbd8d3; border-bottom: 1px solid #cbd8d3; }
.calendar-month-day { display: grid; align-content: start; gap: 6px; padding: 7px; background: rgba(255,255,255,.2); }
.calendar-month-day.is-openable { cursor: pointer; transition: background .16s ease; }
.calendar-month-day.is-openable:hover { background: rgba(249,252,250,.8); }
.calendar-month-day.is-outside-month { background: rgba(230,235,233,.68); }
.calendar-month-day.is-outside-month.is-openable:hover { background: rgba(236,242,239,.9); }
.calendar-month-day.is-today.is-openable:hover { background: rgba(230,242,237,.94); }
.calendar-month-day .calendar-day-heading { min-height: 20px; justify-content: flex-end; padding: 0 0 2px; border-bottom: 0; }
.calendar-month-day .calendar-day-heading > span { display: none; }
.calendar-month-day .calendar-day-heading time { font-size: 11px; }
.calendar-month-day.is-outside-month .calendar-day-heading time { color: #64776f; }
.calendar-month-day.is-outside-month .calendar-day-heading:hover time { color: #245c62; }
.calendar-month-day.is-today .calendar-day-heading time { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #fffdf9; background: #2b625b; box-shadow: 0 2px 5px rgba(43,98,91,.18); }
.calendar-month-task-list { gap: 4px; }
.calendar-task.is-compact { grid-template-columns: 6px minmax(0, 1fr); gap: 6px; padding: 6px 7px; border-radius: 7px; }
.calendar-task.is-compact .calendar-task-marker { width: 6px; height: 6px; margin-top: 4px; }
.calendar-task.is-compact strong { font-size: 10.5px; line-height: 1.3; }
.calendar-task.is-compact small { display: none; }
.calendar-more-tasks { justify-self: start; padding: 3px 0; border: 0; color: #466b62; background: transparent; font-size: 10px; font-weight: 800; }
.calendar-more-tasks:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.calendar-rhythm-summary { display: flex; width: 100%; min-width: 0; min-height: 23px; align-items: center; gap: 5px; padding: 3px 5px; border: 0; border-radius: 6px; color: #365e68; background: rgba(235,244,246,.54); font-size: 11px; font-weight: 750; text-align: left; cursor: pointer; }
.calendar-rhythm-summary:hover { background: rgba(216,233,237,.9); }
.calendar-rhythm-summary:focus-visible { outline: 2px solid #2b625b; outline-offset: 1px; }
.calendar-rhythm-summary-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-rhythm-summary-status { flex: 0 0 auto; margin-left: auto; font-variant-numeric: tabular-nums; }
.calendar-rhythm-summary-status-compact { display: none; }
.calendar-rhythm-summary-indicators { display: flex; flex: 0 0 auto; gap: 3px; margin-left: 1px; }
.calendar-rhythm-summary-indicator { width: 6px; height: 6px; border: 1px solid #547785; border-radius: 50%; }
.calendar-rhythm-summary-indicator.is-complete { background: #2b625b; border-color: #2b625b; }
@media (max-width: 620px) {
  .calendar-title-block { flex-wrap: wrap; row-gap: 6px; }
  .calendar-month-day .calendar-rhythm-summary { flex: 0 0 100%; min-height: 19px; justify-content: center; gap: 3px; padding: 2px 1px; }
  .calendar-month-day .calendar-rhythm-summary::before { content: ""; width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: #3b6f86; }
  .calendar-rhythm-summary-label, .calendar-rhythm-summary-status, .calendar-rhythm-summary-indicators { display: none; }
  .calendar-rhythm-summary-status-compact { display: inline; font-variant-numeric: tabular-nums; white-space: nowrap; }
}

.project-switcher { display: flex; min-height: 42px; align-items: center; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.project-tabs { display: flex; min-width: max-content; align-items: center; gap: 4px; padding: 5px 0; transition: background .15s ease; }
.project-tabs.is-drag-over { background: rgba(244, 250, 247, .76); }
.project-create-trigger { display: inline-flex; min-height: 30px; flex: 0 0 auto; align-items: center; gap: 5px; margin-left: 6px; padding: 5px 8px; border: 0; border-radius: 7px; color: #45635e; background: transparent; font-size: 12px; font-weight: 800; white-space: nowrap; transition: color .15s ease, background .15s ease; }
.project-create-trigger[hidden] { display: none; }
.project-create-trigger:hover { color: var(--ink); background: rgba(255,255,255,.56); }
.project-create-trigger svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.project-create-panel { display: grid; grid-template-columns: minmax(0, 420px); padding: 10px 0 4px; }
.project-create-panel[hidden] { display: none; }
.project-create-panel form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 10px; padding: 10px 12px; border: 1px solid #c9d6d0; border-radius: 10px; background: rgba(255,255,255,.5); box-shadow: 0 6px 15px rgba(37,47,44,.05); }
.project-create-panel form > p { grid-column: 1 / -1; margin: -2px 0 0; color: var(--muted-ink); font-size: 12px; }
.project-create-panel form > div { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.project-create-panel input { height: 38px; border-radius: 8px; font-size: 13px; font-weight: 700; }
.project-create-panel .save-button { min-height: 36px; padding: 8px 10px; border-radius: 8px; font-size: 12px; }
.project-tab { display: inline-flex; min-height: 30px; align-items: center; gap: 7px; padding: 5px 9px; border: 0; border-radius: 7px; color: var(--muted-ink); background: transparent; font-size: 12px; font-weight: 800; letter-spacing: -.01em; transition: color .15s ease, background .15s ease, box-shadow .15s ease; }
.project-tab[draggable="true"] { cursor: grab; user-select: none; }
.project-tab[draggable="true"]:active { cursor: grabbing; }
.project-tab.is-dragging { opacity: .3; }
.project-drag-placeholder { flex: 0 0 auto; min-width: 34px; min-height: 30px; border: 1px dashed rgba(25, 91, 102, .48); border-radius: 7px; background: rgba(217, 234, 225, .64); animation: placeholder-pulse .55s ease-in-out infinite alternate; }
.project-tab:hover { color: var(--ink); background: rgba(255, 255, 255, .52); }
.project-tab[aria-selected="true"] { color: var(--ink); background: var(--card); box-shadow: 0 1px 3px rgba(37, 47, 44, .1); }
.project-tab-count { display: grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px; border-radius: 5px; color: #5d6c6d; background: rgba(215, 226, 221, .74); font-size: 10px; font-variant-numeric: tabular-nums; }
.project-tab[aria-selected="true"] .project-tab-count { color: #3d625b; background: #dcebe4; }
.project-tab.is-task-drop-target { color: #244d45; background: #dcebe4; outline: 2px dashed #487e70; outline-offset: 2px; }
.task-project-move { display: grid; gap: 5px; padding: 8px 10px; border-top: 1px solid var(--line); color: var(--muted-ink); font-size: 12px; }
.task-project-move select { width: 100%; min-width: 0; }
.task-card.is-project-moving { opacity: .65; cursor: progress; }

.intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0 16px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: clamp(30px, 3.1vw, 42px); line-height: 1.05; letter-spacing: -.045em; }
.intro p { margin-bottom: 0; color: var(--muted-ink); font-size: 13px; }
.project-context { min-width: 0; flex: 1; }
.project-context-display { position: relative; display: inline-grid; max-width: min(760px, 100%); grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 6px 7px 7px 9px; margin: -6px 0 -7px -9px; border-radius: 10px; transition: background .16s ease, box-shadow .16s ease; }
.project-context-display[hidden] { display: none; }
.project-context-display.is-editable { cursor: text; }
.project-context-display.is-editable:hover, .project-context-display.is-editable:focus-within { background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px rgba(92,115,111,.12); }
.project-context-edit-button { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 8px; color: var(--muted-ink); background: rgba(255,255,255,.68); opacity: 0; transform: translateY(2px); transition: color .15s ease, background .15s ease, opacity .15s ease, transform .15s ease; }
.project-context-edit-button[hidden] { display: none; }
.project-context-display:hover .project-context-edit-button, .project-context-display:focus-within .project-context-edit-button { opacity: 1; transform: translateY(0); }
.project-context-edit-button:hover { color: var(--ink); background: #fffdf9; }
.project-context-edit-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.project-context-form { display: grid; width: min(760px, 100%); gap: 6px; padding: 0 0 2px; }
.project-context-form[hidden] { display: none; }
.project-title-input { height: auto; min-height: 45px; padding: 0 8px 3px; border: 0; border-bottom: 1px solid #9fb3ae; border-radius: 0; background: rgba(255,255,255,.36); font-size: clamp(30px, 3.1vw, 42px); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; }
.project-description-input { min-height: 38px; padding: 7px 8px; border-color: transparent; border-radius: 7px; background: rgba(255,255,255,.36); color: var(--muted-ink); font-size: 13px; line-height: 1.45; resize: vertical; }
.project-title-input:hover, .project-description-input:hover { background: rgba(255,255,255,.56); }
.project-title-input:focus, .project-description-input:focus { border-color: var(--planned); background: #fffdf9; outline: 3px solid rgba(25,91,102,.14); outline-offset: 1px; }
.project-context-actions { display: flex; justify-content: flex-end; align-items: center; gap: 4px; padding-top: 0; }
.project-context-actions > span { flex: 1; }
.project-context-actions > button { display: inline-flex; min-height: 32px; align-items: center; justify-content: center; padding: 0 10px; border-radius: 7px; font-size: 11px; font-weight: 800; line-height: 1; box-shadow: none; transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease; }
.project-context-actions .project-context-cancel { border: 1px solid transparent; color: #60716f; background: transparent; }
.project-context-actions .project-context-cancel:hover { color: var(--ink); background: rgba(255,255,255,.48); }
.project-context-actions .project-context-save { border: 1px solid #bdcbc6; color: #304a49; background: rgba(255,255,255,.72); }
.project-context-actions .project-context-save:hover { border-color: #8fa8a1; color: var(--ink); background: #fffdf9; }
.project-context-actions .project-context-save:active { transform: translateY(1px); }
.project-context-save:disabled { cursor: wait; opacity: .62; }
.project-context-delete { color: #9a4b42; }
.project-context-delete:hover { color: #7f362e; background: rgba(181,79,66,.08); }
.project-delete-panel { display: grid; width: min(480px, 100%); gap: 9px; padding: 12px 13px; border: 1px solid #e0c7c1; border-radius: 10px; color: #503f3b; background: #fffaf7; }
.project-delete-panel[hidden], .project-delete-permanent[hidden] { display: none; }
.project-delete-title { margin: 0; color: var(--ink); font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.project-delete-copy { margin: -3px 0 0; color: #6e5d58; font-size: 12px; line-height: 1.45; }
.project-delete-panel select, .project-delete-panel input { height: 38px; border-radius: 8px; font-size: 12px; }
.project-delete-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.project-delete-actions .save-button, .project-delete-confirm { min-height: 36px; padding: 8px 10px; border-radius: 8px; font-size: 12px; }
.project-delete-reveal { justify-self: start; padding: 4px 0; border: 0; color: #9a4b42; background: transparent; font-size: 12px; font-weight: 800; }
.project-delete-reveal:hover { color: #7f362e; text-decoration: underline; text-underline-offset: 3px; }
.project-delete-permanent { display: grid; gap: 8px; padding-top: 2px; }
.project-delete-confirm { border: 0; color: #fffaf7; background: var(--danger); }
.project-delete-confirm:hover { background: #8d2922; }
.board-tools { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 7px; }
.my-tasks-filter, .workspace-update-button { display: inline-flex; min-height: 32px; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; color: var(--muted-ink); background: transparent; font-size: 12px; font-weight: 800; white-space: nowrap; transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.my-tasks-filter:hover { color: var(--ink); background: rgba(255,255,255,.5); }
.my-tasks-filter[aria-pressed="true"] { border-color: #bfd0ca; color: #315950; background: #fffdf9; box-shadow: 0 1px 3px rgba(37,47,44,.09); }
.board-sort-menu { position: relative; }
.board-sort-trigger { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 8px; color: var(--muted-ink); background: transparent; transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.board-sort-trigger:hover, .board-sort-trigger[aria-expanded="true"] { color: var(--ink); background: rgba(255,255,255,.56); }
.board-sort-trigger.is-active { border-color: #bfd0ca; color: #315950; background: #fffdf9; box-shadow: 0 1px 3px rgba(37,47,44,.09); }
.board-sort-trigger svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.85; }
.board-sort-popover { position: absolute; top: calc(100% + 8px); left: 0; z-index: 7; display: grid; width: 242px; gap: 10px; padding: 12px; border: 1px solid #d7e0dc; border-radius: 11px; color: var(--ink); background: #fffdf9; box-shadow: 0 16px 38px rgba(37,47,44,.17); animation: board-sort-enter .16s cubic-bezier(.16, 1, .3, 1); }
.board-sort-popover[hidden] { display: none; }
@keyframes board-sort-enter { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.board-sort-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 1px 3px 0; }
.board-sort-heading strong { font-size: 12px; letter-spacing: -.015em; }
.board-sort-heading span { color: #71817d; font-size: 10px; font-weight: 750; }
.board-sort-options, .board-sort-actions { display: grid; gap: 2px; }
.board-sort-options { padding-bottom: 9px; border-bottom: 1px solid #e4e9e6; }
.board-sort-options button, .board-sort-actions button { display: flex; min-height: 31px; align-items: center; justify-content: space-between; width: 100%; padding: 6px 8px; border: 0; border-radius: 7px; color: #405357; background: transparent; font-size: 11px; font-weight: 750; text-align: left; transition: color .15s ease, background .15s ease; }
.board-sort-options button:hover, .board-sort-actions button:hover { color: var(--ink); background: #eef3f0; }
.board-sort-options button[aria-pressed="true"] { color: #2d5d53; background: #e5f0eb; }
.board-sort-options button[aria-pressed="true"]::after { color: #4b7f72; content: "✓"; font-weight: 900; }
.board-sort-actions button:last-child { margin-top: 2px; color: #667874; }
.board-sort-actions .inbox-button span { display: grid; min-width: 18px; height: 18px; place-items: center; padding: 0 5px; border-radius: 6px; color: #536561; background: rgba(220,232,226,.76); font-size: 10px; font-variant-numeric: tabular-nums; }
.board-sort-actions .inbox-button span[hidden] { display: none; }
.workspace-update-button { gap: 7px; border-color: #c1d6cd; color: #315d52; background: #edf6f1; }
.workspace-update-button[hidden] { display: none; }
.workspace-update-button:hover { border-color: #92b3a5; color: #244c43; background: #e3f1ea; }
.workspace-update-button > span { width: 7px; height: 7px; border-radius: 50%; background: #4f8977; box-shadow: 0 0 0 3px rgba(79,137,119,.12); }
.refresh-button, .text-button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 3px; border: 0; color: var(--muted-ink); background: transparent; font-size: 12px; font-weight: 700; }
.refresh-button:hover, .text-button:hover { color: var(--ink); }
.refresh-button svg { display: block; width: 16px; height: 16px; flex: 0 0 auto; transform: translateY(-.25px); }

.composer { margin: 0 0 18px; padding: 18px 20px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow); animation: open-composer .26s cubic-bezier(.16, 1, .3, 1); }
@keyframes open-composer { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
.composer-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.composer h2 { margin: 0; font-size: 18px; letter-spacing: -.035em; }
.icon-button { display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--muted-ink); background: transparent; }
.icon-button:hover { color: var(--ink); border-color: var(--ink); }
.icon-button svg { width: 16px; height: 16px; }
.composer form { display: grid; gap: 16px; }
label > span { display: block; margin-bottom: 6px; color: var(--muted-ink); font-size: 12px; font-weight: 800; letter-spacing: .01em; }
label em { font-style: normal; font-weight: 500; }
.assignee-field > .field-label { display: block; margin-bottom: 6px; color: var(--muted-ink); font-size: 12px; font-weight: 800; letter-spacing: .01em; }
.assignee-field em { font-style: normal; font-weight: 500; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fffdf9; }
input, select { height: 42px; padding: 0 11px; }
textarea { min-height: 60px; padding: 10px 11px; resize: vertical; }
.title-field input { height: 45px; font-size: 16px; font-weight: 600; }
.form-options { display: grid; grid-template-columns: repeat(4, minmax(145px, 1fr)); gap: 14px; max-width: 980px; }
.task-period-field { display: grid; grid-column: 1 / -1; gap: 6px; }
.task-period-field > .field-label, .task-period-editor legend { color: var(--muted-ink); font-size: 12px; font-weight: 800; }
.task-period-inputs, .task-period-editor > div { display: grid; grid-template-columns: 1.4fr .8fr 1.4fr .8fr; gap: 8px; }
.task-period-inputs label, .task-period-editor label { display: grid; gap: 4px; }
.task-period-inputs label > span, .task-period-editor label > span { color: #60716c; font-size: 11px; font-weight: 800; }
.task-period-field small, .task-period-editor small, .routine-form > label > small { color: #60716c; font-size: 12px; font-weight: 650; line-height: 1.4; }
.assignee-picker { position: relative; min-width: 0; }
.assignee-picker-trigger { display: flex; width: 100%; height: 42px; align-items: center; justify-content: space-between; gap: 9px; padding: 0 10px 0 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fffdf9; font-size: 13px; font-weight: 600; text-align: left; }
.assignee-picker-trigger:hover { border-color: #aebfba; }
.assignee-picker-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignee-picker-trigger svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: transform .16s ease; }
.assignee-picker-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.assignee-picker-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 8; width: max-content; min-width: 100%; max-width: min(330px, calc(100vw - 40px)); max-height: 236px; padding: 6px; overflow: auto; border: 1px solid #cbd7d2; border-radius: 10px; background: #fffdf9; box-shadow: 0 7px 14px rgba(31, 45, 47, .14); scrollbar-width: thin; }
.assignee-picker-menu[hidden] { display: none; }
.assignee-option { display: grid; min-width: 190px; grid-template-columns: 17px 25px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.assignee-option:hover { background: #edf3f0; }
.assignee-option input { width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; accent-color: #315e55; }
.assignee-option .avatar { width: 25px; height: 25px; }
.assignee-option-name { min-width: 0; color: var(--ink); font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.assignee-picker-empty { margin: 0; padding: 8px; color: var(--muted-ink); font-size: 12px; }
.composer-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 2px; }
.composer-project { margin: -5px 0 0; color: var(--muted-ink); font-size: 12px; font-weight: 700; }
.composer-project strong { color: var(--ink); }
.voice-task { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 13px; border: 1px solid #d9e5df; border-radius: 10px; background: #f3f8f5; }
.voice-task strong { display: block; color: var(--ink); font-size: 13px; letter-spacing: -.01em; }
.voice-task p { max-width: 470px; margin: 3px 0 0; color: var(--muted-ink); font-size: 12px; font-weight: 600; line-height: 1.4; }
.voice-task-button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px; min-width: 150px; padding: 9px 11px; border: 1px solid #b9cbc3; border-radius: 9px; color: #315254; background: #fff; font: inherit; font-size: 12px; font-weight: 800; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.voice-task-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.voice-task-button:hover:not(:disabled) { border-color: #5b7b78; color: var(--ink); }
.voice-task-button.is-recording { border-color: #b94d46; color: #9e3530; background: #fff4f2; }
.voice-task-button.is-working { opacity: .72; cursor: wait; }
.voice-task-button:disabled { cursor: not-allowed; }
.save-button { padding: 11px 16px; border: 0; border-radius: 10px; color: #fbfaf6; background: var(--ink); font-size: 14px; font-weight: 800; }
.save-button:hover { background: #314548; }

.board { display: grid; grid-template-columns: repeat(5, minmax(280px, 1fr)); gap: 14px; align-items: start; padding-bottom: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-color: #92aaa3 transparent; scrollbar-width: thin; }
.board::-webkit-scrollbar { height: 10px; }
.board::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 99px; background: #92aaa3; background-clip: padding-box; }
.board::-webkit-scrollbar-thumb:hover { background-color: #698780; }
.lane { display: flex; min-width: 0; min-height: 540px; flex-direction: column; padding: 11px; border-radius: 12px; background: rgba(255, 255, 255, .42); scroll-snap-align: start; transition: background .16s ease, box-shadow .16s ease; }
.lane.is-drag-over { background: rgba(244, 250, 247, .9); box-shadow: inset 0 0 0 1px rgba(25, 91, 102, .24); }
.lane-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lane-heading > div { display: flex; align-items: center; gap: 7px; min-width: 0; }
.lane-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--line); }
.lane-planned .lane-dot { background: var(--planned); }
.lane-progress .lane-dot { background: var(--progress); }
.lane-backlog .lane-dot { background: var(--backlog); }
.lane-done .lane-dot { background: var(--done); }
.lane-rhythm { border: 1px solid #c9ddd4; background: #edf5f1; }
.lane-rhythm .lane-heading { min-height: 42px; margin: -3px -3px 0; padding: 8px 9px; border-radius: 9px; background: #dfeee6; }
.lane-rhythm .lane-dot { width: 9px; height: 9px; background: #315f58; }
.lane-rhythm h2 { color: #214c4e; font-size: 17px; }
.lane-rhythm .task-count { color: #eff8f4; background: #315f58; }
.lane-rhythm .lane-description { min-height: 0; margin: 7px 3px 11px; color: #42645f; }
.lane-rhythm .lane-add-button { justify-content: center; width: 100%; margin-top: 12px; padding: 8px; border: 1px solid #bdd4c9; border-radius: 9px; background: #f8fcfa; }
.lane-rhythm .lane-add-button:hover { border-color: #719a88; color: #214c4e; background: #fff; }
.lane h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.025em; }
.task-count { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 6px; color: var(--muted-ink); background: rgba(255, 255, 255, .72); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lane-description { min-height: 30px; margin: 3px 0 9px 14px; color: var(--muted-ink); font-size: 12px; line-height: 1.35; }
.task-list { display: grid; min-height: 72px; flex: 1; align-content: start; grid-auto-rows: max-content; gap: 8px; }
.empty-state { margin: 0; padding: 14px 5px; color: #52676b; font-size: 12px; text-align: center; }
.lane-add-button { display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin-top: 10px; padding: 7px 5px 5px; border: 0; color: var(--muted-ink); background: transparent; font-size: 12px; font-weight: 800; }
.lane-add-button:hover { color: var(--ink); }
.lane-add-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }

.rhythm-list { display: grid; min-height: 72px; flex: 1; align-content: start; gap: 8px; }
.rhythm-card { display: grid; gap: 9px; padding: 12px; border: 1px solid #d4e4dc; border-radius: 12px; background: #fdfefd; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.rhythm-card:hover { border-color: #aecbbb; background: #fff; }
.rhythm-card.is-complete { border-color: #94c2a6; background: #eaf6ee; }
.rhythm-card.is-complete:not(.is-alternative-complete) .rhythm-title-button { color: #365f4f; text-decoration: line-through; text-decoration-color: rgba(54, 95, 79, .45); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.rhythm-card.is-complete .rhythm-mode { color: #2f604f; background: #d6ebdd; }
.rhythm-card.is-active { border-color: #5f9385; background: #f5fbf7; }
.rhythm-card-header { display: flex; align-items: start; justify-content: space-between; gap: 7px; }
.rhythm-title-button { min-width: 0; padding: 0; border: 0; color: var(--ink); background: transparent; font: inherit; font-size: 14px; font-weight: 800; line-height: 1.3; letter-spacing: -.025em; overflow-wrap: anywhere; text-align: left; cursor: pointer; }
.rhythm-title-button:hover { color: #1f625d; text-decoration: underline; text-decoration-color: rgba(31, 98, 93, .35); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.rhythm-title-button:focus-visible { outline: 2px solid #315f58; outline-offset: 3px; border-radius: 3px; }
.rhythm-mode { flex: 0 0 auto; padding: 3px 5px; border-radius: 5px; color: #3e5f64; background: #e6efed; font-size: 12px; font-weight: 800; line-height: 1.2; }
.rhythm-note { margin: -4px 0 0; color: var(--muted-ink); font-size: 12px; line-height: 1.42; overflow-wrap: anywhere; }
.rhythm-reading { display: flex; align-items: baseline; justify-content: space-between; gap: 7px; padding-top: 8px; border-top: 1px solid #e1e9e5; }
.rhythm-reading strong { color: #284d50; font-size: 17px; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.rhythm-reading span { color: #4f6663; font-size: 12px; font-weight: 750; text-align: right; }
.rhythm-progress { width: 100%; height: 5px; overflow: hidden; border-radius: 99px; background: #d7e4df; }
.rhythm-progress > span { display: block; height: 100%; border-radius: inherit; background: #3b7568; }
.rhythm-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.rhythm-actions button, .rhythm-counter button { min-height: 31px; padding: 6px 8px; border: 0; border-radius: 7px; color: #345d59; background: #e7f1ed; font-size: 12px; font-weight: 800; }
.rhythm-actions button:hover, .rhythm-counter button:hover { color: #fffdf9; background: #315f58; }
.rhythm-actions button:disabled { cursor: not-allowed; color: #677d78; background: #e7efeb; opacity: 1; }
.rhythm-actions .rhythm-timer-control { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.rhythm-control-icon { width: 15px; height: 15px; flex: 0 0 auto; fill: currentColor; }
.rhythm-timer-control.is-pause .rhythm-control-icon { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2.4; }
.rhythm-actions .rhythm-reset { border: 1px solid #c98a78; color: #76554a; background: #f6ece7; }
.rhythm-actions .rhythm-reset:hover { border-color: #9a5842; color: #fffdf9; background: #9a5842; }
.rhythm-actions .rhythm-reset:only-child { grid-column: 1 / -1; }
.rhythm-counter { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.rhythm-counter input { min-width: 0; height: 31px; padding: 5px 7px; border: 1px solid #ccd9d4; border-radius: 7px; color: var(--ink); background: #fff; font-size: 12px; font-weight: 750; }
.rhythm-counter-steps { display: grid; gap: 5px; }
.rhythm-counter-step { display: flex; min-height: 38px; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #d2e2da; border-radius: 8px; color: #405b58; background: #fff; cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.rhythm-counter-step:hover { border-color: #a8c4ba; background: #eef6f1; }
.rhythm-counter-step input { width: 16px; height: 16px; min-height: 0; align-self: center; margin: 0; accent-color: #2d775c; }
.rhythm-counter-step > span { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 8px; margin: 0; color: inherit; font: inherit; letter-spacing: normal; }
.rhythm-counter-step strong { overflow: hidden; color: inherit; font-size: 12px; font-weight: 800; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.rhythm-counter-step small { display: block; flex: 0 0 auto; color: #68807a; font-size: 12px; font-weight: 750; line-height: 1.2; }
.rhythm-counter-step.is-complete { border-color: #78ad8d; color: #285a4f; background: #e4f3e9; }
.rhythm-counter-step.is-complete small { color: inherit; }
.rhythm-counter-step.is-complete strong, .rhythm-counter-step.is-complete small { text-decoration: line-through; text-decoration-color: rgba(40, 90, 79, .52); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.rhythm-alternative { display: grid; gap: 5px; }
.rhythm-alternative-divider { display: flex; align-items: center; gap: 7px; color: #718780; font-size: 12px; font-weight: 800; }
.rhythm-alternative-divider::before, .rhythm-alternative-divider::after { content: ""; height: 1px; flex: 1; background: #d8e5df; }
.rhythm-alternative-option { display: flex; min-height: 42px; align-items: center; gap: 8px; padding: 7px 9px; border: 1px dashed #a9c9ba; border-radius: 8px; color: #355f54; background: #f5faf7; cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.rhythm-alternative-option:hover { border-color: #6fa088; background: #eaf5ee; }
.rhythm-alternative-option input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: #2d775c; }
.rhythm-alternative-option > span { display: grid; min-width: 0; gap: 1px; }
.rhythm-alternative-option strong { overflow: hidden; font-size: 12px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.rhythm-alternative-option small { color: #68807a; font-size: 12px; font-weight: 700; line-height: 1.25; }
.rhythm-alternative-option.is-complete { border-style: solid; border-color: #78ad8d; color: #285a4f; background: #e4f3e9; }
.rhythm-alternative-option.is-complete strong { text-decoration: line-through; text-decoration-color: rgba(40, 90, 79, .52); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.rhythm-alternative-option.is-complete small { color: inherit; }
.rhythm-alternative-option:has(input:disabled) { cursor: not-allowed; opacity: .68; }
.rhythm-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #4f6663; font-size: 12px; font-weight: 750; }
.rhythm-delete { padding: 0; border: 0; color: #58706b; background: transparent; font-size: 12px; font-weight: 750; }
.rhythm-delete:hover { color: var(--danger); text-decoration: underline; text-underline-offset: 3px; }
.routine-form { gap: 13px; }
.routine-form > label, .routine-date-range > label, .routine-schedule-kind, .routine-interval { display: grid; gap: 5px; }
.routine-form > label > span, .routine-date-range span, .routine-schedule legend, .routine-schedule-kind > span, .routine-interval > span { color: var(--muted-ink); font-size: 12px; font-weight: 800; }
.routine-form em, .routine-date-range em { font-style: normal; font-weight: 650; }
.routine-form input, .routine-form select, .routine-form textarea { width: 100%; border: 1px solid #c5d2cd; border-radius: 8px; color: var(--ink); background: #fff; }
.routine-form input, .routine-form select { height: 38px; padding: 0 9px; }
.routine-form textarea { padding: 8px 9px; resize: vertical; }
.routine-schedule { display: grid; gap: 10px; padding: 0; margin: 0; border: 0; }
.routine-schedule legend { padding: 0; }
.routine-weekdays { display: grid; gap: 6px; }
.routine-weekdays > p, .routine-date-picker-summary, .routine-interval small { margin: 0; color: #55706b; font-size: 12px; font-weight: 650; line-height: 1.4; }
.routine-weekdays > div { display: flex; flex-wrap: wrap; gap: 5px; }
.routine-weekdays label { display: inline-flex; min-height: 28px; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 6px; color: #496260; background: #edf3f0; font-size: 12px; font-weight: 800; }
.routine-weekdays input { width: 14px; height: 14px; min-height: 0; margin: 0; accent-color: #315f58; }
.routine-interval { max-width: 210px; }
.routine-date-picker { display: grid; gap: 7px; padding: 9px; border-radius: 10px; background: #edf4f1; }
.routine-date-picker-header { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; gap: 6px; }
.routine-date-picker-header strong { color: #345652; font-size: 13px; text-align: center; }
.routine-date-picker .icon-button { width: 32px; height: 32px; border-color: #ccddd7; background: #f9fcfa; }
.routine-mini-weekdays, .routine-mini-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.routine-mini-weekdays span { padding: 2px 0; color: #5d7470; font-size: 11px; font-weight: 800; text-align: center; }
.routine-mini-calendar > span { min-height: 30px; }
.routine-mini-day { position: relative; display: grid; min-height: 30px; place-items: center; cursor: pointer; border-radius: 6px; color: #405b58; background: #f9fcfa; font-size: 12px; font-weight: 800; }
.routine-mini-day:hover { background: #dcebe5; }
.routine-mini-day:focus-within { outline: 2px solid #315f58; outline-offset: 1px; }
.routine-mini-day input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; opacity: 0; }
.routine-mini-day:has(input:checked) { color: #fffdf9; background: #315f58; }
.routine-mini-day:has(input:disabled) { cursor: not-allowed; opacity: .62; }
.routine-mini-day.is-today { box-shadow: inset 0 0 0 1px #7da096; }
.routine-date-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.routine-edit-lock { margin: 0; padding: 9px 10px; border-radius: 8px; color: #6b5447; background: #f8eee8; font-size: 12px; font-weight: 700; line-height: 1.42; }
.routine-reset-dialog { width: min(460px, calc(100vw - 28px)); }
.routine-reset-note { margin: 0; color: #516966; font-size: 13px; line-height: 1.45; }
.routine-reset-confirm { background: #9a5842; }
.routine-reset-confirm:hover { background: #794534; }
.routine-manual-dialog { width: min(520px, calc(100vw - 28px)); }
.routine-manual-form { display: grid; gap: 14px; }
.routine-manual-form > label { display: grid; gap: 5px; }
.routine-manual-form > label > span, .routine-manual-fields span { color: var(--muted-ink); font-size: 12px; font-weight: 800; }
.routine-manual-form em { font-style: normal; font-weight: 650; }
.routine-manual-form textarea, .routine-manual-fields input { width: 100%; border: 1px solid #c5d2cd; border-radius: 8px; color: var(--ink); background: #fff; }
.routine-manual-form textarea { padding: 8px 9px; resize: vertical; }
.routine-manual-fields { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(78px, .75fr)); gap: 8px; }
.routine-manual-fields label { display: grid; gap: 5px; }
.routine-manual-fields input { height: 38px; padding: 0 9px; }
.routine-manual-history { display: grid; gap: 8px; padding: 10px; border-radius: 9px; background: #eef5f1; }
.routine-manual-history > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.routine-manual-history h3, .routine-manual-history p { margin: 0; }
.routine-manual-history h3 { color: #355b54; font-size: 12px; font-weight: 800; }
.routine-manual-history p { color: #5d7470; font-size: 12px; font-weight: 700; text-align: right; }
.routine-manual-history ol { display: grid; gap: 5px; padding: 0; margin: 0; list-style: none; }
.routine-manual-history li { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 9px; padding: 7px 8px; border: 1px solid #d5e3dc; border-radius: 7px; background: #fff; }
.routine-manual-history li > div { display: grid; min-width: 0; gap: 1px; }
.routine-manual-history strong { color: #355b54; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.routine-manual-history li span { overflow: hidden; color: #637974; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.routine-manual-history .routine-manual-empty { display: block; color: #647b75; font-size: 12px; font-weight: 650; }
.routine-manual-delete { flex: 0 0 auto; padding: 0; border: 0; color: #865d50; background: transparent; font-size: 12px; font-weight: 800; }
.routine-manual-delete:hover { color: #9a5842; text-decoration: underline; text-underline-offset: 3px; }

.task-card { position: relative; display: grid; align-self: start; align-content: start; width: 100%; gap: 8px; padding: 10px 11px 9px; border-radius: 10px; background: var(--card); box-shadow: 0 1px 3px rgba(37, 47, 44, .12); transition: box-shadow .16s ease, transform .16s ease; }
.task-card:focus-visible { outline: 3px solid #195b66; outline-offset: 3px; }
@media (hover: hover) { .task-card:hover { box-shadow: 0 8px 18px rgba(37, 47, 44, .13); transform: translateY(-1px); } .task-card:hover .card-edit-button, .task-card:focus-within .card-edit-button { opacity: 1; pointer-events: auto; } }
.task-card[draggable="true"] { cursor: grab; touch-action: pan-y; }
.task-card[draggable="true"]:active { cursor: grabbing; }
.task-card.is-dragging { opacity: .3; }
.drag-placeholder { min-height: 84px; border: 1px dashed rgba(25, 91, 102, .5); border-radius: 10px; background: rgba(217, 234, 225, .56); box-shadow: inset 0 1px 2px rgba(37, 47, 44, .05); animation: placeholder-pulse .55s ease-in-out infinite alternate; }
@keyframes placeholder-pulse { from { opacity: .66; } to { opacity: 1; } }
.task-footer, .task-meta { display: flex; align-items: center; }
.task-footer { justify-content: space-between; gap: 10px; }
.task-meta { min-width: 0; gap: 8px; }
.task-card-people { display: flex; align-items: center; gap: 5px; }
.assignee-stack { display: flex; align-items: center; padding-left: 6px; }
.assignee-stack[hidden] { display: none; }
.assignee-stack .avatar { position: relative; margin-left: -6px; border: 2px solid #fffdf9; }
.assignee-overflow { display: grid; width: 23px; height: 23px; margin-left: -6px; place-items: center; border: 2px solid #fffdf9; border-radius: 50%; color: #36504d; background: #dfeae5; font-size: 8px; font-weight: 800; }
.avatar { display: inline-grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid #d3ddd8; border-radius: 50%; color: #385852; background: #e6f0eb; font-size: 10px; font-weight: 800; letter-spacing: -.02em; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-small { width: 23px; height: 23px; font-size: 9px; }
.avatar[hidden] { display: none; }
.priority { display: inline-flex; align-items: center; min-height: 23px; width: fit-content; padding: 3px 7px; border: 1px solid currentColor; border-radius: 7px; background: #fffdf9; font-size: 11px; font-weight: 800; letter-spacing: -.01em; line-height: 1; }
.priority[hidden] { display: none; }
.priority[data-level="high"] { color: #a33b31; background: #fff0ed; }
.priority[data-level="normal"] { color: #9a6a1f; background: #fff6e3; }
.priority[data-level="low"] { color: #36756d; background: #eaf6f2; }
.card-edit-button { position: absolute; top: 9px; right: 9px; display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 1px solid #d8e0dc; border-radius: 8px; color: #405357; background: #fffdf9; box-shadow: 0 3px 9px rgba(37, 47, 44, .1); opacity: 0; pointer-events: none; transition: opacity .15s ease, color .15s ease, border-color .15s ease; }
.card-edit-button:hover { border-color: #adc0b9; color: var(--ink); }
.card-edit-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.task-card h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.28; letter-spacing: -.025em; overflow-wrap: anywhere; }
.task-label-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: -1px; }
.task-label-chip { display: inline-flex; min-height: 20px; align-items: center; max-width: 100%; padding: 2px 7px; border: 1px solid transparent; border-radius: 6px; color: #355a56; background: #ecf4f1; font-size: 10px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.task-label-chip[data-color="sky"] { color: #345d7b; background: #edf5fa; }
.task-label-chip[data-color="amber"] { color: #7f5b2e; background: #fff6e7; }
.task-label-chip[data-color="berry"] { color: #864752; background: #fff0f2; }
.task-label-chip[data-color="violet"] { color: #5d5684; background: #f3f1fb; }
.task-label-chip[data-color="slate"] { color: #56636a; background: #eff2f3; }
.task-label-chip:is(button) { cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.task-label-chip:is(button):hover, .task-label-chip:is(button).is-selected { border-color: currentColor; background: #fffdf9; }
.task-label-chip:is(button):focus-visible { outline: 2px solid #195b66; outline-offset: 2px; }
.lane-done .task-card h3 { color: #68756e; text-decoration: line-through; text-decoration-thickness: 1px; }
.task-note { margin: -2px 0 0; color: var(--muted-ink); font-size: 12px; line-height: 1.38; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-note[hidden] { display: none; }
.task-footer { padding-top: 7px; border-top: 1px solid #e0e6e2; }
.task-footer time { color: var(--muted-ink); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.task-footer time.overdue { color: var(--danger); }
.checklist-summary, .comment-summary, .card-menu-button { display: inline-grid; place-items: center; border: 0; color: #466362; background: transparent; font-size: 12px; font-weight: 800; }
.checklist-summary { grid-template-columns: 26px auto; gap: 5px; min-width: 60px; min-height: 24px; padding: 2px 6px; border-radius: 6px; background: #e1ece9; font-variant-numeric: tabular-nums; }
.checklist-summary[hidden] { display: none; }
.checklist-summary:hover { color: #294b4d; background: #d4e5df; }
.checklist-progress-track { display: block; width: 26px; height: 4px; overflow: hidden; border-radius: 4px; background: #b9cfca; }
.checklist-progress-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: #467a6e; }
.comment-summary { grid-template-columns: auto auto; gap: 3px; min-width: 23px; font-variant-numeric: tabular-nums; }
.comment-summary[hidden] { display: none; }
.comment-summary svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.task-action-menu { position: relative; }
.card-menu-button { width: 30px; height: 30px; padding: 0; border-radius: 7px; }
.card-menu-button:hover, .card-menu-button[aria-expanded="true"] { color: var(--ink); background: #edf1ee; }
.card-menu-button svg { width: 17px; height: 17px; fill: currentColor; }
.task-menu-popover { position: absolute; right: 0; bottom: calc(100% + 7px); z-index: 3; display: grid; min-width: 154px; padding: 5px; border-radius: 9px; background: #fffdf9; box-shadow: 0 10px 24px rgba(37, 47, 44, .18); }
.task-menu-popover[hidden] { display: none; }
.task-menu-title { margin: 2px 8px 4px; color: var(--muted-ink); font-size: 11px; font-weight: 800; letter-spacing: .01em; }
.task-move-button { padding: 7px 8px; border: 0; border-radius: 6px; color: #405357; background: transparent; font-size: 12px; font-weight: 700; text-align: left; }
.task-move-button:hover, .task-move-button:focus-visible { color: var(--ink); background: #edf1ee; outline: 0; }
.task-delete-button { margin-top: 4px; padding-top: 9px; border-top: 1px solid #e4e8e5; border-radius: 0 0 6px 6px; color: var(--danger); }
.task-delete-button:hover, .task-delete-button:focus-visible { color: #8d2822; background: #fff0ed; }
.task-delete-button:disabled { opacity: .55; cursor: wait; }
.task-dialog { display: grid; width: min(1040px, calc(100vw - 32px)); height: min(760px, calc(var(--app-visible-height, 100vh) - 32px)); max-height: min(760px, calc(var(--app-visible-height, 100vh) - 32px)); grid-template-rows: auto minmax(0, 1fr); padding: 0; border: 0; border-radius: 14px; color: var(--ink); background: #fffdf9; box-shadow: 0 22px 70px rgba(23, 35, 37, .25); overflow: hidden; }
.task-dialog:not([open]) { display: none; }
.task-dialog::backdrop { background: rgba(25, 40, 39, .32); }
.task-dialog[open] { animation: task-dialog-open .2s cubic-bezier(.16, 1, .3, 1); }
@keyframes task-dialog-open { from { opacity: 0; transform: translateY(7px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.task-dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding: 22px 22px 14px; border-bottom: 1px solid #e0e6e2; }
.task-dialog-actions { display: flex; gap: 7px; }
.task-dialog-title-block { min-width: 0; flex: 1 1 auto; }
.task-dialog-eyebrow { margin: 0 0 4px; color: var(--muted-ink); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.task-dialog h2 { max-width: none; margin: 0; font-size: 22px; line-height: 1.18; letter-spacing: -.035em; overflow-wrap: anywhere; }
.task-dialog-title-input { display: block; width: 100%; max-width: none; min-height: 31px; margin: 0; padding: 0 0 5px; border: 0; border-bottom: 1px solid #b8c8c1; border-radius: 0; color: var(--ink); background: transparent; font-size: 22px; font-weight: 800; line-height: 1.18; letter-spacing: -.035em; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; overflow-y: hidden; resize: none; }
.task-dialog-title-input:focus-visible { outline: 0; border-bottom-color: #195b66; box-shadow: 0 1px 0 #195b66; }
.task-dialog .icon-button { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; }
.task-dialog-columns { display: grid; min-height: 0; grid-template-columns: minmax(0, 1.14fr) minmax(330px, .86fr); }
.task-detail-panel { min-width: 0; min-height: 0; padding-bottom: 24px; overflow-y: auto; }
.task-activity-panel { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr); padding: 22px 12px 22px 22px; border-left: 1px solid #e0e6e2; background: #f5f7f6; overflow: hidden; }
.task-assignment { display: flex; align-items: center; gap: 10px; padding: 15px 22px 0; }
.task-assignment > span { color: var(--muted-ink); font-size: 11px; font-weight: 800; }
.task-assignment .assignee-picker { width: min(310px, 100%); }
.task-assignment .assignee-picker-trigger { height: 32px; border-radius: 7px; font-size: 12px; }
.task-dialog-note { margin: 0; padding: 16px 22px 0; color: var(--muted-ink); font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.task-dialog-note.is-empty { color: #8d9c95; font-style: italic; }
.task-details-form { display: grid; gap: 13px; padding: 18px 22px 2px; }
.task-details-form[hidden] { display: none; }
.task-details-form label > span { font-size: 11px; }
.task-details-form textarea { min-height: 74px; font-size: 13px; }
.task-label-editor { display: grid; gap: 7px; }
.task-label-editor > span { color: var(--muted-ink); font-size: 11px; font-weight: 800; }
.task-label-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.task-label-empty { margin: 0; color: var(--muted-ink); font-size: 12px; line-height: 1.4; }
.task-label-create-form { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 7px; align-items: center; }
.task-label-create-form input, .task-label-create-form select { min-height: 34px; height: 34px; border-radius: 7px; font-size: 12px; }
.task-label-create-form .text-button { justify-self: start; min-height: 32px; padding: 0 4px; }
.detail-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.task-period-editor { display: grid; gap: 8px; padding: 0; margin: 0; border: 0; }
.task-period-editor legend { padding: 0; }
.task-details-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.task-details-actions .save-button { padding: 9px 13px; font-size: 12px; }
.checklist-panel { padding: 20px 22px 0; }
.task-links-panel { padding: 20px 22px 0; }
.task-attachments-panel { padding: 20px 22px 0; }
.task-dependencies-panel { padding: 20px 22px 0; }
.task-links { display: grid; gap: 6px; padding: 0; margin: 0 0 10px; list-style: none; }
.task-link-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid #e0e6e2; border-radius: 9px; background: #fffdf9; }
.task-link-row a { min-width: 0; color: #315f5b; font-size: 13px; font-weight: 800; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-link-row a:hover { text-decoration: underline; text-underline-offset: 3px; }
.task-link-form { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr) auto; gap: 8px; }
.task-link-form label { min-width: 0; }
.task-link-form input { width: 100%; height: 38px; font-size: 13px; }
.task-attachments { display: grid; gap: 6px; padding: 0; margin: 0 0 10px; list-style: none; }
.task-attachment-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid #e0e6e2; border-radius: 9px; background: #fffdf9; }
.task-attachment-open { min-width: 0; padding: 1px 0; border: 0; color: #315f5b; background: transparent; font-size: 13px; font-weight: 800; text-align: left; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-attachment-open:hover { text-decoration: underline; text-underline-offset: 3px; }
.task-attachment-meta { flex: 0 0 auto; color: var(--muted-ink); font-size: 11px; font-weight: 700; }
.task-attachment-form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px; border: 1px dashed transparent; border-radius: 10px; transition: border-color .16s ease, background .16s ease; }
.task-attachment-form.is-file-drop-target { border-color: #6e9b90; background: #edf6f1; }
.task-attachment-form.is-uploading { opacity: .72; }
.task-attachment-form input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.attachment-file-label { display: inline-flex; min-height: 36px; align-items: center; padding: 7px 9px; border: 1px solid #c8d5d0; border-radius: 8px; color: #3d625a; background: #fffdf9; font-size: 12px; font-weight: 800; cursor: pointer; }
.attachment-file-label:hover { border-color: #8fa8a0; color: var(--ink); background: #edf3f0; }
.attachment-hint { min-width: 0; color: var(--muted-ink); font-size: 11px; font-weight: 650; line-height: 1.35; }
.task-card.is-file-drop-target { outline: 2px solid #5e9486; outline-offset: 3px; box-shadow: 0 8px 18px rgba(56,104,93,.16); }
.task-dependencies { display: grid; gap: 6px; padding: 0; margin: 0 0 10px; list-style: none; }
.task-dependency-row { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid #e0e6e2; border-radius: 9px; background: #fffdf9; }
.task-dependency-row.is-resolved { background: #f3f7f4; }
.task-dependency-state { padding: 3px 6px; border-radius: 5px; color: #875d27; background: #f3e8d3; font-size: 10px; font-weight: 800; }
.task-dependency-row.is-resolved .task-dependency-state { color: #426b59; background: #dfede5; }
.task-dependency-open { min-width: 0; padding: 2px 0; border: 0; color: #314548; background: transparent; font-size: 13px; font-weight: 800; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-dependency-open:hover { color: #315f5b; text-decoration: underline; text-underline-offset: 3px; }
.task-dependency-open:disabled { color: #83908b; text-decoration: none; cursor: default; }
.task-dependency-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.task-dependency-form label { min-width: 0; }
.task-dependency-form select { width: 100%; height: 38px; font-size: 13px; }
.blocked-summary { padding: 3px 6px; border-radius: 5px; color: #875d27; background: #f3e8d3; font-size: 10px; font-weight: 800; white-space: nowrap; }
.checklist-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.checklist-heading h3 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.checklist-heading p { margin: 2px 0 0; color: var(--muted-ink); font-size: 12px; font-weight: 700; }
.checklist-items { display: grid; gap: 6px; padding: 0; margin: 0 0 14px; list-style: none; }
.checklist-empty { padding: 10px 0 4px; color: var(--muted-ink); font-size: 13px; }
.checklist-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #edf1ee; }
.checklist-row > label { display: flex; min-width: 0; align-items: start; gap: 9px; color: #314548; font-size: 13px; font-weight: 600; }
.checklist-row > label input { width: 17px; height: 17px; flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--planned); }
.checklist-row > label input:checked + .checklist-item-copy .checklist-item-text { color: #68756e; text-decoration: line-through; }
.checklist-item-copy { display: grid; min-width: 0; gap: 2px; }
.checklist-item-text { overflow-wrap: anywhere; }
.checklist-item-meta { color: #74847f; font-size: 12px; font-weight: 700; line-height: 1.25; }
.checklist-row-actions { display: inline-flex; align-items: center; gap: 8px; }
.checklist-details, .checklist-promote { padding: 4px 2px; border: 0; color: #426b66; background: transparent; font-size: 12px; font-weight: 800; }
.checklist-details:hover, .checklist-details[aria-expanded="true"], .checklist-promote:hover, .checklist-promote[aria-expanded="true"] { color: #1f595b; }
.checklist-details:focus-visible, .checklist-promote:focus-visible { outline: 2px solid #1f6b74; outline-offset: 2px; border-radius: 3px; }
.checklist-item-details { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(132px, .55fr); gap: 8px 10px; padding: 9px 0 2px 26px; }
.checklist-item-details > label { display: grid; gap: 4px; color: #5a6d6c; font-size: 12px; font-weight: 800; letter-spacing: .01em; }
.checklist-item-details select, .checklist-item-details input { width: 100%; height: 34px; border-radius: 7px; font-size: 12px; }
.checklist-item-details-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; align-items: center; gap: 8px; }
.checklist-item-details-actions .text-button { min-height: 30px; padding: 5px 7px; font-size: 12px; }
.checklist-item-details-submit { min-height: 30px; padding: 6px 9px; border: 1px solid #2f5152; border-radius: 7px; color: #fffdf9; background: #2f5152; font-size: 12px; font-weight: 800; }
.checklist-item-details-submit:hover { background: #1f3e41; }
.checklist-item-details-submit:disabled { opacity: .58; cursor: wait; }
.checklist-promote-form { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 10px; padding: 10px 0 2px 26px; }
.checklist-promote-form > input { width: 100%; height: 36px; border-radius: 7px; font-size: 13px; }
.checklist-promote-option { display: inline-flex; grid-column: 1 / -1; align-items: center; gap: 7px; width: fit-content; color: var(--muted-ink); font-size: 11px; font-weight: 700; }
.checklist-promote-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--planned); }
.checklist-promote-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; align-items: center; gap: 8px; }
.checklist-promote-actions .text-button { min-height: 30px; padding: 5px 7px; font-size: 11px; }
.checklist-promote-submit { min-height: 30px; padding: 6px 9px; border: 1px solid #2f5152; border-radius: 7px; color: #fffdf9; background: #2f5152; font-size: 11px; font-weight: 800; }
.checklist-promote-submit:hover { background: #1f3e41; }
.checklist-promote-submit:disabled { opacity: .58; cursor: wait; }
.checklist-remove { padding: 4px 2px; border: 0; color: #7a6059; background: transparent; font-size: 12px; font-weight: 700; }
.checklist-remove:hover { color: var(--danger); }
.checklist-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.checklist-form input { height: 38px; font-size: 13px; }
.checklist-add-button { padding: 0 12px; border: 0; border-radius: 9px; color: #fffdf9; background: var(--ink); font-size: 12px; font-weight: 800; }
.checklist-add-button:hover { background: #314548; }
.activity-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 10px 12px 0; }
.activity-heading h3 { margin: 0; font-size: 16px; letter-spacing: -.025em; }
.activity-heading p { margin: 2px 0 0; color: var(--muted-ink); font-size: 12px; font-weight: 700; }
.watch-button { flex: 0 0 auto; padding: 6px 8px; border: 1px solid #d3ddd8; border-radius: 7px; color: #4c6262; background: transparent; font-size: 11px; font-weight: 800; }
.watch-button:hover { border-color: #aebfba; background: #eef3f0; }
.watch-button[aria-pressed="true"] { border-color: #b9d0c7; color: #315f5b; background: #e5efea; }
.activity-list { display: grid; min-height: 0; align-content: start; gap: 13px; padding: 16px 10px 0 0; margin: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #b7c5c0 transparent; list-style: none; }
.activity-list::-webkit-scrollbar { width: 8px; }
.activity-list::-webkit-scrollbar-track { background: transparent; }
.activity-list::-webkit-scrollbar-thumb { border: 2px solid #f5f7f6; border-radius: 999px; background: #b7c5c0; }
.activity-empty { padding: 13px 0; color: var(--muted-ink); font-size: 13px; }
.activity-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.activity-content { min-width: 0; }
.activity-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin: 1px 0 5px; color: var(--muted-ink); font-size: 11px; font-weight: 700; }
.activity-meta strong { color: #314548; font-size: 12px; }
.activity-item-comment .activity-body { padding: 10px 11px; border-radius: 9px; color: #314548; background: #fffdf9; box-shadow: 0 1px 2px rgba(37,47,44,.1); font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.activity-item-event { grid-template-columns: minmax(0, 1fr); }
.activity-item-event .activity-meta { margin: 0; }
.activity-item-event .activity-body { color: #617279; font-size: 12px; }
.comments-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.comments-heading h3 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.comments-heading p { margin: 2px 0 0; color: var(--muted-ink); font-size: 12px; font-weight: 700; }
.comments-list { display: grid; gap: 8px; padding: 0; margin: 0 0 13px; list-style: none; }
.comments-empty { padding: 6px 0 4px; color: var(--muted-ink); font-size: 13px; }
.comment-item { padding: 10px 11px; border-radius: 9px; background: #f2f5f3; }
.comment-item p { margin: 0 0 4px; color: #314548; font-size: 13px; line-height: 1.42; white-space: pre-wrap; }
.comment-item time { color: var(--muted-ink); font-size: 11px; font-weight: 700; }
.comment-form { display: grid; gap: 8px; margin-right: 10px; }
.comment-form textarea { min-height: 58px; font-size: 13px; }
.comment-add-button { justify-self: end; padding: 8px 11px; border: 0; border-radius: 9px; color: #fffdf9; background: var(--ink); font-size: 12px; font-weight: 800; }
.comment-add-button:hover { background: #314548; }
.team-dialog { width: min(680px, calc(100vw - 28px)); max-height: calc(var(--app-visible-height, 100vh) - 32px); padding: 0; border: 0; border-radius: 14px; color: var(--ink); background: #fffdf9; box-shadow: 0 22px 70px rgba(23,35,37,.25); overflow: hidden; }
.team-dialog::backdrop { background: rgba(25,40,39,.32); }
.team-dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid #e0e6e2; }
.team-dialog h2 { margin: 0; font-size: 21px; letter-spacing: -.035em; }
.team-dialog .icon-button { width: 34px; height: 34px; border-radius: 9px; }
.team-dialog-body { display: grid; max-height: calc(var(--app-visible-height, 100vh) - 104px); gap: 22px; padding: 20px 22px 22px; overflow-y: auto; }
.team-dialog-body h3 { margin: 0 0 9px; font-size: 15px; letter-spacing: -.02em; }
.member-list, .invite-list { display: grid; gap: 7px; padding: 0; margin: 0; list-style: none; }
.member-item { border-radius: 9px; background: #f2f5f3; overflow: hidden; }
.member-row, .invite-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px; border-radius: 9px; background: #f2f5f3; }
.member-row { background: transparent; }
.member-row > div, .invite-row > div { display: flex; min-width: 0; align-items: center; gap: 8px; }
.member-row strong, .invite-row strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.member-row small, .invite-row small { display: block; color: var(--muted-ink); font-size: 11px; font-weight: 700; }
.avatar-upload-button { min-height: 30px; flex: 0 0 auto; padding: 5px 9px; border: 1px solid #d3ddd8; border-radius: 7px; color: #405d5b; background: #fffdf9; font-size: 12px; font-weight: 800; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.avatar-upload-button:hover { color: var(--ink); border-color: #aebfba; background: #f8faf8; }
.avatar-upload-button:disabled { cursor: wait; color: #788885; background: #edf1ee; }
.avatar-upload-hint { margin: 7px 8px 0; color: var(--muted-ink); font-size: 12px; font-weight: 650; }
.member-manage-button { min-height: 30px; flex: 0 0 auto; padding: 5px 8px; border: 0; border-radius: 7px; color: #46635f; background: transparent; font-size: 11px; font-weight: 800; }
.member-manage-button:hover, .member-manage-button[aria-expanded="true"] { color: var(--ink); background: rgba(255,255,255,.75); }
.member-editor { display: grid; gap: 11px; padding: 12px; border-top: 1px solid #dde5e1; background: rgba(255,255,255,.46); }
.member-editor[hidden] { display: none; }
.member-editor-fields { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: start; gap: 10px; }
.member-editor-fields > label { min-width: 0; }
.member-editor-fields select { height: 38px; border-radius: 8px; font-size: 12px; }
.member-projects { display: grid; gap: 7px; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; }
.member-projects legend { padding: 0 5px; color: var(--muted-ink); font-size: 11px; font-weight: 800; }
.member-projects label, .member-project-list label { display: flex; min-width: 0; align-items: center; gap: 8px; color: #405357; font-size: 12px; font-weight: 700; }
.member-projects label > span, .member-project-list label > span { min-width: 0; margin: 0; color: inherit; font: inherit; overflow-wrap: anywhere; }
.member-projects input { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; accent-color: var(--planned); }
.member-project-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; padding-top: 4px; }
.member-project-list[hidden] { display: none; }
.member-projects:disabled { opacity: .55; }
.member-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.member-remove-button, .member-save-button { min-height: 34px; padding: 6px 9px; border-radius: 7px; font-size: 11px; font-weight: 800; }
.member-remove-button { border: 0; color: #87473f; background: transparent; }
.member-remove-button:hover { color: #722d27; background: #f9e9e5; }
.member-save-button { border: 0; color: #fffdf9; background: var(--ink); }
.member-save-button:hover { background: #314548; }
.team-section-heading { display: flex; justify-content: space-between; gap: 12px; }
.team-section-heading p { margin: -5px 0 11px; color: var(--muted-ink); font-size: 12px; }
.invite-form { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 140px; align-items: end; gap: 10px; }
.invite-form .save-button { grid-column: 1 / -1; justify-self: start; height: 40px; padding: 0 13px; font-size: 12px; }
.invite-projects { grid-column: 1 / -1; display: grid; gap: 7px; min-width: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; }
.invite-projects legend { padding: 0 5px; color: var(--muted-ink); font-size: 11px; font-weight: 800; }
.invite-projects label, #invite-project-list label { display: flex; align-items: center; gap: 8px; color: #405357; font-size: 12px; font-weight: 700; }
.invite-projects input { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; accent-color: var(--planned); }
#invite-project-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; padding-top: 4px; }
#invite-project-list[hidden] { display: none; }
.invite-result { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border-radius: 9px; color: #3c5954; background: #e5efea; font-size: 12px; font-weight: 700; }
.invite-result[hidden] { display: none; }
.invite-result p { margin: 0; }
.invite-link-field { display: grid; gap: 5px; min-width: 0; }
.invite-link-field span { color: #536561; font-size: 11px; font-weight: 800; }
.invite-link-field input { width: 100%; height: 36px; min-width: 0; padding: 0 9px; border: 1px solid rgba(41,79,80,.24); border-radius: 7px; color: #294f50; background: rgba(255,255,255,.72); font-size: 12px; }
.invite-link-field input:focus-visible { outline: 2px solid #195b66; outline-offset: 2px; }
.invite-link-warning { padding-top: 8px; border-top: 1px solid rgba(61,98,91,.18); color: #536561; font-weight: 600; line-height: 1.45; }
.invite-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.copy-invite-link { padding: 7px 9px; border: 1px solid rgba(41,79,80,.28); border-radius: 7px; color: #294f50; background: rgba(255,255,255,.52); font-size: 12px; font-weight: 800; text-align: left; }
.copy-invite-link:hover { background: rgba(255,255,255,.82); }
.invite-revoke { flex: 0 0 auto; padding: 5px 7px; border: 0; color: #7a4a45; background: transparent; font-size: 11px; font-weight: 800; }
.account-section { padding-top: 18px; border-top: 1px solid #e0e6e2; }
.account-email { margin: -4px 0 10px; color: var(--muted-ink); font-size: 12px; font-weight: 700; }
.telegram-settings { display: grid; gap: 11px; }
.telegram-settings[hidden] { display: none; }
.telegram-settings-heading { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.telegram-settings-heading h3 { margin-bottom: 2px; }
.telegram-settings-heading p, .telegram-settings-copy { margin: 0; color: var(--muted-ink); font-size: 12px; font-weight: 650; }
.integration-state { flex: 0 0 auto; padding: 4px 7px; border-radius: 6px; color: #5d6c6d; background: #edf1ef; font-size: 11px; font-weight: 800; }
.integration-state.is-connected { color: #315e53; background: #deeee7; }
.telegram-setup-form { display: grid; gap: 7px; padding-top: 2px; }
.telegram-setup-form[hidden] { display: none; }
.telegram-setup-form label span { color: #405357; font-size: 12px; font-weight: 800; }
.telegram-token-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.telegram-token-row input { min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fffdf9; font: inherit; font-size: 13px; }
.telegram-token-row input:focus-visible { outline: 2px solid #195b66; outline-offset: 2px; }
.telegram-token-row .save-button { min-height: 38px; padding: 7px 11px; font-size: 12px; }
.telegram-setup-form small { color: var(--muted-ink); font-size: 12px; font-weight: 650; line-height: 1.45; }
.telegram-connect-actions, .telegram-connected-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.telegram-connect-button, .telegram-open-link { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; padding: 7px 11px; border-radius: 8px; font-size: 12px; text-decoration: none; }
.telegram-open-link[hidden], .telegram-preferences[hidden], .telegram-connected-actions[hidden] { display: none; }
.telegram-preferences { display: grid; gap: 8px; min-width: 0; padding: 10px 0 0; border: 0; border-top: 1px solid #e4e9e6; }
.telegram-preferences legend { padding: 0 9px 0 0; color: var(--muted-ink); font-size: 12px; font-weight: 800; }
.telegram-preferences label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; color: #405357; cursor: pointer; }
.telegram-preferences input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--planned); }
.telegram-preferences strong, .telegram-preferences small { display: block; }
.telegram-preferences strong { font-size: 12px; }
.telegram-preferences small { margin-top: 1px; color: var(--muted-ink); font-size: 12px; font-weight: 650; }
.telegram-connected-actions .invite-revoke { margin-left: auto; }
.telegram-delivery-status { margin: 0; color: var(--muted-ink); font-size: 11px; font-weight: 650; }
.telegram-delivery-status[hidden] { display: none; }
.data-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.template-list { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; }
.template-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 9px; background: #f2f5f3; }
.template-item div { min-width: 0; }
.template-item strong, .template-item small { display: block; }
.template-item strong { font-size: 13px; }
.template-item small { margin-top: 2px; color: var(--muted-ink); font-size: 11px; font-weight: 700; }
.template-empty { color: var(--muted-ink); font-size: 12px; }
.data-import-button { display: inline-flex; align-items: center; cursor: pointer; }
.restore-preview { display: grid; gap: 10px; margin-top: 12px; padding: 13px; border: 1px solid #d9e1dd; border-radius: 10px; background: #f4f7f5; }
.restore-preview[hidden] { display: none; }
.restore-preview p { margin: 0; color: #405357; font-size: 12px; line-height: 1.45; }
.restore-preview .restore-warning { color: #74443d; }
.restore-preview label { display: grid; gap: 6px; }
.restore-preview label span { color: var(--muted-ink); font-size: 11px; font-weight: 800; }
.restore-preview input { height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fffdf9; font: inherit; }
.restore-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.restore-actions .save-button { height: 36px; padding: 0 11px; font-size: 12px; }
.email-change-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.email-change-form .text-button { height: 42px; padding: 0 8px; }
.logout-button { justify-self: start; color: #7a4a45; }
.account-delete-form, #account-delete-successors { display: grid; gap: 12px; }
.account-delete-form[hidden] { display: none; }
.account-delete-form input, .account-delete-form select { font-size: 16px; }
.legal-page { max-width: 760px; margin: 0 auto; padding: 32px 22px 64px; line-height: 1.65; overflow-wrap: anywhere; }
.legal-page h1 { font-size: clamp(26px, 6vw, 38px); line-height: 1.2; }
.legal-page h2 { margin-top: 28px; font-size: 22px; }
.legal-page a, .account-legal-links a { color: var(--ink); text-underline-offset: 3px; }
.account-legal-links { display: flex; flex-wrap: wrap; gap: 12px; font-size: 14px; }
.auth-shell { display: grid; min-height: var(--app-visible-height, 100vh); place-items: center; padding: 24px; }
.auth-shell[hidden] { display: none; }
.auth-card { width: min(440px, 100%); padding: 28px; border-radius: 15px; background: #fffdf9; box-shadow: var(--shadow); }
.auth-card .brand { margin-bottom: 34px; }
.auth-copy { margin-bottom: 24px; }
.auth-copy h1 { margin: 0 0 8px; font-size: 29px; line-height: 1.1; letter-spacing: -.045em; }
.auth-copy p { margin: 0; color: var(--muted-ink); font-size: 13px; }
.auth-form { display: grid; gap: 15px; }
.auth-form[hidden] { display: none; }
.auth-submit { justify-content: center; margin-top: 4px; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 18px; }
.auth-link { justify-self: start; padding: 3px 0; border: 0; color: #466b62; background: transparent; font-size: 12px; font-weight: 800; }
.auth-link:hover { color: var(--ink); }
.verification-recipient { color: var(--ink); font-size: 15px; line-height: 1.5; }
.verification-recipient strong { overflow-wrap: anywhere; }
.verification-explainer, .verification-hint { margin: 0; color: var(--muted-ink); font-size: 12px; line-height: 1.55; }
.verification-hint { padding-top: 11px; border-top: 1px solid #e0e6e2; }
.verification-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 9px 16px; }
.verification-feedback { margin: 0; color: #315d52; font-size: 12px; font-weight: 700; }
.verification-feedback[hidden] { display: none; }
.invite-summary { display: grid; gap: 0; margin: -4px 0 0; padding: 5px 11px; border-radius: 9px; background: #edf3f0; }
.invite-summary > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(61,98,91,.12); }
.invite-summary > div:last-child { border-bottom: 0; }
.invite-summary dt { color: #61716f; font-size: 11px; font-weight: 700; }
.invite-summary dd { min-width: 0; margin: 0; color: #304a49; font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }
.invite-account-note { margin: -3px 0 0; color: var(--muted-ink); font-size: 12px; line-height: 1.5; }
.auth-form input[readonly] { color: #5b6b6f; background: #f2f4f2; cursor: default; }
.form-error { margin: 14px 0 0; padding: 9px 10px; border-radius: 8px; color: #8c281f; background: #fff1ed; font-size: 12px; font-weight: 700; }
.form-error[hidden] { display: none; }
.form-success { margin: 14px 0 0; padding: 9px 10px; border-radius: 8px; color: #315d52; background: #e9f3ee; font-size: 12px; font-weight: 700; }
.form-success[hidden] { display: none; }
.utility-icon-button { display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 0; border-radius: 8px; color: var(--muted-ink); background: transparent; transition: color .15s ease, background .15s ease; }
.utility-icon-button:hover { color: var(--ink); background: rgba(255,255,255,.58); }
.utility-icon-button svg, .search-field svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.finder-dialog { width: min(760px, calc(100vw - 28px)); max-height: min(760px, calc(var(--app-visible-height, 100vh) - 28px)); padding: 0; border: 0; border-radius: 14px; color: var(--ink); background: #fffdf9; box-shadow: 0 22px 70px rgba(23,35,37,.25); overflow: hidden; }
.finder-dialog:not([open]) { display: none; }
.finder-dialog::backdrop { background: rgba(25,40,39,.32); }
.finder-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid #e0e6e2; }
.finder-header h2 { margin: 0; font-size: 21px; line-height: 1.2; letter-spacing: -.035em; }
.finder-header p { margin: 4px 0 0; color: var(--muted-ink); font-size: 12px; }
.finder-header .icon-button { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; }
.finder-body { display: grid; max-height: calc(var(--app-visible-height, 100vh) - 112px); gap: 14px; padding: 18px 22px 22px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b7c5c0 transparent; }
.finder-body::-webkit-scrollbar, .finder-results::-webkit-scrollbar { width: 8px; }
.finder-body::-webkit-scrollbar-thumb, .finder-results::-webkit-scrollbar-thumb { border: 2px solid #fffdf9; border-radius: 999px; background: #b7c5c0; }
.search-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 0 13px; border: 1px solid #bfcfc8; border-radius: 10px; color: #46615e; background: #fff; }
.search-field:focus-within { border-color: #195b66; box-shadow: 0 0 0 2px rgba(25,91,102,.12); }
.search-field input { width: 100%; height: 48px; padding: 0; border: 0; outline: 0; background: transparent; font-size: 15px; }
.finder-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.finder-filters select { height: 38px; min-width: 0; padding: 0 28px 0 9px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.finder-summary { margin: 0; color: var(--muted-ink); font-size: 12px; font-weight: 700; }
.finder-results { display: grid; min-height: 0; gap: 6px; padding: 0; margin: 0; list-style: none; }
#search-results { max-height: min(460px, calc(var(--app-visible-height, 100vh) - 280px)); overflow-y: auto; }
.finder-result { min-width: 0; border-bottom: 1px solid #e8edea; }
.finder-result:last-child { border-bottom: 0; }
.finder-result > button { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 8px; border: 0; border-radius: 8px; color: var(--ink); background: transparent; text-align: left; }
.finder-result > button:hover, .finder-result > button:focus-visible { background: #edf3f0; }
.finder-result > button > span:first-child, .archive-task-copy { display: grid; min-width: 0; gap: 3px; }
.finder-result strong, .archive-task-copy strong { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.finder-result small, .archive-task-copy small { color: var(--muted-ink); font-size: 11px; font-weight: 700; }
.finder-priority { flex: 0 0 auto; padding: 4px 7px; border: 1px solid currentColor; border-radius: 6px; font-size: 10px; font-weight: 800; }
.finder-priority[data-level="high"] { color: #a33a31; background: #fff4f1; }
.finder-priority[data-level="normal"] { color: #8a632d; background: #fff8e9; }
.finder-priority[data-level="low"] { color: #4f7068; background: #eff6f3; }
.today-groups, .archive-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 22px 18px; }
.week-body { display: grid; gap: 15px; }
.week-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.week-controls .text-button { min-height: 32px; padding: 0 4px; }
.week-overdue { display: grid; gap: 7px; padding: 10px 11px; border-radius: 9px; color: #84453e; background: #fff5f1; }
.week-overdue h3 { margin: 0; font-size: 13px; }
.week-overdue .finder-results { max-height: 170px; }
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(130px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.week-day { display: grid; align-content: start; min-width: 130px; gap: 7px; padding: 9px; border: 1px solid #dce5e0; border-radius: 9px; background: #fffefa; }
.week-day.is-today { border-color: #88aaa0; background: #f3f8f4; }
.week-day h3 { margin: 0; color: var(--muted-ink); font-size: 11px; font-weight: 800; text-transform: capitalize; }
.week-task-list { display: grid; gap: 5px; padding: 0; margin: 0; list-style: none; }
.week-task-list .finder-result > button { display: grid; padding: 7px; }
.week-task-list .finder-result small { font-size: 10px; }
.views-body { display: grid; gap: 14px; }
.saved-view-list { display: grid; gap: 6px; }
.saved-view-row { display: flex; align-items: stretch; gap: 5px; }
.saved-view-button { display: inline-flex; min-height: 34px; flex: 1 1 auto; align-items: center; justify-content: flex-start; padding: 7px 9px; border: 1px solid #d5dfda; border-radius: 8px; color: #455b5d; background: #fffefa; font-size: 12px; font-weight: 800; text-align: left; }
.saved-view-button:hover, .saved-view-button.is-active { border-color: #8fa9a1; color: #234c4c; background: #edf5f1; }
.saved-view-remove { flex: 0 0 34px; border: 0; border-radius: 8px; color: #687779; background: transparent; font-size: 18px; line-height: 1; }
.saved-view-remove:hover { color: #913d35; background: #fff1ed; }
.save-view-form { display: grid; gap: 10px; padding-top: 13px; border-top: 1px solid #dfe6e2; }
.save-view-form > label { display: grid; gap: 5px; }
.save-view-form > label > span, .view-filter-grid label > span { color: var(--muted-ink); font-size: 11px; font-weight: 800; }
.view-filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.view-filter-grid > label:not(.view-check) { display: grid; gap: 5px; }
.view-check { display: flex; min-height: 34px; align-items: center; gap: 7px; padding: 0 2px; color: #466062; font-size: 12px; font-weight: 700; }
.view-check input, .view-label-choice input { accent-color: #195b66; }
.view-label-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.view-label-choice { display: inline-flex; align-items: center; gap: 4px; }
.view-label-choice input { width: 14px; height: 14px; min-height: 0; margin: 0; }
.today-groups section, .archive-groups section { min-width: 0; }
.today-groups h3, .archive-groups h3 { margin: 0 0 7px; font-size: 14px; letter-spacing: -.02em; }
.finder-empty { margin: 0; padding: 11px 0; color: var(--muted-ink); font-size: 12px; }
.archive-result-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px; }
.archive-task-copy { flex: 1 1 auto; }
.archive-restore-button { flex: 0 0 auto; padding: 6px 8px; border: 1px solid #c8d5d0; border-radius: 7px; color: #3d625a; background: #fffdf9; font-size: 11px; font-weight: 800; }
.archive-restore-button:hover { border-color: #8fa8a0; color: var(--ink); background: #edf3f0; }
.data-download-button { min-height: 34px; padding: 6px 9px; border: 1px solid #c8d5d0; border-radius: 7px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 2; display: flex; max-width: min(420px, calc(100vw - 48px)); align-items: center; gap: 14px; padding: 11px 14px; border-radius: 10px; color: #fffdf9; background: var(--ink); box-shadow: 0 14px 36px rgba(31, 45, 47, .25); font-size: 13px; font-weight: 700; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.visible.has-action { pointer-events: auto; }
.toast-action { flex: 0 0 auto; padding: 4px 0; border: 0; border-bottom: 1px solid rgba(255,253,249,.65); color: #fffdf9; background: transparent; font-size: 12px; font-weight: 800; }
.toast-action:hover { border-bottom-color: #fffdf9; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (pointer: coarse) { .new-task-button, .refresh-button, .text-button, .save-button, .project-tab, .lane-add-button, .card-menu-button, .checklist-summary, .checklist-add-button, .checklist-details, .checklist-promote, .checklist-promote-submit, .checklist-item-details-submit, .comment-add-button, .avatar-upload-button, .member-manage-button, .member-remove-button, .member-save-button, .auth-link, .copy-invite-link, .invite-revoke, .notification-trigger, .notification-read-all, .notification-item-button, .utility-icon-button, .archive-restore-button, .assignee-picker-trigger, .rhythm-counter-step { min-height: 44px; } .notification-trigger, .utility-icon-button { width: 44px; } .card-menu-button { width: 44px; height: 44px; } .card-edit-button { opacity: 1; pointer-events: auto; } input, select { min-height: 44px; height: 44px; } .assignee-option { min-height: 44px; } .assignee-option input, .telegram-preferences input, .rhythm-counter-step input { min-height: 0; height: 16px; } }
@media (pointer: coarse) { .board-sort-trigger { width: 44px; height: 44px; } }
@media (max-width: 980px) { .shell { padding: 20px 22px 32px; } .lane { min-height: 360px; } .topbar { grid-template-columns: auto minmax(140px, 1fr) auto; } .day-context { display: none; } .shell.is-calendar-open .topbar { grid-template-columns: auto minmax(0, 1fr) auto; } .shell.is-calendar-open .workspace-picker { display: none; } .shell.is-calendar-open .day-context { display: block; min-width: 0; } .shell.is-calendar-open .task-summary { display: none; } .calendar-controls { justify-content: flex-start; } }
@media (max-width: 720px) { .calendar-view-header { align-items: start; flex-direction: column; } }
@media (max-width: 620px) { .calendar-day-view { min-height: 320px; padding: 12px; } .calendar-day-view .calendar-task-list { width: 100%; } .calendar-day-detail { padding: 16px; } .calendar-day-detail > header { grid-template-columns: 1fr; align-items: start; } .calendar-day-detail > header p { grid-column: auto; } .calendar-day-create { grid-row: auto; grid-column: auto; justify-self: start; } .task-period-inputs, .task-period-editor > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 780px) { .task-dialog { display: block; height: auto; overflow-y: auto; } .task-dialog-columns { grid-template-columns: 1fr; } .task-detail-panel, .task-activity-panel { overflow: visible; } .task-activity-panel { display: block; border-top: 1px solid #e0e6e2; border-left: 0; } .activity-list { max-height: none; padding-right: 0; overflow: visible; scrollbar-gutter: auto; } }
@media (max-width: 620px) { .shell { padding: 16px 14px 28px; } .topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding-bottom: 14px; } .topbar-actions { gap: 2px; } .workspace-picker select { height: 34px; } .notification-trigger, .utility-icon-button { width: 32px; height: 32px; } .notification-panel { position: fixed; top: auto; right: 12px; bottom: 12px; left: 12px; width: auto; max-height: min(68vh, 560px); } .user-button { width: 32px; padding: 2px; } .user-button > span:last-child { display: none; } .new-task-button { padding: 9px; font-size: 0; } .new-task-button svg { width: 17px; height: 17px; } .intro { align-items: start; padding: 22px 0 14px; } h1 { font-size: 32px; } .intro p { max-width: 270px; font-size: 12px; } .refresh-button { font-size: 0; } .refresh-button svg { width: 18px; height: 18px; } .form-options, .detail-options, .finder-filters, .today-groups, .archive-groups, .task-link-form, .task-attachment-form, .task-label-create-form, .view-filter-grid { grid-template-columns: 1fr; } .task-attachment-form { align-items: stretch; } .attachment-file-label { justify-content: center; } .composer { margin-bottom: 16px; padding: 16px; } .voice-task { align-items: stretch; flex-direction: column; gap: 10px; } .voice-task-button { width: 100%; min-height: 44px; } .board { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(285px, calc(100vw - 42px)); gap: 12px; margin: 0 -14px; padding: 0 14px 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; } .lane { min-height: 420px; scroll-snap-align: start; } .lane-description { min-height: 0; } .task-list { min-height: 64px; } .task-dialog { width: calc(100vw - 24px); } .task-dialog-header { padding: 18px 18px 12px; } .task-dialog-note, .task-details-form, .task-assignment { padding-right: 18px; padding-left: 18px; } .checklist-panel, .task-links-panel, .task-attachments-panel, .task-dependencies-panel, .task-activity-panel { padding-right: 18px; padding-left: 18px; } .task-assignment { align-items: start; flex-direction: column; gap: 4px; } .task-assignment .assignee-picker { width: 100%; } .invite-form, .email-change-form, .member-editor-fields { grid-template-columns: 1fr; } .invite-form .save-button, .email-change-form .text-button { width: 100%; } #invite-project-list, .member-project-list { grid-template-columns: 1fr; } .member-editor-actions { align-items: stretch; flex-direction: column-reverse; } .member-editor-actions button { width: 100%; } .auth-card { padding: 22px; } .invite-summary > div { grid-template-columns: 82px minmax(0, 1fr); } .invite-result-actions > button { flex: 1 1 auto; justify-content: center; } .finder-dialog { width: calc(100vw - 20px); max-height: calc(var(--app-visible-height, 100vh) - 20px); } .finder-header { padding: 17px 17px 13px; } .finder-body { padding: 14px 17px 18px; } #search-results { max-height: none; } .week-controls { align-items: stretch; flex-direction: column; } .week-controls .text-button { justify-content: flex-start; } .file-drop-guide { right: 12px; bottom: 12px; max-width: calc(100vw - 24px); } .calendar-view { gap: 16px; margin-top: 21px; } .calendar-title-block h1 { font-size: 34px; } .calendar-title-block p { font-size: 12px; } .calendar-controls { width: 100%; align-items: stretch; justify-content: space-between; } .calendar-navigation, .calendar-mode-switcher { flex: 1 1 auto; justify-content: space-between; } .calendar-mode-switcher button { flex: 1 1 0; padding: 0 7px; } .calendar-overdue { align-items: start; flex-direction: column; } .calendar-overdue-list { width: 100%; justify-content: flex-start; } .calendar-overdue .calendar-task { flex-basis: min(100%, 260px); } .calendar-agenda-day { grid-template-columns: 1fr; gap: 7px; } .calendar-agenda-day .calendar-day-heading { display: flex; align-items: baseline; justify-content: space-between; padding-top: 0; } .calendar-agenda-day .calendar-day-heading > span { display: block; } .calendar-month { min-width: 100%; } .calendar-month-weekdays span { padding: 6px 2px; font-size: 9px; } .calendar-month-day { min-height: 76px; gap: 3px; padding: 4px; } .calendar-month-day .calendar-day-heading { min-height: 25px; padding-bottom: 3px; } .calendar-month-day .calendar-month-task-list { display: flex; flex-wrap: wrap; gap: 3px; } .calendar-month-day .calendar-month-task-marker { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--planned); } .calendar-month-day .calendar-month-task-marker[data-status="in_progress"] { background: var(--progress); } .calendar-month-day .calendar-month-task-marker[data-status="backlog"] { background: var(--backlog); } .calendar-month-day .calendar-month-task-marker[data-status="done"] { background: var(--done); } .calendar-month-day .calendar-month-task-marker[data-priority="high"] { box-shadow: 0 0 0 1px #7f4a38; } .calendar-month-day .calendar-more-tasks { padding: 0; font-size: 9px; } }
@media (max-width: 620px) { .project-switcher { margin: 0 -14px; padding: 0 14px; } .project-create-panel, .project-create-panel form { grid-template-columns: 1fr; } .project-create-panel form > div { justify-content: flex-end; } .shell .brand > span:last-child { display: none; } }
@media (pointer: coarse) { .project-context-edit-button { width: 44px; height: 44px; opacity: 1; transform: none; } }
@media (max-width: 620px) { .project-context-display { width: 100%; } .project-title-input { min-height: 39px; font-size: 32px; } .project-description-input { font-size: 12px; } .project-context-actions { justify-content: flex-start; } }
@media (max-width: 620px) { .checklist-item-details { grid-template-columns: 1fr; padding-left: 0; } }
@media (pointer: coarse) { .my-tasks-filter, .workspace-update-button { min-height: 44px; } }
@media (max-width: 620px) and (pointer: coarse) { .notification-trigger { width: 44px; height: 44px; } }
@media (max-width: 620px) { .intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .board-tools { justify-content: flex-start; gap: 6px; } .refresh-button { margin-left: auto; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .composer, .drag-placeholder, .project-drag-placeholder, .task-dialog[open], .calendar-view { animation: none; } .lane, .new-task-button, .task-card, .project-tabs, .project-tab, .toast, .calendar-trigger, .calendar-task { transition: none; } }

/* Voice capture: the same controls and warm surfaces as the task editor. */
.voice-quick-button { display: inline-flex; position: relative; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; color: var(--ink); background: transparent; cursor: pointer; }
.voice-quick-button::before { content: ""; position: absolute; inset: 0; border: 1px solid #9aafa8; border-radius: 8px; pointer-events: none; }
.voice-quick-button svg, .voice-editor-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.voice-quick-button:hover::before { background: #d6e3dc; }
.voice-quick-button svg { position: relative; width: 16px; height: 16px; }
.voice-quick-button:disabled, .voice-editor-button:disabled { opacity: .55; cursor: default; }
.voice-quick-button:focus-visible, .voice-editor-button:focus-visible { outline: 2px solid #195b66; outline-offset: 3px; }
.voice-editor-button { display: inline-flex; gap: 7px; align-items: center; justify-content: center; min-height: 40px; white-space: nowrap; }
.voice-capture-dialog { width: min(420px, calc(100vw - 28px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 14px; background: #fffdf9; color: var(--ink); box-shadow: 0 22px 70px rgba(23,35,37,.25); overflow-y: auto; }
.voice-capture-dialog::backdrop { background: rgba(25,40,39,.32); }
.voice-capture-heading { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 20px 22px 12px; }
.voice-capture-heading h2 { margin: 0; font-size: 20px; line-height: 1.25; letter-spacing: -.02em; }
.voice-capture-body { padding: 12px 26px 22px; text-align: center; }
.voice-capture-symbol { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px; color: #315b50; background: #e0ebe4; border-radius: 50%; }
.voice-capture-symbol svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.voice-capture-dialog[data-state="recording"] .voice-capture-symbol { color: #a63329; background: #f6e3dd; }
.voice-capture-state { margin: 0 0 6px; font-size: 16px; font-weight: 750; }
.voice-capture-timer { display: block; margin-bottom: 18px; font-size: 30px; font-weight: 750; font-variant-numeric: tabular-nums; }
#voice-capture-copy { margin: 0; font-size: 14px; line-height: 1.55; color: #425b57; }
.voice-capture-example { margin: 15px 0 0; font-size: 12px; line-height: 1.55; color: #536862; }
.voice-capture-error { margin: 16px 0 0; color: #9d3127; font-size: 14px; line-height: 1.5; }
.voice-capture-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px 20px; border-top: 1px solid #e0e6e2; }
.voice-capture-actions button { min-height: 44px; }
.voice-edit-preview { margin: 0; padding: 12px 0; border-top: 1px solid #d6e0da; color: #315b50; font-size: 13px; line-height: 1.5; }
.voice-edit-preview p { margin: 0 0 8px; }
.voice-edit-preview ul { margin: 8px 0; padding-left: 20px; }
@media (max-width: 620px) { .task-dialog-actions { flex-wrap: wrap; justify-content: flex-end; } .voice-editor-button { padding-inline: 8px; min-height: 44px; } .voice-capture-heading { padding-inline: 18px; } }

@media (pointer: coarse), (max-width: 620px) { .voice-quick-button { width: 44px; height: 44px; } .voice-quick-button::before { inset: 6px; } }

/* Installed app insets and keyboard-sized viewport; desktop stays unchanged. */
.pwa-install-entry { min-width: 0; }
.auth-card .pwa-install-entry { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.pwa-install-help { margin-top: 12px; color: var(--muted-ink); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.pwa-install-help[hidden], [data-pwa-install][hidden], .pwa-install-status[hidden] { display: none; }
.pwa-install-help p { margin: 0 0 10px; }
.pwa-install-help ol { margin: 0 0 12px; padding-left: 20px; }
.pwa-install-help li + li { margin-top: 7px; }
.pwa-install-status { margin: 10px 0 0; color: var(--muted-ink); font-size: 13px; }
[data-pwa-install] { min-height: 44px; }
.shell { padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(32px, env(safe-area-inset-bottom)); }
.auth-shell { padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
@media (max-width: 620px) {
  .shell { padding-top: max(16px, env(safe-area-inset-top)); padding-right: max(14px, env(safe-area-inset-right)); padding-bottom: max(28px, env(safe-area-inset-bottom)); padding-left: max(14px, env(safe-area-inset-left)); }
  input:not([type="checkbox"]):not([type="radio"]), textarea, select { font-size: 16px; }
  html[data-keyboard-open] dialog[open] { position: fixed; top: calc(var(--app-visible-top, 0px) + 8px); right: 0; bottom: auto; left: 0; margin: 0 auto; max-height: calc(var(--app-visible-height, 100dvh) - 16px); }
  html[data-keyboard-open] .team-dialog-body { max-height: calc(var(--app-visible-height, 100dvh) - 112px); }
  html[data-keyboard-open] .finder-body { max-height: calc(var(--app-visible-height, 100dvh) - 112px); }
}