/* vh2k — design system for vh2k.cn (17.c-起草网在线) */
:root{
  --vh2k-primary: #7c5cff;
  --vh2k-accent:  #22d3ee;
  --vh2k-fg: #f5f7ff;
  --vh2k-fg-mute: #b7bcd1;
  --vh2k-card: rgba(255,255,255,.05);
  --vh2k-card-bd: rgba(255,255,255,.1);
  --vh2k-glass: rgba(15,18,30,.55);
  --vh2k-radius: 16px;
  --vh2k-shadow: 0 12px 30px -10px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.vh2k-body{
  font-family: "PingFang SC","Microsoft Yahei",Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--vh2k-fg);
  background: radial-gradient(1200px 600px at 10% -10%,#3b1f7a 0%,transparent 60%),radial-gradient(900px 500px at 90% 0%,#0e7490 0%,transparent 55%),#0b0d17;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
a{color:var(--vh2k-fg);text-decoration:none;transition:color .2s}
a:hover{color:var(--vh2k-accent)}
img{max-width:100%;display:block}

/* Header */
.vh2k-header{position:sticky;top:0;z-index:50}
.vh2k-nav-blur{backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);background:var(--vh2k-glass);border-bottom:1px solid var(--vh2k-card-bd)}
.vh2k-nav-wrap{max-width:1240px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.vh2k-brand{display:flex;align-items:center;flex-shrink:0}
.vh2k-brand .brand-logo{height:42px;width:auto}
.vh2k-nav{display:flex;gap:6px;flex-wrap:wrap;flex:1;justify-content:center;min-width:200px}
.vh2k-nav a{padding:8px 14px;border-radius:999px;font-size:14px;color:var(--vh2k-fg-mute);position:relative}
.vh2k-nav a:hover{color:var(--vh2k-fg);background:rgba(255,255,255,.06)}
.vh2k-nav a.active{color:#fff;background:linear-gradient(135deg,var(--vh2k-primary),var(--vh2k-accent))}
.vh2k-search{display:flex;align-items:center;background:rgba(255,255,255,.07);border:1px solid var(--vh2k-card-bd);border-radius:999px;padding:6px 8px 6px 14px;transition:all .25s}
.vh2k-search:focus-within{box-shadow:0 0 0 3px rgba(124,92,255,.25);border-color:var(--vh2k-primary)}
.vh2k-search input{background:transparent;border:0;outline:0;color:var(--vh2k-fg);width:180px;font-size:14px}
.vh2k-search input::placeholder{color:#8a90a8}
.vh2k-search button{border:0;background:linear-gradient(135deg,var(--vh2k-primary),var(--vh2k-accent));color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;display:grid;place-items:center}

/* Crumbs */
.vh2k-crumbs{max-width:1240px;margin:18px auto 0;padding:0 22px;font-size:13px;color:var(--vh2k-fg-mute)}
.vh2k-crumbs ol{list-style:none;display:flex;gap:8px;padding:0;margin:0}
.vh2k-crumbs li:not(:first-child)::before{content:"›";margin-right:8px;opacity:.6}

/* Main */
.vh2k-main{max-width:1240px;margin:0 auto;padding:24px 22px 60px}

/* Hero */
.vh2k-hero{padding:54px 28px;border-radius:24px;background:linear-gradient(135deg,rgba(124,92,255,.18),rgba(34,211,238,.10));border:1px solid var(--vh2k-card-bd);position:relative;overflow:hidden}
.vh2k-hero::before{content:"";position:absolute;inset:-30%;background:radial-gradient(circle at 30% 30%,var(--vh2k-primary),transparent 50%);opacity:.18;filter:blur(40px);animation:vh2k-float 12s ease-in-out infinite}
@keyframes vh2k-float{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-10px)}}
.vh2k-hero-inner{position:relative;z-index:1}
.vh2k-hero h1{font-size:clamp(26px,4vw,40px);margin:0 0 10px;letter-spacing:.5px;background:linear-gradient(135deg,#fff,var(--vh2k-accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.vh2k-hero-sub{color:var(--vh2k-fg-mute);max-width:780px;font-size:15px}
.vh2k-hero-tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.vh2k-tag{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--vh2k-card-bd);font-size:13px}
.vh2k-tag:hover{background:linear-gradient(135deg,var(--vh2k-primary),var(--vh2k-accent));border-color:transparent;color:#fff}

/* Channel hero */
.vh2k-channel-hero{padding:36px 24px;border-radius:20px;background:var(--vh2k-card);border:1px solid var(--vh2k-card-bd);margin-bottom:8px}
.vh2k-channel-hero h1{font-size:28px;margin:0 0 6px;color:#fff}
.vh2k-channel-hero h2{font-size:15px;margin:0 0 10px;color:var(--vh2k-accent);font-weight:500}

/* Sections */
.vh2k-section{margin:36px 0}
.vh2k-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px;border-left:4px solid var(--vh2k-primary);padding-left:12px}
.vh2k-sec-head h2{font-size:20px;margin:0;color:#fff}
.vh2k-more{font-size:13px;color:var(--vh2k-accent)}

/* Grid + cards */
.vh2k-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.vh2k-card{background:var(--vh2k-card);border:1px solid var(--vh2k-card-bd);border-radius:var(--vh2k-radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
.vh2k-card:hover{transform:translateY(-4px);box-shadow:var(--vh2k-shadow);border-color:rgba(255,255,255,.18)}
.vh2k-cover{position:relative;display:block;aspect-ratio:16/10;overflow:hidden}
.vh2k-cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.vh2k-card:hover .vh2k-cover img{transform:scale(1.06)}
.vh2k-mask{position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.55));opacity:0;transition:opacity .25s}
.vh2k-card:hover .vh2k-mask{opacity:1}
.vh2k-play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .25s,transform .25s;transform:scale(.85)}
.vh2k-card:hover .vh2k-play{opacity:1;transform:scale(1)}
.vh2k-play svg{filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));background:linear-gradient(135deg,var(--vh2k-primary),var(--vh2k-accent));border-radius:50%;padding:8px}
.vh2k-card h3{font-size:16px;margin:14px 16px 6px;line-height:1.45}
.vh2k-card p{margin:0 16px 14px;color:var(--vh2k-fg-mute);font-size:13.5px}
.vh2k-card-meta{margin:0 16px 14px;display:flex;gap:14px;font-size:12px;color:#8a90a8}

/* Reviews */
.vh2k-reviews h2{font-size:20px;margin:0 0 16px;border-left:4px solid var(--vh2k-accent);padding-left:12px}
.vh2k-review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.vh2k-review{margin:0;padding:18px;background:var(--vh2k-card);border:1px solid var(--vh2k-card-bd);border-radius:14px}
.vh2k-review p{margin:0 0 8px;font-size:14px;color:#e9ecf6}
.vh2k-review cite{color:var(--vh2k-accent);font-style:normal;font-size:13px}

/* Contact JSON */
.vh2k-json{background:#0b0d17;border:1px solid var(--vh2k-card-bd);border-radius:12px;padding:16px;color:#cdd2e6;font-size:13px;overflow:auto;line-height:1.7}

/* Share */
.vh2k-share{margin:30px 0;padding:18px;border-radius:14px;background:var(--vh2k-card);border:1px solid var(--vh2k-card-bd);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.vh2k-share span{color:var(--vh2k-fg-mute);font-size:14px}
.vh2k-share a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--vh2k-fg);transition:all .25s}
.vh2k-share a:hover{background:linear-gradient(135deg,var(--vh2k-primary),var(--vh2k-accent));color:#fff;transform:translateY(-2px)}

/* FAQ */
.vh2k-faq{background:var(--vh2k-card);border:1px solid var(--vh2k-card-bd);border-radius:12px;margin:10px 0;padding:14px 18px;transition:background .25s}
.vh2k-faq[open]{background:rgba(255,255,255,.08)}
.vh2k-faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}
.vh2k-faq summary::-webkit-details-marker{display:none}
.vh2k-faq summary::after{content:"+";font-size:20px;color:var(--vh2k-accent);transition:transform .25s}
.vh2k-faq[open] summary::after{transform:rotate(45deg)}
.vh2k-faq p{margin:10px 0 0;color:var(--vh2k-fg-mute)}

/* Footer */
.vh2k-footer{border-top:1px solid var(--vh2k-card-bd);background:rgba(0,0,0,.35);margin-top:40px}
.vh2k-foot-cols{max-width:1240px;margin:0 auto;padding:36px 22px 12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.vh2k-foot-cols h4{margin:0 0 10px;font-size:15px}
.vh2k-foot-cols p,.vh2k-foot-cols li{font-size:13px;color:var(--vh2k-fg-mute);margin:6px 0}
.vh2k-foot-cols ul{list-style:none;padding:0;margin:8px 0 0}
.vh2k-foot-bottom{max-width:1240px;margin:0 auto;padding:14px 22px 28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;color:#8a90a8;border-top:1px solid var(--vh2k-card-bd)}

@media (max-width:780px){
  .vh2k-nav-wrap{padding:10px 14px}
  .vh2k-search input{width:120px}
  .vh2k-main{padding:16px 14px 40px}
  .vh2k-hero{padding:32px 20px}
}