/* ==========================================================
   六协会 · 信封主题（定制版）
   - 蜡封居中；铭圈更小更像金属；logo 代替“六/接取”
   - 接取按钮仅在信纸打开后，位于纸张右下
   - 所有遮罩含 -webkit-mask 与标准 mask
   ========================================================== */

/* 主题变量 */
:root{
  --six-crimson-0:#0a0304; --six-crimson-1:#150607; --six-crimson-2:#2b0a0b; --six-crimson-3:#4a1012; --six-crimson-4:#7a1b1d;
  --six-parchment:#ead9b2; --six-parchment-2:#e3cea3; --six-ink-deep:#3a2a1a;
  --six-gold-1:#caa45e; --six-gold-2:#f2d58a; --six-gold-3:#8e6b2b;
  --six-wax:#b76e5a; --six-wax-edge:#8d4f3e;

  /* 状态色调 */
  --st-unclaimed:#6ad3b1; /* 翡翠青 */
  --st-progress:#e1c05d;  /* 琥珀金 */
  --st-done:#d07a7a;      /* 朱砂红 */

  /* 与原样式兼容 */
  --seven-panel:rgba(14,6,7,.65); --seven-panel-2:rgba(12,4,5,.85);
  --seven-border:rgba(202,164,94,.28); --seven-ink:#f1e8cf;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{display:block;max-width:100%}

/* —— 导航/工具栏（保持原有） —— */
.wrap{position:relative; z-index:1; padding:16px; max-width:1200px; margin:0 auto}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-radius:14px;
  background:linear-gradient(180deg, rgba(26,8,9,.72), rgba(18,6,7,.72));
  border:1px solid rgba(202,164,94,.28);
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,240,210,.05);
  backdrop-filter: blur(6px);
}
.nav .brand{display:flex; gap:10px; text-decoration:none; color:inherit; align-items:center}
.nav .brand img{width:36px; height:36px; object-fit:contain}
.nav .brand .title{font-weight:900; letter-spacing:.5px; color:var(--six-gold-2)}
.nav .brand .subtitle{font-size:12px; opacity:.9; color:rgba(242,211,138,.75)}
.nav-right{display:flex; gap:8px; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 12px; border-radius:10px; cursor:pointer;
  background:linear-gradient(180deg, rgba(18,6,7,.6), rgba(10,3,3,.4));
  border:1px solid rgba(202,164,94,.35); color:#f1e8cf;
  text-decoration:none; user-select:none;
  box-shadow:inset 0 0 0 1px rgba(255,240,210,.06);
}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 14px rgba(122,27,29,.35), inset 0 0 0 1px rgba(242,211,138,.18)}
.btn.primary{
  border-color: rgba(242,211,138,.55);
  color:#1a0a0a;
  background:linear-gradient(180deg, rgba(242,211,138,.95), rgba(202,164,94,.92));
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

.panel{
  margin-top:14px; padding:12px; border-radius:14px;
  background:linear-gradient(180deg, rgba(26,8,9,.72), rgba(18,6,7,.72));
  border:1px solid rgba(202,164,94,.28);
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,240,210,.05);
  backdrop-filter: blur(6px);
}
.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:8px 0 12px}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filters input, .filters select{
  padding:8px 10px;border-radius:10px;border:1px solid rgba(202,164,94,.28);
  background:linear-gradient(180deg, rgba(22,8,9,.85), rgba(14,5,6,.85));
  color:#f1e8cf
}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.2); border:1px solid rgba(202,164,94,.25)}

/* —— 背景竖幅 —— */
.six-bg{position:fixed; inset:0; z-index:0; pointer-events:none}
.six-bg::before,
.six-bg::after{
  content:""; position:absolute; top:0; bottom:0; width:14px;
  background:
    linear-gradient(180deg, rgba(202,164,94,.65), rgba(202,164,94,.15) 30%, rgba(202,164,94,.65)),
    linear-gradient(180deg, rgba(122,27,29,.85), rgba(74,16,18,.85));
  box-shadow:inset 0 0 0 1px rgba(255,240,200,.16), 0 0 30px rgba(202,164,94,.12);
}
.six-bg::before{ left:40px; } .six-bg::after{ right:40px; }

/* —— 栅格 —— */
.grid{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1280px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

/* ==========================================================
   卡片：丝绒底 + 暗金纹 + 交叉缎带 + 压纹 + 右侧缝线
   ========================================================== */
.a4{
  position:relative; aspect-ratio:210/297; border-radius:14px; overflow:hidden;
  background:
    radial-gradient(160% 100% at 20% 10%, rgba(255,238,198,.12), transparent 60%),
    radial-gradient(120% 80% at 80% 5%,  rgba(255,227,170,.10), transparent 65%),
    conic-gradient(from 12deg at 30% 20%, rgba(242,220,150,.22), transparent 30% 70%, rgba(242,220,150,.14)),
    linear-gradient(135deg, rgba(255,228,170,.08), transparent 55%),
    linear-gradient(225deg, rgba(255,228,170,.07), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #7b232b, #4f161b),
    linear-gradient(transparent,transparent);
  border:1px solid rgba(215,181,106,.40);
  box-shadow:0 18px 42px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05);
  padding:14px 14px 54px 14px;

  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;
}

/* 折页（用于开封退让） */
.a4::before, .a4::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  transition: transform .5s cubic-bezier(.2,.9,.2,1), opacity .4s ease;
}
.a4::before{
  clip-path: polygon(0 0, 100% 0, 50% 48%);
  background:linear-gradient(180deg, rgba(242,220,150,.18), rgba(0,0,0,.24)), linear-gradient(180deg, #7b232b, #4f161b);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
}
.a4::after{
  clip-path: polygon(0 100%, 100% 100%, 50% 52%);
  background:linear-gradient(0deg, rgba(242,220,150,.16), rgba(0,0,0,.24)), linear-gradient(180deg, #7b232b, #4f161b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* —— 去掉顶端小圆“六” —— */
.a4 .level{ display:none !important; }

/* 标题/竖排日期 */
.a4 .title{position:relative; z-index:2; font-weight:900; font-size:16px; letter-spacing:.2px; padding-right:86px; color:#f8eede; text-shadow:0 1px 2px rgba(0,0,0,.35)}
.a4 .vdate{
  position:absolute; right:6px; top:10px; bottom:10px;
  writing-mode: vertical-rl; text-orientation: mixed;
  letter-spacing: 2px; color:rgba(215,181,106,.92);
  display:flex; align-items:center; justify-content:center;
  border-left: 1px dashed rgba(215,181,106,.28); padding-left:6px; font-weight:600; z-index:2;
}

/* ==========================================================
   居中“蜡封印章” = 开封按钮（logo 替换“六”）
   ========================================================== */
.a4 .open-btn{
  position:absolute !important; left:50% !important; top:50% !important; right:auto !important;
  transform:translate(-50%,-34%) !important;
  z-index:6; cursor:pointer; user-select:none;
  width:92px; height:92px; padding:0; border-radius:999px; border:none;
  background:
    radial-gradient(46px 40px at 45% 35%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(96px 72px at 55% 60%, rgba(0,0,0,.30), transparent 70%),
    linear-gradient(180deg, var(--six-wax), #9b5a49);
  box-shadow:0 14px 28px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.28);
  color:transparent;
}
.a4 .open-btn::before{content:""; position:absolute; inset:6px; border-radius:inherit; border:2px solid var(--six-wax-edge); box-shadow: inset 0 0 0 2px rgba(255,255,255,.06)}
/* 用 logo 图片替换“六” */
.a4 .open-btn::after{
  content:""; position:absolute; inset:0;
  background:url("/6/assets/img/logo-6.png") center/56% no-repeat;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.65)) drop-shadow(0 0 12px rgba(215,181,106,.35));
}
.a4 .open-btn:hover{transform:translate(-50%,-34%) scale(1.04) !important}
.a4 .open-btn:active{transform:translate(-50%,-34%) scale(.98) !important}
.a4.open::before{ transform: translateY(-18%) rotateX(30deg); opacity:.0; }
.a4.open::after { transform: translateY( 18%) rotateX(-30deg); opacity:.0; }
.a4.open .open-btn{ transform: translate(-50%,-34%) rotate(-14deg) scale(.72) !important; opacity:0; transition: transform .45s ease, opacity .45s ease .05s }

/* ==========================================================
   状态展示：更小的“金属铭圈” + 牌匾
   - 尺寸刚好包住蜡封；质感更像金属
   ========================================================== */
.a4 .state{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:2;}
.a4 .state > .circle{ display:none; } /* 旧圆环隐藏，仅作 :has 判定 */

/* 铭圈主体（更小；金属拉丝+高光；含标准 mask） */
.a4 .state::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-36%);
  width:168px; height:168px; border-radius:999px; opacity:.98;
  /* 让圈更贴近蜡封：内孔约 60px，外缘最近边 84px => 厚度约 24px */
  -webkit-mask: radial-gradient(closest-side, transparent 60px, #000 78px);
  mask:         radial-gradient(closest-side, transparent 60px, #000 78px);
  /* 金属质感：多段高光 + 轻微拉丝 */
  background:
    conic-gradient(from -60deg, rgba(255,255,255,.55) 0 8deg, rgba(255,255,255,0) 8deg 330deg, rgba(255,255,255,.45) 330deg 360deg),
    conic-gradient(from 120deg, rgba(255,255,255,.25), rgba(255,255,255,.05), rgba(255,255,255,.25)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, rgba(0,0,0,0) 1px 3px),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.22));
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 0 0 2px rgba(0,0,0,.28) inset, 0 10px 26px rgba(0,0,0,.5);
}

/* 牌匾（环底部；文字保持） */
.a4 .state::after{
  content:""; position:absolute; left:50%; top:calc(50% + 46px); transform:translate(-50%,0);
  padding:4px 12px; font-weight:900; letter-spacing:.3em; font-size:13px;
  color:#2b1d10; border-radius:999px;
  background:linear-gradient(180deg, #f4e0b6, #d9be83);
  border:1px solid rgba(58,42,26,.4);
  box-shadow:0 8px 18px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.55);
}

/* —— 三状态着色（在上述金属层之上再叠色） —— */
.a4 .state:has(.circle.green)::before{
  background:
    conic-gradient(from -60deg, rgba(255,255,255,.55) 0 8deg, rgba(255,255,255,0) 8deg 330deg, rgba(255,255,255,.45) 330deg 360deg),
    conic-gradient(from 0deg, rgba(150,240,210,.65), rgba(90,190,160,.28), rgba(150,240,210,.65)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, rgba(0,0,0,0) 1px 3px),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.22));
  box-shadow:0 0 0 2px rgba(106,211,177,.52) inset, 0 10px 26px rgba(0,0,0,.5);
}
.a4 .state:has(.circle.yellow)::before{
  background:
    conic-gradient(from -60deg, rgba(255,255,255,.55) 0 8deg, rgba(255,255,255,0) 8deg 330deg, rgba(255,255,255,.45) 330deg 360deg),
    conic-gradient(from 0deg, rgba(255,220,150,.70), rgba(226,190,90,.32), rgba(255,220,150,.70)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, rgba(0,0,0,0) 1px 3px),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.22));
  box-shadow:0 0 0 2px rgba(225,192,93,.52) inset, 0 10px 26px rgba(0,0,0,.5);
}
.a4 .state:has(.circle.red)::before{
  background:
    conic-gradient(from -60deg, rgba(255,255,255,.55) 0 8deg, rgba(255,255,255,0) 8deg 330deg, rgba(255,255,255,.45) 330deg 360deg),
    conic-gradient(from 0deg, rgba(230,140,140,.68), rgba(160,70,70,.28), rgba(230,140,140,.68)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, rgba(0,0,0,0) 1px 3px),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.22));
  box-shadow:0 0 0 2px rgba(208,122,122,.52) inset, 0 10px 26px rgba(0,0,0,.5);
}

/* 状态牌匾文字 */
.a4 .state:has(.circle.green)::after{ content:"未接取"; }
.a4 .state:has(.circle.yellow)::after{ content:"进行中"; }
.a4 .state:has(.circle.red)::after   { content:"已完成"; }

/* 开封后弱化铭圈与牌匾 */
.a4.open .state::before{ opacity:.08; }
.a4.open .state::after{ opacity:0; transform:translate(-50%,6px); transition:opacity .25s ease, transform .25s ease }

/* ==========================================================
   信纸（羊皮纸） & 接取按钮（logo）
   ========================================================== */
.a4 .sheet{
  position:absolute; left:7%; right:7%; top:15%; bottom:14%;
  background:
    radial-gradient(150% 100% at 50% -10%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg, var(--six-parchment), var(--six-parchment-2));
  color: var(--six-ink-deep);
  border:1px solid rgba(58,42,26,.48); border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
  overflow:hidden;
  transform: translateY(16px) scale(.96) rotateX(8deg);
  transform-origin: 50% 0; opacity:0; pointer-events:none;
  transition:transform .55s cubic-bezier(.2,.9,.2,1), opacity .45s ease;
  z-index:3;
}
.a4 .sheet::after{
  content:""; position:absolute; inset:12px 18px 16px 18px; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(58,42,26,.30) 0px, rgba(58,42,26,.30) 1px, transparent 1px, transparent 24px);
  opacity:.85;
}
.a4 .sheet::before{
  content:""; position:absolute; left:0; right:0; top:0; height:34px; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,0)), linear-gradient(180deg, #f1e0b9, #e6d09f);
  border-bottom: 1px dashed rgba(58,42,26,.35); opacity:.9;
}
.sheet .hd{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px}
.sheet .hd .ttl{font-weight:900; letter-spacing:.08em}
.sheet .bd{position:absolute; left:14px; right:14px; top:56px; bottom:14px; overflow:auto; line-height:1.7}
.sheet .pill{background:rgba(0,0,0,.06); border:1px solid rgba(44,38,18,.28); border-radius:999px; padding:2px 8px; font-size:12px}
.a4.open .sheet{ opacity:1; pointer-events:auto; transform: translateY(-4px) scale(1) rotateX(0deg); }

/* 接取按钮：进入信纸后变成圆形 logo 按钮 */
.a4 .sheet .is-action.on-sheet{
  position:absolute; right:18px; bottom:16px; z-index:5;
  width:52px; height:52px; min-width:auto; padding:0; border-radius:50%;
  background:
    url("/6/assets/img/logo-6.png") center/70% no-repeat,
    linear-gradient(180deg, #f9e8c1, #e3c993);
  border:1px solid rgba(58,42,26,.5);
  box-shadow:0 12px 22px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.55);
  color:transparent; font-size:0; letter-spacing:0; /* 隐去文字“接取” */
  pointer-events:auto; cursor:pointer;
}
.a4 .sheet .is-action.on-sheet:hover{ transform:translateY(-1px) }
.a4 .sheet .is-action.on-sheet:active{ transform:translateY(0) }

/* 保底：未打开时不显示 */
.a4 .state .is-action{ display:none; }

.a4 .meta{position:absolute; left:14px; bottom:46px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; z-index:2}
.a4 .tags{position:absolute; left:14px; bottom:10px; display:flex; gap:8px; flex-wrap:wrap; z-index:2}
.a4 .tag{font-size:12px; padding:2px 8px; border:1px solid rgba(202,164,94,.25); border-radius:999px; background:rgba(0,0,0,.2)}

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