.ax-all { margin-top: 16px; }
  .ax-all-head { width: 100%; background: transparent; border: 1px solid var(--pba-border); border-radius: 6px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: var(--pba-fg-2); font-family: var(--pba-font-pixel); font-size: 8px; letter-spacing: 0.18em; transition: border-color .15s, color .15s, background .15s; }
  .ax-all-head:hover { color: #fff; border-color: var(--pba-fg-5); }
  .ax-all-head .chev { transition: transform .2s; }
  .ax-all.open .ax-all-head { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; background: var(--pba-bg-2); color: #fff; }
  .ax-all.open .ax-all-head .chev { transform: rotate(180deg); }
  .ax-all-body { display: none; border: 1px solid var(--pba-border); border-top: none; border-radius: 0 0 6px 6px; background: var(--pba-bg-2); padding: 8px 18px 16px; }
  .ax-all.open .ax-all-body { display: block; }
  .ax-group { padding: 14px 0 6px; border-top: 1px solid var(--pba-border-faint); }
  .ax-group:first-child { border-top: none; padding-top: 8px; }
  .ax-group-name { font-family: var(--pba-font-pixel); font-size: 7px; letter-spacing: 0.2em; color: var(--pba-gold); margin-bottom: 8px; }
  .ax-mini { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--pba-border-faint); }
  .ax-mini:last-of-type { border-bottom: none; }
  .ax-mini-title { font-size: 13.5px; color: var(--pba-fg-1); }
  .ax-mini .dots { display: inline-flex; gap: 3px; }
  .ax-mini .dots i { width: 6px; height: 6px; border-radius: 999px; background: #2a2a2a; display: block; }
  .ax-mini .dots i.on { background: var(--pba-gold); }
  .ax-mini .impact { font-family: var(--pba-font-mono); font-size: 11.5px; color: var(--pba-gold); font-weight: 600; }

  @media (max-width: 880px) {
    .ax-diag-top { grid-template-columns: 1fr; }
    .ax-tier-big { align-self: flex-start; }
    .ax-dimgrid { grid-template-columns: 1fr; }
    .ax-rx { grid-template-columns: 40px 1fr; gap: 14px; }
    .ax-rx-actions { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
    .ax-bench { grid-template-columns: 1fr; gap: 18px; }
    .ax-bench-right { border-left: none; padding-left: 0; border-top: 1px solid var(--pba-border-faint); padding-top: 18px; }
    .ax-gap { grid-template-columns: 1fr; gap: 10px; }
    .ax-bench-foot { flex-direction: column; align-items: flex-start; }
  }

  /* ============ TREND PANE — Claude Design 2026-04-28 ============ */
  .tr-h1 { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin: 0 0 20px; flex-wrap: wrap; }
  .tr-h1 h1 { margin: 0; }
  .tr-h1-meta { font-family: var(--pba-font-pixel); font-size: 7px; letter-spacing: 0.18em; color: var(--pba-fg-5); }

  .tr-context { padding: 22px 26px 20px; }
  .tr-context-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 28px; align-items: center; }
  .tr-context-eye { font-family: var(--pba-font-pixel); font-size: 7.5px; letter-spacing: 0.22em; color: var(--pba-gold); margin-bottom: 8px; }
  .tr-context h2 { font-family: var(--pba-font-body); font-weight: 800; font-size: 24px; line-height: 1.3; letter-spacing: -0.4px; color: #fff; margin: 0; max-width: 720px; }
  .tr-context h2 em { color: var(--pba-gold); font-style: normal; }
  .tr-context-delta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .tr-context-delta .num { font-family: var(--pba-font-mono); font-size: 38px; font-weight: 700; color: var(--pba-gold); line-height: 1; letter-spacing: -1.5px; }
  .tr-context-delta .lbl { font-family: var(--pba-font-pixel); font-size: 7px; letter-spacing: 0.18em; color: var(--pba-fg-5); }
  .tr-context-tier { font-family: var(--pba-font-pixel); font-size: 11px; letter-spacing: 0.22em; color: var(--pba-gold); padding: 10px 16px; background: var(--pba-gold-bg); border: 1px solid var(--pba-gold-border); border-radius: 6px; white-space: nowrap; }

  .tr-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin: 32px 0 12px; gap: 16px; flex-wrap: wrap; }
  .tr-sec-head h2 { font-family: var(--pba-font-body); font-weight: 800; font-size: 18px; color: #fff; margin: 0; letter-spacing: -0.2px; }
  .tr-sec-head h2 em { color: var(--pba-gold); font-style: normal; font-weight: 800; }

  .tr-tabs { display: inline-flex; gap: 0; border: 1px solid var(--pba-border); border-radius: 6px; overflow: hidden; background: #0a0a0a; }
  .tr-tab { background: transparent; border: none; padding: 8px 16px; font-family: var(--pba-font-pixel); font-size: 8px; letter-spacing: 0.18em; color: var(--pba-fg-4); cursor: pointer; transition: background .15s, color .15s; border-right: 1px solid var(--pba-border-faint); }
  .tr-tab:last-child { border-right: none; }
  .tr-tab:hover { color: #fff; }
  .tr-tab.on { background: var(--pba-gold); color: #0a0a0a; box-shadow: inset 0 0 0 1px var(--pba-gold); }

  .tr-chart-card { padding: 20px 22px 18px; }
  .tr-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
  .tr-chart-title { font-family: var(--pba-font-pixel); font-size: 9px; letter-spacing: 0.2em; color: #fff; }
  .tr-chart-wrap { position: relative; width: 100%; }
  .tr-chart { width: 100%; height: auto; display: block; }
  .tr-chart .gridline { stroke: #1a1a1a; stroke-width: 1; }
  .tr-chart .gridline.major { stroke: #222; }
  .tr-chart .axis-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; fill: var(--pba-fg-5); }
  .tr-chart .tier-label { font-family: 'Press Start 2P', monospace; font-size: 6.5px; fill: var(--pba-fg-5); letter-spacing: 0.1em; }
  .tr-chart .area-fill { fill: url(#trAreaGrad); opacity: 1; }
  .tr-chart .line { fill: none; stroke: var(--pba-gold); stroke-width: 2; }
  .tr-chart .line.dim { stroke: #555; stroke-width: 1.2; opacity: 0.6; stroke-dasharray: 3 3; }
  .tr-chart .line.dim.recognition { stroke: #C0C0C0; }
  .tr-chart .line.dim.category { stroke: #8b8b8b; }
  .tr-chart .line.dim.corec { stroke: #6a6a6a; }
  .tr-chart .line.dim.web { stroke: #4a4a4a; }
  .tr-chart .pt-current { fill: #fff; stroke: var(--pba-gold); stroke-width: 2; }
  .tr-chart .tier-band { fill-opacity: 0.04; }
  .tr-chart .flag-line { stroke: var(--pba-gold); stroke-width: 1; stroke-dasharray: 2 2; }
  .tr-chart .flag-text { font-family: 'Press Start 2P', monospace; font-size: 6px; fill: var(--pba-gold); letter-spacing: 0.1em; }
  .tr-chart .now-line { stroke: var(--pba-gold); stroke-width: 1; stroke-dasharray: 1 3; opacity: 0.5; }

  .tr-overlays { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pba-border-faint); }
  .tr-overlay-lbl { font-family: var(--pba-font-pixel); font-size: 7px; letter-spacing: 0.18em; color: var(--pba-fg-5); margin-right: 6px; }
  .tr-overlay { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--pba-border-faint); border-radius: 999px; background: #0d0d0d; font-family: var(--pba-font-pixel); font-size: 7px; letter-spacing: 0.16em; color: var(--pba-fg-4); cursor: pointer; user-select: none; transition: color .15s, border-color .15s, background .15s; }
  .tr-overlay:hover { color: #fff; border-color: var(--pba-fg-5); }
  .tr-overlay.on { color: var(--pba-gold); border-color: var(--pba-gold-border); background: var(--pba-gold-bg); }
  .tr-overlay .swatch { width: 10px; height: 3px; border-radius: 1px; background: #555; flex: none; }
  .tr-overlay[data-dim="recognition"] .swatch { background: #C0C0C0; }
  .tr-overlay[data-dim="category"] .swatch { background: #8b8b8b; }
  .tr-overlay[data-dim="corec"] .swatch { background: #6a6a6a; }
  .tr-overlay[data-dim="web"] .swatch { background: #4a4a4a; }

  .tr-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--pba-border-faint); border: 1px solid var(--pba-border-faint); border-radius: 6px; overflow: hidden; margin-top: 14px; }
  .tr-stat { background: #141414; padding: 14px 14px; }
  .tr-stat .lbl { font-family: var(--pba-font-pixel); font-size: 7px; letter-spacing: 0.18em; color: var(--pba-fg-5); margin-bottom: 6px; display: block; }
  .tr-stat .val { font-family: var(--pba-font-mono); font-size: 22px; color: #fff; font-weight: 700; line-height: 1; letter-spacing: -0.5px; }
  .tr-stat .val.pos { color: var(--pba-gold); }
  .tr-stat .val.neg { color: #FF6B6B; }
  .tr-stat .sub { font-family: var(--pba-font-pixel); font-size: 6.5px; letter-spacing: 0.16em; color: var(--pba-fg-6); margin-top: 4px; display: block; }
  .tr-stat .streak-flame { color: var(--pba-gold); font-family: var(--pba-font-mono); font-size: 16px; }

  .tr-xp { padding: 22px 26px 20px; margin-top: 14px; }
  .tr-xp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
  .tr-xp-eye { font-family: var(--pba-font-pixel); font-size: 7px; letter-spacing: 0.2em; color: var(--pba-gold); }
  .tr-xp-curr { font-family: var(--pba-font-mono); font-size: 14px; color: var(--pba-fg-3); }
  .tr-xp-curr b { color: #fff; font-weight: 700; }
  .tr-xp-track { position: relative; height: 28px; background: #050505; border: 1px solid var(--pba-border); border-radius: 4px; padding: 4px; box-shadow: inset 0 0 0 1px #000; }
  .tr-xp-cells { display: grid; grid-template-columns: repeat(50, 1fr); gap: 2px; height: 100%; }
  .tr-xp-cell { background: #1a1a1a; border-radius: 1px; }
  .tr-xp-cell.on { background: var(--pba-gold); box-shadow: 0 0 4px rgba(255, 215, 0, 0.4); }
  .tr-xp-flags { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 22px; }
  .tr-xp-flag { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; position: relative; }
  .tr-xp-flag::before { content: ''; position: absolute; top: -22px; left: 0; width: 1px; height: 18px; background: var(--pba-border); }
  .tr-xp-flag.passed::before { background: var(--pba-gold); }
  .tr-xp-flag.current::before { background: var(--pba-gold); width: 2px; box-shadow: 0 0 6px rgba(255, 215, 0, 0.6); }
  .tr-xp-flag .tier-name { font-family: var(--pba-font-pixel); font-size: 7.5px; letter-spacing: 0.18em; color: var(--pba-fg-5); }
  .tr-xp-flag.passed .tier-name { color: var(--pba-fg-3); }
  .tr-xp-flag.current .tier-name { color: var(--pba-gold); }
  .tr-xp-flag .tier-range { font-family: var(--pba-font-mono); font-size: 11px; color: var(--pba-fg-5); }
  .tr-xp-flag.passed .tier-range { color: var(--pba-fg-3); }
  .tr-xp-flag.current .tier-range { color: #fff; }
  .tr-xp-flag .tier-mark { font-family: var(--pba-font-pixel); font-size: 9px; color: var(--pba-fg-6); }
  .tr-xp-flag.passed .tier-mark { color: var(--pba-gold); }
  .tr-xp-flag.current .tier-mark { color: var(--pba-gold); }
  .tr-xp-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--pba-border-faint); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
  .tr-xp-foot .msg { font-size: 13px; color: var(--pba-fg-2); }
  .tr-xp-foot .msg b { color: var(--pba-gold); font-weight: 600; }

  .tr-heat { padding: 22px 26px 20px; margin-top: 14px; }
  .tr-heat-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
  .tr-heat-grid { display: grid; grid-template-columns: 22px 1fr; gap: 6px; }
  .tr-heat-days { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; align-items: center; padding-top: 16px; }
  .tr-heat-day-lbl { font-family: var(--pba-font-pixel); font-size: 6.5px; letter-spacing: 0.12em; color: var(--pba-fg-6); height: 14px; line-height: 14px; }
  .tr-heat-cells-wrap { overflow: hidden; }
  .tr-heat-months { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; font-family: var(--pba-font-pixel); font-size: 6.5px; letter-spacing: 0.12em; color: var(--pba-fg-5); margin-bottom: 4px; height: 12px; }
  .tr-heat-month { grid-column: span 4; }
  .tr-heat-month:nth-child(2) { grid-column: span 5; }
  .tr-heat-month:nth-child(3) { grid-column: span 4; }
  .tr-heat-cells { display: grid; grid-template-columns: repeat(13, 1fr); grid-auto-rows: 14px; grid-auto-flow: column; gap: 3px; }
  .tr-heat-cells > .col { display: grid; grid-template-rows: repeat(7, 14px); gap: 3px; }
  .tr-heat-cell { background: #1a1a1a; border-radius: 2px; transition: transform .1s; }
  .tr-heat-cell:hover { transform: scale(1.4); }
  .tr-heat-cell.l0 { background: #0d0d0d; border: 1px solid #1a1a1a; }
  .tr-heat-cell.l1 { background: #2a2410; }
  .tr-heat-cell.l2 { background: #4a3d18; }
  .tr-heat-cell.l3 { background: #806a23; }
  .tr-heat-cell.l4 { background: #b89730; }
  .tr-heat-cell.l5 { background: var(--pba-gold); box-shadow: 0 0 3px rgba(255,215,0,0.4); }
  .tr-heat-cell.empty { background: #050505; border: 1px solid #0e0e0e; }
  .tr-heat-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--pba-border-faint); flex-wrap: wrap; gap: 12px; }
  .tr-heat-legend { display: flex; align-items: center; gap: 6px; font-family: var(--pba-font-pixel); font-size: 7px; letter-spacing: 0.16em; color: var(--pba-fg-5); }
  .tr-heat-legend i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
  .tr-heat-legend i.l0 { background: #0d0d0d; border: 1px solid #1a1a1a; }
  .tr-heat-legend i.l1 { background: #2a2410; }
  .tr-heat-legend i.l2 { background: #4a3d18; }
  .tr-heat-legend i.l3 { background: #806a23; }
  .tr-heat-legend i.l4 { background: #b89730; }
  .tr-heat-legend i.l5 { background: var(--pba-gold); }

  .tr-vol-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .tr-vol-card { padding: 18px 18px 16px; }
  .tr-vol-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; gap: 8px; }
  .tr-vol-name { font-family: var(--pba-font-pixel); font-size: 7.5px; letter-spacing: 0.18em; color: var(--pba-fg-3); }
  .tr-vol-icon { font-family: var(--pba-font-mono); font-size: 14px; color: var(--pba-gold); line-height: 1; }
  .tr-vol-num { font-family: var(--pba-font-mono); font-size: 36px; color: #fff; font-weight: 700; line-height: 1; letter-spacing: -1.5px; }
  .tr-vol-num span { font-size: 14px; color: var(--pba-fg-5); font-weight: 400; margin-left: 4px; }
  .tr-vol-delta { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-family: var(--pba-font-pixel); font-size: 7px; letter-spacing: 0.16em; }
  .tr-vol-delta.pos { color: var(--pba-gold); }
  .tr-vol-delta.neg { color: #FF6B6B; }