.ht-performance { padding:64px 0 76px; border-top:1px solid #ef625a25; }
.ht-performance-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px; }
.ht-performance-intro h2 { margin:8px 0 10px; font-family:var(--display); font-size:48px; line-height:1.1; letter-spacing:-1.7px; color:#f5eff3; }
.ht-performance-intro h2 span { color:#ef8271; }
.ht-performance-intro p { max-width:620px; margin:0; color:#c2b7be; font-size:16px; line-height:1.7; }
.ht-performance-label { display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border:1px solid #71d8a52c; border-radius:100px; background:#71d8a507; color:#b2d9c5; font-size:11px; font-weight:600; letter-spacing:.04em; white-space:nowrap; }
.ht-performance-label svg { width:14px; height:14px; }
.ht-performance-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
.ht-performance-metric { min-width:0; padding:20px; border:1px solid #ffffff10; border-radius:12px; background:linear-gradient(135deg,#181217,#0f0e12); }
.ht-performance-metric > span { display:block; color:#c1b3bd; font-size:12px; font-weight:550; }
.ht-performance-metric strong { display:block; margin:6px 0 4px; color:#f6f0f5; font-size:36px; font-weight:650; line-height:1.25; letter-spacing:-1.2px; font-variant-numeric:tabular-nums; }
.ht-performance-metric strong.is-positive { color:#85e4b1; }
.ht-performance-metric strong.is-negative { color:#ff9488; }
.ht-performance-metric small { color:#988d95; font-size:10px; line-height:1.5; }
.ht-performance-panel { padding:24px; border:1px solid #ef625a2a; border-radius:18px; background:linear-gradient(135deg,#171116,#0c0c10); }
.ht-performance-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.ht-performance-toolbar h3 { margin:0; color:#f4edf3; font-size:18px; font-weight:650; letter-spacing:-.4px; }
.ht-performance-toolbar p { margin:5px 0 0; color:#a99aa3; font-size:11px; }
.ht-performance-ranges { display:flex; gap:5px; flex-wrap:wrap; }
.ht-performance-ranges button,.ht-performance-views button { min-height:32px; padding:6px 12px; border:1px solid #ffffff15; border-radius:6px; background:#ffffff03; color:#c8b9c2; font:550 11px var(--body); cursor:pointer; }
.ht-performance-ranges button[aria-pressed="true"],.ht-performance-views button[aria-pressed="true"] { color:#ffd5ce; border-color:#ef625a65; background:#ef625a14; }
.ht-performance-ranges button:hover,.ht-performance-views button:hover { color:#fff; border-color:#ef625a65; }
.ht-performance-ranges button:focus-visible,.ht-performance-views button:focus-visible,.ht-performance-chart:focus-visible { outline:2px solid var(--red); outline-offset:4px; }
.ht-performance-ranges button:disabled,.ht-performance-views button:disabled { opacity:.45; cursor:default; }
.ht-performance-views { display:flex; gap:5px; margin:0 0 16px; }
.ht-performance-chart-wrap { position:relative; min-width:0; overflow:hidden; }
.ht-performance-chart { display:block; width:100%; height:auto; aspect-ratio:1000 / 340; border-radius:8px; background:#090b0e; font-family:var(--body); }
.ht-performance-grid { stroke:#ffffff09; stroke-width:1; }
.ht-performance-axis { fill:#887a87; font-size:12px; font-variant-numeric:tabular-nums; }
.ht-performance-zero { stroke:#9d859546; stroke-width:1; stroke-dasharray:5 6; }
.ht-performance-area { fill:#ef625a0c; }
.ht-performance-line { fill:none; stroke:#f78776; stroke-width:2.8; stroke-linejoin:round; stroke-linecap:round; }
.ht-performance-point { fill:#111015; stroke:#f7a28b; stroke-width:2; }
.ht-performance-point.is-active { fill:#ffd3c2; stroke:#fff1e4; stroke-width:2.5; }
.ht-performance-bar-positive { fill:#75cfa3; fill-opacity:.7; }
.ht-performance-bar-negative { fill:#f17c73; fill-opacity:.75; }
.ht-performance-cursor { stroke:#fca28b66; stroke-width:1; stroke-dasharray:3 5; }
.ht-performance-inspector { display:flex; align-items:center; gap:14px; flex-wrap:wrap; min-height:40px; padding:12px 2px 0; color:#c6b9c2; font-size:12px; }
.ht-performance-inspector strong { color:#f1d5ce; font-size:12px; font-weight:600; }
.ht-performance-inspector small { color:#a798a3; font-size:11px; }
.ht-performance-report-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; padding-top:14px; border-top:1px solid #ffffff0c; color:#a598a2; font-size:11px; }
.ht-performance-state { display:flex; align-items:center; gap:7px; color:#b1d7c2; }
.ht-performance-state::before { content:''; width:5px; height:5px; border-radius:50%; background:#77d2a3; }
.ht-performance-state.is-pending { color:#c1ad97; }
.ht-performance-state.is-pending::before { background:#c1ad97; }
.ht-performance-empty { margin:0; padding:38px 20px; text-align:center; border:1px dashed #ffffff19; border-radius:8px; background:#090b0e; color:#c2b4bd; font-size:14px; }
.ht-performance-chart-wrap[hidden],.ht-performance-empty[hidden] { display:none; }
.ht-performance-note { margin:16px 2px 0; color:#a799a3; font-size:12px; line-height:1.7; }
.ht-performance-bottom { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:24px; }
.ht-performance-bottom p { margin:0; max-width:680px; color:#ac9da6; font-size:12px; line-height:1.7; }
.ht-performance-bottom .primary-button { flex-shrink:0; padding:10px 22px; font-size:14px; gap:7px; }
.ht-performance-months { margin-top:24px; padding:22px; border:1px solid #ffffff10; border-radius:14px; background:#100e12; }
.ht-performance-months h3 { margin:0 0 6px; color:#eee6ed; font-size:18px; font-weight:600; }
.ht-performance-months > p { margin:0 0 16px; color:#a99aa4; font-size:12px; }
.ht-performance-month-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.ht-performance-month { display:flex; flex-direction:column; justify-content:space-between; gap:12px; padding:14px; min-height:92px; border:1px solid #ffffff10; border-radius:8px; background:#ffffff02; color:#a89ca3; font-size:11px; }
.ht-performance-month strong { font-size:21px; color:#eee5ec; font-weight:600; letter-spacing:-.5px; }
.ht-performance-month.is-positive { border-color:#78d4a42e; background:#78d4a40a; }
.ht-performance-month.is-positive strong { color:#9de5bf; }
.ht-performance-month.is-negative { border-color:#ef827530; background:#ef82750b; }
.ht-performance-month.is-negative strong { color:#ffad9f; }
.ht-performance-methods { margin-top:24px; padding:18px 20px; border:1px solid #ffffff10; border-radius:10px; color:#b4a3af; font-size:13px; line-height:1.75; }
.ht-performance-methods summary { color:#e0cbd7; font-weight:600; cursor:pointer; }
.ht-performance-methods p { margin:12px 0 0; }
.ht-performance-methods a { color:#ecc1b6; }
.ht-performance-page { padding:50px 0 80px; }
.ht-performance-page .ht-performance { padding:36px 0 0; border-top:0; }
.ht-performance-page .ht-performance-intro h2 { font-size:60px; }
.ht-performance-page .ht-performance-note { max-width:900px; }
@media(max-width:850px) {
  .ht-performance-intro { align-items:flex-start; flex-direction:column; gap:16px; }
  .ht-performance-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ht-performance-toolbar { align-items:flex-start; flex-direction:column; }
  .ht-performance-month-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .ht-performance-bottom { flex-direction:column; align-items:flex-start; gap:16px; }
}
@media(max-width:600px) {
  .ht-performance { padding:44px 0 52px; }
  .ht-performance-intro h2,.ht-performance-page .ht-performance-intro h2 { font-size:36px; letter-spacing:-1.1px; }
  .ht-performance-intro p { font-size:14px; }
  .ht-performance-metrics { gap:10px; }
  .ht-performance-metric { padding:14px; }
  .ht-performance-metric strong { font-size:29px; }
  .ht-performance-panel { padding:16px; border-radius:14px; }
  .ht-performance-chart { aspect-ratio:1000 / 480; }
  .ht-performance-ranges button,.ht-performance-views button { padding:6px 10px; }
  .ht-performance-report-meta { align-items:flex-start; flex-direction:column; gap:6px; }
  .ht-performance-month-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ht-performance-months { padding:16px; }
  .ht-performance-month { padding:10px; min-height:82px; }
  .ht-performance-month strong { font-size:18px; }
  .ht-performance-inspector { gap:6px 12px; }
  .ht-performance-page { padding:20px 0 50px; }
}
@media(prefers-reduced-motion:reduce) { .ht-performance * { scroll-behavior:auto; } }
@media(forced-colors:active) {
  .ht-performance-panel,.ht-performance-metric,.ht-performance-month,.ht-performance-methods,.ht-performance-ranges button,.ht-performance-views button { border-color:CanvasText; }
  .ht-performance-line,.ht-performance-point { stroke:CanvasText; }
}
.ht-performance-chart[data-narrow="true"] .ht-performance-axis { font-size: 28px; }
.ht-performance-chart[data-narrow="true"] .ht-performance-line { stroke-width: 7px; }
.ht-performance-home-link { color:var(--text); text-decoration:none; }