:root { --bg: #f6f8fa; --primary: #2b9be6; --primary-grad: linear-gradient(135deg, #4bb4f7, #2b9be6); --muted: #9aaec2; --card: #ffffff; --pill-bg: #f2f6fb; --radius: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", PingFang SC, "Hiragino Sans GB", "Microsoft YaHei", sans-serif; } html { overflow-y: scroll; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: #2b2b2b; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .container { max-width: 1100px; margin: 0 auto; padding: 40px 20px 80px; } .header { text-align: center; padding: 36px 0 18px; } .title { font-size: 44px; background: var(--primary-grad); -webkit-background-clip: text; color: transparent; margin: 0 0 6px; font-weight: 600 } .subtitle { color: var(--muted); margin: 0 0 28px } .search-wrap { display: flex; justify-content: center; margin-bottom: 28px; } .search-box { width: 72%; min-width: 360px; background: var(--card); border-radius: 40px; box-shadow: 0 8px 30px rgba(50, 60, 70, 0.06); display: flex; align-items: center; padding: 0; transition: all 0.2s ease; overflow: hidden; } .select-wrapper { position: relative; max-width: 130px; border-top-left-radius: 40px; border-bottom-left-radius: 40px; overflow: hidden; background: transparent; cursor: pointer; flex-shrink: 0; } .select-wrapper select { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: none; outline: none; background: transparent; color: var(--primary); font-weight: 500; font-size: 16px; padding: 12px 40px 12px 12px; width: 100%; cursor: pointer; } .select-wrapper::after { content: ""; position: absolute; top: 50%; right: 12px; width: 16px; height: 16px; pointer-events: none; transform: translateY(-50%); background-image: url('data:image/svg+xml;utf8,<svg fill="%232b9be6" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); background-repeat: no-repeat; background-size: contain; } .search-box input { flex: 1; border: 0; outline: none; font-size: 16px; padding: 12px 20px; background: transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 40px; border-bottom-right-radius: 40px; font-weight: 500; } .search-btn { background: var(--primary-grad); color: #fff; border: none; padding: 0 28px; height: 48px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 12px rgba(43, 155, 230, 0.18); transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; user-select: none; line-height: 1; } .search-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(43, 155, 230, 0.25); } .search-btn:active:not(:disabled) { transform: scale(0.96); } .search-btn:disabled { background: #a3c5f7 !important; cursor: not-allowed; box-shadow: none !important; transform: none !important; opacity: 0.6; } .spinner { position: relative; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; border: 3px solid rgba(255, 255, 255, 0.6); border-radius: 50%; box-sizing: border-box; } .spinner::after { content: ''; position: absolute; top: -3px; left: -3px; width: 100%; height: 100%; border: 3px solid transparent; border-top: 3px solid #fff; border-radius: 50%; animation: spin 1s linear infinite; } .spinner-text { position: relative; z-index: 1; } @keyframes spin { to { transform: rotate(360deg); } } .hot-card { background: var(--card); padding: 18px; border-radius: 14px; box-shadow: 0 6px 14px rgba(50, 60, 70, 0.04); margin: 18px 0; } .hot-title { color: var(--primary); font-weight: 600; margin: 0 0 10px; } .pills { display: flex; flex-wrap: wrap; gap: 10px; } .pill { background: var(--pill-bg); padding: 8px 12px; border-radius: 22px; font-size: 13px; color: var(--primary); cursor: pointer; border: 1px solid rgba(43, 155, 230, 0.06); transition: all 0.2s ease; } .pill:hover:not(:disabled) { background: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(43, 155, 230, 0.25); } .pill:active:not(:disabled) { transform: scale(0.94); } .pill:disabled { background: #a3c5f7 !important; color: #fff !important; cursor: not-allowed; box-shadow: none !important; transform: none !important; opacity: 0.6; } .results { visibility: hidden; height: 0; overflow: hidden; opacity: 0; transition: height 0.3s ease, opacity 0.3s ease; } .results.show { visibility: visible; height: auto; opacity: 1; overflow: visible; } .results-card { background: var(--card); padding: 18px; border-radius: 12px; box-shadow: 0 8px 20px rgba(50, 60, 70, 0.05); min-height: 300px; } .results-header { font-size: 18px; color: #333; font-weight: 600; margin-bottom: 8px; } .result-item { display: flex; align-items: center; padding: 1px; border-radius: 10px; border: 1px solid #f0f4f8; margin-bottom: 10px; transition: all 0.2s ease; background-color: var(--bg); } .result-item:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); transform: translateY(-2px); } .result-icon { width: 44px; height: 44px; border-radius: 8px; background: #eef8ff; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 20px; } .result-icon img { width: 32px; height: 32px; border-radius: 6px; user-select: none; } .result-main { flex: 1; } .result-title { color: var(--primary); font-weight: normal; margin: 0 0 6px; font-size: 15px; } .result-title a { color: var(--primary); text-decoration: none; } .result-title a:hover { text-decoration: underline; } mark { background: transparent; font-weight: 600; padding: 0 2px; border-radius: 0; color: var(--primary); } .loading { font-size: 16px; color: var(--muted); text-align: center; padding: 20px 0; } .footer-declaration { max-width: 1100px; margin: 40px auto 20px; padding: 16px 24px; font-size: 14px; color: #666; text-align: center; line-height: 1.5; user-select: text; border: 1.5px solid #ccc; border-radius: 12px; background-color: #f9f9f9; box-sizing: border-box; } .footer-declaration a { color: var(--primary); text-decoration: none; } .footer-declaration a:hover { text-decoration: underline; } .footer-declaration .declaration-title { font-size: 18px; font-weight: 700; display: inline-block; margin-bottom: 6px; } @media (max-width: 800px) { .search-wrap { flex-direction: column; align-items: stretch; width: 100%; } .search-box { width: 100%; min-width: auto; border-radius: 12px; flex-direction: column; box-shadow: none; overflow: visible; } .select-wrapper { max-width: 100%; border-radius: 12px 12px 0 0; width: 100%; } .select-wrapper select { padding: 12px 14px; background-image: none !important; text-align: left; } .search-box input { width: 100%; border-radius: 0 0 12px 12px; padding: 17px 14px; } .search-btn { width: 100%; border-radius: 12px; border-top-left-radius: 0; border-top-right-radius: 0; height: 44px; padding: 0 20px; font-size: 15px; margin-top: 5px; align-self: stretch; } .search-btn .spinner { width: 14px; height: 14px; border-width: 2px; border-top-width: 2px; } .container { padding: 20px; } .title { font-size: 34px; } } .mobile-menu-btn { padding: 10px; text-align: center; cursor: pointer; } .result-status { display: inline-flex; align-items: center; font-size: 12px; padding: 2px 8px; border-radius: 10px; color: #fff; margin-right: 8px; font-weight: 500; white-space: nowrap; } .result-status.checking { background: orange; } .result-status.valid { background: var(--primary-grad); } .result-status.invalid { background: red; } .result-status.unknown { background: orange; } .result-status .dot { width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #fff; animation: blink 1s infinite; } @keyframes blink { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } } .result-status.waiting { background: orange; } .result-main { flex: 1; display: flex; flex-direction: column; } .result-title { color: var(--primary); font-size: 15px; margin: 0 0 4px; font-weight: normal; word-break: break-all; } .result-footer { display: flex; justify-content: flex-end; } .result-status { font-size: 12px; padding: 2px 8px; border-radius: 5px; color: #fff; font-weight: 500; white-space: nowrap; } .result-tag { font-size: 12px; padding: 2px 8px; border-radius: 5px; margin-right: 8px; display: inline-block; font-weight: 500; color: #fff; } .result-tag.影视 { background: #2b9be6; } .result-tag.视频 { background: #17a2b8; } .result-tag.音频 { background: #28a745; } .result-tag.文档 { background: #6f42c1; } .result-tag.软件 { background: #fd7e14; } .result-tag.压缩包 { background: #d63384; } .result-tag.图片 { background: #20c997; }