.article-page{min-height:100vh;background-color:#f5f7fa;padding:20px 0}.article-page .article-container{max-width:1000px;margin:0 auto;background:#fff;box-shadow:0 4px 20px rgba(80,90,179,.08);border:1px solid rgba(80,90,179,.1)}.article-page .article-hero{width:100%;height:400px;overflow:hidden;position:relative}.article-page .article-hero .hero-image{width:100%;height:100%;background:linear-gradient(135deg,#6b7280,#4b5563);display:flex;align-items:center;justify-content:center;position:relative}.article-page .article-hero .hero-image img{width:100%;height:100%;object-fit:cover}.article-page .article-hero .hero-image .placeholder-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.article-page .article-hero .hero-image .placeholder-image .image-placeholder{font-size:64px;color:hsla(0,0%,100%,.7);filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.article-page .article-hero:after,.article-page .article-hero:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}.article-page .article-hero:before{background:linear-gradient(45deg,transparent 49%,rgba(255,255,255,.8) 49.5%,rgba(255,255,255,.8) 50.5%,transparent 51%)}.article-page .article-hero:after{background:linear-gradient(-45deg,transparent 49%,rgba(255,255,255,.8) 49.5%,rgba(255,255,255,.8) 50.5%,transparent 51%)}.article-page .article-content{padding:60px 40px}.article-page .article-content .content-wrapper{max-width:800px;margin:0 auto}.article-page .article-content .article-title{font-size:32px;font-weight:700;color:#4a5bb7;text-align:center;margin-bottom:50px;line-height:1.3}.article-page .article-content .article-body{display:flex;flex-direction:column;gap:40px}.article-page .article-content .article-body .text-blocks{display:flex;flex-direction:column;gap:20px}.article-page .article-content .article-body .text-block{height:20px;background:#000;border-radius:2px}.article-page .article-content .article-body .text-block:first-child{width:100%}.article-page .article-content .article-body .text-block:nth-child(2){width:85%}.article-page .article-content .article-body .text-block:nth-child(3){width:95%}.article-page .article-content .article-body .text-block:nth-child(4){width:80%}.article-page .article-content .article-description{font-size:18px;line-height:1.7;color:#374151}.article-page .article-content .article-description p{margin:0 0 24px;text-align:justify}.article-page .article-content .article-description h2{font-size:28px;font-weight:600;color:#1f2937;margin:40px 0 20px;line-height:1.3}.article-page .article-content .article-description h3{font-size:24px;font-weight:600;color:#374151;margin:32px 0 16px;line-height:1.4}.article-page .article-content .article-description h4{font-size:20px;font-weight:600;color:#4b5563;margin:24px 0 12px;line-height:1.4}.article-page .article-content .article-description ol,.article-page .article-content .article-description ul{margin:0 0 24px;padding-left:24px}.article-page .article-content .article-description ol li,.article-page .article-content .article-description ul li{margin:8px 0;line-height:1.6}.article-page .article-content .article-description a{color:#4f46e5;text-decoration:none;border-bottom:1px solid rgba(0,0,0,0);transition:all .2s ease}.article-page .article-content .article-description a:hover{color:#3730a3;border-bottom-color:#3730a3}.article-page .article-content .article-description code{background-color:#f3f4f6;color:#1f2937;padding:2px 6px;border-radius:4px;font-family:Monaco,Menlo,monospace;font-size:14px}.article-page .article-content .article-description blockquote{border-left:4px solid #e5e7eb;margin:24px 0;padding:16px 24px;background-color:#f9fafb;font-style:italic;color:#6b7280}.article-page .article-content .article-description img{max-width:100%;height:auto;border-radius:8px;margin:24px 0;box-shadow:0 4px 12px rgba(0,0,0,.1)}.article-page .article-content .article-description table{width:100%;border-collapse:collapse;margin:24px 0}.article-page .article-content .article-description table td,.article-page .article-content .article-description table th{padding:12px;text-align:left;border-bottom:1px solid #e5e7eb}.article-page .article-content .article-description table th{background-color:#f9fafb;font-weight:600;color:#374151}@media(max-width:968px){.article-page .article-content{padding:40px 30px}.article-page .article-content .content-wrapper .article-title{font-size:28px;margin-bottom:32px}.article-page .article-content .content-wrapper .article-description{font-size:16px}.article-page .article-content .content-wrapper .article-description h2{font-size:24px}.article-page .article-content .content-wrapper .article-description h3{font-size:20px}.article-page .article-content .content-wrapper .article-description h4{font-size:18px}}@media(max-width:640px){.article-page .article-content{padding:30px 20px}.article-page .article-content .content-wrapper .article-title{font-size:24px;margin-bottom:24px}.article-page .article-content .content-wrapper .article-description{font-size:16px}.article-page .article-content .content-wrapper .article-description h2{font-size:22px}.article-page .article-content .content-wrapper .article-description h3{font-size:18px}.article-page .article-content .content-wrapper .article-description h4{font-size:16px}.article-page .article-content .content-wrapper .article-description ol,.article-page .article-content .content-wrapper .article-description ul{padding-left:20px}}.article-page .related-articles{background:#f8f9ff;padding:60px 40px;border-top:1px solid rgba(80,90,179,.1)}.article-page .related-articles .related-container{max-width:800px;margin:0 auto}.article-page .related-articles .related-title{font-size:24px;font-weight:600;color:#1a1a1a;text-align:center;margin-bottom:40px;letter-spacing:.5px}.article-page .related-articles .related-grid{display:flex;gap:30px;justify-content:center}.article-page .related-articles .related-card{flex:1 1;max-width:250px;background:#fff;border-radius:12px;padding:20px;box-shadow:0 4px 15px rgba(80,90,179,.1);border:1px solid rgba(80,90,179,.08);transition:all .3s ease}.article-page .related-articles .related-card:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(80,90,179,.15)}.article-page .related-articles .related-image{width:100%;height:140px;background:linear-gradient(135deg,#d1d5db,#9ca3af);border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;overflow:hidden}.article-page .related-articles .related-image img{width:100%;height:100%;object-fit:cover;border-radius:8px}.article-page .related-articles .related-image .image-icon{font-size:32px;color:#6b7280;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.article-page .related-articles .related-content h4{font-size:16px;font-weight:600;color:#4a5bb7;margin:0 0 8px;line-height:1.3}.article-page .related-articles .related-content p{font-size:14px;color:#6b7280;margin:0;line-height:1.4}.article-page .article-footer{background:#fff;padding:30px 40px;text-align:center;border-top:1px solid rgba(80,90,179,.1)}.article-page .article-footer .footer-content{max-width:800px;margin:0 auto}.article-page .article-footer .footer-content span{font-size:18px;font-weight:500;color:#6b7280}.article-page .article-not-found{min-height:50vh;display:flex;align-items:center;justify-content:center;background:#f5f7fa}.article-page .article-not-found .container{text-align:center;padding:40px}.article-page .article-not-found .container h1{font-size:32px;color:#4a5bb7;margin:0}@media(max-width:968px){.article-page .article-hero{height:300px}.article-page .article-content{padding:40px 30px}.article-page .article-content .article-title{font-size:28px;margin-bottom:40px}.article-page .related-articles{padding:40px 30px}.article-page .related-articles .related-grid{flex-direction:column;gap:24px;align-items:center}.article-page .related-articles .related-card{max-width:300px;width:100%}.article-page .article-footer{padding:30px}}@media(max-width:640px){.article-page .article-hero{height:250px}.article-page .article-content{padding:30px 20px}.article-page .article-content .article-title{font-size:24px;margin-bottom:30px}.article-page .article-content .article-body{gap:30px}.article-page .article-content .article-body .text-blocks{gap:15px}.article-page .article-content .article-body .text-block{height:16px}.article-page .related-articles{padding:30px 20px}.article-page .related-articles .related-title{font-size:20px;margin-bottom:30px}.article-page .related-articles .related-image{height:120px}.article-page .article-footer{padding:20px}.article-page .article-footer .footer-content span{font-size:16px}}