/* ===================== RESET ===================== */
*, *::before, *::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    outline: none;
    font-family: Number, Nunito, system-ui, 'PingFangSC-Regular', 'PingFang SC', "Noto Sans SC", sans-serif;
} 
body {
    margin: 0;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    height: 100vh;
    display: grid;
    grid-template-rows: 1fr auto;
}
a {
    color: inherit;
    text-decoration: none;
}
img {
    display: block;
    max-width: 100%;
    object-fit: cover;
}
img:not([src]) {
    visibility: hidden;
}
button, select {
    appearance: none;
    border: none;
    background: none;
    font-size: 1rem;
}
screen {
    background: var(--bg);
    display: flex;
    flex-direction: column;
    width: 100vw;
    align-items: stretch;
    gap: 15px;
    /* min-height: 100vh; */
    padding: 12px;
}
screen::after {
    content: '';
    height: 5vh;
}
::placeholder {
    color: var(--placeholder, #00000028);
}

input, select {
    border: none;
    font-size: 1rem;
}
.fade-in {
    animation: fade-in var(--duration) var(--delay, 0s) forwards;
}
.fade-out {
    --animation: fade-out;
    animation: var(--animation) var(--duration) both;
}


/* --- Header: 模仿示例，但更现代 --- */
.header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-xxl);
    background: linear-gradient(
        180deg,
        rgba(18, 22, 28, 0.95),
        rgba(18, 22, 28, 0.75)
    );
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    /* margin-bottom: 12px; */
    backdrop-filter: blur(10px);
}
.logo {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    /* background: radial-gradient(
        120% 120% at 10% 10%,
        var(--brand) 0%,
        var(--brand-600) 60%,
        var(--brand-700) 100%
    ); */
    box-shadow: 0 8px 22px rgba(108, 92, 231, 0.35);
    overflow: hidden;
}
.title {
    font-weight: 800;
    letter-spacing: 0.2px;
    font-size: var(--fs-lg);
}
.sub {
    font-size: var(--fs-xxs);
    color: var(--muted);
    margin-top: 2px;
}
.tabs {
    display: flex;
    gap: 8px;
}
.tab {
    padding: 6px 10px;
    background: var(--surface-2);
    /* border: 1px solid var(--border); */
    color: #c9d3ea;
    border-radius: 999px;
    font-size: var(--fs-xxs);
}
.tab.is-active {
    background: linear-gradient(180deg, var(--accent), #3a88ee);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(70, 166, 255, 0.45);
}

.badge {
    font-size: var(--fs-xxs);
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: #b7c2da;
}

/* --- Grid content --- */
.home-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
} 

/* --- Card / Tile --- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 12px;
    box-shadow: var(--glow);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.card::after {
    /* 顶部高光，更有质感 */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.040), transparent);
    pointer-events: none;
}
.card h3 {
    margin: 6px 0 6px;
    font-size: var(--fs-md);
    font-weight: 800;
    letter-spacing: 0.2px;
    display: flex;
    gap: 6px;
    align-items: center;
}
.card > p {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--muted);
}
.pill {
    font-size: var(--fs-xxs);
    padding: 2px 8px;
    color: #b8c2d9;
    align-self: stretch;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pill > span:first-child {
    border-radius: 99px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 4px 12px 4px 6px;
}
.pill > span:last-child {
    color: var(--info-color);
    /* font-size: 0.81rem; */
}
  /* --- Footer Tabbar --- */
footer{
    position: sticky;
    bottom:0;
    z-index: 20;
    padding: 8px 4px max(env(safe-area-inset-bottom), 8px);
    background: linear-gradient(180deg, rgba(13,15,19,.1), rgba(13,15,19,.6) 35%, rgba(13,15,19,.95));
    backdrop-filter: blur(8px) saturate(120%);
    border-top:1px solid var(--border);
    width: 100vw;
    left: 0;
}
.bar{display:grid;grid-template-columns: repeat(4, 1fr);gap:6px;}
.iconbtn{display:grid;place-items:center;gap: 2px;padding: 10px 0;border-radius:14px;color:#c5cfe6;font-size: var(--fs-xxs);transition: var(--duration, 0.25s);border: solid 1px transparent;}
.iconbtn .emoji{font-size: var(--emoji-md);}
.iconbtn.is-active{ color:#fff; background: linear-gradient(180deg, rgba(70,166,255,.2), rgba(70,166,255,.05)); border:1px solid rgba(70,166,255,.35); box-shadow: 0 6px 16px rgba(70,166,255,.35); }
.intro {
    grid-column: 1 / -1;
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
}



[stat=":finished"], [stat=":success"], [stat=":done"], [stat=":win"], [stat=":on"], 
[type=":welfare"], [type=":gift"], [type=":promote"], [type=":bonus"], [type=":salary"], [type=":win"],
[type=":done"], [type=":finished"] {
    color: #44bd32;
}
[stat=":rejected"], [stat=":lose"], [stat=":off"], [type=":lose"], [type=":bet"], [type=":rejected"] {
    color: #db1c22;    
}
[stat=":timeout"], [type=":timeout"] {
    color: #9c9c9c;
}