html.auth-has-session[data-boot-page="achievement"] .filterbar,
html.auth-has-session[data-boot-page="achievement"] .table-area,
html.auth-has-session[data-boot-page="achievement"] .pager {
  display: none !important;
}

html.auth-has-session[data-boot-page="achievement"] #page-achievement {
  display: block !important;
}

.achievement-nav-new {
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid rgba(122, 38, 54, .24);
  border-radius: 999px;
  color: #7a2636;
  background: #f7ecef;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

html.theme-dark .achievement-nav-new {
  border-color: rgba(255, 255, 255, .24);
  color: #ffffff;
  background: rgba(255, 255, 255, .12);
}

#page-achievement {
  --achievement-ink: #312749;
  --achievement-muted: #615e6e;
  --achievement-faint: #746b85;
  --achievement-line: #dcd2ef;
  --achievement-soft: #f1eaff;
  --achievement-forest-0: #e8f4ec;
  --achievement-forest-1: #b9e6cb;
  --achievement-forest-2: #72d6a1;
  --achievement-forest-3: #2aad77;
  --achievement-forest-4: #158552;
  --achievement-accent: #7149c6;
  --achievement-selected: #e5d8ff;
  --effort-harvest: #ffe7a7;
  /* 土地原色混入30%白色，数量徽章仍保留原色。 */
  --effort-land: #ffeec1;
  --achievement-soil-grown: var(--effort-land);
  --achievement-soil-empty: #fff4d8;
  --achievement-soil-future: #ddc58e;
  --achievement-soil-order: #f4cf73;
  --land-edge: #e7d6b5;
  --land-shadow: #e4d1a9;
  --plot-edge: #d9bd7d;
  --plot-shadow: #c3a163;
  --plot-empty-edge: #e2cda0;
  --plot-empty-shadow: #d2b782;
  --achievement-chart-width: 1076px;
  --achievement-heatmap-columns: 53;
  --achievement-share-icon: url("../img/customer-achievement/tomato.svg?v=2026-08-30-achievement-garden-1");
  --achievement-order-icon: url("../img/customer-achievement/unicorn.svg?v=2026-08-30-achievement-garden-1");
  position: absolute;
  left: var(--sidebar);
  right: 0;
  top: var(--topbar);
  bottom: 0;
  overflow: auto;
  box-sizing: border-box;
  color: var(--achievement-ink);
  background: var(--index-layout-bg, #f3f2ef);
  font-family: var(--font);
}


/* 滚动容器铺满 appWrap，限宽只放在内部卡片；不要在这里再次加侧栏偏移。 */
body.index-workspace-layout #page-achievement {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 10 !important;
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
  overflow-y: auto !important;
  background: var(--index-layout-bg, #f3f2ef) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
}

#page-achievement *,
#page-achievement *::before,
#page-achievement *::after {
  box-sizing: border-box;
}

#page-achievement .achievement-card-toolbar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(3, auto);
  align-content: center;
  align-items: center;
  justify-items: center;
  gap: 12px;
  width: var(--achievement-chart-width);
  max-width: 100%;
  min-height: 244px;
  padding: 24px;
  margin: 0 auto 24px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  text-align: center;
}

#page-achievement .effort-crew,
#page-achievement .achievement-card-toolbar h2,
#page-achievement .farm-motto {
  width: 476px;
  max-width: 100%;
}

/* 整排显示，避免等分裁切穿过人物头发产生白条和串图。 */
#page-achievement .effort-crew {
  grid-column: 1;
  grid-row: 1;
  display: block;
  aspect-ratio: 5 / 1;
  background-image: url("../img/customer-achievement/effort-crew.png?v=2026-08-30-achievement-garden-1");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  pointer-events: none;
}

#page-achievement .achievement-card-toolbar h2,
#page-achievement .section-copy h3 {
  margin: 0;
  color: var(--achievement-ink);
  font-weight: 700;
}

#page-achievement .achievement-card-toolbar h2 {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #111111;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -1px;
  white-space: nowrap;
}

#page-achievement .hero-highlight {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 0;
  padding: 8px 20px 10px;
  border-radius: 999px;
  background: var(--effort-harvest);
  font-size: 0.9em;
  font-weight: 500;
  vertical-align: middle;
}

#page-achievement .farm-motto {
  grid-column: 1;
  grid-row: 3;
  color: #111111;
  font-size: 20px;
  line-height: 1.6;
  text-align: justify;
  text-align-last: justify;
}

#page-achievement .year-picker {
  position: static;
  flex: 0 0 66px;
  width: 66px;
  height: 32px;
  margin: 0;
  padding: 0 2px;
  border: 1px solid #000000;
  border-radius: 8px;
  color: var(--achievement-ink);
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

#page-achievement .year-picker:focus-visible {
  outline: 2px solid var(--achievement-accent);
  outline-offset: 2px;
}

#page-achievement .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#page-achievement .achievement-content {
  display: grid;
  gap: 22px;
  max-width: 1248px;
  margin: 0 auto;
  padding: 16px 16px 32px;
  background: transparent;
}

#page-achievement .achievement-section {
  min-width: 0;
  padding: 24px 12px;
  border: 1px solid #e4ded7;
  border-radius: 22px;
  background: #ffffff;
}

#page-achievement .achievement-section[aria-labelledby="achievement-share-title"] {
  background: #fff9f1;
  border-color: #e9dcc7;
}

#page-achievement .section-head {
  display: flex;
  align-items: center;
  gap: 20px;
  width: var(--achievement-chart-width);
  max-width: 100%;
  margin: 0 auto 20px;
}

#page-achievement .section-copy {
  min-width: 0;
}

#page-achievement .development-section-head {
  flex-wrap: wrap;
}

#page-achievement .development-section-head .section-copy {
  flex-shrink: 0;
}

#page-achievement .section-title-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

#page-achievement .section-copy h3 {
  font-size: 18px;
  line-height: 1.4;
}

#page-achievement .section-year {
  display: none;
}

#page-achievement .section-total {
  margin-left: auto;
  padding: 10px 16px;
  border-radius: 14px;
  background: #ebe1ff;
  box-shadow: 0 3px 0 #d9c9f7;
  text-align: right;
  white-space: nowrap;
}

#page-achievement .section-total strong {
  display: block;
  color: #6338a9;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

#page-achievement .section-total span {
  display: block;
  margin-top: 4px;
  color: var(--achievement-faint);
  font-size: 12px;
}

#page-achievement .chart-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 0 10px;
  scrollbar-width: thin;
  scrollbar-color: #c5b3e3 transparent;
}

#page-achievement .heatmap-shell {
  width: var(--achievement-chart-width);
  min-width: var(--achievement-chart-width);
  margin: 0 auto;
}

#page-achievement .heatmap-months {
  display: grid;
  grid-template-columns: repeat(var(--achievement-heatmap-columns), minmax(0, 1fr));
  gap: 4px;
  height: 22px;
  color: var(--achievement-muted);
  font-size: 11px;
  line-height: 1;
}

#page-achievement .heatmap-months span {
  white-space: nowrap;
}

#page-achievement .heatmap-main {
  position: relative;
}

#page-achievement .heatmap-week {
  display: grid;
  grid-template-rows: repeat(7, auto);
  gap: 4px;
  min-width: 0;
}

#page-achievement .weekday-labels {
  position: absolute;
  top: 0;
  right: calc(100% + 10px);
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  align-items: center;
  gap: 4px;
  width: 26px;
  height: 100%;
  color: var(--achievement-faint);
  font-size: 10px;
  line-height: 1;
  text-align: right;
}

#page-achievement .heatmap-weeks {
  display: grid;
  grid-template-columns: repeat(var(--achievement-heatmap-columns), minmax(0, 1fr));
  gap: 4px;
}

#page-achievement .heatmap-cell {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  cursor: default;
}

#page-achievement .heatmap-cell.is-data {
  cursor: pointer;
}

#page-achievement .heatmap-cell.level-0 { background: var(--achievement-forest-0); }
#page-achievement .heatmap-cell.level-1 { background: var(--achievement-forest-1); }
#page-achievement .heatmap-cell.level-2 { background: var(--achievement-forest-2); }
#page-achievement .heatmap-cell.level-3 { background: var(--achievement-forest-3); }
#page-achievement .heatmap-cell.level-4 { background: var(--achievement-forest-4); }
#page-achievement .heatmap-cell.is-future {
  background: repeating-linear-gradient(135deg, #f3f0f9 0 2px, #eae5f3 2px 4px);
}

#page-achievement .heatmap-cell.is-data:hover {
  outline: 2px solid var(--achievement-accent);
  outline-offset: 1px;
}

#page-achievement .heatmap-cell:focus-visible,
#page-achievement .share-slot:focus-visible {
  outline: 2px solid var(--achievement-accent);
  outline-offset: 2px;
}

#page-achievement .heatmap-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  width: var(--achievement-chart-width);
  max-width: 100%;
  margin: 14px auto 0;
  color: var(--achievement-faint);
  font-size: 11px;
}

#page-achievement .legend-cells {
  display: flex;
  gap: 4px;
}

#page-achievement .legend-cells i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

#page-achievement .legend-note {
  margin-left: auto;
  color: var(--achievement-muted);
}

#page-achievement .share-grid {
  display: grid;
  grid-template-columns: repeat(30, 32px);
  gap: 6px 4px;
  width: var(--achievement-chart-width);
  min-width: var(--achievement-chart-width);
  margin: 0 auto;
}

/* 土地只改变视觉，不改变日期位置、统计口径和图案切换。 */
#page-achievement .farm-land {
  position: relative;
  width: calc(var(--achievement-chart-width) + 24px);
  padding: 20px 12px;
  margin: 0 auto 6px;
  border-radius: 24px 28px 24px 18px;
  background-color: var(--effort-land);
  /* 静态纸纹错位叠加；不为每个日期格添加纹理或滤镜。 */
  background-image: url("../img/customer-achievement/effort-paper.png?v=2026-08-30-achievement-garden-1"), url("../img/customer-achievement/effort-paper.png?v=2026-08-30-achievement-garden-1");
  background-size: 768px 768px, 512px 512px;
  background-position: 0 0, 137px 83px;
  background-blend-mode: multiply, multiply;
  box-shadow: inset 0 0 0 1px var(--land-edge), 0 2px 0 var(--land-shadow);
}

#page-achievement .garden-edge-art {
  position: absolute;
  width: 54px;
  height: 18px;
  pointer-events: none;
}

#page-achievement .garden-edge-art-top { top: 1px; left: 26px; }
#page-achievement .garden-edge-art-bottom { bottom: 1px; right: 26px; }

#page-achievement .share-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: default;
}

#page-achievement .share-slot::before {
  content: "";
  position: absolute;
  inset: 25px 2px 1px;
  border: 1px solid var(--plot-edge);
  border-bottom: 2px solid var(--plot-shadow);
  border-radius: 6px;
  background: var(--achievement-soil-grown);
  pointer-events: none;
}

#page-achievement .share-slot.is-data {
  cursor: pointer;
}

#page-achievement .share-slot.is-empty::before {
  border-color: var(--plot-empty-edge);
  border-bottom-color: var(--plot-empty-shadow);
  background: var(--achievement-soil-empty);
}

#page-achievement .share-slot.is-future::before {
  inset: 29px 9px 3px;
  border: 0;
  background: var(--achievement-soil-future);
}

#page-achievement .share-slot.has-order::before {
  border-color: #dfbd6b;
  border-bottom-color: #d1a552;
  background: var(--achievement-soil-order);
}

#page-achievement .share-slot:not(:disabled):hover::before {
  outline: 2px solid var(--achievement-accent);
  outline-offset: 1px;
}

#page-achievement .share-section-head {
  align-items: flex-start;
}

#page-achievement .share-section-head .section-copy {
  flex: 1 1 auto;
}

#page-achievement .share-section-head .section-total {
  background: var(--effort-harvest);
  box-shadow: 0 3px 0 #efd18a;
}

#page-achievement .share-section-head .section-total strong {
  color: #715018;
}

#page-achievement .share-title-line {
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
}

#page-achievement .share-pattern-options {
  display: flex;
  flex: 1 1 440px;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 4px;
}


#page-achievement .share-pattern-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--achievement-line);
  border-radius: 10px;
  background: #fffdf9;
  box-shadow: 0 2px 0 #e0d5e9;
  transition: transform 120ms ease-out;
  cursor: pointer;
}

#page-achievement .share-pattern-button:hover {
  background: var(--achievement-soft);
  transform: translateY(-2px);
}

#page-achievement .share-pattern-button.is-selected {
  border-color: var(--achievement-accent);
  background: var(--achievement-selected);
  box-shadow: 0 3px 0 #aa8bdc;
}

#page-achievement .share-pattern-button:focus-visible {
  outline: 2px solid var(--achievement-accent);
  outline-offset: 2px;
}

#page-achievement .share-pattern-button img {
  display: block;
  width: 24px;
  height: 24px;
  pointer-events: none;
}

#page-achievement .share-icon-mark {
  display: block;
  width: 32px;
  height: 32px;
}

#page-achievement .share-slot.has-order,
#page-achievement .share-slot.is-order-only {
  cursor: pointer;
}

#page-achievement .order-icon-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  pointer-events: none;
}

#page-achievement .share-icon-mark,
#page-achievement .order-icon-mark {
  position: relative;
  z-index: 1;
  transform: translateY(-3px);
  pointer-events: none;
}

#page-achievement .farm-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  width: var(--achievement-chart-width);
  max-width: 100%;
  margin: 16px auto 0;
  color: #000000;
  font-size: 12px;
}

#page-achievement .farm-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#page-achievement .farm-legend i {
  width: 13px;
  height: 10px;
  border-radius: 3px;
}

#page-achievement .farm-legend .plot-grown { background: var(--achievement-soil-grown); }
#page-achievement .farm-legend .plot-empty { background: var(--achievement-soil-empty); }
#page-achievement .farm-legend .plot-future { height: 4px; background: var(--achievement-soil-future); }
#page-achievement .farm-legend .plot-order { background: var(--achievement-soil-order); }

#achievement-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10020;
  visibility: hidden;
  width: max-content;
  max-width: min(220px, calc(100vw - 16px));
  box-sizing: border-box;
  padding: 9px 11px;
  border-radius: 8px;
  background: #35234f;
  color: #fcfaff;
  box-shadow: 0 4px 14px rgba(49, 39, 73, 0.16);
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.55;
  pointer-events: none;
}

#achievement-tooltip strong {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 700;
}

#achievement-tooltip.is-show {
  visibility: visible;
}

@media (max-width: 1100px) {
  #page-achievement .achievement-content {
    padding: 12px;
    gap: 16px;
  }

  #page-achievement .achievement-card-toolbar {
    gap: 10.8px;
    min-height: 205.6px;
    padding: 28px 8px;
    margin-bottom: 22px;
  }

  #page-achievement .farm-motto {
    font-size: clamp(11px, 3.2vw, 20px);
  }

  #page-achievement .achievement-card-toolbar h2 {
    font-size: clamp(23px, 7.2vw, 48px);
  }

  #page-achievement .hero-highlight { gap: 6px; padding: 6px 11px 8px; }

  #page-achievement .year-picker {
    height: 44px;
    font-size: 16px;
  }

  #page-achievement .achievement-section {
    padding: 18px 16px;
    border-radius: 18px;
  }

  #page-achievement .section-head {
    gap: 12px;
  }

  #page-achievement .section-total strong {
    font-size: 22px;
  }

  #page-achievement .section-total {
    padding: 8px 10px;
  }

  #page-achievement .share-section-head {
    position: relative;
    min-height: 70px;
  }

  #page-achievement .share-title-line h3 {
    min-height: 76px;
    padding-top: 10px;
  }

  #page-achievement .share-title-line {
    display: block;
  }

  #page-achievement .share-section-head .section-total {
    position: absolute;
    right: 0;
    top: 0;
  }

  #page-achievement .share-pattern-options {
    gap: 4px;
    margin-left: 0;
  }

  #page-achievement .share-pattern-button {
    width: 44px;
    height: 44px;
  }


  #page-achievement .legend-note {
    display: none;
  }
}

@media (max-width: 1100px) {
  #page-achievement .weekday-labels {
    display: none;
  }
}

/* 只让当前互动的成交标记轻跳一次，普通图案和土地保持静止。 */
@media (prefers-reduced-motion: no-preference) {
  #page-achievement .share-slot.has-order:hover .order-icon-mark,
  #page-achievement .share-slot.has-order:focus-visible .order-icon-mark {
    animation: index-effort-unicorn-hop 480ms ease-out 1;
    transform-origin: 50% 80%;
  }
}

@keyframes index-effort-unicorn-hop {
  0%, 100% { transform: translateY(-3px) rotate(0deg); }
  45% { transform: translateY(-6px) rotate(-5deg); }
  75% { transform: translateY(-4px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  #page-achievement .share-pattern-button,
  #page-achievement .share-icon-mark,
  #page-achievement .order-icon-mark {
    transition: none;
  }
}

#page-achievement .achievement-status {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(var(--achievement-chart-width), 100%);
  min-height: 42px;
  margin: 0 auto;
  padding: 10px 14px;
  border: 1px solid var(--achievement-line);
  border-radius: 10px;
  color: var(--achievement-muted);
  background: var(--achievement-soft);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

#page-achievement .achievement-status.is-visible {
  display: flex;
  margin-bottom: 20px;
}

#page-achievement .achievement-status.is-error {
  border-color: #fecaca;
  color: #991b1b;
  background: #fff7f7;
}

#page-achievement .achievement-retry {
  padding: 5px 11px;
  border: 1px solid #991b1b;
  border-radius: 7px;
  color: #991b1b;
  background: #ffffff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}


#page-achievement .share-slot.has-overflow::after {
  content: attr(data-overflow);
  position: absolute;
  z-index: 2;
  right: -4px;
  bottom: -2px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  color: #ffffff;
  background: #7a2636;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

#page-achievement .share-icon-mark { background: var(--achievement-share-icon) center / contain no-repeat; }
#page-achievement .order-icon-mark { background: var(--achievement-order-icon) center / contain no-repeat; }
#page-achievement .section-total span { color: #66596f; }
#page-achievement .achievement-retry:focus-visible { outline: 2px solid var(--achievement-accent); outline-offset: 2px; }

html.theme-dark #page-achievement { --achievement-ink: #f4f0f9; --achievement-muted: #c8bfd2; --achievement-faint: #c8bfd2; --achievement-soft: #332e3d; }
html.theme-dark #page-achievement .achievement-section { background: #25242a; border-color: #49424d; }
html.theme-dark #page-achievement .achievement-section[aria-labelledby="achievement-share-title"] { background: #2a2722; border-color: #514635; }
html.theme-dark #page-achievement .achievement-card-toolbar { border-radius: 14px; }
html.theme-dark #page-achievement .farm-legend { color: #ffffff; }

@media (max-width: 760px) {
  #page-achievement { left: 0; }
}