/* ============================================================
   国庆限定主题 · 红金华诞  [data-theme="national"]
   场景：2026-10-01 国庆 × a站（all2well.me）建站四月纪念
   主视觉：中国红 × 鎏金 —— 红绸幕布 / 灯笼 / 烟花 / 宣纸卡片
   说明：全量覆盖全局变量与主要组件（结构照 theme-naruto.css），
        装饰层 #nationalDeco（灯笼+烟花）由 main.js
        applyNationalThemeDom() 注入，切走主题自动拆除。
   回滚：后台「国庆活动主题控制」一键关闭 = 全员回日常主题。
   ============================================================ */

/* ---------- 主题变量 ---------- */
[data-theme="national"] {
  --nat-red: #C0121C;         /* 中国红 */
  --nat-red-bright: #E4333B;  /* 灯笼红 */
  --nat-red-deep: #8E0D14;    /* 幕布红 */
  --nat-red-dark: #5C090E;    /* 深幕 */
  --nat-gold: #E9B94E;        /* 鎏金 */
  --nat-gold-soft: #F6DC96;   /* 淡金 */
  --nat-cream: #FBF3E4;       /* 宣纸 */
  --nat-ink: #33181A;         /* 墨色 */

  /* 覆盖全站变量：链接/主按钮变中国红，导航变幕布红 */
  --bg: var(--nat-cream);
  --blue: var(--nat-red);
  --nav-bg: var(--nat-red-deep);

  /* 全站有 355 处写成 var(--card-bg, #1a1a2e) 这种带兜底值的引用，而这几个变量
     在 :root 和任何主题里都没定义过 —— 它们永远掉进深色兜底，与换不换主题无关
     （问询页整片黑底紫按钮就是这么来的）。这里补上，一次性接进主题。 */
  --card-bg: #FFFCF5;                       /* 宣纸白：输入框 / 面板底 */
  --primary: var(--nat-red);                /* 主强调：中国红 */
  --border-color: rgba(192, 18, 28, 0.30);  /* 细边：淡红，压得住金边卡片 */
  --text: var(--nat-ink);                   /* 正文：墨色 */
  --muted-foreground: #6B4F3A;              /* 次要文字：浅褐墨 */
  --accent: rgba(233, 185, 78, 0.16);       /* 弱底：淡金 */
}

/* ---------- 页面背景：宣纸 + 红绸暗纹 + 金光 ---------- */
[data-theme="national"] body {
  background-color: var(--nat-cream);
  background-image:
    radial-gradient(ellipse at 15% -5%, rgba(192, 18, 28, 0.12), transparent 45%),
    radial-gradient(ellipse at 85% -5%, rgba(233, 185, 78, 0.16), transparent 42%),
    repeating-linear-gradient(45deg, rgba(192, 18, 28, 0.035) 0 2px, transparent 2px 16px);
  background-attachment: fixed;
  color: var(--nat-ink);
}

[data-theme="national"] ::selection {
  background: var(--nat-red);
  color: var(--nat-gold-soft);
}

/* ---------- 导航栏：幕布红 + 金线 + 金旗边 ---------- */
[data-theme="national"] .navbar {
  background: linear-gradient(180deg, var(--nat-red-dark), var(--nat-red-deep));
  border-bottom: 2px solid var(--nat-gold);
  box-shadow: 0 2px 12px rgba(92, 9, 14, 0.35);
  position: relative;
}

/* 底边金色三角旗（小彩旗边） */
[data-theme="national"] .navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: var(--nat-gold);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100% repeat-x;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100% repeat-x;
  pointer-events: none;
}

[data-theme="national"] .navbar-logo,
html[data-theme="national"] .navbar-logo {
  color: var(--nat-gold-soft);
  text-shadow: 0 1px 0 rgba(92, 9, 14, 0.6);
}

[data-theme="national"] .navbar-links a {
  color: var(--nat-gold-soft);
}

[data-theme="national"] .navbar-links a:hover {
  color: #FFFFFF;
  background: rgba(233, 185, 78, 0.18);
}

/* 选中项：原来半透明金压在幕布红上会糊成一块暗斑，读不出"当前在哪"。
   改成淡金底 + 深红字，与 Hero 的金按钮同一套语言，对比也够。 */
[data-theme="national"] .navbar-links a.active {
  color: var(--nat-red-dark);
  background: var(--nat-gold);
}

/* 问询页：气泡底色与聊天区同为宣纸白会分不开，给聊天滚动区一层极淡的金底 */
[data-theme="national"] #chatContainer {
  background: rgba(233, 185, 78, 0.07);
}

/* ---------- Hero：红绸幕布 + 金字标题 ---------- */
[data-theme="national"] .hero {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(233, 185, 78, 0.25), transparent 55%),
    linear-gradient(180deg, var(--nat-red-dark) 0%, var(--nat-red-deep) 55%, var(--nat-red) 100%);
  border-bottom: 3px solid var(--nat-gold);
}

/* 红绸竖纹 */
[data-theme="national"] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 26px);
  pointer-events: none;
}

[data-theme="national"] .hero::after {
  content: none;
}

[data-theme="national"] .hero > * {
  position: relative;
  z-index: 1;
}

[data-theme="national"] .hero.hero-clicked {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(233, 185, 78, 0.32), transparent 60%),
    linear-gradient(180deg, var(--nat-red-deep) 0%, var(--nat-red) 60%, var(--nat-red-bright) 100%);
}

[data-theme="national"] .hero-title .line1,
[data-theme="national"] .hero-title .line3 {
  color: var(--nat-gold);
  text-shadow: 0 2px 0 rgba(92, 9, 14, 0.55);
}

[data-theme="national"] .hero-title .line2 {
  color: #FFF6E0;
  text-shadow: 0 2px 0 rgba(92, 9, 14, 0.55);
}

[data-theme="national"] .hero p {
  color: var(--nat-gold-soft);
}

/* Hero 按钮：金底红字 */
[data-theme="national"] .hero .btn-pixel,
[data-theme="national"] .hero-buttons .btn-pixel {
  background: var(--nat-gold);
  color: var(--nat-red-dark);
  border: 2px solid var(--nat-red-dark);
  box-shadow: 3px 3px 0 rgba(92, 9, 14, 0.55);
  font-weight: bold;
}

[data-theme="national"] .hero .btn-pixel:hover,
[data-theme="national"] .hero-buttons .btn-pixel:hover {
  background: var(--nat-gold-soft);
  color: var(--nat-red);
  transform: translateY(-1px);
}

/* ---------- 章节标题：红字 + 金菱形 ---------- */
[data-theme="national"] .section-title {
  color: var(--nat-red);
  text-shadow: 0 1px 0 rgba(233, 185, 78, 0.35);
}

/* 标题自带的装饰已经够了（首页是「✦ 留言墙 ✦」、发布页是「✎ NEW POST」），
   主题再加一枚菱形就成了三个符号叠在一起。这里只把下划线换成鎏金，不加前置图形。
   ::after 必须仍然是 style.css 那条下划线，否则标题掉行、金线消失。 */
[data-theme="national"] .section-title::after {
  background: var(--nat-gold);
  width: 72px;
}

/* ---------- 卡片：宣纸 + 金边 + 纸影 ---------- */
[data-theme="national"] .post-card,
[data-theme="national"] .content-card,
[data-theme="national"] .gallery-card,
[data-theme="national"] .file-card,
[data-theme="national"] .timeline-card,
[data-theme="national"] .stat-card,
[data-theme="national"] .music-player,
[data-theme="national"] .post-form {
  background: rgba(251, 243, 228, 0.94);
  border: 2px solid rgba(233, 185, 78, 0.75);
  box-shadow: 3px 3px 0 rgba(92, 9, 14, 0.16);
  color: var(--nat-ink);
}

[data-theme="national"] .post-card:hover,
[data-theme="national"] .content-card:hover,
[data-theme="national"] .gallery-card:hover,
[data-theme="national"] .file-card:hover {
  border-color: var(--nat-gold);
  box-shadow: 5px 5px 0 rgba(92, 9, 14, 0.22);
  transform: translateY(-2px);
}

[data-theme="national"] .post-time {
  color: rgba(51, 24, 26, 0.55);
}

/* ---------- 磨砂玻璃卡片（半透明宣纸，保留 blur 视觉） ---------- */
[data-theme="national"] .glass-card {
  background: rgba(251, 243, 228, 0.55);
  border: 2px solid rgba(233, 185, 78, 0.5);
  border-radius: 14px;
}

[data-theme="national"] .glass-card.blur-low {
  background: rgba(251, 243, 228, 0.65);
}

[data-theme="national"] .glass-card.blur-medium {
  background: rgba(251, 243, 228, 0.55);
}

[data-theme="national"] .glass-card.blur-high {
  background: rgba(251, 243, 228, 0.45);
}

[data-theme="national"] #posts .glass-card {
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
}

/* ---------- 按钮 ---------- */
[data-theme="national"] .btn-pixel {
  background: var(--nat-gold);
  color: var(--nat-red-dark);
  border: 2px solid var(--nat-red-dark);
  box-shadow: 3px 3px 0 rgba(92, 9, 14, 0.4);
}

[data-theme="national"] .btn-pixel:hover {
  background: var(--nat-gold-soft);
  color: var(--nat-red);
}

[data-theme="national"] .btn-pixel:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(92, 9, 14, 0.4);
}

[data-theme="national"] .btn-primary {
  background: var(--nat-red);
  color: var(--nat-gold-soft);
  border: 2px solid var(--nat-gold);
}

[data-theme="national"] .btn-primary:hover {
  background: var(--nat-red-bright);
  color: #FFFFFF;
}

[data-theme="national"] .btn-danger {
  background: var(--nat-red-dark);
  color: var(--nat-gold-soft);
  border: 2px solid var(--nat-red-dark);
}

[data-theme="national"] .btn:hover,
[data-theme="national"] .post-action-btn:hover {
  border-color: var(--nat-gold);
}

[data-theme="national"] a:hover {
  color: var(--nat-red);
}

/* ---------- 表单 ---------- */
[data-theme="national"] .form-control,
[data-theme="national"] input,
[data-theme="national"] textarea,
[data-theme="national"] select {
  background: rgba(255, 252, 245, 0.9);
  border: 2px solid rgba(233, 185, 78, 0.6);
  color: var(--nat-ink);
}

[data-theme="national"] .form-control:focus,
[data-theme="national"] input:focus,
[data-theme="national"] textarea:focus {
  border-color: var(--nat-red);
  box-shadow: 0 0 0 3px rgba(233, 185, 78, 0.3);
  outline: none;
}

/* ---------- 动态操作按钮 ---------- */
[data-theme="national"] .post-action-btn {
  background: rgba(251, 243, 228, 0.7);
  border: 2px solid rgba(233, 185, 78, 0.55);
  color: var(--nat-ink);
  -webkit-backdrop-filter: blur(2px) saturate(1.05);
  backdrop-filter: blur(2px) saturate(1.05);
}

[data-theme="national"] .post-action-btn:hover {
  background: rgba(233, 185, 78, 0.25);
  color: var(--nat-red);
}

/* ---------- 杂项：表格 / 登录 / 提示 / 弹窗 / 时间线 / 歌单 ---------- */
[data-theme="national"] .data-table th {
  background: var(--nat-red-deep);
  color: var(--nat-gold-soft);
}

[data-theme="national"] .auth-header {
  background: linear-gradient(180deg, var(--nat-red-dark), var(--nat-red-deep));
  color: var(--nat-gold-soft);
}

[data-theme="national"] .toast {
  background: var(--nat-red-deep);
  color: var(--nat-gold-soft);
  border: 2px solid var(--nat-gold);
}

[data-theme="national"] .confirm-dialog {
  background: var(--nat-cream);
  border: 2px solid var(--nat-gold);
}

[data-theme="national"] .confirm-header {
  background: var(--nat-red-deep);
  color: var(--nat-gold-soft);
}

[data-theme="national"] .timeline-dot {
  background: var(--nat-red);
  border-color: var(--nat-gold);
}

[data-theme="national"] .song-item.active {
  background: rgba(233, 185, 78, 0.25);
  color: var(--nat-red);
}

[data-theme="national"] .song-item:hover {
  background: rgba(233, 185, 78, 0.15);
}

[data-theme="national"] .tag {
  background: rgba(192, 18, 28, 0.1);
  color: var(--nat-red);
  border: 1px solid rgba(233, 185, 78, 0.6);
}

[data-theme="national"] .footer {
  background: linear-gradient(180deg, var(--nat-red-deep), var(--nat-red-dark));
  color: var(--nat-gold-soft);
  border-top: 2px solid var(--nat-gold);
}

/* ============================================================
   装饰层 #nationalDeco（main.js 注入）：红灯笼 × 2 + 烟花 × 3
   ============================================================ */
#nationalDeco {
  position: fixed;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

/* --- 灯笼：挂在导航栏下沿那条金色彩旗边上 ---
   有支撑、跟着 960 内容列走、滚动时跟着吸顶的导航栏，不再钉在视口角上悬空。 */
.navbar-inner { position: relative; }

.navbar .ndl {
  position: absolute;
  top: 100%;
  width: 34px;
  height: 68px;
  transform-origin: 50% 0;
  animation: ndlSwing 5.4s ease-in-out infinite;
  pointer-events: none;
}

/* 左右不等高、不同相位不同周期，避开"对称贴纸"感 */
.navbar .ndl-l { left: 10px; }
.navbar .ndl-r { right: 10px; height: 58px; animation-duration: 6.3s; animation-delay: -2.7s; }

/* 灯绳：起点压在导航栏下沿的金线上，看不出悬空 */
.navbar .ndl i {
  display: block;
  width: 1.5px;
  height: 13px;
  margin: 0 auto;
  background: var(--nat-gold, #E9B94E);
}

/* 灯身：只留内部明暗，去掉原来那圈 22px 金色光晕 ——
   小物件带光晕落在米色底上就成了贴纸，而不是挂着的灯 */
.navbar .ndl b {
  display: block;
  position: relative;
  width: 30px;
  height: 38px;
  margin: 0 auto;
  border-radius: 50% 50% 46% 46%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 36% 30%, var(--nat-red-bright, #E4333B),
      var(--nat-red, #C0121C) 56%, var(--nat-red-deep, #8E0D14));
  box-shadow: inset 0 -6px 10px rgba(92, 9, 14, .32),
              inset 0 3px 6px rgba(255, 226, 196, .18);
}

/* 金帽 + 穗子 */
.navbar .ndl b::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  transform: translateX(-50%);
  width: 16px;
  height: 5px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--nat-gold-soft, #F6DC96), var(--nat-gold, #E9B94E));
}

.navbar .ndl b::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  transform: translateX(-50%);
  width: 3px;
  height: 11px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(180deg, var(--nat-gold, #E9B94E), var(--nat-red-bright, #E4333B));
}

/* --- 烟花：金红圆环绽放 --- */
#nationalDeco .nfw {
  position: absolute;
  width: 4px;
  height: 4px;
}

#nationalDeco .nfw-1 { top: 15%; left: 16%; }
#nationalDeco .nfw-2 { top: 24%; right: 14%; }
#nationalDeco .nfw-3 { top: 9%;  left: 57%; }

/* 第一层：放射火花 —— 锥形细条经径向遮罩收成环带，随 scale 向外炸开 */
#nationalDeco .nfw::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%) scale(0);
  background: repeating-conic-gradient(from 0deg,
    var(--nat-gold) 0 1.6deg, transparent 1.6deg 22.5deg);
  -webkit-mask: radial-gradient(circle, transparent 0 26%, #000 34%, transparent 82%);
  mask: radial-gradient(circle, transparent 0 26%, #000 34%, transparent 82%);
  animation: nfwBurst 3.8s ease-out infinite;
}

/* 第二层：细金环 + 中心余辉，错开 1.9s 与火花交替 */
#nationalDeco .nfw::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid rgba(255, 205, 130, 0.55);
  box-shadow: 0 0 14px rgba(233, 185, 78, 0.28);
  transform: translate(-50%, -50%) scale(0);
  animation: nfwBurst 3.8s ease-out infinite;
  animation-delay: 1.9s;
}

#nationalDeco .nfw-2::before { animation-delay: -1.2s; }
#nationalDeco .nfw-2::after  { animation-delay: 0.7s; }
#nationalDeco .nfw-3::before { animation-delay: -2.4s; }
#nationalDeco .nfw-3::after  { animation-delay: -0.5s; }

@keyframes ndlSwing {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

@keyframes nfwBurst {
  0%       { transform: translate(-50%, -50%) scale(0);    opacity: 0; }
  15%      { opacity: 0.95; }
  60%      { transform: translate(-50%, -50%) scale(1);    opacity: 0.3; }
  75%,100% { transform: translate(-50%, -50%) scale(1.06); opacity: 0; }
}

/* 动效门控：系统要求减少动效时灯笼静止、烟花收成静态、卡片不位移 */
@media (prefers-reduced-motion: reduce) {
  .navbar .ndl { animation: none; }
  #nationalDeco .nfw::before,
  #nationalDeco .nfw::after { animation: none; opacity: 0; }
  [data-theme="national"] .post-card:hover,
  [data-theme="national"] .content-card:hover,
  [data-theme="national"] .gallery-card:hover,
  [data-theme="national"] .file-card:hover { transform: none; }
}

/* 窄屏：灯笼缩小，烟花让位给内容 */
@media (max-width: 720px) {
  #nationalDeco .nfw::before,
  #nationalDeco .nfw::after { width: 96px; height: 96px; }
}


/* ============================================================
   第二批补漏：发布页 / 上传区 / 评论区 / 点赞粒子
   （火影主题已覆盖、本文件此前整组缺失，2026-09-27）
   ============================================================ */

/* ---------- 发布页顶部横幅：红绸幕布 + 两团金光，纯 CSS 不引外部图 ---------- */
[data-theme="national"] [class*="publish-pstyle-"]::before {
  content: "";
  display: block;
  height: 150px;
  margin: -24px -24px 18px;
  border-bottom: 4px solid var(--nat-gold);
  background:
    radial-gradient(circle at 13% 20%, rgba(233, 185, 78, 0.30), transparent 24%),
    radial-gradient(circle at 87% 20%, rgba(233, 185, 78, 0.30), transparent 24%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, var(--nat-red-dark) 0%, var(--nat-red-deep) 58%, var(--nat-red) 100%);
}

@media (max-width: 768px) {
  [data-theme="national"] [class*="publish-pstyle-"]::before {
    height: 104px;
    margin: -24px -24px 14px;
  }
}

/* ---------- 发布按钮：金边 + 深红投影，hover 泛淡金光（按"做轻"口径） ---------- */
[data-theme="national"] .publish-btn,
[data-theme="national"] .test-old-btn {
  border: 2px solid var(--nat-red-dark) !important;
  box-shadow: 3px 3px 0 var(--nat-red-dark) !important;
  transition: box-shadow 0.18s ease, transform 0.18s ease !important;
}

[data-theme="national"] .publish-btn:hover,
[data-theme="national"] .test-old-btn:hover {
  box-shadow:
    0 0 0 3px rgba(233, 185, 78, 0.30),
    0 0 18px 3px rgba(233, 185, 78, 0.32),
    3px 3px 0 var(--nat-red-dark) !important;
  transform: translate(-1px, -1px);
}

/* ---------- 发布页样式2 控件：黑白纸片 -> 宣纸金边、开启态转中国红 ---------- */
[data-theme="national"] .publish-pstyle-2 #postContent {
  background: rgba(255, 252, 245, 0.94) !important;
  border-color: rgba(233, 185, 78, 0.75) !important;
  color: var(--nat-ink) !important;
}

[data-theme="national"] .publish-pstyle-2 #postContent:focus {
  outline-color: var(--nat-red);
}

[data-theme="national"] .publish-pstyle-2 .pub-media-dash,
[data-theme="national"] .publish-pstyle-2 .pub-dash {
  border-color: rgba(192, 18, 28, 0.45);
}

[data-theme="national"] .publish-pstyle-2 .pub-emoji-row button,
[data-theme="national"] .publish-pstyle-2 #publishEmojiBtn,
[data-theme="national"] .publish-pstyle-2 .Btn,
[data-theme="national"] .publish-pstyle-2 .sq-head,
[data-theme="national"] .publish-pstyle-2 .autoreply-label,
[data-theme="national"] .publish-pstyle-2 #locationBtn {
  background: #FFFDF7 !important;
  color: var(--nat-ink) !important;
  border-color: var(--nat-red-deep) !important;
  box-shadow: 2px 2px 0 rgba(92, 9, 14, 0.5) !important;
}

[data-theme="national"] .publish-pstyle-2 .Btn .svgIcon path,
[data-theme="national"] .publish-pstyle-2 .Btn .text {
  fill: var(--nat-red-deep);
  color: var(--nat-ink);
}

/* 开启态原来是绿色 #2fbf71，在红金装里跳色 —— 改中国红底 + 淡金字 */
[data-theme="national"] .publish-pstyle-2 .autoreply-label.on,
[data-theme="national"] .publish-pstyle-2 .sq-head.on {
  background: var(--nat-red) !important;
  color: var(--nat-gold-soft) !important;
  border-color: var(--nat-red-dark) !important;
}

/* 开关块前置图标是遮罩上色的，开启态要跟着反色，否则红底压红图看不见 */
[data-theme="national"] .publish-pstyle-2 .pub-dash > .autoreply-label::before,
[data-theme="national"] .publish-pstyle-2 .pub-dash > .sq-head::before {
  background: var(--nat-red-deep);
}

[data-theme="national"] .publish-pstyle-2 .autoreply-label.on::before,
[data-theme="national"] .publish-pstyle-2 .sq-head.on::before {
  background: var(--nat-gold-soft);
}

[data-theme="national"] .publish-pstyle-2 .loc-line1 {
  background: rgba(251, 243, 228, 0.92);
  border-color: rgba(233, 185, 78, 0.75);
  box-shadow: 2px 2px 0 rgba(92, 9, 14, 0.4);
}

/* ---------- 文件页上传区 ---------- */
[data-theme="national"] .upload-zone {
  background: rgba(251, 243, 228, 0.92);
  border-color: var(--nat-red-deep);
  box-shadow: 4px 4px 0 rgba(92, 9, 14, 0.35);
}

[data-theme="national"] .upload-zone:hover {
  background: rgba(233, 185, 78, 0.14);
  border-color: var(--nat-red);
}

/* ---------- 评论区：详情评论区 + 楼中楼卡片 ---------- */
[data-theme="national"] .post-detail-comments {
  background: rgba(251, 243, 228, 0.88);
  border-color: rgba(233, 185, 78, 0.6);
}

[data-theme="national"] .post-detail-comment-item {
  background: rgba(255, 252, 245, 0.85);
  border-color: rgba(233, 185, 78, 0.5);
}

/* ---------- 点赞粒子：金色余晖（做轻） ---------- */
[data-theme="national"] .like-heart-particle svg {
  display: block;
  filter: drop-shadow(0 1px 3px rgba(233, 185, 78, 0.55));
}

/* 开关 chip 内层 span 带内联 color:var(--black)，会压过上面的 .on 规则，
   红底配深字不可读 —— 这里必须用 !important 才压得住内联样式 */
[data-theme="national"] .publish-pstyle-2 .sq-head.on,
[data-theme="national"] .publish-pstyle-2 .sq-head.on > span,
[data-theme="national"] .publish-pstyle-2 .autoreply-label.on,
[data-theme="national"] .publish-pstyle-2 .autoreply-label.on > * {
  color: var(--nat-gold-soft) !important;
}


/* ============================================================
   第五批：文章阅读页 / 首页文章封面卡（article.css）
   article.css 的黑框白纸全靠 var(--black)/var(--white)，这两个变量全站通用，
   在主题作用域里一改就是整站地震，所以按元素逐条覆盖，只锁 art-* 类名。
   正文可读性优先：底用宣纸、字用墨色，强调只给边框与分隔线。
   ============================================================ */
[data-theme="national"] .art-page {
  background: rgba(255, 252, 245, 0.95);
  border-color: var(--nat-red-deep);
  box-shadow: 4px 4px 0 rgba(92, 9, 14, 0.18);
  color: var(--nat-ink);
}

/* 「ARTICLE · 文章」角标：黑底白字 -> 中国红底淡金字 */
[data-theme="national"] .art-kicker {
  background: var(--nat-red);
  color: var(--nat-gold-soft);
}

[data-theme="national"] .art-title { color: var(--nat-ink); }

[data-theme="national"] .art-meta { border-bottom-color: rgba(233, 185, 78, 0.7); }
[data-theme="national"] .art-meta a { color: var(--nat-red-deep); }
[data-theme="national"] .art-meta-avatar { border-color: var(--nat-red-deep); }

[data-theme="national"] .art-lede {
  background: rgba(233, 185, 78, 0.13);
  border-left-color: var(--nat-red);
  color: #5B4630;
}

[data-theme="national"] .art-body { color: var(--nat-ink); }
[data-theme="national"] .art-body .art-h { border-left-color: var(--nat-red); }
[data-theme="national"] .art-body .art-h5,
[data-theme="national"] .art-body .art-h6 { color: #6B4F3A; }

[data-theme="national"] .art-body .art-code {
  background: rgba(233, 185, 78, 0.18);
  border-color: rgba(192, 18, 28, 0.32);
}

/* 代码块本身是深底浅字（可读性够），只把外框换成深红，不再用纯黑 */
[data-theme="national"] .art-body .art-pre { border-color: var(--nat-red-dark); }

[data-theme="national"] .art-body .art-quote {
  border-left-color: rgba(233, 185, 78, 0.75);
  color: #5B4630;
}

[data-theme="national"] .art-body .art-hr { border-top-color: rgba(192, 18, 28, 0.32); }
[data-theme="national"] .art-body del { color: rgba(51, 24, 26, 0.5); }

[data-theme="national"] .art-body .art-table th,
[data-theme="national"] .art-body .art-table td { border-color: rgba(233, 185, 78, 0.55); }
[data-theme="national"] .art-body .art-table th { background: rgba(233, 185, 78, 0.16); }

/* 首页与列表页的文章封面卡 */
[data-theme="national"] .art-card {
  background: rgba(255, 252, 245, 0.95);
  border-color: var(--nat-red-deep);
}

[data-theme="national"] .art-card:hover { border-color: var(--nat-red); }

/* 「修订」入口是 post_detail.html 里的内联 border:2px solid var(--black)，
   只有 !important 压得住；这是文章页剩下的最后一块纯黑描边 */
[data-theme="national"] .art-page a[href^="/write"] {
  border-color: var(--nat-red-deep) !important;
  color: var(--nat-red-deep) !important;
}

/* upload.html 这两个控件写的是 background:var(--card-bg,#222) + 硬色浅字，
   --card-bg 一旦变宣纸白就会浅底配浅字，这里把字色压回墨色 */
[data-theme="national"] #shareLinkInput,
[data-theme="national"] button.btn-sm[onclick="regenerateThumbnails()"] {
  color: var(--nat-ink) !important;
}
/* ============================================================
   红绸揭幕入场（national-entrance.js 驱动，只在国庆装出现）
   幕布要像布，靠三件事：
   1 竖向褶皱用多段软渐变画柱状明暗（暗-亮-暗一个周期 72px），再叠一层细布纹；
   2 顶部一排垂褶、底摆用 mask 裁成波浪并缀鎏金边，不是齐刷刷的直边；
   3 拉开时以靠外侧那条边为轴横向压缩（scaleX），褶皱会被一起挤密 ——
     这才是"拢到一边"的手感；平移出屏只会像两扇推拉门。
   ============================================================ */
.nat-enter {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  transition: opacity .32s ease;
}

.nat-curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 53%;
  background-image:
    /* 褶皱：一道柱面从暗到亮再回暗，周期 72px */
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, .38) 0px,
      rgba(0, 0, 0, .10) 10px,
      rgba(255, 226, 196, .14) 26px,
      rgba(255, 255, 255, .05) 36px,
      rgba(0, 0, 0, .16) 52px,
      rgba(0, 0, 0, .38) 72px),
    /* 细布纹 */
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .030) 0 1px,
      rgba(0, 0, 0, .050) 1px 4px),
    /* 整体受光：上亮下暗 */
    linear-gradient(180deg,
      #D3222C 0%, var(--nat-red, #C0121C) 30%, var(--nat-red-deep, #8E0D14) 76%, var(--nat-red-dark, #5C090E) 100%);
  /* 底摆裁成向下的半圆波浪，其余部分保持完整 */
  -webkit-mask:
    radial-gradient(circle at 15px 0, #000 15px, transparent 15.5px) 0 100% / 30px 15px repeat-x,
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 15px) no-repeat;
  mask:
    radial-gradient(circle at 15px 0, #000 15px, transparent 15.5px) 0 100% / 30px 15px repeat-x,
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 15px) no-repeat;
  will-change: transform;
  transform: scaleX(1);
}

/* 各自以外侧那条边为轴收拢 */
.nat-curtain-l { left: 0; transform-origin: 0 50%; }
.nat-curtain-r { right: 0; transform-origin: 100% 50%; }

/* 顶部垂褶：一排小半圆挂在杆上，比直边更像挂起来的布 */
.nat-curtain::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26px;
  background:
    radial-gradient(circle at 18px 26px, rgba(0, 0, 0, .34) 17px, transparent 17.5px) 0 0 / 36px 26px repeat-x,
    linear-gradient(180deg, var(--nat-red-dark, #5C090E), rgba(92, 9, 14, 0));
  opacity: .9;
}

/* 底摆鎏金滚边，跟着波浪走 */
.nat-curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 17px;
  background: linear-gradient(180deg, var(--nat-gold-soft, #F6DC96), var(--nat-gold, #E9B94E) 60%, #C79A38);
  -webkit-mask: radial-gradient(circle at 15px 0, #000 15px, transparent 15.5px) 0 100% / 30px 15px repeat-x;
  mask: radial-gradient(circle at 15px 0, #000 15px, transparent 15.5px) 0 100% / 30px 15px repeat-x;
  opacity: .92;
}

/* 首帧画完才允许过渡，否则浏览器会把"拉开"当成初始态、直接一闪而过 */
.nat-enter.nat-show .nat-curtain {
  transition: transform .86s cubic-bezier(.58, .01, .22, 1);
}

.nat-enter.nat-open .nat-curtain { transform: scaleX(.045); }

/* 中缝：合拢时一条柔和的金光缝，拉开即收 */
.nat-seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 6px;
  margin-left: -3px;
  background: linear-gradient(180deg,
    transparent, var(--nat-gold-soft, #F6DC96) 14%, var(--nat-gold, #E9B94E) 50%, var(--nat-gold-soft, #F6DC96) 86%, transparent);
  box-shadow: 0 0 18px 3px rgba(233, 185, 78, .45);
  opacity: .8;
  transition: opacity .5s ease;
}

.nat-enter.nat-open .nat-seam { opacity: 0; }

/* 绸面受光扫过：宽而软的一道，只走一次，不做循环闪光 */
.nat-sweep {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 50%;
  width: 60%;
  transform: translateX(-50%) scaleX(.08);
  opacity: 0;
  background: linear-gradient(100deg,
    transparent 26%, rgba(255, 240, 208, .16) 44%, rgba(255, 246, 224, .26) 50%,
    rgba(255, 240, 208, .16) 56%, transparent 74%);
  transition: transform .72s cubic-bezier(.2, .66, .22, 1), opacity .72s ease;
  pointer-events: none;
}

.nat-sweep.nat-on { transform: translateX(-50%) scaleX(1); opacity: 1; }

.nat-enter.nat-settle .nat-sweep { opacity: 0; }

/* 金屑：从中间向两侧飘散，14 片封顶，再多就成下雪 */
.nat-flake {
  position: absolute;
  top: 17%;
  width: 5px;
  height: 10px;
  border-radius: 1px 1px 2px 2px;
  background: linear-gradient(180deg, var(--nat-gold-soft, #F6DC96), var(--nat-gold, #E9B94E) 70%, #C79A38);
  box-shadow: 0 0 6px rgba(233, 185, 78, .5);
  opacity: 0;
  pointer-events: none;
}

.nat-enter.nat-open .nat-flake {
  animation: natFall 1s cubic-bezier(.28, .5, .5, 1) forwards;
}

@keyframes natFall {
  0%   { opacity: 0;   transform: translate(0, -12px) rotate(0deg) scale(.6); }
  16%  { opacity: .95; }
  100% { opacity: 0;   transform: translate(var(--dx, 20px), 260px) rotate(var(--rot, 180deg)) scale(1); }
}

.nat-enter.nat-done { opacity: 0; pointer-events: none; }

/* 系统要求减少动效时，即使脚本漏判也不会留下半截幕布 */
@media (prefers-reduced-motion: reduce) {
  .nat-enter { display: none; }
}