/* page4: 频道浏览器式布局 */
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;background:linear-gradient(160deg,#115e59 0%,#0d9488 40%,#14b8a6 100%);background-attachment:fixed;color:#1e293b;min-height:100vh;line-height:1.6;padding:14px 16px 30px}

.container{max-width:520px;margin:0 auto}

/* crumb */
.crumb ol{list-style:none;display:flex;gap:4px;font-size:.76rem;color:rgba(255,255,255,.65);padding:4px 0 14px}
.crumb li+li::before{content:"/";margin-right:4px;color:rgba(255,255,255,.4)}
.crumb [aria-current]{color:rgba(255,255,255,.9);font-weight:500}

/* top card */
.top-card{background:#fff;border-radius:16px;padding:18px 20px;display:flex;align-items:center;gap:16px;margin-bottom:14px;box-shadow:0 4px 24px rgba(0,0,0,.1)}
.top-card__l img{width:60px;height:60px;border-radius:14px;object-fit:cover;box-shadow:0 3px 10px rgba(0,0,0,.06)}
.top-card__r h1{font-size:1.5rem;font-weight:700;line-height:1.2;margin-bottom:3px}
.top-card__r p{font-size:.82rem;color:#64748b}

/* tab bar */
.tab-bar{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.tab{flex-shrink:0;padding:9px 18px;border-radius:22px;font-size:.82rem;font-weight:500;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.15);color:#fff;cursor:pointer;font-family:inherit;transition:background .2s}
.tab--on{background:#fff;color:#0f766e;border-color:#fff;font-weight:600}

/* channel grid */
.ch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.ch-card{background:rgba(255,255,255,.92);border-radius:12px;padding:18px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 2px 12px rgba(0,0,0,.06);transition:transform .2s}
.ch-card:hover{transform:translateY(-2px)}
.ch-card__emoji{font-size:1.8rem;line-height:1}
.ch-card span:last-child{font-size:.8rem;color:#1e293b;font-weight:500}

/* dl strip */
.dl-strip{background:linear-gradient(135deg,#0d9488,#14b8a6);border-radius:14px;padding:20px;text-align:center;margin-bottom:14px}
.dl-strip__btn{display:block;padding:14px 24px;background:#fff;color:#0f766e;border-radius:10px;text-decoration:none;font-size:1rem;font-weight:700;margin-bottom:10px;transition:transform .2s}
.dl-strip__btn:hover{transform:translateY(-2px)}
.dl-strip__sub{color:rgba(255,255,255,.9);text-decoration:none;font-size:.84rem;font-weight:500}

/* info block */
.info-block{background:#fff;border-radius:16px;padding:20px;margin-bottom:14px;box-shadow:0 4px 24px rgba(0,0,0,.08)}
.info-block h2{font-size:1.1rem;color:#1e293b;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid #0d9488;display:inline-block}

.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.info-cell{background:#f0fdfa;border-radius:10px;padding:14px;border:1px solid #ccfbf1}
.info-cell h3{font-size:.85rem;color:#0f766e;margin-bottom:4px}
.info-cell p{font-size:.75rem;color:#475569;line-height:1.65}

/* faq details */
.faq-item{border-bottom:1px solid #e5e7eb;padding:4px 0}
.faq-item:last-child{border-bottom:none}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-size:.88rem;font-weight:600;color:#1e293b;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.2rem;color:#0d9488;font-weight:700}
.faq-item[open] summary::after{content:"−"}
.faq-item p{font-size:.8rem;color:#64748b;line-height:1.8;padding-bottom:12px}

/* foot */
.foot{text-align:center;padding:10px 0;color:rgba(255,255,255,.55);font-size:.73rem}
.foot a{color:rgba(255,255,255,.7);text-decoration:none}
.foot p{margin-bottom:3px}

@media(max-width:380px){
    .ch-grid{grid-template-columns:repeat(2,1fr)}
    .info-grid{grid-template-columns:1fr}
    .top-card__r h1{font-size:1.2rem}
}
@media(min-width:768px){
    body{padding:30px}
    .ch-grid{grid-template-columns:repeat(4,1fr)}
    .info-grid{grid-template-columns:repeat(4,1fr)}
}