* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Courier New', monospace; background-color: #000000; color: #ffffff; min-height: 100vh; } .container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; } #search-input { background: transparent; border: none; color: #ffffff; font-size: 2rem; text-align: center; outline: none; width: 80%; max-width: 600px; font-family: 'Courier New', monospace; } #results { margin-top: 40px; width: 80%; max-width: 600px; max-height: 35vh; overflow-y: auto; overflow-x: hidden; position: relative; -ms-overflow-style: none; scrollbar-width: none; } #results::-webkit-scrollbar { display: none; } #results.has-scroll-top { mask-image: linear-gradient(to bottom, transparent 0, black 80px, black 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 80px, black 100%); } #results.has-scroll-bottom { mask-image: linear-gradient(to bottom, black 0, black calc(100% - 80px), transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 0, black calc(100% - 80px), transparent 100%); } #results.has-scroll-top.has-scroll-bottom { mask-image: linear-gradient(to bottom, transparent 0, black 80px, black calc(100% - 80px), transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 80px, black calc(100% - 80px), transparent 100%); } .bookmark-item { padding: 12px 16px; margin: 8px 0; cursor: pointer; border-left: 3px solid transparent; transition: all 0.2s ease; } .bookmark-item:hover { border-left-color: #4a9eff; background-color: rgba(74, 158, 255, 0.1); } .bookmark-item.selected { border-left-color: #4a9eff; background-color: rgba(74, 158, 255, 0.2); } .bookmark-name { font-size: 1.2rem; margin-bottom: 4px; } .bookmark-url { font-size: 0.9rem; color: #888; } .bookmark-tags { margin-top: 4px; font-size: 0.8rem; color: #666; } .tag { display: inline-block; margin-right: 8px; }