.main-container{background-color:var(--border);grid-template-columns:1fr;grid-template-rows:var(--topbar) 1fr;grid-template-areas:"header""content";gap:1px;height:100dvh;min-height:0;display:grid;overflow:hidden}.main-container>*{background-color:var(--surface)}.top-bar{align-items:center;gap:var(--s-8);padding:0 var(--s-8);flex-direction:row;grid-area:header;min-width:0;display:flex}.nav-toggle{flex:none}.logo-part{padding-inline:var(--s-8);font-size:var(--t-12);color:var(--text);flex-direction:column;flex:none;justify-content:center;gap:2px;text-decoration:none;display:flex}.logo-part__mark{background-color:currentColor;width:106px;height:22px;display:block;-webkit-mask-image:url(/logo-navy.svg);mask-image:url(/logo-navy.svg);-webkit-mask-position:0;mask-position:0;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.logo-part__portal{color:var(--text-muted);padding-left:2px;font-weight:600;display:none}.profile-part{align-items:center;gap:var(--s-8);margin-left:auto;display:flex}.profile-part>.coin-balance{display:none}.side-bar{z-index:var(--z-drawer);width:min(var(--sidebar), 86vw);border-inline-end:1px solid var(--border);box-shadow:var(--shadow-2);visibility:hidden;flex-direction:column;gap:1px;padding:0;transition:transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s linear .22s;display:flex;position:fixed;inset-block:0;inset-inline-start:0;transform:translate(-100%)}.side-bar--open{visibility:visible;transition-delay:0s;transform:translate(0)}@media (prefers-reduced-motion:reduce){.side-bar{transition:none}}.main-container>.nav-backdrop{z-index:calc(var(--z-drawer) - 1);background-color:var(--overlay-scrim);position:fixed;inset:0}.main-content{grid-area:content;min-height:0;overflow-y:auto}@media (min-width:880px){.main-container{grid-template-columns:var(--sidebar) 1fr;grid-template-areas:"header header""side content";transition:grid-template-columns .22s cubic-bezier(.2,.8,.2,1)}:root[data-sidebar=collapsed] .main-container{grid-template-columns:var(--sidebar-collapsed) 1fr}.logo-part__portal{display:block}.side-bar{visibility:visible;width:auto;min-width:0;box-shadow:none;border-inline-end:none;grid-area:side;transition:none;position:static;transform:none}.main-container>.nav-backdrop{display:none}.top-bar{padding:0 var(--s-24);gap:var(--s-12)}.profile-part{gap:20px}.profile-part>.coin-balance{display:inline-flex}:root[data-sidebar=collapsed] .side-bar .link-container{gap:0;padding-inline:16px}.side-bar .link-container{transition:padding .22s cubic-bezier(.2,.8,.2,1), gap .22s cubic-bezier(.2,.8,.2,1), background var(--transition), color var(--transition);overflow:hidden}.side-bar .link-container__label{opacity:1;white-space:nowrap;min-width:0;max-width:190px;transition:max-width .22s cubic-bezier(.2,.8,.2,1),opacity .12s,transform .22s cubic-bezier(.2,.8,.2,1);transform:translate(0)}.side-bar .link-badge{opacity:1;max-width:42px;transition:max-width .22s cubic-bezier(.2,.8,.2,1),opacity .12s,transform .22s cubic-bezier(.2,.8,.2,1),padding .22s cubic-bezier(.2,.8,.2,1),margin .22s cubic-bezier(.2,.8,.2,1);overflow:hidden}:root[data-sidebar=collapsed] .side-bar .link-container__label,:root[data-sidebar=collapsed] .side-bar .link-badge{opacity:0;white-space:nowrap;min-width:0;max-width:0;margin-inline-start:0;padding-inline:0;overflow:hidden;transform:translate(-8px)}}@media (prefers-reduced-motion:reduce){.main-container,.side-bar .link-container,.side-bar .link-container__label,.side-bar .link-badge{transition:none}}
.navigation-bar{flex-direction:column;flex:1;align-items:center;gap:2px;min-height:0;padding:16px 12px;display:flex;overflow-y:auto}.navigation-bar.row{gap:var(--s-8);flex-direction:row}.navigation-bar__item{width:100%;display:block}
.link-container{font-size:var(--t-14);gap:var(--s-12);width:100%;height:var(--control-h);border-radius:var(--radius-m);color:var(--text-muted);transition:var(--transition);border:none;flex-direction:row;align-items:center;padding:0 12px;font-weight:600;display:flex}.link-container:hover,.link-container.active:hover{background-color:var(--surface-hover);color:var(--text)}.link-container.active{background-color:var(--accent-soft);color:var(--text)}.link-badge{border-radius:var(--radius-full);background:var(--accent);min-width:20px;color:var(--text-on-brand);font-size:var(--t-12);text-align:center;margin-inline-start:auto;padding:0 6px;font-weight:700;line-height:20px}
.avatar-part{width:var(--control-h);height:var(--control-h);cursor:pointer;border-radius:var(--radius-m);transition:var(--transition);background:0 0;border:none;flex-shrink:0}.avatar-part:hover{background-color:var(--surface-hover)}.avatar{background-color:var(--accent);width:32px;height:32px;color:var(--text-on-brand);font-weight:700;font-size:var(--t-12);border-radius:50%;justify-content:center;align-items:center;margin:0 auto;display:flex}.avatar__img{object-fit:cover;border-radius:50%;width:100%;height:100%}.avatar-wrap{position:relative}.avatar-menu{z-index:50;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-l);min-width:240px;box-shadow:var(--shadow-2);animation:avatar-menu-in var(--transition);padding:8px;position:absolute;top:calc(100% + 8px);right:0}@keyframes avatar-menu-in{0%{opacity:0;transform:translateY(-4px)}}.avatar-menu__head{flex-direction:column;gap:2px;padding:8px 12px;display:flex}.avatar-menu__name{color:var(--text);font-size:15px;font-weight:700}.avatar-menu__role{color:var(--text-muted);font-size:13px}.avatar-menu__divider{background:var(--border);height:1px;margin:6px 0}.avatar-menu__appearance{justify-content:space-between;align-items:center;gap:var(--s-12);color:var(--text-muted);font-size:var(--t-12);padding:8px 12px;font-weight:700;display:flex}.avatar-menu__appearance .appearance-controls{flex-shrink:0}.avatar-menu__item{align-items:center;gap:var(--s-12);border-radius:var(--radius-m);width:100%;font-size:var(--t-14);color:var(--text);cursor:pointer;text-align:left;transition:var(--transition);background:0 0;border:none;padding:10px 12px;font-weight:600;text-decoration:none;display:flex}.avatar-menu__item:hover{background:var(--surface-hover)}.avatar-menu__item--danger{color:var(--error)}.avatar-menu__item--danger:hover{background:var(--error-bg)}