*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f8f9fa;--bg-card:#ffffff;
  --text:#1a1a2e;--text2:#374151;--text3:#6b7280;
  --accent:#4f46e5;--accent-hover:#4338ca;--accent-bg:rgba(79,70,229,.08);
  --border:#e5e7eb;--border-subtle:#f3f4f6;
  --success:#10b981;--success-bg:rgba(16,185,129,.08);--success-border:rgba(16,185,129,.2);
  --warning:#f59e0b;--warning-bg:rgba(245,158,11,.08);--warning-border:rgba(245,158,11,.2);
  --danger:#ef4444;--danger-bg:rgba(239,68,68,.08);--danger-border:rgba(239,68,68,.2);
  --info:#3b82f6;--info-bg:rgba(59,130,246,.08);--info-border:rgba(59,130,246,.2);
  --purple:#8b5cf6;--purple-bg:rgba(139,92,246,.08);--purple-border:rgba(139,92,246,.2);
  --cyan:#06b6d4;--cyan-bg:rgba(6,182,212,.08);--cyan-border:rgba(6,182,212,.2);
  --gray:#6b7280;--gray-bg:rgba(107,114,128,.08);
  --radius:8px;--radius-lg:12px;
  --shadow:0 1px 3px rgba(0,0,0,.06);--shadow-md:0 4px 16px rgba(0,0,0,.08);
}
[data-theme="dark"]{
  --bg:#0d0b0e;--bg-card:#1a1a2e;
  --text:#e5e7eb;--text2:#9ca3af;--text3:#6b7280;
  --accent:#818cf8;--accent-hover:#6366f1;--accent-bg:rgba(129,140,248,.1);
  --border:#2d2b3a;--border-subtle:#1e1c2e;
  --success-bg:rgba(16,185,129,.12);--success-border:rgba(16,185,129,.25);
  --warning-bg:rgba(245,158,11,.12);--warning-border:rgba(245,158,11,.25);
  --danger-bg:rgba(239,68,68,.12);--danger-border:rgba(239,68,68,.25);
  --info-bg:rgba(59,130,246,.12);--info-border:rgba(59,130,246,.25);
  --purple-bg:rgba(139,92,246,.12);--purple-border:rgba(139,92,246,.25);
  --cyan-bg:rgba(6,182,212,.12);--cyan-border:rgba(6,182,212,.25);
  --gray-bg:rgba(107,114,128,.12);
  --shadow:0 1px 3px rgba(0,0,0,.3);--shadow-md:0 4px 16px rgba(0,0,0,.4);
}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;padding:20px}
.updates-page{max-width:720px;margin:0 auto;padding:20px 0}
.page-header-section{text-align:center;margin-bottom:32px}
.header-logo{
  width:56px;height:56px;border-radius:50%;margin:0 auto 16px;
  background:var(--accent-bg);border:1px solid var(--border);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--accent);
}
.page-header-section h1{font-size:24px;font-weight:700;color:var(--text);margin-bottom:6px}
.page-subtitle{font-size:14px;color:var(--text3);line-height:1.5}
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;justify-content:center}
.filter-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 14px;border:1px solid var(--border);border-radius:9999px;
  background:var(--bg-card);color:var(--text2);font-size:12px;font-weight:500;
  cursor:pointer;transition:all .15s;font-family:inherit;
}
.filter-btn:hover{border-color:var(--accent);color:var(--accent)}
.filter-btn.active{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);font-weight:600}
.filter-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;border-radius:9999px;font-size:10px;font-weight:700;
  background:var(--border-subtle);color:var(--text3);
}
.filter-btn.active .filter-count{background:var(--accent);color:#fff}
.featured-section{margin-bottom:24px}
.updates-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}
.update-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:20px 24px;box-shadow:var(--shadow);cursor:pointer;
  transition:all .2s ease;
}
.update-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--accent)}
.update-card.featured{border:2px solid var(--accent);background:var(--accent-bg)}
.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:6px}
.card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cat-badge{
  display:inline-block;padding:3px 10px;border-radius:9999px;
  font-size:11px;font-weight:600;
}
.cat-new{background:var(--success-bg);color:var(--success);border:1px solid var(--success-border)}
.cat-improvement{background:var(--info-bg);color:var(--info);border:1px solid var(--info-border)}
.cat-fix{background:var(--warning-bg);color:var(--warning);border:1px solid var(--warning-border)}
.cat-security{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-border)}
.cat-maintenance{background:var(--purple-bg);color:var(--purple);border:1px solid var(--purple-border)}
.cat-announcement{background:var(--cyan-bg);color:var(--cyan);border:1px solid var(--cyan-border)}
.version-tag{
  font-size:11px;font-family:'Courier New',monospace;font-weight:600;
  color:var(--text3);background:var(--border-subtle);padding:2px 8px;
  border-radius:var(--radius);
}
.featured-badge{font-size:11px;color:var(--accent);font-weight:600}
.card-title{font-size:17px;font-weight:700;color:var(--text);margin-bottom:6px;line-height:1.3}
.card-summary{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:10px}
.card-footer{font-size:11px;color:var(--text3)}
.detail-view{margin-bottom:32px}
.back-link{
  display:inline-flex;align-items:center;gap:4px;
  font-size:13px;color:var(--accent);text-decoration:none;font-weight:500;
  margin-bottom:20px;transition:opacity .15s;
}
.back-link:hover{opacity:.7}
.detail-meta{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.detail-date{font-size:12px;color:var(--text3)}
.detail-title{font-size:24px;font-weight:700;color:var(--text);margin-bottom:12px;line-height:1.3}
.detail-summary{font-size:15px;color:var(--text2);line-height:1.7;margin-bottom:20px}
.detail-content{
  font-size:14px;color:var(--text2);line-height:1.8;
  padding:24px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.empty-state{text-align:center;padding:48px 20px}
.empty-icon{font-size:40px;margin-bottom:12px;opacity:.6}
.empty-state h3{font-size:16px;font-weight:600;color:var(--text);margin-bottom:6px}
.empty-state p{font-size:13px;color:var(--text3)}
.loading-state{text-align:center;padding:40px;color:var(--text3);font-size:13px}
.spinner{
  width:28px;height:28px;border:3px solid var(--border);
  border-top-color:var(--accent);border-radius:50%;
  animation:spin 1s linear infinite;margin:0 auto 12px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.page-footer-section{text-align:center;padding-top:16px;border-top:1px solid var(--border-subtle)}
.page-footer-section p{font-size:11px;color:var(--text3)}
@media(max-width:480px){
  .updates-page{padding:12px 0}
  .page-header-section h1{font-size:20px}
  .update-card{padding:16px}
  .card-title{font-size:15px}
  .detail-title{font-size:20px}
  .filter-bar{gap:6px}
}