/* ==========================================================
   Noir 深色覆盖：对比更强、金属更亮
   ========================================================== */

body.noir{
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(242,220,150,.08), transparent 60%),
    radial-gradient(900px 600px at 10% 20%, rgba(133,42,50,.10), transparent 70%),
    linear-gradient(180deg, #0a0e10, #070b0c 60%, #050809);
  color:#eae6df;
}
.noir .nav,.noir .panel{
  background:linear-gradient(180deg, rgba(26,8,9,.72), rgba(18,6,7,.72));
  border:1px solid rgba(202,164,94,.32);
  box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,240,210,.06);
}
.noir .filters input,.noir .filters select{
  background:linear-gradient(180deg, rgba(22,8,9,.88), rgba(14,5,6,.88));
  border:1px solid rgba(202,164,94,.32);
  color:#f1e8cf;
}

/* 卡面更亮的金纹、更深的红 */
.noir .a4{
  border-color: rgba(242,220,150,.44);
  background:
    radial-gradient(160% 100% at 20% 10%, rgba(255,238,198,.14), transparent 60%),
    radial-gradient(120% 80% at 80% 5%,  rgba(255,227,170,.12), transparent 65%),
    conic-gradient(from 12deg at 30% 20%, rgba(242,220,150,.26), transparent 30% 70%, rgba(242,220,150,.18)),
    linear-gradient(135deg, rgba(255,228,170,.10), transparent 55%),
    linear-gradient(225deg, rgba(255,228,170,.09), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #7b232b, #4f161b),
    linear-gradient(transparent,transparent);
  background-size:cover,cover,cover,cover,cover,cover,cover,1px 90%;
  background-position:center,center,center,center,center,center,center,calc(100% - 22px) 50%;
  background-repeat:no-repeat;
}
.noir .a4::before{background:linear-gradient(180deg, rgba(242,220,150,.18), rgba(0,0,0,.28)), linear-gradient(180deg, #7b232b, #4f161b)}
.noir .a4::after{background:linear-gradient(0deg, rgba(242,220,150,.16), rgba(0,0,0,.28)), linear-gradient(180deg, #7b232b, #4f161b)}

/* 蜡封高光更强 */
.noir .a4 .open-btn{
  background:
    radial-gradient(46px 40px at 42% 32%, rgba(255,240,210,.24), transparent 60%),
    radial-gradient(96px 72px at 55% 60%, rgba(0,0,0,.36), transparent 70%),
    linear-gradient(180deg, #bb6f5b, #8e4c3d);
  box-shadow:0 16px 32px rgba(0,0,0,.62), inset 0 2px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.35);
}
.noir .a4 .open-btn::after{
  background:url("/6/assets/img/logo-6.png") center/56% no-repeat;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.72)) drop-shadow(0 0 16px rgba(242,220,150,.45));
}

/* 铭圈：在暗色环境下增强外缘对比（遮罩沿用 qa.css） */
.noir .a4 .state::before{ box-shadow:0 0 0 2px rgba(255,240,210,.07) inset, 0 12px 30px rgba(0,0,0,.6); }
.noir .a4 .state:has(.circle.green)::before{ box-shadow:0 0 0 2px rgba(106,211,177,.56) inset, 0 12px 30px rgba(0,0,0,.6); }
.noir .a4 .state:has(.circle.yellow)::before{ box-shadow:0 0 0 2px rgba(225,192,93,.56) inset, 0 12px 30px rgba(0,0,0,.6); }
.noir .a4 .state:has(.circle.red)::before   { box-shadow:0 0 0 2px rgba(208,122,122,.56) inset, 0 12px 30px rgba(0,0,0,.6); }

/* 牌匾更亮更暖 */
.noir .a4 .state::after{
  background:linear-gradient(180deg, #f9e8c1, #e3c993);
  border-color:rgba(58,42,26,.48);
  color:#2b1d10;
}

/* 信纸与按钮对比增强 */
.noir .a4 .sheet{
  background:
    radial-gradient(150% 100% at 50% -10%, rgba(255,255,255,.58), transparent 60%),
    linear-gradient(180deg, #ead9b2, #dcc38e);
  color:#2f2517; border-color:rgba(58,42,26,.52);
  box-shadow:0 24px 48px rgba(0,0,0,.64), inset 0 1px 0 rgba(255,255,255,.62);
}
.noir .a4 .sheet::after{
  background:repeating-linear-gradient(180deg, rgba(58,42,26,.34) 0px, rgba(58,42,26,.34) 1px, transparent 1px, transparent 24px);
}
/* 信纸上的 logo 接取按钮 */
.noir .a4 .sheet .is-action.on-sheet{
  background:
    url("/6/assets/img/logo-6.png") center/70% no-repeat,
    linear-gradient(180deg, #fdeecb, #e8cf98);
  border-color:rgba(58,42,26,.54);
  box-shadow:0 14px 24px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.6);
}

/* 竖排日期 */
.noir .a4 .vdate{ color:rgba(215,181,106,.94); border-left:1px dashed rgba(215,181,106,.30) }

/* 减动效 */
@media (prefers-reduced-motion: reduce){
  .noir .a4::before,.noir .a4::after,.noir .a4 .sheet,.noir .a4 .open-btn{ transition:none !important; }
  .noir .a4 .sheet{ transform:none !important; opacity:1 !important; }
  .noir .a4::before,.noir .a4::after{ display:none !important; }
}