@layer pages {
.site-page {
    --site-gutter: var(--space-32);
    --site-content-gap: var(--space-32);
    --site-nav-expanded-width: 200px;
    --site-nav-width: var(--control-height);
    --page-shell-block-start: var(--space-32);
    --page-shell-inline: clamp(var(--space-16), 2vw, var(--space-32));
    background-color: var(--color-shell);
    overflow-x: clip;
}
.site-navigation-expanded .site-page { --site-nav-width: var(--site-nav-expanded-width); }
.site-page [hidden] { display: none !important; }
.site-page :is(button, a, input, select, textarea, summary):focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
.site-icon { display: block; flex-shrink: 0; object-fit: contain; pointer-events: none; user-select: none; }
.site-skip { position: fixed; top: var(--space-8); left: var(--space-32); z-index: 200; padding: var(--space-12); color: var(--color-on-primary); background: var(--color-primary); border-radius: var(--radius-lg); opacity: 0; pointer-events: none; transform: translateY(calc(-100% - var(--space-16))); }
.site-skip:focus-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.site-topbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); align-items: center; padding: var(--space-24) var(--space-32) var(--space-16); position: sticky; top: 0; z-index: 30; background: var(--color-shell); }
.site-topbar :is(button, input, summary) { font: inherit; }
.site-topbar a, .site-navigation a { color: var(--palette-white); text-decoration: none; }
.site-brand { display: flex; align-items: center; gap: var(--space-8); min-width: 0; }
.site-icon-button { display: grid; place-items: center; width: 40px; height: 40px; background: none; border: 0; border-radius: var(--radius-lg); color: var(--palette-white); cursor: pointer; }
.site-nav-toggle-icon { grid-area: 1 / 1; display: grid; place-items: center; font-size: var(--text-xl); opacity: 1; transform: scale(1); transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
.site-nav-toggle-expanded { opacity: 0; transform: scale(.8); }
.site-navigation-expanded .site-nav-toggle-collapsed { opacity: 0; transform: scale(.8); }
.site-navigation-expanded .site-nav-toggle-expanded { opacity: 1; transform: scale(1); }
.site-logo { display: block; width: 95px; height: 42px; object-fit: contain; }
.site-global-search { display: flex; align-items: center; gap: var(--space-8); height: 42px; width: 100%; max-width: 600px; padding: 0 var(--space-12); border: 1px solid var(--palette-border); background: var(--palette-surface); border-radius: var(--radius-lg); min-width: 0; }
.site-global-search input { width: 100%; min-width: 0; background: none; border: 0; color: var(--palette-white); height: 100%; }
.site-global-search { position: relative; }
.site-search-suggest { position: absolute; z-index: 60; top: calc(100% + var(--space-8)); left: 0; right: 0; display: flex; flex-direction: column; padding: var(--space-4); border: 1px solid var(--palette-border); border-radius: var(--radius-lg); background: var(--palette-surface); box-shadow: 0 12px 32px rgb(0 0 0 / .35); }
.site-search-suggest[hidden] { display: none; }
.site-search-suggest a { display: flex; align-items: center; gap: var(--space-12); min-height: 44px; padding: 0 var(--space-12); border-radius: var(--radius-md); color: var(--palette-white); text-decoration: none; font-size: var(--text-sm); }
.site-search-suggest a i { width: 18px; text-align: center; color: var(--palette-muted); }
.site-search-suggest a:hover, .site-search-suggest a[aria-selected="true"] { background: var(--palette-control); }
.site-search-suggest .suggest-text { display: flex; align-items: baseline; gap: var(--space-4); min-width: 0; }
.site-search-suggest .suggest-term { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-semibold); }
.site-search-suggest .suggest-scope { flex: none; color: var(--palette-muted); }
.site-global-search input::placeholder { color: var(--palette-muted); opacity: 1; }
.site-page .site-global-search input:focus-visible { outline: none; }
.site-global-search:has(input:focus-visible) { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
.site-account { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-8); min-width: 0; }
.site-balance { display: flex; align-items: center; gap: var(--space-6); min-height: var(--control-height); margin-right: 0; padding: var(--space-4) var(--space-8); border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.site-balance:hover, .site-balance:focus-visible { background: var(--color-control); color: var(--color-link); }
.site-profile { display: block; width: 32px; height: 32px; flex-shrink: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-control); }
.site-profile > .avatar-image { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.site-account-menu, .site-volts-menu { position: relative; min-width: 0; }
.site-volts-menu { margin-right: var(--space-8); }
.site-volts-menu summary { list-style: none; }
.site-volts-menu summary::-webkit-details-marker { display: none; }
.site-volts-menu .site-balance { margin-right: 0; }
.site-volts-menu[open] .site-balance { background: var(--color-control); color: var(--color-link); }
.site-account-links button:disabled { opacity: .5; cursor: default; }
.site-account-links button:disabled:hover { background: none; }
.site-account-menu summary { display: flex; align-items: center; min-height: var(--control-height); gap: var(--space-8); padding: var(--space-4) var(--space-8) var(--space-4) var(--space-4); border-radius: var(--radius-lg); cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1; list-style: none; transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.site-account-menu summary:hover, .site-account-menu summary:focus-visible, .site-account-menu[open] summary { background: var(--color-control); color: var(--color-text); }
.site-account-menu summary::-webkit-details-marker { display: none; }
.site-account-name { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-account-menu summary > .site-icon { transition: transform var(--motion-fast) var(--ease-standard); }
.site-account-menu[open] summary > .site-icon { transform: rotate(180deg); }
.site-account-links { position: absolute; right: 0; top: calc(100% + 16px); width: 200px; padding: var(--space-8); background: var(--palette-surface); border: 1px solid var(--palette-border); border-radius: var(--radius-lg); }
.site-account-links :is(a, button) { display: block; width: 100%; padding: var(--space-10) var(--space-12); text-align: left; background: none; color: var(--palette-white); border: 0; border-radius: var(--radius-sm); font-weight: var(--weight-semibold); cursor: pointer; }
.site-account-links :is(a, button):hover { background: var(--palette-control); }
.site-account-links #logout { background: var(--color-danger); border: 1px solid var(--color-danger); color: var(--color-on-danger); }
.site-account-links #logout:hover { background: var(--color-danger); color: var(--color-on-danger); box-shadow: inset 0 0 0 1px var(--color-on-danger); }
.site-signin { padding: var(--space-10) var(--space-16); background: var(--color-primary); border-radius: var(--radius-lg); font-weight: var(--weight-semibold); }
.site-shell { display: grid; grid-template-columns: var(--site-nav-width) minmax(0, 1fr); gap: var(--site-content-gap); padding: 0 var(--site-gutter) var(--space-24); flex: 1; transition: grid-template-columns var(--motion-layout) var(--ease-out); }
.site-page-guest .site-shell { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
.site-navigation-resizing .site-shell { transition: none; }
.site-nav-rail { min-width: 0; }
.site-navigation { position: sticky; top: 82px; z-index: 20; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--space-24); height: calc(100dvh - 106px); min-height: 240px; overflow-y: auto; overflow-x: hidden; background: transparent; clip-path: inset(-4px); }
html:not(.site-navigation-expanded) .site-navigation { scrollbar-width: none; }
html:not(.site-navigation-expanded) .site-navigation::-webkit-scrollbar { display: none; }
.site-navigation-upper { flex-shrink: 0; }
.site-navigation-upper { overflow: clip; }
.site-navigation-top, .site-navigation-tools { display: flex; flex-direction: column; gap: var(--space-8); }
.site-navigation-tools { position: relative; margin-top: var(--space-24); padding-top: var(--space-24); }
.site-navigation-tools::before { content: ''; position: absolute; top: 0; left: 8px; width: 24px; border-top: 1px solid var(--palette-border); }
.site-navigation-expanded .site-navigation-tools::before { width: calc(100% - 16px); }
.site-navigation a { display: flex; align-items: center; gap: var(--space-12); width: 100%; height: 40px; min-height: 40px; padding: var(--space-8); border-radius: var(--radius-lg); position: relative; flex-shrink: 0; cursor: pointer; }
.site-navigation a > * { pointer-events: none; }
.site-page .site-navigation a:focus-visible { outline-offset: var(--focus-ring-offset); }
.site-navigation a:hover, .site-icon-button:hover { background: var(--color-control); }
.site-navigation a[aria-current="page"] { background: var(--color-primary); color: var(--color-on-primary); }
.site-font-icon { --fa-display: grid; display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; font-size: var(--text-xl); }
.site-nav-label { font-weight: var(--weight-semibold); white-space: nowrap; opacity: 0; transform: translateX(-8px); visibility: hidden; transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-layout) var(--ease-out), visibility var(--motion-layout); }

.site-navigation-expanded .site-navigation a { width: 100%; }
.site-navigation-expanded .site-nav-label { opacity: 1; transform: translateX(0); visibility: visible; }
.site-nav-count { --count-badge-size: 16px; --count-badge-padding-inline: var(--space-4); --count-badge-text-size: var(--text-micro); position: absolute; top: 0; right: 0; }
.site-navigation a[aria-current="page"] .site-nav-count { --count-badge-background: var(--color-on-primary); --count-badge-color: var(--color-primary); }
.site-navigation-expanded .site-navigation .site-nav-count { top: calc(50% - var(--space-8)); right: var(--space-8); }
.site-nav-activity { display: none; align-items: center; gap: var(--space-4); margin-left: auto; color: var(--color-muted); font-size: var(--text-xs); line-height: 1.5; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-navigation-expanded .site-nav-activity { display: flex; }
.site-navigation a[aria-current="page"] .site-nav-activity { color: var(--color-on-primary); }
.site-main { display: flex; flex-direction: column; min-width: 0; min-height: calc(100dvh - 82px); background: var(--color-content); border: 1px solid var(--color-border); border-radius: var(--radius-xl); }
.site-page-guest .site-main { background: transparent; border: 0; border-radius: 0; }
.site-main::before {
    --cap-radius: var(--radius-xl);
    --cap-ring: transparent calc(var(--cap-radius) - 1px), var(--color-border) calc(var(--cap-radius) - 1px) var(--cap-radius), var(--color-shell) var(--cap-radius);
    content: ''; position: sticky; top: 82px; z-index: 5; flex: none; height: var(--cap-radius); margin: -1px -1px calc(-1 * var(--cap-radius)); pointer-events: none;
    background:
        radial-gradient(circle at var(--cap-radius) var(--cap-radius), var(--cap-ring)) left top / var(--cap-radius) var(--cap-radius) no-repeat,
        radial-gradient(circle at 0 var(--cap-radius), var(--cap-ring)) right top / var(--cap-radius) var(--cap-radius) no-repeat,
        linear-gradient(var(--color-border), var(--color-border)) var(--cap-radius) 0 / calc(100% - 2 * var(--cap-radius)) 1px no-repeat;
}
.site-page-guest .site-main::before { display: none; }
.site-main > .page-content { flex: 1; min-width: 0; }
.page-shell { padding: var(--page-shell-block-start) var(--page-shell-inline) var(--space-48); }
.site-main > .footer { margin: var(--space-48) var(--page-shell-inline) 0; padding-bottom: var(--space-24); }
.site-mobile-bar { display: none; }
.site-mobile-menu { --dialog-width: 480px; --dialog-margin: 0 auto; --dialog-radius: var(--radius-2xl); --dialog-max-height: calc(100dvh - var(--space-32) - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px)); position: fixed; inset: auto 0 calc(var(--space-16) + env(safe-area-inset-bottom, 0px)); container: mobile-navigation / inline-size; overscroll-behavior: contain; }
.site-mobile-menu .site-navigation { position: static; width: 100%; height: auto; min-height: 0; margin-top: var(--space-24); clip-path: none; overflow: visible; gap: var(--space-20); }
.site-mobile-menu .site-navigation-top, .site-mobile-menu .site-navigation-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.site-mobile-menu .site-navigation a { width: 100%; height: auto; min-height: var(--control-height-touch); gap: var(--space-8); font-size: var(--text-sm); }
.site-mobile-menu .site-nav-label { opacity: 1; transform: none; visibility: visible; }
.site-mobile-menu .site-nav-count { position: static; margin-left: auto; transition: none; }
.site-mobile-menu .site-nav-activity { display: flex; }
.site-mobile-menu .site-navigation-tools { margin-top: var(--space-16); padding-top: var(--space-16); }
.site-mobile-menu .site-navigation-tools::before { left: 0; width: 100%; }
@container mobile-navigation (max-width: 280px) { .site-mobile-menu .site-navigation-tools { grid-template-columns: minmax(0, 1fr); } }
.site-navigation a, .site-icon-button, .site-account-links :is(a, button) { transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.site-page .auth-main { min-height: calc(100dvh - 250px); }
@media (max-width: 1060px) { .site-volts-menu { margin-right: 0; } .site-account-name { max-width: 100px; } }
@media (max-width: 800px) {
    html { scroll-padding-bottom: calc(var(--space-64) + var(--space-48) + env(safe-area-inset-bottom, 0px)); }
    .site-page { --site-gutter: var(--space-16); --site-content-gap: var(--space-16); --page-shell-block-start: 0; --page-shell-inline: 0; --site-mobile-item-height: calc(var(--space-48) + var(--space-4)); --site-mobile-bar-padding: var(--space-4); --site-mobile-bar-border: 1px; --site-mobile-bar-height: calc(var(--site-mobile-item-height) + 2 * var(--site-mobile-bar-padding) + 2 * var(--site-mobile-bar-border)); }
    .site-topbar { grid-template-columns: 1fr 1fr; padding: var(--space-16); gap: var(--space-16); position: relative; }
    .site-global-search { grid-row: 2; grid-column: 1 / -1; max-width: none; }
    .site-shell, .site-navigation-expanded .site-shell { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-16); padding-bottom: calc(var(--site-mobile-bar-height) + var(--space-32) + env(safe-area-inset-bottom, 0px)); }
    .site-main { min-height: 0; background: transparent; border: 0; border-radius: 0; }
    .site-main::before { display: none; }
    .site-nav-rail, #site-nav-toggle { display: none; }
    .site-mobile-bar { --card-padding: var(--site-mobile-bar-padding); --card-border-width: var(--site-mobile-bar-border); --card-radius: calc(var(--site-mobile-bar-height) / 2); --card-border-color: var(--color-border-strong); position: fixed; z-index: 40; left: 50%; bottom: calc(var(--space-16) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); width: min(26rem, calc(100% - var(--space-32))); height: var(--site-mobile-bar-height); box-shadow: none; }
    .site-mobile-link { --button-height: var(--site-mobile-item-height); --button-padding: var(--space-4); --button-gap: var(--space-2); --button-radius: calc(var(--card-radius) - var(--card-padding) - var(--card-border-width)); --button-text-size: var(--text-xs); position: relative; min-width: 0; flex-direction: column; }
    .site-mobile-indicator { --selection-radius: calc(var(--card-radius) - var(--card-padding) - var(--card-border-width)); top: 0; left: 0; }
    .site-mobile-link :is(.site-icon, .site-font-icon) { width: var(--space-20); height: var(--space-20); }
    .site-mobile-link > * { pointer-events: none; }
    .site-mobile-link .site-nav-count { --count-badge-size: 20px; top: var(--space-4); right: var(--space-4); }
    .site-mobile-link:is([aria-current="page"]:not([data-selected]), [data-selected="true"]) .site-nav-count { --count-badge-background: var(--color-on-primary); --count-badge-color: var(--color-primary); }
    .site-page .auth-main { padding: var(--space-16) 0; }
    .site-page .page { padding: 0; }
}
@media (max-width: 540px) {
    .site-logo { width: 76px; height: 34px; }
    .site-account-name { display: none; }
    .site-volts-menu { margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .site-navigation, .site-nav-label, .site-nav-toggle-icon { transition: none; }
    .site-mobile-menu { animation: none; }
}
}