/* Et roligere, video-fokuseret udtryk inspireret af YouTube – stadig med BørneTubes egen identitet. */
body { background: #f8fbfc; }
main { max-width: 1240px; padding-top: .7rem; }
header { padding: .8rem 0 2rem; border-bottom: 1px solid #dcebed; }
.header-actions { display: flex; align-items: center; gap: .65rem; }
.brand::before { content: '▶'; display: inline-grid; place-items: center; width: 1.5rem; height: 1.05rem; margin-right: .3rem; border-radius: .28rem; background: #e53935; color: #fff; font-size: .62rem; vertical-align: .25rem; transform: translateY(-.05rem); letter-spacing: 0; }
.brand span { color: #e53935; }
.logout { border: 0; border-radius: 999px; padding: .7rem 1rem; background: #164e63; color: #fff; font: inherit; font-weight: 900; cursor: pointer; box-shadow: 0 2px 10px #164e6320; }
.logout:hover, .logout:focus-visible { background: #123f50; }
.intro { padding-top: 1.3rem; }
.channel-menu { gap: 1rem; }
.channel-choice { min-height: 215px; background: linear-gradient(145deg, #1d667c, #164e63); }
.channel-choice:hover, .channel-choice:focus-visible { box-shadow: 0 16px 30px #164e6350; }
.grid { gap: 1rem; }
.card { border: 1px solid #e0ebed; box-shadow: 0 6px 16px #164e6314; }
.card:hover { box-shadow: 0 14px 30px #164e6325; }
@media (max-width: 560px) { main { padding-top: .4rem; } header { padding-bottom: 1.2rem; } .header-actions { gap: .4rem; } .quiet, .logout { padding: .6rem .75rem; font-size: .88rem; } .brand::before { width: 1.25rem; height: .9rem; } .channel-choice { min-height: 180px; } }