/* Extracted from 逗号开箱网.html.
* Transitional split file: app-shell layout, status cards, toast, honor and late-stage global patches.
*/
/* ===== style[32] id="v48-scroll-boundary-top-fix" ===== */
html, body {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
min-height: 100% !important;
overflow: hidden !important;
}
body {
background: transparent !important;
}
.app-shell {
position: fixed !important;
inset: 0 !important;
box-sizing: border-box !important;
width: 100vw !important;
max-width: none !important;
margin: 0 !important;
padding-top: 0 !important;
padding-bottom: 120px !important;
padding-left: max(20px, calc((100vw - 1344px) / 2)) !important;
padding-right: max(20px, calc((100vw - 1344px) / 2)) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior: contain !important;
scrollbar-gutter: stable !important;
}
@supports (height: 100dvh) {
.app-shell {
height: 100dvh !important;
}
}
@supports not (height: 100dvh) {
.app-shell {
height: 100vh !important;
}
}
@media (max-width: 768px) {
.app-shell {
padding-left: 12px !important;
padding-right: 12px !important;
padding-bottom: 110px !important;
}
}
/* ===== style[33] id="v49-entry-bgm-sign-data-fix" ===== */
.top-nav .nav-btn.breathing-entry{
position: relative;
overflow: visible !important;
animation: v49EntryBreath 2.2s ease-in-out infinite;
}
.top-nav .nav-btn.breathing-entry::before{
content: "";
position: absolute;
inset: -2px;
border-radius: 16px;
background: linear-gradient(90deg, rgba(255,95,145,.88), rgba(116,118,255,.86), rgba(255,95,145,.88));
filter: blur(11px);
opacity: .34;
z-index: -1;
pointer-events: none;
animation: v49EntryHalo 2.2s ease-in-out infinite;
}
.top-nav .nav-btn.breathing-entry.active::before{
opacity: .5;
}
@keyframes v49EntryBreath{
0%,100%{
transform: translateY(0) scale(1);
filter: brightness(1);
box-shadow:
0 10px 22px rgba(0,0,0,.16),
0 0 0 rgba(255,95,145,0),
0 0 0 rgba(116,118,255,0);
}
50%{
transform: translateY(-1px) scale(1.02);
filter: brightness(1.08);
box-shadow:
0 12px 30px rgba(0,0,0,.22),
0 0 26px rgba(255,95,145,.28),
0 0 34px rgba(116,118,255,.20);
}
}
@keyframes v49EntryHalo{
0%,100%{opacity:.26; transform:scale(1);}
50%{opacity:.56; transform:scale(1.03);}
}
.home-top-grid{
align-items: start !important;
}
.sign-panel .section-title-row .section-mini{
display: none !important;
}
.streak-panel{
align-self: start !important;
}
.streak-panel .section-title-row{
align-items: flex-start !important;
}
.streak-panel .section-desc{
margin-bottom: 4px !important;
}
.streak-reward-row{
align-items: start !important;
}
.bgm-autoplay-note{
margin-top: 8px;
font-size: 12px;
line-height: 1.5;
color: rgba(255,255,255,.72);
display: none;
}
.bgm-autoplay-note.show{
display: block;
}
/* ===== style[34] id="v50-sign-panel-balance-fix" ===== */
.home-top-grid{
align-items: stretch !important;
}
.home-top-grid > .home-panel{
height: 100% !important;
}
.sign-panel,
.streak-panel{
display: flex !important;
flex-direction: column !important;
align-self: stretch !important;
}
.sign-panel .sign-choice-grid,
.streak-panel .streak-reward-row{
flex: 1 0 auto;
}
.streak-panel .section-title-row .section-mini,
.streak-panel .section-desc{
display: none !important;
}
.sign-panel .section-title-row .section-mini,
.sign-panel .section-desc{
display: none !important;
}
.sign-panel .sign-choice-card{
min-height: 112px !important;
gap: 10px !important;
}
.sign-panel .sign-choice-title{
font-size: 13px !important;
color: rgba(255,255,255,0.74) !important;
letter-spacing: .06em;
}
.sign-panel .sign-choice-value{
font-size: 20px !important;
}
.sign-panel .sign-choice-desc{
display: none !important;
}
/* ===== style[35] id="v51-sign-card-amount-inline" ===== */
.sign-panel .sign-choice-card{
justify-content: center !important;
}
.sign-panel .sign-choice-title.sign-choice-title--compact{
font-size: 15px !important;
font-weight: 900 !important;
color: #ffd966 !important;
letter-spacing: 0 !important;
line-height: 1.2 !important;
}
.sign-panel .sign-choice-value{
display: none !important;
}
/* ===== style[36] id="v52-sign-card-width-tune" ===== */
.home-top-grid{
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.38fr) !important;
}
.sign-panel .sign-choice-grid{
grid-template-columns: repeat(3, minmax(112px, 138px)) !important;
justify-content: center !important;
gap: 12px !important;
}
.sign-panel .sign-choice-card{
padding: 14px 12px !important;
}
.streak-panel .streak-reward-row{
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.streak-panel .streak-reward-card{
padding: 14px 12px !important;
}
/* ===== style[37] id="v53-sign-panel-edge-balance" ===== */
.sign-panel .sign-choice-grid{
width: 100% !important;
grid-template-columns: repeat(3, minmax(126px, 1fr)) !important;
justify-content: stretch !important;
gap: 12px !important;
}
.sign-panel .sign-choice-card{
width: 100% !important;
max-width: none !important;
}
.streak-panel .streak-reward-row{
width: 100% !important;
padding-inline: 10px !important;
box-sizing: border-box !important;
gap: 12px !important;
}
.streak-panel .streak-reward-card{
min-width: 0 !important;
}
/* ===== style[38] id="v54-streak-row-fill-balance" ===== */
.streak-panel .streak-reward-row{
padding-inline: 0 !important;
gap: 10px !important;
}
.streak-panel .streak-reward-card{
width: 100% !important;
max-width: none !important;
padding-inline: 10px !important;
}
/* ===== style[39] id="v56-remove-global-system-card" ===== */
.global-system-card{display:none !important;}
/* ===== style[40] id="v57-income-honor-style" ===== */
.global-income-card{position:relative;overflow:hidden;padding:22px 24px;border-radius:22px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(19,23,38,.94),rgba(13,16,28,.94));box-shadow:0 16px 44px rgba(0,0,0,.24);transition:box-shadow .25s ease,border-color .25s ease,filter .25s ease}
.global-income-card::before{content:"";position:absolute;inset:-1px;border-radius:22px;pointer-events:none;background:radial-gradient(circle at top right,rgba(141,165,255,.18),transparent 30%),radial-gradient(circle at left bottom,rgba(141,165,255,.12),transparent 28%);transition:background .25s ease,opacity .25s ease}
.global-income-card.positive{border-color:rgba(46,213,115,.34);box-shadow:0 0 0 1px rgba(46,213,115,.08),0 18px 46px rgba(9,20,13,.44),0 0 44px rgba(46,213,115,.18)}
.global-income-card.positive::before{background:radial-gradient(circle at top right,rgba(46,213,115,.34),transparent 34%),radial-gradient(circle at left bottom,rgba(46,213,115,.20),transparent 30%)}
.global-income-card.negative{border-color:rgba(255,71,87,.34);box-shadow:0 0 0 1px rgba(255,71,87,.08),0 18px 46px rgba(28,10,12,.48),0 0 44px rgba(255,71,87,.18)}
.global-income-card.negative::before{background:radial-gradient(circle at top right,rgba(255,71,87,.34),transparent 34%),radial-gradient(circle at left bottom,rgba(255,71,87,.20),transparent 30%)}
.global-income-card.neutral{border-color:rgba(141,165,255,.22);box-shadow:0 16px 44px rgba(0,0,0,.24)}
.global-income-card.neutral::before{background:radial-gradient(circle at top right,rgba(141,165,255,.18),transparent 30%),radial-gradient(circle at left bottom,rgba(141,165,255,.12),transparent 28%)}
.runtime-status-infra[hidden]{display:none !important}
#today-gold-card.global-income-card{padding:18px 22px;min-height:112px;border-radius:18px;display:flex;flex-direction:column;justify-content:space-between}
#today-gold-card .global-system-head{align-items:center;margin-bottom:10px}
#today-gold-card .global-system-title{margin-bottom:0}
#today-gold-card #today-gold-note{display:none !important}
#today-gold-card .today-gold-pill{padding:6px 10px;font-size:11px}
#today-gold-card .global-income-value{margin-top:0;font-size:22px;line-height:1.2}
.today-gold-pill{padding:8px 12px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.08em;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#dfe7ff}
.today-gold-pill.positive{background:rgba(46,213,115,.14);border-color:rgba(46,213,115,.35);color:#7dffb1}
.today-gold-pill.negative{background:rgba(255,71,87,.14);border-color:rgba(255,71,87,.35);color:#ff9da6}
.today-gold-pill.neutral{background:rgba(141,165,255,.14);border-color:rgba(141,165,255,.28);color:#d7e0ff}
.global-income-value{margin-top:12px;font-size:32px;font-weight:1000;line-height:1.1;letter-spacing:.02em}
.global-income-value.positive{color:#7dffb1;text-shadow:0 0 18px rgba(46,213,115,.18)}
.global-income-value.negative{color:#ff7d88;text-shadow:0 0 18px rgba(255,71,87,.14)}
.global-income-value.neutral{color:#d7e0ff}
.honor-card{position:relative;display:flex;flex-direction:column;gap:14px;align-items:stretch;min-height:252px;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease}
.honor-card:hover{transform:translateY(-2px)}
.honor-card.claimable{box-shadow:0 0 0 1px rgba(125,255,177,.22),0 18px 42px rgba(24,122,78,.18);background:linear-gradient(180deg,rgba(20,34,29,.97),rgba(15,24,24,.97))}
.honor-card.claimable::before{content:"可领取";position:absolute;top:14px;right:14px;padding:6px 10px;border-radius:999px;background:rgba(46,213,115,.16);border:1px solid rgba(46,213,115,.34);color:#7dffb1;font-size:11px;font-weight:1000;letter-spacing:.08em}
.honor-card.locked{background:linear-gradient(180deg,rgba(26,29,46,.96),rgba(18,20,34,.96))}
.honor-card.claimed{opacity:.58;filter:saturate(.72)}
.honor-card.claimed::before{content:"已领取";position:absolute;top:14px;right:14px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.7);font-size:11px;font-weight:1000;letter-spacing:.08em}
.honor-card-top{display:flex;gap:14px;align-items:flex-start}
.honor-meta{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.honor-meta h4{font-size:18px;margin:0}.honor-meta p{margin:0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.72)}
.honor-chip-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.honor-reward-line{margin:0 !important;color:#8ea7ff !important;font-weight:900}
.honor-status-text{font-size:12px;font-weight:900;letter-spacing:.02em}.honor-status-text.claimable{color:#7dffb1}.honor-status-text.locked{color:#d7e0ff}.honor-status-text.claimed{color:rgba(255,255,255,.7)}
.honor-progress-wrap{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.honor-progress-row{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:12px;color:rgba(255,255,255,.76);font-weight:800}
.honor-progress-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.honor-progress-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#7b5bff,#8ea7ff,#76f0d6);box-shadow:0 0 16px rgba(123,91,255,.25)}
.honor-card.claimable .honor-progress-bar span{background:linear-gradient(90deg,#2ed573,#7dffb1,#c8ffd9);box-shadow:0 0 16px rgba(46,213,115,.28)}
.honor-action-btn{margin-top:0}.honor-card.claimed .honor-action-btn{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.08));color:rgba(255,255,255,.78)}
/* ===== style[41] id="v58-close-debug-entry" ===== */
#debug-btn,
#debug-page,
.debug-nav-btn,
#debug-modal,
.debug-modal {
display: none !important;
}
/* ===== style[42] id="v61-honor-toast-upgrade-style" ===== */
#honor-toast{
position:fixed;
top:88px;
left:50%;
transform:translateX(-50%) translateY(-12px);
min-width:min(88vw,420px);
max-width:min(92vw,520px);
padding:16px 18px;
border-radius:18px;
background:linear-gradient(180deg,rgba(24,30,48,.97),rgba(14,18,30,.97));
border:1px solid rgba(141,167,255,.24);
box-shadow:0 20px 46px rgba(0,0,0,.38),0 0 0 1px rgba(123,91,255,.10) inset;
z-index:99999;
opacity:0;
pointer-events:none;
transition:opacity .22s ease,transform .22s ease;
color:#fff;
}
#honor-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#honor-toast .honor-toast-kicker{font-size:12px;font-weight:1000;letter-spacing:.08em;color:#8ea7ff;text-transform:uppercase;margin-bottom:4px}
#honor-toast .honor-toast-title{font-size:20px;font-weight:1000;line-height:1.2;margin-bottom:6px;color:#fff}
#honor-toast .honor-toast-desc{font-size:13px;line-height:1.6;color:rgba(255,255,255,.82)}
/* ===== style[43] id="v62-unified-toast-style" ===== */
#unified-toast-hub{
position:fixed;
top:18px;
left:50%;
transform:translateX(-50%);
width:min(92vw,680px);
display:flex;
flex-direction:column;
gap:12px;
z-index:2000000;
pointer-events:none;
}
.unified-toast{
--toast-bg-1: rgba(21,26,44,.96);
--toast-bg-2: rgba(15,21,39,.94);
--toast-border: rgba(255,255,255,.08);
--toast-shadow: rgba(0,0,0,.38);
--toast-kicker: #8ea7ff;
--toast-title: #fff;
--toast-desc: rgba(255,255,255,.84);
--toast-glow-1: rgba(89,219,160,.18);
--toast-glow-2: rgba(103,130,255,.12);
background:linear-gradient(135deg, var(--toast-bg-1), var(--toast-bg-2));
border:1px solid var(--toast-border);
border-radius:22px;
box-shadow:0 20px 54px var(--toast-shadow), inset 0 1px 0 rgba(255,255,255,.04);
padding:18px 22px;
color:#fff;
opacity:0;
transform:translateY(-12px) scale(.985);
transition:opacity .22s ease, transform .22s ease;
overflow:hidden;
position:relative;
}
.unified-toast::before{
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle at top right, var(--toast-glow-1), transparent 42%), radial-gradient(circle at bottom left, var(--toast-glow-2), transparent 44%);
pointer-events:none;
}
.unified-toast.show{opacity:1;transform:translateY(0) scale(1);}
.unified-toast.hide{opacity:0;transform:translateY(-12px) scale(.985);}
.unified-toast-kicker{position:relative;font-size:12px;font-weight:1000;letter-spacing:.08em;color:var(--toast-kicker);text-transform:uppercase;margin-bottom:4px;}
.unified-toast-title{position:relative;font-size:18px;font-weight:1000;line-height:1.25;color:var(--toast-title);word-break:break-word;}
.unified-toast-desc{position:relative;font-size:13px;line-height:1.55;color:var(--toast-desc);margin-top:6px;word-break:break-word;}
.unified-toast-progress{position:relative;margin-top:12px;}
.unified-toast-progress-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:900;color:rgba(255,255,255,.92);margin-bottom:8px;}
.unified-toast-progress-label{color:rgba(255,255,255,.78);font-weight:800;}
.unified-toast-progress-value{color:#fff;}
.unified-toast-progress-bar{height:12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);overflow:hidden;box-shadow:inset 0 1px 4px rgba(0,0,0,.18);}
.unified-toast-progress-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#c5984c,#f1c97b 48%,#f9e9bb);box-shadow:0 0 14px rgba(241,201,123,.18);}
.unified-toast--honor{--toast-bg-1: rgba(15,33,31,.96);--toast-bg-2: rgba(15,20,39,.94);--toast-border: rgba(103,226,175,.22);--toast-shadow: rgba(0,0,0,.40);--toast-kicker:#8ff4bf;--toast-glow-1: rgba(102,224,170,.24);--toast-glow-2: rgba(103,130,255,.18);}
.unified-toast--reward{--toast-bg-1: rgba(42,26,16,.96);--toast-bg-2: rgba(38,14,32,.94);--toast-border: rgba(255,208,96,.26);--toast-kicker:#ffd46b;--toast-glow-1: rgba(255,214,107,.25);--toast-glow-2: rgba(255,121,121,.18);}
.unified-toast--guess-info,.unified-toast--guess-open,.unified-toast--guess-refresh,.unified-toast--guess-settle,.unified-toast--guess-rest,.unified-toast--guess-cancel,.unified-toast--guess-lock,.unified-toast--guess{--toast-bg-1: rgba(18,28,52,.97);--toast-bg-2: rgba(29,16,46,.94);--toast-border: rgba(109,143,255,.24);--toast-kicker:#90b7ff;--toast-glow-1: rgba(115,157,255,.22);--toast-glow-2: rgba(196,108,255,.14);}
.unified-toast--guess-open{--toast-bg-1: rgba(17,33,56,.97);--toast-bg-2: rgba(23,27,58,.94);--toast-border: rgba(92,178,255,.26);--toast-kicker:#78d6ff;--toast-glow-1: rgba(99,201,255,.24);--toast-glow-2: rgba(110,145,255,.16);}
.unified-toast--guess-refresh{--toast-bg-1: rgba(21,28,58,.97);--toast-bg-2: rgba(31,17,51,.94);--toast-border: rgba(154,123,255,.24);--toast-kicker:#b29bff;--toast-glow-1: rgba(173,110,255,.22);--toast-glow-2: rgba(99,201,255,.16);}
.unified-toast--guess-settle{--toast-bg-1: rgba(31,25,54,.97);--toast-bg-2: rgba(24,17,41,.94);--toast-border: rgba(178,130,255,.24);--toast-kicker:#c6a0ff;--toast-glow-1: rgba(173,110,255,.24);--toast-glow-2: rgba(110,145,255,.14);}
.unified-toast--guess-rest{--toast-bg-1: rgba(48,32,16,.97);--toast-bg-2: rgba(37,21,18,.94);--toast-border: rgba(255,191,109,.24);--toast-kicker:#ffd08a;--toast-glow-1: rgba(255,196,105,.22);--toast-glow-2: rgba(255,121,121,.12);}
.unified-toast--guess-cancel{--toast-bg-1: rgba(44,24,26,.97);--toast-bg-2: rgba(31,18,31,.94);--toast-border: rgba(255,138,138,.24);--toast-kicker:#ffb1b1;--toast-glow-1: rgba(255,121,121,.20);--toast-glow-2: rgba(173,110,255,.12);}
.unified-toast--guess-lock{--toast-bg-1: rgba(18,39,43,.97);--toast-bg-2: rgba(17,22,38,.94);--toast-border: rgba(103,231,208,.24);--toast-kicker:#8ff0da;--toast-glow-1: rgba(91,233,202,.22);--toast-glow-2: rgba(110,145,255,.14);}
.unified-toast--guess-win{--toast-bg-1: rgba(12,49,31,.98);--toast-bg-2: rgba(15,25,38,.95);--toast-border: rgba(103,239,170,.32);--toast-kicker:#90ffbf;--toast-glow-1: rgba(102,224,170,.28);--toast-glow-2: rgba(122,255,203,.16);}
.unified-toast--guess-lose{--toast-bg-1: rgba(58,19,24,.98);--toast-bg-2: rgba(27,16,31,.95);--toast-border: rgba(255,118,118,.30);--toast-kicker:#ff9f9f;--toast-glow-1: rgba(255,117,117,.26);--toast-glow-2: rgba(255,162,122,.14);}
.unified-toast--guess-alert{--toast-bg-1: rgba(54,36,10,.98);--toast-bg-2: rgba(35,20,18,.95);--toast-border: rgba(255,210,96,.30);--toast-kicker:#ffe07c;--toast-glow-1: rgba(255,214,107,.28);--toast-glow-2: rgba(255,121,121,.12);}
.unified-toast--fx,.unified-toast--fx-info{--toast-bg-1: rgba(17,28,48,.97);--toast-bg-2: rgba(26,18,48,.94);--toast-border: rgba(120,176,255,.22);--toast-kicker:#93cbff;--toast-glow-1: rgba(99,201,255,.20);--toast-glow-2: rgba(173,110,255,.16);}
.unified-toast--fx-start{--toast-bg-1: rgba(35,17,57,.98);--toast-bg-2: rgba(20,23,51,.95);--toast-border: rgba(196,120,255,.28);--toast-kicker:#d8a1ff;--toast-glow-1: rgba(173,110,255,.28);--toast-glow-2: rgba(99,201,255,.18);}
.unified-toast--fx-end{--toast-bg-1: rgba(12,35,39,.98);--toast-bg-2: rgba(16,21,42,.95);--toast-border: rgba(96,223,198,.28);--toast-kicker:#8ff2d8;--toast-glow-1: rgba(91,233,202,.25);--toast-glow-2: rgba(99,201,255,.14);}
#honor-toast,#guess-toast,#hidden-fx-toast{visibility:hidden !important;opacity:0 !important;pointer-events:none !important;}