*{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;font-size:16px}
  body{font-family:'Segoe UI',Roboto,Arial,sans-serif;background:#f5f0e8;color:#2d2d2d;line-height:1.7}
  a{color:#0d5c46;text-decoration:none;transition:all .3s ease}
  a:hover{color:#c9a227;text-decoration:underline}
  img{max-width:100%;height:auto;border-radius:12px}
  .container{max-width:1200px;margin:0 auto;padding:0 20px}
  .top-header{background:linear-gradient(135deg,#0d5c46,#1a2e35);padding:15px 0;box-shadow:0 4px 20px rgba(0,0,0,.15);position:sticky;top:0;z-index:1000}
  .header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .my-logo{font-size:2.2rem;font-weight:900;color:#f5c518;letter-spacing:1px;text-shadow:2px 2px 4px rgba(0,0,0,.4);text-decoration:none}
  .my-logo:hover{color:#ffe066;text-decoration:none}
  .my-logo span{color:#fff;font-weight:300}
  .nav-toggle{display:none;background:none;border:2px solid #f5c518;color:#f5c518;font-size:1.5rem;padding:8px 14px;border-radius:8px;cursor:pointer}
  .main-nav{display:flex;gap:10px;flex-wrap:wrap}
  .main-nav a{color:#e0e0e0;padding:8px 16px;border-radius:20px;font-weight:600;font-size:.9rem;transition:all .3s}
  .main-nav a:hover{background:#f5c518;color:#1a2e35;text-decoration:none}
  .breadcrumb{background:#fff;padding:10px 0;border-bottom:1px solid #e0d8cf;font-size:.85rem}
  .breadcrumb .container{display:flex;flex-wrap:wrap;gap:6px;color:#888}
  .breadcrumb a{color:#0d5c46}
  .breadcrumb a:hover{color:#c9a227}
  .breadcrumb .sep{margin:0 4px;color:#ccc}
  .content-wrapper{display:grid;grid-template-columns:1fr 280px;gap:40px;padding:40px 0}
  .article-main{background:#fff;border-radius:16px;padding:40px;box-shadow:0 2px 24px rgba(0,0,0,.06)}
  .post-meta{display:flex;gap:20px;flex-wrap:wrap;color:#888;font-size:.85rem;border-bottom:1px solid #f0ece6;padding-bottom:20px;margin-bottom:30px}
  .post-meta i{margin-right:5px;color:#0d5c46}
  .updated-badge{background:#e8f5f0;color:#0d5c46;padding:4px 14px;border-radius:20px;font-weight:700;font-size:.8rem;display:inline-block}
  .content-image{width:100%;border-radius:12px;margin:30px 0;box-shadow:0 4px 20px rgba(0,0,0,.1)}
  .figure-caption{font-size:.85rem;color:#888;text-align:center;margin-top:-20px;margin-bottom:25px}
  h1{font-size:2.6rem;color:#1a2e35;line-height:1.2;margin-bottom:10px;font-weight:900}
  h2{font-size:1.9rem;color:#0d5c46;margin-top:50px;margin-bottom:20px;padding-bottom:10px;border-bottom:3px solid #f5c518;font-weight:800}
  h3{font-size:1.3rem;color:#1a2e35;margin-top:30px;margin-bottom:12px;font-weight:700}
  h4{font-size:1.05rem;color:#555;margin-top:20px;margin-bottom:10px;font-weight:700}
  p{margin-bottom:16px;font-size:.98rem}
  .highlight-box{background:linear-gradient(135deg,#f0f9f5,#e6f2ed);border-left:4px solid #0d5c46;padding:20px 25px;border-radius:0 12px 12px 0;margin:25px 0;font-style:italic}
  .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin:30px 0}
  .stat-card{background:#f8faf9;border-radius:12px;padding:25px;text-align:center;border:1px solid #e8f0ec;transition:transform .3s}
  .stat-card:hover{transform:translateY(-5px);box-shadow:0 6px 20px rgba(13,92,70,.1)}
  .stat-card .number{font-size:2.2rem;font-weight:900;color:#0d5c46;display:block}
  .stat-card .label{font-size:.85rem;color:#888;text-transform:uppercase;letter-spacing:1px}
  .tip-list{list-style:none;margin:20px 0}
  .tip-list li{position:relative;padding-left:30px;margin-bottom:12px;font-size:.95rem}
  .tip-list li::before{content:"\f0a4";font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;left:0;color:#f5c518;font-size:1rem}
  .table-wrap{overflow-x:auto;margin:30px 0}
  table{width:100%;border-collapse:collapse;font-size:.9rem}
  th{background:#0d5c46;color:#fff;padding:14px 16px;text-align:left;font-weight:600}
  td{padding:12px 16px;border-bottom:1px solid #f0ece6}
  tr:hover td{background:#f8faf9}
  .quote-block{border-left:5px solid #f5c518;padding:20px 30px;margin:30px 0;background:linear-gradient(135deg,#fffdf5,#fdf9ef);border-radius:0 12px 12px 0;font-size:1rem}
  .quote-block .quote-author{font-weight:700;color:#0d5c46;margin-top:10px;font-style:normal}
  .btn{display:inline-block;background:#0d5c46;color:#fff;padding:10px 24px;border-radius:25px;font-weight:600;border:none;cursor:pointer;transition:all .3s;font-size:.9rem}
  .btn:hover{background:#f5c518;color:#1a2e35;text-decoration:none;transform:scale(1.03)}
  .btn-secondary{background:#f5c518;color:#1a2e35}
  .btn-secondary:hover{background:#1a2e35;color:#fff}
  .sidebar{display:flex;flex-direction:column;gap:20px}
  .sidebar-card{background:#fff;border-radius:12px;padding:25px;box-shadow:0 2px 16px rgba(0,0,0,.05)}
  .sidebar-card h3{font-size:1.1rem;margin-top:0;border-bottom:2px solid #f5c518;padding-bottom:8px}
  .sidebar-card ul{list-style:none;margin-top:12px}
  .sidebar-card ul li{margin-bottom:10px;font-size:.88rem;border-bottom:1px dotted #eee;padding-bottom:8px}
  .sidebar-card ul li:last-child{border:none}
  .social-share{display:flex;gap:10px;margin-top:15px}
  .social-share a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#f0ece6;color:#555;transition:all .3s}
  .social-share a:hover{background:#0d5c46;color:#fff;transform:translateY(-3px)}
  .search-section{background:linear-gradient(135deg,#1a2e35,#0d5c46);padding:40px 0;margin:40px 0 0}
  .search-box{display:flex;max-width:600px;margin:0 auto;border-radius:50px;overflow:hidden;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.2)}
  .search-box input{flex:1;border:none;padding:16px 24px;font-size:1rem;outline:none}
  .search-box button{background:#f5c518;border:none;padding:16px 30px;color:#1a2e35;font-size:1.1rem;cursor:pointer;transition:background .3s}
  .search-box button:hover{background:#ffe066}
  .comments-section{background:#f8faf9;padding:40px 0;border-top:1px solid #e0d8cf}
  .comments-container,.rating-container{background:#fff;border-radius:12px;padding:30px;max-width:900px;margin:0 auto;box-shadow:0 2px 16px rgba(0,0,0,.05)}
  .form-group{margin-bottom:18px}
  .form-group label{display:block;font-weight:600;margin-bottom:6px;color:#333}
  .form-group input,.form-group textarea{width:100%;padding:12px 18px;border:2px solid #e8e2da;border-radius:8px;font-size:.95rem;transition:border-color .3s}
  .form-group input:focus,.form-group textarea:focus{outline:none;border-color:#0d5c46}
  .form-group textarea{min-height:120px;resize:vertical}
  .rating-stars{display:flex;gap:8px;font-size:1.6rem;color:#ddd;cursor:pointer;user-select:none}
  .rating-stars i.active,.rating-stars i:hover{color:#f5c518}
  footer{background:#1a2e35;color:#ccc;padding:50px 0 20px;margin-top:0}
  footer a{color:#ccc}
  footer a:hover{color:#f5c518}
  .footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;margin-bottom:30px}
  .footer-col h4{color:#fff;font-size:1.1rem;margin-bottom:15px;border-bottom:2px solid #f5c518;padding-bottom:8px}
  .footer-col ul{list-style:none}
  .footer-col ul li{margin-bottom:8px;font-size:.88rem}
  friend-link{display:block;border:1px solid #334;padding:20px;border-radius:12px;margin:20px 0;background:#222c31;font-size:.9rem}
  friend-link a{color:#f5c518;margin-right:15px}
  friend-link a:hover{color:#fff}
  .copyright{text-align:center;padding-top:20px;border-top:1px solid #334;font-size:.8rem;color:#aaa}
  .breadcrumb .container a[href="/"]::before{content:"\f015";font-family:'Font Awesome 6 Free';font-weight:900;margin-right:5px}
  @media(max-width:992px){
    .content-wrapper{grid-template-columns:1fr}
    .sidebar{order:-1}
  }
  @media(max-width:768px){
    .nav-toggle{display:block}
    .main-nav{display:none;width:100%;flex-direction:column;text-align:center;padding-top:10px}
    .main-nav.open{display:flex}
    .main-nav a{padding:12px;border-radius:8px;background:rgba(255,255,255,.05)}
    h1{font-size:1.8rem}
    h2{font-size:1.4rem}
    .article-main{padding:20px}
    .header-inner{padding:0 10px}
    .stat-grid{grid-template-columns:1fr 1fr}
  }
  @media(max-width:480px){
    .stat-grid{grid-template-columns:1fr}
    .post-meta{flex-direction:column;gap:8px}
  }