*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth}
:root{
  --mine-green:#4CAF50;
  --mine-dark:#2E7D32;
  --mine-brown:#795548;
  --mine-dirt:#8D6E63;
  --mine-light:#C8E6C9;
  --mine-cream:#FFF8E1;
  --mine-stone:#607D8B;
  --mine-charcoal:#263238;
  --mine-gold:#FFC107;
  --shadow:0 4px 12px rgba(0,0,0,0.15);
  --radius:14px;
}
body{font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:#f5f0e8;color:#2e2e2e;line-height:1.75;font-size:16px;}
.container{max-width:1260px;margin:0 auto;padding:0 18px}
img{max-width:100%;height:auto;border-radius:12px}
.site-header{background:linear-gradient(135deg,#2E7D32 0%,#1b5e20 60%,#33691e 100%);color:#fff;position:sticky;top:0;z-index:1000;box-shadow:var(--shadow)}
.header-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 0}
.my-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-size:1.9rem;font-weight:800;letter-spacing:-0.5px;transition:transform .2s}
.my-logo:hover{transform:scale(1.02)}
.my-logo .logo-icon{background:var(--mine-gold);color:var(--mine-charcoal);border-radius:8px;padding:6px 10px;font-size:1.6rem;box-shadow:0 2px 6px rgba(0,0,0,0.3)}
.my-logo span small{display:block;font-size:.7rem;font-weight:300;letter-spacing:1px;opacity:.85}
.header-info{display:flex;align-items:center;gap:12px;font-size:.9rem}
.header-info .badge{background:rgba(255,255,255,0.18);padding:6px 14px;border-radius:30px;display:flex;align-items:center;gap:7px;font-weight:500;font-size:.85rem}
.desktop-nav{display:flex;align-items:center;gap:0;background:rgba(0,0,0,0.18);border-radius:30px;padding:0}
.desktop-nav a{color:#e8f5e9;text-decoration:none;padding:10px 18px;font-size:.95rem;font-weight:600;transition:background .2s,border-color .2s;border-radius:30px;border:2px solid transparent}
.desktop-nav a:hover{background:rgba(255,255,255,0.18);border-color:var(--mine-gold);color:#fff}
.nav-toggle{display:none;background:none;border:2px solid #fff;color:#fff;font-size:1.3rem;width:44px;height:44px;border-radius:10px;cursor:pointer;transition:all .2s}
.nav-toggle:hover{background:rgba(255,255,255,0.2)}
.additional-nav{width:100%;display:none;flex-wrap:wrap;gap:0;padding:8px 0 12px}
.additional-nav.open{display:flex}
.additional-nav a{color:#e8f5e9;text-decoration:none;padding:8px 14px;font-size:.9rem;border-radius:20px;font-weight:400}
.additional-nav a:hover{background:rgba(255,215,0,0.2);color:var(--mine-gold)}
.breadcrumb-wrap{background:#efebe9;border-bottom:1px solid #d7ccc8;font-size:.85rem}
.breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:9px 0;color:var(--mine-stone)}
.breadcrumb-list li{display:flex;align-items:center;gap:6px}
.breadcrumb-list li a{color:var(--mine-dark);text-decoration:none;font-weight:500}
.breadcrumb-list li a:hover{text-decoration:underline}
.breadcrumb-list li+li::before{content:"→";color:#bcaaa4;margin:0 4px}
.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;margin:32px 0 42px}
.main-area{min-width:0}
.sidebar{background:var(--mine-cream);border-radius:var(--radius);padding:24px 18px;border:1px solid #e6d0a0;position:sticky;top:80px;height:fit-content;box-shadow:var(--shadow)}
.card{background:#fff;border-radius:var(--radius);padding:28px 30px;margin-bottom:28px;box-shadow:0 3px 8px rgba(0,0,0,0.07);border:1px solid #e8e0d0}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin:20px 0}
.stat-item{background:linear-gradient(145deg,#f8fbf8,#eaf3ea);border-left:5px solid var(--mine-green);padding:16px;border-radius:10px;text-align:center}
.stat-item .num{font-size:2rem;font-weight:800;color:var(--mine-dark)}
.stat-item .label{font-size:.9rem;color:#555}
.highlight-box{background:#fff8e1;border-left:6px solid var(--mine-gold);padding:16px 18px;border-radius:0 12px 12px 0;margin:18px 0;font-size:.95rem}
.callout{background:#e8f5e9;border:1px solid #a5d6a7;border-radius:12px;padding:16px 18px;margin:22px 0;display:flex;gap:12px;align-items:flex-start}
.callout i{color:var(--mine-dark);margin-top:5px;font-size:1.2rem}
h1{font-size:2.4rem;color:var(--mine-charcoal);margin:0 0 8px;font-weight:800;line-height:1.25}
h2{font-size:1.9rem;color:var(--mine-dark);margin:12px 0 18px;padding-bottom:10px;border-bottom:3px solid var(--mine-light);position:relative;font-weight:700;display:flex;align-items:center;gap:12px}
h2::before{content:"⛏️";font-size:1.4rem}
h3{font-size:1.35rem;color:var(--mine-brown);margin:28px 0 10px;font-weight:700}
h4{font-size:1.1rem;color:var(--mine-dirt);margin:20px 0 8px;font-weight:700}
table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.94rem;background:#fff;border-radius:10px;overflow:hidden}
thead{background:var(--mine-dark);color:#fff}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid #efebe9}
tbody tr:hover{background:#f1f8e9}
figure{margin:24px auto;text-align:center}
figcaption{font-size:.85rem;color:#777;margin-top:10px}
.article-img{border-radius:14px;box-shadow:var(--shadow);width:100%}
.sidebar h3{font-size:1.2rem;border-bottom:2px solid #ffd54f;padding-bottom:6px;margin-top:0;color:var(--mine-brown)}
.sidebar ul{list-style:none;margin:0;padding:10px 0}
.sidebar ul li{margin-bottom:4px}
.sidebar ul a{display:block;text-decoration:none;color:#444;padding:8px 10px;border-radius:8px;transition:all .2s;font-size:.95rem}
.sidebar ul a:hover{background:#ffe0b2;color:var(--mine-dark);transform:translateX(-4px);padding-left:14px}
.search-box, .comment-box, .rating-box{background:#fff8ee;border:1px solid #f0c27a;border-radius:14px;padding:18px;margin:18px 0;box-shadow:var(--shadow)}
.search-box input{width:100%;padding:11px 16px;border:2px solid #d7ccc8;border-radius:20px;outline:none;font-size:1rem;transition:border .2s}
.search-box input:focus{border-color:var(--mine-green)}
.search-btn{background:var(--mine-dark);border:none;color:#fff;width:100%;margin-top:10px;padding:9px;border-radius:30px;font-weight:600;cursor:pointer;transition:background .2s;font-size:.9rem}
.search-btn:hover{background:var(--mine-green)}
.btn{display:inline-block;background:var(--mine-dark);color:#fff;border:none;padding:10px 22px;border-radius:30px;font-weight:600;font-size:.95rem;cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn:hover{background:var(--mine-green);transform:scale(1.02);box-shadow:0 6px 14px rgba(0,0,0,0.18)}
.comment-list{list-style:none;padding:8px 0;margin-top:8px}
.comment-list li{background:#fff;border-radius:10px;padding:12px 14px;margin-bottom:12px;border:1px solid #eee;font-size:.95rem}
.comment-list .author{font-weight:700;color:var(--mine-dark);display:flex;align-items:center;gap:8px}
.rating-stars{display:flex;gap:6px;margin:12px 0;justify-content:center;direction:ltr}
.rating-stars i{color:var(--mine-gold);font-size:1.8rem;cursor:pointer;transition:transform .2s}
.rating-stars i:hover{transform:scale(1.3)}
.footer{background:linear-gradient(135deg,#263238,#37474F);color:#d0e0d0;margin-top:35px;padding:36px 0 0;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px;max-width:1220px;margin:0 auto;padding:0 20px}
.footer-bottom{background:rgba(0,0,0,0.3);padding:16px;margin-top:24px;text-align:center;color:#90a4ae}
.footer h4{color:var(--mine-gold);margin-bottom:12px;font-size:1.2rem}
.footer a{color:#b0bec5;text-decoration:none;display:inline-block;margin:4px 0;transition:all .2s}
.footer a:hover{color:var(--mine-gold);transform:translateX(5px)}
friend-link{display:block;margin-top:20px;padding:10px 0;border-top:1px solid rgba(255,255,255,0.2)}
friend-link a{display:inline-block;background:#455a64;margin:0 8px 8px 0;padding:8px 14px;border-radius:30px;font-size:.85rem;text-decoration:none;color:#fff;transition:all .2s;border:1px solid rgba(255,255,255,0.3)}
friend-link a:hover{background:var(--mine-gold);color:#263238;transform:none}
@media (max-width: 1024px){
    .content-layout{grid-template-columns:1fr;gap:16px}
    .sidebar{position:static;order:-1}
}
@media (max-width: 768px){
    .desktop-nav{display:none}
    .nav-toggle{display:block}
    h1{font-size:1.8rem}
    h2{font-size:1.5rem}
    .card{padding:20px}
    .header-top{position:relative}
    body{padding-top:0}
    .my-logo{font-size:1.5rem}
}
@media (min-width: 769px){
    .additional-nav{display:none !important}
}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#e0d6c8}
::-webkit-scrollbar-thumb{background:#a0856b;border-radius:6px}
a{color:var(--mine-dark)}
a:hover{text-decoration:none}
p{margin-bottom:16px}
ul,ol{margin:0 0 16px 20px}
li{margin-bottom:6px}