* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary-color: #1a5e1a; --primary-light: #2d7a2d;
  --secondary-color: #3d8a3d; --accent-color: #7cb342; --accent-light: #a5d6a7;
  --text-dark: #1a1a1a; --text-medium: #4a5568; --text-light: #718096;
  --bg-white: #ffffff; --bg-light: #f7fafc; --bg-lighter: #fafbfc; --bg-green-light: #f0f9f0;
  --border-light: #edf2f7;
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.1); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);
  --transition-fast: 150ms cubic-bezier(0.4,0,0.2,1); --transition-base: 250ms cubic-bezier(0.4,0,0.2,1);
  --sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:20px;--sp6:24px;--sp8:32px;--sp10:40px;--sp12:48px;--sp16:64px;--sp20:80px;
  --r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:24px;
}
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: 'Inter', sans-serif; line-height: 1.7; color: var(--text-dark); background-color: var(--bg-lighter); font-size: 16px; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4 { font-family: 'Playfair Display', Georgia, serif; line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(2rem,5vw,3rem); margin-bottom: var(--sp8); }
h2 { font-size: clamp(1.5rem,3vw,2rem); margin-bottom: var(--sp6); color: var(--primary-color); }
h3 { font-size: clamp(1.2rem,2.5vw,1.5rem); margin-bottom: var(--sp4); }
h4 { font-size: 1.1rem; color: var(--primary-color); margin-bottom: var(--sp4); font-weight: 600; }
a { color: var(--secondary-color); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--primary-color); }
p { margin-bottom: var(--sp5); color: var(--text-medium); line-height: 1.8; }
ul,ol { padding-left: var(--sp8); margin-bottom: var(--sp5); color: var(--text-medium); }
li { margin-bottom: var(--sp2); line-height: 1.7; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp6); }
.header { background: var(--bg-white); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid var(--border-light); }
.nav-container { max-width: 1200px; margin: 0 auto; padding: var(--sp4) var(--sp6); display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; gap: var(--sp3); font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: var(--primary-color); }
.nav-menu { display: flex; list-style: none; gap: var(--sp8); align-items: center; }
.nav-menu a { color: var(--text-medium); font-weight: 500; font-size: 0.9375rem; }
.nav-menu a:hover { color: var(--primary-color); }
.menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: var(--sp2); }
.menu-toggle span { display: block; width: 26px; height: 2px; background-color: var(--primary-color); border-radius: 2px; }
.progress-bar { position: absolute; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--secondary-color), var(--accent-color)); width: 0; transition: width var(--transition-fast); }
.breadcrumb { font-size: 0.875rem; color: var(--text-light); margin-bottom: var(--sp6); display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp2); }
.breadcrumb a { color: var(--text-medium); }
.article-container { padding: var(--sp12) 0 var(--sp20); }
.article-meta-top { display: flex; align-items: center; gap: var(--sp5); margin-bottom: var(--sp6); flex-wrap: wrap; }
.category { display: inline-flex; align-items: center; padding: var(--sp1) var(--sp4); background: linear-gradient(135deg, var(--accent-color), var(--secondary-color)); color: white; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; border-radius: 20px; letter-spacing: 0.5px; }
.date, .reading-time { font-size: 0.875rem; color: var(--text-light); }
.article-image-wrapper { width: 100%; height: 480px; overflow: hidden; border-radius: var(--r-xl); box-shadow: var(--shadow-xl); margin-bottom: var(--sp12); }
.article-image { width: 100%; height: 100%; object-fit: cover; }
.content-wrapper { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp16); align-items: start; }
.main-content { min-width: 0; }
.lead { font-size: clamp(1.1rem,2vw,1.3rem); line-height: 1.8; color: var(--text-medium); border-left: 4px solid var(--accent-color); padding-left: var(--sp6); margin-bottom: var(--sp8); }
.table-of-contents { background: linear-gradient(135deg, var(--bg-green-light), var(--bg-light)); padding: var(--sp8); border-radius: var(--r-lg); margin-bottom: var(--sp12); border: 1px solid var(--border-light); }
.table-of-contents h2 { font-size: 1.4rem; margin-bottom: var(--sp5); }
.toc-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: var(--sp3); counter-reset: toc-counter; padding: 0; }
.toc-list li { counter-increment: toc-counter; }
.toc-list a { display: flex; align-items: center; gap: var(--sp3); padding: var(--sp3) var(--sp4); border-radius: var(--r-sm); color: var(--text-medium); font-weight: 500; background: white; border: 1px solid var(--border-light); transition: all var(--transition-base); font-size: 0.9rem; }
.toc-list a::before { content: counter(toc-counter); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; min-width: 24px; background: linear-gradient(135deg, var(--accent-color), var(--secondary-color)); color: white; border-radius: 50%; font-size: 0.75rem; font-weight: 700; }
.toc-list a:hover { transform: translateX(4px); border-color: var(--accent-color); color: var(--primary-color); }
.content-section { margin-bottom: var(--sp12); padding: var(--sp8); background: var(--bg-white); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); scroll-margin-top: 100px; }
.tips-box { background: linear-gradient(135deg, #fff9e6, #fff3cd); border-left: 4px solid #ffc107; padding: var(--sp5); border-radius: var(--r-sm); margin: var(--sp5) 0; font-size: 0.9375rem; color: var(--text-medium); }
.tips-box strong { color: #92400e; }
.warning-box { background: linear-gradient(135deg, #fff5f5, #fed7d7); border-left: 4px solid #fc8181; padding: var(--sp5); border-radius: var(--r-sm); margin: var(--sp5) 0; font-size: 0.9375rem; }
.warning-box strong { color: #c53030; }
.conclusion-section { background: linear-gradient(135deg, var(--bg-green-light), var(--bg-light)); padding: var(--sp10); border-radius: var(--r-lg); margin-bottom: var(--sp12); border: 1px solid var(--border-light); box-shadow: var(--shadow-md); }
.share-section { padding: var(--sp8); background: var(--bg-white); border-radius: var(--r-lg); border: 1px solid var(--border-light); margin-bottom: var(--sp8); }
.share-section h3 { margin-bottom: var(--sp5); font-size: 1.2rem; }
.share-buttons { display: flex; gap: var(--sp4); flex-wrap: wrap; }
.share-button { display: inline-flex; align-items: center; gap: var(--sp3); padding: var(--sp3) var(--sp6); border-radius: var(--r-md); border: none; cursor: pointer; font-weight: 600; font-size: 0.875rem; transition: all var(--transition-base); }
.share-button.facebook { background: #1877f2; color: white; }
.share-button.twitter { background: #1da1f2; color: white; }
.share-button.pinterest { background: #e60023; color: white; }
.share-button:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.sidebar { position: sticky; top: 100px; }
.sidebar-widget { background: var(--bg-white); border-radius: var(--r-lg); padding: var(--sp6); margin-bottom: var(--sp6); border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); }
.sidebar-widget h4 { border-bottom: 2px solid var(--accent-light); padding-bottom: var(--sp3); margin-bottom: var(--sp5); }
.author-widget { background: linear-gradient(135deg, var(--bg-green-light), var(--bg-white)); }
.author-info { display: flex; align-items: center; gap: var(--sp4); margin-bottom: var(--sp4); }
.author-avatar { font-size: 2.5rem; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--bg-green-light); border-radius: 50%; }
.author-bio { font-size: 0.875rem; color: var(--text-medium); line-height: 1.6; margin: 0; }
.article-info { display: flex; flex-direction: column; gap: var(--sp3); }
.info-item { display: flex; gap: var(--sp3); padding: var(--sp3); background: var(--bg-light); border-radius: var(--r-sm); }
.info-item strong { font-size: 0.8rem; color: var(--primary-color); display: block; }
.info-item span { font-size: 0.8rem; color: var(--text-medium); }
.related-articles { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp3); }
.related-articles a { display: flex; align-items: flex-start; gap: var(--sp3); color: var(--text-medium); font-size: 0.875rem; font-weight: 500; transition: all var(--transition-fast); }
.related-articles a:hover { color: var(--primary-color); transform: translateX(4px); }
.related-number { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; min-width: 22px; background: linear-gradient(135deg, var(--accent-color), var(--secondary-color)); color: white; border-radius: 50%; font-size: 0.7rem; font-weight: 700; }
.tip-widget { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: #fde68a; }
.tip-widget h4 { color: #92400e; border-color: #fde68a; }
.tip-widget p { color: #78350f; font-size: 0.875rem; margin: 0; }
.newsletter-widget { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); }
.newsletter-widget h4 { color: var(--accent-color); border-color: rgba(255,255,255,0.2); }
.newsletter-widget p { color: rgba(255,255,255,0.85); font-size: 0.875rem; margin-bottom: var(--sp4); }
.newsletter-form { display: flex; flex-direction: column; gap: var(--sp3); }
.newsletter-form input { padding: var(--sp3) var(--sp4); border-radius: var(--r-sm); border: none; font-size: 0.875rem; }
.newsletter-form button { padding: var(--sp3) var(--sp4); background: var(--accent-color); color: white; border: none; border-radius: var(--r-sm); font-weight: 600; cursor: pointer; }
.footer { background: linear-gradient(135deg, #1a2e1a, #0f1f0f); color: white; padding: var(--sp20) 0 var(--sp8); }
.footer-content { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: var(--sp12); margin-bottom: var(--sp12); }
.footer-logo { display: flex; align-items: center; gap: var(--sp3); font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; margin-bottom: var(--sp4); }
.footer-section h4 { margin-bottom: var(--sp5); color: var(--accent-color); }
.footer-section p { color: #cbd5e0; line-height: 1.8; }
.footer-section ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp3); }
.footer-section a { color: #cbd5e0; display: inline-block; transition: all var(--transition-fast); }
.footer-section a:hover { color: var(--accent-color); transform: translateX(4px); }
.footer-bottom { text-align: center; padding-top: var(--sp8); border-top: 1px solid rgba(255,255,255,0.1); color: #a0aec0; font-size: 0.875rem; }
.scroll-to-top { position: fixed; bottom: 32px; right: 32px; width: 48px; height: 48px; background: linear-gradient(135deg, var(--secondary-color), var(--accent-color)); color: white; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); transition: all var(--transition-base); opacity: 0; visibility: hidden; z-index: 999; font-size: 1.2rem; }
.scroll-to-top.visible { opacity: 1; visibility: visible; }
.scroll-to-top:hover { transform: translateY(-4px); }
@media (max-width: 1024px) { .content-wrapper { grid-template-columns: 1fr 280px; gap: var(--sp10); } }
@media (max-width: 768px) {
  .nav-menu { position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: var(--bg-white); flex-direction: column; padding: 80px 24px 24px; box-shadow: var(--shadow-xl); transition: right 0.35s; align-items: flex-start; gap: 24px; z-index: 999; }
  .nav-menu.active { right: 0; }
  .menu-toggle { display: flex; }
  .content-wrapper { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .article-image-wrapper { height: 280px; }
  .footer-content { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 480px) { .container { padding: 0 16px; } h1 { font-size: 1.8rem; } }