/* ─── Variables ──────────────────────────────────────────────────────────── */
:root {
  --bg:          #0d1117;
  --surface:     #161b22;
  --card:        #1c2128;
  --card-hover:  #21262d;
  --border:      #30363d;
  --text:        #e6edf3;
  --muted:       #8b949e;
  --accent:      #58a6ff;
  --accent-h:    #79b8ff;
  --green:       #3fb950;
  --radius:      10px;
  --shadow:      0 1px 4px rgba(0,0,0,.45);
  --shadow-h:    0 6px 20px rgba(0,0,0,.5);
  --t:           .18s ease;
  --font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Helvetica, sans-serif;
  --mono:        'SF Mono','Fira Code','Consolas', monospace;
}

[data-theme="light"] {
  --bg:         #f6f8fa;
  --surface:    #ffffff;
  --card:       #ffffff;
  --card-hover: #f3f4f6;
  --border:     #d0d7de;
  --text:       #1f2328;
  --muted:      #656d76;
  --accent:     #0969da;
  --accent-h:   #0550ae;
  --shadow:     0 1px 4px rgba(31,35,40,.1);
  --shadow-h:   0 6px 20px rgba(31,35,40,.12);
}

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

body {
  font-family: var(--font);
  background:  var(--bg);
  color:       var(--text);
  line-height: 1.6;
  min-height:  100vh;
  transition:  background var(--t), color var(--t);
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
.header {
  background:    var(--surface);
  border-bottom: 1px solid var(--border);
  position:      sticky;
  top:           0;
  z-index:       200;
  backdrop-filter: blur(12px);
}

.header-inner {
  max-width:    1400px;
  margin:       0 auto;
  padding:      0 24px;
  height:       58px;
  display:      flex;
  align-items:  center;
  gap:          16px;
}

.logo {
  font-size:      17px;
  font-weight:    700;
  color:          var(--text);
  text-decoration: none;
  display:        flex;
  align-items:    center;
  gap:            8px;
  white-space:    nowrap;
  letter-spacing: -.3px;
}
.logo-sym { color: var(--accent); font-size: 20px; }

.date-nav {
  display:     flex;
  align-items: center;
  gap:         6px;
  margin-left: auto;
}

.btn-icon {
  background:  none;
  border:      1px solid var(--border);
  color:       var(--muted);
  width:       32px;
  height:      32px;
  border-radius: 7px;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   16px;
  transition:  all var(--t);
  flex-shrink: 0;
}
.btn-icon:hover { border-color: var(--accent); color: var(--text); background: var(--card-hover); }

.date-input {
  background:   var(--card);
  border:       1px solid var(--border);
  color:        var(--text);
  padding:      4px 10px;
  border-radius: 7px;
  font-family:  var(--mono);
  font-size:    13px;
  height:       32px;
  cursor:       pointer;
  transition:   border-color var(--t);
}
.date-input:focus { outline: none; border-color: var(--accent); }

.header-right { display: flex; gap: 6px; }

/* ─── Filter bar ─────────────────────────────────────────────────────────── */
.filter-bar {
  background:    var(--surface);
  border-bottom: 1px solid var(--border);
  position:      sticky;
  top:           58px;
  z-index:       199;
}

.filter-inner {
  max-width:  1400px;
  margin:     0 auto;
  padding:    0 24px;
  height:     46px;
  display:    flex;
  align-items: center;
  gap:        8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-inner::-webkit-scrollbar { display: none; }

.pill {
  background:    none;
  border:        1px solid var(--border);
  color:         var(--muted);
  padding:       4px 14px;
  border-radius: 20px;
  font-size:     13px;
  font-weight:   500;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    all var(--t);
  display:       flex;
  align-items:   center;
  gap:           6px;
  line-height:   1;
  height:        28px;
}
.pill:hover    { border-color: var(--text); color: var(--text); }
.pill.active   { background: var(--accent); border-color: var(--accent); color: #fff; }

.pill-dot {
  width:  8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─── Main ───────────────────────────────────────────────────────────────── */
.main {
  max-width: 1400px;
  margin:    0 auto;
  padding:   24px;
}

/* Stats bar */
.stats-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   20px;
}

.date-label {
  font-size:   18px;
  font-weight: 600;
  color:       var(--text);
  text-transform: capitalize;
}
.count-label {
  font-size: 13px;
  color:     var(--muted);
  margin-top: 2px;
}

.refresh-info {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   12px;
  color:       var(--muted);
}
.dot-live {
  width:  8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: blink 2.5s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ─── Grid ───────────────────────────────────────────────────────────────── */
.grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap:                   16px;
}

/* ─── Card ───────────────────────────────────────────────────────────────── */
.card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  transition:    transform var(--t), box-shadow var(--t), border-color var(--t);
  box-shadow:    var(--shadow);
}
.card:hover {
  transform:    translateY(-3px);
  box-shadow:   var(--shadow-h);
  border-color: var(--accent);
}

.card-img {
  width:      100%;
  height:     170px;
  object-fit: cover;
  display:    block;
  background: var(--surface);
}

.card-body {
  padding: 16px;
  flex:    1;
  display: flex;
  flex-direction: column;
  gap:     10px;
}

.card-top {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             8px;
}

.badge {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  padding:        3px 10px;
  border-radius:  20px;
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .5px;
  flex-shrink:    0;
}

.card-time {
  font-family: var(--mono);
  font-size:   12px;
  color:       var(--muted);
  flex-shrink: 0;
}

.card-title {
  font-size:       15px;
  font-weight:     600;
  line-height:     1.4;
  color:           var(--text);
  text-decoration: none;
  display:         -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:        hidden;
}
.card-title:hover { color: var(--accent); }

.card-desc {
  font-size:       13px;
  color:           var(--muted);
  line-height:     1.55;
  flex:            1;
  display:         -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow:        hidden;
}

.card-foot {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-top:     10px;
  border-top:      1px solid var(--border);
  gap:             8px;
}

.card-author {
  font-size:   12px;
  color:       var(--muted);
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.read-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            3px;
  color:          var(--accent);
  text-decoration: none;
  font-size:      13px;
  font-weight:    500;
  white-space:    nowrap;
  transition:     color var(--t);
  flex-shrink:    0;
}
.read-btn:hover { color: var(--accent-h); }

/* ─── Skeleton ───────────────────────────────────────────────────────────── */
.skeleton-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       16px;
  display:       flex;
  flex-direction: column;
  gap:           12px;
}
.skel {
  background: linear-gradient(
    90deg,
    var(--border)      25%,
    var(--card-hover)  50%,
    var(--border)      75%
  );
  background-size: 250% 100%;
  animation:  shimmer 1.6s infinite;
  border-radius: 5px;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ─── Empty state ────────────────────────────────────────────────────────── */
.empty {
  grid-column: 1 / -1;
  text-align:  center;
  padding:     64px 24px;
  color:       var(--muted);
}
.empty svg   { opacity: .25; margin-bottom: 16px; }
.empty h3    { font-size: 18px; color: var(--text); margin-bottom: 6px; }
.empty p     { font-size: 14px; }

/* ─── Pagination ─────────────────────────────────────────────────────────── */
.pagination {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             6px;
  margin-top:      32px;
}
.page-btn {
  background:    var(--card);
  border:        1px solid var(--border);
  color:         var(--text);
  min-width:     36px;
  height:        36px;
  padding:       0 10px;
  border-radius: 7px;
  cursor:        pointer;
  font-size:     14px;
  transition:    all var(--t);
  display:       flex;
  align-items:   center;
  justify-content: center;
}
.page-btn:hover    { border-color: var(--accent); }
.page-btn.active   { background: var(--accent); border-color: var(--accent); color: #fff; cursor: default; }
.page-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ─── Toast ──────────────────────────────────────────────────────────────── */
.toast {
  position:   fixed;
  bottom:     24px;
  right:      24px;
  background: var(--surface);
  border:     1px solid var(--border);
  color:      var(--text);
  padding:    10px 16px;
  border-radius: var(--radius);
  font-size:  14px;
  box-shadow: var(--shadow-h);
  transform:  translateY(80px);
  opacity:    0;
  transition: all .3s ease;
  z-index:    999;
  pointer-events: none;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
}
@media (max-width: 600px) {
  .header-inner { padding: 0 16px; gap: 10px; }
  .main         { padding: 16px; }
  .grid         { grid-template-columns: 1fr; }
  .logo span.label { display: none; }
  .date-label   { font-size: 15px; }
}