/* Shared visual system for the workbench. Page modules only tune their own content layout. */
:root {
  --ux-body: .875rem;
  --ux-reading: .9375rem;
  --ux-small: .75rem;
  --ux-title: 1.125rem;
  --ux-heading: 1.5rem;
  --ux-number: 1.75rem;
  --ux-gap: 20px;
  --ux-inset: 20px;
  --ux-control: 40px;
  --ux-radius: 14px;
  --ux-ink: #17253b;
  --ux-muted: #586b83;
  --ux-border: #dde4ed;
  --ux-soft: #f6f8fb;
  --ux-shadow: 0 2px 10px rgba(23,37,59,.035);
  --ui-text: var(--ux-ink);
  --ui-muted: var(--ux-muted);
  --ui-border: var(--ux-border);
  --ui-radius: var(--ux-radius);
  --ui-gap: var(--ux-gap);
  --ui-control: var(--ux-control);
  --text-xs: var(--ux-small);
  --text-sm: .8125rem;
  --text-base: var(--ux-body);
  --text-lg: 1rem;
  --text-xl: 1.25rem;
  --text-2xl: var(--ux-heading);
  --c-text-primary: var(--ux-ink);
  --c-text-tertiary: var(--ux-muted);
  --c-border: var(--ux-border);
  --content-max-width: 1600px;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
}
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-padding-block: 20px; }
body { font-family: var(--font-family); font-size: var(--ux-body); line-height: 1.6; color: var(--ux-ink); background: #f4f6fa; }
body :is(button, input, select, textarea) { font-family: var(--font-family); }
.main-content { padding: 24px; min-width: 0; }
.main-content > .page { width: 100%; max-width: var(--content-max-width); margin-inline: auto; min-width: 0; }
.page { font-size: var(--ux-body); line-height: 1.6; }
.page :is(p, li, label, summary, h2, h3, h4) { overflow-wrap: break-word; }
.page :is(h2,h3,h4) { letter-spacing: 0; text-wrap: pretty; }
.page h2 { font-size: var(--ux-heading); line-height: 1.35; font-weight: 700; }
.page h3 { font-size: var(--ux-title); line-height: 1.45; font-weight: 650; }
.page h4 { font-size: var(--ux-body); line-height: 1.55; font-weight: 650; }
.page :is(.form-help,.section-caption-note,.panel-subtitle,.col-subtitle) { font-size: var(--ux-small); line-height: 1.65; color: var(--ux-muted); }
.page :is(.btn,.form-input,.filter-select,.client-select,.hs-dropdown-toggle) { font-variant-numeric: tabular-nums; }
.page:not(#page-game) :is(.btn,.hs-dropdown-toggle,.timeframe-btn,.filter-select,.form-input,.client-select) {
  font-size: var(--ux-body); line-height: 1.5; min-height: var(--ux-control); border-radius: 9px;
}
.page:not(#page-game) .btn { padding: 9px 14px; height: auto; gap: 8px; font-weight: 600; }
.page:not(#page-game) .btn-sm { font-size: .8125rem; min-height: 34px; padding: 6px 10px; }
.page:not(#page-game) :is(.btn-icon,.btn-icon-subtle) { min-width: 36px; min-height: 36px; }
.page:not(#page-game) :is(.form-input,.filter-select,.client-select) { padding: 9px 12px; min-width: 0; max-width: 100%; }
.page:not(#page-game) textarea.form-input { min-height: 112px; line-height: 1.7; }
.page:not(#page-game) :is(.form-label,.rp-form-label) { font-size: var(--ux-body); line-height: 1.5; font-weight: 600; }
.page :is(.form-group,.search-box,.input-with-mask-btn,.hs-dropdown) { min-width: 0; }
.page :is(.btn,.form-input,.filter-select,.client-select,.hs-dropdown-toggle):disabled { cursor: not-allowed; }
.page :is(.btn,.hs-dropdown-toggle,.nav-item) { transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease; }
.page :is(button,summary,a,input,select,textarea):focus-visible,
.sidebar :is(a,button):focus-visible,
.bottom-nav :is(a,button):focus-visible { outline: 2px solid #c8102e; outline-offset: 3px; }
.page :is(.table-scroll,.compare-table-scroll,.allocation-directory-scroll,.portfolio-history-table-scroll,.portfolio-benchmark-scroll) { max-width: 100%; overscroll-behavior-inline: contain; }
.page table { border-collapse: separate; border-spacing: 0; font-size: var(--ux-body); font-variant-numeric: tabular-nums; }
.page table :is(th,td) { vertical-align: middle; line-height: 1.6; }
.page table th { font-weight: 650; }
.page :is(.chart-legend-row,.chart-legend-item) { font-size: var(--ux-small); line-height: 1.5; }
.sidebar { border-right: 1px solid rgba(255,255,255,.08); }
.sidebar .brand-title { font-size: 20px; line-height: 1.3; letter-spacing: .01em; }
.sidebar .brand-sub { font-size: 12px; line-height: 1.5; }
.sidebar .sidebar-nav { padding: 20px 12px; gap: 8px; }
.sidebar .nav-item { font-size: var(--ux-body); min-height: 46px; padding: 11px 14px; gap: 12px; border-radius: 10px; }
.sidebar .nav-item :is(svg,i) { flex-shrink: 0; }
.sidebar-footer .status-text { font-size: var(--ux-small); line-height: 1.5; }
.mobile-header { min-height: 56px; }
.mobile-header :is(.sidebar-toggle,.mobile-settings-btn) { min-width: 40px; min-height: 40px; }
.bottom-nav-item { min-width: 0; min-height: 52px; gap: 4px; }
.bottom-nav-item span { font-size: 11px; line-height: 1.4; }
.modal-overlay:not(.rp-video-overlay) .modal-card:not(.rp-video-call-card) { max-width: min(720px,calc(100vw - 40px)); max-height: calc(100dvh - 40px); border-radius: 16px; }
.modal-overlay:not(.rp-video-overlay) .modal-header { padding: 18px 20px; gap: 12px; align-items: center; }
.modal-overlay:not(.rp-video-overlay) .modal-title { font-size: var(--ux-title); line-height: 1.45; }
.modal-overlay:not(.rp-video-overlay) .modal-body { padding: 20px; font-size: var(--ux-body); line-height: 1.65; overflow-wrap: anywhere; }
.modal-overlay:not(.rp-video-overlay) .modal-footer { gap: 8px; padding: 16px 20px; flex-wrap: wrap; }
.modal-overlay:not(.rp-video-overlay) :is(.btn,.form-input,.filter-select) { min-height: var(--ux-control); height: auto; font-size: var(--ux-body); line-height: 1.5; }
.modal-overlay:not(.rp-video-overlay) .form-label { font-size: var(--ux-body); line-height: 1.5; }
.modal-overlay:not(.rp-video-overlay) :is(.form-help,.text-muted,small) { font-size: var(--ux-small); line-height: 1.6; }
:is(.product-timing-popover,.timing-why-tooltip) { font-family: var(--font-family); font-size: var(--ux-body); line-height: 1.7; }
@media (max-width: 1100px) {
  .main-content { padding: 20px; }
  :root { --ux-gap: 16px; --ux-inset: 16px; }
}
@media (max-width: 768px) {
  :root { --ux-gap: 16px; --ux-inset: 16px; --ux-control: 44px; --ux-heading: 1.375rem; }
  html { scroll-padding-top: 68px; scroll-padding-bottom: 76px; }
  .main-content { padding: 12px 12px calc(84px + env(safe-area-inset-bottom,0px)); }
  .main-content > .page { max-width: none; }
  .page:not(#page-game) :is(.form-input,.filter-select,.client-select,.hs-dropdown-toggle,input[type=search],input[type=number],input[type=text],textarea) { font-size: 16px; }
  .page:not(#page-game) .btn { min-height: 44px; padding: 10px 12px; }
  .page:not(#page-game) .btn-sm { min-height: 40px; padding: 8px 10px; }
  .page:not(#page-game) :is(.btn-icon,.btn-icon-subtle) { min-width: 40px; min-height: 40px; }
  .modal-overlay:not(.rp-video-overlay) .modal-card:not(.rp-video-call-card) { max-width: calc(100vw - 24px); max-height: calc(100dvh - 32px); }
  .modal-overlay:not(.rp-video-overlay) :is(.modal-header,.modal-body) { padding: 16px; }
  .modal-overlay:not(.rp-video-overlay) .modal-footer { padding: 12px 16px; }
  .modal-overlay:not(.rp-video-overlay) :is(input,select,textarea) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .page, .page :is(.btn,.hs-dropdown-toggle,.nav-item), .modal-overlay { animation-duration: .01ms; transition-duration: .01ms; }
}