#menu {
    user-select: none;
}
#menu.top {
    display: flex;
    gap: 20px;
    background-color: var(--theme-primary-color);
    box-shadow: 0 10px 10px 0 var(--shadow-color);
    font-weight: bold;
    position: fixed;
    transition: background 0.25s ease-out, top 0.25s ease-out;
    top: 0;
    width: 100vw;
    height: 50px;
    z-index: 100;
}
#menu.top #top-menu-items.wide {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    margin-left: 20px;
    gap: 40px;
}
#menu.top #top-menu-items.wide.start {
    justify-content: start;
    margin-left: 60px;
}
#menu.top #top-menu-items.wide.center {
    justify-content: center;
    width: 100%;
    margin-left: 0;
}
#menu.top #top-menu-items.wide.end {
    justify-content: end;
    width: 100%;
    margin-left: 0;
    margin-right: 20px;
}
#menu.top #top-menu-items.wide .title {
    color: var(--text-primary-color);
    display: inline-block;
    margin-right: 5px;
}
#menu.top #top-menu-items.wide a {
    color: var(--text-primary-color);
    display: inline-block;
}
#menu.top.hidden {
    top: -60px;
}
#menu.top #top-menu-items.thin {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    box-shadow: 0 10px 10px 0 var(--shadow-color);
    font-weight: bold;
    position: fixed;
    transition: all 0.3s ease-out;
    top: 0;
    width: 100vw;
    min-height: 50px;
    z-index: 100;
    cursor: pointer;
    box-sizing: border-box;
}
#menu.top #top-menu-items.thin.start {
    justify-content: start;
    margin-left: 60px;
}
#menu.top #top-menu-items.thin.center {
    justify-content: center;
    margin-left: 0;
}
#menu.top #top-menu-items.thin.end {
    justify-content: end;
    width: 100%;
    margin-left: 0;
    margin-right: 20px;
}
#menu.top #top-menu-items.thin .title {
    background-color: var(--theme-primary-color);
    color: var(--text-primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px; 
    box-sizing: border-box;
    margin: 0;
}
#menu.top #top-menu-items.thin .title i {
    transition: transform 0.28s ease;
}
#menu.top #top-menu-items.thin.open .title i {
    transform: rotate(90deg);
}
#menu.top #top-menu-items.thin .items {
    /* 使用 translateY + opacity 做下拉动画，避免 display 切换无动画 */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--shadow-color);
    box-shadow: 0 10px 10px 0 var(--shadow-color);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transform-origin: top;
    transition: max-height 0.36s cubic-bezier(.2,.9,.2,1), opacity 0.24s ease, transform 0.28s cubic-bezier(.2,.9,.2,1);
    pointer-events: none;
    visibility: hidden;
}
#menu.top #top-menu-items.thin.open .items {
    max-height: 500px; /* 可根据项数调整 */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}
#menu.top #top-menu-items.thin .items a{
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    margin: 0;
    color: var(--surface-color);
    box-sizing: border-box;
    text-decoration: none;
    opacity: 0;
    transform: translateY(-6px);
    transition: transform 0.32s cubic-bezier(.2,.9,.2,1), opacity 0.24s ease;
}
#menu.top #top-menu-items.thin .items a .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 8px;
}
#menu.top #top-menu-items.thin .items a .item > div {
    display: flex;
    align-items: center;
    justify-content: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
#menu.top #top-menu-items.thin .items a .item > div:first-child {
    flex-shrink: 0;
    width: 20px;
}
#menu.top #top-menu-items.thin .items a .item > div:last-child {
    flex: 1;
    min-width: 0;
}
#menu.top #top-menu-items.thin.open .items a {
    opacity: 1;
    transform: translateY(0);
}

#menu.side {
    background-color: var(--theme-primary-color);
    box-shadow: -5px 0 10px 0 var(--shadow-color);
    font-weight: bold;
    position: fixed;
    top: 0;
    width: min(60px, 10%);
    height: 100vh;
    z-index: 10;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.3s ease-out;
}
#menu.side.left {
    left: 0;
    box-shadow: 5px 0 10px 0 var(--shadow-color);
}
#menu.side.left ~ .main {
    padding-left: min(60px, 10%);
}
#menu.side.right {
    right: 0;
    box-shadow: -5px 0 10px 0 var(--shadow-color);
}
#menu.side.right ~ .main {
    padding-right: min(60px, 10%);
}
#menu.side:hover {
    width: 220px;
}
#menu.side #side-menu-items {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
}
#menu.side #side-menu-items.start{
    justify-content: start;
}
#menu.side #side-menu-items.center{
    justify-content: center;
}
#menu.side #side-menu-items.end{
    justify-content: end;
}
#menu.side.left #side-menu-items .title,
#menu.side.left #side-menu-items .item {
    color: var(--text-primary-color);
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: all 0.2s ease-out;
}
#menu.side.left #side-menu-items .title i,
#menu.side.left #side-menu-items .item i {
    color: var(--text-primary-color);
    flex-shrink: 0;
    font-size: 100%;
    min-width: 20px;
}
#menu.side.left #side-menu-items .title i {
    rotate: -90deg;
    transition: rotate 0.2s ease-out;
}
#menu.side.left #side-menu-items .label {
    opacity: 0;
    transition: opacity 0.2s ease-out;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
#menu.side.left:hover #side-menu-items .label {
    opacity: 1;
}
#menu.side.left:hover #side-menu-items .title i {
    rotate: 0deg;
}
#menu.side.right #side-menu-items .title,
#menu.side.right #side-menu-items .item {
    color: var(--text-primary-color);
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-direction: row-reverse;
    transition: all 0.2s ease-out;
}
#menu.side.right #side-menu-items .title i,
#menu.side.right #side-menu-items .item i {
    color: var(--text-primary-color);
    flex-shrink: 0;
    font-size: 20px;
    min-width: 20px;
}
#menu.side.right #side-menu-items .title i {
    rotate: 90deg;
    transition: rotate 0.2s ease-out;
}
#menu.side.right #side-menu-items .label {
    opacity: 0;
    transition: opacity 0.2s ease-out;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}
#menu.side.right:hover #side-menu-items .label {
    opacity: 1;
}
#menu.side.right:hover #side-menu-items .title i {
    rotate: 0deg;
}

@media (max-width: 900px) {
    #menu.top #top-menu-items.wide {
        display: none;
    }
    #menu.top #top-menu-items.thin {
        display: flex;
    }
}