:root{ --vh-content:92vh; --vh-bar:4vh; }
html,body{ margin:0; height:100%; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; }

/* 背景与基础 */
body{
  position:relative;
  background:#000;
  color:#111;
  overflow-x:hidden;
  min-height:100vh;
  padding-bottom:8vh;            /* 为底部两条工具栏预留空间 */
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:url("/imagine/background.png") center/cover no-repeat;
  opacity:.22;                                  /* ✅ 更淡的棋盘 */
  filter:brightness(1.05) saturate(0.9);        /* ✅ 柔化亮度与饱和度 */
  pointer-events:none;
  z-index:0;
}

/* 顶部与主工作区 */
.homepage{
  min-height:calc(100vh - 8vh);
  display:flex;
  flex-direction:column;
}
.topbar{
  padding:12px 18px;
  background:rgba(255,255,255,.9);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  backdrop-filter:blur(3px);
}
.title{ margin:0; font-size:1.25rem; font-weight:700; cursor:pointer; text-align: center;}

.workarea{
  position:fixed;
  flex:1;
  display:flex;
  gap:16px;
  padding:16px;
  box-sizing:border-box;
  min-height:0;
  position:fixed;
}
#sidebar{
  width:240px;
  flex:0 0 240px;
  background:#fff;
  border-right:1px solid #eee;
  overflow:auto;
  border-radius:10px;
}

/* 左侧菜单 */
.menu-list{ list-style:none; margin:0; padding:8px; }
.menu-btn{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:15px 15px;
  font-weight:1000;
  border-radius:25px;
  color:#222;
}
.menu-btn:hover{ background:#eee; }
.menu-btn.active{ background:#222; color:#fff; }

/* 内容面板 */
.mainarea{ flex:1; overflow:auto; }
.panel{
  max-width:1100px;
  margin:0 auto;
  min-height:260px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(4px);
  border-radius:14px;
  padding:24px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.is-loading{ opacity:.6; pointer-events:none; }

/* 底部双工具栏固定到底部 */
footer{
  position:fixed;
  left:0; right:0; bottom:0;
  height:3vh;
  z-index:2;
}

.toolbar p{ margin:0; font-size:.85rem; }
.toolbar .title-legal{ font-weight:700; }

.time{
  align-items:right;
}
.toolbar{
  position: fixed;
  left:0; right:0; bottom:0;
  height:3vh;
  background:#fff;
  color:#000;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0 2vw;
  font-family:monospace;
}

/* 层级控制：内容在背景之上 */
main, header, footer, .workarea, .panel, #sidebar {
  position:relative;
  z-index:1;
}

/* 响应式优化 */
@media (max-width: 900px){
  #sidebar{ width:200px; flex-basis:200px; }
}
@media (max-width: 720px){
  #sidebar{ display:none; }
  .workarea{ padding:12px; }
  .panel{ padding:18px; }
}