*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB",sans-serif;background:#fff;color:#111;font-size:15px;line-height:1.6;padding:0 16px 40px;opacity:1;transition:opacity 350ms ease}
body.fade-out{opacity:0}
header{padding:20px 0 12px;display:flex;justify-content:space-between;align-items:center}
.app-name{font-size:18px;font-weight:700;letter-spacing:-.5px}
.header-actions{display:flex;gap:8px;align-items:center}
.user-btn{font-size:13px;color:#111;background:#f5f5f7;padding:6px 12px;border-radius:6px;text-decoration:none;font-weight:600;transition:background .2s}
.user-btn:active{background:#e5e5ea}
.slice{--c1:#202020;--c2:#87CEFA;--size-letter:14px;padding:.45em 1em;font-size:var(--size-letter);background:transparent;border:calc(var(--size-letter)/6) solid var(--c2);border-radius:.3em;cursor:pointer;overflow:hidden;position:relative;transition:300ms cubic-bezier(.83,0,.17,1);text-decoration:none;display:inline-flex;align-items:center;gap:4px;line-height:1;font-family:inherit}
.slice>.text{font-weight:700;color:var(--c2);position:relative;z-index:1;transition:color 700ms cubic-bezier(.83,0,.17,1)}
.slice::after{content:"";width:0;height:calc(300% + 1em);position:absolute;translate:-50% -50%;inset:50%;rotate:30deg;background:var(--c2);transition:1000ms cubic-bezier(.83,0,.17,1)}
.slice:hover>.text{color:var(--c1)}
.slice:hover::after{width:calc(120% + 1em)}
.slice.animating>.text{color:var(--c1)}
.slice.animating::after{width:calc(120% + 1em)}
.slice:active{scale:.98;filter:brightness(.9)}
.search-wrapper{margin-bottom:20px}
.search-input{width:100%;background:#f5f5f7;border:1px solid transparent;padding:10px 12px;border-radius:8px;font-size:14px;color:#111;outline:none;transition:all .2s}
.search-input:focus{background:#fff;border-color:#000}
.filter-bar{display:flex;gap:16px;overflow-x:auto;white-space:nowrap;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid #f0f0f0;scrollbar-width:none}
.filter-bar::-webkit-scrollbar{display:none}
.filter-item{font-size:14px;color:#86868b;cursor:pointer;font-weight:500;transition:color .15s}
.filter-item.active{color:#000;font-weight:700;position:relative}
.filter-item.active::after{content:'';position:absolute;bottom:-12px;left:0;right:0;height:2px;background:#000;border-radius:2px}
.list-container{display:flex;flex-direction:column;min-height:200px}
.item-row{padding:14px 0;border-bottom:1px solid #f5f5f7;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:opacity 200ms ease}
.item-row:active{opacity:.7}
.item-header{display:flex;align-items:center;gap:8px}
.item-tag{font-size:11px;font-weight:600;color:#555;background:#f0f0f2;padding:1px 5px;border-radius:4px}
.item-title{font-size:15px;font-weight:600;color:#111}
.item-desc{font-size:13px;color:#6e6e73;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item-meta{font-size:12px;color:#a1a1a6;margin-top:2px}
.loading-tip{text-align:center;padding:40px 0;color:#a1a1a6;font-size:13px}
footer{margin-top:40px;text-align:center;font-size:12px;color:#c7c7cc}