.product-window { border: 1px solid #424849; border-radius: 9px; overflow: hidden; background: #16191b; box-shadow: 0 26px 80px #00000024; }
.preview-titlebar { height: 35px; padding: 0 14px; background: #202529; border-bottom: 1px solid #303639; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 9px; color: #a9b1b6; }
.window-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #565c5e; margin-right: 5px; }
.preview-titlebar .preview-demo { border: 1px solid #424849; border-radius: 3px; padding: 1px 5px; font-size: 8px; }
.preview-workspace { display: grid; grid-template-columns: 148px 1fr; }
.preview-sidebar { padding: 20px 14px; position: relative; background: #191d20; border-right: 1px solid #303639; font-size: 10px; color: #a9b1b6; }
.preview-home { color: #cfb783; font-size: 11px; margin-bottom: 28px; }
.preview-group { font-size: 8px; letter-spacing: .08em; color: #89949b; margin: 21px 0 10px; }
.preview-selected, .preview-stock { padding: 8px 10px; border-radius: 3px; display: flex; justify-content: space-between; gap: 6px; font-size: 9px; }
.preview-selected { background: #2c2a24; border-left: 2px solid #cfb783; color: #cfb783; }
.preview-stock b { font-weight: 500; }
.preview-sidebar p { margin: 13px 8px; font-size: 9px; }
.preview-sidebar-foot { position: absolute; bottom: 16px; left: 20px; font-size: 8px; color: #89949b; }
.preview-charts { padding: 19px 23px 15px; min-width: 0; }
.preview-instrument { display: flex; justify-content: space-between; align-items: center; }
.preview-instrument small { font-size: 7px; color: #89949b; letter-spacing: .1em; }
.preview-instrument h3 { font-size: 15px; margin: 0; font-weight: 550; }
.preview-instrument h3 span { margin-left: 9px; font-size: 9px; color: #cfb783; }
.preview-price { color: #cfb783; font-size: 21px; font-weight: 550; font-variant-numeric: tabular-nums; line-height: 1.3; }
.preview-price small { display: block; text-align: right; font-weight: 400; color: #89949b; font-size: 8px; }
.preview-chart-controls { display: flex; gap: 17px; font-size: 8px; align-items: center; padding-block: 16px 10px; color: #a9b1b6; }
.preview-chart-controls .preview-active { border: 1px solid #514a3d; border-radius: 3px; padding: 2px 8px; color: #cfb783; }
.preview-spacer { flex: 1; }
.preview-chart { display: block; width: 100%; height: 190px; border: 1px solid #292f32; }
.preview-grid path { stroke: #252b2e; stroke-width: 1; fill: none; }
.preview-ma { stroke: #76c5c8; stroke-width: 1.5; fill: none; opacity: .8; }
.preview-reference { stroke: #cfb783; stroke-width: 1; stroke-dasharray: 3 5; opacity: .4; }
.preview-axis { display: flex; justify-content: space-between; font-size: 7px; color: #89949b; padding: 6px 20px 15px; }
.preview-cb-heading { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 11px 0 7px; border-top: 1px solid #303639; }
.preview-cb-heading b { font-size: 10px; margin-right: 10px; color: #cfb783; }
.preview-cb-heading .preview-price { font-size: 16px; }
.preview-metrics { display: flex; gap: 18px; font-size: 8px; color: #89949b; margin-bottom: 10px; }
.preview-metrics b { color: #a9b1b6; font-weight: 500; margin-left: 4px; }
.preview-metrics b.conversion-tone { color: #76c5c8; }
.preview-cb-chart { height: 116px; }
.preview-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 12px; }
.preview-bottom > span { border: 1px solid #303639; border-radius: 3px; padding: 6px 9px; display: flex; justify-content: space-between; color: #a9b1b6; font-size: 9px; }
.preview-bottom b { color: #89949b; font-weight: 400; }
@media (min-width: 1350px) {
  .preview-workspace { grid-template-columns: 104px 1fr; }
  .preview-sidebar { padding-inline: 9px; }
  .preview-selected, .preview-stock { flex-direction: column; gap: 1px; }
  .preview-sidebar-foot { left: 10px; font-size: 7px; }
  .preview-charts { padding: 14px 16px; }
  .preview-chart { height: 160px; }
  .preview-cb-chart { height: 88px; }
}
@media (max-width: 700px) {
  .preview-workspace { grid-template-columns: 100px 1fr; }
  .preview-sidebar { padding-inline: 8px; }
  .preview-selected, .preview-stock { flex-direction: column; gap: 1px; }
  .preview-charts { padding: 12px; }
  .preview-sidebar-foot { left: 10px; font-size: 7px; }
  .preview-chart { height: 145px; }
  .preview-cb-chart { height: 82px; }
}
@media (max-width: 450px) {
  .preview-sidebar { display: none; }
  .preview-workspace { grid-template-columns: 1fr; }
  .preview-titlebar { padding-inline: 10px; font-size: 8px; }
  .preview-charts { padding: 13px; }
  .preview-instrument h3 { font-size: 13px; }
  .preview-price { font-size: 18px; }
  .preview-metrics { gap: 12px; font-size: 7px; }
}