/* ===========================================================================
   全站公告条 / site-wide notice bar
   对外站点（site.css）和商家后台（admin.css）用的是两套设计变量，但这条公告
   两边必须一模一样——同一句话在两个地方长得不一样，人会以为是两回事。
   所以它单独成文件，两边各 link 一次，改一处两边都变。
   =========================================================================== */

.notice-bar {
  background: linear-gradient(135deg, #17a06a, #0e8a5a);
  color: #fff;
  border-bottom: 1px solid rgba(0, 40, 25, .18);
  font-size: 14.5px; line-height: 1.55;
}
.notice-in {
  max-width: var(--maxw, 1120px); margin: 0 auto; padding: 11px 24px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
}
.notice-ico { flex: 0 0 auto; display: inline-flex; }
.notice-ico svg { width: 19px; height: 19px; display: block; }
.notice-tag {
  flex: 0 0 auto; padding: 2px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .22); color: #fff;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
}
.notice-in b { font-weight: 700; }
.notice-d { color: rgba(255, 255, 255, .88); }
.notice-cta {
  /* 后台那份 CSS 给 a 加了下划线，这里必须显式关掉：按钮带下划线像坏掉的链接 */
  text-decoration: none;
  flex: 0 0 auto; margin-left: auto;
  padding: 6px 14px; border-radius: 999px;
  background: #fff; color: #0c6b45 !important;
  font-size: 13.5px; font-weight: 700; white-space: nowrap;
  transition: transform .16s, box-shadow .16s;
}
.notice-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }

/* 深色模式下那块绿会亮得刺眼，压暗底色、把字翻成亮绿 */
@media (prefers-color-scheme: dark) {
  .notice-bar {
    background: linear-gradient(135deg, #0d2e22, #0f3b2b);
    color: #8ef0c0;
    border-bottom-color: rgba(142, 240, 192, .22);
  }
  .notice-tag { background: rgba(142, 240, 192, .16); color: #a8f5d0; }
  .notice-d { color: rgba(142, 240, 192, .82); }
  .notice-cta { background: #8ef0c0; color: #05261a !important; }
}

@media (max-width: 640px) {
  .notice-in { padding: 10px 16px; gap: 6px 8px; font-size: 13.5px; }
  /* 手机上正文和按钮各自独占一行，标题才不会被挤成两个字 */
  .notice-d { flex: 1 0 100%; }
  .notice-cta { margin-left: 0; }
}


/* 顶部挂了公告条时，下面那个 min-height:100vh 的骨架会把页面撑出一条多余的
   滚动。改成 body 撑满、骨架吃掉剩余高度，公告条占多高都不影响。
   .auth-body 是登录/注册页，.has-notice 是商家后台。 */
.auth-body,
.has-notice { display: flex; flex-direction: column; min-height: 100vh; }
.auth-body .auth,
.has-notice .shell { min-height: 0; flex: 1 1 auto; }