body { margin: 0; background: #f6f5f2; color: #252b28; }
#globalBody { visibility: hidden; }
#globalBody.zaelion-ready { visibility: visible; }
#globalBody:has(.zaelion-workspace-header) { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.zaelion-header { display: flex; align-items: center; justify-content: space-between; min-height: 64px; box-sizing: border-box; padding: 12px 32px; background: #fff; border-bottom: 1px solid #e5e5df; }
.zaelion-header-account { display: flex; align-items: center; gap: 12px; color: #616862; font-size: 14px; }
.zaelion-wordmark { font-size: 22px; font-weight: 650; letter-spacing: -0.6px; }
.zaelion-main { min-height: calc(100vh - 180px); display: grid; place-items: center; padding: 24px; box-sizing: border-box; }
.zaelion-card { width: 100%; max-width: 480px; box-sizing: border-box; padding: 48px 36px; background: #fff; border: 1px solid #e5e5df; border-radius: 20px; box-shadow: 0 8px 32px rgb(35 43 38 / 4%); text-align: center; }
.zaelion-main:has(.zaelion-workspace-header) { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 0; }
.zaelion-card:has(.zaelion-workspace-header) { display: flex; flex: 1; flex-direction: column; max-width: none; min-height: 0; margin: 0; padding: 28px 32px 0; border: 0; border-radius: 0; box-shadow: none; text-align: left; }
.zaelion-card:has(.zaelion-workspace-header) .zaelion-mark { display: none; }
.zaelion-mark { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 28px; border-radius: 16px; background: #e5ece7; color: #355946; font-size: 28px; font-weight: 600; }
.zaelion-eyebrow { color: #626b65; font-size: 13px; margin-bottom: 12px; }
.zaelion-card h1 { color: #252b28; font-size: 29px; line-height: 1.25; font-weight: 600; letter-spacing: -0.6px; margin: 0 0 16px; overflow-wrap: anywhere; }
.zaelion-intro { color: #616862; font-size: 15px; line-height: 1.7; margin: 0 0 30px; }
.zaelion-actions { display: grid; gap: 12px; }
.zaelion-actions oj-button { width: 100%; }
.zaelion-status { color: #646c66; font-size: 13px; line-height: 1.6; margin: 22px 0 0; }
.zaelion-error { color: #923b2d; font-size: 14px; line-height: 1.6; margin: 22px 0 0; }
.zaelion-workspace-header { display: flex; align-items: start; justify-content: space-between; gap: 24px; border-bottom: 1px solid #ecece7; }
.zaelion-workspace-header h1 { margin-bottom: 24px; }
.zaelion-workspace-grid { display: grid; flex: 1; grid-template-columns: 248px minmax(0, 1fr); min-height: 0; overflow: hidden; }
.zaelion-list-panel { min-height: 0; overflow-y: auto; padding: 28px 28px 24px 0; border-right: 1px solid #ecece7; }
.zaelion-task-panel { min-height: 0; overflow-y: auto; padding: 28px 0 24px 32px; }
.zaelion-list-panel h2, .zaelion-task-panel h2 { margin: 0 0 20px; font-size: 18px; font-weight: 600; }
.zaelion-create-list, .zaelion-create-task { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; margin-bottom: 24px; }
.zaelion-create-list oj-button, .zaelion-create-task oj-button { width: 64px; }
.zaelion-empty { color: #6b746d; font-size: 14px; text-align: center; padding: 28px 0 12px; }
.zaelion-search { display: grid; gap: 8px; margin-bottom: 24px; }
.zaelion-search oj-button { justify-self: start; }
.zaelion-list-grid { display: grid; gap: 8px; }
.zaelion-list-row, .zaelion-today-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: transparent; color: inherit; border: 1px solid transparent; border-radius: 10px; font: inherit; text-align: left; cursor: pointer; }
.zaelion-list-row:hover, .zaelion-today-row:hover { background: #f5f6f3; }
.zaelion-list-row.is-selected, .zaelion-today-row.is-selected { background: #edf2ee; border-color: #dce7df; }
.zaelion-today-row { margin-bottom: 4px; font-weight: 600; }
#completed-view { margin-bottom: 28px; }
.zaelion-today-icon { color: #b55c43; font-size: 11px; }
.zaelion-completed-icon { color: #557761; font-size: 16px; }
.zaelion-list-dot { width: 10px; height: 10px; border-radius: 50%; background: #557761; flex: none; }
.zaelion-list-name { font-size: 15px; font-weight: 550; overflow-wrap: anywhere; }
.zaelion-task-list { display: grid; gap: 6px; }
.zaelion-task-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 8px; border-bottom: 1px solid #efefe9; border-radius: 8px; }
.zaelion-task-row.is-selected { background: #f7f8f5; }
.zaelion-task-check { width: 22px; height: 22px; padding: 0; border: 1.5px solid #8a938d; border-radius: 50%; background: #fff; cursor: pointer; flex: none; }
.zaelion-task-check:hover { border-color: #557761; }
.zaelion-task-row.is-completed .zaelion-task-check { border-color: #557761; background: #557761; }
.zaelion-task-row.is-completed .zaelion-task-check::after { content: "✓"; color: #fff; font-size: 14px; }
.zaelion-task-content { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.zaelion-task-title { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.zaelion-task-meta { display: flex; flex-wrap: wrap; gap: 10px; color: #757d77; font-size: 12px; }
.zaelion-task-row.is-completed .zaelion-task-title { color: #747b76; text-decoration: line-through; }
.zaelion-task-drawer { width: min(700px, 100vw); }
.zaelion-task-editor { box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; height: 100dvh; min-height: 0; padding: 24px; overflow: hidden; background: #fff; }
.zaelion-task-editor-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.zaelion-task-editor h3 { margin: 0; font-size: 16px; }
.zaelion-task-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.zaelion-unsaved-prompt { display: grid; gap: 10px; padding: 16px; border: 1px solid #d8b8ac; border-radius: 10px; background: #fbf5f2; }
.zaelion-unsaved-prompt h4, .zaelion-unsaved-prompt p { margin: 0; }
.zaelion-unsaved-prompt h4 { font-size: 15px; }
.zaelion-unsaved-prompt p { color: #665b56; font-size: 14px; }
.zaelion-task-editor oj-input-text, .zaelion-task-editor oj-text-area { width: 100%; }
.zaelion-task-tabs { display: flex; gap: 8px; border-bottom: 1px solid #e7e8e3; }
.zaelion-task-tabs button { padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #5f6962; font: inherit; font-size: 14px; cursor: pointer; }
.zaelion-task-tabs button.is-selected { border-bottom-color: #557761; color: #274a35; font-weight: 600; }
.zaelion-task-tabs button:focus-visible { outline: 2px solid #557761; outline-offset: -2px; }
.zaelion-task-tab-panel { display: grid; align-content: start; gap: 16px; min-width: 0; min-height: 0; overflow-y: auto; padding: 0 8px 24px 0; }
.zaelion-scroll-panel { overflow-y: auto; }
.zaelion-task-detail-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 16px; }
.zaelion-field { display: grid; gap: 6px; color: #4f5852; font-size: 12px; }
.zaelion-field select { box-sizing: border-box; height: 52px; width: 100%; padding: 0 12px; border: 1px solid #8b918d; border-radius: 4px; background: #fff; color: #252b28; font-family: inherit; font-size: 16px; }
.zaelion-comments { align-content: start; }
.zaelion-comment-empty { margin: 0; color: #757d77; font-size: 14px; }
.zaelion-comment-list { display: grid; gap: 12px; }
.zaelion-comment { padding: 12px 14px; border-radius: 10px; background: #f7f8f5; }
.zaelion-comment-byline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: 12px; }
.zaelion-comment-byline time { color: #757d77; }
.zaelion-comment p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.zaelion-comments oj-text-area { width: 100%; }
.zaelion-proposal-composer { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid #e7e8e3; }
.zaelion-proposal-list { display: grid; gap: 12px; }
.zaelion-proposal { padding: 12px 14px; border: 1px solid #e1e7df; border-radius: 10px; background: #f7f9f6; }
.zaelion-proposal p { margin: 8px 0; font-size: 14px; white-space: pre-wrap; }
.zaelion-proposal .zaelion-proposal-stale { color: #923b2d; }
.zaelion-proposal ul { margin: 8px 0; padding-left: 18px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.zaelion-review-history { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid #e7e8e3; }
.zaelion-footer { padding: 24px; color: #6b746d; font-size: 12px; text-align: center; }
#globalBody:has(.zaelion-workspace-header) .zaelion-footer { display: none; }
@media (max-width: 760px) {
  .zaelion-task-drawer { width: 100vw; }
  .zaelion-task-editor { padding: 16px; }
  .zaelion-card:has(.zaelion-workspace-header) { padding: 24px 24px 0; }
  .zaelion-workspace-grid { display: block; overflow-y: auto; }
  .zaelion-list-panel { overflow: visible; padding-right: 0; padding-bottom: 24px; border-right: 0; border-bottom: 1px solid #ecece7; }
  .zaelion-task-panel { overflow: visible; padding-left: 0; }
  .zaelion-task-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .zaelion-header { padding: 12px 16px; }
  .zaelion-header-account { gap: 4px; }
  .zaelion-main { padding: 16px; }
  .zaelion-card { padding: 36px 24px; }
  .zaelion-card h1 { font-size: 26px; }
  .zaelion-workspace-header { align-items: center; }
  .zaelion-create-list, .zaelion-create-task { grid-template-columns: 1fr; }
}