.app-header { display:flex; min-height:64px; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-3) var(--space-6); border-bottom:1px solid var(--border-subtle); }
.brand-wrap,.header-actions,.title-actions,.filter-row,.filter-group,.view-range,.toggle { display:flex; align-items:center; }
.brand-wrap,.header-actions,.title-actions { gap:var(--space-3); }
.brand { letter-spacing:-.03em; font-size:18px; font-weight:700; }
.app-shell { width:min(1320px,calc(100% - 48px)); margin:0 auto; padding:40px 0 72px; }
.page-title { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-6); }
.eyebrow { margin:0 0 var(--space-2); color:var(--accent-hover); font-size:12px; font-weight:650; letter-spacing:.08em; }
h1 { margin:0; font-size:clamp(28px,4vw,42px); line-height:1.1; letter-spacing:-.05em; }
.description { max-width:680px; margin:var(--space-2) 0 0; color:var(--text-secondary); font-size:14px; line-height:1.55; }
.last-collected { color:var(--text-tertiary); font-size:12px; white-space:nowrap; }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-3); margin-top:var(--space-8); }
.stat-card { min-height:112px; padding:var(--space-5); }
.stat-label { display:block; color:var(--text-secondary); font-size:12px; }
.stat-value { display:block; margin-top:var(--space-3); font-size:24px; line-height:1.25; }
.stat-note { display:block; margin-top:var(--space-1); color:var(--text-tertiary); font-size:12px; }
.filter-bar { display:flex; flex-direction:column; gap:var(--space-4); margin-top:var(--space-6); padding:var(--space-4); }
.filter-row { gap:var(--space-6); flex-wrap:wrap; }
.filter-row-secondary { padding-top:var(--space-4); border-top:1px solid var(--border-subtle); }
.filter-group { gap:var(--space-2); min-width:0; }
.filter-label { color:var(--text-secondary); font-size:12px; font-weight:650; white-space:nowrap; }
.filter-segmented { gap:2px; padding:3px; border-radius:8px; }
.filter-segmented .button { min-height:32px; padding:0 11px; border-color:transparent; background:transparent; color:var(--text-secondary); font-size:12px; }
.filter-segmented .button[aria-pressed="true"] { border-color:var(--accent); background:var(--accent); color:#fff; }
.category-group { margin-left:auto; }
#category-filter,.view-range input,#trend-search { min-height:38px; border:1px solid var(--border); border-radius:var(--radius-control); background:var(--surface-raised); color:var(--text-primary); font:inherit; font-size:12px; outline:none; }
#category-filter { min-width:150px; padding:0 10px; }
.view-range { gap:8px; }
.view-range input { width:100px; padding:0 10px; }
.view-range i { color:var(--text-tertiary); font-style:normal; }
.search-wrap { flex:1 1 240px; }
#trend-search { width:100%; padding:0 12px; }
#category-filter:focus,#trend-search:focus,.view-range input:focus { border-color:var(--accent); }
.toggle { gap:var(--space-2); color:var(--text-secondary); font-size:13px; }
.toggle input { width:16px; height:16px; accent-color:var(--accent); }
.capture-button { margin-left:auto; }
.result-head { display:flex; align-items:center; justify-content:space-between; margin:var(--space-6) 0 var(--space-3); }
.result-head h2 { margin:0; font-size:18px; line-height:1.35; }
#result-count { color:var(--text-tertiary); font-size:12px; }
.trend-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-4); padding:0; margin:0; list-style:none; }
.trend-card { min-width:0; overflow:hidden; padding:0; transition:background var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast); }
.trend-card:hover { border-color:var(--accent-hover); background:var(--surface-hover); transform:translateY(-2px); }
.trend-card-media { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--surface-raised); }
.trend-card-media img,.thumbnail-placeholder { display:block; width:100%; height:100%; object-fit:cover; }
.thumbnail-placeholder { display:grid; place-items:center; color:var(--text-tertiary); font-size:11px; font-weight:650; letter-spacing:.14em; background:linear-gradient(145deg,#25212e,#111217 58%,#1c2831); }
.trend-rank,.trend-duration { position:absolute; padding:5px 7px; border-radius:6px; background:rgba(8,9,10,.86); color:var(--text-primary); font-size:11px; font-weight:700; }
.trend-rank { top:10px; left:10px; min-width:25px; text-align:center; }
.trend-duration { right:8px; bottom:8px; font-variant-numeric:tabular-nums; }
.trend-card-body { display:flex; min-height:138px; flex-direction:column; gap:6px; padding:14px; }
.trend-card-title { display:-webkit-box; min-height:42px; overflow:hidden; font-size:15px; line-height:1.4; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.trend-card-channel { overflow:hidden; color:var(--text-secondary); font-size:12px; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }
.trend-card-views { overflow:hidden; color:var(--text-tertiary); font-size:12px; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }
.trend-card-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:8px; border-top:1px solid var(--border-subtle); }
.button-card-action { min-height:28px; padding:0 8px; color:var(--text-tertiary); font-size:10px; }
.button-card-action.is-confirmed { border-color:color-mix(in srgb,var(--success) 60%,var(--border)); color:var(--success); }
.legal-note,.empty-state { margin-top:var(--space-4); padding:var(--space-4); color:var(--text-secondary); font-size:13px; line-height:1.55; }
.legal-note strong { color:var(--warning); }
.empty-state { text-align:center; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }