/* STR website system. Vendor this file unchanged into app websites. */
:root {
  --str-canvas: #0d1c2c;
  --str-panel: #193246;
  --str-raised: #203d52;
  --str-ink: #edf4f7;
  --str-muted: #b9ccd8;
  --str-blue: #65b7e4;
  --str-rule: rgba(185, 204, 216, .19);
  --str-content-width: 1400px;
  --str-header-height: 88px;
  color-scheme: dark;
  scrollbar-color: #597d94 #122333;
  scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: #122333; }
*::-webkit-scrollbar-thumb { background: #597d94; border: 2px solid #122333; border-radius: 9px; }
*::-webkit-scrollbar-thumb:hover { background: #80abc3; }
.str-site-body { margin: 0; background: var(--str-canvas); color: var(--str-ink); font-family: 'Segoe UI', system-ui, sans-serif; }
.str-site-header { position: sticky; top: 0; z-index: 40; width: 100%; background: rgba(19, 37, 52, .83); border-bottom: 1px solid var(--str-rule); backdrop-filter: blur(22px) saturate(135%); -webkit-backdrop-filter: blur(22px) saturate(135%); }
.str-site-header-inner { width: min(90vw, var(--str-content-width)); min-height: var(--str-header-height); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.str-site-brand { display: inline-flex; align-items: center; gap: 16px; color: var(--str-ink); font-size: 26px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.str-site-brand img, .str-site-brand > svg { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }
.str-site-nav { display: flex; align-items: center; gap: 26px; }
.str-site-nav > a:not(.str-site-account) { color: var(--str-ink); text-decoration: none; font-size: 14px; padding-block: 12px; }
.str-site-nav > a:not(.str-site-account):hover, .str-site-nav > a[aria-current='page'] { color: var(--str-blue); }
.str-site-nav select { color: var(--str-ink); background: var(--str-panel); border: 1px solid rgba(185, 204, 216, .4); border-radius: 4px; min-height: 34px; padding: 5px 10px; font: inherit; }
.str-site-account { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; border-radius: 50%; border: 1px solid rgba(185, 204, 216, .45); background: var(--str-raised); color: var(--str-muted); text-decoration: none; }
.str-site-account img { display: block; width: 100%; height: 100%; object-fit: cover; }
.str-site-account svg { width: 26px; height: 26px; }
.str-site-account:hover { border-color: var(--str-blue); color: var(--str-ink); }
.str-site-header a:focus-visible, .str-site-header select:focus-visible { outline: 2px solid var(--str-blue); outline-offset: 5px; }
@media (max-width: 700px) {
  :root { --str-header-height: 72px; }
  .str-site-header-inner { width: calc(100% - 32px); gap: 12px; }
  .str-site-brand { font-size: 20px; gap: 10px; min-width: 0; }
  .str-site-brand > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .str-site-brand img, .str-site-brand > svg { width: 32px; height: 32px; }
  .str-site-nav { gap: 14px; flex-shrink: 0; }
  .str-site-nav > a:not(.str-site-account) { font-size: 12px; }
  .str-site-account { width: 34px; height: 34px; }
}
@media (prefers-reduced-transparency: reduce) {
  .str-site-header { background: var(--str-panel); backdrop-filter: none; -webkit-backdrop-filter: none; }
}