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

:root{
  --bg:#f0f2f5;
  --surface:#fff;
  --surface2:#f8f9fb;
  --text:#111827;
  --text2:#6b7280;
  --text3:#9ca3af;
  --accent:#2563eb;
  --accent-soft:#eff6ff;
  --green:#10b981;
  --green-soft:#ecfdf5;
  --border:#e5e7eb;
  --radius:12px;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-lg:0 4px 12px rgba(0,0,0,.08);
}

@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);
    --border:#1e293b;
    --shadow:0 1px 3px rgba(0,0,0,.3);
    --shadow-lg:0 4px 12px rgba(0,0,0,.4);
  }
}

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:860px;
  margin:0 auto;
  padding:0 20px;
  width:100%;
}

/* Header */
header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:16px 0;
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,.85);
}
@media(prefers-color-scheme:dark){
  header{background:rgba(21,27,43,.85)}
}

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

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

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

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

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

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

.live-dot{
  width:8px;
  height:8px;
  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:.5;transform:scale(.85)}
}

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

#refreshBtn{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;
  color:var(--text2);
  transition:all .2s;
}
#refreshBtn:hover{
  background:var(--accent-soft);
  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:10px;
  padding:20px 0 0;
}

.filter-label{
  font-size:.78rem;
  color:var(--text3);
  font-weight:600;
}

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

.filter-btn{
  padding:6px 16px;
  font-size:.78rem;
  font-weight:600;
  font-family:inherit;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text2);
  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:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  padding:16px 0 8px;
}

.stat{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
  text-align:center;
}

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

.stat-label{
  font-size:.7rem;
  color:var(--text3);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-top:2px;
  display:block;
}

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

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

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

.pulse-loader span{
  width:10px;
  height:10px;
  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(-8px)}
}

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

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

/* Trend Item */
.trend-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 20px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  box-shadow:var(--shadow);
  transition:all .15s ease;
  animation:fadeIn .3s ease both;
}

.trend-item:hover{
  box-shadow:var(--shadow-lg);
  border-color:var(--accent);
}

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

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

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

.trend-img{
  width:72px;
  height:72px;
  border-radius:8px;
  object-fit:cover;
  flex-shrink:0;
  background:var(--surface2);
}

.trend-content{
  flex:1;
  min-width:0;
}

.trend-title{
  font-size:1rem;
  font-weight:700;
  line-height:1.35;
  margin-bottom:4px;
  letter-spacing:-.01em;
}

.trend-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}

.traffic-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.72rem;
  font-weight:700;
  color:var(--green);
  background:var(--green-soft);
  padding:3px 9px;
  border-radius:20px;
  letter-spacing:-.01em;
}

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

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

/* Articles inline */
.trend-articles{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:6px;
}

.trend-article{
  font-size:.82rem;
  color:var(--text2);
  line-height:1.45;
  padding-left:12px;
  border-left:2px solid var(--border);
}

.trend-article-title{
  font-weight:600;
  color:var(--text);
}

.trend-article-source{
  font-size:.7rem;
  color:var(--text3);
  font-weight:500;
}

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

/* Responsive */
@media(max-width:520px){
  .trend-item{padding:14px 14px;gap:12px}
  .trend-img{width:56px;height:56px;border-radius:6px}
  .rank{font-size:.95rem;min-width:22px}
  .trend-title{font-size:.92rem}
  .stats-bar{grid-template-columns:repeat(3,1fr);gap:8px}
  .stat{padding:10px 8px}
  .stat-value{font-size:1.05rem}
  .stat-label{font-size:.62rem}
  header h1{font-size:1.05rem}
  .logo{width:34px;height:34px;border-radius:8px}
  .logo svg{width:18px;height:18px}
}