/* Світла сучасна тема */
.ssd-card{
  --bg:#ffffff; --bg2:#f8fafc; --fg:#0b1220; --muted:#5b708a; --accent:#16a34a;
  --panel:#f3f6fa; --border:rgba(0,0,0,0.08);
  --shadow:0 6px 24px rgba(0,0,0,.08);
  /* НОВЕ: висота графіка з запасом для підписів */
  --ssd-chart-h: 340px;
  position:relative;
  background:linear-gradient(180deg,var(--bg) 0%, var(--bg) 70%, var(--bg2) 100%);
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:16px; padding:18px; box-shadow:var(--shadow);
}
/* Зняти обмеження max-width теми */
.ssd-fullwidth{ max-width:none !important; width:100% !important; }

/* Заголовок */
.ssd-header{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.ssd-title{ font-weight:700; letter-spacing:.2px; font-size:16px; }
.ssd-range-wrap{ margin-left:auto; display:flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; }
.ssd-range-wrap select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:1px solid var(--border); border-radius:8px; background:#fff;
  padding:6px 26px 6px 10px; font-size:13px; color:var(--fg);
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%235b708a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
}
.ssd-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }

/* Сітка панелей */
.ssd-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media (max-width:900px){ .ssd-grid{ grid-template-columns:1fr; } }

/* Панелі */
.ssd-panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px; padding:12px; position:relative;
}
.ssd-panel-title{ color:var(--muted); font-size:12px; margin-bottom:6px; cursor:pointer; user-select:none; }
.ssd-panel-title:focus{ outline:2px solid rgba(37,99,235,.35); outline-offset:2px; }

/* Контейнер графіка — контроль висоти та ізоляція розмітки */
.ssd-chart{
  position:relative;
  height:var(--ssd-chart-h);
  width:100%;
  overflow:hidden;
  contain:size layout paint; /* запобігає петлям ResizeObserver */
}

/* Canvas всередині займає 100% контейнера */
.ssd-card .ssd-canvas{
  position:absolute; inset:0;
  display:block !important;
  width:100% !important; height:100% !important;
}

/* Розгорнутий режим */
.ssd-card.exp-mode .ssd-panel:not(.expanded){ filter:blur(1px) brightness(.98); opacity:.35; pointer-events:none; }
.ssd-panel.expanded{
  position:absolute; left:12px; right:12px;
  top:calc(var(--ssd-header-h,52px) + 8px); bottom:12px;
  z-index:20; box-shadow:0 12px 40px rgba(0,0,0,.15); animation:ssd-zoom-in .18s ease both;
}
.ssd-panel.expanded .ssd-chart{ height:calc(100% - 26px); }

.ssd-footer{ margin-top:10px; color:var(--muted); font-size:12px; }

@keyframes ssd-zoom-in{
  from{ transform:scale(.985); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}