body { margin:0; padding:16px; font-family: Arial, sans-serif; background:#fff; color:#111; }
    .controls{
      max-width:1000px;
      margin:0 auto 8px auto;
      display:flex;
      gap:12px;
      align-items:center;
      font-size:14px;
      flex-wrap:wrap;

      position: relative; /* ✅ добавь */
      padding-right: 360px; /* ✅ резерв справа под панель (чтобы не перекрывать чекбоксы) */
    }

    .controls-top{
      display:flex;
      gap:12px;
      align-items:flex-start;
    }

    .controls-row{
      flex: 1 1 auto;
      min-width: 0;
    }

    #amp-panel{
      position: absolute;  /* ✅ вне потока */
      top: 0;
      right: 0;            /* ✅ до правой границы */
      z-index: 50;

      width: 340px;        /* ✅ фикс */
      height: 130px;       /* ✅ фикс */
      box-sizing: border-box;

      padding: 10px 12px;
      border: 1px solid #e0e0e0;
      border-radius: 12px;
      background: #fff;

      font-size: 12px;
      line-height: 1.35;
      color:#111;

      box-shadow: 0 10px 24px rgba(0,0,0,0.06);

      overflow: hidden;    /* ✅ чтобы не раздувал */
    }

    select { padding:4px 6px; }
    #status { max-width:1000px; margin:0 auto 6px auto; font-size:12px; }
    #status.error { color:#d32f2f; }
    #status.ok { color:#388e3c; }

    #analysis { max-width:1000px; margin:0 auto 10px auto; padding:10px; border:1px solid #e0e0e0; }
    #analysis-trend { margin:6px 0; font-size:16px; font-weight:bold; }
    #candles-wrapper {
      position: relative;
    }
    
    #range-highlight{
      position:absolute;
      top:0; bottom:0;
      left:0; width:0;
      display:none;
      pointer-events:none;
      z-index:10;
      background: rgba(25,118,210,0.12);   /* полупрозрачная заливка */
      border-left: 1px solid rgba(25,118,210,0.35);
      border-right: 1px solid rgba(25,118,210,0.35);
    }

    #trend-range-highlight{
      position:absolute;
      top:0; bottom:0;
      left:0; width:0;
      display:none;
      pointer-events:none;
      z-index:9;

      background: rgba(46,125,50,0.10);   /* дефолт: зелёная */
      border-left: 1px solid rgba(46,125,50,0.22);
      border-right: 1px solid rgba(46,125,50,0.22);
    }

    #hover-tooltip {
      position: static;
      display: none;
      z-index: 50;
      max-width: 320px;

      background: #ffffff;
      color: #111;
      border: 1px solid #d0d0d0;
      border-radius: 14px;
      padding: 10px 12px;

      font-size: 12px;
      line-height: 1.35;

      box-shadow: 0 10px 24px rgba(0,0,0,0.12);
      pointer-events: none;
    }

    #hover-dock{
      flex-direction: column;
      gap: 8px;
    }

    #body-compare-popup{
      display:none;
      z-index: 55;
      max-width: 320px;

      background: #ffffff;
      color: #111;
      border: 1px solid #d0d0d0;
      border-radius: 14px;
      padding: 10px 12px;

      font-size: 12px;
      line-height: 1.35;

      box-shadow: 0 10px 24px rgba(0,0,0,0.12);
      pointer-events: none;

      margin-top: 8px; /* чтобы не прилипало к hover-tooltip */
    }

    #hover-dock{
      position: absolute;
      top: 8px;
      right: 8px;
      display:flex;
      justify-content:flex-end;
      align-items:flex-start;
      padding: 0;
      z-index: 60;
      pointer-events: none;
    }

    html, body { 
      height: 100%; 
      margin: 0;
    }

    body{
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden; /* ✅ убираем прокрутку страницы */
    }

    #workspace{
      display:flex;
      gap:16px;
      flex: 1 1 auto;   /* ✅ занимает остаток под controls */
      min-height: 0;    /* ✅ важно для вложенных flex */
      padding:16px;
      box-sizing:border-box;
      overflow: hidden; /* ✅ скролл не у страницы */
    }

    #price-info-panel{
      margin-top: 8px;
      padding: 8px 10px;

      font-size: 12px;
      line-height: 1.35;

      border: 1px solid #e6e6e6;
      border-radius: 8px;
      background: #fafafa;

      color: #222;
    }

    /* если левая панель может быть длиннее — пусть скроллится внутри */
    #left-panel{
      height: 100%;
      overflow: auto;
      width: 320px;
      flex: 0 0 320px;
    }

    /* Подсветка тренда */
    .trend-up   { color: #2e7d32; font-weight: 600; }
    .trend-down { color: #c62828; font-weight: 600; }
    .trend-flat { color: #555; }

    #terminal{
    flex: 1 1 auto;             /* всё остальное справа */
    min-width: 0;               /* важно для flex, иначе “ломает” ширину */
    display: flex;
    flex-direction: column;
    }

    /* Главный график занимает всё, что осталось */
    #candles-wrapper {
      flex: 1 1 auto;
      min-height: 300px;
      border: 1px solid #e0e0e0;;
      /*position: relative;*/
    }

    /* Volume фиксированной высоты */
    #volume-wrapper {
      height: 120px;
      border: 1px solid #e0e0e0;
      margin-top: 8px;
      display: none;
      /*display: none;                /* включаем чекбоксом */
      /*position: relative;*/
    }

    #macd-wrapper {
      height: 140px;
      border: 1px solid #e0e0e0;
      margin-top: 8px;
      display: block;
    }
    #macd-chart {
      width: 100%;
      height: 100%;
    }

    #chart,
    #volume-chart {
      width: 100%;
      height: 100%;
    }

    .progress {
      width: 100%;
      height: 10px;
      background: #eee;
      border-radius: 999px;
      overflow: hidden;
      border: 1px solid #ddd;
    }
    .progress-bar {
      height: 100%;
      background: #2e7d32;
      width: 0%;
    }

    /* ===== Меню для чекбоксов ===== */
    .menu-btn{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border:1px solid #e0e0e0;
      border-radius:10px;
      background:#fff;
      cursor:pointer;
      font-size:13px;
      user-select:none;
    }
    .menu-btn:hover{ background:#fafafa; }

    .menu-overlay{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,0.25);
      z-index:9998;
    }
    .menu-modal{
      position:fixed;
      top:16px;
      left:16px;
      width:min(420px, calc(100vw - 32px));
      max-height:calc(100vh - 32px);
      overflow:auto;
      z-index:9999;

      background:#fff;
      border:1px solid #e0e0e0;
      border-radius:14px;
      box-shadow:0 20px 40px rgba(0,0,0,0.18);
      padding:12px;
      box-sizing:border-box;
    }
    .menu-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:10px;
    }
    .menu-title{
      font-size:14px;
      font-weight:700;
    }
    .menu-close{
      border:1px solid #e0e0e0;
      border-radius:10px;
      padding:4px 8px;
      background:#fff;
      cursor:pointer;
      font-size:14px;
      line-height:1;
    }
    .menu-close:hover{ background:#fafafa; }
    .menu-body{
      display:flex;
      flex-direction:column;
      gap:10px;
      font-size:13px;
    }
    .menu-body .ctl-check,
    .menu-body label{
      margin:0;
    }