/* 通用弹层 / 图片选择器 / 添加面板
   —— 由 styles.css 第 606–735 行原样切分，规则与顺序未改动。 */
/* Modal */
.modal-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(10px);
  z-index:10002;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;transition:opacity 0.3s ease;
  overflow:hidden;
}
.modal-overlay.show{opacity:1;}
.modal-box{
  background:linear-gradient(160deg,var(--color-primary) 0%,var(--color-secondary) 100%);
  border-radius:32px;
  box-shadow:0 24px 64px rgba(0,0,0,0.3);
  max-width:400px;width:100%;
  padding:24px;
  transform:scale(0.9);
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
  max-height:80vh;
  overflow-y:auto;
}
.modal-overlay.show .modal-box{transform:scale(1);}
.modal-header{
  font-size:20px;font-weight:600;color:#fff;
  margin-bottom:24px;text-align:center;
}
.modal-body{display:flex;flex-direction:column;gap:16px;}
.modal-input{
  width:100%;padding:16px;border:none;border-radius:16px;
  background:rgba(255,255,255,0.9);color:#333;
  font-size:16px;font-family:inherit;outline:none;
}
.modal-textarea{min-height:96px;resize:vertical;}
.modal-button{
  padding:16px 24px;border:none;border-radius:16px;
  font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;
}
.modal-button-primary{background:rgba(255,255,255,0.95);color:#333;}
.modal-button-secondary{background:rgba(255,255,255,0.2);color:#fff;border:1px solid rgba(255,255,255,0.3);}
.modal-buttons{display:flex;gap:16px;margin-top:16px;}
.modal-label{font-size:14px;color:#fff;margin-bottom:8px;font-weight:500;}

/* 图片选择器 */
.img-picker-sheet{
  position:absolute;inset:0;
  background:rgba(0,0,0,0.5);
  z-index:10010;
  display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;
}
.img-picker-box{
  width:100%;max-width:430px;
  background:#fff;
  border-radius:24px 24px 0 0;
  padding:24px;
  animation:slideUp 0.3s ease;
}
@keyframes slideUp{
  from{transform:translateY(100%);}
  to{transform:translateY(0);}
}
.img-picker-title{
  font-size:18px;font-weight:600;margin-bottom:16px;text-align:center;color:#333;
}
.img-picker-btn{
  width:100%;padding:16px;border:none;border-radius:16px;
  background:#f0f0f0;font-size:16px;
  margin-bottom:12px;cursor:pointer;font-family:inherit;color:#333;
}
.img-picker-url{
  width:100%;padding:16px;
  border:1px solid #ddd;border-radius:16px;
  font-size:16px;margin-bottom:12px;outline:none;font-family:inherit;
}
.img-picker-actions{display:flex;gap:12px;}

/* 添加面板 */
.add-panel{
  position:absolute;inset:0;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(10px);
  z-index:10008;
  display:flex;align-items:flex-end;justify-content:center;
  /* 关键：遮罩本身不滚动，防止滚动穿透 */
  overflow:hidden;
  overscroll-behavior:contain;
}
.add-panel-box{
  width:100%;max-width:430px;
  background:#fff;
  border-radius:24px 24px 0 0;
  padding:0;                 /* 内边距交给内部滚动区 */
  max-height:80vh;           /* 给足高度，内容多时有空间滚 */
  display:flex;              /* 头部固定 + 内容滚动 */
  flex-direction:column;
  overflow:hidden;           /* 外层裁切，滚动交给 .add-panel-scroll */
  animation:slideUp 0.3s ease;
  /* 底部留出安全区，避免手势条遮挡 */
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
/* 新增：固定头部 */
.add-panel-head{
  flex-shrink:0;
  padding:20px 24px 12px;
  position:relative;
}
.add-panel-title{
  font-size:18px;font-weight:600;margin-bottom:0;text-align:center;color:#333;
}
.add-panel-close{
  position:absolute;right:16px;top:16px;
  width:28px;height:28px;border-radius:50%;
  background:rgba(0,0,0,0.06);border:none;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:#888;cursor:pointer;line-height:1;
}
/* 新增：可滚动内容区 */
.add-panel-scroll{
  flex:1 1 auto;
  min-height:0;              /* flex 子项能滚的关键 */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;  /* 滚到底不带动外层 */
  touch-action:pan-y;
  padding:4px 24px 24px;
}
.add-panel-scroll::-webkit-scrollbar{display:none;}