*,*::before,*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--yellow-50: #fefce8;
--yellow-500: #eab308;
--green-50: #f0fdf4;
--teal-50: #f0fdfa;
--teal-500: #14b8a6;
--blue-100: #dbeafe;
--indigo-50: #eef2ff;
--indigo-500: #6366f1;
--purple-100: #f3e8ff;
--pink-50: #fdf2f8;
--pink-500: #ec4899;
--cyan-50: #ecfeff;
--orange-400: #fb923c;
--green-500: #22c55e;
--blue-50: #eff6ff;
--cyan-500: #06b6d4;
--shadow-xl: 0 20px 25px rgba(0,0,0,.1),0 10px 10px rgba(0,0,0,.04);
--transition-slow: 0.35s ease;
--purple-600: #9333ea;
--orange-500: #f97316;
--purple-50: #faf5ff;
--purple-500: #a855f7;
--gray-300: #d1d5db;
--blue-500: #3b82f6;
--blue-600: #2563eb;
--orange-50: #fff7ed;
--orange-100: #ffedd5;
--orange-200: #fed7aa;
--orange-600: #ea580c;
--brand-50: #e6faf6;
--brand-100: #b2f2e6;
--brand-500: #00bfa5;
--brand-600: #00a68f;
--brand-700: #008c79;
--white: #fff;
--black: #000;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--red-50: #fef2f2;
--red-500: #ef4444;
--red-600: #dc2626;
--shadow-sm: 0 1px 2px rgba(0,0,0,.05);
--shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
--shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
--shadow-lg: 0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);
--radius-sm: 6px;
--radius: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-full: 9999px;
--transition: 0.2s ease;
--font: "PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
--max-w: 1200px;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font);
color: var(--gray-700);
background: var(--gray-50);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
display: block;
}
ul {
list-style: none;
}
button {
cursor: pointer;
border: none;
font-family: inherit;
}
.container {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 1rem;
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
.items-start {
align-items: flex-start;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-2 {
gap: 0.5rem;
}
.gap-3 {
gap: 0.875rem;
}
.gap-4 {
gap: 1rem;
}
.gap-5 {
gap: 1.25rem;
}
.gap-6 {
gap: 1.5rem;
}
.flex-1 {
flex: 1;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.min-w-0 {
min-width: 0;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.inset-0 {
inset: 0;
}
.z-10 {
z-index: 10;
}
.z-20 {
z-index: 20;
}
.z-50 {
z-index: 50;
}
.z-100 {
z-index: 100;
}
.hidden {
display: none;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.inline-flex {
display: inline-flex;
}
.w-full {
width: 100%;
}
.h-full {
height: 100%;
}
.object-cover {
object-fit: cover;
}
.overflow-hidden {
overflow: hidden;
}
.grid {
display: grid;
}
.grid-cols-1 {
grid-template-columns: repeat(1,1fr);
}
.grid-cols-2 {
grid-template-columns: repeat(2,1fr);
}
.grid-cols-4 {
grid-template-columns: repeat(4,1fr);
}
@media (min-width:640px) {
.sm\:grid-cols-2 {
grid-template-columns: repeat(2,1fr);
}
.sm\:grid-cols-4 {
grid-template-columns: repeat(4,1fr);
}
.sm\:grid-cols-6 {
grid-template-columns: repeat(6,1fr);
}
}
@media (min-width:768px) {
.md\:flex {
display: flex;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2,1fr);
}
.md\:grid-cols-4 {
grid-template-columns: repeat(4,1fr);
}
.md\:grid-cols-6 {
grid-template-columns: repeat(6,1fr);
}
.md\:grid-cols-8 {
grid-template-columns: repeat(8,1fr);
}
.md\:flex-row {
flex-direction: row;
}
.md\:text-left {
text-align: left;
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3,1fr);
}
}
@media (min-width:1024px) {
.lg\:grid-cols-4 {
grid-template-columns: repeat(4,1fr);
}
.lg\:grid-cols-8 {
grid-template-columns: repeat(8,1fr);
}
.lg\:grid-cols-10 {
grid-template-columns: repeat(10,1fr);
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3,1fr);
}
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-3 {
margin-top: 0.875rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-5 {
margin-top: 1.25rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-0\.5 {
margin-top: 0.125rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 0.875rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-5 {
margin-bottom: 1.25rem;
}
.mb-0\.5 {
margin-bottom: 0.125rem;
}
.mb-1\.5 {
margin-bottom: 0.375rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.ml-auto {
margin-left: auto;
}
.mr-2 {
margin-right: 0.5rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.p-2 {
padding: 0.5rem;
}
.p-3 {
padding: 0.875rem;
}
.p-4 {
padding: 1rem;
}
.p-5 {
padding: 1.25rem;
}
.p-6 {
padding: 1.5rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-3 {
padding-left: 0.875rem;
padding-right: 0.875rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.px-7 {
padding-left: 1.75rem;
padding-right: 1.75rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.py-3 {
padding-top: 0.875rem;
padding-bottom: 0.875rem;
}
.py-3\.5 {
padding-top: 0.875rem;
padding-bottom: 0.875rem;
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pl-3 {
padding-left: 0.875rem;
}
.space-y-2>*+* {
margin-top: 0.5rem;
}
.space-y-3>*+* {
margin-top: 0.875rem;
}
.space-y-8>*+* {
margin-top: 2rem;
}
.text-xs {
font-size: 0.75rem;
}
.text-sm {
font-size: 0.875rem;
}
.text-lg {
font-size: 1.125rem;
}
.text-xl {
font-size: 1.25rem;
}
.text-2xl {
font-size: 1.5rem;
}
.text-3xl {
font-size: 1.875rem;
}
.font-medium {
font-weight: 500;
}
.font-bold {
font-weight: 700;
}
.tracking-tight {
letter-spacing: -0.025em;
}
.leading-relaxed {
line-height: 1.625;
}
.text-white {
color: var(--white);
}
.text-black {
color: var(--black);
}
.text-gray-400 {
color: var(--gray-400);
}
.text-gray-500 {
color: var(--gray-500);
}
.text-gray-600 {
color: var(--gray-600);
}
.text-gray-700 {
color: var(--gray-700);
}
.text-gray-800 {
color: var(--gray-800);
}
.text-brand-500 {
color: var(--brand-500);
}
.text-brand-600 {
color: var(--brand-600);
}
.text-brand-700 {
color: var(--brand-700);
}
.text-blue-500 {
color: var(--blue-500);
}
.text-green-500 {
color: var(--green-500);
}
.text-red-500 {
color: var(--red-500);
}
.text-orange-500 {
color: var(--orange-500);
}
.text-purple-500 {
color: var(--purple-500);
}
.text-cyan-500 {
color: var(--cyan-500);
}
.text-yellow-500 {
color: var(--yellow-500);
}
.text-indigo-500 {
color: var(--indigo-500);
}
.text-pink-500 {
color: var(--pink-500);
}
.text-teal-500 {
color: var(--teal-500);
}
.bg-white {
background: var(--white);
}
.bg-gray-50 {
background: var(--gray-50);
}
.bg-gray-100 {
background: var(--gray-100);
}
.bg-gray-200 {
background: var(--gray-200);
}
.bg-gray-800 {
background: var(--gray-800);
}
.bg-brand-500 {
background: var(--brand-500);
}
.bg-brand-600 {
background: var(--brand-600);
}
.bg-brand-700 {
background: var(--brand-700);
}
.bg-blue-50 {
background: var(--blue-50);
}
.bg-red-50 {
background: var(--red-50);
}
.bg-green-50 {
background: var(--green-50);
}
.bg-orange-50 {
background: var(--orange-50);
}
.bg-purple-50 {
background: var(--purple-50);
}
.bg-cyan-50 {
background: var(--cyan-50);
}
.bg-yellow-50 {
background: var(--yellow-50);
}
.bg-indigo-50 {
background: var(--indigo-50);
}
.bg-pink-50 {
background: var(--pink-50);
}
.bg-teal-50 {
background: var(--teal-50);
}
.rounded {
border-radius: var(--radius);
}
.rounded-lg {
border-radius: var(--radius-lg);
}
.rounded-xl {
border-radius: var(--radius-xl);
}
.rounded-2xl {
border-radius: var(--radius-2xl);
}
.rounded-full {
border-radius: var(--radius-full);
}
.border {
border: 1px solid var(--gray-200);
}
.border-2 {
border-width: 2px;
}
.border-b {
border-bottom: 1px solid var(--gray-200);
}
.border-l-4 {
border-left: 4px solid;
}
.border-gray-200 {
border-color: var(--gray-200);
}
.border-brand-500 {
border-color: var(--brand-500);
}
.shadow {
box-shadow: var(--shadow);
}
.shadow-sm {
box-shadow: var(--shadow-sm);
}
.shadow-md {
box-shadow: var(--shadow-md);
}
.shadow-lg {
box-shadow: var(--shadow-lg);
}
.shadow-xl {
box-shadow: var(--shadow-xl);
}
.transition {
transition: all var(--transition);
}
.transition-slow {
transition: all var(--transition-slow);
}
.transition-transform {
transition: transform var(--transition-slow);
}
.hover\:text-brand-600:hover {
color: var(--brand-600);
}
.hover\:text-white:hover {
color: var(--white);
}
.hover\:bg-brand-50:hover {
background: var(--brand-50);
}
.hover\:bg-brand-600:hover {
background: var(--brand-600);
}
.hover\:bg-gray-50:hover {
background: var(--gray-50);
}
.hover\:bg-gray-100:hover {
background: var(--gray-100);
}
.hover\:border-brand-500:hover {
border-color: var(--brand-500);
}
.hover\:shadow-md:hover {
box-shadow: var(--shadow-md);
}
.hover\:shadow-xl:hover {
box-shadow: var(--shadow-xl);
}
.hover\:scale-110:hover {
transform: scale(1.1);
}
.group:hover .group-hover\:text-brand-600 {
color: var(--brand-600);
}
.group:hover .group-hover\:translate-x-0\.5 {
transform: translateX(2px);
}
.group:hover .group-hover\:shadow-xl {
box-shadow: var(--shadow-xl);
}
.group:hover .group-hover\:scale-105 {
transform: scale(1.05);
}
.pointer-events-none {
pointer-events: none;
}
.pointer-events-auto {
pointer-events: auto;
}
.opacity-90 {
opacity: 0.9;
}
.-translate-x-1\/2 {
transform: translateX(-50%);
}
.translate-y-0 {
transform: translateY(0);
}
.top-bar {
background: linear-gradient(135deg,#0f2027,#203a43,#2c5364);
font-size: 0.75rem;
color: rgba(255,255,255,0.6);
padding: 3px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.top-bar a {
color: rgba(255,255,255,0.55);
transition: color 0.2s;
font-size: 0.7rem;
}
.top-bar a:hover {
color: var(--brand-500);
}
.top-bar .tb-brand {
color: var(--brand-500);
font-weight: 600;
}
.site-header {
background: var(--white);
padding: 1.25rem 0 1rem;
position: relative;
}
.logo {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
}
.logo-icon {
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 3px 12px rgba(0,166,143,0.25);
transition: all 0.3s;
display: flex;
}
.logo-icon:hover {
transform: scale(1.08) rotate(-3deg);
box-shadow: 0 6px 24px rgba(0,166,143,0.45);
}
.logo-icon-svg {
width: 100%;
height: 100%;
display: block;
}
.logo-text {
display: flex;
flex-direction: column;
gap: 1px;
}
.logo-text h1,
.logo-text .logo-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--gray-800);
letter-spacing: -0.01em;
line-height: 1.2;
}
.logo-text h1 .brand,
.logo-text .logo-title .brand {
color: var(--brand-600);
font-weight: 800;
}
.logo-text p {
font-size: 0.75rem;
color: var(--gray-400);
letter-spacing: 0.5px;
}
.search-wrap {
flex: 1;
max-width: 600px;
}
.search-box {
box-shadow: none;
display: flex;
border-radius: var(--radius-full);
overflow: hidden;
border: 1.5px solid var(--gray-200);
background: var(--gray-50);
transition: all 0.25s;
}
.search-box:focus-within {
background: var(--white);
border-color: var(--brand-500);
box-shadow: 0 0 0 3px rgba(0,191,165,0.12);
}
.search-box input {
flex: 1;
padding: 0.7rem 1.25rem;
outline: none;
border: none;
background: transparent;
font-size: 0.875rem;
color: var(--gray-700);
}
.search-box input::placeholder {
color: var(--gray-400);
}
.search-box button {
background: linear-gradient(135deg,var(--brand-500),var(--brand-600));
color: var(--white);
padding: 0.7rem 1.5rem;
font-weight: 600;
font-size: 0.875rem;
transition: all 0.3s;
border-radius: var(--radius-full);
margin: 3px;
}
.search-box button:hover {
background: linear-gradient(135deg,var(--brand-600),var(--brand-700));
box-shadow: 0 4px 12px rgba(0,191,165,0.3);
}
.search-hot {
margin-top: 0.5rem;
font-size: 0.75rem;
color: var(--gray-400);
padding: 0 0.25rem;
}
.search-hot a {
margin-left: 0.5rem;
}
.search-hot a:hover {
color: var(--brand-600);
}
.quick-link {
display: flex;
flex-direction: column;
align-items: center;
font-size: 0.7rem;
color: var(--gray-400);
transition: all 0.25s;
padding: 0.375rem 0.625rem;
border-radius: var(--radius-lg);
}
.quick-link:hover {
transform: translateY(-1px);
color: var(--brand-600);
background: var(--brand-50);
}
.quick-link .ql-icon {
width: 32px;
height: 32px;
border-radius: var(--radius);
background: var(--gray-50);
border: 1px solid var(--gray-200);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
transition: all 0.25s;
margin-bottom: 2px;
}
.quick-link:hover .ql-icon {
background: var(--brand-50);
border-color: var(--brand-500);
transform: translateY(-2px);
}
.nav-main {
background: linear-gradient(135deg,#00897b,#00a68f 40%,#00bfa5);
color: var(--white);
position: sticky;
top: 0;
z-index: 50;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.nav-item {
position: relative;
}
.nav-item>a {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.7rem 1.6rem;
font-size: 1.0rem;
font-weight: 500;
color: rgba(255,255,255,0.92);
transition: all 0.2s;
white-space: nowrap;
border-radius: var(--radius);
margin: 2px 3px;
}
.nav-item>a:hover,.nav-item>a.active {
background: rgba(255,255,255,0.15);
color: #fff;
}
.nav-item>a.active {
border-radius: var(--radius);
background: rgba(255,255,255,0.2);
color: #fff;
}
.nav-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
background: var(--white);
min-width: 140px;
border-radius: var(--radius-lg);
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
overflow: hidden;
z-index: 100;
}
.nav-item:hover .nav-dropdown {
display: block;
animation: fadeDown 0.2s ease;
}
.nav-item>a.has-sub::after {
vertical-align: middle;
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid rgba(255,255,255,0.7);
margin-left: 2px;
}
.nav-dropdown a {
font-weight: 400;
display: block;
padding: 10px 18px;
color: #555;
font-size: 0.75rem;
transition: all 0.15s;
}
.nav-dropdown a:hover {
background: var(--brand-50);
color: var(--brand-500);
}
.carousel {
position: relative;
overflow: hidden;
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
height: 340px;
}
.carousel-track {
display: flex;
height: 100%;
transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}
.carousel-slide {
min-width: 100%;
position: relative;
background: #1f2a44;
}
.carousel-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.carousel-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to top,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.4) 40%,rgba(0,0,0,0.1) 100%);
pointer-events: none;
}
.carousel-content {
position: absolute;
bottom: 0;
left: 0;
padding: 1.75rem;
color: var(--white);
pointer-events: none;
z-index: 5;
}
.carousel-tag {
display: inline-block;
font-size: 0.75rem;
padding: 0.25rem 0.875rem;
border-radius: var(--radius-full);
margin-bottom: 0.5rem;
font-weight: 500;
}
.carousel-tag.hero {
background: var(--brand-500);
}
.carousel-tag.update {
background: #eab308;
color: #000;
}
.carousel-tag.event {
background: #ef4444;
}
.carousel-content h2 {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.35rem;
}
.carousel-content p {
font-size: 0.9rem;
opacity: 0.9;
margin-bottom: 1rem;
}
.carousel-content .carousel-btn,.carousel-content a.carousel-btn {
background: var(--white);
color: var(--brand-600);
padding: 0.5rem 1.25rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
pointer-events: auto;
cursor: pointer;
transition: all var(--transition);
}
.carousel-content .carousel-btn:hover,.carousel-content a.carousel-btn:hover {
background: #f0fdfa;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.carousel-arrow {
position: absolute;
top: 50%;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
color: #fff;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
z-index: 10;
backdrop-filter: blur(8px);
border: none;
opacity: 0;
transform: translateY(-50%) scale(0.9);
}
.carousel:hover .carousel-arrow {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.carousel-arrow:hover {
background: rgba(255,255,255,0.35);
transform: translateY(-50%) scale(1.15) !important;
}
.carousel-arrow.prev {
left: 12px;
}
.carousel-arrow.next {
right: 12px;
}
.carousel-dots {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 20;
}
.carousel-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255,255,255,0.4);
cursor: pointer;
transition: all 0.3s;
border: none;
}
.carousel-dot.active {
width: 28px;
border-radius: 5px;
background: var(--brand-500);
}
.app-icon {
width: var(--icon-size, 56px);
height: var(--icon-size, 56px);
border-radius: var(--radius-2xl);
object-fit: cover;
display: block;
flex-shrink: 0;
background: var(--gray-200);
box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.app-icon span {
display: none;
}
.editor-card .app-icon {
width: 64px;
height: 64px;
}
.side-update-icon {
width: 44px;
height: 44px;
border-radius: 50%;
flex-shrink: 0;
display: block;
object-fit: cover;
border: 2px solid rgba(255,255,255,0.45);
box-shadow: 0 4px 12px rgba(0,0,0,0.12),inset 0 1px 0 rgba(255,255,255,0.25);
background: var(--gray-200);
transition: all 0.3s;
}
.rank-icon {
width: 44px;
height: 44px;
border-radius: var(--radius-lg);
object-fit: cover;
display: block;
flex-shrink: 0;
background: var(--gray-200);
}
.update-card .app-icon {
object-fit: cover;
width: 52px;
height: 52px;
flex-shrink: 0;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.75rem;
color: #fff;
transition: transform 0.3s;
}
.hero-grid {
display: grid;
grid-template-columns: 6fr 6fr;
gap: 1.25rem;
align-items: stretch;
}
.hero-left {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.hot-picks {
background: var(--white);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow);
padding: 1rem 1.25rem;
flex: 1;
display: flex;
flex-direction: column;
}
.hot-picks-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.875rem;
}
.hot-picks-title {
font-weight: 700;
color: var(--gray-800);
font-size: 0.95rem;
}
.hot-picks-more {
font-size: 0.75rem;
color: var(--gray-400);
text-decoration: none;
transition: color 0.2s;
}
.hot-picks-more:hover {
color: var(--brand-600);
}
.hot-picks-grid {
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 0.625rem;
flex: 1;
}
.hot-pick-item {
display: flex;
align-items: center;
gap: 0.875rem;
padding: 0.7rem 0.8rem;
border-radius: var(--radius-xl);
text-decoration: none;
transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
background: var(--hp-bg, var(--gray-50));
position: relative;
overflow: hidden;
}
.hot-pick-item::after {
content: "";
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--hp-accent, var(--brand-500));
opacity: 0;
transition: all 0.3s;
mask-image: url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ viewBox=\'0\ 0\ 24\ 24\'%3E%3Cpath\ d=\'M19\ 9l-7\ 7-7-7\'\ stroke=\'white\'\ stroke-width=\'2\'\ fill=\'none\'\ stroke-linecap=\'round\'/%3E%3C/svg%3E);
}
.hot-pick-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
background: #fff;
}
.hot-pick-item:hover .hot-pick-dl {
opacity: 1;
}
.hot-pick-item .app-icon {
flex-shrink: 0;
}
.hot-pick-info {
flex: 1;
min-width: 0;
}
.hot-pick-name {
font-size: 0.85rem;
font-weight: 600;
color: var(--gray-800);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hot-pick-sub {
font-size: 0.75rem;
color: var(--gray-400);
margin-top: 1px;
}
.hot-pick-meta-row {
display: flex;
align-items: center;
gap: 0.35rem;
margin-top: 3px;
}
.hot-pick-star {
color: #f6b93b;
font-size: 0.7rem;
letter-spacing: 1px;
}
.hot-pick-score {
font-size: 0.75rem;
color: var(--hp-accent, var(--brand-500));
font-weight: 700;
}
.hot-pick-dl-size {
font-size: 0.65rem;
color: var(--gray-400);
margin-left: auto;
}
.hot-pick-dl {
font-size: 0.7rem;
color: #fff;
font-weight: 700;
background: var(--hp-accent, var(--brand-500));
padding: 3px 10px;
border-radius: var(--radius-full);
opacity: 0;
transform: translateX(-4px);
transition: all 0.3s;
flex-shrink: 0;
white-space: nowrap;
}
.side-panel {
background: var(--white);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
overflow: hidden;
}
.side-panel-header {
padding: 1rem 1.25rem 0;
}
.side-panel-header .section-title {
font-size: 1rem;
}
.side-panel-tabs {
display: flex;
gap: 4px;
margin-top: 0.875rem;
background: var(--gray-100);
padding: 3px;
border-radius: var(--radius-full);
position: relative;
}
.side-panel-tab {
flex: 1;
text-align: center;
padding: 7px 0;
font-size: 0.75rem;
font-weight: 600;
color: var(--gray-500);
border-radius: var(--radius-full);
cursor: pointer;
transition: all 0.25s;
border: none;
background: none;
position: relative;
z-index: 1;
}
.side-panel-tab.active {
background: var(--white);
color: var(--brand-500);
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
font-weight: 700;
}
.side-panel-tab:hover:not(.active) {
color: var(--gray-700);
}
.side-article-list {
padding: 0.5rem 1rem 1rem;
flex: 1;
overflow-y: auto;
}
.side-article-item {
display: flex;
align-items: flex-start;
gap: 0.7rem;
padding: 0.7rem 0;
border-bottom: 1px solid var(--gray-100);
text-decoration: none;
transition: all 0.2s;
}
.side-article-item:last-child {
border-bottom: none;
}
.side-article-item:hover {
padding-left: 0.25rem;
}
.side-article-thumb {
width: 70px;
height: 52px;
border-radius: var(--radius-lg);
background: var(--brand-500);
display: block;
object-fit: cover;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.side-article-body {
flex: 1;
min-width: 0;
}
.side-article-title {
font-size: 0.75rem;
font-weight: 500;
color: var(--gray-800);
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.side-article-item:hover .side-article-title {
color: var(--brand-600);
}
.side-article-meta {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.3rem;
font-size: 0.7rem;
color: var(--gray-400);
}
.side-article-meta span:first-child {
background: var(--gray-100);
padding: 1px 8px;
border-radius: var(--radius-full);
color: var(--gray-500);
}
.new-game-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 1rem;
}
.new-game-card {
display: block;
text-decoration: none;
color: inherit;
position: relative;
border-radius: var(--radius-2xl);
overflow: hidden;
background: var(--white);
border: 1px solid var(--gray-100);
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
transition: all 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
}
.new-game-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(0,0,0,0.11);
}
.new-game-poster {
height: 170px;
position: relative;
overflow: hidden;
background: #1f2a44;
}
.new-game-poster-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
filter: blur(22px);
transform: scale(1.35);
opacity: 0.6;
}
.new-game-poster::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg,rgba(0,0,0,0.08) 0%,transparent 30%,rgba(0,0,0,0.65) 100%);
}
.new-game-poster::after {
content: "";
position: absolute;
top: -60px;
right: -60px;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(255,255,255,0.05);
z-index: 0;
}
.new-game-poster-bottom {
position: absolute;
bottom: 14px;
left: 14px;
right: 14px;
display: flex;
align-items: center;
gap: 12px;
z-index: 2;
}
.new-game-icon {
width: 46px;
height: 46px;
border-radius: var(--radius-lg);
display: block;
object-fit: cover;
flex-shrink: 0;
background: var(--gray-200);
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
border: 2px solid rgba(255,255,255,0.35);
transition: transform 0.3s;
}
.new-game-card:hover .new-game-icon {
transform: scale(1.1);
}
.new-game-poster-name {
color: #fff;
font-size: 1.05rem;
font-weight: 800;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.new-game-badge {
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(8px);
color: #fff;
font-size: 0.62rem;
padding: 4px 10px;
border-radius: var(--radius-full);
font-weight: 700;
border: 1px solid rgba(255,255,255,0.18);
letter-spacing: 1px;
}
.new-game-hot {
position: absolute;
top: 0;
left: 0;
z-index: 10;
background: linear-gradient(135deg,#ff6b6b,#ee5a24);
color: #fff;
font-size: 0.6rem;
padding: 3px 10px;
border-radius: 0 0 var(--radius-sm)0;
font-weight: 700;
letter-spacing: 1px;
}
.new-game-info {
padding: 10px 14px 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.new-game-tag {
font-size: 0.72rem;
color: var(--gray-400);
}
.new-game-data {
display: flex;
align-items: center;
justify-content: space-between;
}
.new-game-stats {
font-size: 0.72rem;
color: var(--gray-400);
font-weight: 500;
}
.new-game-btn {
display: inline-block;
text-decoration: none;
text-align: center;
border: none;
border-radius: var(--radius-full);
padding: 6px 20px;
font-size: 0.75rem;
font-weight: 700;
color: #fff;
cursor: pointer;
transition: all 0.25s;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
line-height: 1.4;
}
.new-game-btn.reserve {
background: linear-gradient(135deg,var(--brand-500),#00a890);
}
.new-game-btn.reserve:hover {
transform: scale(1.05);
box-shadow: 0 4px 16px rgba(0,191,165,0.35);
}
.new-game-btn.dl {
background: linear-gradient(135deg,#ff6b6b,#e55039);
}
.new-game-btn.dl:hover {
transform: scale(1.05);
box-shadow: 0 4px 16px rgba(255,107,107,0.35);
}
@media (max-width:1024px) {
.new-game-grid {
grid-template-columns: repeat(2,1fr);
}
.masterpiece-grid {
grid-template-columns: repeat(2,1fr);
}
.rank-article-row {
flex-direction: column;
}
.article-section {
width: 100%;
}
.game-grid {
grid-template-columns: repeat(2,1fr);
}
.sidebar {
width: 180px;
}
.gift-grid {
grid-template-columns: repeat(2,1fr);
}
.detail-side {
width: 240px;
}
}
@media (max-width:600px) {
.new-game-grid {
grid-template-columns: 1fr;
}
.masterpiece-grid {
grid-template-columns: 1fr;
}
}
.side-update-list {
flex: 1;
padding: 0.375rem 1.25rem 1rem;
overflow: hidden;
display: flex;
flex-direction: column;
}
.side-update-item {
display: flex;
align-items: center;
gap: 0.875rem;
padding: 0.75rem 0.625rem;
margin: 0-0.25rem;
border-radius: var(--radius-lg);
text-decoration: none;
color: inherit;
position: relative;
overflow: hidden;
transition: all 0.25s cubic-bezier(0.25,0.46,0.45,0.94);
}
.side-update-item:not(:last-child) {
border-bottom: 1px solid var(--gray-100);
}
.side-update-item:hover {
background: linear-gradient(90deg,rgba(0,191,165,0.05),rgba(0,191,165,0.02));
border-bottom-color: transparent;
}
.side-update-item::after {
content: "→";
position: absolute;
right: 0.75rem;
color: var(--brand-500);
font-size: 0.9rem;
font-weight: 700;
opacity: 0;
transform: translateX(-6px);
transition: all 0.25s;
}
.side-update-item:hover::after {
opacity: 1;
transform: translateX(0);
}
.side-update-item:hover .side-update-icon {
transform: scale(1.1) rotate(-5deg);
box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.side-update-info {
flex: 1;
min-width: 0;
transition: transform 0.25s;
}
.side-update-item:hover .side-update-info {
transform: translateX(2px);
}
.side-update-name {
font-size: 0.875rem;
font-weight: 700;
color: var(--gray-800);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color 0.2s;
}
.side-update-item:hover .side-update-name {
color: var(--brand-600);
}
.side-update-time {
font-size: 0.65rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: var(--radius-full);
background: var(--gray-100);
color: var(--gray-500);
white-space: nowrap;
transition: all 0.25s;
}
.side-update-item:hover .side-update-time {
background: var(--white);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.side-update-time:has(.green) {
background: rgba(0,191,165,0.1);
color: var(--brand-600);
}
.side-update-time:has(.orange) {
background: rgba(243,156,18,0.1);
color: #e67e22;
}
.side-update-dot {
width: 5px;
height: 5px;
border-radius: 50%;
flex-shrink: 0;
}
.side-update-dot.green {
background: var(--green-500);
box-shadow: 0 0 0 2px rgba(0,191,165,0.2);
animation: pulse-dot 1.5s infinite;
}
.side-update-dot.orange {
background: var(--orange-400);
}
.side-update-dot.gray {
background: var(--gray-400);
}
.side-panel .tab-panel {
flex: 1;
display: flex;
flex-direction: column;
}
.side-panel .tab-panel:not(.active) {
display: none;
}
@keyframes pulse-dot {
0%,100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
.section-title {
border-left: 4px solid var(--brand-500);
padding-left: 0.875rem;
font-size: 1.15rem;
font-weight: 700;
color: var(--gray-800);
padding-bottom: 0.875rem;
margin-bottom: 1rem;
border-bottom: 2px solid var(--gray-100);
display: flex;
align-items: center;
gap: 0.5rem;
}
.section-subtitle {
font-weight: 700;
color: var(--gray-700);
display: flex;
align-items: center;
gap: 0.5rem;
}
.section-subtitle::before {
content: "";
width: 4px;
height: 16px;
background: var(--brand-500);
border-radius: 2px;
}
.card-white {
background: var(--white);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow);
padding: 1.25rem;
margin-bottom: 1.25rem;
}
.server-table {
width: 100%;
font-size: 0.85rem;
}
.server-thead,.server-row {
display: grid;
grid-template-columns: 2.6fr 1.5fr 1.2fr 1fr 0.9fr;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 0.6rem;
}
.server-thead {
color: var(--gray-500);
font-weight: 600;
border-bottom: 1px solid var(--gray-100);
}
.server-row {
border-bottom: 1px solid var(--gray-100);
transition: background 0.2s;
}
.server-row:hover {
background: var(--gray-50);
}
.server-row:last-child {
border-bottom: none;
}
.col-game {
display: flex;
align-items: center;
gap: 0.6rem;
min-width: 0;
}
.server-icon {
width: 42px;
height: 42px;
border-radius: 12px;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.server-game-info {
min-width: 0;
}
.server-name {
font-weight: 600;
color: var(--gray-800);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.server-type {
font-size: 0.72rem;
color: var(--gray-400);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.col-time {
color: var(--gray-700);
font-variant-numeric: tabular-nums;
}
.col-platform {
color: var(--gray-500);
font-size: 0.8rem;
}
.server-status {
display: inline-block;
padding: 3px 11px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
white-space: nowrap;
}
.server-status.soon {
background: rgba(9,132,227,0.12);
color: #0984e3;
}
.server-status.today {
background: rgba(0,184,148,0.14);
color: #00b894;
}
.server-status.hot {
background: rgba(225,112,85,0.14);
color: #e17055;
}
.server-status.opened {
background: var(--gray-100);
color: var(--gray-500);
}
.server-btn {
display: inline-block;
padding: 5px 16px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.server-btn.reserve {
background: var(--brand-500);
color: #fff;
}
.server-btn.reserve:hover {
background: var(--brand-600);
}
.server-btn.enter {
background: var(--brand-50);
color: var(--brand-600);
}
.server-btn.enter:hover {
background: var(--brand-100);
}
.server-btn.disabled {
background: var(--gray-100);
color: var(--gray-400);
cursor: default;
}
@media (max-width:640px) {
.server-thead .col-platform,.server-row .col-platform {
display: none;
}
.server-thead,.server-row {
grid-template-columns: 2.4fr 1.4fr 1fr 0.9fr;
}
.server-icon {
width: 36px;
height: 36px;
}
.article-detail {
padding: 1.25rem 1rem;
}
.article-title {
font-size: 1.4rem;
}
.related-grid {
grid-template-columns: 1fr;
}
.search-wrap {
display: none;
}
.collection-grid {
grid-template-columns: 1fr;
}
.news-item-img {
width: 110px;
height: 76px;
}
.openings-table th,.openings-table td {
padding: 0.7rem 0.6rem;
}
.openings-game img {
width: 36px;
height: 36px;
}
.rank-row {
gap: 0.6rem;
padding: 0.7rem 0.5rem;
}
.rank-game-icon {
width: 46px;
height: 46px;
border-radius: 12px;
}
.rank-row .dl-btn {
padding: 0.4rem 0.9rem;
font-size: 0.75rem;
}
}
.masterpiece-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 1rem;
}
.master-card {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
border-radius: var(--radius-2xl);
overflow: hidden;
background: var(--white);
border: 1px solid var(--gray-100);
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
transition: all 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
position: relative;
}
.master-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: var(--radius-2xl);
background: linear-gradient(160deg,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.55) 100%),var(--mp-accent, linear-gradient(135deg, var(--brand-500), var(--brand-600)));
opacity: 0;
transition: opacity 0.35s;
z-index: 0;
}
.master-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(0,0,0,0.15);
border-color: transparent;
}
.master-card:hover::before {
opacity: 1;
}
.master-card>* {
position: relative;
z-index: 1;
}
.master-cover {
width: 100%;
height: 140px;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
background: #1f2a44;
}
.master-cover-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
filter: blur(22px);
transform: scale(1.4);
opacity: 0.65;
}
.master-cover::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,rgba(0,0,0,0.0) 40%,rgba(0,0,0,0.65) 100%);
z-index: 1;
}
.master-cover-icon {
width: 56px;
height: 56px;
border-radius: var(--radius-xl);
display: block;
object-fit: cover;
position: relative;
z-index: 3;
background: var(--gray-200);
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
border: 3px solid rgba(255,255,255,0.4);
transition: all 0.35s;
}
.master-card:hover .master-cover-icon {
transform: scale(1.12) rotate(-5deg);
border-color: rgba(255,255,255,0.7);
}
.master-cover-badge {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
background: rgba(0,0,0,0.35);
backdrop-filter: blur(8px);
color: #fff;
font-size: 0.6rem;
padding: 3px 10px;
border-radius: var(--radius-full);
font-weight: 700;
border: 1px solid rgba(255,255,255,0.2);
letter-spacing: 0.5px;
}
.master-cover-name {
position: absolute;
bottom: 10px;
left: 12px;
z-index: 3;
color: #fff;
font-size: 0.95rem;
font-weight: 800;
text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.master-body {
flex: 1;
padding: 0.875rem 1rem 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.master-desc {
font-size: 0.72rem;
color: var(--gray-500);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.35s;
}
.master-card:hover .master-desc {
color: rgba(255,255,255,0.9);
}
.master-tags {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.master-tag {
display: inline-block;
padding: 2px 8px;
border-radius: var(--radius-full);
font-size: 0.6rem;
font-weight: 600;
background: var(--tag-bg, var(--brand-50));
color: var(--tag-color, var(--brand-600));
transition: all 0.35s;
}
.master-card:hover .master-tag {
background: rgba(255,255,255,0.2);
color: rgba(255,255,255,0.9);
}
.master-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.625rem 1rem 0.875rem;
}
.master-star {
color: #f6b93b;
font-size: 0.7rem;
letter-spacing: 0.5px;
transition: color 0.35s;
}
.master-card:hover .master-star {
color: rgba(255,255,255,0.9);
}
.master-rating {
font-size: 0.78rem;
font-weight: 700;
color: var(--gray-700);
margin-left: 2px;
transition: color 0.35s;
}
.master-card:hover .master-rating {
color: #fff;
}
.master-size {
font-size: 0.62rem;
color: var(--gray-400);
margin-left: 4px;
transition: color 0.35s;
}
.master-card:hover .master-size {
color: rgba(255,255,255,0.7);
}
.master-dl-btn {
display: inline-block;
text-decoration: none;
text-align: center;
border: none;
border-radius: var(--radius-full);
padding: 5px 16px;
font-size: 0.7rem;
font-weight: 700;
color: #fff;
background: var(--mp-accent, var(--brand-500));
cursor: pointer;
transition: all 0.25s;
box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.master-dl-btn:hover {
transform: scale(1.06);
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.master-card:hover .master-dl-btn {
background: rgba(255,255,255,0.95);
color: var(--mp-accent-text, #1a1a2e);
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
@keyframes floatMaster {
0%,100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
.game-cat-grid {
display: grid;
grid-template-columns: repeat(5,1fr);
gap: 1rem;
}
.game-cat-item {
display: block;
padding: 0.875rem;
border-radius: var(--radius-xl);
background: var(--gray-50);
transition: all 0.25s;
text-align: center;
text-decoration: none;
color: inherit;
}
.game-cat-item:hover {
background: var(--brand-50);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.game-cat-icon {
width: 52px;
height: 52px;
margin: 0 auto 0.5rem;
border-radius: var(--radius-xl);
background: var(--cat-icon-bg);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 800;
font-size: 0.875rem;
transition: transform 0.25s;
}
.game-cat-item:hover .game-cat-icon {
transform: scale(1.1) rotate(-3deg);
}
.game-cat-label {
font-size: 0.75rem;
color: var(--gray-700);
font-weight: 500;
}
.app-card {
display: block;
background: var(--gray-50);
border-radius: var(--radius-xl);
padding: 0.875rem;
text-align: center;
transition: all var(--transition);
}
.app-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.app-card .app-icon {
display: block;
margin: 0 auto 0.5rem;
}
.app-card .app-name {
font-size: 0.875rem;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-card .app-cat {
font-size: 0.75rem;
color: var(--gray-400);
margin-top: 2px;
}
.tab-btn {
padding: 0.375rem 1rem;
border-radius: var(--radius-full);
border: 1px solid var(--gray-200);
font-size: 0.75rem;
font-weight: 500;
color: var(--gray-600);
background: transparent;
transition: all var(--transition);
}
.tab-btn:hover {
border-color: var(--brand-500);
color: var(--brand-600);
}
.tab-btn.active {
background: var(--brand-500);
color: var(--white);
border-color: var(--brand-500);
}
.topic-banner {
display: block;
border-radius: var(--radius-xl);
overflow: hidden;
position: relative;
height: 96px;
transition: transform var(--transition-slow);
}
.topic-banner:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.topic-banner-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.topic-banner span {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.35);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-weight: 600;
font-size: 0.875rem;
padding: 0 1rem;
text-align: center;
}
.update-card {
display: flex;
gap: 0.75rem;
padding: 0.75rem;
border-radius: var(--radius-xl);
background: var(--white);
border: 1px solid var(--gray-100);
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
transition: all 0.25s cubic-bezier(0.25,0.46,0.45,0.94);
text-decoration: none;
color: inherit;
}
.update-card:hover {
border-color: var(--brand-200);
box-shadow: 0 6px 20px rgba(0,0,0,0.06);
transform: translateY(-2px);
}
.update-card:hover .app-icon {
transform: scale(1.08);
}
.update-card .update-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
}
.update-card .app-name {
font-weight: 600;
font-size: 0.875rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--gray-800);
transition: color var(--transition);
}
.update-card:hover .app-name {
color: var(--brand-600);
}
.update-card .update-time {
font-size: 0.65rem;
color: var(--gray-400);
display: flex;
align-items: center;
gap: 0.25rem;
}
.update-dot {
width: 6px;
height: 6px;
border-radius: 50%;
}
.update-dot.green {
background: var(--green-500);
}
.update-dot.orange {
background: var(--orange-400);
}
.update-dot.gray {
background: var(--gray-400);
}
.article-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem 0.5rem;
border-radius: var(--radius);
transition: background var(--transition);
}
.article-row:not(:last-child) {
border-bottom: 1px solid var(--gray-100);
}
.article-row:hover {
background: var(--gray-50);
}
.article-row-thumb {
width: 80px;
height: 56px;
border-radius: var(--radius-sm);
background: var(--gray-200);
display: block;
object-fit: cover;
flex-shrink: 0;
}
.article-row-body {
flex: 1;
min-width: 0;
}
.article-row-title {
font-size: 0.875rem;
font-weight: 500;
color: var(--gray-800);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 0.25rem;
}
.article-row-meta {
font-size: 0.75rem;
color: var(--gray-400);
}
.rank-list {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.rank-item {
background: var(--gray-50);
border: 1px solid transparent;
box-shadow: none;
position: relative;
text-decoration: none;
color: inherit;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.55rem 0.4rem;
border-radius: var(--radius);
transition: all 0.2s;
}
.rank-item:last-child {
margin-bottom: 0;
}
.rank-item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
border-color: var(--gray-100);
background: var(--gray-50);
padding-left: 0.6rem;
}
.rank-num {
position: relative;
z-index: 1;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.4),0 2px 4px rgba(0,0,0,0.04);
width: 20px;
height: 20px;
flex-shrink: 0;
border-radius: 6px;
font-size: 0.72rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
background: var(--gray-100);
color: var(--gray-500);
}
.rank-num.r1 {
background: linear-gradient(135deg,#ffd700 0%,#ffb700 50%,#ff8c00 100%);
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
box-shadow: 0 3px 10px rgba(255,140,0,0.35),inset 0 1px 0 rgba(255,255,255,0.35);
}
.rank-num.r2 {
background: linear-gradient(135deg,#e8e8e8 0%,#c0c0c0 50%,#a0a0a0 100%);
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
box-shadow: 0 3px 10px rgba(160,160,160,0.35),inset 0 1px 0 rgba(255,255,255,0.35);
}
.rank-num.r3 {
background: linear-gradient(135deg,#f4a460 0%,#cd7f32 50%,#b87333 100%);
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
box-shadow: 0 3px 10px rgba(205,127,50,0.35),inset 0 1px 0 rgba(255,255,255,0.25);
}
.rank-num.r1::after,.rank-num.r2::after,.rank-num.r3::after {
content: "";
position: absolute;
top: 2px;
left: 4px;
right: 4px;
height: 45%;
background: linear-gradient(to bottom,rgba(255,255,255,0.35),transparent);
border-radius: 50% 50% 40% 40%;
pointer-events: none;
}
.rank-icon-wrap {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
display: block;
flex-shrink: 0;
position: relative;
z-index: 1;
transition: all 0.3s;
box-shadow: 0 3px 10px rgba(0,0,0,0.12);
overflow: hidden;
background: var(--gray-200);
}
.rank-item:hover .rank-icon-wrap {
transform: scale(1.1) rotate(-3deg);
}
.rank-info {
flex: 1;
min-width: 0;
font-size: 0.875rem;
position: relative;
z-index: 1;
}
.rank-name {
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--gray-800);
transition: color 0.25s;
}
.rank-item:hover .rank-name {
color: var(--brand-600);
}
.rank-dl {
font-size: 0.7rem;
color: var(--gray-400);
margin-top: 2px;
display: flex;
align-items: center;
gap: 4px;
}
.rank-dl::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--green-500);
}
.rank-arrow {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--gray-100);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
color: var(--gray-400);
flex-shrink: 0;
transition: all 0.25s;
position: relative;
z-index: 1;
}
.rank-item:hover .rank-arrow {
background: var(--brand-500);
color: #fff;
transform: translateX(2px);
}
.rank-col-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.875rem;
padding-bottom: 0.6rem;
border-bottom: 2px solid var(--gray-100);
font-weight: 800;
font-size: 0.9rem;
color: var(--gray-800);
}
.rank-col-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.rank-article-row {
display: flex;
gap: 1.5rem;
align-items: stretch;
}
.rank-section {
flex: 1;
min-width: 0;
display: flex;
}
.rank-section>section {
flex: 1;
display: flex;
flex-direction: column;
}
.rank-section>section>.section-title {
flex-shrink: 0;
}
.rank-section>section>div:last-child {
flex: 1;
}
.article-section {
width: 360px;
flex-shrink: 0;
display: flex;
}
.article-section>section {
flex: 1;
display: flex;
flex-direction: column;
}
.article-section>section>div:first-child {
flex-shrink: 0;
}
.article-list {
flex: 1;
justify-content: space-between;
display: flex;
flex-direction: column;
gap: 0;
}
.friend-link {
font-size: 0.75rem;
color: var(--gray-500);
transition: color var(--transition);
}
.friend-link:hover {
color: var(--brand-600);
}
.site-footer {
background: var(--gray-800);
color: var(--gray-400);
font-size: 0.75rem;
margin-top: 2rem;
padding: 2rem 0;
}
.site-footer a:hover {
color: var(--white);
}
.main-content {
max-width: var(--max-w);
margin: 0 auto;
padding: 1.25rem 1rem;
}
.main-content>*+* {
margin-top: 2rem;
}
.back-to-top {
position: fixed;
bottom: 32px;
right: 32px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--brand-500);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.25rem;
box-shadow: var(--shadow-lg);
transition: all var(--transition);
z-index: 40;
opacity: 0;
transform: translateY(20px);
pointer-events: none;
border: none;
}
.back-to-top.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.back-to-top:hover {
background: var(--brand-600);
transform: translateY(-3px);
box-shadow: var(--shadow-xl);
}
.reveal {
transition: opacity 0.6s ease,transform 0.6s ease;
opacity: 1 !important;
transform: none !important;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 200;
display: flex;
flex-direction: column;
gap: 8px;
}
.toast {
background: var(--gray-800);
color: var(--white);
padding: 12px 20px;
border-radius: var(--radius-lg);
font-size: 0.75rem;
box-shadow: var(--shadow-lg);
animation: toastIn 0.3s ease;
pointer-events: none;
max-width: 300px;
}
.toast.success {
background: var(--brand-500);
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
}
@keyframes fadeDown {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes toastIn {
from {
opacity: 0;
transform: translateX(40px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes toastOut {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translateY(-10px);
}
}
@keyframes pulse {
0%,100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
.carousel-progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: rgba(255,255,255,0.15);
z-index: 30;
}
.carousel-progress-fill {
height: 100%;
background: var(--brand-500);
border-radius: 0 1px 1px 0;
transition: width 0.1s linear;
width: 0;
}
.search-suggest-wrap {
position: relative;
}
.search-suggestions {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
z-index: 200;
margin-top: 6px;
overflow: hidden;
border: 1px solid var(--gray-100);
}
.search-suggestions.show {
display: block;
animation: fadeDown 0.2s ease;
}
.search-suggest-item {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.7rem 1rem;
cursor: pointer;
transition: background 0.15s;
font-size: 0.875rem;
color: var(--gray-700);
}
.search-suggest-item:hover,.search-suggest-item.active {
background: var(--brand-50);
color: var(--brand-600);
}
.search-suggest-item .suggest-icon {
width: 28px;
height: 28px;
border-radius: var(--radius);
background: var(--icon-bg);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.65rem;
font-weight: 700;
flex-shrink: 0;
}
.search-suggest-item .suggest-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.search-suggest-item .suggest-type {
font-size: 0.7rem;
color: var(--gray-400);
}
.gift-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 1rem;
}
.gift-card {
text-decoration: none;
color: inherit;
background: var(--white);
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
border: 1px solid var(--gray-100);
transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
display: flex;
flex-direction: column;
position: relative;
}
.gift-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: var(--radius-2xl);
background: var(--ev-glow);
opacity: 0;
transition: opacity 0.35s;
z-index: 0;
}
.gift-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,0.1);
border-color: transparent;
}
.gift-card:hover::before {
opacity: 1;
}
.gift-card>* {
position: relative;
z-index: 1;
}
.gift-header {
padding: 1.25rem 1rem 0.75rem;
text-align: center;
}
.gift-game-icon {
margin: 0 auto 0.625rem;
display: block;
background: var(--gray-200);
width: 48px;
height: 48px;
border-radius: 12px;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.gift-game-name {
font-weight: 700;
font-size: 0.72rem;
color: var(--gray-400);
margin-top: 2px;
}
.gift-body {
padding: 0 1rem 0.75rem;
}
.gift-reward {
background: var(--gray-50);
border-radius: var(--radius-lg);
padding: 0.625rem;
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.625rem;
}
.gift-reward-icon {
width: 32px;
height: 32px;
border-radius: var(--radius);
background: var(--gift-icon-bg, var(--brand-500));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
flex-shrink: 0;
}
.gift-reward-text {
flex: 1;
min-width: 0;
}
.gift-reward-name {
font-size: 0.75rem;
font-weight: 600;
color: var(--gray-800);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gift-reward-desc {
font-size: 0.65rem;
color: var(--gray-400);
margin-top: 1px;
}
.gift-code-row {
display: flex;
align-items: center;
gap: 0.375rem;
background: linear-gradient(135deg,#fefce8,#fffbeb);
border: 1px dashed #f6b93b;
border-radius: var(--radius-lg);
padding: 0.5rem 0.625rem;
margin-bottom: 0.625rem;
}
.gift-code-label {
font-size: 0.65rem;
color: var(--orange-500);
white-space: nowrap;
font-weight: 700;
}
.gift-code-val {
flex: 1;
font-size: 0.7rem;
color: var(--gray-700);
font-family: "Courier New",monospace;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gift-copy-btn {
background: var(--orange-500);
color: #fff;
border: none;
border-radius: var(--radius-full);
padding: 2px 10px;
font-size: 0.65rem;
cursor: pointer;
font-weight: 700;
flex-shrink: 0;
transition: all 0.2s;
}
.gift-copy-btn:hover {
background: #e16910;
transform: scale(1.05);
}
.gift-copy-btn.copied {
background: var(--green-500);
}
.gift-footer {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem 0.875rem;
}
.gift-stock {
font-size: 0.65rem;
color: var(--gray-400);
display: flex;
align-items: center;
gap: 3px;
}
.gift-stock::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--green-500);
}
@keyframes btnPulse {
0%,100% {
box-shadow: 0 0 0 0 rgba(0,191,165,0.4);
}
50% {
box-shadow: 0 0 0 8px rgba(0,191,165,0);
}
}
@keyframes pulse-badge {
0%,100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.btn-pulse {
animation: btnPulse 2s infinite;
}
.card-hover-glow {
position: relative;
}
.card-hover-glow::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
background: linear-gradient(135deg,var(--brand-500),#74b9ff,#a29bfe);
opacity: 0;
transition: opacity 0.3s;
z-index: -1;
}
.card-hover-glow:hover::before {
opacity: 1;
}
.mobile-dl-bar {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--white);
border-top: 1px solid var(--gray-200);
padding: 0.5rem 1rem;
z-index: 60;
box-shadow: 0-4px 20px rgba(0,0,0,0.08);
align-items: center;
gap: 0.75rem;
}
.mobile-dl-bar .dl-bar-icon {
width: 36px;
height: 36px;
border-radius: var(--radius);
background: var(--brand-500);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.7rem;
flex-shrink: 0;
}
.mobile-dl-bar .dl-bar-info {
flex: 1;
min-width: 0;
}
.mobile-dl-bar .dl-bar-name {
font-weight: 600;
font-size: 0.8rem;
color: var(--gray-800);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mobile-dl-bar .dl-bar-ver {
font-size: 0.65rem;
color: var(--gray-400);
}
.mobile-dl-bar .dl-bar-btn {
background: var(--brand-500);
color: #fff;
border: none;
border-radius: var(--radius-full);
padding: 0.5rem 1.5rem;
font-weight: 700;
font-size: 0.8rem;
cursor: pointer;
flex-shrink: 0;
transition: all 0.2s;
}
.mobile-dl-bar .dl-bar-btn:hover {
background: var(--brand-600);
}
@media (max-width:767px) {
.mobile-dl-bar {
display: flex;
}
.carousel {
height: 240px;
}
.carousel-content {
padding: 0.85rem;
}
.carousel-content h2 {
font-size: 1.05rem;
}
.carousel-content p {
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
.carousel-arrow {
width: 32px;
height: 32px;
font-size: 16px;
opacity: 0;
}
.carousel:hover .carousel-arrow {
opacity: 1;
}
.nav-item>a {
padding: 0.7rem 0.875rem;
font-size: 0.85rem;
}
.hero-grid {
grid-template-columns: 1fr;
}
.hero-left {
gap: 1rem;
}
.side-panel {
min-height: auto;
}
.hot-picks-grid {
grid-template-columns: repeat(2,1fr);
}
.hot-pick-item {
padding: 0.6rem 0.6rem;
}
.new-game-grid {
grid-template-columns: repeat(2,1fr);
gap: 0.75rem;
}
.new-game-poster {
height: 80px;
}
.masterpiece-grid {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.master-cover {
height: 100px;
}
.game-cat-grid {
grid-template-columns: repeat(3,1fr);
gap: 0.75rem;
}
.gift-grid {
grid-template-columns: repeat(2,1fr);
gap: 0.75rem;
}
}
.gap-1 {
gap: 0.25rem;
}
.grid-cols-3 {
grid-template-columns: repeat(3,1fr);
}
.mt-6 {
margin-top: 1.5rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.font-semibold {
font-weight: 600;
}
.font-extrabold {
font-weight: 800;
}
.border-gray-100 {
border-color: var(--gray-100);
}
.breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 0;
font-size: 0.8rem;
color: var(--gray-500);
}
.breadcrumb a {
color: var(--gray-500);
transition: color 0.2s;
}
.breadcrumb a:hover {
color: var(--brand-600);
}
.breadcrumb .current {
color: var(--gray-800);
font-weight: 600;
}
.breadcrumb span.sep {
color: var(--gray-400);
}
.list-layout {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.sidebar {
width: 220px;
flex-shrink: 0;
position: sticky;
top: 64px;
}
.sidebar-section {
background: var(--white);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow);
padding: 1.25rem 1rem;
margin-bottom: 1rem;
}
.sidebar-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--gray-800);
margin-bottom: 1rem;
padding-bottom: 0.625rem;
border-bottom: 2px solid var(--gray-100);
display: flex;
align-items: center;
gap: 0.5rem;
}
.sidebar-cat {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.625rem;
border-radius: var(--radius-lg);
font-size: 0.85rem;
color: var(--gray-600);
cursor: pointer;
transition: all 0.2s;
}
.sidebar-cat:hover {
background: var(--brand-50);
color: var(--brand-600);
}
.sidebar-cat.active {
background: var(--brand-50);
color: var(--brand-600);
font-weight: 600;
}
.sidebar-cat .cat-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.sidebar-cat .cat-count {
margin-left: auto;
font-size: 0.7rem;
color: var(--gray-400);
background: var(--gray-100);
padding: 1px 8px;
border-radius: var(--radius-full);
}
.sidebar-cat.active .cat-count {
background: var(--brand-100);
color: var(--brand-600);
}
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag-item {
padding: 0.35rem 0.75rem;
border-radius: var(--radius-full);
font-size: 0.72rem;
background: var(--gray-100);
color: var(--gray-600);
cursor: pointer;
transition: all 0.2s;
}
.tag-item:hover {
background: var(--brand-50);
color: var(--brand-600);
}
.tag-item.active {
background: var(--brand-500);
color: #fff;
}
.content-area {
flex: 1;
min-width: 0;
}
.sf-list {
display: flex;
flex-direction: column;
}
.sf-item {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.625rem 0;
border-bottom: 1px solid var(--gray-100);
}
.sf-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.sf-icon {
width: 40px;
height: 40px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.sf-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.sf-body.col {
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.sf-body.col .sf-name {
max-width: 100%;
}
.sf-thumb {
flex-shrink: 0;
display: block;
line-height: 0;
border-radius: 10px;
overflow: hidden;
}
.sf-name a {
color: inherit;
text-decoration: none;
transition: color 0.2s;
}
.sf-name a:hover {
color: var(--brand-600);
}
.sf-name {
font-size: 0.82rem;
font-weight: 600;
color: var(--gray-800);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sf-meta {
margin-top: 3px;
display: flex;
align-items: center;
gap: 6px;
}
.sf-time {
font-size: 0.7rem;
color: var(--gray-400);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.sf-btn {
margin-top: 7px;
flex-shrink: 0;
display: inline-block;
padding: 3px 15px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
}
.sf-btn.reserve {
background: var(--brand-500);
color: #fff;
}
.sf-btn.reserve:hover {
background: var(--brand-600);
}
.sf-btn.enter {
background: var(--brand-50);
color: var(--brand-600);
}
.sf-btn.enter:hover {
background: var(--brand-100);
}
.toolbar {
background: var(--white);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow);
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
}
.toolbar-left {
display: flex;
align-items: center;
gap: 0.625rem;
}
.toolbar-info {
font-size: 0.85rem;
color: var(--gray-500);
}
.toolbar-info strong {
color: var(--brand-600);
font-weight: 700;
}
.sort-options {
display: flex;
gap: 0.25rem;
background: var(--gray-100);
padding: 3px;
border-radius: var(--radius-full);
}
.sort-btn {
line-height: inherit;
padding: 0.4rem 0.875rem;
border-radius: var(--radius-full);
font-size: 0.78rem;
font-weight: 500;
color: var(--gray-500);
transition: all 0.2s;
cursor: pointer;
background: none;
white-space: nowrap;
border: none;
font-family: inherit;
}
.sort-btn.active {
background: var(--white);
color: var(--brand-600);
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
font-weight: 700;
}
.sort-btn:hover:not(.active) {
color: var(--gray-700);
}
.view-toggle {
display: flex;
gap: 0.25rem;
}
.view-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
color: var(--gray-400);
transition: all 0.2s;
font-size: 0.85rem;
background: none;
cursor: pointer;
}
.view-btn.active {
background: var(--brand-50);
color: var(--brand-600);
}
.view-btn:hover:not(.active) {
color: var(--gray-600);
}
.game-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 1rem;
}
.game-card {
background: var(--white);
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
border: 1px solid var(--gray-100);
transition: all 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
display: flex;
flex-direction: column;
position: relative;
}
.game-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,0.1);
border-color: transparent;
}
.game-icon {
width: 56px;
height: 56px;
border-radius: 16px;
display: block;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 3px 12px rgba(0,0,0,0.12);
transition: transform 0.35s,box-shadow 0.35s;
overflow: hidden;
position: relative;
background: var(--gray-200);
}
.game-card:hover .game-icon {
transform: scale(1.08) rotate(-5deg);
box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.game-info {
flex: 1;
min-width: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.game-info-row {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 1.125rem 1rem 0;
}
.game-name {
font-size: 0.95rem;
font-weight: 700;
color: var(--gray-800);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
transition: color 0.2s;
}
.game-name:hover {
color: var(--brand-600);
}
.game-desc {
font-size: 0.72rem;
color: var(--gray-500);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.game-tags {
display: flex;
gap: 4px;
flex-wrap: wrap;
padding: 0.625rem 1rem 0;
}
.game-tag {
font-size: 0.62rem;
padding: 2px 8px;
border-radius: var(--radius-full);
font-weight: 600;
background: var(--gray-100);
color: var(--gray-600);
}
.game-dl-wrap {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.625rem 1rem 0.875rem;
margin-top: auto;
}
.game-meta {
display: flex;
align-items: center;
gap: 0.5rem;
}
.game-stars {
color: #f6b93b;
font-size: 0.7rem;
letter-spacing: 0.5px;
}
.game-score {
font-size: 0.75rem;
font-weight: 700;
color: var(--gray-700);
}
.game-size {
font-size: 0.65rem;
color: var(--gray-400);
}
.game-dl-btn {
display: inline-block;
padding: 6px 18px;
border-radius: var(--radius-full);
font-size: 0.73rem;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg,var(--brand-500),var(--brand-600));
transition: all 0.25s;
box-shadow: 0 2px 8px rgba(0,191,165,0.25);
text-decoration: none;
white-space: nowrap;
}
.game-dl-btn:hover {
transform: scale(1.06);
box-shadow: 0 6px 20px rgba(0,191,165,0.4);
}
.game-cover {
position: relative;
height: 64px;
overflow: hidden;
flex-shrink: 0;
}
.game-cover::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 88% 18%,rgba(255,255,255,0.28),transparent 46%);
}
.cover-char {
position: absolute;
right: 6px;
bottom: -8px;
font-size: 3.1rem;
font-weight: 900;
line-height: 1;
color: rgba(255,255,255,0.16);
letter-spacing: 2px;
pointer-events: none;
user-select: none;
}
.game-card.has-cover .game-info-row {
padding-top: 0;
}
.game-card.has-cover .game-icon {
margin-top: -26px;
border: 3px solid var(--white);
box-shadow: 0 4px 14px rgba(0,0,0,0.16);
}
.game-grid .no-results {
grid-column: 1/-1;
margin: 0;
}
.game-grid.list-view {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.game-grid.list-view .game-card {
flex-direction: row;
align-items: stretch;
}
.game-grid.list-view .game-info-row {
flex: 1;
align-items: center;
padding: 0.75rem 1rem;
}
.game-grid.list-view .game-desc {
-webkit-line-clamp: 1;
}
.game-grid.list-view .game-tags {
align-self: center;
padding: 0 0.75rem;
}
.game-grid.list-view .game-dl-wrap {
flex-direction: column;
align-items: flex-end;
justify-content: center;
padding: 0.75rem 1rem;
margin-top: 0;
}
.game-grid.list-view .game-meta {
gap: 0.875rem;
margin-bottom: 0.375rem;
}
.game-grid.list-view .game-cover {
width: 96px;
height: auto;
min-height: 100%;
}
.game-grid.list-view .game-cover::after {
display: none;
}
.game-grid.list-view .cover-char {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
color: rgba(255,255,255,0.92);
letter-spacing: 0;
}
/* 🔴 2026-10-04 用户反馈「列表视图没有 app 图标」：原来这里直接 display:none。
改为列表视图下保留图标（略小一点，视觉更协调），并让文字区自适应。 */
.game-grid.list-view .game-icon {
display: block;
width: 52px;
height: 52px;
border-radius: 14px;
}
.game-grid.list-view .game-info-row {
gap: 0.9rem;
}
.toolbar-right {
display: flex;
align-items: center;
gap: 0.75rem;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 0.4rem;
margin-top: 1.25rem;
}
.page-btn {
min-width: 34px;
height: 34px;
padding: 0 0.6rem;
border-radius: var(--radius);
font-size: 0.82rem;
font-weight: 600;
color: var(--gray-600);
background: var(--white);
border: 1px solid var(--gray-200);
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.page-btn:hover {
background: var(--brand-50);
color: var(--brand-600);
border-color: var(--brand-500);
}
.page-btn.active {
box-shadow: 0 3px 12px rgba(0,191,165,0.3);
color: #fff;
background: linear-gradient(135deg,var(--brand-500),var(--brand-600));
border-color: transparent;
}
.page-btn.disabled {
opacity: 0.35;
pointer-events: none;
}
.page-ellipsis {
font-size: 0.85rem;
color: var(--gray-400);
padding: 0 0.25rem;
}
.no-results {
text-align: center;
padding: 4rem 2rem;
color: var(--gray-400);
}
.no-results .no-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.no-results p {
font-size: 0.95rem;
}
@media (max-width:768px) {
.list-layout {
flex-direction: column;
}
.sidebar {
width: 100%;
position: static;
}
.sidebar-section {
padding: 1rem;
}
.sidebar-cat-list {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
}
.sidebar-cat {
padding: 0.35rem 0.625rem;
font-size: 0.78rem;
}
.game-grid {
grid-template-columns: repeat(2,1fr);
gap: 0.75rem;
}
.toolbar {
padding: 0.75rem 1rem;
}
.nav-item>a {
padding: 0.7rem 0.875rem;
font-size: 0.85rem;
}
.gift-layout {
flex-direction: column;
}
.gift-grid {
grid-template-columns: repeat(2,1fr);
gap: 0.75rem;
}
.detail-layout {
flex-direction: column;
}
.detail-side {
width: 100%;
position: static;
}
.gift-header-meta {
flex-wrap: wrap;
gap: 1rem;
}
}
@media (max-width:480px) {
.game-grid {
grid-template-columns: repeat(2,1fr);
gap: 0.5rem;
}
.game-info-row {
padding: 0.75rem 0.75rem 0;
gap: 0.5rem;
}
.game-icon {
width: 42px;
height: 42px;
border-radius: 12px;
font-size: 0.8rem;
}
.game-name {
font-size: 0.85rem;
}
.game-dl-wrap {
padding: 0.5rem 0.75rem 0.75rem;
}
.sort-options {
flex-wrap: wrap;
}
.gift-grid {
grid-template-columns: 1fr;
}
.gift-header-top {
flex-direction: column;
align-items: center;
text-align: center;
}
.gift-header-info {
text-align: center;
}
.gift-header-game {
justify-content: center;
}
.gift-claim-bar {
flex-direction: column;
text-align: center;
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.breadcrumb .sep {
user-select: none;
color: var(--gray-300);
}
.section-title::before {
content: "";
width: 4px;
height: 18px;
border-radius: 2px;
background: var(--brand-500);
flex-shrink: 0;
}
.detail-layout {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.detail-main {
flex: 1;
min-width: 0;
}
.detail-sidebar {
width: 300px;
flex-shrink: 0;
position: sticky;
top: 16px;
}
.sidebar-title::before {
content: "";
width: 4px;
height: 16px;
border-radius: 2px;
background: var(--brand-500);
}
.article-detail {
background: var(--white);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow);
padding: 1.5rem 2.25rem 2rem;
margin-bottom: 1.25rem;
}
.article-cat {
display: inline-flex;
align-items: center;
padding: 0.28rem 0.8rem;
border-radius: var(--radius-full);
font-size: 0.72rem;
font-weight: 600;
background: var(--brand-50);
color: var(--brand-600);
}
.article-title {
font-size: 1.9rem;
font-weight: 800;
color: var(--gray-800);
line-height: 1.35;
margin: 0 0 1rem;
letter-spacing: -0.01em;
}
.article-meta {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.78rem;
color: var(--gray-400);
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--gray-100);
flex-wrap: wrap;
}
.article-meta .author {
display: flex;
align-items: center;
gap: 0.4rem;
color: var(--gray-600);
font-weight: 600;
}
.article-meta .author img {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
}
.article-meta .dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--gray-300);
}
.article-cover {
width: 100%;
height: 380px;
border-radius: var(--radius-xl);
overflow: hidden;
margin: 1.5rem 0;
background: #1f2a44;
}
.article-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.article-content {
font-size: 0.98rem;
color: var(--gray-700);
line-height: 1.9;
}
.article-content p {
margin-bottom: 1.1rem;
}
.article-content h2 {
font-size: 1.3rem;
font-weight: 800;
color: var(--gray-800);
margin: 1.8rem 0 0.9rem;
padding-left: 0.7rem;
border-left: 4px solid var(--brand-500);
}
.article-content h3 {
font-size: 1.1rem;
font-weight: 700;
color: var(--gray-800);
margin: 1.4rem 0 0.7rem;
}
.article-content figure {
margin: 1.5rem 0;
}
.article-content figure img {
width: 100%;
border-radius: var(--radius-lg);
}
.article-content figcaption {
text-align: center;
font-size: 0.78rem;
color: var(--gray-400);
margin-top: 0.5rem;
}
.article-content blockquote {
margin: 1.4rem 0;
padding: 1rem 1.25rem;
background: var(--brand-50);
border-left: 4px solid var(--brand-500);
border-radius: var(--radius);
color: var(--gray-600);
font-size: 0.92rem;
}
.article-content ul.tips {
margin: 0 0 1.1rem;
padding-left: 1.2rem;
}
.article-content ul.tips li {
list-style: disc;
margin-bottom: 0.5rem;
}
.article-content strong {
color: var(--gray-800);
}
.article-actions {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 1.75rem;
padding-top: 1.5rem;
border-top: 1px solid var(--gray-100);
flex-wrap: wrap;
}
.act-btn {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.6rem 1.2rem;
border-radius: var(--radius-full);
font-size: 0.85rem;
font-weight: 600;
background: var(--gray-50);
border: 1px solid var(--gray-200);
color: var(--gray-500);
cursor: pointer;
transition: all 0.2s;
}
.act-btn svg {
width: 18px;
height: 18px;
transition: transform 0.2s;
}
.act-btn:hover {
background: var(--brand-50);
color: var(--brand-600);
border-color: var(--brand-100);
}
.act-btn.liked {
background: #fff0f0;
color: var(--red-600);
border-color: #fbcfcf;
}
.act-btn.liked svg {
fill: var(--red-600);
stroke: var(--red-600);
transform: scale(1.15);
}
.act-btn.faved {
background: #fff7ed;
color: #ea580c;
border-color: #fed7aa;
}
.act-btn.faved svg {
fill: #ea580c;
stroke: #ea580c;
}
.article-share {
margin-left: auto;
font-size: 0.78rem;
color: var(--gray-400);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.share-label {
color: var(--gray-400);
}
.share-btn {
color: var(--gray-500);
cursor: pointer;
transition: color 0.2s;
}
.share-btn:hover {
color: var(--brand-600);
}
.share-btn::after {
content: "·";
margin-left: 6px;
color: var(--gray-300);
}
.share-btn:last-child::after {
content: none;
}
.share-toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: rgba(0,0,0,0.75);
color: #fff;
padding: 10px 20px;
border-radius: 999px;
font-size: 0.85rem;
z-index: 1000;
pointer-events: none;
opacity: 0;
transition: opacity 0.25s;
}
.share-toast.visible {
opacity: 1;
}
.related-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 1rem;
}
.related-card {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: all 0.2s;
border: 1px solid var(--gray-100);
}
.related-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.related-thumb {
width: 100%;
height: 110px;
overflow: hidden;
background: #1f2a44;
}
.related-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.related-body {
padding: 0.7rem 0.75rem;
}
.related-cat {
font-size: 0.66rem;
font-weight: 600;
color: var(--brand-600);
}
.related-title {
font-size: 0.82rem;
font-weight: 600;
color: var(--gray-800);
line-height: 1.4;
margin-top: 0.3rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.author-card {
text-align: center;
}
.author-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 0.6rem;
box-shadow: 0 3px 12px rgba(0,166,143,0.2);
}
.author-name {
font-size: 0.95rem;
font-weight: 700;
color: var(--gray-800);
}
.author-desc {
font-size: 0.74rem;
color: var(--gray-400);
margin: 0.35rem 0 0.75rem;
line-height: 1.5;
}
.author-stats {
display: flex;
justify-content: center;
gap: 1.25rem;
font-size: 0.72rem;
color: var(--gray-500);
}
.author-stats b {
display: block;
font-size: 1rem;
color: var(--gray-800);
font-weight: 800;
}
.author-follow {
display: inline-block;
margin-top: 0.85rem;
padding: 0.45rem 1.4rem;
border-radius: var(--radius-full);
font-size: 0.8rem;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg,var(--brand-500),var(--brand-600));
}
.author-follow:hover {
opacity: 0.9;
}
.sf-info {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.rank-item:nth-child(1) .rank-num {
background: #fee2e2;
color: #dc2626;
}
.rank-item:nth-child(2) .rank-num {
background: #ffedd5;
color: #ea580c;
}
.rank-item:nth-child(3) .rank-num {
background: #fef9c3;
color: #ca8a04;
}
.rank-title {
flex: 1;
min-width: 0;
font-size: 0.82rem;
color: var(--gray-700);
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
transition: color 0.2s;
}
.rank-item:hover .rank-title {
color: var(--brand-600);
}
.rank-views {
font-size: 0.68rem;
color: var(--gray-400);
flex-shrink: 0;
}
.hot-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.hot-tag {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.32rem 0.72rem;
font-size: 0.72rem;
font-weight: 500;
color: var(--gray-600);
background: var(--gray-50);
border: 1px solid var(--gray-100);
border-radius: var(--radius-full);
text-decoration: none;
transition: all 0.2s;
}
.hot-tag:hover {
color: var(--brand-600);
background: var(--brand-50);
border-color: var(--brand-100);
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0,191,165,0.14);
}
@media (max-width:900px) {
.detail-layout {
flex-direction: column;
}
.detail-sidebar {
width: 100%;
position: static;
}
.related-grid {
grid-template-columns: repeat(2,1fr);
}
.article-cover {
height: 220px;
}
.collection-grid {
grid-template-columns: repeat(2,1fr);
}
.openings-header {
flex-direction: column;
align-items: flex-start;
}
.openings-filter {
width: 100%;
}
.openings-filter input[type="text"] {
flex: 1;
min-width: 120px;
}
.rank-stat {
display: none;
}
}
.page-head {
margin-bottom: 1.5rem;
}
.page-head h1 {
font-size: 1.6rem;
font-weight: 800;
color: var(--gray-800);
letter-spacing: -0.01em;
}
.page-head p {
font-size: 0.85rem;
color: var(--gray-400);
margin-top: 0.4rem;
}
.collection-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 1.25rem;
}
.collection-card {
background: var(--white);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow);
overflow: hidden;
transition: all 0.2s;
display: block;
}
.collection-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.collection-cover {
width: 100%;
height: 160px;
overflow: hidden;
background: #1f2a44;
}
.collection-cover img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.collection-card:hover .collection-cover img {
transform: scale(1.06);
}
.collection-body {
padding: 1rem 1.1rem 1.2rem;
}
.collection-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--gray-800);
}
.collection-desc {
font-size: 0.78rem;
color: var(--gray-400);
margin: 0.4rem 0 0.7rem;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.collection-meta {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.74rem;
color: var(--gray-500);
}
.collection-meta .count {
color: var(--brand-600);
font-weight: 700;
}
.gift-layout {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.gift-card-top {
padding: 1rem;
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
.gift-card-info {
flex: 1;
min-width: 0;
}
.gift-name {
font-size: 0.9rem;
font-weight: 700;
color: var(--gray-800);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
transition: color 0.2s;
}
.gift-name:hover {
color: var(--brand-600);
}
.gift-type-tag {
position: absolute;
top: 0;
right: 0;
padding: 3px 10px;
font-size: 0.65rem;
font-weight: 700;
border-radius: 0 var(--radius-2xl)0 var(--radius-lg);
color: #fff;
}
.gift-type-tag.new {
background: var(--orange-500);
}
.gift-type-tag.hot {
background: var(--red-500);
}
.gift-type-tag.limited {
background: var(--purple-500);
}
.gift-type-tag.vip {
background: linear-gradient(135deg,#f59e0b,#d97706);
}
.gift-contents {
padding: 0 1rem;
}
.gift-contents-title {
font-size: 0.72rem;
color: var(--gray-500);
margin-bottom: 0.5rem;
}
.gift-items {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.gift-item {
font-size: 0.68rem;
padding: 3px 8px;
border-radius: var(--radius-sm);
background: var(--gray-100);
color: var(--gray-600);
font-weight: 500;
}
.gift-card-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem 1rem;
margin-top: auto;
}
.gift-value {
display: flex;
flex-direction: column;
gap: 2px;
}
.gift-value-label {
font-size: 0.65rem;
color: var(--gray-400);
}
.gift-value-num {
font-size: 0.85rem;
font-weight: 700;
color: var(--orange-500);
}
.gift-remain {
font-size: 0.65rem;
color: var(--gray-400);
margin-top: 2px;
}
.gift-remain b {
color: var(--brand-600);
}
.gift-btn {
display: inline-block;
padding: 7px 20px;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg,var(--brand-500),var(--brand-600));
transition: all 0.25s;
box-shadow: 0 2px 8px rgba(0,191,165,0.25);
text-decoration: none;
white-space: nowrap;
}
.gift-btn:hover {
transform: scale(1.06);
box-shadow: 0 6px 20px rgba(0,191,165,0.4);
}
.gift-btn.disabled {
background: var(--gray-200);
color: var(--gray-400);
box-shadow: none;
cursor: default;
transform: none;
}
.detail-side {
width: 280px;
flex-shrink: 0;
position: sticky;
top: 64px;
}
.gift-header-card {
background: var(--white);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow);
padding: 1.5rem;
margin-bottom: 1.25rem;
position: relative;
overflow: hidden;
}
.gift-header-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg,var(--brand-500),var(--brand-600));
}
.gift-header-top {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}
.gift-header-icon {
width: 80px;
height: 80px;
border-radius: var(--radius-xl);
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.gift-header-info {
flex: 1;
min-width: 0;
}
.gift-header-name {
font-size: 1.3rem;
font-weight: 800;
color: var(--gray-800);
margin-bottom: 0.375rem;
}
.gift-header-game {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: var(--gray-500);
margin-bottom: 0.625rem;
}
.gift-header-game a {
color: var(--brand-600);
font-weight: 600;
}
.gift-header-tags {
display: flex;
gap: 0.375rem;
flex-wrap: wrap;
}
.gift-header-tag {
font-size: 0.68rem;
padding: 3px 10px;
border-radius: var(--radius-full);
font-weight: 600;
}
.gift-header-tag.new {
background: var(--orange-50);
color: var(--orange-600);
border: 1px solid var(--orange-200);
}
.gift-header-tag.free {
background: var(--brand-50);
color: var(--brand-600);
border: 1px solid var(--brand-100);
}
.gift-header-tag.limited {
background: var(--purple-50);
color: var(--purple-500);
border: 1px solid #e9d5ff;
}
.gift-header-meta {
display: flex;
gap: 2rem;
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--gray-100);
}
.gift-meta-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.gift-meta-label {
font-size: 0.7rem;
color: var(--gray-400);
}
.gift-meta-value {
font-size: 0.95rem;
font-weight: 700;
color: var(--gray-800);
}
.gift-meta-value.orange {
color: var(--orange-500);
}
.gift-meta-value.brand {
color: var(--brand-600);
}
.gift-meta-value.red {
color: var(--red-500);
}
.gift-claim-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1.25rem;
padding: 1rem 1.25rem;
background: linear-gradient(135deg,var(--brand-50),var(--gray-50));
border-radius: var(--radius-xl);
border: 1px solid var(--brand-100);
}
.gift-claim-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.gift-claim-text {
font-size: 0.85rem;
color: var(--gray-700);
font-weight: 600;
}
.gift-claim-sub {
font-size: 0.72rem;
color: var(--gray-400);
}
.gift-claim-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 2rem;
border-radius: var(--radius-full);
font-size: 0.9rem;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg,var(--brand-500),var(--brand-600));
transition: all 0.25s;
box-shadow: 0 4px 16px rgba(0,191,165,0.3);
cursor: pointer;
border: none;
white-space: nowrap;
}
.gift-claim-btn:hover {
transform: scale(1.05);
box-shadow: 0 6px 24px rgba(0,191,165,0.45);
}
.section-card {
background: var(--white);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow);
padding: 1.5rem;
margin-bottom: 1.25rem;
}
.gift-content-table {
width: 100%;
border-collapse: collapse;
}
.gift-content-table th {
text-align: left;
padding: 0.625rem 0.75rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--gray-500);
border-bottom: 2px solid var(--gray-100);
}
.gift-content-table td {
padding: 0.625rem 0.75rem;
font-size: 0.85rem;
color: var(--gray-700);
border-bottom: 1px solid var(--gray-100);
}
.gift-content-table tr:last-child td {
border-bottom: none;
}
.gift-content-table tr:hover td {
background: var(--gray-50);
}
.gift-content-table .item-name {
font-weight: 600;
color: var(--gray-800);
}
.gift-content-table .item-qty {
color: var(--brand-600);
font-weight: 700;
}
.gift-content-table .item-desc {
color: var(--gray-400);
font-size: 0.78rem;
}
.gift-steps {
display: flex;
flex-direction: column;
gap: 0;
}
.gift-step {
display: flex;
gap: 1rem;
padding: 0.875rem 0;
position: relative;
}
.gift-step:not(:last-child)::after {
content: "";
position: absolute;
left: 15px;
top: 42px;
bottom: -8px;
width: 2px;
background: var(--gray-100);
}
.gift-step-num {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--brand-500);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 700;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.gift-step-body {
flex: 1;
padding-top: 3px;
}
.gift-step-title {
font-size: 0.88rem;
font-weight: 600;
color: var(--gray-800);
margin-bottom: 2px;
}
.gift-step-desc {
font-size: 0.78rem;
color: var(--gray-500);
line-height: 1.6;
}
.gift-notice {
background: var(--orange-50);
border: 1px solid var(--orange-200);
border-radius: var(--radius-lg);
padding: 0.875rem 1rem;
margin-top: 1rem;
}
.gift-notice-title {
font-size: 0.8rem;
font-weight: 700;
color: var(--orange-600);
margin-bottom: 0.375rem;
display: flex;
align-items: center;
gap: 0.375rem;
}
.gift-notice ul {
padding-left: 1.25rem;
list-style: disc;
}
.gift-notice li {
font-size: 0.75rem;
color: var(--gray-600);
line-height: 1.8;
}
.side-card {
background: var(--white);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow);
padding: 1.25rem 1rem;
margin-bottom: 1rem;
}
.side-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--gray-800);
margin-bottom: 1rem;
padding-bottom: 0.625rem;
border-bottom: 2px solid var(--gray-100);
}
.related-gift {
display: flex;
gap: 0.625rem;
padding: 0.625rem 0;
border-bottom: 1px solid var(--gray-100);
transition: all 0.2s;
}
.related-gift:last-child {
border-bottom: none;
}
.related-gift:hover {
background: var(--gray-50);
margin: 0-0.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
border-radius: var(--radius);
}
.related-gift img {
width: 40px;
height: 40px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
}
.related-gift-info {
flex: 1;
min-width: 0;
}
.related-gift-name {
font-size: 0.8rem;
font-weight: 600;
color: var(--gray-800);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.related-gift-name:hover {
color: var(--brand-600);
}
.related-gift-game {
font-size: 0.7rem;
color: var(--gray-400);
margin-top: 1px;
}
.related-gift-meta {
display: flex;
align-items: center;
gap: 0.375rem;
margin-top: 4px;
}
.related-gift-value {
font-size: 0.72rem;
font-weight: 700;
color: var(--orange-500);
}
.related-gift-remain {
font-size: 0.65rem;
color: var(--gray-400);
}
.game-info-side {
display: flex;
gap: 0.75rem;
align-items: center;
}
.game-info-side img {
width: 56px;
height: 56px;
border-radius: 14px;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.game-info-side .name {
font-size: 0.9rem;
font-weight: 700;
color: var(--gray-800);
}
.game-info-side .meta {
font-size: 0.72rem;
color: var(--gray-400);
margin-top: 2px;
}
.game-info-side .tags {
display: flex;
gap: 4px;
margin-top: 4px;
}
.game-info-side .tags span {
font-size: 0.62rem;
padding: 1px 6px;
border-radius: var(--radius-sm);
background: var(--gray-100);
color: var(--gray-500);
}
.news-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.news-tab {
padding: 0.45rem 1rem;
border-radius: var(--radius-full);
font-size: 0.82rem;
font-weight: 600;
color: var(--gray-500);
background: var(--gray-50);
border: 1px solid var(--gray-100);
cursor: pointer;
transition: all 0.2s;
}
.news-tab:hover {
color: var(--brand-600);
background: var(--brand-50);
border-color: var(--brand-100);
}
.news-tab.active {
color: #fff;
background: linear-gradient(135deg,var(--brand-500),var(--brand-600));
border-color: transparent;
box-shadow: 0 3px 10px rgba(0,191,165,0.25);
}
.news-list {
display: flex;
flex-direction: column;
}
.news-item {
display: flex;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid var(--gray-100);
transition: all 0.2s;
}
.news-item:last-child {
border-bottom: none;
}
.news-item:hover {
padding-left: 0.5rem;
}
.news-item-img {
width: 160px;
height: 100px;
flex-shrink: 0;
border-radius: var(--radius-lg);
overflow: hidden;
position: relative;
background: #1f2a44;
}
.news-item-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s;
}
.news-item:hover .news-item-img img {
transform: scale(1.06);
}
.news-item-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.news-item-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--gray-800);
line-height: 1.4;
margin-bottom: 0.4rem;
transition: color 0.2s;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-item:hover .news-item-title {
color: var(--brand-600);
}
.news-item-excerpt {
font-size: 0.83rem;
color: var(--gray-500);
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
.news-cat {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.6rem;
border-radius: var(--radius-full);
font-size: 0.68rem;
font-weight: 600;
background: var(--brand-50);
color: var(--brand-600);
margin-bottom: 0.35rem;
align-self: flex-start;
}
.news-cat.gonglue {
background: #eef2ff;
color: #4f46e5;
}
.news-cat.jiaoxue {
background: #ecfeff;
color: #0891b2;
}
.news-cat.tuijian {
background: #fef3c7;
color: #d97706;
}
.news-cat.huodong {
background: #ffe4e6;
color: #e11d48;
}
.news-cat.zixun {
background: #f0fdf4;
color: #16a34a;
}
.news-cat.qianzhan {
background: #faf5ff;
color: #9333ea;
}
.news-cat.ceping {
background: #fff7ed;
color: #ea580c;
}
.news-meta {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.72rem;
color: var(--gray-400);
margin-top: 0.55rem;
}
.news-meta .dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--gray-300);
}
.news-meta .author {
color: var(--gray-500);
}
.news-meta .views {
margin-left: auto;
}
.game-rec-item {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.55rem 0;
border-bottom: 1px solid var(--gray-100);
transition: all 0.2s;
}
.game-rec-item:last-child {
border-bottom: none;
}
.game-rec-item:hover {
padding-left: 0.25rem;
}
.game-rec-icon {
width: 44px;
height: 44px;
border-radius: var(--radius-lg);
overflow: hidden;
flex-shrink: 0;
background: var(--gray-200);
object-fit: cover;
}
.game-rec-info {
flex: 1;
min-width: 0;
}
.game-rec-name {
font-size: 0.85rem;
font-weight: 600;
color: var(--gray-800);
transition: color 0.2s;
}
.game-rec-item:hover .game-rec-name {
color: var(--brand-600);
}
.game-rec-tag {
font-size: 0.68rem;
color: var(--gray-400);
}
.game-rec-btn {
font-size: 0.7rem;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg,var(--brand-500),var(--brand-600));
padding: 0.3rem 0.75rem;
border-radius: var(--radius-full);
flex-shrink: 0;
}
.game-rec-btn:hover {
opacity: 0.9;
}
.page-btn:hover:not(:disabled) {
color: var(--brand-600);
border-color: var(--brand-100);
background: var(--brand-50);
}
.page-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.news-empty {
text-align: center;
padding: 3rem 1rem;
color: var(--gray-400);
font-size: 0.9rem;
}
.openings-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.25rem;
}
.openings-tabs {
display: inline-flex;
background: var(--gray-100);
border-radius: var(--radius-full);
padding: 4px;
}
.openings-tab {
padding: 0.55rem 1.4rem;
border-radius: var(--radius-full);
font-size: 0.9rem;
font-weight: 600;
color: var(--gray-600);
background: transparent;
transition: all 0.2s;
border: none;
display: inline-flex;
align-items: center;
cursor: pointer;
}
.openings-tab:hover {
color: var(--brand-600);
}
.openings-tab.active {
background: var(--white);
color: var(--brand-600);
box-shadow: var(--shadow-sm);
}
.openings-filter {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.openings-filter label {
font-size: 0.8rem;
color: var(--gray-600);
}
.openings-filter select,.openings-filter input[type="text"] {
padding: 0.5rem 0.75rem;
border: 1px solid var(--gray-200);
border-radius: var(--radius);
font-size: 0.82rem;
color: var(--gray-700);
background: var(--white);
outline: none;
transition: border-color 0.2s;
}
.openings-filter select {
min-width: 120px;
}
.openings-filter input[type="text"] {
width: 160px;
}
.openings-filter select:focus,.openings-filter input[type="text"]:focus {
border-color: var(--brand-500);
}
.openings-filter .btn-query {
background: linear-gradient(135deg,var(--brand-500),var(--brand-600));
color: var(--white);
padding: 0.55rem 1.4rem;
border-radius: var(--radius);
font-size: 0.82rem;
font-weight: 600;
transition: all 0.2s;
}
.openings-filter .btn-query:hover {
background: linear-gradient(135deg,var(--brand-600),var(--brand-700));
box-shadow: 0 4px 12px rgba(0,191,165,0.25);
}
.openings-table-wrap {
overflow-x: auto;
border-radius: var(--radius-lg);
border: 1px solid var(--gray-100);
}
.openings-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.openings-table thead {
background: linear-gradient(135deg,var(--gray-700),var(--gray-800));
color: var(--white);
}
.openings-table th {
padding: 0.95rem 1rem;
text-align: left;
font-weight: 600;
font-size: 0.8rem;
white-space: nowrap;
}
.openings-table th.text-center {
text-align: center;
}
.openings-table tbody tr {
border-bottom: 1px solid var(--gray-100);
transition: background 0.15s;
}
.openings-table tbody tr:last-child {
border-bottom: none;
}
.openings-table tbody tr:hover {
background: var(--gray-50);
}
.openings-table td {
padding: 0.85rem 1rem;
vertical-align: middle;
color: var(--gray-700);
}
.openings-table td.text-center {
text-align: center;
}
.openings-game {
display: flex;
align-items: center;
gap: 0.85rem;
}
.openings-game img {
width: 44px;
height: 44px;
border-radius: var(--radius);
object-fit: cover;
flex-shrink: 0;
}
.openings-game .name {
font-weight: 600;
color: var(--gray-800);
}
.openings-tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.openings-tags .tag {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.55rem;
border-radius: var(--radius-sm);
font-size: 0.72rem;
background: var(--brand-50);
color: var(--brand-600);
border: 1px solid var(--brand-100);
}
.openings-time {
color: var(--gray-600);
font-family: "SFMono-Regular",Consolas,monospace;
font-size: 0.8rem;
}
.openings-platform {
color: var(--gray-600);
}
.openings-server {
color: var(--gray-700);
}
.openings-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.openings-actions .btn-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 0.42rem 0.75rem;
border-radius: var(--radius);
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
transition: all 0.2s;
text-decoration: none;
}
.openings-actions .btn-download {
background: linear-gradient(135deg,var(--brand-500),var(--brand-600));
color: var(--white);
}
.openings-actions .btn-download:hover {
background: linear-gradient(135deg,var(--brand-600),var(--brand-700));
box-shadow: 0 4px 10px rgba(0,191,165,0.25);
}
.openings-actions .btn-gift {
background: var(--orange-50);
color: var(--orange-600);
border: 1px solid var(--orange-200);
}
.openings-actions .btn-gift:hover {
background: var(--orange-100);
}
.openings-empty {
padding: 3rem 1rem;
text-align: center;
color: var(--gray-400);
font-size: 0.9rem;
}
.openings-empty svg {
width: 48px;
height: 48px;
margin: 0 auto 0.75rem;
color: var(--gray-300);
}
.openings-count {
font-size: 0.8rem;
color: var(--gray-500);
margin-bottom: 0.75rem;
}
.openings-count b {
color: var(--brand-600);
}
.openings-panel {
display: none;
}
#oday-today:checked~.openings-panel#panel-today,#oday-tomorrow:checked~.openings-panel#panel-tomorrow {
display: block;
}
#oday-today:checked~.openings-header .openings-tab[for="oday-today"],#oday-tomorrow:checked~.openings-header .openings-tab[for="oday-tomorrow"] {
background: var(--white);
color: var(--brand-600);
box-shadow: var(--shadow-sm);
}
.rank-tabs {
display: flex;
gap: 0.5rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.rank-tab {
padding: 0.5rem 1.3rem;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
background: var(--gray-100);
color: var(--gray-500);
cursor: pointer;
transition: all 0.2s;
border: 1px solid transparent;
}
.rank-tab:hover {
color: var(--brand-600);
background: var(--brand-50);
}
.rank-tab.active {
background: var(--brand-500);
color: #fff;
border-color: var(--brand-500);
}
.rank-panel {
background: var(--white);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow);
padding: 1rem 1.25rem 1.25rem;
}
.rank-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.85rem 1rem;
border-radius: var(--radius-lg);
transition: all 0.2s;
}
.rank-row:hover {
background: var(--gray-50);
}
.rank-row+.rank-row {
border-top: 1px solid var(--gray-100);
}
.rank-idx {
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: 10px;
font-size: 0.95rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
background: var(--gray-100);
color: var(--gray-500);
}
.rank-idx.top1 {
background: linear-gradient(135deg,#ff7a59,#ff4d4f);
color: #fff;
}
.rank-idx.top2 {
background: linear-gradient(135deg,#ffb347,#ff9e2c);
color: #fff;
}
.rank-idx.top3 {
background: linear-gradient(135deg,#f7d774,#e8b923);
color: #fff;
}
.rank-game-icon {
width: 56px;
height: 56px;
border-radius: 14px;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.rank-game-info {
flex: 1;
min-width: 0;
}
.rank-game-name {
font-size: 1rem;
font-weight: 700;
color: var(--gray-800);
}
.rank-score {
font-size: 0.74rem;
color: var(--brand-600);
font-weight: 600;
margin-top: 0.2rem;
}
.rank-game-tags {
display: flex;
gap: 0.4rem;
margin-top: 0.35rem;
flex-wrap: wrap;
}
.rank-tag {
font-size: 0.68rem;
color: var(--gray-500);
background: var(--gray-50);
border: 1px solid var(--gray-100);
padding: 1px 8px;
border-radius: 999px;
}
.rank-stat {
font-size: 0.72rem;
color: var(--gray-400);
white-space: nowrap;
text-align: right;
flex-shrink: 0;
}
.rank-stat b {
display: block;
font-size: 1.05rem;
color: var(--gray-800);
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.rank-row .dl-btn {
flex-shrink: 0;
padding: 0.5rem 1.2rem;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg,var(--brand-500),var(--brand-600));
transition: all 0.2s;
}
.rank-row .dl-btn:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,191,165,0.3);
}
/* ===== 侧栏「热门推荐」修复：窄列下两行网格（名字+下载 / 时间+厂商）=====
原 .sf-body(row) 把 .sf-name 压成 0 宽导致名字不可见、整行溢出 30~53px */
.sf-body.hot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 3px; width: 100%; }
.sf-body.hot .sf-name { grid-column: 1; grid-row: 1; min-width: 0; max-width: 100%; }
.sf-body.hot .sf-btn { grid-column: 2; grid-row: 1; margin-top: 0; padding: 3px 10px; }
.sf-body.hot .sf-meta { grid-column: 1 / -1; grid-row: 2; margin-top: 0; min-width: 0; flex-wrap: wrap; row-gap: 2px; }
.sf-body.hot .sf-meta .server-status { padding: 2px 7px; }
/* 热门标签（列表页：药丸流式 + 纯 CSS 展开；展开态用 display:contents 让多余标签紧跟常显末位不换行） */
.home-tags { display: flex; flex-direction: column; align-items: stretch; gap: 12px; background: var(--white, #fff); border: 1px solid var(--gray-200, #eef0f3); border-radius: var(--radius-xl, 16px); padding: 16px 20px 18px; max-width: 100%; margin: 18px 0 1.5rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.home-tags-label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--gray-800, #1f2329); white-space: nowrap; }
.home-tags-label::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: linear-gradient(180deg, #2ec9b0, var(--brand-600, #00a68f)); }
.home-tags-list { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 10px; flex: 1 1 auto; }
.home-tag { display: inline-block; padding: 5px 13px; border-radius: 999px; background: #f4f5f7; color: #57606f; font-size: 13px; line-height: 1.5; text-decoration: none; white-space: nowrap; transition: all .2s ease; }
.home-tag-hot { background: var(--brand-600, #00a68f); color: #fff; font-weight: 500; box-shadow: 0 2px 6px rgba(0,166,143,.2); }
.home-tag-mid { background: #e9f8f5; color: #00897b; }
.home-tag:hover { background: var(--brand-600, #00a68f); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,166,143,.22); }
.home-tags-more { display: none; }
.home-tags-chk:checked ~ .home-tags-list .home-tags-more { display: contents; }
.home-tags-toggle { cursor: pointer; display: inline-flex; align-items: center; gap: 3px; padding: 5px 13px; border-radius: 999px; background: #f0fbf9; color: var(--brand-600, #00a68f); font-size: 13px; font-weight: 600; user-select: none; white-space: nowrap; margin-left: 2px; transition: all .2s ease; }
.home-tags-toggle:hover { background: var(--brand-600, #00a68f); color: #fff; }
.home-tags-toggle .t-collapse { display: none; }
.home-tags-chk:checked ~ .home-tags-list .home-tags-toggle .t-expand { display: none; }
.home-tags-chk:checked ~ .home-tags-list .home-tags-toggle .t-collapse { display: inline; }
.home-tags .caret { font-style: normal; font-size: 11px; }
@media (max-width: 600px) {
.home-tags { margin-top: 12px; margin-bottom: 1rem; padding: 12px 14px 14px; gap: 10px; }
.home-tags-label { display: none; }
.home-tag { padding: 4px 11px; font-size: 12px; }
}
"
/* ── PHPCMS {$pages} 原生输出（a.a1 / a / span / ..）的分页样式 ──────────
之前 CSS 里只定义了 .page-btn，而 PHPCMS 实际吐出的是 …
和裸 /，导致分页完全没有样式（用户反馈"很丑"）。 */
.pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 6px;
margin: 28px 0 8px;
padding: 0 4px;
}
.pagination a,
.pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 12px;
border-radius: 10px;
border: 1px solid var(--gray-200, #e5e7eb);
background: #fff;
color: var(--gray-600, #4b5563);
font-size: 0.86rem;
font-weight: 600;
line-height: 1;
text-decoration: none;
transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.pagination a:hover {
color: var(--brand-600, #0f9e8e);
border-color: var(--brand-500, #00bfa5);
background: var(--brand-50, #e6fbf7);
transform: translateY(-1px);
}
/* 当前页：PHPCMS 用裸 */
.pagination span {
color: #fff;
border-color: transparent;
background: linear-gradient(135deg, var(--brand-500, #00bfa5), var(--brand-600, #0f9e8e));
box-shadow: 0 4px 12px rgba(0, 191, 165, .28);
cursor: default;
}
/* 上一页/下一页/总条数：a.a1 */
.pagination a.a1 {
color: var(--brand-600, #0f9e8e);
background: var(--brand-50, #e6fbf7);
border-color: rgba(0, 191, 165, .35);
font-weight: 700;
}
.pagination a.a1:hover {
background: var(--brand-500, #00bfa5);
color: #fff;
border-color: transparent;
}
/* 省略号 .. PHPCMS 用纯文本 .. */
.pagination > .page-ellipsis,
.pagination > i {
border: 0;
background: transparent;
min-width: 20px;
padding: 0 2px;
color: var(--gray-400, #9ca3af);
box-shadow: none;
}
@media (max-width: 768px) {
.pagination a, .pagination span { min-width: 32px; height: 32px; padding: 0 9px; font-size: .8rem; }
.pagination { gap: 4px; margin-top: 20px; }
}