* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  overflow: hidden;
}

#app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  height: 100%;
  max-height: 100%;
}

.app-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  height: 40px;
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.app-header::-webkit-scrollbar { display: none; }

.app-body {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  min-height: 0;
  position: relative;
}

.app-main {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.chart-area {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
  background: var(--chart-bg);
}

.chart-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 1px;
  min-height: 1px;
  padding: 0;
  border-bottom: 0;
  background: var(--chart-bg);
  font-size: var(--text-xs);
  visibility: hidden;
  white-space: nowrap;
  overflow: hidden;
  scrollbar-width: none;
}

.chart-header::-webkit-scrollbar { display: none; }

.chart-stack {
  display: grid;
  grid-template-rows: 1fr;
  height: 100%;
  min-height: 0;
  min-width: 0;
  position: relative;
}

.crosshair-guide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--chart-crosshair);
  opacity: .8;
  pointer-events: none;
  z-index: var(--z-overlay);
}

.crosshair-guide-horizontal {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--chart-crosshair);
  opacity: .8;
  pointer-events: none;
  z-index: var(--z-overlay);
}

.chart-stack.with-sub { grid-template-rows: 3fr 1fr; }
.chart-stack.with-two-sub { grid-template-rows: 3fr 1fr 1fr; }

.pane {
  position: relative;
  min-height: 0;
  min-width: 0;
  border-top: 1px solid var(--color-border);
}

.pane[data-pane] {
  display: grid;
  grid-template-rows: var(--pane-head) minmax(0, 1fr);
}

.pane[data-pane].collapsed { grid-template-rows: var(--pane-head); }

.pane:first-child { border-top: 0; }

.analysis-panel {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  max-height: 0;
  overflow: hidden;
  min-height: 0;
  display: none;
}

.status-bar {
  display: none;
  align-items: center;
  gap: var(--space-6);
  height: 28px;
  padding: 0 var(--space-5);
  background: var(--color-bg-soft);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.side-panel {
  position: relative;
  width: 320px;
  min-width: 320px;
  min-height: 0;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-3);
  z-index: var(--z-panel);
  display: none;
  flex-direction: column;
}

.side-panel.open { display: flex; }

@media (min-width: 641px) and (max-width: 1024px) {
  .app-body { grid-template-columns: 40px minmax(0, 1fr) auto auto; }
  .side-panel { width: 300px; min-width: 300px; }
  .desk-panel { width: 300px; min-width: 300px; }
}

@media (max-width: 640px) {
  .app-body { grid-template-columns: 40px minmax(0, 1fr); }
  .side-panel { width: 100%; }
  .app-header { gap: var(--space-3); padding: var(--space-3); }
  .analysis-panel { max-height: 0; }
}

@media (min-width: 1440px) {
  .app-body { grid-template-columns: 40px minmax(0, 1fr) auto auto; }
  .analysis-panel { max-height: 0; }
  .side-panel { width: 340px; }
}

@media (min-width: 1920px) {
  .app-body { grid-template-columns: 42px minmax(0, 1fr) auto auto; }
  .analysis-panel { max-height: 0; }
  .side-panel { width: 380px; }
  .desk-panel { width: 380px; min-width: 380px; }
}

@media (max-width: 640px) {
  #app { grid-template-rows: auto minmax(0, 1fr) auto auto; }

  .app-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .tool-sidebar {
    display: flex;
    flex-direction: row;
    grid-row: 3;
    height: 46px;
    overflow-x: auto;
    scrollbar-width: none;
    border-right: 0;
    border-top: 1px solid var(--color-border);
  }

  .tool-sidebar::-webkit-scrollbar { display: none; }

  .tool-rail {
    flex-direction: row;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 6px;
  }

  .app-header { gap: var(--space-3); padding: 0 var(--space-3); }
  .app-header .brand { display: none; }

  .analysis-panel {
    max-height: 0;
    transform: translateY(calc(100% - 26px));
    transition: transform var(--duration-base) ease;
    will-change: transform;
  }

  .analysis-panel.expanded { transform: translateY(0); }

  .side-panel, .desk-panel {
    inset: auto 0 0 0;
    position: fixed;
    height: 78vh;
    width: 100%;
    min-width: 0;
    border-left: 0;
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-3) var(--radius-3) 0 0;
  }

  .chart-header { gap: var(--space-3); }
  .chart-header .ch-venue { display: none; }
  .status-bar { gap: var(--space-4); font-size: 9px; }
}

.analysis-panel { container-type: inline-size; container-name: analysis; }
.desk-panel { container-type: inline-size; container-name: desk; }

@container desk (max-width: 300px) {
  .desk-grid { grid-template-columns: 1fr; }
  .book-row span:last-child { display: none; }
}

@media (min-width: 2560px) {
  :root {
    --text-xs: 15px;
    --text-sm: 16px;
    --text-md: 18px;
    --text-lg: 21px;
    --text-xl: 26px;
    --text-2xl: 34px;
    --chart-head: 36px;
    --quick-trade-height: 46px;
    --pane-head: 32px;
  }

  .app-header { height: 52px; }
  .app-body { grid-template-columns: 48px minmax(0, 1fr) auto auto; }
  .side-panel { width: 460px; min-width: 460px; }
  .desk-panel { width: 460px; min-width: 460px; }
  .tool-button { height: 34px; width: 34px; }
}

@media (pointer: coarse) {
  .tool-button { min-height: 40px; min-width: 40px; }
  .control,
  .tf-btn,
  .chip { min-height: 34px; }
  .market-row,
  .wl-row { padding-bottom: var(--space-5); padding-top: var(--space-5); }
  .legend-remove,
  .market-star,
  .tf-star { padding: var(--space-3); }
}

@media (orientation: landscape) and (max-height: 480px) {
  .app-header { height: 34px; }
  .legend { display: none; }
  .analysis-panel { display: none; }
}

.embedded .brand {
  display: none;
}