/* ============================================================
 * 排版整改 切片 H —— 首页/工作台 左侧一级导航栏
 * 左侧主导航 + 顶部轻量操作条 双结构
 * 颜色全部复用既有变量/hex（浅蓝白原配色），零深色引入
 * ============================================================ */

/* ---------- 左侧导航 Rail ---------- */
#byokAppNav{
  position:fixed;top:0;left:0;bottom:0;width:216px;z-index:70;
  display:flex;flex-direction:column;
  background:var(--card,#FFFFFF);
  border-right:1px solid var(--border,#dcdfe6);
  transition:width .2s ease, transform .2s ease;
  font-family:inherit;
}
#byokAppNav.h-collapsed{width:64px;}

/* 顶部品牌区（复用现有 Logo 文案） */
.h-brand{
  display:flex;align-items:center;gap:9px;
  padding:15px 16px 13px;font-size:16px;font-weight:700;
  color:var(--text,#303133);white-space:nowrap;overflow:hidden;
  border-bottom:1px solid var(--border,#dcdfe6);
}
.h-brand .h-brand-ic{flex:none;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:var(--primary-soft,#e6f4ff);}
#byokAppNav.h-collapsed .h-brand{justify-content:center;padding-left:0;padding-right:0;}
#byokAppNav.h-collapsed .h-brand-tx{display:none;}

/* 导航列表 */
.h-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 10px;display:flex;flex-direction:column;gap:2px;}
.h-sec{padding:12px 12px 5px;font-size:12px;color:var(--text-muted,#606266);letter-spacing:1px;white-space:nowrap;overflow:hidden;}
#byokAppNav.h-collapsed .h-sec{display:none;}

.h-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:8px;
  color:var(--text-muted,#606266);font-size:14px;
  text-decoration:none;white-space:nowrap;overflow:hidden;
  position:relative;transition:background .15s,color .15s;
}
.h-item:hover{background:var(--muted-soft,#e6f4ff);color:var(--text,#303133);}
.h-item.h-cur{background:var(--primary-soft,#e6f4ff);color:var(--primary-dark,#0958d9);font-weight:600;}
.h-item.h-cur::before{
  content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:2px;background:var(--primary,#38BDF8);
}
.h-ic{flex:none;width:20px;text-align:center;line-height:1;}
.h-tx{flex:1;overflow:hidden;text-overflow:ellipsis;}
.h-key{font-size:12px;color:var(--text-muted,#606266);opacity:.75;}
#byokAppNav.h-collapsed .h-tx,
#byokAppNav.h-collapsed .h-key,
#byokAppNav.h-collapsed .h-badge{display:none;}
#byokAppNav.h-collapsed .h-item{justify-content:center;padding:9px 0;}

/* 「我的画布」重点视觉强调 */
.h-item-hot{background:linear-gradient(90deg,#38BDF8,#38BDF8);color:#fff;}
.h-item-hot.h-cur,
.h-item-hot:hover{background:linear-gradient(90deg,#38BDF8,#38BDF8);color:#fff;filter:brightness(1.05);}
.h-item-hot.h-cur::before{background:#fff;}
.h-badge{
  flex:none;font-size:12px;font-weight:700;line-height:1;
  background:rgba(255,255,255,.28);border-radius:999px;padding:2px 7px;
}

/* 底部区：设置 / 帮助 / 用户 */
.h-bottom{border-top:1px solid var(--border,#dcdfe6);padding:8px 10px;display:flex;flex-direction:column;gap:2px;}
.h-user{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:13px;color:var(--text-muted,#606266);white-space:nowrap;overflow:hidden;}
.h-avatar{width:26px;height:26px;border-radius:999px;background:var(--primary-soft,#e6f4ff);color:var(--primary-dark,#0958d9);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:none;}
.h-user .h-uname{flex:1;overflow:hidden;text-overflow:ellipsis;}
.h-logout{flex:none;border:0;background:none;color:var(--primary,#38BDF8);cursor:pointer;font-size:12px;padding:2px 4px;}
.h-logout:hover{text-decoration:underline;}
#byokAppNav.h-collapsed .h-user{display:none;}

/* 折叠开关 */
.h-collapse{
  margin:6px 10px 10px;padding:7px;border:1px solid var(--border,#dcdfe6);
  background:var(--bg-soft,#ffffff);color:var(--text-muted,#606266);
  border-radius:8px;cursor:pointer;font-size:12px;text-align:center;
  white-space:nowrap;transition:color .15s,border-color .15s;
}
.h-collapse:hover{color:var(--primary-dark,#0958d9);border-color:var(--primary,#38BDF8);}

/* body 让位 */
body.h-hasnav{padding-left:216px;}
body.h-hasnav.h-navcollapsed{padding-left:64px;}

/* 去重复：隐藏门户旧顶导 / workbench v10_topbar 注入的「←灵感广场」返回链 */
#v10-top,header.v10-nav,.v10-nav{display:none !important;}
.v10-back{display:none !important;}

/* tooltip（悬浮带说明） */
.h-item .h-tip{
  display:none;position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);
  background:var(--card,#FFFFFF);border:1px solid var(--border,#dcdfe6);
  border-radius:8px;padding:6px 10px;font-size:12px;color:var(--text,#303133);
  white-space:nowrap;box-shadow:var(--shadow,0 1px 3px rgba(79,100,130,.12));z-index:80;pointer-events:none;
}
.h-item:hover .h-tip{display:block;}
#byokAppNav.h-collapsed .h-item:hover .h-tip{display:block;}

/* ---------- 移动端 <768px：底部 tab + 抽屉 ---------- */
.h-mtab{display:none;}
@media (max-width:767px){
  #byokAppNav{transform:translateX(-102%);width:240px;box-shadow:4px 0 24px rgba(29,33,41,.18);}
  #byokAppNav.h-open{transform:none;}
  body.h-hasnav{padding-left:0 !important;}
  .h-mtab{
    display:flex;position:fixed;left:0;right:0;bottom:0;height:56px;z-index:71;
    background:var(--card,#FFFFFF);border-top:1px solid var(--border,#dcdfe6);
  }
  .h-mtab a{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    font-size:12px;color:var(--text-muted,#606266);text-decoration:none;
  }
  .h-mtab a.h-cur{color:var(--primary-dark,#0958d9);font-weight:600;}
  body{padding-bottom:56px;}
}

/* ---------- H 修复：版本更新公告 → 右下角小卡，不遮画布中心 ---------- */
.byok-panel.bp-ver{
  top:auto !important; left:auto !important; right:16px !important; bottom:90px !important;
  transform:none !important; width:360px !important; max-width:92vw !important;
  z-index:2000;
  background:var(--card,#FFFFFF);
  border:1px solid var(--border,#dcdfe6);
  border-radius:12px;
  box-shadow:0 10px 34px rgba(29,33,41,.25);
}

/* ---------- H 终修：非画布页顶部细条公告（不遮操作区） ---------- */
.h-verbar{
  position:fixed;top:10px;right:16px;left:232px;z-index:69;
  display:flex;align-items:center;gap:10px;
  background:var(--card,#FFFFFF);border:1px solid var(--border,#dcdfe6);
  border-radius:12px;padding:8px 12px;font-size:13px;color:var(--text,#303133);
  box-shadow:0 6px 20px rgba(29,33,41,.16);
}
.h-navcollapsed ~ * .h-verbar, body.h-navcollapsed .h-verbar{ left:80px; }
.h-ver-tx{flex:1;min-width:0;}
.h-ver-later{border:1px solid var(--border,#dcdfe6);background:var(--bg-soft,#ffffff);color:var(--text-muted,#606266);border-radius:8px;padding:4px 10px;font-size:12px;cursor:pointer;}
.h-ver-ok{border:0;background:linear-gradient(90deg,#38BDF8,#38BDF8);color:#fff;border-radius:8px;padding:4px 12px;font-size:12px;cursor:pointer;}
@media(max-width:767px){.h-verbar{left:12px;right:12px;top:12px;}}

/* ---------- QA 全站回归：公告条存在时给内容区让位，标题不再被遮 ---------- */
.h-verbar-on .v10-wrap{ padding-top:46px; }
@media(max-width:767px){ .h-verbar-on .v10-wrap{ padding-top:52px; } }