/**
 * ================================================
 * 法律提示：本程序/代码仅限合法用途使用，您可以修改自用，请保留版权
 * ================================================
 * 使用限制：禁止用于非法用途，作者不承担任何使用责任
 * ================================================
 * Copy right 2026 网博士网络工作室， 保留所有权利。
 * ================================================
 * 官方网址: www.网博士.com   联系：QQ: 570830288
 * ================================================
 */
/*
 * z-index 10000：必须高过右侧悬浮栏 .float-rail（assets/red/css/float-rail.css，z-index:9999）。
 * 那个条全站都有（header.php / user_header.php 都引），比遮罩高就会浮在遮罩上面：
 * 看起来像弹窗没盖住它，而且还能被点到。
 * 仍低于轻提示 .toast（99999），toast 是 pointer-events:none，压在上面无妨。
 */
.notice-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;}
.notice-modal .nm-mask{position:absolute;inset:0;background:rgba(12,26,38,.45);}
.notice-modal .nm-box{
  position:relative;width:calc(100% - 40px);max-width:440px;background:#fff;border-radius:12px;
  box-shadow:0 18px 60px rgba(12,26,38,.28);overflow:hidden;
  animation:nmIn .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes nmIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.notice-modal .nm-hd{
  padding:15px 18px;border-bottom:1px solid var(--line,#E7ECF0);
  display:flex;align-items:center;font-size:15.5px;
}
.notice-modal .nm-hd b{flex:1;}
.notice-modal .nm-close{
  font-size:24px;line-height:1;color:#9AA8B4;cursor:pointer;padding:0 4px;
  /* 悬停转 90°：transform 会开 GPU 合成层，before/after 不用，直接写在元素上就行 */
  transition:color .16s,transform .28s cubic-bezier(.2,.9,.3,1);
}
.notice-modal .nm-close:hover{color:#41525F;transform:rotate(90deg);}
/* 系统开了「减少动态效果」就别转了（首页 home-refresh.css 也是这么处理的） */
@media (prefers-reduced-motion:reduce){
  .notice-modal .nm-close{transition:color .16s;}
  .notice-modal .nm-close:hover{transform:none;}
}
/* 内容超长时内部滚动，别把按钮顶出屏幕 */
.notice-modal .nm-bd{
  padding:16px 18px;max-height:56vh;overflow-y:auto;
  font-size:14px;line-height:1.85;color:#41525F;word-break:break-word;
}
.notice-modal .nm-bd img{max-width:100%;height:auto;}
.notice-modal .nm-ft{padding:0 18px 18px;}
/*
 * 「我知道了」按钮的样式写在这里，不靠 style.css 的 .btn / .btn.block。
 * 首页（index.php）的 $pageCss 只有 home-refresh.css，压根不加载 style.css，
 * 之前就靠那边的 .btn，结果按钮掉回浏览器原生样式（灰底、小字、没圆角）。
 * 这里按 .btn 的样子自备一份，主题色仍走后台配的 --c1/--c2，跟着全站变。
 */
.notice-modal .nm-ft .btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;height:40px;padding:0 22px;
  border:1px solid transparent;border-radius:var(--radius-s,8px);
  background:var(--c1,#EF3358);color:#fff;font-size:15px;
  /* font-family:inherit：button 默认不吃页面字体，只有加载了 style.css / user.css
     的页面才有 button{font-family:inherit} 兜着，query / page / complain / cash
     这几个页面不加载，不写这句按钮字体就跟正文不一致 */
  font-family:inherit;line-height:1;
  transition:background .16s,transform .16s;white-space:nowrap;cursor:pointer;
}
.notice-modal .nm-ft .btn:hover{background:var(--c2,#C42A47);}
.notice-modal .nm-ft .btn:active{transform:translateY(1px);}