*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg-deep:#08090c;
  --bg-page:#0d0f14;
  --bg-surface:#13161e;
  --bg-card:#181c26;
  --bg-card-hover:#1e2330;
  --bg-elevated:#222738;
  --gold:#c8a44e;
  --gold-light:#e2c46e;
  --gold-dim:rgba(200,164,78,.1);
  --gold-glow:rgba(200,164,78,.2);
  --gold-border:rgba(200,164,78,.12);
  --gold-border-hover:rgba(200,164,78,.3);
  --text-primary:#eee8d9;
  --text-secondary:#9aa0b0;
  --text-muted:#555d70;
  --border:rgba(255,255,255,.06);
  --border-light:rgba(255,255,255,.03);
  --radius:10px;
  --radius-lg:16px;
  --shadow:0 4px 24px rgba(0,0,0,.4);
  --shadow-lg:0 16px 48px rgba(0,0,0,.5);
  --ease:cubic-bezier(.4,0,.2,1);
}
html{scroll-behavior:smooth;background:var(--bg-deep)}
body{font-family:'Noto Sans SC',system-ui,-apple-system,sans-serif;background:var(--bg-page);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none;transition:color .3s var(--ease)}
button{border:none;cursor:pointer;font-family:inherit;background:none;color:inherit}
::selection{background:var(--gold-dim);color:var(--gold-light)}
.grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.navbar{height:64px;background:rgba(13,15,20,.8);backdrop-filter:blur(24px) saturate(1.2);border-bottom:1px solid var(--gold-border);position:sticky;top:0;z-index:100;transition:all .4s var(--ease)}
.navbar.scrolled{background:rgba(13,15,20,.95);box-shadow:0 4px 32px rgba(0,0,0,.3)}
.navbar-inner{max-width:1280px;margin:0 auto;padding:0 32px;height:100%;display:flex;align-items:center;gap:36px}
.navbar-logo{display:flex;align-items:center;gap:10px;font-family:'Noto Serif SC',serif;font-size:18px;font-weight:700;color:var(--gold);letter-spacing:2px;flex-shrink:0}
.logo-mark{width:34px;height:34px;background:linear-gradient(135deg,var(--gold),#8b6914);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:var(--bg-deep);font-family:'Noto Serif SC',serif}
.navbar-links{display:flex;align-items:center;gap:28px;flex:1}
.navbar-links a{font-size:14px;font-weight:500;color:var(--text-secondary);position:relative;padding:6px 0;letter-spacing:.5px;transition:color .3s var(--ease)}
.navbar-links a:hover,.navbar-links a.active{color:var(--gold)}
.navbar-links a.active::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--gold);border-radius:1px;box-shadow:0 0 8px var(--gold-glow)}
.navbar-search{display:flex;align-items:center;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:20px;padding:0 14px;height:36px;transition:all .3s var(--ease);width:220px;flex-shrink:0}
.navbar-search:focus-within{width:300px;background:var(--bg-card);border-color:var(--gold-border-hover);box-shadow:0 0 0 3px var(--gold-dim)}
.navbar-search input{border:none;outline:none;background:none;font-size:13px;color:var(--text-primary);width:100%;font-family:inherit}
.navbar-search input::placeholder{color:var(--text-muted)}
.navbar-search svg{width:14px;height:14px;color:var(--text-muted);flex-shrink:0;margin-right:8px}
.btn-publish{height:36px;padding:0 20px;border-radius:8px;background:linear-gradient(135deg,var(--gold),#a88a2e);color:var(--bg-deep);font-size:13px;font-weight:600;letter-spacing:1px;transition:all .3s var(--ease);flex-shrink:0}
.btn-publish:hover{transform:translateY(-1px);box-shadow:0 4px 20px var(--gold-glow)}

.footer{background:var(--bg-surface);border-top:1px solid var(--gold-border);padding:40px 32px 28px;position:relative}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-border-hover),transparent)}
.footer-brand-center{text-align:center;padding:8px 0 24px}
.footer-brand-center .logo{font-family:'Noto Serif SC',serif;font-size:24px;font-weight:700;color:var(--gold);letter-spacing:3px;margin-bottom:10px}
.footer-brand-center p{font-size:14px;color:var(--text-secondary);letter-spacing:1px}
.footer-bottom{max-width:1280px;margin:0 auto;padding-top:20px;border-top:1px solid var(--border);font-size:12px;color:var(--text-muted);text-align:center;letter-spacing:.5px}

.tabs{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--border);background:var(--bg-surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:0 8px;position:relative}
.tabs::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-border),transparent)}
.tab{padding:14px 20px;font-size:14px;font-weight:500;color:var(--text-muted);cursor:pointer;position:relative;transition:color .3s var(--ease);white-space:nowrap;letter-spacing:.5px}
.tab:hover{color:var(--text-secondary)}
.tab.active{color:var(--gold)}
.tab.active::after{content:'';position:absolute;bottom:-1px;left:20px;right:20px;height:2px;background:var(--gold);border-radius:1px;box-shadow:0 0 6px var(--gold-glow)}

.sidebar-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:20px;position:relative;overflow:hidden}
.sidebar-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-border),transparent)}
.sidebar-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.sidebar-title h3{font-family:'Noto Serif SC',serif;font-size:15px;font-weight:600;color:var(--text-primary);position:relative;padding-left:12px}
.sidebar-title h3::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:3px;background:var(--gold);border-radius:2px}
.sidebar-title a{font-size:12px;color:var(--text-muted);transition:color .3s var(--ease);letter-spacing:.5px}
.sidebar-title a:hover{color:var(--gold)}

.tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
.tag-pill{padding:6px 16px;border-radius:20px;font-size:12px;color:var(--text-secondary);background:var(--bg-card);border:1px solid var(--border);transition:all .3s var(--ease);cursor:pointer;letter-spacing:.5px}
.tag-pill:hover{border-color:var(--gold-border-hover);color:var(--gold);background:var(--gold-dim)}
.tag-badge{display:inline-block;padding:2px 10px;border-radius:4px;font-size:11px;font-weight:500;letter-spacing:.5px}
.tag-blue{background:rgba(47,107,255,.1);color:#5b8def;border:1px solid rgba(47,107,255,.15)}
.tag-orange{background:rgba(230,81,0,.08);color:#e6843a;border:1px solid rgba(230,81,0,.12)}
.tag-green{background:rgba(46,125,50,.08);color:#4caf50;border:1px solid rgba(46,125,50,.12)}
.tag-purple{background:rgba(114,46,209,.08);color:#9c6ee8;border:1px solid rgba(114,46,209,.12)}
.tag-red{background:rgba(198,40,40,.08);color:#ef5350;border:1px solid rgba(198,40,40,.12)}

.pagination{display:flex;align-items:center;justify-content:center;gap:8px;padding:32px 0}
.pagination a,.pagination span{display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;border-radius:8px;font-size:13px;font-weight:500;transition:all .3s var(--ease)}
.pagination a{color:var(--text-secondary);background:var(--bg-surface);border:1px solid var(--border)}
.pagination a:hover{border-color:var(--gold-border-hover);color:var(--gold);background:var(--gold-dim)}
.pagination .current{color:var(--bg-deep);background:var(--gold);font-weight:600}
.pagination .dots{color:var(--text-muted);min-width:auto}

.container{max-width:1280px;margin:0 auto;padding:0 32px}
.page-hero{position:relative;padding:48px 0 0;overflow:hidden}
.page-hero .hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 30% 20%,rgba(200,164,78,.06),transparent),radial-gradient(ellipse 50% 60% at 80% 60%,rgba(139,105,20,.04),transparent),var(--bg-deep);z-index:0}
.page-hero .hero-inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:0 32px}
.page-hero .hero-banner{border-radius:var(--radius-lg);overflow:hidden;position:relative;height:220px;background:linear-gradient(135deg,#0f1318 0%,#1a1e2a 40%,#252a38 100%);border:1px solid var(--gold-border);display:flex;align-items:center;justify-content:center}
.page-hero .hero-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(200,164,78,.08),transparent 50%),radial-gradient(circle at 80% 30%,rgba(200,164,78,.05),transparent 40%);z-index:1}
.page-hero .hero-content{position:relative;z-index:2;text-align:center}
.page-hero .hero-title{font-family:'Noto Serif SC',serif;font-size:28px;font-weight:700;color:var(--text-primary);letter-spacing:3px;margin-bottom:10px}
.page-hero .hero-title .gold{background:linear-gradient(135deg,var(--gold),var(--gold-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page-hero .hero-sub{font-size:14px;color:var(--text-secondary);letter-spacing:2px;font-weight:300}

.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);padding:20px 32px 0;max-width:1280px;margin:0 auto}
.breadcrumb a{color:var(--text-secondary);transition:color .2s}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb .sep{color:var(--text-muted)}

@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .7s var(--ease) both}
.fd1{animation-delay:.05s}.fd2{animation-delay:.1s}.fd3{animation-delay:.15s}.fd4{animation-delay:.2s}.fd5{animation-delay:.25s}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg-page)}
::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

@media(max-width:1024px){
  .main{flex-direction:column}
  .col-left,.col-right{width:100%}
}
@media(max-width:768px){
  .navbar-links{display:none}
  .navbar-search{width:150px}
  .navbar-search:focus-within{width:200px}
  .navbar-inner{padding:0 16px}
  .container{padding:0 16px}
  .breadcrumb{padding:16px 16px 0}
  .main{padding:20px 16px 40px}
  .footer{padding:28px 16px 20px}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
}