/* CSR235 v0.4.9 — one horizontal inset for cards, headers, toolbars & charts.
   Desktop 24px / mobile 16px. Financial axes retain their reserved label gutters. */
:root { --panel-inset: 24px; }
body.mobile-ui { --panel-inset: 16px; }
/* Coin + CSR235 on the first row; one tagline spans both columns below. */
.sidebar .brand {
 display: grid; grid-template-columns: 66px minmax(0,1fr); column-gap: 13px;
 row-gap: 14px; align-items: center; margin: 0 0 20px; padding: 0;
}
.sidebar .brand > .csr-coin { width: 66px; height: 66px; flex-basis: 66px; }
.sidebar .brand > .brand-wordmark { font-size: 37px; line-height: 1.15; letter-spacing: -.025em; white-space: nowrap; }
.sidebar .brand > .brand-tagline {
 grid-column: 1 / -1; display: block; margin: 0; padding: 0; max-width: none;
 width: 100%; font: 500 16px/1.5 var(--number-font); color: #d4c9af;
 letter-spacing: .055em; white-space: nowrap; text-align: center;
}
@media (min-width: 820px) and (max-width: 1250px) {
 .sidebar .brand { grid-template-columns: 60px minmax(0,1fr); column-gap: 10px; }
 .sidebar .brand > .csr-coin { width: 60px; height: 60px; flex-basis: 60px; }
 .sidebar .brand > .brand-wordmark { font-size: 34px; }
 .sidebar .brand > .brand-tagline { letter-spacing: .015em; }
}
/* Header/body left and right starts use the same content grid everywhere. */
#content .card-heading, #content .card-body, #content .quote-strip,
#content .history-toolbar, #content .table-foot,
.mobile-ui #content .card-heading, .mobile-ui #content .card-body,
.mobile-ui #content .quote-strip, .mobile-ui #content .history-toolbar,
.mobile-ui #content .table-foot { padding-inline: var(--panel-inset); }
#content .order-hero, .mobile-ui #content .order-hero {
 padding: 24px var(--panel-inset); min-height: 0; margin-inline: 0;
}
#content .order-disclaimer, .mobile-ui #content .order-disclaimer { margin-inline: var(--panel-inset); }
#content .order-action-card th:first-child, #content .order-action-card td:first-child { padding-left: var(--panel-inset); }
#content .order-action-card th:last-child, #content .order-action-card td:last-child { padding-right: var(--panel-inset); }
#content .v4-mobile-orders { padding-inline: var(--panel-inset); }
#content .graph-card.graph-compact { padding: 0; width: 100%; margin-inline: 0; }
#content .graph-compact .graph-title-row,
#content .graph-compact .chart-common-toolbar,
#content .graph-compact .chart-legend,
#content .graph-compact .realized-heading,
.mobile-ui #content .graph-compact .graph-title-row,
.mobile-ui #content .graph-compact .chart-common-toolbar,
.mobile-ui #content .graph-compact .chart-legend,
.mobile-ui #content .graph-compact .realized-heading { padding-inline: var(--panel-inset); }
#content .graph-compact .price-chart, #content .graph-compact .realized-chart,
.mobile-ui #content .graph-compact .price-chart, .mobile-ui #content .graph-compact .realized-chart {
 padding-inline: var(--panel-inset); width: 100%; margin: 0;
}
#content .graph-compact .compact-readout, .mobile-ui #content .graph-compact .compact-readout {
 margin-inline: var(--panel-inset); padding-inline: 0;
}
#content .graph-compact .chart-detail-sheet, .mobile-ui #content .graph-compact .chart-detail-sheet {
 margin-inline: var(--panel-inset);
}
#content .graph-compact .chart-window-label { padding-inline: 0; }
#content .graph-compact .chart-range { padding-inline: 0; }
/* Keep vertical compactness and large type. Brand changes do not affect mobile header. */
.mobile-ui #content .order-hero { padding-block: 20px; }
.mobile-ui #content .order-hero .hero-meta { margin-top: 14px; padding-top: 12px; }
.mobile-ui #content .graph-compact .graph-title-row { flex-wrap: wrap; row-gap: 6px; }
/* Focus overlay is viewport-relative, not a full-width descendant card. */
#content .graph-card.graph-focused { width: auto; }
@media print {
 #content .graph-card.graph-focused { width: 100%; }
 #content .order-hero { break-inside: avoid; }
}
/* Never break a compact period label (e.g. 120일) into two lines. */
#content .graph-compact .chart-range button { white-space: nowrap; }
.mobile-ui #content .graph-compact .chart-range button { padding-inline: 4px; flex: 1 0 auto; }
.mobile-ui #content .graph-compact .realized-kpi>span { word-break: keep-all; }