.article-page{width:100%;min-height:100vh;background-color:var(--base-100)}.article-hero{position:relative;width:100%;max-width:1200px;margin:2rem auto 0;aspect-ratio:21/9;overflow:hidden;border-radius:12px}.article-hero-image,.article-hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%}.article-hero-overlay{background:linear-gradient(180deg,rgba(0,0,0,.3) 0,rgba(0,0,0,.6))}.article-hero-content{position:absolute;bottom:0;left:0;right:0;padding:3rem 2rem;color:white;z-index:1}.article-meta{display:flex;gap:1rem;margin-bottom:1rem;font-size:.875rem;flex-wrap:wrap}.article-category{padding:.25rem .75rem;background-color:rgba(255,255,255,.2);border-radius:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.article-date,.article-views{opacity:.9}.article-title{font-size:2.5rem;font-weight:700;line-height:1.2;letter-spacing:.02em;margin:0;max-width:900px}.article-content{padding:4rem 2rem}.article-layout{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 350px;grid-gap:3rem;gap:3rem}.article-main{max-width:800px}.article-section{margin-bottom:3rem}.article-description{font-size:1.125rem;line-height:1.8;color:var(--base-400);padding-bottom:2rem;border-bottom:1px solid var(--base-200)}.article-section h2{font-size:1.75rem;font-weight:700;margin:2.5rem 0 1.5rem;line-height:1.3;letter-spacing:.02em;color:white;background-color:#0137B5;padding:1rem 1.5rem;border-top:3px solid #0137b5;border-bottom:3px solid #0137b5;position:relative}.article-section h2:before{top:-8px}.article-section h2:after,.article-section h2:before{content:"";position:absolute;left:0;right:0;height:3px;background-color:#0137B5}.article-section h2:after{bottom:-8px}.article-section-image{margin:2rem 0;border-radius:.75rem;overflow:hidden}.article-image-caption{margin-top:.75rem;font-size:.875rem;color:var(--base-300);text-align:center;font-style:italic}.article-section-content{font-size:1rem;line-height:1.8;color:var(--base-400)}.article-section-content p{margin-bottom:1.5rem}.article-section-content ol,.article-section-content ul{margin:1.5rem 0;padding-left:2rem}.article-section-content li{margin-bottom:.75rem;line-height:1.8}.article-keywords h3,.article-section-content strong{font-weight:600;color:var(--base-400)}.article-keywords h3{font-size:1.25rem;margin-bottom:1rem}.article-keywords-list{display:flex;flex-wrap:wrap;gap:.75rem}.article-keyword{padding:.5rem 1rem;background-color:var(--base-200);border-radius:1rem;font-size:.875rem;color:var(--base-400);transition:all .3s ease}.article-keyword:hover{background-color:var(--base-300);transform:translateY(-2px)}.article-sidebar{position:relative}.article-sidebar-sticky{position:-webkit-sticky;position:sticky;top:2rem}.article-sidebar h3{font-size:1.25rem;font-weight:700;margin-bottom:1.5rem;color:var(--base-400);letter-spacing:.02em}.article-related-list{display:flex;flex-direction:column;gap:1.5rem}.article-related-item{display:block;text-decoration:none;color:inherit;transition:transform .3s ease;border-radius:.75rem;overflow:hidden;background-color:white;box-shadow:0 2px 8px rgba(0,0,0,.05)}.article-related-item:hover{transform:translateY(-4px);box-shadow:0 8px 16px rgba(0,0,0,.1)}.article-related-image{position:relative;width:100%;aspect-ratio:16/9}.article-related-content{padding:1rem}.article-related-category{display:inline-block;padding:.25rem .75rem;background-color:var(--base-200);border-radius:1rem;font-size:.75rem;margin-bottom:.5rem;color:var(--base-400)}.article-related-content h4{font-size:.95rem;font-weight:600;line-height:1.4;letter-spacing:.02em;color:var(--base-400);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}@media (max-width:1024px){.article-layout{grid-template-columns:1fr;gap:3rem}.article-sidebar-sticky{position:static}.article-related-list{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1.5rem;gap:1.5rem}}@media (max-width:768px){.article-hero{height:50vh;min-height:300px}.article-hero-content{padding:2rem 1.5rem}.article-title{font-size:1.75rem}.article-content{padding:2rem 1.5rem}.article-section h2{font-size:1.5rem}.article-related-list{grid-template-columns:1fr}}@media (max-width:480px){.article-title{font-size:1.5rem}.article-meta{font-size:.75rem}.article-section h2{font-size:1.25rem}}.article-admin-fab{position:fixed;bottom:2rem;right:2rem;z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:.75rem}.article-admin-fab-btn{width:3.5rem;height:3.5rem;border-radius:50%;background-color:var(--base-400);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.2);transition:all .3s ease}.article-admin-fab-btn:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(0,0,0,.3)}.article-admin-fab-btn.open{background-color:#ff3b30}.article-admin-fab-btn svg{width:1.5rem;height:1.5rem;color:white}.article-admin-menu{display:flex;flex-direction:column;gap:.5rem;animation:fadeInUp .2s ease}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.article-admin-menu-item{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:.5rem;font-size:.9375rem;font-weight:500;text-decoration:none;cursor:pointer;border:none;transition:all .2s ease;white-space:nowrap}.article-admin-menu-item svg{width:1.125rem;height:1.125rem}.article-admin-menu-item.edit{background-color:#007aff;color:white}.article-admin-menu-item.edit:hover{background-color:#0056b3}.article-admin-menu-item.delete{background-color:#ff3b30;color:white}.article-admin-menu-item.delete:hover{background-color:#d63028}.article-admin-menu-item.delete:disabled{opacity:.6;cursor:not-allowed}@media (max-width:768px){.article-admin-fab{bottom:1.5rem;right:1.5rem}.article-admin-fab-btn{width:3rem;height:3rem}.article-admin-fab-btn svg{width:1.25rem;height:1.25rem}.article-admin-menu-item{padding:.625rem .875rem;font-size:.875rem}}.article-delete-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem;animation:modalFadeIn .2s ease}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.article-delete-modal{background-color:white;border-radius:1rem;padding:2rem;max-width:400px;width:100%;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.2);animation:modalSlideUp .3s ease}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.article-delete-modal-icon{width:4rem;height:4rem;margin:0 auto 1.5rem;background-color:#fff5f5;border-radius:50%;display:flex;align-items:center;justify-content:center}.article-delete-modal-icon svg{width:2rem;height:2rem;color:#ff3b30}.article-delete-modal-title{font-size:1.25rem;font-weight:700;color:var(--base-400);margin:0 0 .75rem}.article-delete-modal-message{font-size:.9375rem;color:var(--base-300);line-height:1.6;margin:0 0 1.5rem}.article-delete-modal-error{font-size:.875rem;color:#ff3b30;background-color:#fff5f5;padding:.75rem 1rem;border-radius:.5rem;margin:0 0 1.5rem}.article-delete-modal-actions{display:flex;gap:.75rem}.article-delete-modal-btn{flex:1 1;padding:.875rem 1.5rem;border-radius:.5rem;font-size:.9375rem;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.article-delete-modal-btn.cancel{background-color:var(--base-200);color:var(--base-400)}.article-delete-modal-btn.cancel:hover{background-color:var(--base-300)}.article-delete-modal-btn.confirm{background-color:#ff3b30;color:white}.article-delete-modal-btn.confirm:hover{background-color:#d63028}.article-delete-modal-btn:disabled{opacity:.6;cursor:not-allowed}@media (max-width:480px){.article-delete-modal{padding:1.5rem}.article-delete-modal-title{font-size:1.125rem}.article-delete-modal-message{font-size:.875rem}.article-delete-modal-actions{flex-direction:column}.article-delete-modal-btn{width:100%}}