.pm-page { --pm-up: var(--ls-success); --pm-down: var(--ls-decline); --pm-flat: var(--ls-tertiary); max-width: none; }
.pm-headline { margin: 0; max-width: 760px; padding-left: 14px; border-left: 2px solid var(--ls-accent); color: var(--ls-ink); font-size: 14px; line-height: 1.55; }
.pm-headline:empty { display: none; }
.pm-jump { flex: none; padding: 8px 12px; border: 1px solid var(--ls-strong-rule); border-radius: 999px; color: var(--ls-secondary); font-size: 12px; text-decoration: none; }
.pm-jump:hover { border-color: var(--ls-accent); color: var(--ls-ink); }
.pm-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin-bottom: 12px; padding: 12px; border: 1px solid var(--ls-rule); border-radius: var(--ls-radius); background: var(--ls-card); }
.pm-controls label { display: flex; flex-direction: column; gap: 5px; color: var(--ls-tertiary); font-size: 11px; }
.pm-controls select { min-width: 150px; padding: 8px 10px; border: 1px solid var(--ls-strong-rule); border-radius: 5px; background: var(--ls-input); color: var(--ls-ink); font: inherit; font-size: 12px; }
.pm-controls .outline { margin-left: auto; }
.pm-seg { display: inline-flex; padding: 3px; border: 1px solid var(--ls-rule); border-radius: 8px; background: var(--ls-stone); }
.pm-seg button { padding: 7px 14px; border: 0; border-radius: 6px; background: transparent; color: var(--ls-secondary); font: inherit; font-size: 12px; cursor: pointer; }
.pm-seg button[aria-pressed="true"] { background: var(--ls-card); color: var(--ls-ink); box-shadow: 0 0 0 1px var(--ls-strong-rule); }
.pm-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.pm-filter > span { color: var(--ls-tertiary); font-size: 11px; }
.pm-filter button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--ls-rule); border-radius: 999px; background: var(--ls-card); color: var(--ls-secondary); font: inherit; font-size: 12px; cursor: pointer; }
.pm-filter button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ls-faint); }
.pm-filter button.up::before { background: var(--pm-up); }
.pm-filter button.down::before { background: var(--pm-down); }
.pm-filter button.flat::before { background: var(--pm-flat); }
.pm-filter button.all::before { display: none; }
.pm-filter button small { color: var(--ls-tertiary); font-variant-numeric: tabular-nums; }
.pm-filter button:hover { border-color: var(--ls-strong-rule); color: var(--ls-ink); }
.pm-filter button[aria-pressed="true"] { border-color: var(--ls-accent); background: color-mix(in srgb, var(--ls-accent) 10%, var(--ls-card)); color: var(--ls-ink); }
.pm-section { margin-top: 26px; }
.pm-section h2 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.02em; }
.pm-sub { margin: 0 0 14px; color: var(--ls-tertiary); font-size: 12px; line-height: 1.5; }
.pm-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: 10px 0 14px; overflow: hidden; border: 1px solid var(--ls-rule); border-radius: var(--ls-radius); background: var(--ls-rule); }
.pm-stat { padding: 14px 16px; background: var(--ls-card); min-width: 0; }
.pm-stat span { display: block; color: var(--ls-tertiary); font-size: 11px; }
.pm-stat strong { display: block; margin: 5px 0 3px; font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pm-stat small { display: block; overflow: hidden; color: var(--ls-tertiary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.pm-stat.up strong { color: var(--pm-up); } .pm-stat.down strong { color: var(--pm-down); }
.pm-meter { display: flex; height: 12px; overflow: hidden; border-radius: 999px; background: var(--ls-stone); gap: 2px; }
.pm-meter span { min-width: 0; }
.pm-meter .up, .pm-reading.up::before, .pm-bars .up, .pm-bars-stack .up, .pm-state-bar .up { background: var(--pm-up); }
.pm-meter .down, .pm-reading.down::before, .pm-bars .down, .pm-bars-stack .down, .pm-state-bar .down { background: var(--pm-down); }
.pm-meter .flat, .pm-reading.flat::before, .pm-bars .flat, .pm-bars-stack .flat, .pm-state-bar .flat { background: var(--pm-flat); }
.pm-dist { padding: 22px 16px 12px; border: 1px solid var(--ls-rule); border-radius: var(--ls-radius); background: var(--ls-card); }
.pm-bars { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 150px; }
.pm-bars > span { flex: 1; min-height: 2px; height: var(--h); border-radius: 3px 3px 0 0; opacity: .85; transition: opacity var(--ls-motion); }
.pm-bars > span:hover { opacity: 1; }
.pm-bars > span.dim { opacity: .2; }
.pm-zero { position: absolute; top: -6px; bottom: 0; left: 50%; border-left: 1px dashed var(--ls-faint); }
.pm-marker { position: absolute; top: -22px; bottom: 0; width: 0; border-left: 2px solid var(--ls-accent); font-style: normal; }
.pm-marker b { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); padding: 2px 7px; border-radius: 999px; background: var(--ls-accent); color: #fff; font-size: 10px; font-weight: 500; white-space: nowrap; }
.pm-marker.edge-right b { left: auto; right: -2px; transform: none; }
.pm-marker.edge-left b { left: -2px; transform: none; }
.pm-axis { display: flex; justify-content: space-between; margin-top: 8px; color: var(--ls-tertiary); font-size: 11px; }
.pm-trio { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: stretch; }
.pm-trio > [hidden] { display: none; }
.pm-panel { min-width: 0; padding: 16px; border: 1px solid var(--ls-rule); border-radius: var(--ls-radius); background: var(--ls-card); }
.pm-panel h2 { margin: 0 0 4px; font-size: 16px; letter-spacing: -.02em; }
.pm-panel .pm-sub { margin-bottom: 12px; }
.pm-panel .pm-dist { padding: 22px 0 4px; border: 0; background: none; }
.pm-bars-stack { display: flex; align-items: stretch; gap: 4px; height: 130px; }
.pm-bars-stack > div { display: flex; flex: 1; flex-direction: column; overflow: hidden; border-radius: 3px; background: var(--ls-stone); }
.pm-bars-stack > div span { min-height: 0; }
.pm-state-list { display: flex; flex-direction: column; max-height: 250px; overflow: auto; }
.pm-state-list button { display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px 66px; align-items: center; gap: 10px; padding: 6px 4px; border: 0; border-top: 1px solid var(--ls-rule); background: transparent; color: var(--ls-ink); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.pm-state-list button:hover, .pm-state-list button.active { background: color-mix(in srgb, var(--ls-accent) 8%, transparent); }
.pm-state-list small { color: var(--ls-tertiary); text-align: right; font-variant-numeric: tabular-nums; }
.pm-state-list b { text-align: right; font-weight: 500; }
.pm-diverge { position: relative; height: 8px; border-radius: 4px; background: var(--ls-stone); }
.pm-diverge::before { content: ""; position: absolute; top: -2px; bottom: -2px; left: 50%; border-left: 1px solid var(--ls-faint); }
.pm-diverge i { position: absolute; top: 0; bottom: 0; width: var(--w); }
.pm-diverge i.up { left: 50%; border-radius: 0 4px 4px 0; background: var(--pm-up); }
.pm-diverge i.down { right: 50%; border-radius: 4px 0 0 4px; background: var(--pm-down); }
.pm-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pm-boards.single { grid-template-columns: minmax(0, 1fr); }
.pm-board h3 { margin: 0 0 6px; font-size: 14px; }
.pm-board h3 { margin-top: 0; }
.pm-board.up h3 { color: var(--pm-up); } .pm-board.down h3 { color: var(--pm-down); }
.pm-board ol { margin: 0; padding: 0; list-style: none; }
.pm-board li { border-top: 1px solid var(--ls-rule); }
.pm-board button { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px 2px; border: 0; background: transparent; color: var(--ls-ink); font: inherit; text-align: left; cursor: pointer; }
.pm-board button:hover .pm-who strong { color: var(--ls-accent); }
.pm-rank { width: 28px; color: var(--ls-tertiary); font-size: 12px; font-variant-numeric: tabular-nums; }
.pm-who { position: relative; display: block; flex: 1; min-width: 0; padding-bottom: 7px; }
.pm-who strong { display: block; overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.pm-who small { display: block; margin-top: 2px; color: var(--ls-tertiary); font-size: 11px; }
.pm-who i { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--w); border-radius: 2px; background: var(--pm-up); opacity: .7; }
.pm-board.down .pm-who i, .pm-who i.down { background: var(--pm-down); }
.pm-board b { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-board.up b, .pm-board b.up { color: var(--pm-up); } .pm-board.down b, .pm-board b.down { color: var(--pm-down); }
.pm-board.swing h3 { color: var(--ls-ink); }
.pm-board .pm-sub { margin: 8px 0 0; }
.pm-workspace { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 26px; }
.pm-workspace > .pm-section { margin-top: 0; min-width: 0; }
.pm-spotlight { padding: 18px; border: 1px solid var(--ls-rule); border-radius: var(--ls-radius); background: var(--ls-card); }
.pm-spot-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pm-spot-head h2 { margin: 3px 0 0; font-size: clamp(20px, 2vw, 26px); }
.pm-spot-grid { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); gap: 16px; margin: 16px 0; }
.pm-big { padding: 14px 16px; border-radius: 8px; background: var(--ls-stone); }
.pm-big span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.pm-big strong { display: block; margin: 4px 0; font-size: 34px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pm-big small { color: var(--ls-tertiary); font-size: 11px; line-height: 1.4; }
.pm-big.up span, .pm-big.up strong, .pm-val.up { color: var(--pm-up); }
.pm-big.down span, .pm-big.down strong, .pm-val.down { color: var(--pm-down); }
.pm-calc { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border: 1px dashed var(--ls-strong-rule); border-radius: 8px; }
.pm-calc div { min-width: 0; }
.pm-calc span { display: block; color: var(--ls-tertiary); font-size: 11px; }
.pm-calc strong { display: block; margin-top: 4px; font-size: 20px; font-variant-numeric: tabular-nums; }
.pm-calc i { color: var(--ls-faint); font-size: 20px; font-style: normal; }
.pm-calc .result strong { color: var(--ls-accent); }
.pm-lookback { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 14px; overflow: hidden; border: 1px solid var(--ls-rule); border-radius: 8px; background: var(--ls-rule); }
.pm-lookback div { padding: 10px 12px; background: var(--ls-card); }
.pm-lookback span { display: block; color: var(--ls-tertiary); font-size: 11px; }
.pm-lookback strong { display: block; margin-top: 3px; font-size: 16px; }
.pm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 18px; margin: 0 0 16px; }
.pm-facts div { padding-left: 10px; border-left: 2px solid var(--ls-rule); }
.pm-facts dt { color: var(--ls-tertiary); font-size: 11px; }
.pm-facts dd { margin: 3px 0 0; font-size: 14px; font-weight: 500; }
.pm-facts small { display: block; margin-top: 2px; color: var(--ls-tertiary); font-size: 11px; font-weight: 400; }
.pm-ranking { padding: 14px; border: 1px solid var(--ls-rule); border-radius: var(--ls-radius); background: var(--ls-card); }
.pm-table-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.pm-table-head h2 { margin: 0; font-size: 16px; }
.pm-table-head label { color: var(--ls-secondary); font-size: 11px; }
.pm-table-head select { margin-left: 4px; padding: 4px; border: 1px solid var(--ls-rule); border-radius: 5px; background: var(--ls-input); color: var(--ls-ink); }
.pm-table-scroll { max-height: 760px; overflow: auto; }
.pm-table { width: 100%; font-size: 12px; }
.pm-table th { position: sticky; top: 0; background: var(--ls-card); text-align: left; }
.pm-table td { padding: 7px 6px; }
.pm-table td:first-child { color: var(--ls-tertiary); font-variant-numeric: tabular-nums; }
.pm-table .text-button { padding: 0; text-align: left; font-size: 12px; }
.pm-table tr.active { background: color-mix(in srgb, var(--ls-accent) 10%, transparent); }
.pm-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-guide { padding: 26px; border: 1px solid var(--ls-rule); border-radius: var(--ls-radius); background: var(--ls-card); scroll-margin-top: 16px; }
.pm-guide h3 { margin: 22px 0 8px; font-size: 14px; }
.pm-guide p, .pm-guide li { color: var(--ls-secondary); font-size: 13px; line-height: 1.6; }
.pm-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 18px 0 12px; }
.pm-step { flex: 1; min-width: 180px; padding: 14px 16px; border: 1px solid var(--ls-rule); border-radius: 8px; background: var(--ls-stone); }
.pm-step span { display: block; color: var(--ls-tertiary); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.pm-step strong { display: block; margin-top: 4px; font-size: 14px; }
.pm-step.result { border-color: var(--ls-accent); background: color-mix(in srgb, var(--ls-accent) 8%, var(--ls-card)); }
.pm-flow i { align-self: center; color: var(--ls-faint); font-size: 22px; font-style: normal; }
.pm-example { margin: 0 0 18px; padding: 10px 14px; border-radius: 6px; background: var(--ls-stone); }
.pm-readings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pm-reading { position: relative; padding: 14px 16px 12px 20px; overflow: hidden; border: 1px solid var(--ls-rule); border-radius: 8px; }
.pm-reading::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; }
.pm-reading strong { font-size: 13px; }
.pm-reading p { margin: 5px 0 0; }
.pm-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pm-guide ul { margin: 0; padding-left: 18px; }
@media (max-width: 1100px) { .pm-workspace { grid-template-columns: minmax(0, 1fr); } .pm-trio { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); } .pm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .pm-boards, .pm-readings, .pm-guide-grid, .pm-spot-grid { grid-template-columns: minmax(0, 1fr); }
  .pm-lookback { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-controls .outline { margin-left: 0; }
}
.pm-search { position: relative; margin-bottom: 14px; }
.pm-search label { display: block; margin-bottom: 5px; color: var(--ls-tertiary); font-size: 11px; }
.pm-search-box { position: relative; }
.pm-search input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--ls-strong-rule); border-radius: 6px; background: var(--ls-input); color: var(--ls-ink); font: inherit; font-size: 13px; }
.pm-search input:focus { outline: 2px solid var(--ls-accent); outline-offset: 1px; }
.pm-search-box ul { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 320px; margin: 0; padding: 4px; overflow: auto; list-style: none; border: 1px solid var(--ls-strong-rule); border-radius: 8px; background: var(--ls-card); box-shadow: var(--ls-shadow); }
.pm-search-box li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 5px; font-size: 13px; cursor: pointer; }
.pm-search-box li:hover, .pm-search-box li:focus { background: color-mix(in srgb, var(--ls-accent) 12%, transparent); }
.pm-search-box li.empty { color: var(--ls-tertiary); cursor: default; }
.pm-search-box li small { color: var(--ls-tertiary); font-size: 11px; }
.pm-search-note { margin: 8px 0 0; padding: 8px 10px; border-radius: 6px; background: color-mix(in srgb, var(--ls-warning) 12%, var(--ls-card)); color: var(--ls-ink); font-size: 12px; }