.main-content{background:white;margin:1.5rem 0;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.1);overflow:hidden}
.hero{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:2rem 1.5rem 1.5rem;color:white;text-align:center}
.hero-title{font-size:1.75rem;font-weight:800;margin-bottom:.5rem;line-height:1.2}
.hero-date{font-size:1rem;opacity:.9;margin-bottom:1.5rem}
.difficulty-selector{display:flex;background:rgba(255,255,255,.1);border-radius:50px;padding:.25rem;margin:1rem auto 0;max-width:320px;backdrop-filter:blur(10px)}
.difficulty-btn{flex:1;padding:.5rem 1rem;border:none;background:transparent;color:white;border-radius:50px;cursor:pointer;transition:all .3s;font-size:.875rem;font-weight:500}
.difficulty-btn[data-level=easy].active{background-color:#22c55e}
.difficulty-btn[data-level=medium].active{background-color:#f97316}
.difficulty-btn[data-level=hard].active{background-color:#ef4444}
.difficulty-btn:hover:not(.active){background:rgba(255,255,255,.15)}
.toc-difficulty-selector{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #e5e7eb}
.toc-difficulty-buttons{display:flex;gap:.5rem}
.toc-difficulty-btn{flex:1;padding:.375rem .5rem;border:1px solid #e5e7eb;background:white;border-radius:6px;cursor:pointer;transition:all .2s;font-size:.75rem;font-weight:500}
.toc-difficulty-btn[data-level=easy]{border-color:#22c55e;color:#22c55e}
.toc-difficulty-btn[data-level=easy].toc-active{background:#22c55e;color:white}
.toc-difficulty-btn[data-level=medium]{border-color:#f97316;color:#f97316}
.toc-difficulty-btn[data-level=medium].toc-active{background:#f97316;color:white}
.toc-difficulty-btn[data-level=hard]{border-color:#ef4444;color:#ef4444}
.toc-difficulty-btn[data-level=hard].toc-active{background:#ef4444;color:white}
.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:999;opacity:0;visibility:hidden;transition:all .3s}
.overlay.active{opacity:1;visibility:visible}
.article-content{padding:2rem 1.5rem}
.section{margin-bottom:2.5rem;scroll-margin-top:80px}
.section-title{font-size:1.375rem;font-weight:700;color:#1f2937;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.section-content p{margin-bottom:1rem}
.hint-card{background:#f0f9ff;border:1px solid #e0f2fe;border-left:4px solid #0ea5e9;border-radius:8px;padding:1.25rem;margin:1rem 0}
.hint-title{font-weight:600;color:#0c4a6e;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem;font-size:.95rem}
.hint-content{color:#075985;font-size:.9rem}
.spoiler-warning{background:linear-gradient(135deg,#fef3c7,#fde68a);border:2px solid #f59e0b;border-radius:12px;padding:1.5rem;margin:2rem 0;text-align:center}
.spoiler-title{color:#92400e;font-size:1.125rem;font-weight:700;margin-bottom:.75rem}
.spoiler-text{color:#78350f;margin-bottom:1rem;font-size:.9rem}
.reveal-btn{background:#f59e0b;color:white;border:none;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;transition:background .3s;font-size:.9rem}
.reveal-btn:hover{background:#d97706}
.solution-image-grid{display:grid;grid-template-columns:1fr;gap:2rem;margin:1.5rem 0;padding:1.5rem;background:#f8fafc;border-radius:8px}
.image-container{text-align:center}
.image-title{font-size:1rem;font-weight:600;color:#4b5563;margin-bottom:1rem}
.image-caption{margin-top:1rem;color:#6b7280;font-style:italic;font-size:.875rem}
.step-card{background:white;border:1px solid #e5e7eb;border-radius:8px;padding:1.5rem;margin:1rem 0;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.step-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:.75rem}
.step-number{background:#2563eb;color:white;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;flex-shrink:0}
.step-title{font-size:1rem;font-weight:600;color:#1f2937;line-height:1.3}
.step-content{margin-left:3rem;color:#4b5563;font-size:.9rem;line-height:1.6;text-align:left;}
.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1.5rem}
.tip-card{background:#f0f9ff;border-radius:8px;padding:1rem;border-left:3px solid #3b82f6}
.tip-title{font-weight:600;color:#1e40af;margin-bottom:.5rem;font-size:.875rem}
.tip-content{color:#1e3a8a;font-size:.8rem;line-height:1.5}
.post-content-footer{margin-top:3rem;padding-top:2rem;border-top:1px solid #e5e7eb}
.keep-learning,.more-reading,.comments-section{margin-bottom:2.5rem}
.learning-grid,.more-reading-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
.learning-card,.reading-card{display:flex;flex-direction:column;background:white;border:1px solid #e5e7eb;border-radius:12px;padding:1.5rem;text-decoration:none;color:inherit;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:all .3s ease}
.learning-card:hover,.reading-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px -5px rgba(37,99,235,.1);border-color:#a5b4fc}
.learning-card-header{margin-bottom:.75rem}
.learning-card-header h4{font-size:1.125rem;font-weight:600;color:#1f2937}
.learning-card p{font-size:.9rem;color:#4b5563;line-height:1.6}
.card-header{margin-bottom:1rem}
.card-tag{display:inline-block;font-size:.75rem;font-weight:600;padding:.25rem .75rem;border-radius:20px;background-color:#eef2ff;color:#4338ca;margin-bottom:.75rem}
.card-title{font-size:1.25rem;font-weight:600;color:#1f2937}
.card-excerpt{font-size:.9rem;color:#4b5563;line-height:1.6;flex-grow:1;margin-bottom:1.5rem}
.card-link{font-weight:600;color:#2563eb;align-self:flex-start}
.reading-card.featured{background:#eef2ff;border-color:#a5b4fc}
.reading-card.featured .card-tag{background-color:#2563eb;color:white}
.comment-form{margin-bottom:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid #e5e7eb}
.comment-form-title{font-size:1.25rem;font-weight:600;margin-bottom:1rem;color:#1f2937}
.comment-form .form-row{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:1rem}
.comment-form .form-group{display:flex;flex-direction:column}
.comment-form label{font-size:.875rem;font-weight:500;color:#374151;margin-bottom:.5rem}
.comment-form label .required{color:#ef4444}
.comment-form input[type=text],.comment-form input[type=email],.comment-form textarea{width:100%;padding:.75rem 1rem;border:1px solid #d1d5db;border-radius:8px;font-size:1rem;font-family:inherit;transition:border-color .2s,box-shadow .2s}
.comment-form textarea{resize:vertical;line-height:1.6}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.form-actions{display:flex;justify-content:flex-end}
.submit-comment-btn{margin-top:0.5rem;background-color:#2563eb;color:white;border:none;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;transition:background-color .3s}
.submit-comment-btn:hover{background-color:#1d4ed8}
.comment-list{display:flex;flex-direction:column;gap:1.5rem}
.comment-card{display:flex;align-items:flex-start;gap:1rem}
.comment-avatar{width:48px;height:48px;border-radius:50%;flex-shrink:0}
.comment-body{flex-grow:1}
.comment-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.comment-author{font-weight:600;color:#1f2937}
.comment-date{font-size:.8rem;color:#6b7280}
.comment-text{color:#4b5563;line-height:1.7}
.load-more-container{text-align:center;margin-top:2rem;padding-top:2rem;border-top:1px solid #e5e7eb}
.load-more-btn{background:#f3f4f6;border:1px solid #e5e7eb;padding:.75rem 2rem;border-radius:8px;font-weight:500;color:#374151;cursor:pointer;transition:all .2s ease}
.load-more-btn:hover{background:#e5e7eb;border-color:#d1d5db}
.no-comments{text-align:center;padding:2rem;background:#f8fafc;border-radius:8px;color:#6b7280}
.no-comments p:first-child{font-size:1.25rem;margin-bottom:.5rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
@media (min-width:768px){.solution-image-grid{grid-template-columns:1fr 1fr;gap:1.5rem}.learning-grid{grid-template-columns:1fr 1fr}.more-reading-grid{grid-template-columns:repeat(3,1fr)}.comment-form .form-row{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.reading-card.featured{transform:scale(1.05)}.reading-card.featured:hover{transform:scale(1.1) translateY(-5px)}}
@media (max-width:768px){.main-layout{display:block}.toc-toggle{left:0}.container{padding:0 .75rem}.hero-title{font-size:1.5rem}.article-content{padding:1.5rem 1rem}.section-title{font-size:1.25rem}.step-content{margin-left:0;margin-top:.75rem}.tips-grid{grid-template-columns:1fr}.toc-sidebar{width:80%}.difficulty-selector{max-width:280px}.difficulty-btn{padding:.45rem .75rem;font-size:.8rem}}
@media (max-width:480px){.hero{padding:1.5rem 1rem}.hero-title{font-size:1.375rem}.article-content{padding:1rem .75rem}.section{margin-bottom:2rem}.hint-card,.step-card{padding:1rem}.spoiler-warning{padding:1.25rem}}

.img-solution { width: 350px; height: 500px; }
@media (max-width:768px){
    .img-solution { width: 100%; height: 300px; }
}
.comment-card {border-bottom: 1px dashed #ccc;padding: 10px 0;}
.comment-actions {margin-top: 10px;}
.comment-actions button {margin-right: 10px;padding: 4px 8px;border: 1px solid #ccc;background: #f9f9f9;cursor: pointer;border-radius: 4px;transition: background 0.2s;}
.comment-actions button:hover {background: #eee;}