@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;background:#082828;color:#fff;line-height:1.8;font-size:15px}
a{color:#D4A574;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Nav */
nav{position:fixed;top:0;left:0;right:0;background:#0D3B3B;border-bottom:1px solid rgba(212,165,116,0.15);z-index:50;height:60px}
nav .container{display:flex;align-items:center;justify-content:space-between;height:100%}
.nav-brand{display:flex;align-items:center;gap:8px;color:#fff;font-weight:700}
.nav-logo{width:32px;height:32px;background:#D4A574;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#082828;font-weight:700}
.nav-links{display:flex;gap:4px}
.nav-links a{color:#A3B1B1;padding:6px 12px;border-radius:4px;font-size:14px;transition:all .3s}
.nav-links a:hover,.nav-links a.active{color:#D4A574;background:rgba(212,165,116,0.1);text-decoration:none}
.nav-toggle{display:none;color:#fff;font-size:24px;background:none;border:none;cursor:pointer}
@media(max-width:768px){
.nav-links{display:none;position:absolute;top:60px;left:0;right:0;background:#0D3B3B;flex-direction:column;padding:10px 20px}
.nav-links.open{display:flex}
.nav-toggle{display:block}
}

/* Hero */
.hero{position:relative;min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;text-align:center;padding:60px 20px 40px}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:'';position:absolute;inset:0;background:rgba(8,40,40,0.7)}
.hero-content{position:relative;z-index:1;max-width:700px}
.hero h1{font-size:42px;margin-bottom:16px;line-height:1.2}
.hero h1 span{color:#D4A574}
.hero p{color:#A3B1B1;font-size:16px;margin-bottom:24px}
.btn{display:inline-block;padding:10px 28px;border-radius:20px;font-weight:700;cursor:pointer;border:none;font-size:14px}
.btn-primary{background:#D4A574;color:#082828}
.btn-outline{border:1px solid #D4A574;color:#D4A574;background:transparent}
.btn:hover{text-decoration:none;opacity:.9}

/* Sections */
section{padding:60px 0}
.bg-dark{background:#0D3B3B}
.bg-light{background:#F0F5F5;color:#333}
.bg-light h2,.bg-light h3{color:#082828}
h2{font-size:28px;margin-bottom:8px}
h3{font-size:20px;margin-bottom:8px}
.subtitle{color:#A3B1B1;margin-bottom:32px}
.bg-light .subtitle{color:#666}
.text-center{text-align:center}

/* Cards */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.card{background:rgba(13,59,59,0.8);border:1px solid rgba(212,165,116,0.15);border-radius:4px;padding:24px;transition:border-color .3s}
.card:hover{border-color:rgba(212,165,116,0.4)}
.card h3{color:#fff}
.card p{color:#A3B1B1;font-size:14px}
.cat{color:#D4A574;font-size:12px;margin-bottom:8px}

/* Stats */
.stat-num{font-size:48px;color:#D4A574;font-weight:700}
.stat-label{color:#333;font-weight:500}

/* List */
.list{display:flex;flex-direction:column;gap:12px}
.list-item{display:block;background:rgba(13,59,59,0.8);border:1px solid rgba(212,165,116,0.15);border-radius:4px;padding:20px}
.list-item:hover{border-color:rgba(212,165,116,0.4)}
.list-item h3{color:#fff;font-size:16px}
.list-item p{color:#A3B1B1;font-size:14px}

/* Pagination */
.pagination{display:flex;justify-content:center;gap:6px;margin-top:32px}
.pagination a,.pagination span{padding:8px 14px;border:1px solid rgba(212,165,116,0.15);border-radius:4px;color:#A3B1B1;font-size:14px}
.pagination a:hover{border-color:#D4A574;color:#D4A574;text-decoration:none}
.pagination .active{background:#D4A574;color:#082828;border-color:#D4A574;font-weight:700}

/* Breadcrumb */
.breadcrumb{font-size:13px;color:#A3B1B1;margin-bottom:20px;padding-top:80px}
.breadcrumb a{color:#A3B1B1}

/* Page Header */
.page-header{background:#0D3B3B;padding:80px 0 40px}
.page-header h1{font-size:36px}

/* Article */
article{padding:40px 0}
article h1{font-size:32px;margin-bottom:20px}
article p{color:#A3B1B1;margin-bottom:16px;line-height:1.8}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;padding-top:24px;border-top:1px solid rgba(212,165,116,0.15)}
.tags a{padding:6px 14px;border:1px solid rgba(212,165,116,0.15);border-radius:4px;color:#A3B1B1;font-size:13px}
.tags a:hover{border-color:#D4A574;color:#D4A574;text-decoration:none}

/* Form */
.form-group{margin-bottom:16px}
.form-group label{display:block;color:#A3B1B1;font-size:13px;margin-bottom:4px}
input,textarea{width:100%;padding:10px 14px;background:#082828;border:1px solid rgba(212,165,116,0.15);border-radius:4px;color:#fff;font-size:14px}
input:focus,textarea:focus{outline:none;border-color:#D4A574}
textarea{min-height:100px;resize:vertical}
.success{text-align:center;padding:40px 0}
.success h3{color:#fff;margin-bottom:8px}

/* Footer */
footer{background:#082828;border-top:1px solid rgba(212,165,116,0.15);padding:40px 0 20px}
footer .grid{gap:32px}
footer h4{color:#fff;font-size:16px;margin-bottom:16px}
footer p,footer a{color:#A3B1B1;font-size:14px}
footer a:hover{color:#D4A574}
.copyright{text-align:center;padding-top:20px;margin-top:20px;border-top:1px solid rgba(212,165,116,0.1);color:#666;font-size:13px}

/* Back to top */
.btt{position:fixed;bottom:20px;right:20px;width:40px;height:40px;background:#0D3B3B;border:1px solid rgba(212,165,116,0.15);color:#D4A574;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .3s;font-size:18px;z-index:40}
.btt.show{opacity:1}