* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --color-primary: #ff6b9d;
    --color-secondary: #c44569;
    --color-accent: #ffa07a;
    --color-text: #2d3436;
    --color-text-light: #636e72;
    --color-bg: #fff;
    --color-bg-alt: #fef5f7;
    --spacing: 8px;
    --transition: all 0.3s ease;
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.7; color: var(--color-text); background: var(--color-bg); }
.rvnktmw { background: var(--color-bg); box-shadow: 0 2px 15px rgba(255,107,157,0.1); position: sticky; top: 0; z-index: 1000; }
.qmvktnr { padding: calc(var(--spacing) * 2.5) 0; }
.wmvktnr { max-width: 1200px; margin: 0 auto; padding: 0 calc(var(--spacing) * 3); }
.qmvktnr .wmvktnr { display: flex; justify-content: space-between; align-items: center; }
.tvnkrmw { text-decoration: none; color: var(--color-primary); font-size: 1.6rem; font-weight: 700; }
.pnvkrtm { display: flex; list-style: none; gap: calc(var(--spacing) * 5); }
.pnvkrtm a { text-decoration: none; color: var(--color-text); font-weight: 500; transition: var(--transition); position: relative; }
.pnvkrtm a.zmvkrtn, .pnvkrtm a:hover { color: var(--color-primary); }
.pnvkrtm a::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--color-primary); transition: var(--transition); }
.pnvkrtm a.zmvkrtn::after, .pnvkrtm a:hover::after { width: 100%; }
.xvnktmr { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; }
.xvnktmr span { width: 28px; height: 3px; background: var(--color-primary); border-radius: 3px; transition: var(--transition); }
.nvmkrtw { background: var(--color-bg-alt); padding: calc(var(--spacing) * 3) 0; }
.tvnkmrw { display: flex; align-items: center; gap: calc(var(--spacing)); font-size: 0.95rem; color: var(--color-text-light); }
.tvnkmrw a { color: var(--color-primary); text-decoration: none; transition: var(--transition); }
.tvnkmrw a:hover { color: var(--color-secondary); }
.wmvkrtn { padding: calc(var(--spacing) * 10) 0; }
.wvnktrm { font-size: 2.8rem; text-align: center; margin-bottom: calc(var(--spacing) * 2); color: var(--color-text); font-weight: 700; line-height: 1.3; }
.xvmktnr { text-align: center; color: var(--color-text-light); font-size: 1.15rem; margin-bottom: calc(var(--spacing) * 8); line-height: 1.6; }
.pmvktnr { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: calc(var(--spacing) * 5); }
.qvmkrtn { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.08); transition: var(--transition); }
.qvmkrtn:hover { transform: translateY(-10px); box-shadow: 0 12px 35px rgba(255,107,157,0.2); }
.qvmkrtn .tvnkrmw { width: 100%; height: 280px; overflow: hidden; position: relative; }
.qvmkrtn .tvnkrmw img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.qvmkrtn:hover .tvnkrmw img { transform: scale(1.08); }
.rvnktmw { padding: calc(var(--spacing) * 4); }
.nvmkrtw { display: inline-block; padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5); background: var(--color-primary); color: white; border-radius: 20px; font-size: 0.85rem; font-weight: 600; margin-bottom: calc(var(--spacing) * 2); }
.rvnktmw h2 { font-size: 1.5rem; margin-bottom: calc(var(--spacing) * 2); color: var(--color-text); line-height: 1.3; }
.rvnktmw p { color: var(--color-text-light); line-height: 1.8; margin-bottom: calc(var(--spacing) * 3); }
.rvnktmw time { font-size: 0.9rem; color: var(--color-text-light); opacity: 0.8; }
.pmvktnr { background: var(--color-text); color: white; padding: calc(var(--spacing) * 10) 0 calc(var(--spacing) * 5); }
.pmvktnr .xvnkrtm { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: calc(var(--spacing) * 6); margin-bottom: calc(var(--spacing) * 6); }
.pmvktnr .nvmkrtw h3 { font-size: 1.3rem; margin-bottom: calc(var(--spacing) * 3); }
.pmvktnr .wmvkrtn { list-style: none; }
.pmvktnr .wmvkrtn li { margin-bottom: calc(var(--spacing) * 2); }
.pmvktnr .wmvkrtn a { color: white; text-decoration: none; opacity: 0.85; transition: var(--transition); }
.pmvktnr .wmvkrtn a:hover { opacity: 1; color: var(--color-accent); }
.pmvktnr .tvnkrmw { text-align: center; padding-top: calc(var(--spacing) * 5); border-top: 1px solid rgba(255,255,255,0.1); opacity: 0.7; }
.qvmkrtn { position: fixed; bottom: calc(var(--spacing) * 5); right: calc(var(--spacing) * 5); width: 55px; height: 55px; background: var(--color-primary); border: none; border-radius: 50%; cursor: pointer; opacity: 0; visibility: hidden; transition: var(--transition); z-index: 999; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 20px rgba(255,107,157,0.4); }
.qvmkrtn.nvmkrtw { opacity: 1; visibility: visible; }
.qvmkrtn:hover { background: var(--color-secondary); transform: translateY(-5px); }
.qvmkrtn svg { width: 26px; height: 26px; color: white; }
@media (max-width: 768px) {
    .pnvkrtm { position: fixed; top: 90px; left: -100%; width: 100%; height: calc(100vh - 90px); background: white; flex-direction: column; padding: calc(var(--spacing) * 5); transition: var(--transition); }
    .pnvkrtm.zmvkrtn { left: 0; }
    .xvnktmr { display: flex; }
    .pmvktnr { grid-template-columns: 1fr; }
}