/* Offcanvas 核心样式（基于 Bootstrap 5.3.2） */
:root,[data-bs-theme=light]{
  /* 基础变量（Offcanvas 依赖） */
  --bs-body-color:#343747;
  --bs-body-bg:#f5f6f8;
  --bs-secondary-bg:#fff;
  --bs-border-width:1px;
  --bs-border-color:#f6f6f6;
  --bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Offcanvas 公共变量 */
.offcanvas,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm,
.offcanvas-xl,
.offcanvas-xxl{
  --bs-offcanvas-zindex:1045;
  --bs-offcanvas-width:400px;
  --bs-offcanvas-height:30vh;
  --bs-offcanvas-padding-x:1rem;
  --bs-offcanvas-padding-y:1rem;
  --bs-offcanvas-color:var(--bs-body-color);
  --bs-offcanvas-bg:var(--bs-secondary-bg);
  --bs-offcanvas-border-width:var(--bs-border-width);
  --bs-offcanvas-border-color:var(--bs-border-color);
  --bs-offcanvas-box-shadow:var(--bs-box-shadow-sm);
  --bs-offcanvas-transition:transform 0.3s ease-in-out;
  --bs-offcanvas-title-line-height:1.5;
}

/* ===== 响应式断点样式 ===== */
/* 超小屏幕（<576px） */
@media (max-width:575.98px){
  .offcanvas-sm{
    position:fixed;
    bottom:0;
    z-index:var(--bs-offcanvas-zindex);
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    max-width:100%;
    color:var(--bs-offcanvas-color);
    visibility:hidden;
    background-color:var(--bs-offcanvas-bg);
    background-clip:padding-box;
    outline:0;
    -webkit-transition:var(--bs-offcanvas-transition);
    transition:var(--bs-offcanvas-transition);
  }
  .offcanvas-sm.offcanvas-start{
    top:0;left:0;
    width:var(--bs-offcanvas-width);
    border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    -webkit-transform:translateX(-100%);
    transform:translateX(-100%);
  }
  .offcanvas-sm.offcanvas-end{
    top:0;right:0;
    width:var(--bs-offcanvas-width);
    border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    -webkit-transform:translateX(100%);
    transform:translateX(100%);
  }
  .offcanvas-sm.offcanvas-top{
    top:0;right:0;left:0;
    height:var(--bs-offcanvas-height);
    max-height:100%;
    border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    -webkit-transform:translateY(-100%);
    transform:translateY(-100%);
  }
  .offcanvas-sm.offcanvas-bottom{
    right:0;left:0;
    height:var(--bs-offcanvas-height);
    max-height:100%;
    border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    -webkit-transform:translateY(100%);
    transform:translateY(100%);
  }
  .offcanvas-sm.show:not(.hiding),
  .offcanvas-sm.showing{
    -webkit-transform:none;
    transform:none;
  }
  .offcanvas-sm.hiding,
  .offcanvas-sm.show,
  .offcanvas-sm.showing{
    visibility:visible;
  }
}

/* 小屏幕（≥576px） */
@media (min-width:576px){
  .offcanvas-sm{
    --bs-offcanvas-height:auto;
    --bs-offcanvas-border-width:0;
    background-color:transparent!important;
  }
  .offcanvas-sm .offcanvas-header{display:none;}
  .offcanvas-sm .offcanvas-body{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-flex:0;
    -ms-flex-positive:0;
    flex-grow:0;
    padding:0;
    overflow-y:visible;
    background-color:transparent!important;
  }
}

/* 中等屏幕（<768px） */
@media (max-width:767.98px){
  .offcanvas-md{
    position:fixed;
    bottom:0;
    z-index:var(--bs-offcanvas-zindex);
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    max-width:100%;
    color:var(--bs-offcanvas-color);
    visibility:hidden;
    background-color:var(--bs-offcanvas-bg);
    background-clip:padding-box;
    outline:0;
    -webkit-transition:var(--bs-offcanvas-transition);
    transition:var(--bs-offcanvas-transition);
  }
  .offcanvas-md.offcanvas-start{
    top:0;left:0;
    width:var(--bs-offcanvas-width);
    border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    -webkit-transform:translateX(-100%);
    transform:translateX(-100%);
  }
  .offcanvas-md.offcanvas-end{
    top:0;right:0;
    width:var(--bs-offcanvas-width);
    border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    -webkit-transform:translateX(100%);
    transform:translateX(100%);
  }
  .offcanvas-md.offcanvas-top{
    top:0;right:0;left:0;
    height:var(--bs-offcanvas-height);
    max-height:100%;
    border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    -webkit-transform:translateY(-100%);
    transform:translateY(-100%);
  }
  .offcanvas-md.offcanvas-bottom{
    right:0;left:0;
    height:var(--bs-offcanvas-height);
    max-height:100%;
    border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    -webkit-transform:translateY(100%);
    transform:translateY(100%);
  }
  .offcanvas-md.show:not(.hiding),
  .offcanvas-md.showing{
    -webkit-transform:none;
    transform:none;
  }
  .offcanvas-md.hiding,
  .offcanvas-md.show,
  .offcanvas-md.showing{
    visibility:visible;
  }
}

/* 大屏幕（≥768px） */
@media (min-width:768px){
  .offcanvas-md{
    --bs-offcanvas-height:auto;
    --bs-offcanvas-border-width:0;
    background-color:transparent!important;
  }
  .offcanvas-md .offcanvas-header{display:none;}
  .offcanvas-md .offcanvas-body{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-flex:0;
    -ms-flex-positive:0;
    flex-grow:0;
    padding:0;
    overflow-y:visible;
    background-color:transparent!important;
  }
}

/* 超大屏幕（<992px） */
@media (max-width:991.98px){
  .offcanvas-lg{
    position:fixed;
    bottom:0;
    z-index:var(--bs-offcanvas-zindex);
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    max-width:100%;
    color:var(--bs-offcanvas-color);
    visibility:hidden;
    background-color:var(--bs-offcanvas-bg);
    background-clip:padding-box;
    outline:0;
    -webkit-transition:var(--bs-offcanvas-transition);
    transition:var(--bs-offcanvas-transition);
  }
  .offcanvas-lg.offcanvas-start{
    top:0;left:0;
    width:var(--bs-offcanvas-width);
    border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    -webkit-transform:translateX(-100%);
    transform:translateX(-100%);
  }
  .offcanvas-lg.offcanvas-end{
    top:0;right:0;
    width:var(--bs-offcanvas-width);
    border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    -webkit-transform:translateX(100%);
    transform:translateX(100%);
  }
  .offcanvas-lg.offcanvas-top{
    top:0;right:0;left:0;
    height:var(--bs-offcanvas-height);
    max-height:100%;
    border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    -webkit-transform:translateY(-100%);
    transform:translateY(-100%);
  }
  .offcanvas-lg.offcanvas-bottom{
    right:0;left:0;
    height:var(--bs-offcanvas-height);
    max-height:100%;
    border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    -webkit-transform:translateY(100%);
    transform:translateY(100%);
  }
  .offcanvas-lg.show:not(.hiding),
  .offcanvas-lg.showing{
    -webkit-transform:none;
    transform:none;
  }
  .offcanvas-lg.hiding,
  .offcanvas-lg.show,
  .offcanvas-lg.showing{
    visibility:visible;
  }
}

/* 超大屏幕（≥992px） */
@media (min-width:992px){
  .offcanvas-lg{
    --bs-offcanvas-height:auto;
    --bs-offcanvas-border-width:0;
    background-color:transparent!important;
  }
  .offcanvas-lg .offcanvas-header{display:none;}
  .offcanvas-lg .offcanvas-body{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-flex:0;
    -ms-flex-positive:0;
    flex-grow:0;
    padding:0;
    overflow-y:visible;
    background-color:transparent!important;
  }
}

/* 特大屏幕（<1200px） */
@media (max-width:1199.98px){
  .offcanvas-xl{
    position:fixed;
    bottom:0;
    z-index:var(--bs-offcanvas-zindex);
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    max-width:100%;
    color:var(--bs-offcanvas-color);
    visibility:hidden;
    background-color:var(--bs-offcanvas-bg);
    background-clip:padding-box;
    outline:0;
    -webkit-transition:var(--bs-offcanvas-transition);
    transition:var(--bs-offcanvas-transition);
  }
  .offcanvas-xl.offcanvas-start{
    top:0;left:0;
    width:var(--bs-offcanvas-width);
    border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    -webkit-transform:translateX(-100%);
    transform:translateX(-100%);
  }
  .offcanvas-xl.offcanvas-end{
    top:0;right:0;
    width:var(--bs-offcanvas-width);
    border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    -webkit-transform:translateX(100%);
    transform:translateX(100%);
  }
  .offcanvas-xl.offcanvas-top{
    top:0;right:0;left:0;
    height:var(--bs-offcanvas-height);
    max-height:100%;
    border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    -webkit-transform:translateY(-100%);
    transform:translateY(-100%);
  }
  .offcanvas-xl.offcanvas-bottom{
    right:0;left:0;
    height:var(--bs-offcanvas-height);
    max-height:100%;
    border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    -webkit-transform:translateY(100%);
    transform:translateY(100%);
  }
  .offcanvas-xl.show:not(.hiding),
  .offcanvas-xl.showing{
    -webkit-transform:none;
    transform:none;
  }
  .offcanvas-xl.hiding,
  .offcanvas-xl.show,
  .offcanvas-xl.showing{
    visibility:visible;
  }
}

/* 特大屏幕（≥1200px） */
@media (min-width:1200px){
  .offcanvas-xl{
    --bs-offcanvas-height:auto;
    --bs-offcanvas-border-width:0;
    background-color:transparent!important;
  }
  .offcanvas-xl .offcanvas-header{display:none;}
  .offcanvas-xl .offcanvas-body{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-flex:0;
    -ms-flex-positive:0;
    flex-grow:0;
    padding:0;
    overflow-y:visible;
    background-color:transparent!important;
  }
}

/* 超特大屏幕（<1400px） */
@media (max-width:1399.98px){
  .offcanvas-xxl{
    position:fixed;
    bottom:0;
    z-index:var(--bs-offcanvas-zindex);
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    max-width:100%;
    color:var(--bs-offcanvas-color);
    visibility:hidden;
    background-color:var(--bs-offcanvas-bg);
    background-clip:padding-box;
    outline:0;
    -webkit-transition:var(--bs-offcanvas-transition);
    transition:var(--bs-offcanvas-transition);
  }
  .offcanvas-xxl.offcanvas-start{
    top:0;left:0;
    width:var(--bs-offcanvas-width);
    border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    -webkit-transform:translateX(-100%);
    transform:translateX(-100%);
  }
  .offcanvas-xxl.offcanvas-end{
    top:0;right:0;
    width:var(--bs-offcanvas-width);
    border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    -webkit-transform:translateX(100%);
    transform:translateX(100%);
  }
  .offcanvas-xxl.offcanvas-top{
    top:0;right:0;left:0;
    height:var(--bs-offcanvas-height);
    max-height:100%;
    border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    -webkit-transform:translateY(-100%);
    transform:translateY(-100%);
  }
  .offcanvas-xxl.offcanvas-bottom{
    right:0;left:0;
    height:var(--bs-offcanvas-height);
    max-height:100%;
    border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    -webkit-transform:translateY(100%);
    transform:translateY(100%);
  }
  .offcanvas-xxl.show:not(.hiding),
  .offcanvas-xxl.showing{
    -webkit-transform:none;
    transform:none;
  }
  .offcanvas-xxl.hiding,
  .offcanvas-xxl.show,
  .offcanvas-xxl.showing{
    visibility:visible;
  }
}

/* 超特大屏幕（≥1400px） */
@media (min-width:1400px){
  .offcanvas-xxl{
    --bs-offcanvas-height:auto;
    --bs-offcanvas-border-width:0;
    background-color:transparent!important;
  }
  .offcanvas-xxl .offcanvas-header{display:none;}
  .offcanvas-xxl .offcanvas-body{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-flex:0;
    -ms-flex-positive:0;
    flex-grow:0;
    padding:0;
    overflow-y:visible;
    background-color:transparent!important;
  }
}

/* ===== 通用 Offcanvas 样式 ===== */
.offcanvas{
  position:fixed;
  bottom:0;
  z-index:var(--bs-offcanvas-zindex);
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  max-width:100%;
  color:var(--bs-offcanvas-color);
  visibility:hidden;
  background-color:var(--bs-offcanvas-bg);
  background-clip:padding-box;
  outline:0;
  -webkit-transition:var(--bs-offcanvas-transition);
  transition:var(--bs-offcanvas-transition);
}
@media (prefers-reduced-motion:reduce){
  .offcanvas{-webkit-transition:none;transition:none;}
}

.offcanvas.offcanvas-start{
  top:0;left:0;
  width:var(--bs-offcanvas-width);
  border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  -webkit-transform:translateX(-100%);
  transform:translateX(-100%);
}
.offcanvas.offcanvas-end{
  top:0;right:0;
  width:var(--bs-offcanvas-width);
  border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  -webkit-transform:translateX(100%);
  transform:translateX(100%);
}
.offcanvas.offcanvas-top{
  top:0;right:0;left:0;
  height:var(--bs-offcanvas-height);
  max-height:100%;
  border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  -webkit-transform:translateY(-100%);
  transform:translateY(-100%);
}
.offcanvas.offcanvas-bottom{
  right:0;left:0;
  height:var(--bs-offcanvas-height);
  max-height:100%;
  border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  -webkit-transform:translateY(100%);
  transform:translateY(100%);
}

.offcanvas.show:not(.hiding),
.offcanvas.showing{
  -webkit-transform:none;
  transform:none;
}
.offcanvas.hiding,
.offcanvas.show,
.offcanvas.showing{
  visibility:visible;
}

/* ===== 遮罩层 ===== */
.offcanvas-backdrop{
  position:fixed;
  top:0;left:0;
  z-index:1040;
  width:100vw;
  height:100vh;
  background-color:#000;
}
.offcanvas-backdrop.fade{opacity:0;}
.offcanvas-backdrop.show{opacity:.5;}

/* ===== 内部结构 ===== */
.offcanvas-header{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
  padding:var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
}
.offcanvas-header .btn-close{
  padding:calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * .5);
  margin-top:calc(-.5 * var(--bs-offcanvas-padding-y));
  margin-right:calc(-.5 * var(--bs-offcanvas-padding-x));
  margin-bottom:calc(-.5 * var(--bs-offcanvas-padding-y));
}
.offcanvas-title{
  margin-bottom:0;
  line-height:var(--bs-offcanvas-title-line-height);
}
.offcanvas-body{
  -webkit-box-flex:1;
  -ms-flex-positive:1;
  flex-grow:1;
  padding:var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
  overflow-y:auto;
}