.article-page{background:#fff;min-height:100vh}.article-hero{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);justify-content:center;align-items:center;height:70vh;min-height:600px;max-height:800px;display:flex;position:relative;overflow:hidden}.article-hero__image{z-index:1;position:absolute;inset:0}.article-hero__img{object-fit:cover;width:100%;height:100%}.article-hero__overlay{z-index:2;background:linear-gradient(#0000004d,#0009);position:absolute;inset:0}.article-hero__content{z-index:3;color:#fff;text-align:center;width:100%;padding:2rem 0;position:relative}.article-hero__text{max-width:800px;margin:0 auto;padding:0 1rem;animation:1s ease-out fadeInUp}.article-categories{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:1.5rem;display:flex}.article-category{text-transform:uppercase;letter-spacing:.5px;backdrop-filter:blur(10px);background:#fff3;border:1px solid #ffffff4d;border-radius:20px;padding:.4rem 1rem;font-size:.875rem;font-weight:500;transition:all .3s;display:inline-block}.article-category:hover{background:#ffffff4d;transform:translateY(-2px)}.article-meta{flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-top:2rem;display:flex}.article-meta__item svg{opacity:.9;width:16px;height:16px}.article-page__content{z-index:2;background:#fff;border-radius:clamp(1rem,3vw,2rem) clamp(1rem,3vw,2rem) 0 0;min-height:60vh;position:relative;box-shadow:0 -10px 40px #0000001a}.article-content__main{max-width:100%;margin:0 auto;padding:0 1rem}.article-content__meta{max-width:800px;margin:0 auto;padding:0 1rem}.article-content__meta .article-meta{box-shadow:none;background:0 0;border:none;justify-content:center;margin:0;padding:0}.article-content__meta .article-meta__item{color:#2d3748;background:#f8f9fa;border:1px solid #e2e8f0;transition:all .3s;box-shadow:0 2px 8px #00000014}.article-content__meta .article-meta__item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001f}.article-content__text{max-width:800px;margin:0 auto;padding:0 1rem}.blocks-content h1,.blocks-content h2,.blocks-content h3,.blocks-content h4,.blocks-content h5,.blocks-content h6{color:#1a202c;margin:clamp(1.5rem,4vw,2rem) 0 clamp(.5rem,2vw,1rem);font-weight:700;line-height:1.3}.blocks-content h1{color:#1a202c;border-bottom:3px solid #667eea;padding-bottom:.5rem;font-size:clamp(2rem,4vw + .5rem,2.5rem)}.blocks-content h2{color:#1a202c;font-size:clamp(1.75rem,3vw + .5rem,2rem)}.blocks-content h3{color:#1a202c;font-size:clamp(1.25rem,2.5vw + .25rem,1.5rem)}.blocks-content h4{color:#1a202c;font-size:clamp(1.125rem,2vw + .25rem,1.25rem)}.blocks-content h5{color:#1a202c;font-size:clamp(1rem,1.5vw + .125rem,1.125rem)}.blocks-content h6{color:#1a202c;font-size:clamp(.875rem,1vw + .125rem,1rem)}.blocks-content p{text-align:justify;margin:clamp(1rem,3vw,1.5rem) 0}.blocks-content ul,.blocks-content ol{margin:clamp(1rem,3vw,1.5rem) 0;padding-left:clamp(1.5rem,4vw,2rem)}.blocks-content li{margin:clamp(.25rem,1vw,.5rem) 0}.blocks-content blockquote{color:#2d3748;background:#f8f9fa;border-left:4px solid #667eea;border-radius:0 clamp(.25rem,1vw,.5rem) clamp(.25rem,1vw,.5rem) 0;margin:clamp(1.5rem,4vw,2rem) 0;padding:clamp(1rem,3vw,1.5rem) clamp(1.5rem,4vw,2rem);font-size:clamp(1rem,2vw,1.1rem);font-style:italic;position:relative}.blocks-content blockquote:before{content:"\"";color:#667eea;opacity:.3;font-size:4rem;position:absolute;top:-10px;left:10px}.blocks-content a{color:#667eea;border-bottom:2px solid #0000;text-decoration:none;transition:all .3s}.blocks-content a:hover{color:#764ba2;border-bottom-color:#764ba2}.blocks-content code{color:#d63384;background:#f1f3f4;border-radius:.25rem;padding:.2rem .4rem;font-family:Monaco,Consolas,monospace;font-size:.9em}.blocks-content pre{color:#f7fafc;background:#2d3748;border-radius:.5rem;margin:2rem 0;padding:1.5rem;overflow-x:auto;box-shadow:0 5px 15px #0000001a}.blocks-content pre code{color:inherit;background:0 0;padding:0}.article-comments{border-top:1px solid #e2e8f0;max-width:800px;margin:2rem auto 0;padding:3rem 0}.article-comments__title{color:#1a202c;text-align:center;margin-bottom:2rem;font-size:2rem;font-weight:700;position:relative}.article-comments__title:after{content:"";background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:2px;width:60px;height:3px;position:absolute;bottom:-10px;left:50%;transform:translate(-50%)}@media (min-width:1200px){.article-content__main,.article-content__meta{max-width:1200px;padding:0 2rem}.article-content__text{max-width:900px;padding:0 2rem}.article-content__meta .article-meta{justify-content:center;gap:2rem}.article-content__meta .article-meta__item{padding:.75rem 1.5rem;font-size:1rem}}@media (min-width:992px) and (max-width:1199px){.article-content__meta .article-meta{flex-wrap:wrap;justify-content:center;gap:1rem}.article-content__meta .article-meta__item{flex:0 auto;justify-content:center;min-width:180px}}@media (min-width:769px) and (max-width:991px){.article-content__meta .article-meta{flex-flow:wrap;justify-content:center;gap:1rem}.article-content__meta .article-meta__item{flex:0 auto;justify-content:center;min-width:160px}}@media (max-width:768px){.article-hero{height:60vh;min-height:450px;max-height:600px}.article-hero__title{font-size:2rem}.article-hero__description{font-size:1.1rem}.article-meta{gap:1rem}.article-meta__item{padding:.4rem .8rem;font-size:.875rem}.article-page__content{border-radius:1.5rem 1.5rem 0 0}.article-content{padding:2rem 0 1rem}.article-content__main,.article-content__meta,.article-content__text{padding:0 1rem}.article-content__meta .article-meta{flex-direction:column;align-items:center;gap:.75rem}.article-content__meta .article-meta__item{justify-content:center;width:auto;min-width:200px;padding:.6rem 1rem;font-size:.875rem}.blocks-content{font-size:1rem}.blocks-content h1{font-size:2rem}.blocks-content h2{font-size:1.75rem}.blocks-content h3{font-size:1.25rem}}@media (max-width:480px){.article-categories{gap:.25rem}.article-category{padding:.3rem .8rem;font-size:.75rem}.article-meta{flex-direction:column;align-items:center;gap:.75rem}.article-comments{padding:2rem 1rem}.article-hero{min-height:400px;max-height:500px}.article-content__main,.article-content__meta,.article-content__text{padding:0 .75rem}.article-content__meta .article-meta{gap:.5rem}.article-content__meta .article-meta__item{text-align:center;min-width:180px;padding:.5rem .8rem;font-size:.8rem}.article-content__meta .article-meta__item svg{width:14px;height:14px}}@media (max-width:375px){.article-hero{min-height:350px;max-height:450px}.article-hero__title{font-size:1.75rem}.article-hero__description{font-size:1rem}.article-content__main,.article-content__meta,.article-content__text{padding:0 .5rem}.article-content__meta .article-meta__item{justify-content:center;align-items:center;gap:.4rem;min-width:160px;padding:.4rem .6rem;font-size:.75rem;display:flex}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}html{scroll-behavior:smooth}.article-page.loading .article-hero__title,.article-page.loading .article-hero__description,.article-page.loading .blocks-content{color:#0000;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%) 0 0/200% 100%;border-radius:4px;animation:1.5s infinite loading}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.article-category:focus,.article-meta__item:focus{outline-offset:2px;outline:2px solid #667eea}::selection{color:#1a202c;background:#667eea33}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#5a67d8 0%,#6b46c1 100%)}.blocks-content table{border-collapse:collapse;background:#fff;border-radius:.75rem;width:100%;margin:2rem 0;overflow:hidden;box-shadow:0 4px 20px #0000001a}.blocks-content th,.blocks-content td{text-align:left;border-bottom:1px solid #e2e8f0;padding:1rem}.blocks-content th{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);font-weight:600}.blocks-content tr:hover{background:#f8f9fa}.blocks-content .button,.blocks-content .btn{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:.5rem;margin:.5rem 0;padding:.75rem 1.5rem;font-weight:600;text-decoration:none;transition:all .3s;display:inline-block}.blocks-content .button:hover,.blocks-content .btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 8px 25px #667eea4d}.article-hero__img,.article-category,.article-meta__item{will-change:transform}@media print{.article-page{background:#fff!important}.article-hero{page-break-inside:avoid}.blocks-content h1,.blocks-content h2,.blocks-content h3{page-break-after:avoid}.blocks-content img{max-width:100%!important;height:auto!important}}@media (prefers-reduced-motion:reduce){.article-hero__text,.blocks-content,.article-category,.article-meta__item{animation:none}.article-category:hover,.blocks-content a:hover{transform:none}}.article-flexible-container{box-sizing:border-box;width:100%;max-width:100%;margin:0 auto;padding:0 clamp(.5rem,2vw,2rem)}.article-hero__title{text-shadow:2px 2px 4px #0000004d;margin:0 0 1rem;font-size:clamp(1.75rem,4vw + 1rem,4rem);font-weight:700;line-height:1.2}.article-hero__description{opacity:.95;max-width:min(600px,90vw);margin:0 auto 2rem;font-size:clamp(1rem,2vw + .5rem,1.25rem);line-height:1.6}.blocks-content{color:#2d3748;font-size:clamp(1rem,1.5vw,1.125rem);line-height:1.8;animation:.8s ease-out .3s both fadeIn}.article-meta__item{color:#2d3748;backdrop-filter:blur(10px);background:#fffffff2;border:1px solid #fffc;border-radius:25px;flex-shrink:1;align-items:center;gap:.5rem;min-width:0;padding:clamp(.3rem,1vw,.5rem) clamp(.5rem,2vw,1rem);font-size:clamp(.75rem,1.5vw,.95rem);font-weight:500;transition:all .3s;display:flex;box-shadow:0 2px 8px #0000001a}@container (min-width:500px){.article-content__meta .article-meta{flex-flow:wrap}}@container (max-width:499px){.article-content__meta .article-meta{flex-direction:column}}.article-responsive-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(.5rem,2vw,1.5rem);width:100%;display:grid}.article-responsive-flex{flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(.5rem,2vw,1.5rem);display:flex}.blocks-content img{object-fit:cover;border-radius:clamp(.5rem,1vw,.75rem);max-width:100%;height:auto;margin:clamp(1rem,3vw,2rem) 0;box-shadow:0 10px 30px #0000001a}.article-content{padding:clamp(2rem,5vw,4rem) 0 clamp(1rem,3vw,2rem)}.article-page__content{border-radius:clamp(1rem,3vw,2rem) clamp(1rem,3vw,2rem) 0 0}
.reading-progress{z-index:1000;backdrop-filter:blur(10px);background:#fffffff2;border-bottom:1px solid #667eea1a;padding:.5rem 0;transition:transform .3s ease-out,opacity .3s ease-out;position:fixed;top:0;left:0;right:0}.reading-progress--desktop{opacity:0;transform:translateY(-100%)}.reading-progress--visible{opacity:1;transform:translateY(0)}@media (max-width:768px){.reading-progress{opacity:1!important;transform:translateY(0)!important}}.reading-progress__bar{background:#667eea1a;height:4px;position:relative;overflow:hidden}.reading-progress__fill{background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);border-radius:0 2px 2px 0;height:100%;transition:width .1s;box-shadow:0 0 10px #667eea4d}.reading-progress__info{color:#4a5568;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:.25rem 1rem;font-size:.75rem;font-weight:500;display:flex}.reading-progress__time{align-items:center;gap:.25rem;display:flex}.reading-progress__time:before{content:"📖";font-size:.875rem}.reading-progress__percentage{color:#667eea;font-weight:600}@media (max-width:768px){.reading-progress__info{padding:.25rem .5rem;font-size:.7rem}.reading-progress__time:before{font-size:.75rem}}@media (max-width:480px){.reading-progress__info{flex-direction:column;gap:.125rem;padding:.25rem}.reading-progress__time,.reading-progress__percentage{font-size:.65rem}}.reading-progress{animation:none}
.social-share{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;margin:3rem 0;padding:2rem;box-shadow:0 4px 6px #0000000d}.social-share__title{color:#1a202c;text-align:center;margin:0 0 1.5rem;font-size:1.5rem;font-weight:700;position:relative}.social-share__title:after{content:"";background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:1px;width:40px;height:2px;position:absolute;bottom:-8px;left:50%;transform:translate(-50%)}.social-share__buttons{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.social-share__button{cursor:pointer;color:#fff;border:none;border-radius:.75rem;justify-content:center;align-items:center;gap:.5rem;min-width:120px;padding:.75rem 1.25rem;font-size:.875rem;font-weight:600;text-decoration:none;transition:all .3s;display:flex;position:relative;overflow:hidden}.social-share__button:before{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);width:100%;height:100%;transition:left .6s;position:absolute;top:0;left:-100%}.social-share__button:hover:before{left:100%}.social-share__button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #00000026}.social-share__button:active{transform:translateY(0)}.social-share__button--native{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.social-share__button--telegram{background:linear-gradient(135deg,#08c 0%,#06a 100%)}.social-share__button--vk{background:linear-gradient(135deg,#4c75a3 0%,#395683 100%)}.social-share__button--whatsapp{background:linear-gradient(135deg,#25d366 0%,#1ebe57 100%)}.social-share__button--copy{background:linear-gradient(135deg,#48bb78 0%,#38a169 100%)}.social-share__button svg{flex-shrink:0;width:20px;height:20px}@media (max-width:768px){.social-share{margin:2rem 0;padding:1.5rem}.social-share__title{font-size:1.25rem}.social-share__buttons{gap:.75rem}.social-share__button{min-width:100px;padding:.625rem 1rem;font-size:.8rem}.social-share__button svg{width:18px;height:18px}}@media (max-width:480px){.social-share__buttons{flex-direction:column;align-items:center;gap:.5rem}.social-share__button{width:100%;max-width:280px}}.social-share{animation:.6s ease-out fadeInUp}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.social-share__button--copy.copied{background:linear-gradient(135deg,#38a169 0%,#2f855a 100%);animation:.3s ease-in-out pulse}