X-Financial/web/src/assets/styles/components/personal-workbench-responsive.css

/* 1080p / 小高度屏：让传统模式顶部趋势卡更紧凑 */
@media (max-height: 980px) and (min-width: 761px) {
  .workbench {
    --hero-title-size: 31px;
    --trend-card-min-height: 232px;
    --capability-row-height: 106px;
    gap: 9px;
  }

  .workbench-trend-hero {
    padding: 24px 20px 10px 20px;
  }

  .workbench-trend-card {
  }

  .trend-chart-panel {
    min-height: 128px;
  }
}

/* 2K 宽屏但内容区仍偏高时，略收紧（避免 hero 独占过多纵向空间） */
@media (min-width: 1920px) and (max-height: 1100px) {
  .workbench {
    --hero-title-size: 32px;
    --trend-card-min-height: 236px;
    --capability-row-height: 108px;
  }
}

@media (max-width: 1440px) {
  .workbench {
    gap: 10px;
  }

  .trend-summary-panel h1 {
    font-size: 32px;
  }

  .capability-grid--privileged {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .capability-grid--standard {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .capability-card {
    padding: 18px 14px 18px 22px;
  }

  .capability-copy {
    padding-left: 0;
  }

  .workbench-content-grid {
    grid-template-columns: minmax(480px, 1.34fr) minmax(270px, 0.76fr);
    gap: 14px;
  }

  .workbench-card {
    padding: 10px 12px;
  }

  .progress-row {
    grid-template-columns: minmax(72px, 0.4fr) minmax(122px, 0.72fr) minmax(78px, 0.42fr) minmax(238px, 1.18fr) minmax(86px, auto);
    gap: 12px;
  }
}

@media (max-width: 1180px) {
  .workbench {
    height: auto;
    min-height: 100%;
    gap: 12px;
  }

  .workbench-trend-card {
    grid-template-columns: 1fr;
  }

  .trend-summary-panel {
    align-content: start;
  }

  .capability-grid--privileged {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .capability-grid--standard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workbench-content-grid {
    grid-template-columns: 1fr;
  }

  .side-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 961px) and (max-width: 1440px),
       (min-width: 961px) and (max-height: 820px) {
  .workbench {
    --hero-title-size: 30px;
    --trend-card-min-height: 232px;
    --capability-row-height: 102px;
    gap: 8px;
  }

  .workbench-trend-hero {
    padding: 24px 18px 10px 18px;
  }

  .workbench-trend-card {
    min-height: 0;
  }

  .trend-summary-panel {
    gap: 7px;
  }

  .trend-summary-panel h1 {
    margin-bottom: 28px;
    font-size: var(--hero-title-size);
    line-height: 1.14;
  }

  .trend-total {
    font-size: 42px;
  }

  .trend-summary-panel small {
    display: none;
  }

  .trend-chart-panel {
    min-height: 0;
  }

  .trend-chart-head strong {
    font-size: 14px;
  }

  .trend-chart-source {
    font-size: 12.5px;
  }

  .capability-grid {
    gap: 10px;
  }

  .capability-card {
    grid-template-columns: 40px minmax(0, 1fr) 16px;
    gap: 12px;
    padding: 15px 14px 15px 18px;
  }

  .capability-icon {
    --workbench-list-icon-size: 40px;
    --workbench-list-icon-art-size: 24px;
    width: 40px;
    height: 40px;
  }

  .capability-copy {
    gap: 3px;
  }

  .capability-copy strong {
    font-size: 14px;
    line-height: 1.2;
  }

  .capability-copy small {
    font-size: 12px;
    line-height: 1.22;
  }

  .capability-arrow {
    width: 16px;
    min-width: 16px;
    font-size: 17px;
  }
}

@media (max-width: 760px) {
  .workbench {
    height: auto;
    gap: 14px;
    overflow: visible;
    --workbench-glass-base:
      linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.68) 56%, rgba(255, 255, 255, 0.76));
    --workbench-glass-theme-tint:
      linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.065), rgba(var(--theme-primary-rgb, 58, 124, 165), 0.018));
    --workbench-glass-noise-opacity: 0.008;
    --workbench-glass-blur: blur(14px) saturate(1.2);
  }

  .workbench-trend-hero {
    padding: 16px;
  }

  .workbench-trend-card {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .trend-summary-panel h1 {
    max-width: 320px;
    font-size: 28px;
  }

  .trend-summary-panel {
    transform: none;
  }

  .trend-total {
    font-size: 34px;
  }

  .trend-chart-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .trend-chart-panel {
    min-height: 148px;
  }

  .capability-grid,
  .capability-grid--privileged,
  .capability-grid--standard,
  .side-column {
    grid-template-columns: 1fr;
  }

  .progress-row {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .progress-section-head {
    align-items: center;
  }

  .progress-range-select {
    width: 120px;
    flex-basis: 120px;
  }

  .progress-empty-state {
    min-height: 180px;
  }

  .progress-result {
    justify-items: start;
  }

  .progress-steps {
    width: 100%;
  }
}

/* 针对低高度视口，解除 height: 100% 限制，防止纵向元素被过度压扁 */
@media (max-height: 840px) and (min-width: 761px) {
  .workbench {
    height: auto;
    min-height: 100%;
  }
}

@media (max-width: 560px) {
  .workbench-trend-hero {
    padding: 14px;
  }
}

@media (max-width: 480px) {
  .trend-summary-panel h1 {
    font-size: 24px;
  }

  .trend-total {
    font-size: 30px;
  }

  .trend-chart-panel {
    min-height: 132px;
  }

  .capability-card {
    padding: 12px 10px 12px 14px;
    gap: 8px;
  }

  .capability-icon {
    --workbench-list-icon-size: 34px;
    --workbench-list-icon-art-size: 20px;
    width: 34px;
    height: 34px;
  }

  .capability-copy {
    padding-left: 0;
    gap: 2px;
  }

  .capability-copy strong {
    font-size: 13px;
  }

  .capability-copy small {
    font-size: 11px;
  }

  .progress-row {
    display: grid;
    grid-template-columns: minmax(70px, auto) 1fr minmax(74px, auto);
    grid-template-areas:
      "time identity result"
      "type type type"
      "steps steps steps";
    gap: 8px;
    padding: 10px 0;
    align-items: center;
  }

  .progress-time {
    grid-area: time;
    width: 100%;
  }

  .progress-time time {
    font-size: 11.5px;
  }

  .progress-identity {
    grid-area: identity;
    width: 100%;
  }

  .progress-identity strong {
    font-size: 12.5px;
  }

  .progress-identity small {
    font-size: 11px;
  }

  .progress-type {
    grid-area: type;
    width: 100%;
  }

  .progress-result {
    grid-area: result;
    width: 100%;
    justify-items: end;
    gap: 2px;
  }

  .progress-result strong {
    font-size: 12.5px;
  }

  .progress-status {
    min-height: 18px;
    padding: 0 5px;
    font-size: 11px;
  }

  .progress-steps {
    grid-area: steps;
    width: 100%;
    margin-top: 4px;
  }

  .progress-step i {
    width: 14px;
    height: 14px;
    font-size: 10px;
  }

  .progress-step small {
    font-size: 9px;
  }

  .progress-step::before {
    top: 7px;
  }

  .side-panel {
    padding: 8px 10px;
    gap: 4px;
  }

  .insight-metric-row,
  .insight-profile-card {
    padding: 6px 8px;
    gap: 6px;
  }

  .insight-metric-label,
  .insight-profile-label {
    font-size: 11.5px;
  }

  .insight-metric-value,
  .insight-profile-value {
    font-size: 13.5px;
  }
}