:root { --primary: rgb(14,116,144); --bg-body: #f8fafc; }
        body { font-family: sans-serif; background: var(--bg-body); margin: 0; color: #333; }
        a { text-decoration: none; }
        .container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
        .header { background:#fff; padding:15px 0; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #e2e8f0; }
        .logo { display:flex; align-items:center; gap:10px; color:#111; font-weight:bold; font-size:20px; }
        .logo img { height:40px; }
        
        .tag-hero { text-align:center; padding:80px 0 40px; }
        .tag-hero h1 { font-size:32px; color:var(--primary); margin-bottom:15px; }
        .tag-hero p { color:#666; font-size:16px; max-width:600px; margin:0 auto; }
        
        .tag-cloud-box { background:#fff; padding:40px; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,0.05); display:flex; flex-wrap:wrap; gap:15px; justify-content:center; margin-bottom:80px; }
        .tag-item { background:#f1f5f9; color:var(--primary); padding:10px 20px; border-radius:30px; font-size:15px; transition:0.3s; border:1px solid transparent; }
        .tag-item:hover { background:var(--primary); color:#fff; border-color:var(--primary); transform:translateY(-2px); }
        .tag-count { font-size:12px; opacity:0.7; margin-left:5px; }

        .footer { text-align:center; padding:30px; border-top:1px solid #e2e8f0; font-size:14px; }