#chart-container {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  #chart-container.hidden-view,
  #table-container.hidden-view { display: none; }
  #chart-container.expanded {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #faf9f5;
    padding: 52px 20px 20px;
    box-sizing: border-box;
  }
  body.chart-expanded { overflow: hidden; }
  .chart-close-btn {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 1001;
    width: 36px;
    height: 36px;
    padding: 0;
    line-height: 1;
    font-size: 1.4rem;
    font-family: monospace;
    background: #e8e4dc;
    border: 1px solid #bbb;
    border-radius: 4px;
    color: #333;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
  }
  .chart-close-btn:hover { background: #d8d4cc; }
  #chart-container.expanded .chart-close-btn { display: flex; }
  .chart-pan-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    width: 32px;
    height: 60px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid rgba(60, 60, 60, 0.14);
    background: rgba(250, 249, 245, 0.70);
    color: #4a5568;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.38;
    transition: opacity 0.18s, background 0.18s;
  }
  .chart-pan-btn:hover { opacity: 1; background: rgba(250, 249, 245, 0.97); }
  .chart-pan-btn svg { width: 18px; height: 18px; }
  .chart-pan-btn-prev { left: 4px; }
  .chart-pan-btn-next { right: 4px; }
  .chart-inner {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
  }
  canvas { background: #fff; border-radius: 4px; border: 1px solid #e0ddd8; cursor: crosshair; }
  #chart-overlay {
    position: absolute; inset: 0; z-index: 10;
    display: none; align-items: center; justify-content: center;
    background: rgba(250, 249, 245, 0.75); border-radius: 4px;
  }
  .spinner {
    width: 36px; height: 36px; border-radius: 50%;
    border: 3px solid #d0cdc8;
    border-top-color: #4a5568;
    animation: spin 0.7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  #selection-rect {
    position: absolute; top: 0; pointer-events: none; display: none;
    background: rgba(60, 60, 60, 0.10);
    border-left: 1.5px solid rgba(60, 60, 60, 0.35);
    border-right: 1.5px solid rgba(60, 60, 60, 0.35);
  }