body { font-family: 'Roboto', sans-serif; margin: 0; background: #fff; }
header { display: flex; align-items: center; padding: 10px 20px; border-bottom: 1px solid #ddd; position: sticky; top: 0; background: white; z-index: 100; }
.logo { height: 40px; margin-right: 20px; }
.search-container { position: relative; flex-grow: 1; max-width: 600px; margin: 0 auto; }
#searchInput { width: 100%; padding: 12px 20px; border: 1px solid #dfe1e5; border-radius: 24px; font-size: 16px; outline: none; }
#searchInput:focus { box-shadow: 0 1px 6px rgba(32,33,36,0.28); }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding: 20px; }
.toast { visibility: hidden; min-width: 200px; background-color: #333; color: #fff; text-align: center; border-radius: 8px; padding: 16px; position: fixed; z-index: 1; left: 50%; bottom: 30px; transform: translateX(-50%); }
.toast.show { visibility: visible; animation: fadein 0.5s, fadeout 0.5s 2.5s; }
@keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} }