:root {
  --p0-ink: var(--ink);
  --p0-muted: var(--muted);
  --p0-canvas: var(--canvas);
  --p0-surface: var(--surface);
  --p0-line: var(--line);
  --p0-mint: #267a69;
  --p0-mint-soft: #e2f2eb;
  --p0-amber: #c47b16;
  --p0-amber-soft: #fff0cf;
  --p0-red: #b74949;
  --p0-red-soft: #fae7e5;
}
html, body, #app { max-width: 100%; overflow-x: clip; }

.p0-app { min-height: 100vh; color: var(--p0-ink); background: var(--p0-canvas); font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
.p0-main { width: min(100%, 1120px); margin: 0 auto; padding: 20px 16px 92px; }
.p0-toolbar, .p0-task-main, .p0-card-actions, .p0-calendar-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.p0-section { display: grid; gap: 16px; }
.p0-card { padding: 16px; border: 1px solid var(--p0-line); border-radius: var(--radius); background: var(--p0-surface); box-shadow: var(--shadow); }
.p0-task-card { display: grid; gap: 12px; }
.p0-task-card.is-done h3 { text-decoration: line-through; color: var(--p0-muted); }
.p0-button, .p0-icon-button, .p0-status-button, .p0-nav-button, .p0-segment { min-width: 40px; min-height: 40px; padding: 9px 13px; border: 1px solid var(--p0-line); border-radius: 10px; color: var(--p0-ink); background: var(--p0-surface); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.p0-button-primary { color: #fff; border-color: #df5d43; background: linear-gradient(135deg, var(--coral), #ef8760); box-shadow: 0 6px 13px rgb(242 111 82 / 18%); }
.p0-nav-button.is-active { color: var(--p0-ink); border-color: #f8c9b7; background: linear-gradient(90deg, #fff2e6, #edffdf); }
.p0-segment.is-active { color: var(--p0-ink); border-color: transparent; background: #fff; box-shadow: 0 3px 12px rgb(242 111 82 / 14%); }
.p0-button-danger { color: var(--p0-red); border-color: var(--p0-red); background: var(--p0-red-soft); }
.p0-button:disabled { cursor: not-allowed; opacity: .55; }
#app .p0-button.quick-focus { min-width: 36px !important; min-height: 36px !important; padding: 6px 10px; }
.p0-segmented { display: flex; gap: 8px; overflow-x: auto; }
.p0-form { display: grid; gap: 12px; }
.p0-form input, .p0-form select, .p0-form textarea { min-height: 44px; padding: 10px 12px; border: 1px solid var(--p0-line); border-radius: 10px; background: white; font: inherit; }
.p0-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.p0-recurrence-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; align-items: end; }
.p0-radio-grid, .p0-crop-grid, .p0-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; padding: 0; border: 0; }
.p0-radio-card { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px; border: 1px solid var(--p0-line); border-radius: 10px; }
.p0-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--p0-mint-soft); }
.p0-chip .p0-button { min-height: 32px; padding-block: 5px; }
.p0-subtasks { display: grid; gap: 8px; margin: 0; padding: 12px 0 0 28px; border-top: 1px solid var(--p0-line); }
.p0-subtasks li { display: flex; align-items: center; gap: 8px; }
.p0-focus-core { display: grid; place-items: center; gap: 16px; min-height: 70vh; padding: 24px; text-align: center; }
.p0-focus-core.is-paused_by_leave { background: var(--p0-amber-soft); }
.p0-timer, .p0-number { font-size: clamp(30px, 10vw, 64px); font-variant-numeric: tabular-nums; font-weight: 800; }
.p0-warning { color: var(--p0-amber); }
.p0-muted, .p0-eyebrow, .p0-preview-meta { color: var(--p0-muted); font-size: 12px; }
.p0-alert { margin-bottom: 12px; padding: 12px; border-radius: 10px; background: var(--p0-mint-soft); }
.p0-alert-error { color: var(--p0-red); background: var(--p0-red-soft); }
.p0-empty { padding: 24px; border: 1px dashed var(--p0-line); border-radius: 16px; text-align: center; }
.p0-farm-summary { min-height: 150px; display: grid; place-items: center; border: 1px solid var(--p0-line); border-radius: 24px; background: linear-gradient(#e2f2eb, #f3f6f3); }
.p0-primary-nav { position: fixed; z-index: 10; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); border-top: 1px solid var(--p0-line); background: rgb(255 255 255 / 96%); }
.p0-nav-button { min-width: 0; padding-inline: 4px; font-size: 12px; }
.p0-button:focus-visible, .p0-nav-button:focus-visible, .p0-segment:focus-visible, .p0-form :focus-visible { outline: 3px solid color-mix(in srgb, var(--p0-mint), white 35%); outline-offset: 2px; }
.p0-filter-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); margin-bottom: 12px; }
.p0-select-row, .p0-check-row { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.p0-calendar-day-timeline { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--p0-line); border-radius: 16px; background: var(--p0-surface); }
.p0-calendar-scroll { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.p0-calendar-hour { min-height: 58px; display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 8px; padding: 6px; border-top: 1px solid var(--p0-line); }
.p0-calendar-hour time { color: var(--p0-muted); font-size: 12px; }
.p0-calendar-week-grid { display: grid; grid-template-columns: repeat(7,minmax(90px,1fr)); min-width: 680px; overflow: hidden; border: 1px solid var(--p0-line); border-radius: 16px; background: var(--p0-surface); }
.p0-calendar-day { min-height: 72px; padding: 8px; border-right: 1px solid var(--p0-line); }
.p0-calendar-day span { display: block; color: var(--p0-muted); font-size: 11px; }
.p0-calendar-lanes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7,minmax(90px,1fr)); gap: 3px; padding: 6px; border-top: 1px solid var(--p0-line); }
.p0-calendar-lane { min-height: 44px; overflow: hidden; border: 0; border-radius: 8px; color: #174e43; background: var(--p0-mint-soft); text-align: left; white-space: normal; line-height: 1.25; }
.p0-calendar-lane-wrap { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.p0-calendar-lane-wrap .p0-calendar-lane { flex: 1; }
.p0-calendar-fold { width: 100%; margin: 6px 0; border: 1px dashed var(--p0-line); border-radius: 10px; background: var(--p0-soft); color: var(--p0-muted); padding: 10px; text-align: left; }
.p0-inline-creator { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin: 6px 0; }
.p0-inline-creator input { flex: 1 1 160px; }
.p0-calendar-controls { position: relative; padding: 8px; border: 1px solid #f2c4b4; border-radius: 18px; background: linear-gradient(145deg, #fff8f2, #fff); box-shadow: 0 10px 24px rgb(174 99 72 / 13%); }
.p0-calendar-controls > button { border: 1px solid #f2c4b4; border-radius: 12px; background: #fffaf7; color: #9b513d; font: inherit; font-weight: 650; cursor: pointer; }
.p0-calendar-date-trigger { min-width: 126px; font-variant-numeric: tabular-nums; background: #fbe1d5 !important; color: #863f2e !important; box-shadow: 0 4px 10px rgb(174 99 72 / 16%); }
.p0-calendar-nav { min-width: 86px; }
.p0-calendar-today { color: #8e5b26 !important; background: #fff4df !important; }
.p0-calendar-picker { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; display: grid; gap: 8px; width: min(100%, 360px); padding: 12px; border: 1px solid #f2c4b4; border-radius: 16px; background: linear-gradient(145deg, #fff8f2, #fff); box-shadow: 0 12px 30px rgb(174 99 72 / 18%); }
.p0-calendar-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.p0-calendar-picker-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); color: #9c6b59; font-size: 11px; font-weight: 700; text-align: center; }
.p0-calendar-picker-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.p0-calendar-picker-day { min-width: 0; min-height: 38px; padding: 4px; border: 0; border-radius: 10px; background: transparent; font: inherit; cursor: pointer; }
.p0-calendar-picker-day:hover, .p0-calendar-picker-day.is-selected { background: #ffe6d9; box-shadow: 0 3px 8px rgb(223 93 67 / 14%); }
.p0-calendar-month-task { display: flex; align-items: center; gap: 3px; }
.p0-calendar-event-title { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; background: transparent; border: 0; padding: 2px 3px; font: inherit; line-height: 1.25; text-align: left; }
.lunar-label { display: block; margin-top: 2px; color: var(--p0-muted); font-weight: 500; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p0-calendar-month-day { position: relative; }
.p0-calendar-date-number { color: var(--p0-ink); font-size: 14px; line-height: 1.15; }
.p0-calendar-marker { position: absolute; top: 6px; right: 6px; max-width: calc(100% - 34px); overflow: hidden; color: #d84545; font-size: 10px; font-weight: 750; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.p0-calendar-marker.is-workday { color: #248a55; }
.p0-calendar-weekday { color: var(--p0-muted); font-size: 11px; font-weight: 650; }
.p0-calendar-week-date { display: block; margin-top: 2px; color: var(--p0-ink); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; }
.p0-calendar-week-grid .p0-calendar-marker { position: static; display: block; max-width: 100%; margin-top: 3px; }
.p0-calendar-month-grid { display: grid; grid-template-columns: repeat(7,minmax(86px,1fr)); min-width: 650px; border: 1px solid var(--p0-line); border-radius: 16px; overflow: hidden; }
.p0-calendar-month-day { min-height: 112px; display: grid; align-content: start; gap: 3px; padding: 6px; border-right: 1px solid var(--p0-line); border-bottom: 1px solid var(--p0-line); background: var(--p0-surface); }
.p0-calendar-month-day.is-blank { background: #fbfbf8; }
.p0-calendar-month-day.is-outside { opacity: .5; }
.p0-calendar-month-task { min-height: 44px; overflow: hidden; border: 0; border-radius: 6px; background: var(--p0-mint-soft); font-size: 11px; text-align: left; }
.p0-calendar-month-task .p0-status-button { flex: 0 0 40px; }
.p0-calendar-month-task .p0-calendar-event-title { flex: 1 1 auto; }
.p0-calendar-lane-wrap .p0-status-button { flex: 0 0 40px; }

.p0-status-button[aria-pressed="true"] { background: var(--p0-mint-soft); }
.p0-focus-task-list { display: flex; flex-wrap: wrap; gap: 6px; }

@media (min-width: 900px) {
  .p0-main { padding: 28px 28px 40px 218px; }
  .p0-primary-nav { top: 0; right: auto; width: 190px; grid-template-columns: 1fr; align-content: start; padding: 24px 12px; border-top: 0; border-right: 1px solid var(--p0-line); }
}

@media (max-width: 412px) {
  .p0-main { padding-inline: 12px; }
  .p0-toolbar > *, .p0-card-actions > * { max-width: 100%; }
  .p0-calendar-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p0-calendar-date-trigger { min-width: 0; }
  .p0-field-row { grid-template-columns: 1fr; }
  .p0-radio-grid, .p0-crop-grid, .p0-metrics { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Calendar lane visual contract: compact control, two-line task content, local scroll. */
.p0-calendar-scroll { width: 100%; max-width: 100%; overflow-x: auto !important; overflow-y: hidden; overscroll-behavior-inline: contain; }
.p0-calendar-week-grid { min-width: 0 !important; overflow: visible !important; border-radius: 12px; }
.p0-calendar-week-grid .p0-calendar-day { min-width: 0; min-height: 62px; padding: 6px; }
.p0-calendar-lanes { gap: 2px; padding: 4px; }
.p0-calendar-week-tasks { display: grid; gap: 4px; margin-top: 7px; }
.p0-calendar-week-task { width: 100%; min-height: 38px; height: auto; overflow: visible; border: 0; border-radius: 7px; background: var(--p0-mint-soft); color: #174e43; padding: 5px; font: inherit; font-size: 11px; font-weight: 700; line-height: 1.25; text-align: left; overflow-wrap: anywhere; white-space: normal; }
.p0-calendar-lane-wrap { gap: 3px; min-width: 0; min-height: 36px; align-items: center; }
.p0-calendar-lane-wrap .calendar-status-button,
.p0-calendar-month-task .calendar-status-button {
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border-radius: 7px !important;
}
.p0-calendar-lane-wrap .calendar-status-button::before,
.p0-calendar-month-task .calendar-status-button::before { width: 13px !important; height: 13px !important; }
.p0-calendar-lane,
.p0-calendar-event-title {
  min-width: 0 !important;
  min-height: 44px !important;
  height: 34px !important;
  display: grid !important;
  align-content: center;
  gap: 0;
  padding: 3px 6px !important;
  overflow: hidden !important;
  border-radius: 7px !important;
  white-space: normal !important;
  line-height: 1.1 !important;
  font-size: 11px !important;
  font-weight: 700;
  text-align: left;
}
.p0-calendar-event-name,
.p0-calendar-event-time { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p0-calendar-event-name { display: block; font-size: 11px; line-height: 1.1; }
.p0-calendar-event-time { display: block; margin-top: 2px; color: var(--p0-muted); font-size: 10px; font-weight: 600; line-height: 1; }
.p0-calendar-month-grid.p0-calendar-month-board { min-width: 0 !important; width: 100%; max-width: 100%; box-sizing: border-box; }
.p0-calendar-month-scroll { overflow-x: hidden !important; }
.p0-calendar-month-scroll .month-days,
.p0-calendar-month-scroll .month-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.p0-calendar-month-scroll .p0-calendar-month-day { min-width: 0; padding: clamp(2px, 1vw, 6px); }
.p0-calendar-month-week { min-height: 0 !important; align-items:stretch; }
.p0-calendar-month-task.month-event {
  height: 38px !important;
  min-height: 38px !important;
  top: calc(44px + var(--lane) * 40px) !important;
  gap: 3px !important;
  padding: 2px 4px !important;
  font-size: 11px !important;
  white-space: normal !important;
}
.p0-calendar-month-task .p0-calendar-event-title { flex: 1 1 auto; width: 0; }
.p0-calendar-month-task .p0-calendar-event-name,
.p0-calendar-month-task .p0-calendar-event-time { max-width: 100%; }
.p0-calendar-controls { gap: 8px; }
.p0-calendar-controls > button,
.p0-calendar-controls .p0-calendar-date-trigger {
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 7px 10px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}

@media (max-width: 720px) {
  .p0-calendar-week-grid { min-width: 0 !important; }
  .p0-calendar-month-grid.p0-calendar-month-board { min-width: 0 !important; width: 100%; }
}