*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#f0f2f5;
  --surface:#fff;
  --surface2:#f7f8fa;
  --text:#111827;
  --text2:#6b7280;
  --text3:#9ca3af;
  --accent:#2563eb;
  --accent-soft:#eff6ff;
  --green:#10b981;
  --green-soft:#ecfdf5;
  --orange:#f59e0b;
  --orange-soft:#fffbeb;
  --border:#e5e7eb;
  --radius:14px;
  --shadow:0 1px 3px rgba(0,0,0,.05);
  --shadow-lg:0 6px 20px rgba(0,0,0,.07);
}

@media(prefers-color-scheme:dark){
  :root{
    --bg:#0b0f19;
    --surface:#151b2b;
    --surface2:#1a2236;
    --text:#f1f5f9;
    --text2:#94a3b8;
    --text3:#64748b;
    --accent:#60a5fa;
    --accent-soft:rgba(96,165,250,.12);
    --green:#34d399;
    --green-soft:rgba(52,211,153,.12);
    --orange:#fbbf24;
    --orange-soft:rgba(251,191,36,.1);
    --border:#1e293b;
    --shadow:0 1px 3px rgba(0,0,0,.3);
    --shadow-lg:0 6px 20px rgba(0,0,0,.35);
  }
}

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

.container{
  max-width:720px;
  margin:0 auto;
  padding:0 16px;
  width:100%;
}

/* Header */
header{
  border-bottom:1px solid var(--border);
  padding:14px 0;
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(16px);
  background:rgba(255,255,255,.88);
}
@media(prefers-color-scheme:dark){
  header{background:rgba(11,15,25,.88)}
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo{
  width:36px;
  height:36px;
  background:var(--accent);
  color:#fff;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

header h1{
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:-.03em;
}

.subtitle{
  font-size:.72rem;
  color:var(--text3);
  font-weight:500;
}

.header-right{
  display:flex;
  align-items:center;
  gap:8px;
}

.live-dot{
  width:7px;
  height:7px;
  background:var(--green);
  border-radius:50%;
  animation:pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.8)}
}

.update-text{
  font-size:.7rem;
  color:var(--text3);
  font-weight:500;
  display:none;
}
@media(min-width:520px){
  .update-text{display:inline}
}

#refreshBtn{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;
  color:var(--text3);
  transition:all .15s;
}
#refreshBtn:hover{
  color:var(--accent);
  border-color:var(--accent);
}
#refreshBtn.spinning svg{
  animation:spin .6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Filter Bar */
.filter-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:16px 0 0;
}

.filter-label{
  font-size:.72rem;
  color:var(--text3);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.filter-group{
  display:flex;
  gap:4px;
}

.filter-btn{
  padding:5px 14px;
  font-size:.72rem;
  font-weight:600;
  font-family:inherit;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text3);
  border-radius:20px;
  cursor:pointer;
  transition:all .15s;
}

.filter-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
}

.filter-btn.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

/* Stats Bar */
.stats-bar{
  display:flex;
  gap:8px;
  padding:14px 0 4px;
}

.stat{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 18px;
  display:flex;
  align-items:baseline;
  gap:6px;
}

.stat-value{
  font-size:1.1rem;
  font-weight:800;
  color:var(--accent);
  letter-spacing:-.02em;
}

.stat-label{
  font-size:.65rem;
  color:var(--text3);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
}

/* Loading */
.loading{
  text-align:center;
  padding:100px 0;
  color:var(--text3);
}

.loading p{
  font-size:.85rem;
  margin-top:16px;
  font-weight:500;
}

.pulse-loader{
  display:flex;
  gap:5px;
  justify-content:center;
}

.pulse-loader span{
  width:8px;
  height:8px;
  background:var(--accent);
  border-radius:50%;
  animation:bounce .6s ease-in-out infinite alternate;
}
.pulse-loader span:nth-child(2){animation-delay:.15s}
.pulse-loader span:nth-child(3){animation-delay:.3s}

@keyframes bounce{
  to{opacity:.3;transform:translateY(-6px)}
}

/* Error */
.error{
  text-align:center;
  padding:80px 0;
  color:var(--text3);
}
.error svg{margin-bottom:12px;opacity:.3}
.error p{font-size:.9rem;font-weight:500;margin-bottom:16px}
.error button{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:8px 24px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  font-size:.8rem;
  font-family:inherit;
  transition:.15s;
}
.error button:hover{opacity:.85}

/* Trend List */
.trend-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 0 60px;
}

/* Trend Card */
.trend-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  transition:box-shadow .15s, border-color .15s;
  animation:fadeIn .3s ease both;
}

.trend-card:hover{
  box-shadow:var(--shadow-lg);
  border-color:color-mix(in srgb, var(--accent) 30%, var(--border));
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

/* Card Header: rank + image + title/meta */
.card-header{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.card-rank{
  font-size:.95rem;
  font-weight:800;
  color:var(--text3);
  min-width:24px;
  text-align:center;
  padding-top:2px;
  flex-shrink:0;
}

.card-rank.top3{
  color:var(--accent);
}

.card-img{
  width:64px;
  height:64px;
  border-radius:10px;
  object-fit:cover;
  flex-shrink:0;
  background:var(--surface2);
}

.card-main{
  flex:1;
  min-width:0;
}

.card-title{
  font-size:.95rem;
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.01em;
  text-transform:capitalize;
}

.card-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:4px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-size:.68rem;
  font-weight:700;
  padding:2px 8px;
  border-radius:20px;
  letter-spacing:-.01em;
  white-space:nowrap;
}

.badge-traffic{
  color:var(--green);
  background:var(--green-soft);
}

.badge-traffic svg{width:11px;height:11px}

.badge-active{
  color:var(--orange);
  background:var(--orange-soft);
}

.card-time{
  font-size:.68rem;
  color:var(--text3);
  font-weight:500;
}

/* Articles Section */
.card-articles{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.article-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.article-thumb{
  width:48px;
  height:48px;
  border-radius:6px;
  object-fit:cover;
  flex-shrink:0;
  background:var(--surface2);
}

.article-info{
  flex:1;
  min-width:0;
}

.article-title{
  font-size:.78rem;
  font-weight:600;
  color:var(--text);
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.article-source{
  font-size:.65rem;
  color:var(--text3);
  font-weight:500;
  margin-top:1px;
}

/* Related Queries */
.card-queries{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:10px;
}

.query-tag{
  font-size:.64rem;
  font-weight:500;
  color:var(--text3);
  background:var(--surface2);
  border:1px solid var(--border);
  padding:2px 8px;
  border-radius:20px;
  white-space:nowrap;
  transition:color .1s;
}

.query-tag:hover{
  color:var(--text2);
}

/* Empty State */
.empty-state{
  text-align:center;
  color:var(--text3);
  padding:60px 0;
  font-size:.85rem;
  font-weight:500;
}

/* Footer */
footer{
  margin-top:auto;
  padding:20px 0;
  text-align:center;
  font-size:.7rem;
  color:var(--text3);
  border-top:1px solid var(--border);
  font-weight:500;
}

/* Responsive */
@media(max-width:520px){
  .container{padding:0 12px}
  .trend-card{padding:14px 12px}
  .card-img{width:52px;height:52px;border-radius:8px}
  .article-thumb{width:40px;height:40px}
  .card-rank{font-size:.85rem;min-width:20px}
  .card-title{font-size:.88rem}
  .stats-bar{gap:6px}
  .stat{padding:8px 12px}
  .stat-value{font-size:.95rem}
  header h1{font-size:.95rem}
  .logo{width:32px;height:32px;border-radius:8px}
  .logo svg{width:16px;height:16px}
}