* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, "Segoe UI", "Microsoft YaHei", Arial, sans-serif; background: #f5f7fa; color: #2c3344; }

.site-head { position: sticky; top: 0; z-index: 20; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.site-top { display: flex; align-items: center; gap: 24px; padding: 16px 32px; background: #fff; border-bottom: 1px solid #e8ebf0; }
.site-brand { font-size: 20px; font-weight: 800; color: #ff8400; white-space: nowrap; }
.site-search { position: relative; display: flex; flex: 1; max-width: 560px; }
.site-search input { flex: 1; padding: 10px 40px 10px 14px; border: 2px solid #ff8400; border-right: 0; border-radius: 22px 0 0 22px; outline: none; font-size: 15px; }
.site-search button { padding: 0 18px; border: 2px solid #ff8400; border-radius: 0 22px 22px 0; background: #ff8400; color: #fff; cursor: pointer; font-size: 16px; }
.site-search-clear { position: absolute; right: 52px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: #c9cfd9; color: #fff; font-size: 15px; line-height: 22px; text-align: center; cursor: pointer; }
.site-search-clear:hover { background: #b0b7c4; }

.site-tabs { display: flex; gap: 6px; padding: 10px 28px; background: #fff; border-bottom: 1px solid #e8ebf0; overflow-x: auto; }
.tab { padding: 8px 18px; border-radius: 20px; text-decoration: none; color: #5b6373; font-weight: 600; white-space: nowrap; }
.tab:hover { background: #fff3e6; }
.tab.active { background: #ff8400; color: #fff; }

.site-main { max-width: 1180px; margin: 22px auto; padding: 0 20px; }
.panel { background: #fff; border: 1px solid #e8ebf0; border-radius: 14px; padding: 18px 20px; margin-bottom: 20px; }
.panel-title { font-size: 16px; margin-bottom: 14px; padding-left: 10px; border-left: 4px solid #ff8400; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid #eef1f5; border-radius: 12px; text-decoration: none; color: #2c3344; background: #fafbfc; transition: .15s; }
.card:hover { border-color: #ff8400; box-shadow: 0 4px 14px rgba(255,132,0,.12); transform: translateY(-2px); }
.card-icon { position: relative; }
.card-icon img { width: 28px; height: 28px; border-radius: 6px; background: #eee; }
.avail-dot { position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; border-radius: 50%; background: #21c058; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(33,192,88,.35); }
.card-title { font-weight: 600; font-size: 14px; }
.card-desc { font-size: 12px; color: #8a92a3; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-src { font-size: 11px; color: #b3b9c4; }

.search-meta { font-size: 13px; color: #8a92a3; margin-bottom: 14px; }

.back-to-top { position: fixed; right: 24px; bottom: 24px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #ff8400; color: #fff; font-size: 20px; line-height: 44px; text-align: center; cursor: pointer; box-shadow: 0 4px 14px rgba(255,132,0,.3); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; z-index: 50; }
.back-to-top.is-visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: #ff9a33; }


.empty-tip { color: #9aa3b2; padding: 24px; text-align: center; }

.site-footer { text-align: center; color: #9aa3b2; font-size: 13px; padding: 28px; }
.site-footer a { color: #ff8400; text-decoration: none; }