/* Shared header geometry for every section. */
.top{padding:16px 0;gap:12px}
.top .brand{height:42px;min-height:42px;margin:0;gap:11px;font-size:24px;line-height:30px}
.top .brand>span:first-child{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:14px;font-size:24px;line-height:1}
.top .app-nav{box-sizing:border-box;height:68px;margin:0;padding:4px;gap:5px;align-items:stretch}
.top .app-nav a{box-sizing:border-box;height:60px;min-height:60px;margin:0;padding:12px 6px;display:flex;align-items:center;justify-content:center;line-height:1.35}
@media(max-width:700px){
 .shell{padding-left:16px;padding-right:16px}
 .top{display:grid;grid-template-columns:minmax(0,1fr);justify-content:normal;align-items:start;row-gap:12px;column-gap:0}
 .top .brand>span:first-child{width:36px;height:36px}
 .top .app-nav{width:100%;min-width:0}
 .top .app-nav a{flex:1;min-width:0}
}

/* Four categories keep their large labels without compressing the long final label. */
.top .app-nav{overflow-x:auto;scrollbar-width:none}
.top .app-nav::-webkit-scrollbar{display:none}
.top .app-nav a{flex:1 0 60px;white-space:nowrap}
.top .app-nav a:last-child{flex:2 0 132px}

/* Consistent hero heading typography across all four sections. */
.hero h1{font-size:clamp(35px,5vw,58px);font-weight:700;line-height:1.2;letter-spacing:0;margin:12px 0}
@media(max-width:700px){.hero h1{font-size:clamp(28px,9.4vw,35px)}}

/* Shared English eyebrow typography above the hero headings. */
.hero .eyebrow{font-family:ui-rounded,"Noto Sans TC","PingFang TC",system-ui,sans-serif;font-size:12px;font-weight:900;line-height:1.5;letter-spacing:.16em;color:#638571}

/* Keep playlist actions together on narrow screens. */
@media(max-width:700px){
 .heading{flex-wrap:wrap;gap:12px}
 .heading>div:first-child{flex:1 1 100%;min-width:0}
 .heading>.actions{flex:0 0 auto;flex-wrap:nowrap;margin-left:auto}
 .heading>.actions .btn{white-space:nowrap;flex-shrink:0}
}