:root {
     --sidebar-width: 200px;
     --sidebar-collapsed-width: 60px;
     --transition-speed: .3s;
 }

 /* 主题控制区 */
 .theme-controls {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     padding-right: var(--pico-typography-spacing-vertical);
 }
 .color-picker-wrapper {
     position: relative;
 }
 .color-picker-trigger {
     cursor: pointer;
 }
 .color-picker-panel {
     position: absolute;
     right: 0;
     top: 100%;
     z-index: 99;
     background: var(--pico-card-background-color);
     border: 1px solid var(--pico-muted-border-color);
     border-radius: var(--pico-border-radius);
     padding: 8px;
     display: flex;
     gap: 6px;
     flex-wrap: wrap;
     width: 192px;
     box-shadow: var(--pico-card-box-shadow);
 }
 .lang-option {
     display: block;
     padding: 4px 12px;
     font-size: 0.8rem;
     white-space: nowrap;
     cursor: pointer;
 }
 .lang-option:hover {
     background: var(--pico-primary-focus);
 }
 .lang-active {
     font-weight: bold;
     color: var(--pico-primary);
 }

 .color-dot {
     display: inline-block;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     border: 2px solid transparent;
     cursor: pointer;
     transition: all 0.15s;
 }

 body {
     margin: 0;
     padding: 0;
     overflow-x: hidden;
 }

 /* 布局容器 */
 .layout-wrapper {
     display: grid;
     grid-template-columns: auto 1fr;
     min-height: 100vh;
 }

 /* 侧边栏样式 */
 .layout-wrapper>aside {
     width: var(--sidebar-width);
     border-right: 1px solid var(--pico-muted-border-color);
     background: var(--pico-background-color);
     display: flex;
     flex-direction: column;
     height: 100vh;
     position: sticky;
     top: 0;
     overflow-x: hidden;
     overflow-y: auto;
     z-index: 100;
     padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
     transition: width var(--transition-speed);

     /* 滚动条默认隐藏 */
     scrollbar-width: thin;                       /* Firefox: 占位但 thumb 透明 */
     scrollbar-color: transparent transparent;
 }

 /* WebKit（Chrome/Safari/Edge）：占位但默认透明 */
 .layout-wrapper>aside::-webkit-scrollbar {
     width: 6px;
 }

 .layout-wrapper>aside::-webkit-scrollbar-thumb {
     background: transparent;
     border-radius: 3px;
     transition: background .3s ease;
 }

 .layout-wrapper>aside::-webkit-scrollbar-track {
     background: transparent;
 }

 /* 滚动时 / hover 时显示滚动条 */
 .layout-wrapper>aside.is-scrolling,
 .layout-wrapper>aside:hover {
     scrollbar-color: var(--pico-muted-border-color) transparent;
 }

 .layout-wrapper>aside.is-scrolling::-webkit-scrollbar-thumb,
 .layout-wrapper>aside:hover::-webkit-scrollbar-thumb {
     background: var(--pico-muted-border-color);
 }

 .layout-wrapper>aside::-webkit-scrollbar-thumb:hover {
     background: var(--pico-muted-color);
 }

 /* 分组标题 */
 .menu-group-title {
     font-size: 16px;
     color: var(--pico-muted-color);
     padding: calc(var(--pico-nav-element-spacing-vertical) * .5) 0;
     text-transform: uppercase;
     white-space: nowrap;
 }

 .nav-li {
     white-space: nowrap;
     overflow: hidden;
 }

 .nav-link {
     font-size: 16px;
     transition: background var(--transition-speed);
     cursor: pointer;
     text-decoration: none;
 }

 .nav-link:hover span {
     text-decoration: none;
 }

 .nav-link.active {
     color: var(--pico-color);
 }

 .nav-link i {
     min-width: 16px;
     text-align: center;
     transition: margin var(--transition-speed);
 }

 .nav-link .nav-label {
     opacity: 1;
     display: inline-block;
     white-space: nowrap;
 }

 /* 侧边栏收缩模式 */

 .layout-wrapper>aside.sidebar-mini {
     width: var(--sidebar-collapsed-width);
     transition: width var(--transition-speed);
 }

 .sidebar-mini .nav-link {
     justify-content: center;
 }

 .sidebar-mini .nav-link i {
     margin-right: 0;
 }

 .sidebar-mini .menu-group-title {
     justify-content: center;
 }

 .sidebar-mini .nav-label,
 .sidebar-mini .menu-group-title span {
     opacity: 0;
     pointer-events: none;
     display: none;
     width: 0;
 }

 /* 移动端导航 */
 .title_hg .dropdown {
     display: none;
 }

 /* 内容区 */
 .content-area {
     padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
     margin: 0 auto;
     width: 100%;
 }

 .collapse-btn {
     background: none;
     border: none;
     cursor: pointer;
     color: var(--pico-muted-color);
     padding: 0;
 }

 .title_hg {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 /* 侧边栏用户区域 */
 .user-info-box {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 0.5rem;
 }

 .logout-btn:hover {
     color: var(--pico-error-color) !important;
 }

 /* 隐藏侧边栏时的处理 */
 .sidebar-mini .user-info-box {
     flex-direction: column;
 }

 .sidebar-mini .logout-btn {
     margin-top: 5px !important;
 }

 @keyframes toast-in {
     from {
         transform: translateX(100%);
         opacity: 0;
     }

     to {
         transform: translateX(0);
         opacity: 1;
     }
 }

 @keyframes toast-out {
     from {
         transform: translateX(0);
         opacity: 1;
     }

     to {
         transform: translateX(100%);
         opacity: 0;
     }
 }

 dialog {
    backdrop-filter: blur(5px); /* 给背景加虚化，高级感拉满 */
    background-color: rgba(0, 0, 0, 0.5); /* 遮罩层加深 */
}

 /* 首页移动端菜单 */
 .home-mobile {
     display: none;
     padding: 1rem;
 }
 .home-menu-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 0.5rem;
 }
 .home-menu-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: 0.25rem;
     padding: 0.75rem 0.5rem;
     border-radius: var(--pico-border-radius);
     text-decoration: none;
     color: var(--pico-color);
     background: var(--pico-card-background-color);
     border: 1px solid var(--pico-muted-border-color);
     transition: background 0.15s;
 }
 .home-menu-item:hover {
     background: var(--pico-primary-focus);
     border-color: var(--pico-primary);
     color: var(--pico-primary);
 }

 @media (max-width: 1024px) {
     .home-desktop { display: none !important; }
     .home-mobile { display: block !important; }
     .layout-wrapper {
         grid-template-columns: 1fr;
     }

     .masonry-controls {
         margin-bottom: 0px;
     }

     .main-article,
     .content-area {
         padding: 0;
     }

     .layout-wrapper>aside {
         display: none;
     }

     .title_hg .dropdown {
         display: block;
     }

     .title_hg .collapse-btn,
     .title_hg h1 {
         display: none;
     }
 }

 /* ============ 模块切换过渡 ============ */

 .main-article {
     position: relative;
 }

 /* 锁高度，避免新旧模块高度差导致滚动条/布局抖动 */
 #dynamic-content {
     min-height: 60vh;
 }

 /* 顶部细进度条（仅在 isLoading 时出现，>200ms 才显示） */
 .loading-bar {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     overflow: hidden;
     background: var(--pico-muted-border-color);
     z-index: 10;
 }

 .loading-bar::after {
     content: '';
     display: block;
     height: 100%;
     width: 30%;
     background: var(--pico-primary, var(--pico-color));
     animation: loading-slide 1s ease-in-out infinite;
 }

 @keyframes loading-slide {
     0% {
         transform: translateX(-100%);
     }

     100% {
         transform: translateX(400%);
     }
 }

 /* 降级 fade（不支持 View Transitions API 的浏览器） */
 #dynamic-content {
     transition: opacity .18s ease, transform .18s ease;
 }

 #dynamic-content.is-leaving {
     opacity: 0;
     transform: translateY(4px);
 }

 #dynamic-content.is-entering {
     opacity: 0;
     transform: translateY(-4px);
 }

 /* 现代浏览器：调短默认 0.25s 的 cross-fade 时长 */
 ::view-transition-old(root),
 ::view-transition-new(root) {
     animation-duration: .22s;

 }