/* Installed and browser views share one responsive workspace. */
#googleLoginButton { display: block; padding: 12px 16px; text-align: center; text-decoration: none; border-radius: 9px; background: #f3f5f8; color: #121722; font-weight: 600; }
#googleLoginButton[hidden], #passwordLoginField[hidden], #passwordLoginButton[hidden] { display: none; }
#googleLoginHint { font-size: 12px; color: #99a4b5; }
body main, body.ultrawide main {
  max-width: none;
  min-height: 100dvh;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
.workspaceActions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 14px 0 12px; padding: 12px;
  background: linear-gradient(120deg, #171e2a, #111111);
  border: 1px solid #ffffff12; border-radius: 12px;
}
.workspaceActions > div { flex: 1; min-width: 210px; }
.workspaceActions strong { font-size: 13px; display: block; color: #e4eaf3; }
.workspaceActions small { font-size: 11px; color: #8b98ac; display: block; margin-top: 4px; }
.workspaceActions button { font-size: 12px; min-height: 34px; border-radius: 8px; background: #ffffff08; padding: 7px 12px; }
.workspaceActions button:hover { background: #ffffff12; border-color: #ffffff35; }
.workspaceActions button[hidden] { display: none; }
.extraChartPanel {
  display: flex; flex-direction: column; min-width: 0; height: 450px; min-height: 240px;
  overflow: hidden; border-radius: 12px; border: 1px solid #ffffff14; background: #111111;
}
.extraChartToolbar { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; padding: 12px 34px 10px 12px; border-bottom: 1px solid #ffffff0d; }
.extraChartToolbar label { display: flex; gap: 4px; flex-direction: column; font-size: 10px; color: #8998ad; }
.extraChartToolbar input { width: 122px; font-size: 13px; font-weight: 600; }
.extraChartToolbar select { min-width: 65px; }
.extraChartToolbar input, .extraChartToolbar select { min-height: 32px; border: 1px solid #ffffff18; border-radius: 7px; background: #ffffff06; padding: 5px 7px; color: #e4eaf3; }
.extraChartToolbar button { height: 32px; font-size: 11px; border-radius: 7px; }
.extraClose { margin-left: auto; }
.extraChartCanvas { flex: 1; min-height: 140px; width: 100%; }
.extraChartFooter { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; padding: 9px 26px 9px 12px; border-top: 1px solid #ffffff0d; font-size: 11px; color: #95a4bb; }
.extraChartFooter small { color: #6e7d92; font-size: 10px; }
.extraChartPanel[data-feed=online] .extraChartFooter > span { color: #40cba0; }
.extraChartPanel[data-feed=offline] .extraChartFooter > span { color: #e2a25a; }
.layoutWidget > .widgetMoveHandle, .layoutWidget > .widgetResizeHandle { opacity: .65; touch-action: none; }
@media (max-width: 700px) {
  body main, body.ultrawide main { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .workspaceActions { padding: 10px; gap: 6px; }
  .workspaceActions > div { flex-basis: 100%; }
  .workspaceActions button { flex: 1 0 auto; }
  .extraChartToolbar { gap: 6px; padding-right: 38px; }
  .layoutWidget > .widgetMoveHandle, .layoutWidget > .widgetResizeHandle { width: 30px; height: 30px; }
}
@media (display-mode: standalone), (display-mode: fullscreen) { #installPulse { display: none; } }

/* One component and one visual language for every market panel. */
.workspaceActions[hidden] { display: none !important; }

.chartPanel, .extraChartPanel { overflow: hidden; min-width: 0; }
.extraChartPanel { min-height: 400px; }
.extraChartPanel .chartWrap { flex: 1; min-height: 220px; }
.extraChartPanel > * { flex-shrink: 0; }
.chartIdentity { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #ffffff0a; cursor: grab; }
.chartIdentitySpacer { flex: 1; min-width: 16px; }
.chartIdentity button { min-height: 30px; border: 1px solid #ffffff0c; border-radius: 7px; background: #ffffff04; padding: 5px 9px; }
.chartPair { display: flex; align-items: center; gap: 12px; color: #e6eaf0; font-size: 12px; }
.chartPair span { color: #8d99aa; }
.chartIdentity .cliControl { display: flex; align-items: center; gap: 5px; }
.chartClose { color: #a7b1bf; font-size: 18px; line-height: 1; }
.chartIdentity button:hover { background: #ffffff0c; border-color: #ffffff20; }
.chartPanel.layoutWidget .chartToolbar { padding-right: 8px; }
.chartToolbar { gap: 6px; flex-wrap: wrap; }
.chartToolbar button { border-radius: 5px; }

.chartFooter { min-height: 18px; }
.addChartControl { margin-left: auto; width: 30px; height: 30px; font-size: 20px; line-height: 1; border-radius: 8px; background: #ffffff06; }
.layoutWidget > .widgetMoveHandle { display: none !important; }
.layoutWidget > .widgetResizeHandle { background: transparent !important; border: 0 !important; box-shadow: none !important; opacity: 1; }
.widgetResizeHandle svg { display: none; }
.chartToolbar, .sectionTitle { cursor: grab; }
.customTimeframe form { display: grid; gap: 14px; padding: 18px; }
@media (prefers-reduced-motion: no-preference) { button { transition: background-color .12s ease, border-color .12s ease; } }

/* Pair selection shares the existing controls instead of reserving a row. */
.chartIdentityInline { flex: 0 0 auto; gap: 4px; padding: 0; border: 0; cursor: default; }
.chartIdentityInline button { min-height: 24px; padding: 3px 6px; font-size: 10px; }