@charset "UTF-8";
/* ==========================================================================
 * 前台新组件：全局弹窗通知（nt-*）
 *
 * 设计来源：mockups/notice-design.html（已审核）
 * 三种形态共用一套「贴纸」配方：2px 墨边 + 硬投影 + 大圆角 + 珊瑚主色，
 * 全部复用 front/_tokens.scss 的令牌，明暗两态跟着主题走。
 *
 * 与样张的差别（样张是在「模拟浏览器画布」里看的，这里要落到真实页面）：
 *   1) .nt-scrim 由 position:absolute 改为 fixed（真正铺满视口）
 *   2) 右下角卡片的位置改由外壳 .boxmoe-notice[data-type="corner"] 承担
 *   3) 公告条容器由 JS 提到 <body> 最顶端，随页面滚动、推正文下移，不遮导航
 * ========================================================================== */
/* 局部变量：明暗各一套（放在 :root / html[data-bs-theme] 上，避免切到暗色卡旧色） */
:root {
  --nt-surface:var(--bs-white,#fff);
  --nt-surface-2:var(--paper-2,#fdf6f2);
  --nt-line:var(--ink);
  --nt-shadow:var(--ink);
  --nt-bar-bg:#272727;
  --nt-bar-fg:var(--card);
  --nt-scrim:rgba(20,18,22,.52);
}

html[data-bs-theme=dark] {
  --nt-surface:#25232b; /* 卡片底比页面底亮一档（2026-10-15 二轮与全局令牌同步提亮） */
  --nt-surface-2:#1e1c23;
  --nt-line:#f4f1ea;
  --nt-shadow:#000;
  --nt-bar-bg:#f2f2f2;
  --nt-bar-fg:#161519;
  --nt-scrim:rgba(0,0,0,.62);
}

/* 通用：关闭钮 / 胶囊按钮 / 角标 */
.nt-close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 2px solid var(--nt-line);
  border-radius: var(--radius-sm);
  background: var(--nt-surface);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 2px 2px 0 0 var(--nt-shadow);
  transition: all 0.25s var(--spring);
}

.nt-close:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 0 var(--nt-shadow);
  color: var(--coral);
}

.nt-close svg {
  width: 14px;
  height: 14px;
}

.nt-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  padding: 9px 15px;
  border: 2px solid var(--nt-line);
  border-radius: var(--radius-pill);
  background: var(--nt-surface);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 2px 2px 0 0 var(--nt-shadow);
  transition: all 0.22s var(--spring);
}

.nt-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 0 var(--nt-shadow);
  color: var(--ink);
}

.nt-btn.is-primary {
  background: var(--coral);
  color: var(--bs-white);
}

.nt-btn.is-primary:hover {
  color: var(--bs-white);
}

html[data-bs-theme=dark] .nt-btn.is-primary {
  color: #141414;
}

html[data-bs-theme=dark] .nt-btn.is-primary:hover {
  color: #141414;
}

.nt-btn.is-ghost {
  box-shadow: none;
  border-color: var(--line-3);
  color: var(--ink-2);
}

.nt-btn.is-ghost:hover {
  border-color: var(--nt-line);
  color: var(--ink);
  box-shadow: 2px 2px 0 0 var(--nt-shadow);
}

.nt-btn svg {
  width: 14px;
  height: 14px;
}

.nt-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--coral);
  background: var(--coral-soft);
  border: 1.5px solid currentColor;
  border-radius: var(--radius-pill);
  padding: 2px 9px;
}

/* 「不再提示」勾选框：裸复选框默认是系统蓝，用 accent-color 拉回主题色 */
.nt-dont {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  cursor: pointer;
  line-height: 1.4;
}

.nt-dont input {
  width: 15px;
  height: 15px;
  accent-color: var(--coral);
  flex: none;
}

/* ---- 形态①：居中模态弹窗 ---- */
.nt-scrim {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: var(--nt-scrim);
  display: grid;
  place-items: center;
  padding: 20px;
}

.nt-modal {
  width: min(520px, 100%);
  max-height: 92vh;
  overflow: auto;
  border: 2px solid var(--nt-line);
  border-radius: var(--radius-lg);
  background: var(--nt-surface);
  box-shadow: 6px 6px 0 0 var(--nt-shadow);
}

.nt-modal-cover {
  height: 132px;
  position: relative;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0 12px, transparent 12px 24px), linear-gradient(120deg, var(--coral), var(--violet));
  border-bottom: 2px solid var(--nt-line);
}

.nt-modal-cover .nt-badge {
  position: absolute;
  left: 16px;
  top: 14px;
  background: var(--nt-surface);
}

.nt-modal-cover .boxmoe-notice-close {
  position: absolute;
  right: 12px;
  top: 12px;
}

.nt-modal-body {
  padding: 18px 20px 20px;
}

.nt-modal-title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
}

.nt-modal-text {
  margin-top: 9px;
  font-size: var(--fs-base);
  color: var(--ink-2);
  line-height: 1.8;
}

.nt-modal-text b, .nt-modal-text strong {
  color: var(--ink);
}

.nt-modal-text a {
  color: var(--coral);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nt-modal-actions {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1.5px dashed var(--line-2);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 无封面时，顶部一行的角标 + 关闭钮 */
.boxmoe-notice-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.boxmoe-notice-head-close {
  margin-left: auto;
  display: inline-flex;
}

/* ---- 形态②：顶部公告条 ---- */
.boxmoe-notice[data-type=bar] {
  position: relative;
  z-index: 1080;
}

.nt-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 2px solid var(--nt-line);
  background: var(--nt-bar-bg);
  color: var(--nt-bar-fg);
}

.nt-bar-tag {
  flex: none;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--coral);
  color: var(--bs-white);
}

html[data-bs-theme=dark] .nt-bar-tag {
  color: #141414;
}

.nt-bar-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
}

html[data-bs-theme=dark] .nt-bar-icon {
  background: rgba(0, 0, 0, 0.12);
}

.nt-bar-icon svg {
  width: 15px;
  height: 15px;
}

.nt-bar-text {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.nt-bar-text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nt-bar-text b, .nt-bar-text strong {
  font-weight: 800;
}

.nt-bar-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nt-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  border: 2px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s var(--ease);
}

.nt-bar-btn:hover {
  background: currentColor;
  color: var(--nt-bar-bg);
}

/* 次按钮：去掉描边，做成纯文字样式 */
.nt-bar-btn.is-quiet {
  border-color: transparent;
  opacity: 0.85;
}

.nt-bar-btn.is-quiet:hover {
  opacity: 1;
  background: currentColor;
  color: var(--nt-bar-bg);
}

.nt-bar .nt-close {
  border-width: 0;
  background: transparent;
  color: var(--nt-bar-fg);
  box-shadow: none;
  width: 28px;
  height: 28px;
}

.nt-bar .nt-close:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: none;
  box-shadow: none;
  color: var(--nt-bar-fg);
}

html[data-bs-theme=dark] .nt-bar .nt-close:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* 浅色版公告条 */
.nt-bar.is-light {
  background: var(--nt-surface);
  color: var(--ink);
  border-bottom: 2px solid var(--nt-line);
}

.nt-bar.is-light .nt-bar-icon {
  background: var(--coral-soft);
  color: var(--coral);
}

.nt-bar.is-light .nt-close {
  color: var(--ink);
}

.nt-bar.is-light .nt-close:hover,
html[data-bs-theme=dark] .nt-bar.is-light .nt-close:hover {
  background: var(--coral-soft);
  transform: none;
  box-shadow: none;
  color: var(--coral);
}

.nt-bar.is-light .nt-bar-btn:hover {
  background: var(--coral);
  color: var(--bs-white);
  border-color: var(--coral);
}

html[data-bs-theme=dark] .nt-bar.is-light .nt-bar-btn:hover {
  color: #141414;
}

/* ---- 形态③：右下角卡片 ---- */
.boxmoe-notice[data-type=corner] {
  position: fixed;
  right: 18px;
  bottom: 110px;
  z-index: 1060;
  width: 330px;
  max-width: calc(100vw - 32px);
}

.nt-corner {
  border: 2px solid var(--nt-line);
  border-radius: var(--radius);
  background: var(--nt-surface);
  box-shadow: 5px 5px 0 0 var(--nt-shadow);
  overflow: hidden;
}

.nt-corner-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 14px 0;
}

.nt-corner-thumb {
  flex: none;
  width: 48px;
  height: 48px;
  border: 2px solid var(--nt-line);
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0 10px, transparent 10px 20px), linear-gradient(120deg, var(--coral), var(--violet));
  box-shadow: 2px 2px 0 0 var(--nt-shadow);
}

.nt-corner-titles {
  min-width: 0;
  flex: 1;
}

.nt-corner-title {
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.4;
}

.nt-corner-text {
  margin-top: 5px;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  line-height: 1.65;
}

.nt-corner-text a {
  color: var(--coral);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nt-corner-foot {
  padding: 12px 14px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.nt-corner-foot .nt-dont {
  margin-left: auto;
  font-size: 10.5px;
}

/* 短代码 / data-notice 的手动触发按钮：沿用 nt-btn，占位时给点间距 */
.boxmoe-notice-trigger + .boxmoe-notice-trigger {
  margin-left: 8px;
}

/* 窄屏收边 */
@media (max-width: 560px) {
  .nt-scrim {
    align-items: flex-end;
    padding: 0;
  }
  .nt-modal {
    width: 100%;
    max-height: 88vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
    box-shadow: 0 -6px 0 0 var(--nt-shadow);
  }
  .boxmoe-notice[data-type=corner] {
    right: 12px;
    bottom: 96px;
    width: calc(100vw - 24px);
  }
  .nt-bar {
    flex-wrap: wrap;
    gap: 9px;
    padding: 10px 12px;
  }
  .nt-bar-text {
    font-size: var(--fs-xs);
  }
  .nt-bar-actions {
    margin-left: auto;
  }
}