/* 白嫖算力卡册（compute 页）。全站基础样式见 style.css，这里只放卡册相关的样式。 */
body[data-theme=compute]{--card:#fff;--soft:#f6f3ee;--accent-soft:#fff4e3;--blue:#2f7cf6;--gold:#d99a00;--stamp:#1f7a53;--stamp-red:#c8352b;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--rainbow:linear-gradient(90deg,#ff5ea8,#ffb84d,#f5e04a,#4de0a0,#4dc3ff,#9b6bff)}
.cards-page .muted{color:var(--muted)}
.cards-wrap{display:grid;gap:24px;padding-block:8px 60px}
.cards-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.cards-head h1{font-size:clamp(30px,4.4vw,48px);line-height:1.15;margin:0}
.cards-head p{margin:6px 0 0;color:var(--muted)}
.who{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;border-radius:99px;background:#fff;box-shadow:var(--shadow);font-size:14px;font-weight:700}
.who .dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px #22c55e33}
.who button{border:0;border-radius:99px;padding:6px 14px;background:var(--soft);font:inherit;font-weight:800;font-size:13.5px;cursor:pointer}
.who button.primary{background:var(--accent);color:#fff}
.x{position:absolute;right:12px;top:10px;width:34px;height:34px;border-radius:50%;border:0;background:var(--soft);font-size:20px;line-height:1;color:var(--muted);cursor:pointer}
.extra{font-size:12.5px;font-weight:800;color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.empty-col{padding:22px;border-radius:18px;background:#fff;box-shadow:var(--shadow);color:var(--muted);font-size:14px;text-align:center}
.cards-page h1,.cards-page h2,.cards-page h3{letter-spacing:-.02em}
.cards-page p{margin:0}
.cards-page .group h2,.cards-page .album-head h2{margin:0}
.tc,.btn2,.tabs button{font-family:inherit}

.cstats{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px}
.cstat{padding:16px 20px;border-radius:20px;background:var(--card);box-shadow:var(--shadow);display:grid;gap:2px}
.cstat small{font-size:13px;color:var(--muted);font-weight:700}
.cstat strong{font-size:28px;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cstat.big{background:linear-gradient(135deg,#fff,#fff4e3 70%,#ffe8c7);border:1.5px solid #ffdcaa}
.cstat.big strong{font-size:40px;color:var(--accent)}
.cstat span{font-size:13px;color:var(--muted)}
.bump{animation:bump .6s var(--spring)}
@keyframes bump{40%{transform:scale(1.08)}}

.album{padding:18px 20px 20px;border-radius:24px;background:var(--card);box-shadow:var(--shadow);display:grid;gap:12px}
.album-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.album-head h2{font-size:21px}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tabs button{border:0;font-size:13.5px;font-weight:800;padding:6px 14px;border-radius:99px;background:var(--soft);color:var(--muted);transition:background .25s,color .25s,transform .35s var(--spring)}
.tabs button b{color:var(--ink)}
.tabs button[aria-selected=true]{background:var(--ink);color:#fff;transform:scale(1.04)}
.tabs button[aria-selected=true] b{color:#ffd27a}
.legend{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.cstage{position:relative;min-height:320px;border-radius:18px;overflow:hidden;background:radial-gradient(circle at 1px 1px,#d9d2c4 1px,transparent 1.5px) 0 0/16px 16px,#f3f0ea}
.cpanel{position:relative;padding:18px;transition:opacity .35s,transform .45s var(--spring)}
#panel-medals{overflow-x:auto}
.cpanel[hidden]{display:block!important;position:absolute;inset:0;overflow:hidden;opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;visibility:hidden}
.cgrid{display:grid;grid-template-columns:repeat(var(--cols,6),var(--cw,140px));gap:var(--gap,16px);justify-content:center;align-content:start}

.tc{--tx:0deg;--ty:0deg;--mx:50%;--my:30%;--brand:#999;--p:0;position:relative;width:var(--cw,140px);aspect-ratio:5/7;border-radius:11%/8%;padding:2.2%;background:#d8d3c8;container-type:inline-size;
  transform:perspective(800px) rotateX(var(--ty)) rotateY(var(--tx));transition:transform .5s var(--spring),box-shadow .3s;isolation:isolate;cursor:pointer;border:0;text-align:left}
.tc-in{position:relative;height:100%;border-radius:9%/6.5%;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;padding:7cqw 7cqw 9cqw;
  background:radial-gradient(120% 70% at 50% 40%,color-mix(in srgb,var(--brand) 24%,#fff) 0,#fff 62%),#fff}
.tc-in::before{content:"";position:absolute;left:50%;top:40%;width:118%;aspect-ratio:2.6;translate:-50% -50%;border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--brand) 26%,transparent);box-shadow:0 0 0 7cqw color-mix(in srgb,var(--brand) 6%,transparent),0 0 0 15cqw color-mix(in srgb,var(--brand) 4%,transparent);pointer-events:none}
.tc-in::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx) var(--my),#ffffff99,transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none;mix-blend-mode:soft-light}
.tc:hover .tc-in::after{opacity:1}
.tc-top,.tc-foot{position:relative;z-index:1;min-width:0;display:flex;justify-content:space-between;align-items:center;gap:3cqw}
.tc-val{min-width:0;font-family:var(--mono);font-weight:900;font-size:8.6cqw;padding:1.2cqw 4.5cqw;border-radius:5cqw;background:#ffffffe0;box-shadow:0 1px 3px #1d1b2c1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:78%}
.tc-gem{font-size:7.8cqw;letter-spacing:.5cqw;color:var(--gemc,#9a958a);white-space:nowrap}
.tc-art{position:relative;z-index:1;display:grid;place-items:center}
.tc-logo{display:grid;place-items:center;width:62%;aspect-ratio:1;border-radius:22%;overflow:hidden;box-shadow:0 7cqw 14cqw -6cqw color-mix(in srgb,var(--brand) 60%,#0006),0 0 0 2cqw #ffffffcc;transition:transform .45s var(--spring)}
.tc:hover .tc-logo{transform:translateY(-2cqw) scale(1.05)}
.tc-logo img{width:100%;height:100%;object-fit:contain;padding:var(--pad,12%)}
.tc-foot{flex-direction:column;gap:0;text-align:center}
.tc-name{font-weight:900;font-size:10cqw;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tc-rank{font-size:7.5cqw;letter-spacing:.12em;font-weight:800;color:var(--muted)}
.tc-bar{position:absolute;z-index:1;left:9cqw;right:9cqw;bottom:4cqw;height:2.2cqw;border-radius:99px;background:#1d1b2c14;overflow:hidden}
.tc-bar i{display:block;height:100%;width:calc(var(--p) * 100%);border-radius:inherit;background:var(--barc,#9a958a);transition:width .9s var(--spring)}
.tc-count{position:absolute;right:-5cqw;bottom:-5cqw;z-index:3;font-size:8.2cqw;font-weight:900;padding:1cqw 5cqw;border-radius:99px;background:#fff;box-shadow:0 2px 8px #1d1b2c33;color:var(--ink)}
.tc:not(.empty):hover{box-shadow:0 18px 34px -14px #1d1b2c66}
@container (max-width:92px){.tc-rank,.tc-gem{display:none}.tc-name{font-size:11cqw}}
@container (max-width:70px){.tc-foot,.tc-bar{display:none}.tc-in{grid-template-rows:auto 1fr}}
.tc.empty{background:transparent;outline:2px dashed #cbc4b6;outline-offset:-2px}
.tc.empty .tc-in{background:#f8f6f1}
.tc.empty .tc-in::before{border-color:#e2ddd3;box-shadow:none}
.tc.empty .tc-logo{filter:grayscale(1) contrast(.6) brightness(1.15);opacity:.45}
.tc.empty .tc-art::after{content:"?";position:absolute;font-size:22cqw;font-weight:900;color:#b9b2a3}
.tc.empty .tc-name,.tc.empty .tc-val{opacity:.55}
.tc.empty .tc-bar{display:none}
.tc.common{background:linear-gradient(160deg,#efebe2,#c9c2b4);box-shadow:0 8px 16px -10px #1d1b2c66}
.tc.blue{--gemc:var(--blue);--barc:var(--blue);background:linear-gradient(150deg,#c4dcff,#2f7cf6 40%,#1c55c9 62%,#a6caff);box-shadow:0 12px 24px -12px #2f7cf6}
.tc.blue .tc-rank{color:var(--blue)}
.tc.gold{--gemc:#c48a00;--barc:#d99a00;background:linear-gradient(150deg,#fff3c4,#e2a800 35%,#fff0b0 55%,#b97f00 80%,#ffe38a);box-shadow:0 14px 28px -12px #d99a00}
.tc.gold .tc-in{background:radial-gradient(120% 70% at 50% 40%,color-mix(in srgb,var(--brand) 20%,#fff8df) 0,#fffdf4 62%)}
.tc.gold .tc-rank{color:#b47f00}
.tc.gold .tc-in::after{opacity:1;background:linear-gradient(115deg,transparent 40%,#fff3c0bb 50%,transparent 60%);background-size:250% 100%;animation:foil 4.5s ease-in-out infinite;mix-blend-mode:normal}
@keyframes foil{0%,25%{background-position:120% 0}75%,100%{background-position:-20% 0}}
.tc.holo{--gemc:#a24cf0;--barc:linear-gradient(90deg,#ff5ea8,#9b6bff,#4dc3ff);background:conic-gradient(from var(--a,0deg),#ff5ea8,#ffb84d,#fff35c,#4dffb5,#4dc3ff,#9b6bff,#ff5ea8);animation:spinb 4s linear infinite;box-shadow:0 16px 34px -12px #a24cf0b0}
.tc.holo .tc-bar i{background:var(--barc)}
.tc.holo .tc-in{background:radial-gradient(120% 70% at 50% 40%,color-mix(in srgb,var(--brand) 18%,#fff) 0,#fff 55%),linear-gradient(160deg,#fff,#f6efff 60%,#eafbff)}
.tc.holo .tc-in::after{opacity:1;background:radial-gradient(circle at var(--mx) var(--my),#ffffffcc,transparent 30%),linear-gradient(115deg,transparent 30%,#ff9be266 42%,#fff8 50%,#8fe8ff66 58%,transparent 70%);background-size:100% 100%,260% 100%;animation:holo 3.6s ease-in-out infinite;mix-blend-mode:screen}
@keyframes holo{0%{background-position:0 0,130% 0}50%{background-position:0 0,-30% 0}100%{background-position:0 0,130% 0}}
.tc.holo .tc-rank,.tc.holo .tc-gem{background:linear-gradient(90deg,#ff5ea8,#9b6bff,#4dc3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.tc.holo:hover{transform:perspective(800px) rotateX(var(--ty)) rotateY(var(--tx)) scale(1.06);z-index:3}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spinb{to{--a:360deg}}
.tc.ended .tc-art::before{content:"绝版";position:absolute;z-index:3;rotate:-14deg;padding:1cqw 8cqw;border:2px solid var(--stamp-red);border-radius:6cqw;color:var(--stamp-red);font-weight:900;font-size:12cqw;background:#ffffffd9;letter-spacing:.1em}
.tc.levelup{animation:flip 1s var(--spring)}
.tc.holo.levelup{animation:flip 1s var(--spring),spinb 4s linear infinite}
@keyframes flip{0%{transform:perspective(800px) rotateY(0) scale(1)}45%{transform:perspective(800px) rotateY(90deg) scale(1.1)}55%{transform:perspective(800px) rotateY(-90deg) scale(1.1)}100%{transform:perspective(800px) rotateY(0) scale(1)}}

.medal-grid{display:grid;grid-template-columns:repeat(var(--mcols,7),minmax(112px,1fr));gap:12px;min-width:min-content}
.medal{position:relative;display:grid;justify-items:center;align-content:start;gap:4px;padding:16px 8px 12px;border-radius:18px;background:#fffdf9;text-align:center;box-shadow:0 4px 14px -8px #1d1b2c33;transition:transform .4s var(--spring)}
.medal:hover{transform:translateY(-3px)}
.medal-ico{position:relative;display:grid;place-items:center;width:62px;height:68px;margin-bottom:2px;filter:drop-shadow(0 6px 8px color-mix(in srgb,var(--m1) 45%,transparent))}
.medal-ico::before{content:"";position:absolute;inset:0;clip-path:polygon(50% 0,93% 24%,93% 76%,50% 100%,7% 76%,7% 24%);background:linear-gradient(150deg,color-mix(in srgb,var(--m1) 55%,#fff),var(--m1) 55%,color-mix(in srgb,var(--m1) 70%,#000))}
.medal-ico > span{position:relative;display:grid;place-items:center;width:48px;height:52px;clip-path:polygon(50% 0,93% 24%,93% 76%,50% 100%,7% 76%,7% 24%);background:radial-gradient(circle at 35% 28%,#fff,var(--m2) 72%);font-size:25px}
.medal.t3 .medal-ico::after{content:"";position:absolute;inset:0;clip-path:polygon(50% 0,93% 24%,93% 76%,50% 100%,7% 76%,7% 24%);background:linear-gradient(115deg,transparent 35%,#fff9 50%,transparent 65%) 0 0/250% 100%;animation:foil 3.8s ease-in-out infinite}
.medal-stars{font-size:10px;letter-spacing:2px;color:var(--m1);line-height:1}
.medal b{font-size:13.5px;line-height:1.3}
.medal small{font-size:11.5px;color:var(--muted);line-height:1.4}
.medal .mbar{width:80%;height:4px;margin-top:2px;border-radius:99px;background:#1d1b2c14;overflow:hidden}
.medal .mbar i{display:block;height:100%;border-radius:inherit;background:var(--m1)}
.medal.off .medal-ico{filter:grayscale(1);opacity:.4}
.medal.off .medal-stars{color:#c9c2b4}
.medal.on{background:linear-gradient(180deg,#fff,var(--m2));box-shadow:0 0 0 1.5px color-mix(in srgb,var(--m1) 35%,transparent),0 10px 22px -12px var(--m1)}
.medal.on .medal-ico{animation:bob 3s ease-in-out infinite}
.medal .when{font-family:var(--mono);font-size:10.5px;color:color-mix(in srgb,var(--m1) 80%,#000);font-weight:800;margin-top:2px}
.medal.new{animation:medalpop 1s var(--spring)}
@keyframes medalpop{0%{transform:scale(.4) rotate(-20deg)}60%{transform:scale(1.15) rotate(6deg)}100%{transform:none}}
@keyframes bob{50%{transform:translateY(-3px)}}

.gate{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:16px;background:#f3f0eacc;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.gate[hidden]{display:none}
.gate-box{display:grid;justify-items:center;gap:10px;padding:26px 30px;border-radius:24px;background:#fff;box-shadow:var(--shadow);text-align:center;max-width:340px}
.gate-box h3{font-size:19px}
.gate-box p{font-size:14px;color:var(--muted)}

.lists{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.col{display:grid;gap:22px}
.group{--g:#ff8a1f;--g-soft:#fff4e6;padding:16px 14px 14px;border-radius:24px;background:var(--g-soft);border:1px solid color-mix(in srgb,var(--g) 16%,transparent)}
.group[data-g=gpu]{--g:#4f6bed;--g-soft:#eef1ff}
.group[data-g=daily]{--g:#16a058;--g-soft:#e9f8ef}
.group[data-g=monthly]{--g:#8b5cf6;--g-soft:#f4eeff}
.group h2{font-size:17px;margin:0 2px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:color-mix(in srgb,var(--g) 55%,var(--ink))}
.group h2 span{font-size:12px;font-weight:700;color:color-mix(in srgb,var(--g) 70%,#000);background:#ffffffb8;padding:2px 9px;border-radius:99px}
.group h2 em{margin-left:auto;font-style:normal;font-size:12.5px;font-weight:800;color:#fff;background:var(--g);padding:2px 10px;border-radius:99px}
.group h2 em:empty{display:none}
.rows{display:grid;gap:8px}
.row{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:12px;align-items:center;padding:12px 12px 12px 14px;border-radius:16px;background:#fff;box-shadow:0 1px 2px #1d1b2c0d,0 6px 16px -10px color-mix(in srgb,var(--g) 55%,#0000);border-left:4px solid var(--g);transition:background .3s,box-shadow .3s}
.row .body{display:grid;gap:3px;min-width:0}
.row h3{margin:0;font-size:14.5px;line-height:1.35}
.row .val{font-size:13px;font-weight:800;color:color-mix(in srgb,var(--g) 75%,#000);line-height:1.4}
.row .val span{font-weight:700;color:var(--muted)}
.row .desc{font-size:12.5px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row .tags{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12px;color:var(--muted)}
.row .tags b{color:var(--g)}
.tag-done{font-weight:800;color:var(--stamp)}
.tag-info{padding:1px 7px;border-radius:99px;background:#f1eee8;font-weight:700}
.row .guide-link{color:color-mix(in srgb,var(--g) 80%,#000);font-size:12px}
.row.done{background:color-mix(in srgb,var(--g) 7%,#fbfaf7);box-shadow:none;border-left-color:color-mix(in srgb,var(--g) 30%,#fff)}
.row.done h3{color:var(--muted)}
.row.done .logo{filter:grayscale(.7);opacity:.6}
.row.ended{opacity:.55}
.row .logo{grid-area:auto}
.row .act{display:grid;justify-items:end}
.more-rows{width:100%;padding:10px;border:1.5px dashed color-mix(in srgb,var(--g) 40%,transparent);border-radius:14px;background:#ffffff99;color:color-mix(in srgb,var(--g) 80%,#000);font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;transition:background .2s}
.more-rows:hover{background:#fff}
.group .go{background:var(--g);box-shadow:0 8px 16px -8px var(--g)}
.group .go.info{background:#fff;color:color-mix(in srgb,var(--g) 85%,#000);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--g) 50%,transparent)}
.go{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 16px;border-radius:99px;background:var(--accent);color:#fff;font-weight:800;font-size:14px;border:0;box-shadow:0 8px 18px -8px var(--accent);transition:transform .35s var(--spring);white-space:nowrap}
.go:hover{transform:translateY(-2px)}
.btn2{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:9px 20px;border-radius:99px;border:0;background:var(--accent);color:#fff;font-weight:800;font-size:15px;box-shadow:0 8px 18px -8px var(--accent)}
.stamp{position:relative;display:grid;place-items:center;width:88px;height:52px;border:2.5px solid var(--stamp);border-radius:10px;color:var(--stamp);font-weight:900;font-size:14px;line-height:1.15;text-align:center;rotate:-8deg;background:transparent;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3.5px var(--stamp);opacity:.88}
.stamp small{display:block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em}
.stamp.press{animation:press .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes press{0%{transform:scale(2.2);opacity:0}60%{transform:scale(.92);opacity:1}100%{transform:scale(1)}}
.stamp:hover::after{content:"撤销";position:absolute;inset:-3px;display:grid;place-items:center;border-radius:10px;background:#fffffff2;color:var(--stamp-red);font-size:14px;rotate:8deg}
.stamp.red{border-color:var(--stamp-red);color:var(--stamp-red);box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3.5px var(--stamp-red);cursor:default}
.stamp.red:hover::after{display:none}

.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px));overflow:auto}
.modal[hidden]{display:none}
.modal-bg{position:fixed;inset:0;background:#1d1b2c88;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadein .3s ease}
.modal-bg.out{animation:fadeout .3s ease forwards}
@keyframes fadein{from{opacity:0}}
@keyframes fadeout{to{opacity:0}}
.detail{position:relative;display:grid;grid-template-columns:auto minmax(0,440px);gap:28px;align-items:center}
.detail > .tc{--cw:min(260px,60vw);cursor:default;filter:drop-shadow(0 30px 40px #0006)}
.rays{position:absolute;left:130px;top:50%;width:520px;height:520px;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,#ffffff24 0 8deg,transparent 8deg 20deg);mask:radial-gradient(closest-side,#000 30%,transparent 72%);-webkit-mask:radial-gradient(closest-side,#000 30%,transparent 72%);animation:spin 18s linear infinite;opacity:0;transition:opacity .4s}
.detail.lit .rays{opacity:1}
@keyframes spin{to{rotate:360deg}}
.info{position:relative;padding:22px;border-radius:22px;background:#fff;box-shadow:var(--shadow);display:grid;gap:12px;animation:slidein .55s .25s var(--spring) both}
@keyframes slidein{from{opacity:0;transform:translateX(30px)}}
.info.out{animation:slideout .25s ease forwards}
@keyframes slideout{to{opacity:0;transform:translateX(20px)}}
.info h3{font-size:20px;padding-right:30px}
.lv-badge{justify-self:start;font-size:12.5px;font-weight:900;padding:3px 11px;border-radius:99px;background:var(--soft);color:var(--muted)}
.lv-badge.blue{background:#e6efff;color:var(--blue)}.lv-badge.gold{background:#fff3cf;color:#9a6b00}.lv-badge.holo{background:linear-gradient(90deg,#ffe3f3,#e8e0ff,#dff6ff);color:#6b3fc4}.lv-badge.common{background:#efebe2;color:#6b6352}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px;margin:0}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.prog{display:grid;gap:5px;font-size:13px;color:var(--muted)}
.prog .track{height:8px;border-radius:99px;background:#1d1b2c12;overflow:hidden}
.prog .track i{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.days{display:grid;grid-template-columns:repeat(14,1fr);gap:4px}
.days span{aspect-ratio:1;border-radius:4px;background:#eeeae2}
.days span.on{background:var(--accent)}
.days span.today{outline:2px solid var(--ink);outline-offset:1px}

@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.94)}}


.confetti{position:fixed;z-index:70;pointer-events:none;font-size:18px;animation:fly 1.1s ease-out forwards}
@keyframes fly{from{opacity:1;transform:translate(0,0) rotate(0)}to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(260deg)}}
.toast-medal{position:fixed;left:50%;top:20px;z-index:65;translate:-50% -160%;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:99px;background:#1d1b2c;color:#fff;box-shadow:0 18px 40px -12px #1d1b2c99;transition:translate .6s var(--spring);font-size:14.5px;max-width:calc(100vw - 32px)}
.toast-medal.show{translate:-50% 0}
.toast-medal span:first-child{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#ffcf74;font-size:22px;flex:none}
.toast-medal b{color:#ffd27a}

@media(max-width:860px){.lists{grid-template-columns:1fr}.detail{grid-template-columns:1fr;justify-items:center;gap:16px}.rays{left:50%;top:30%}.info{width:min(360px,100%)}}
@media(max-width:600px){.cstats{grid-template-columns:1fr 1fr}.cstat.big{grid-column:1/-1}.cpanel{padding:12px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.logo{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;overflow:hidden;box-shadow:inset 0 0 0 1px #1d1b2c14;align-self:center}
.logo img{width:100%;height:100%;object-fit:contain;padding:var(--pad,14%)}
.howto{flex-basis:100%;margin-top:4px}
.howto summary{cursor:pointer;font-weight:800;color:var(--accent-ink);font-size:13px;list-style:none;display:inline-flex;align-items:center;gap:4px}
.howto summary::-webkit-details-marker{display:none}
.howto summary::after{content:"▾";transition:transform .3s var(--spring)}
.howto[open] summary::after{transform:rotate(180deg)}
.howto-steps{margin:6px 0 2px;padding-left:1.4em;display:grid;gap:3px;font-size:13px;color:var(--ink);line-height:1.6}
.info .howto-steps{font-size:13.5px}
.guide-link{border:0;background:none;padding:0;font:inherit;font-size:12.5px;font-weight:800;color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cards-tip{margin:-10px 0 0;padding:6px 14px;border-radius:10px;background:#fff7e8;border:1px solid #ffe2b3;color:#8a5a00;font-size:13px;line-height:1.6}
.cstat-medal{align-content:start;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:transform .2s}
.cstat-medal:hover{transform:translateY(-2px)}
.cstat .mshow{display:flex;align-items:center;min-height:52px}
.cstat .mshow-none{font-size:20px;font-weight:800;color:#b3aca1}
.cstat .mshow-one{color:var(--ink,#1d1b26);font-size:inherit;display:flex;align-items:center;gap:12px;animation:mshow-in .5s ease}
.cstat .mshow-ico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:24px;background:radial-gradient(circle at 35% 30%,#fff,var(--m2) 60%);border:2.5px solid var(--m1);box-shadow:0 4px 12px color-mix(in srgb,var(--m1) 35%,transparent);flex:none}
.cstat .mshow-one b{display:block;font-size:18px;line-height:1.3}
.cstat .mshow-one small{font-size:12px;color:var(--muted);font-weight:600}
@keyframes mshow-in{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mshow-one{animation:none}}
@media(max-width:600px){.cstat strong{font-size:22px}.cstat.big strong{font-size:34px}.cstat .mshow-one b{font-size:15px}}

/* 卡册折叠：没收集的卡叠成一摞牌 */
.deck,.deck-fold{position:relative;width:var(--cw,140px);aspect-ratio:5/7;border:0;padding:0;background:none;cursor:pointer;font:inherit;container-type:inline-size}
.deck-stack{position:absolute;inset:0}
.deck-card{position:absolute;inset:0;border-radius:11%/8%;background:#fff;box-shadow:0 2px 6px #1d1b2c26;outline:2px dashed #cbc4b6;outline-offset:-2px;display:grid;justify-items:center;align-content:start;padding-top:12cqw;
  transform:translate(calc(var(--k) * -6cqw),calc(var(--k) * 3cqw)) rotate(calc(var(--k) * 6deg));transition:transform .45s var(--spring)}
.deck-logo{width:42%;aspect-ratio:1;border-radius:22%;overflow:hidden;filter:grayscale(1);opacity:.55;display:grid;place-items:center}
.deck-logo img{width:100%;height:100%;object-fit:contain;padding:var(--pad,12%)}
.deck-card.back{--k:0;outline:0;align-content:center;gap:2cqw;padding:0;text-align:center;color:#fff;
  background:radial-gradient(circle at 50% 38%,#ffffff33 0 22%,transparent 23%),repeating-linear-gradient(45deg,#ffffff14 0 6px,transparent 6px 12px),linear-gradient(160deg,#ff9a3c,#ff6a3d 45%,#c2410c);
  box-shadow:0 0 0 3cqw #fff inset,0 0 0 4cqw #ffb26b inset,0 12px 22px -10px #c2410c99}
.deck-n{font-size:22cqw;font-weight:900;line-height:1;text-shadow:0 2px 6px #0003}
.deck-sub{font-size:8.5cqw;font-weight:800;opacity:.95;padding:0 8cqw}
.deck-open{margin-top:4cqw;font-size:8cqw;font-weight:800;background:#fff;color:#c2410c;padding:1.5cqw 6cqw;border-radius:99px;justify-self:center}
.deck:hover .deck-card:not(.back){transform:translate(calc(var(--k) * -11cqw),calc(var(--k) * 4cqw - 4cqw)) rotate(calc(var(--k) * 11deg))}
.deck:hover .deck-card.back{transform:translateY(-3cqw)}
.deck:focus-visible,.deck-fold:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:12px}
.deck-fold{display:grid;place-content:center;gap:4px;container-type:normal;border-radius:11%/8%;outline:2px dashed #cbc4b6;outline-offset:-2px;background:#ffffffaa;color:var(--muted);font-size:calc(var(--cw,140px) * .12);font-weight:900}
.deck-fold b{font-size:calc(var(--cw,140px) * .2);line-height:1;color:var(--accent)}
.deck-fold small{font-size:calc(var(--cw,140px) * .085);font-weight:700}
.deck-fold:hover{background:#fff}
.cgrid.only-deck{grid-template-columns:var(--cw,140px);justify-items:center;padding-block:10px}
.deck-hint{grid-column:1/-1;max-width:300px;text-align:center;font-size:13.5px;color:var(--muted);margin-top:14px!important}
@container (max-width:92px){.deck-open,.deck-sub{display:none}}
.logo-letter{font-size:20px;font-weight:900;color:var(--muted)}
.tc-logo .logo-letter{font-size:26cqw}
@media(max-width:600px){
.group{padding:12px 8px 10px;border-radius:20px}
.row{grid-template-columns:38px minmax(0,1fr) auto;column-gap:10px;padding:10px 10px 10px 10px}
.row .logo{width:38px;height:38px;border-radius:11px}
.row h3{font-size:14px}
.row .stamp{width:70px;height:44px;font-size:12.5px}
.row .go{padding:8px 12px;font-size:13px;min-height:36px}
}

/* 网页领取 / 客户端签到 */
.tag-mode{padding:1px 7px;border-radius:99px;font-weight:800}
.tag-mode.web{background:#eef4ff;color:#2f5fd0}
.tag-mode.client{background:#f3edff;color:#6b3fc4}
.tag-mode.auto{background:#e6f7f0;color:#0f7a52}
.go.client,.btn2.client{background:linear-gradient(135deg,#8b6cf6,#6d4be0);box-shadow:0 8px 16px -8px #6d4be0}
.client-tip{position:fixed;z-index:60;width:320px;max-width:calc(100vw - 24px);padding:14px 16px 12px;border-radius:16px;background:#1d1b2c;color:#fff;box-shadow:0 18px 40px -12px #1d1b2c99;font-size:13.5px;line-height:1.6;animation:pop .35s var(--spring)}
.client-tip b{display:block;font-size:14.5px;margin-right:26px}
.client-tip p{margin:4px 0 8px!important;color:#ddd8f5}
.client-tip div{display:flex;flex-wrap:wrap;gap:8px}
.client-tip a{padding:5px 12px;border-radius:99px;background:#fff;color:#1d1b2c;font-weight:800;font-size:13px;text-decoration:none}
.client-tip .client-confirm{padding:5px 12px;border:0;border-radius:99px;background:#ffffff1f;color:#fff;font:inherit;font-weight:800;cursor:pointer}
.client-tip .x{right:8px;top:8px;width:26px;height:26px;font-size:16px;background:#ffffff1a;color:#fff}
.go.auto,.btn2.auto{background:#fff;color:#0f7a52;box-shadow:inset 0 0 0 1.8px #2bb37c,0 6px 14px -10px #0f7a52}
.go.auto:hover{background:#effaf5}

/* 今日打卡 0/3 奖励 */
.cstat.big{position:relative}
.cstat-goal{--p:0;position:absolute;right:18px;top:50%;translate:0 -50%;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px 16px 10px 10px;border:0;border-radius:18px;cursor:pointer;font:inherit;text-align:left;
  background:#ffffffcc;box-shadow:inset 0 0 0 1.5px #ffd27a,0 8px 18px -12px #c47a00;transition:transform .25s var(--spring)}
.cstat-goal:hover{transform:translateY(-2px)}
.goal-ring{grid-row:1/3;position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:conic-gradient(#f5a400 calc(var(--p) * 360deg),#f3e6c8 0)}
.goal-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.goal-ring .tk-flat{position:relative;width:30px;height:30px}
.goal-txt{font-size:13px;font-weight:800;color:#7a4b00}
.goal-txt b{font-size:22px;color:#c47a00;font-variant-numeric:tabular-nums}
.cstat-goal small{font-size:11.5px;color:#8a6a2a;font-weight:700}
.cstat-goal.done{box-shadow:inset 0 0 0 1.5px #7fd3a6,0 8px 18px -12px #1f7a53}
.cstat-goal.done .goal-ring{background:conic-gradient(#2bb37c 360deg,#2bb37c 0)}
.cstat-goal.done .goal-txt b{color:#1f7a53}
@media(max-width:600px){.cstat-goal{right:12px;padding:8px 12px 8px 8px}.goal-ring{width:40px;height:40px}.goal-ring .tk-flat{width:24px;height:24px}.goal-txt b{font-size:18px}.cstat-goal small{display:none}}

.goal-ring .tk-flat{display:inline-block;border-radius:50%;background:url(/coin/front-s.webp) center/cover;box-shadow:0 0 0 1px #a8690a66}

/* 卡册和福利列表之间的检索状态条：很窄，只用 transform/opacity 做动效 */
.scanbar{display:flex;align-items:center;gap:10px;margin:-10px 0;padding:7px 16px;border-radius:99px;background:#ffffffcc;box-shadow:inset 0 0 0 1px #f0c24d66,0 6px 16px -12px #c47a00;font-size:13px;color:#8a5a00;overflow:hidden}
.scanbar b{flex:none;font-weight:800;white-space:nowrap}
.scan-dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:#f08a00}
.scan-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#f08a00;animation:scan-ping 1.4s ease-out infinite;will-change:transform,opacity}
@keyframes scan-ping{from{transform:scale(1);opacity:.7}to{transform:scale(3);opacity:0}}
.scan-ell i{font-style:normal;animation:scan-dots 1.4s infinite;opacity:.2}
.scan-ell i:nth-child(2){animation-delay:.2s}.scan-ell i:nth-child(3){animation-delay:.4s}
@keyframes scan-dots{0%,60%,100%{opacity:.2}30%{opacity:1}}
.scan-line{position:relative;flex:1;min-width:40px;height:2px;border-radius:99px;background:#f3e3c4;overflow:hidden}
.scan-line i{position:absolute;inset:0;width:30%;background:linear-gradient(90deg,transparent,#f08a00,transparent);animation:scan-sweep 1.8s linear infinite;will-change:transform}
@keyframes scan-sweep{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.scanbar small{flex:none;font-size:12px;color:#a8813a;white-space:nowrap}
.scanbar small:empty{display:none}
@media(max-width:600px){.scanbar{padding:6px 12px;gap:8px;font-size:12.5px}.scanbar small{display:none}}
@media(prefers-reduced-motion:reduce){.scan-dot::after,.scan-ell i,.scan-line i{animation:none}.scan-ell i{opacity:1}}