@layer components{.sidebar{display:flex;flex-direction:column;inline-size:var(--nav-drawer-width);block-size:100%;background-color:var(--md-sys-color-surface-container-low);border-inline-end:1px solid var(--md-sys-color-outline-variant);padding-block:var(--space-md);padding-inline:var(--space-sm);overflow-y:auto}.sidebar-brand{display:flex;align-items:center;gap:var(--space-sm);padding-block:var(--space-md);padding-inline:var(--space-md);margin-block-end:var(--space-sm)}.sidebar-brand-name{font-family:var(--md-sys-typescale-display-font);font-size:var(--md-sys-typescale-title-large-size);font-weight:var(--md-sys-typescale-title-large-weight);color:var(--md-sys-color-primary)}.sidebar-nav{display:flex;flex-direction:column;gap:var(--space-xs);list-style:none;margin:0;padding:0}.sidebar-nav-item{display:flex;align-items:center;gap:var(--space-md);min-block-size:var(--touch-target-min);padding-block:var(--space-sm);padding-inline:var(--space-md);border-radius:var(--md-sys-shape-full);color:var(--md-sys-color-on-surface-variant);text-decoration:none;font-family:var(--md-sys-typescale-body-font);font-size:var(--md-sys-typescale-body-size);font-weight:var(--md-sys-typescale-label-weight);transition:background-color var(--md-motion-duration-short) var(--md-motion-easing-standard),color var(--md-motion-duration-short) var(--md-motion-easing-standard)}.sidebar-nav-item:hover{background-color:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,transparent);color:var(--md-sys-color-on-surface)}.sidebar-nav-item:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:-2px}.sidebar-nav-item-active{background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.sidebar-nav-item-active:hover{background-color:color-mix(in srgb,var(--md-sys-color-primary-container) 88%,white);color:var(--md-sys-color-on-primary-container)}.sidebar-nav-icon{font-size:1.5rem;line-height:1;flex-shrink:0}}@layer components{.topbar{display:flex;align-items:center;justify-content:space-between;block-size:64px;padding-inline:var(--space-lg);background-color:var(--md-sys-color-surface-container);border-block-end:1px solid var(--md-sys-color-outline-variant)}.topbar-title{font-family:var(--md-sys-typescale-display-font);font-size:var(--md-sys-typescale-title-large-size);font-weight:var(--md-sys-typescale-title-large-weight);color:var(--md-sys-color-on-surface);margin:0}.topbar-actions{display:flex;align-items:center;gap:var(--space-sm)}.topbar-lang-switcher{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);min-block-size:var(--touch-target-min);min-inline-size:var(--touch-target-min);padding-inline:var(--space-md);border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-full);background-color:transparent;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-sys-typescale-body-font);font-size:var(--md-sys-typescale-label-size);font-weight:var(--md-sys-typescale-label-weight);cursor:pointer;transition:background-color var(--md-motion-duration-short) var(--md-motion-easing-standard),border-color var(--md-motion-duration-short) var(--md-motion-easing-standard)}.topbar-lang-switcher:hover{background-color:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,transparent);border-color:var(--md-sys-color-outline)}.topbar-lang-switcher:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.topbar-lang-icon{font-size:1.25rem;line-height:1}}@layer components{.mobile-nav{position:fixed;inset-inline:0;inset-block-end:0;display:flex;align-items:center;justify-content:space-around;block-size:56px;padding-block-end:env(safe-area-inset-bottom,0px);background-color:var(--md-sys-color-surface-container-high);border-block-start:1px solid var(--md-sys-color-outline-variant);z-index:50}.mobile-nav-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-block-size:var(--touch-target-min);min-inline-size:var(--touch-target-min);padding-block:var(--space-xs);padding-inline:var(--space-sm);border-radius:var(--md-sys-shape-md);color:var(--md-sys-color-on-surface-variant);text-decoration:none;transition:color var(--md-motion-duration-short) var(--md-motion-easing-standard),background-color var(--md-motion-duration-short) var(--md-motion-easing-standard)}.mobile-nav-tab:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:-2px}.mobile-nav-tab-active{color:var(--md-sys-color-primary)}.mobile-nav-tab-active .mobile-nav-icon-wrapper{background-color:var(--md-sys-color-primary-container)}.mobile-nav-tab-active .mobile-nav-icon{color:var(--md-sys-color-on-primary-container)}.mobile-nav-icon-wrapper{display:flex;align-items:center;justify-content:center;inline-size:3.5rem;block-size:2rem;border-radius:var(--md-sys-shape-full);transition:background-color var(--md-motion-duration-short) var(--md-motion-easing-standard)}.mobile-nav-icon{font-size:1.5rem;line-height:1}.mobile-nav-label{font-family:var(--md-sys-typescale-body-font);font-size:var(--md-sys-typescale-label-small-size);font-weight:var(--md-sys-typescale-label-weight);line-height:1}}@layer components{.app-shell{display:grid;grid-template-columns:var(--nav-drawer-width) 1fr;grid-template-rows:auto 1fr;min-block-size:100dvh}.app-shell-sidebar{grid-row:1 / -1;grid-column:1}.app-shell-topbar{grid-column:2;grid-row:1}.app-shell-main{grid-column:2;grid-row:2;padding:var(--content-padding);overflow-y:auto}.app-shell-mobile{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;min-block-size:100dvh}.app-shell-mobile .app-shell-topbar{grid-column:1;grid-row:1}.app-shell-mobile .app-shell-main{grid-column:1;grid-row:2;padding:var(--content-padding);padding-block-end:calc(56px + env(safe-area-inset-bottom,0px) + var(--space-md));overflow-y:auto}}@layer components{.app-loading{display:grid;place-items:center;min-block-size:100dvh;background-color:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface)}.app-loading-spinner{display:flex;flex-direction:column;align-items:center;gap:var(--space-md)}.app-loading-indicator{inline-size:2.5rem;block-size:2.5rem;border:3px solid var(--md-sys-color-surface-container-high);border-block-start-color:var(--md-sys-color-primary);border-radius:var(--md-sys-shape-full);animation:app-spin var(--md-motion-duration-long) linear infinite}.app-loading-text{font-family:var(--md-sys-typescale-body-font);font-size:var(--md-sys-typescale-body-size);color:var(--md-sys-color-on-surface-variant)}@keyframes app-spin{to{transform:rotate(360deg)}}.app-route-container{animation:app-fade-in var(--md-motion-duration-medium) var(--md-motion-easing-decelerate)}@keyframes app-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}}