/* Option 2: continuous graphite glass. Presentation only; existing routes and controls stay intact. */
@media screen {
  html:root, html:root .hammer-soft-glass-page {
    --hg-blue: #b6e3f4;
    --hg-line: rgba(210, 230, 240, .25);
    --hg-glass: rgba(30, 38, 45, .58);
    --hg-ease: cubic-bezier(.18, .78, .18, 1);
    --hg-duration: 620ms;
    --hcg-surface: rgba(28, 35, 42, .68);
    --hcg-rim: rgba(216, 234, 244, .28);
    --hcg-ink: #edf6fb;
    --hcg-muted: #bbcbd5;
    accent-color: #a3d9ef;
  }

  /* Shared cards and work areas retain their current dimensions and information hierarchy. */
  html:root :is(body, #app) :is(.box, .hm-panel, .hm-stat, .hm-stats, .ho-panel, .ho-card, .hpa-panel, .hra-panel, .hib-panel, .hib-form-panel, .hib-member-card, .hds-panel, .hmo-card, .hm-card, .hls-inbody, .ha-ai-entry, .hp-auth-panel, .hp-package, .hp-trainer, .hp-trainer-detail .form) {
    background: var(--hcg-surface) !important;
    border-color: var(--hcg-rim) !important;
    border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(245, 252, 255, .16), inset 0 -1px 0 rgba(167, 223, 245, .08), 0 6px 22px rgba(0, 0, 0, .12) !important;
    -webkit-backdrop-filter: blur(16px) saturate(105%);
    backdrop-filter: blur(16px) saturate(105%);
  }
  html:root :is(body, #app) .hm-stats > .hm-stat {
    background: transparent !important;
    border-radius: 0;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html:root :is(body, #app) :is(.ho-sheet, .modal-card-head, .modal-card-body, .modal-card-foot, .navbar-dropdown) {
    background: rgba(24, 31, 38, .96) !important;
    border-color: var(--hcg-rim) !important;
    color: var(--hcg-ink);
  }
  html:root :is(body, #app) :is(.hm-topbar, .hp-header, .navbar, .hm-sidebar) {
    background: rgba(15, 20, 26, .86) !important;
    border-color: rgba(206, 226, 239, .15) !important;
    -webkit-backdrop-filter: blur(18px) saturate(105%);
    backdrop-filter: blur(18px) saturate(105%);
  }

  /* A single rail and a single moving lens; text and hit targets never stretch. */
  html:root :is(body, #app) .hg-tabs,
  html:root #hammer-member-menu.hnm-nav {
    --hg-duration: 620ms;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    padding: 6px;
    gap: 4px;
    border: 1px solid rgba(219, 237, 247, .32) !important;
    border-radius: 25px !important;
    background: linear-gradient(175deg, rgba(206, 228, 243, .075), rgba(25, 33, 41, .38) 38%, rgba(19, 26, 33, .62)) !important;
    box-shadow: inset 0 1px 1px rgba(249, 253, 255, .22), inset 0 -1px 1px rgba(166, 224, 247, .12), 0 4px 16px rgba(0, 0, 0, .12) !important;
    -webkit-backdrop-filter: blur(18px) saturate(105%);
    backdrop-filter: blur(18px) saturate(105%);
    scrollbar-width: thin;
    scrollbar-color: rgba(181, 218, 237, .25) transparent;
  }
  html:root :is(body, #app) .hg-tabs:not(.hm-nav):not(.hp-nav) {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
  }
  html:root :is(body, #app) .hg-tabs :is(a, button, [role="tab"]),
  html:root #hammer-member-menu.hnm-nav > a {
    min-height: 44px;
    border: 1px solid transparent !important;
    border-radius: 19px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #b6e3f4 !important;
    text-shadow: none !important;
    text-decoration: none;
    white-space: nowrap !important;
    transform: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html:root :is(body, #app) .hg-tabs > li { flex-shrink: 0; }
  html:root :is(body, #app) .hg-tabs > :is(a, button) { flex-shrink: 0; }
  html:root :is(body, #app) .hg-tabs:not(.hnm-nav):not(.hm-nav):not(.hp-nav) > :is(a, button) { min-width: max-content; }
  html:root :is(body, #app) .hg-tabs::before,
  html:root #hammer-member-menu.hnm-nav.hg-tabs::before {
    border: 1px solid rgba(232, 246, 255, .58) !important;
    background: linear-gradient(155deg, rgba(236, 248, 255, .20), rgba(121, 159, 182, .12) 50%, rgba(175, 218, 238, .15)) !important;
    box-shadow: inset 0 1px 2px rgba(250, 254, 255, .32), inset 0 -2px 3px rgba(161, 226, 252, .29), 0 2px 6px rgba(0, 0, 0, .15) !important;
    -webkit-backdrop-filter: blur(16px) saturate(110%);
    backdrop-filter: blur(16px) saturate(110%);
  }
  html:root :is(body, #app) .hg-tabs :is(.hg-tab-selected, [aria-selected="true"], [aria-current="page"]),
  html:root #hammer-member-menu.hnm-nav > a.is-selected {
    color: #f1fbff !important;
  }
  html:root :is(body, #app) .hg-tabs :is(a, button):hover { color: #fff !important; }
  /* Keep a selected state before JS starts, or when JS is unavailable. */
  html:root :is(body, #app) .hg-tabs:not([data-hg-ready]) :is(.is-selected, .is-current, [aria-selected="true"]),
  html:root #hammer-member-menu.hnm-nav:not([data-hg-ready]) > a.is-selected {
    background: rgba(202, 227, 243, .13) !important;
    border-color: rgba(223, 242, 252, .4) !important;
  }
  html:root :is(body, #app) .tabs { border: 0; }
  html:root :is(body, #app) .tabs > ul.hg-tabs { justify-content: flex-start; }
  html:root :is(body, #app) .tabs > ul.hg-tabs > li > a { padding: .65em 1.15em; }
  html:root :is(body, #app) .hp-nav.hg-tabs > a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
  }
  html:root :is(body, #app) .hp-trainer { overflow: hidden; }

  /* Controls use the same clear material, with high contrast labels and focus. */
  html:root :is(body, #app) :is(.button, .hp-button, .hib-button, .hra-button, .hds-button, .ho-primary, .hm-action, .hls-inbody-action, .hpa-prompts button) {
    background: rgba(82, 111, 129, .27) !important;
    border-color: rgba(201, 229, 244, .40) !important;
    border-radius: 15px;
    color: var(--hcg-ink) !important;
    box-shadow: inset 0 1px 0 rgba(244, 251, 255, .18), inset 0 -1px 0 rgba(154, 211, 239, .10) !important;
    -webkit-backdrop-filter: blur(12px) saturate(105%);
    backdrop-filter: blur(12px) saturate(105%);
  }
  html:root :is(body, #app) :is(.button, .hp-button, .hib-button, .hra-button, .hds-button, .ho-primary, .hm-action):hover:not(:disabled):not([aria-disabled="true"]) {
    background: rgba(110, 143, 162, .33) !important;
    border-color: rgba(222, 243, 255, .58) !important;
    color: #fff !important;
  }
  html:root :is(body, #app) :is(.input, .textarea, .select select, .hp-field input, .hp-field select, .hp-field textarea, .ho-search, .hpa-panel textarea) {
    background: rgba(13, 21, 29, .72) !important;
    border-color: rgba(187, 215, 231, .40) !important;
    border-radius: 13px;
    color: var(--hcg-ink) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(237, 248, 255, .06) !important;
  }
  html:root :is(body, #app) :is(input, textarea)::placeholder { color: #adbfcc !important; opacity: 1; }
  html:root :is(body, #app) :is(button, a, input, textarea, select):focus-visible { outline: 2px solid #b4e3f5 !important; outline-offset: 3px; }
  html:root :is(body, #app) .hg-tabs :is(a, button):focus-visible { outline-offset: -3px; }
  html:root :is(body, #app) .ho-search > input { background: transparent !important; box-shadow: none !important; }
  html:root :is(body, #app) :is(.button, button):disabled { opacity: .45; }
  html:root :is(body, #app) :is(.ho-card:hover, .ho-card:active) { transform: none !important; }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html:root :is(body, #app) :is(.hg-tabs, .box, .hm-panel, .hm-stat, .ho-panel, .ho-card, .hpa-panel, .hra-panel, .hib-panel, .hds-panel, .hp-auth-panel) { background-color: #202a32 !important; }
  }
  @media (max-width: 560px) {
    html:root #hammer-member-menu.hnm-nav { padding: 4px; gap: 2px; border-radius: 21px !important; }
    html:root #hammer-member-menu.hnm-nav > a { border-radius: 16px !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    html:root :is(body, #app) .hg-tabs::before { transition: none !important; }
  }
}