* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { display: flex; flex-direction: column; background: #e8ecea; color: #163c35; font-family: 'DM Sans', sans-serif; }
.workspace-header { min-height: 48px; display: flex; align-items: center; gap: 24px; padding: 0 20px; background: #1e2f39; color: #fff; border-bottom: 3px solid #e70029; font: 600 12px Poppins, sans-serif; }
.back-link { display: flex; align-items: center; gap: 8px; }
.back-link:hover { text-decoration: underline; }
.workspace-name { margin-left: auto; }
.chart-workspace { flex: 1; min-height: 0; display: flex; }
.chart-workspace iframe { width: 100%; }
.workspace-header a { color: inherit; text-decoration: none; }
.brand { font-weight: 700; letter-spacing: .08em; }
.brand span, .workspace-title span { color: #a5c4b7; }
.workspace-title { flex: 1; font-weight: 600; }
.workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 24%); gap: 8px; padding: 8px; }
.panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: white; }
.panel-heading { min-height: 36px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-bottom: 1px solid #dfe7e2; }
.panel-heading span { font-size: 10px; color: #68837a; letter-spacing: .08em; }
.panel-heading strong { font-size: 13px; }
.panel-heading a { margin-left: auto; color: #245d4d; font-size: 12px; }
iframe { display: block; width: 100%; flex: 1; min-height: 0; border: 0; background: #fff; }
@media (max-width: 800px) {
  html, body { height: auto; min-height: 100%; }
  .workspace-header { flex-wrap: wrap; padding: 12px; gap: 10px; }
  .workspace-title { display: none; }
  .chart-workspace { min-height: calc(100vh - 48px); }
  .workspace { display: flex; flex-direction: column; }
  .panel { height: 75vh; min-height: 450px; }
}