: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;
}

button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
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: 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; }
.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; }
.day-context p { margin: 0; }
#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 28px 0 9px; border-color: transparent; border-radius: 7px; color: #40575b; background-color: rgba(255,255,255,.5); font-size: 12px; font-weight: 800; text-overflow: ellipsis; }
.workspace-picker select:hover { border-color: #c7d3ce; background-color: rgba(255,255,255,.76); }

.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-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 { display: none; }
.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; }

.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; }
.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; }
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; }
.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); }
.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(4, minmax(220px, 1fr)); gap: 14px; align-items: start; }
.lane { display: flex; min-width: 0; min-height: 540px; flex-direction: column; padding: 11px; border-radius: 12px; background: rgba(255, 255, 255, .42); 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 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; }

.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 { display: none; }
.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; }
.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; }
.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 { min-width: 32px; 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; }
.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-dialog { width: min(1040px, calc(100vw - 32px)); max-height: min(760px, calc(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; }
.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; max-height: 170px; 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: auto; 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; grid-template-columns: minmax(0, 1.14fr) minmax(330px, .86fr); max-height: calc(min(760px, 100vh - 32px) - 85px); }
.task-detail-panel { min-width: 0; padding-bottom: 24px; overflow-y: auto; }
.task-activity-panel { min-width: 0; padding: 22px; border-left: 1px solid #e0e6e2; background: #f5f7f6; overflow-y: auto; }
.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 select { width: auto; min-width: 172px; height: 32px; padding: 0 8px; border-radius: 7px; font-size: 12px; font-weight: 700; }
.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; }
.detail-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.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; }
.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: center; gap: 9px; color: #314548; font-size: 13px; font-weight: 600; }
.checklist-row input { width: 17px; height: 17px; flex: 0 0 auto; margin: 0; accent-color: var(--planned); }
.checklist-row input:checked + span { color: #68756e; text-decoration: line-through; }
.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-bottom: 12px; }
.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; }
.activity-list { display: grid; gap: 13px; padding: 0; margin: 16px 0 0; list-style: none; }
.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); padding-left: 36px; }
.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; }
.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(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(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-row, .invite-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px; border-radius: 9px; background: #f2f5f3; }
.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; }
.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; }
.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: 5px; margin-top: 12px; padding: 10px; border-radius: 9px; color: #3c5954; background: #e5efea; font-size: 12px; font-weight: 700; }
.invite-result[hidden] { display: none; }
.copy-invite-link { padding: 4px 0; border: 0; color: #294f50; background: transparent; font-size: 12px; font-weight: 800; overflow-wrap: anywhere; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.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; }
.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; }
.auth-shell { display: grid; min-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); }
.invite-context { margin: -4px 0 0; padding: 10px 11px; border-radius: 9px; color: #405a58; background: #edf3f0; font-size: 12px; line-height: 1.45; }
.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; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 2; max-width: min(360px, calc(100vw - 48px)); 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); }
.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, .comment-add-button, .avatar-upload-button { min-height: 44px; } .card-menu-button { width: 44px; height: 44px; } .card-edit-button { opacity: 1; pointer-events: auto; } input, select { min-height: 44px; height: 44px; } }
@media (max-width: 980px) { .shell { padding: 20px 22px 32px; } .board { grid-template-columns: repeat(2, minmax(250px, 1fr)); gap: 16px; } .lane { min-height: 360px; } .topbar { grid-template-columns: auto minmax(140px, 1fr) auto; } .day-context { display: none; } }
@media (max-width: 780px) { .task-dialog { overflow-y: auto; } .task-dialog-columns { grid-template-columns: 1fr; max-height: none; } .task-detail-panel, .task-activity-panel { overflow: visible; } .task-activity-panel { border-top: 1px solid #e0e6e2; border-left: 0; } }
@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: 4px; } .workspace-picker select { height: 34px; } .user-button { width: 32px; padding: 2px; } .user-button > span:last-child { display: none; } .project-switcher { margin: 0 -14px; padding: 0 14px; } .shell .brand > 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 { grid-template-columns: 1fr; } .composer { margin-bottom: 16px; padding: 16px; } .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-activity-panel { padding-right: 18px; padding-left: 18px; } .task-assignment { align-items: start; flex-direction: column; gap: 4px; } .task-assignment select { width: 100%; } .invite-form, .email-change-form { grid-template-columns: 1fr; } .invite-form .save-button, .email-change-form .text-button { width: 100%; } #invite-project-list { grid-template-columns: 1fr; } .auth-card { padding: 22px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .composer, .drag-placeholder, .project-drag-placeholder, .task-dialog[open] { animation: none; } .lane, .new-task-button, .task-card, .project-tabs, .project-tab, .toast { transition: none; } }