/* Shared shell geometry: logo and both creative headers share one centerline. */
:root{--app-header-height:66px;--app-content-gap:32px;--sidebar-item-size:40px;--sidebar-item-gap:4px}
.app>.sidebar{padding-top:0;overflow:hidden}
.sidebar>.brand{flex:0 0 var(--app-header-height);height:var(--app-header-height);padding:0;align-items:center}
.sidebar .brand-lockup{display:flex;flex-direction:column;align-items:center;transform:scale(calc(2 / 3));transform-origin:center}
.sidebar .brand-logo{height:30px}
.sidebar .brand small{margin:0}
.sidebar>.sidebar-nav{display:flex;flex-direction:column;gap:16px;min-height:0;flex:0 1 auto;padding:calc(var(--app-content-gap) - 8px) 0 0;overflow:hidden}
.sidebar-nav>.nav-group{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--sidebar-item-gap)}
.sidebar-nav>.nav-group+.nav-group{padding-top:17px}
.sidebar-nav>.nav-group+.nav-group::before{display:block;background:#dfe2dc}
.sidebar .sidebar-nav :is(a,.sidebar-nav-action){box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:var(--sidebar-item-size);height:var(--sidebar-item-size);min-height:var(--sidebar-item-size);flex:0 0 var(--sidebar-item-size);padding:0;border:0;border-radius:10px;background:transparent;color:var(--sidebar-text);cursor:pointer;transform-origin:center;transition:color .18s ease,opacity .12s ease,transform .2s cubic-bezier(.2,.8,.2,1)}
.sidebar .sidebar-nav a.active{color:var(--sidebar-active)}
.sidebar .sidebar-nav a{position:relative}
.sidebar-link-pending{position:absolute;right:3px;bottom:3px;width:8px;height:8px;box-sizing:border-box;border:1px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sidebar-link-loading .7s linear infinite;pointer-events:none}
@keyframes sidebar-link-loading{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.sidebar-link-pending{animation:none}}
.sidebar .sidebar-nav :is(a,.sidebar-nav-action):not(:disabled):hover{transform:scale(1.055)}
.sidebar .sidebar-nav :is(a,.sidebar-nav-action):not(.active):not([aria-current=page]):not(:disabled):hover{color:#000}
.sidebar .sidebar-nav a.active:hover{color:var(--sidebar-active)}
.sidebar .sidebar-nav :is(a,.sidebar-nav-action):not(:disabled):active{opacity:.72;transform:scale(.93)}
.sidebar .sidebar-nav :is(a,.sidebar-nav-action):focus-visible{outline:2px solid #a98a20;outline-offset:-2px}
.sidebar-nav-action:disabled{cursor:default;opacity:.45}
.sidebar .sidebar-nav .nav-icon{display:block;width:24px;height:24px;flex:0 0 24px}
.sidebar .sidebar-nav .sidebar-new-project-icon{width:19.2px;height:19.2px;flex-basis:19.2px}
.sidebar-nav>.sidebar-projects{flex:0 1 auto;min-height:57px;overflow:hidden}
.sidebar-project-list{display:flex;flex-direction:column;align-items:center;gap:var(--sidebar-item-gap);min-height:0;width:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;padding:3px 0}
.sidebar-project-list::-webkit-scrollbar{display:none}
.sidebar .sidebar-nav .sidebar-project[aria-current=page]{background:#e8eae4}
.sidebar .sidebar-project.mp-entering{opacity:1}
.sidebar-folder-viewport{position:relative;display:block;width:24px;height:24px;flex:0 0 24px;pointer-events:none}
/* Scale the original 220px folder, including its motion distances and blur. */
.sidebar-folder-viewport>.mp-folder{position:absolute;width:220px;height:154px;left:0;top:3px;zoom:calc(24 / 220)}
.sidebar-folder-viewport .mp-folder-back{border-radius:15px}
.sidebar-folder-viewport .mp-folder-cover{border-radius:12px 12px 15px 15px;background:rgba(var(--folder-rgb),.5);pointer-events:none}
.sidebar-folder-viewport .mp-sheet{border:0;border-radius:11px;overflow:hidden;background:transparent}
@media(hover:hover){
 .sidebar-project:not(.mp-entering):hover .mp-folder{transform:translateY(-3px)}
 .sidebar-project:not(.mp-entering):hover .mp-folder-cover{transform:rotateX(-5deg)}
 .sidebar-project:not(.mp-entering):hover .mp-sheet-front{transform:translate(0,-5px) rotate(0deg) scale(1)}
}
.sidebar-project.mp-entering .mp-folder{transform:translateY(-6px) scale(1.07);transition:transform var(--mp-entry-duration) var(--mp-entry-ease)}
.sidebar-project.mp-entering .mp-folder-cover{height:64%;transform:rotateX(-42deg);transition:transform var(--mp-entry-duration) var(--mp-entry-ease),height var(--mp-entry-duration) var(--mp-entry-ease)}
.sidebar>.sidebar-bottom{display:block;flex:0 0 auto}
.sidebar-hint{position:fixed;z-index:1500;display:flex;align-items:center;height:40px;box-sizing:border-box;max-width:min(240px,calc(100vw - 100px));padding:0 14px;border:0;border-radius:10px;background:#e8e9e5;color:#000;font-size:10px;font-weight:400;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;opacity:0;visibility:hidden;transform:translateX(-8px);transition:opacity 160ms ease,transform 180ms cubic-bezier(.2,.8,.2,1),visibility 180ms}
.sidebar-hint[data-visible=true]{opacity:1;visibility:visible;transform:translateX(0)}
.sidebar-project-error{color:#a74636;font-size:12px;line-height:1.65}
@media(pointer:coarse){:root{--sidebar-item-size:44px}}
@media(max-width:760px){:root{--app-header-height:58px;--app-content-gap:16px}.sidebar .brand-logo{height:28px}.sidebar>.sidebar-nav{padding-top:calc(var(--app-content-gap) - 8px)}}
@media(max-height:640px){.sidebar>.sidebar-nav{gap:8px}.sidebar-nav>.nav-group+.nav-group{padding-top:9px}.sidebar-nav>.sidebar-projects{min-height:49px}.sidebar>.sidebar-bottom{padding-top:6px}.app>.sidebar{padding-bottom:8px}}
@media(max-height:540px){.sidebar>.sidebar-nav{overflow-y:auto;flex:1 1 0;scrollbar-width:none}.sidebar-nav>.sidebar-projects{flex-shrink:0}.sidebar-project-list{max-height:120px}}
@media(prefers-reduced-motion:reduce){.sidebar .sidebar-nav :is(a,.sidebar-nav-action),.sidebar-hint,.sidebar-project .mp-folder,.sidebar-project .mp-folder-cover{transition:none!important}.sidebar .sidebar-nav :is(a,.sidebar-nav-action):is(:hover,:active),.sidebar-project .mp-folder,.sidebar-project .mp-sheet,.sidebar-project .mp-folder-cover{transform:none!important}}