/* p4tu6 — design system for 4tu6.cn (萝莉社直播app) */
:root{
  --p4tu6-primary: #ec4899;
  --p4tu6-accent:  #38bdf8;
  --p4tu6-fg: #f5f7ff;
  --p4tu6-fg-mute: #b7bcd1;
  --p4tu6-card: rgba(255,255,255,.05);
  --p4tu6-card-bd: rgba(255,255,255,.1);
  --p4tu6-glass: rgba(15,18,30,.55);
  --p4tu6-radius: 16px;
  --p4tu6-shadow: 0 12px 30px -10px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.p4tu6-body{
  font-family: "PingFang SC","Microsoft Yahei",Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--p4tu6-fg);
  background: radial-gradient(1200px 600px at 10% -10%,#831843 0%,transparent 60%),radial-gradient(900px 500px at 90% 0%,#075985 0%,transparent 55%),#0c0f1a;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
a{color:var(--p4tu6-fg);text-decoration:none;transition:color .2s}
a:hover{color:var(--p4tu6-accent)}
img{max-width:100%;display:block}

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

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

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

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

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

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

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

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

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

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

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

/* Footer */
.p4tu6-footer{border-top:1px solid var(--p4tu6-card-bd);background:rgba(0,0,0,.35);margin-top:40px}
.p4tu6-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}
.p4tu6-foot-cols h4{margin:0 0 10px;font-size:15px}
.p4tu6-foot-cols p,.p4tu6-foot-cols li{font-size:13px;color:var(--p4tu6-fg-mute);margin:6px 0}
.p4tu6-foot-cols ul{list-style:none;padding:0;margin:8px 0 0}
.p4tu6-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(--p4tu6-card-bd)}

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