.reference-page { height: 100vh; direction: rtl; }
.reference-layout { height: 100%; display: grid; grid-template-columns: 360px 1fr; }
.reference-chart { width: 100%; height: 100%; min-height: 320px; background: #fff; }
.reference-side { background: #fafbfc; border-left: 1px solid #e6e8eb; padding: 14px; overflow: auto; }
.reference-box { background: #fff; border: 1px solid #e6e8eb; border-radius: 12px; padding: 12px; }
.reference-title { margin: 0 0 10px; font-weight: 800; }
.reference-muted { color: #6b7280; font-size: 12px; }
.reference-selected-list { min-height: 0; margin: 10px 0 0; padding: 0 18px; font-size: 14px; }
.reference-selected-list li { margin: 6px 0; }
.reference-total { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; font-weight: 800; }
.reference-button { width: 100%; margin-top: 12px; border: 0; border-radius: 12px; padding: 12px; background: #111827; color: #fff; cursor: pointer; font-weight: 800; transition: opacity 160ms ease-out, transform 160ms ease-out; }
.reference-button:not(:disabled):active { transform: scale(.98); }
.reference-button:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 900px) {
  .reference-page { height: auto; min-height: 100vh; }
  .reference-layout { display: flex; flex-direction: column; height: auto; min-height: 100%; }
  .reference-side { border-left: 0; border-bottom: 1px solid #e6e8eb; position: sticky; top: 1000px; z-index: 10; background: #fafbfc; max-height: 46vh; padding: 10px; }
  .reference-chart { height: 54vh; min-height: 420px; }
}
@media (max-width: 480px) { 
  .reference-side { max-height: 52vh; }
  .reference-chart { height: 75vh; min-height: 380px; } 
}