.xw-today-summary { display: grid; grid-template-columns: minmax(300px, 1.7fr) repeat(3, minmax(145px, 1fr)); gap: 12px; margin-bottom: 15px; }
.xw-today-summary article { min-height: 112px; box-sizing: border-box; border: 1px solid #e1e7f0; border-radius: 14px; background: #fff; }
.xw-today-progress-card { display: flex; align-items: center; gap: 16px; padding: 15px 18px; }
.xw-progress-ring { --xw-progress: 0; width: 76px; height: 76px; flex: 0 0 auto; display: grid; padding: 7px; box-sizing: border-box; place-items: center; border-radius: 50%; background: conic-gradient(#1769ff calc(var(--xw-progress) * 3.6deg), #e9eef6 0); }
.xw-progress-ring > div { width: 100%; height: 100%; display: grid; align-content: center; justify-items: center; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(226, 232, 240, .55); }
.xw-progress-ring strong { color: #172033; font-size: 18px; line-height: 1; }
.xw-progress-ring span { margin-top: 4px; color: #8995a7; font-size: 9px; }
.xw-today-progress-card > div:last-child small,
.xw-today-progress-card > div:last-child strong,
.xw-today-progress-card > div:last-child span { display: block; }
.xw-today-progress-card > div:last-child small { color: #758196; font-size: 11px; }
.xw-today-progress-card > div:last-child strong { margin-top: 7px; color: #263247; font-size: 15px; }
.xw-today-progress-card > div:last-child span { margin-top: 8px; color: #8c98a9; font-size: 9px; }
.xw-today-progress-card > div:last-child span i { margin-right: 4px; color: #7f9ed9; }
.xw-today-metric { display: flex; align-items: center; gap: 12px; padding: 16px; }
.xw-today-metric > i { width: 36px; height: 36px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 11px; color: #1769ff; background: #edf4ff; font-size: 15px; }
.xw-today-metric.is-complete > i { color: #08775f; background: #e8f7f2; }
.xw-today-metric.is-pending > i { color: #b56a00; background: #fff4df; }
.xw-today-metric.is-delivery > i { color: #6656c8; background: #f0edff; }
.xw-today-metric small,
.xw-today-metric strong,
.xw-today-metric span { display: block; }
.xw-today-metric small { color: #7d899a; font-size: 10px; }
.xw-today-metric strong { margin-top: 3px; color: #172033; font-size: 20px; line-height: 1.1; }
.xw-today-metric span { margin-top: 5px; color: #98a2b3; font-size: 9px; white-space: nowrap; }
.xw-task-table td:nth-child(2) strong,
.xw-task-table td:nth-child(3) strong { color: #1769ff; font-size: 14px; }
.xw-period-summary { display: grid; grid-template-columns: minmax(300px, 1.7fr) repeat(3, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.xw-period-summary > article { min-height: 120px; box-sizing: border-box; border: 1px solid #e1e7f0; border-radius: 14px; background: #fff; }
.xw-period-rate-card { display: flex; align-items: center; gap: 17px; padding: 15px 18px; background: linear-gradient(135deg, #fff 0%, #f6f9ff 100%) !important; }
.xw-progress-ring.is-large { width: 84px; height: 84px; }
.xw-period-rate-card > div:last-child small,
.xw-period-rate-card > div:last-child strong,
.xw-period-rate-card > div:last-child span { display: block; }
.xw-period-rate-card > div:last-child small { color: #718096; font-size: 11px; }
.xw-period-rate-card > div:last-child strong { margin-top: 7px; color: #172033; font-size: 20px; }
.xw-period-rate-card > div:last-child span { margin-top: 7px; color: #8793a6; font-size: 10px; }
.xw-period-metric { display: flex; align-items: center; gap: 11px; padding: 16px; }
.xw-period-metric > i { width: 38px; height: 38px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 12px; color: #1769ff; background: #edf4ff; font-size: 15px; }
.xw-period-metric:nth-child(3) > i { color: #6656c8; background: #f0edff; }
.xw-period-metric:nth-child(4) > i { color: #d17800; background: #fff2dc; }
.xw-period-metric small,
.xw-period-metric strong,
.xw-period-metric span { display: block; }
.xw-period-metric small { color: #7c8799; font-size: 10px; }
.xw-period-metric strong { margin-top: 4px; color: #172033; font-size: 19px; white-space: nowrap; }
.xw-period-metric span { margin-top: 5px; color: #98a2b3; font-size: 9px; white-space: nowrap; }
.xw-period-track { margin-bottom: 14px; padding: 16px 18px 18px; overflow: hidden; border: 1px solid #e1e7f0; border-radius: 14px; background: #fff; }
.xw-period-track > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.xw-period-track > header strong,
.xw-period-track > header span { display: block; }
.xw-period-track > header strong { color: #263247; font-size: 13px; }
.xw-period-track > header > div:first-child > span { margin-top: 3px; color: #96a0b0; font-size: 9px; }
.xw-period-legend { display: flex; align-items: center; gap: 12px; color: #8591a3; font-size: 9px; }
.xw-period-legend span { display: inline-flex !important; align-items: center; gap: 4px; }
.xw-period-legend i { width: 7px; height: 7px; border-radius: 50%; background: #d8e0eb; }
.xw-period-legend .done i { background: #1769ff; }
.xw-period-legend .partial i { background: #8bb3ff; }
.xw-period-legend .missed i { background: #e36b62; }
.xw-period-days { position: relative; display: grid; }
.xw-period-track.is-week .xw-period-days { grid-template-columns: repeat(7, minmax(72px, 1fr)); }
.xw-period-track.is-week .xw-period-days::before { position: absolute; top: 37px; right: 6.5%; left: 6.5%; height: 2px; background: #e3e8f0; content: ""; }
.xw-period-track.is-month .xw-period-days,
.xw-period-weekdays { display: grid; grid-template-columns: repeat(7, minmax(64px, 1fr)); }
.xw-period-weekdays { margin-bottom: 7px; color: #9aa5b4; text-align: center; font-size: 9px; }
.xw-period-day { position: relative; z-index: 1; min-width: 0; display: grid; justify-items: center; padding: 0 4px; border: 0; color: #667085; background: transparent; cursor: pointer; font: inherit; }
.xw-period-day small { font-size: 9px; }
.xw-period-day > span { width: 30px; height: 30px; display: grid; margin: 6px 0; place-items: center; border: 3px solid #dbe2ec; border-radius: 50%; color: #8e99a9; background: #fff; box-shadow: 0 0 0 4px #fff; font-size: 10px; }
.xw-period-day > strong { color: #7f8a9b; font-size: 9px; font-weight: 600; }
.xw-period-day.done > span { border-color: #1769ff; color: #fff; background: #1769ff; }
.xw-period-day.done > strong { color: #1769ff; }
.xw-period-day.partial > span { border-color: #73a5ff; color: #1769ff; background: #edf4ff; }
.xw-period-day.partial > strong { color: #1769ff; }
.xw-period-day.missed > span { border-color: #ef9a92; color: #b42318; background: #fff0ee; }
.xw-period-day.missed > strong { color: #b42318; }
.xw-period-day.pending > span { border-color: #a9c6fa; color: #1769ff; background: #fff; }
.xw-period-day.empty > span { border-style: dashed; color: #a7b0be; background: #fafbfc; }
.xw-period-day.future { opacity: .42; cursor: default; }
.xw-period-day.is-today small { color: #1769ff; font-weight: 750; }
.xw-period-day.is-today > span { box-shadow: 0 0 0 4px #eaf1ff; }
.xw-period-track.is-month .xw-period-days { gap: 7px 5px; }
.xw-period-track.is-month .xw-period-day { min-height: 70px; padding: 7px 3px 5px; border: 1px solid #edf1f6; border-radius: 10px; background: #fbfcfe; }
.xw-period-track.is-month .xw-period-day:hover:not(:disabled) { border-color: #bdd1fa; background: #f5f8ff; }
.xw-period-track.is-month .xw-period-day > span { width: 25px; height: 25px; margin: 4px 0; border-width: 2px; box-shadow: none; font-size: 8px; }
.xw-period-track.is-month .xw-period-day.is-today { border-color: #9fc0ff; background: #f3f7ff; box-shadow: inset 0 0 0 1px #d4e2ff; }
.xw-period-day-spacer { min-height: 70px; }
.xw-member-progress { overflow: hidden; border: 1px solid #e1e7f0; border-radius: 14px; background: #fff; }
.xw-member-progress > header { padding: 14px 16px; border-bottom: 1px solid #edf1f5; background: #fafbfd; }
.xw-member-progress > header strong,
.xw-member-progress > header span { display: block; }
.xw-member-progress > header strong { color: #334155; font-size: 12px; }
.xw-member-progress > header span { margin-top: 3px; color: #9aa4b3; font-size: 9px; }
.xw-member-progress-row { display: grid; grid-template-columns: 34px minmax(180px, 1fr) 50px auto; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid #edf1f5; }
.xw-member-progress-row:last-child { border-bottom: 0; }
.xw-member-progress-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #1769ff; background: #edf4ff; font-size: 12px; }
.xw-member-progress-copy > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.xw-member-progress-copy strong { color: #334155; font-size: 11px; }
.xw-member-progress-copy span { color: #8b96a7; font-size: 9px; }
.xw-member-progress-bar { height: 6px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #edf1f6; }
.xw-member-progress-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1769ff, #78a8ff); }
.xw-member-progress-row > b { color: #1769ff; font-size: 12px; text-align: right; }
@media (max-width: 980px) {
  .xw-center-panel { inset: 16px; }
  .xw-stat-cards { grid-template-columns: repeat(2, 1fr); }
  .xw-today-summary,
  .xw-period-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xw-today-progress-card,
  .xw-period-rate-card { grid-column: 1 / -1; }
  .xw-notice-label { display: none; }
  .xw-task-overview { gap: 12px; overflow-x: auto; }
  .xw-task-overview em { display: none; }
}
@media (max-width: 640px) {
  .xw-center-panel > header,
  .xw-center-panel > main { padding-right: 15px; padding-left: 15px; }
  .xw-center-panel > nav { padding: 0 10px; overflow-x: auto; }
  .xw-center-panel > nav button { padding: 12px 10px; white-space: nowrap; }
  .xw-task-toolbar { align-items: stretch; flex-direction: column; }
  .xw-task-subtabs { width: 100%; }
  .xw-task-subtabs button { flex: 1 1 0; }
  .xw-task-settings-button { align-self: flex-end; }
  .xw-task-overview { margin-right: -15px; margin-left: -15px; padding-right: 15px; padding-left: 15px; border-right: 0; border-left: 0; border-radius: 0; }
  .xw-week-range { align-items: flex-start; flex-direction: column; gap: 3px; }
  .xw-week-range em { margin-left: 0; }
  .xw-auto-delivery-list > .xw-auto-delivery-item { grid-template-columns: 22px minmax(0, 1fr); }
  .xw-auto-delivery-list > button.xw-auto-delivery-item { grid-template-columns: 22px minmax(0, 1fr) 18px; }
  .xw-auto-delivery-list .xw-auto-delivery-item time { grid-column: 2; }
  .xw-auto-delivery-list .xw-auto-delivery-open { grid-column: 3; grid-row: 1 / span 2; }
  .xw-stat-cards { grid-template-columns: 1fr 1fr; }
  .xw-period-track { padding-right: 12px; padding-left: 12px; overflow-x: auto; }
  .xw-period-track > header { min-width: 540px; }
  .xw-period-track.is-week .xw-period-days,
  .xw-period-track.is-month .xw-period-days,
  .xw-period-weekdays { min-width: 540px; }
  .xw-member-progress-row { grid-template-columns: 32px minmax(130px, 1fr) 42px; }
  .xw-member-progress-row > .xw-link-btn { grid-column: 2 / -1; justify-self: start; }
  .xw-field-grid,
  .xw-share-modules { grid-template-columns: 1fr; }
  .xw-share-modules label.is-all { grid-column: auto; }
  .xw-share-workspace { padding: 14px; }
  .xw-share-section { padding: 13px; }
  .xw-share-member-list { grid-template-columns: 1fr; }
  .xw-share-stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xw-team-modal > footer.xw-share-dialog-footer { align-items: stretch; flex-direction: column; }
  .xw-share-dialog-footer > div { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .xw-global-task-popover,
  .xw-global-task-item,
  .xw-global-task-entry,
  .xw-live-task-list,
  .xw-live-task-row,
  .xw-live-task-mini { transition: none; }
  .xw-global-task-item[data-status="running"] .xw-global-task-track > span,
  .xw-global-task-item[data-status="queued"] .xw-global-task-track > span { animation: none; width: 55%; }
  .xw-live-task-progress > span { animation: none !important; }
}