#trends-view{display:flex;flex:1;min-width:0;min-height:0;background:var(--bg);overflow:hidden}
.trends-main{flex:1;min-width:0;overflow:auto;padding:30px}
.trends-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}
.trends-heading h1{font-size:22px;line-height:1.4;margin:0 0 8px;font-weight:600}.trends-heading p{font-size:12px;color:var(--muted);margin:0}
.trends-focus{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:20px}
.trends-focus span{font-size:11px;color:var(--muted)}.trends-focus strong{display:block;font-size:15px;font-weight:500;margin-top:7px}.trends-focus p{font-size:12px;line-height:1.7;color:var(--muted);margin:8px 0 0;max-width:650px}.trends-company{white-space:nowrap}
.trends-tabs{display:flex;flex-wrap:wrap;gap:8px}.trends-tabs .tab{height:32px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:12px}.trends-tabs .tab.active{background:var(--selected);color:var(--action);border-color:var(--sky-line)}.trends-meta{display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:11px;padding:18px 0}
.trends-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;padding-bottom:24px}
.trend-card{display:flex;flex-direction:column;min-width:0;text-align:left;min-height:146px;height:auto;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);transition:background .2s ease,transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s ease}
.trend-card:hover{background:var(--selected);border-color:var(--sky-line)}.trend-tag{align-self:flex-start;padding:3px 8px;border-radius:999px;background:var(--bg);font-size:10px;color:var(--action)}.trend-tag[data-category=ai]{color:var(--action)}.trend-card h2{font-size:14px;line-height:1.65;font-weight:600;margin:12px 0 16px;display:block;white-space:normal;overflow-wrap:anywhere;flex-shrink:0}
.trend-card p{font-size:12px;color:var(--muted);line-height:1.75;margin:0 0 18px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.trend-card footer{display:flex;gap:10px;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:auto}
.trends-empty{position:relative;padding:48px 20px;color:var(--muted);line-height:1.8;text-align:center}.trends-empty h2{font-size:15px;color:var(--text);font-weight:500}.trends-empty p{font-size:12px}.trends-empty .task-progress{position:relative;max-width:200px;margin:25px auto 0;border-radius:3px}
.trend-detail{width:340px;flex:none;overflow:auto;border-left:1px solid var(--line);background:var(--surface);padding:22px;animation:trend-enter .22s ease-out}
.trend-detail header{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px;margin-bottom:25px}.trend-detail h2{font-size:18px;font-weight:500;line-height:1.65}.trend-detail>p{font-size:13px;line-height:1.85;overflow-wrap:anywhere}.trend-detail footer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:28px}.trend-detail footer button{font-size:12px;padding:9px 6px;border:1px solid var(--line);border-radius:8px;background:var(--soft);text-align:center;transition:background .16s}.trend-detail footer button:hover{background:var(--hover)}.trend-detail .small-note{color:var(--muted);font-size:11px}
#trends-view:has(.trend-detail) .trends-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@keyframes trend-enter{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:1100px){.trends-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.trend-detail{width:300px}#trends-view:has(.trend-detail) .trends-grid{grid-template-columns:1fr}.trends-main{padding:22px}}
@media(prefers-reduced-motion:reduce){.trend-detail,.trend-card{animation:none;transition:none}}

.trend-tag[data-category=fashion]{color:#c678dd}
.trend-card:active{transform:translateY(0) scale(.985)}
.trend-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.trends-tabs .tab{transition:color .18s ease,background .18s ease}
.trend-detail{animation:trend-enter .25s cubic-bezier(.2,.8,.2,1)}
.trend-detail.is-closing{animation:trend-exit .18s ease both;pointer-events:none}
@keyframes trend-exit{to{opacity:0;transform:translateX(20px)}}
@media(prefers-reduced-motion:reduce){.trend-card,.trend-detail,.trend-detail.is-closing,.trends-tabs .tab{animation:none;transition:none}.trend-card:hover,.trend-card:active{transform:none}}

.trend-explanation h3{font-size:12px;color:var(--muted);font-weight:500;margin:20px 0 12px}
.trend-explanation p,.trend-original p{font-size:13px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 14px}
.trend-original{font-size:12px;color:var(--muted);margin-top:20px}.trend-original summary{cursor:pointer}.trend-original p{margin-top:12px}

.trend-explanation .task-progress{position:relative;left:auto;right:auto;bottom:auto;height:3px;width:100%;border-radius:3px;margin:12px 0 20px}