/* Reading页面优化CSS - 延迟加载部分 */
.plans-section{margin-top:60px;padding:60px 20px;background:linear-gradient(145deg,rgba(196,167,111,0.03) 0%,rgba(196,167,111,0.01) 100%);border-top:1px solid rgba(196,167,111,0.1);position:relative;overflow:hidden}
.plans-section::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(196,167,111,0.2),transparent)}
.plans-header{text-align:center;margin-bottom:50px;animation:fadeInUp 0.8s ease-out 0.4s both}
.plans-header h2{font-size:clamp(1.8rem,4vw,2.5rem);margin:0;font-weight:300;letter-spacing:0.5px;position:relative}
.plans-header .subtitle{font-size:clamp(1.1rem,2.5vw,1.4rem);color:#c4a76f;font-weight:400;letter-spacing:0.8px}
.plans-header p{font-size:clamp(0.95rem,2.2vw,1.1rem);color:#d4c39c;margin-top:15px;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.7}
.plans-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px;max-width:1000px;margin:0 auto;animation:fadeInUp 0.8s ease-out 0.6s both}
.plan{background:linear-gradient(145deg,#1f1d1a 0%,#2a2724 100%);border:1px solid rgba(196,167,111,0.15);border-radius:18px;padding:35px 28px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,0.3);position:relative;overflow:hidden;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.plan::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(196,167,111,0.3),transparent);transform:scaleX(0);transition:transform 0.3s ease}
.plan:hover{transform:translateY(-8px);border-color:rgba(196,167,111,0.3);box-shadow:0 20px 40px rgba(0,0,0,0.4)}
.plan:hover::before{transform:scaleX(1)}
.plan h3{font-size:clamp(1.2rem,2.5vw,1.4rem);color:#f3e6c0;margin-bottom:15px;font-weight:600;letter-spacing:0.5px}
.plan .price{font-size:clamp(1.5rem,3vw,2rem);color:#c4a76f;margin:15px 0;font-weight:bold;text-shadow:0 0 10px rgba(196,167,111,0.3)}
.plan p{font-size:clamp(0.9rem,2vw,1rem);color:#d4c39c;line-height:1.6;margin:8px 0}
.plan .button{display:inline-block;margin-top:25px;padding:14px 28px;background:linear-gradient(135deg,#c4a76f 0%,#dfbe82 100%);color:#0e0d0c;font-weight:600;text-decoration:none;border-radius:10px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;box-shadow:0 4px 15px rgba(196,167,111,0.3)}
.plan .button::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s ease}
.plan .button:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(196,167,111,0.4)}
.plan .button:hover::before{left:100%}
.best-seller{position:relative;overflow:visible}
.best-seller-badge{position:absolute;top:-8px;right:-8px;background:linear-gradient(135deg,#ff6b35 0%,#f7931e 100%);color:white;font-size:0.75rem;font-weight:bold;padding:6px 10px;border-radius:15px;box-shadow:0 4px 12px rgba(255,107,53,0.3);transform:rotate(15deg);z-index:10;animation:badgePulse 2s ease-in-out infinite;white-space:nowrap}
@keyframes badgePulse{0%,100%{transform:rotate(15deg) scale(1)}50%{transform:rotate(15deg) scale(1.05)}}
.navbar ul.desktop-menu li a::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(196,167,111,0.2),transparent);transition:left 0.5s ease;z-index:-1}
.navbar ul.desktop-menu li a:hover::before{left:100%}
.navbar ul.desktop-menu li a:hover,.mobile-nav a:hover{background:linear-gradient(135deg,rgba(196,167,111,0.15) 0%,rgba(196,167,111,0.05) 100%);color:#c4a76f;box-shadow:0 4px 12px rgba(196,167,111,0.2)}
.navbar ul.desktop-menu li a:focus,.mobile-nav a:focus{outline:2px solid #c4a76f;outline-offset:2px;border-radius:8px}
.navbar ul.desktop-menu li a.active{background:linear-gradient(135deg,rgba(196,167,111,0.2) 0%,rgba(196,167,111,0.1) 100%);color:#c4a76f}
.navbar .logo:hover{color:#dfbe82;text-shadow:0 0 15px rgba(196,167,111,0.5);transform:scale(1.05)}
html{scroll-behavior:smooth}
::selection{background:rgba(196,167,111,0.3);color:#f3e6c0}
.plan .button:focus{outline:2px solid #c4a76f;outline-offset:2px}
@media (max-width:767px){.mobile-nav a{color:#f3e6c0;text-decoration:none;font-size:0.85rem;padding:10px 12px;border-radius:8px;transition:all 0.3s ease;display:block;position:relative;z-index:1;cursor:pointer;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;text-align:center;flex:1;max-width:80px}}
@media (max-width:768px){body{padding:15px}.plans-section{margin-top:50px;padding:50px 15px}.plans-header{margin-bottom:40px}.plans-container{grid-template-columns:1fr;gap:25px;max-width:400px}.plan{padding:30px 25px;border-radius:16px}.plan h3{margin-bottom:12px}.plan .price{margin:12px 0}.plan .button{margin-top:20px;padding:12px 24px}.best-seller-badge{font-size:0.65rem;padding:5px 8px;top:-6px;right:-6px;border-radius:12px}}
@media (max-width:480px){body{padding:10px}.plans-section{margin-top:40px;padding:40px 12px}.plans-header{margin-bottom:35px}.plans-header h2{font-size:1.6rem}.plans-header .subtitle{font-size:1rem}.plans-header p{font-size:0.9rem;margin-top:12px}.plans-container{gap:20px}.plan{padding:25px 20px}.plan h3{font-size:1.1rem;margin-bottom:10px}.plan .price{font-size:1.4rem;margin:10px 0}.plan p{font-size:0.85rem;margin:6px 0}.plan .button{margin-top:18px;padding:10px 20px;font-size:0.9rem}.best-seller-badge{font-size:0.6rem;padding:4px 6px;top:-4px;right:-4px;border-radius:10px}}
@media (min-width:769px) and (max-width:1024px){.plans-container{grid-template-columns:repeat(2,1fr);max-width:800px}.plan{padding:32px 26px}}
@media (min-width:1025px){.plans-container{grid-template-columns:repeat(3,1fr);max-width:1000px}.plan{padding:35px 28px}.plan:hover{transform:translateY(-10px);box-shadow:0 25px 50px rgba(0,0,0,0.5)}}