.page { min-height: 100vh; background: #000; display: flex; flex-direction: column; }
.nav-bar { background: #1c1c1e; border-bottom: 2rpx solid rgba(255,255,255,0.05); box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; }
.nav-inner { display: flex; align-items: center; padding: 0 24rpx; height: 88rpx; min-height: 44px; flex-shrink: 0; }
.nav-back { font-size: 32rpx; color: #00CED1; padding: 16rpx 0; }
.nav-title { flex: 1; text-align: center; font-size: 34rpx; color: #fff; }
.search-box { padding: 24rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); }
.search-input-wrap { display: flex; align-items: center; padding: 24rpx 32rpx; background: #2c2c2e; border-radius: 24rpx; border: 2rpx solid rgba(255,255,255,0.05); }
.search-icon { font-size: 32rpx; margin-right: 16rpx; opacity: 0.6; }
.search-input { flex: 1; font-size: 28rpx; color: #fff; }
.search-clear { font-size: 40rpx; color: rgba(255,255,255,0.5); padding: 0 16rpx; }
.result-area { flex: 1; height: 0; }
.hot-section { padding: 32rpx; }
.hot-label { font-size: 24rpx; color: rgba(255,255,255,0.4); display: block; margin-bottom: 24rpx; }
.hot-tags { display: flex; flex-wrap: wrap; gap: 16rpx; }
.hot-tag { padding: 16rpx 24rpx; font-size: 24rpx; color: rgba(255,255,255,0.8); background: #2c2c2e; border-radius: 32rpx; }
.loading-wrap { padding: 80rpx; text-align: center; }
.loading-spinner { width: 48rpx; height: 48rpx; border: 4rpx solid rgba(0,206,209,0.3); border-top-color: #00CED1; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 24rpx; }
.loading-text { font-size: 28rpx; color: rgba(255,255,255,0.5); }
@keyframes spin { to { transform: rotate(360deg); } }
.result-header { padding: 24rpx 32rpx; font-size: 24rpx; color: rgba(255,255,255,0.4); border-bottom: 2rpx solid rgba(255,255,255,0.05); }
.result-list { }
.result-item { display: flex; align-items: flex-start; padding: 32rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); }
.result-icon { width: 64rpx; height: 64rpx; border-radius: 16rpx; background: rgba(0,206,209,0.1); display: flex; align-items: center; justify-content: center; font-size: 32rpx; margin-right: 24rpx; flex-shrink: 0; }
.result-body { flex: 1; min-width: 0; }
.result-meta { display: flex; align-items: center; gap: 16rpx; margin-bottom: 8rpx; }
.result-id { font-size: 24rpx; color: #00CED1; font-family: monospace; }
.tag-free { font-size: 20rpx; padding: 4rpx 12rpx; border-radius: 6rpx; background: rgba(0,206,209,0.1); color: #00CED1; }
.tag-content { font-size: 20rpx; padding: 4rpx 12rpx; border-radius: 6rpx; background: rgba(123,97,255,0.1); color: #7B61FF; }
.result-title { font-size: 28rpx; color: #fff; font-weight: 500; display: block; margin-bottom: 4rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-snippet { font-size: 24rpx; color: rgba(255,255,255,0.5); display: block; margin-bottom: 4rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.result-path { font-size: 22rpx; color: rgba(255,255,255,0.3); }
.result-arrow { font-size: 32rpx; color: rgba(255,255,255,0.3); margin-left: 16rpx; }
.keywords-section { padding: 32rpx; border-top: 2rpx solid rgba(255,255,255,0.05); }
.keywords-label { font-size: 24rpx; color: rgba(255,255,255,0.4); display: block; margin-bottom: 16rpx; }
.keywords-tags { display: flex; flex-wrap: wrap; gap: 16rpx; }
.keyword-tag { font-size: 24rpx; color: rgba(255,255,255,0.5); padding: 8rpx 16rpx; background: #2c2c2e; border-radius: 8rpx; }
.empty-wrap { padding: 80rpx; text-align: center; }
.empty-icon { font-size: 80rpx; display: block; margin-bottom: 24rpx; opacity: 0.5; }
.empty-text { font-size: 28rpx; color: rgba(255,255,255,0.5); display: block; }
.empty-hint { font-size: 24rpx; color: rgba(255,255,255,0.3); margin-top: 8rpx; display: block; }