/* === Fonts === */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Sora-Latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Base === */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-deep: #060E1A;
  --bg-card: #1e3255;
  --bg-card-hover: #243a62;
  --border-subtle: #1E3A5F;
  --text-primary: #FFFFFF;
  --text-body: #CBD5E1;
  --text-muted: #94A3B8;
  --text-dim: #64748B;
  --accent-default: #00C2FF;

  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}

body {
  font-family: var(--font-body);
  background: var(--bg-deep);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(15, 39, 68, 0.8) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 0%, rgba(20, 30, 60, 0.6) 0%, transparent 50%),
    repeating-linear-gradient(0deg, transparent, transparent 80px, rgba(30, 58, 95, 0.07) 80px, rgba(30, 58, 95, 0.07) 81px),
    repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(30, 58, 95, 0.07) 80px, rgba(30, 58, 95, 0.07) 81px);
  color: var(--text-body);
  min-height: 100vh;
  line-height: 1.6;
}

a { color: var(--accent-default); text-decoration: none; }
a:hover { text-decoration: underline; }

/* === Header === */
header {
  padding: 2.5rem 2rem 1.5rem;
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}

header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-default), transparent);
}

header h1 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
  letter-spacing: -0.02em;
}

header h1 .accent {
  color: var(--accent-default);
  text-shadow: 0 0 30px rgba(0, 194, 255, 0.3);
}

header .subtitle {
  font-size: 0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* === Date Picker === */
/* Grid keeps the date cluster (column 2, auto width) centered between two
   equal flex columns, so the cluster position stays stable across category
   tabs regardless of whether the PDF download button (column 3) is visible. */
.date-picker {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 1.5rem 0 0.5rem;
  position: relative;
}

.date-picker-main {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  position: relative;
}

.date-picker .arrow {
  background: none;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 1.2rem;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
}

.date-picker .arrow:hover:not(:disabled) {
  border-color: var(--accent-default);
  color: var(--accent-default);
  box-shadow: 0 0 12px rgba(0, 194, 255, 0.2);
}

.date-picker .arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.date-picker .pdf-download {
  grid-column: 3;
  justify-self: start;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  padding: 0.3rem 0.7rem;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.25s;
  white-space: nowrap;
  margin-left: 1rem;
}

.date-picker .pdf-download:hover {
  color: var(--accent-default);
  border-color: var(--accent-default);
  text-decoration: none;
}

.date-picker .current-date {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0.4rem 1rem;
  border-radius: 6px;
  transition: all 0.25s;
  user-select: none;
  text-shadow: 0 0 20px rgba(0, 194, 255, 0.15);
}

.date-picker .current-date:hover {
  background: rgba(19, 35, 64, 0.8);
  text-shadow: 0 0 20px rgba(0, 194, 255, 0.3);
}

/* === Calendar Popup === */
.calendar-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
}

.calendar {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5rem;
  background: rgba(19, 35, 64, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(30, 58, 95, 0.6);
  border-radius: 12px;
  padding: 1rem;
  z-index: 100;
  min-width: 280px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 194, 255, 0.2);
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.calendar-header .month-label {
  font-family: var(--font-display);
  color: var(--text-primary);
  font-weight: 600;
}

.calendar-header button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.25rem 0.5rem;
  transition: color 0.2s;
}

.calendar-header button:hover { color: var(--accent-default); }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.calendar-grid .weekday {
  font-size: 0.75rem;
  color: var(--text-dim);
  padding: 0.25rem;
}

.calendar-grid .day {
  padding: 0.4rem;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text-dim);
  cursor: default;
  transition: all 0.15s;
}

.calendar-grid .day.available {
  color: var(--text-body);
  cursor: pointer;
}

.calendar-grid .day.available:hover {
  background: var(--border-subtle);
}

.calendar-grid .day.selected {
  background: var(--accent-default);
  color: var(--bg-deep);
  font-weight: 600;
}

.calendar-grid .day.today {
  border: 1px solid var(--accent-default);
}

.calendar-grid .day.empty {
  visibility: hidden;
}

/* === Day Title === */
.day-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 1.5rem 0 1.5rem;
  padding: 0 1.5rem;
  letter-spacing: -0.01em;
}

/* === Card Grid === */
.card-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
  columns: 3;
  column-gap: 1.4rem;
}

/* === Card Entry Animation === */
@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Card Base === */
.card {
  background: var(--bg-card);
  border-left: 4px solid var(--accent-default);
  border-radius: 8px;
  padding: 1.25rem;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  opacity: 0;
  animation: cardEnter 0.45s ease-out forwards;
  position: relative;
  overflow: hidden;
  /* Columns layout support */
  break-inside: avoid;
  margin-bottom: 1.4rem;
  /* Subtle outline to separate cards from background and each other */
  outline: 1px solid rgba(255, 255, 255, 0.06);
  outline-offset: -1px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* Soft top highlight for depth/glass feel */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 4px;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.15) 40%, rgba(255,255,255,0.08));
  pointer-events: none;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  outline-color: rgba(255, 255, 255, 0.08);
}

.card.faded {
  opacity: 0.3 !important;
  transform: scale(0.98);
}

/* === Card Icon === */
.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-right: 0.75rem;
}

/* GitHub avatar variant — ~1.5x the default icon, image fills the box */
.card-icon-avatar {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  background: transparent !important;
}

.card-icon-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

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

.card .card-source {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

.card .card-source .source-label {
  color: var(--text-dim);
  margin-right: 0.15em;
}

.card .card-source .source-link {
  cursor: pointer;
}

.card .card-source .source-link:hover {
  text-decoration: underline;
}

.card .card-title {
  font-size: 1rem;
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.45;
}

.card .card-summary {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.card .card-tags {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.card .card-tags span {
  font-size: 0.7rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}

/* === Card Image === */
.card-image {
  float: right;
  margin: 0 0 0.5rem 0.75rem;
  border-radius: 6px;
  overflow: hidden;
  width: 25%;
  flex-shrink: 0;
}

.card-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  opacity: 0.92;
  transition: opacity 0.3s;
}

.card:hover .card-image img {
  opacity: 1;
}

/* Logo with transparent bg: add white background */
.logo-bg img {
  background: rgba(255, 255, 255, 0.9);
  padding: 0.5rem;
  border-radius: 6px;
}

.card-clear {
  clear: both;
}

/* Collapsed state — full card width, no float, below title+summary */
.card-image-block {
  margin-top: 0.75rem;
  border-radius: 6px;
  overflow: hidden;
}

.card-image-block img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  opacity: 0.92;
  transition: opacity 0.3s;
}

.card:hover .card-image-block img {
  opacity: 1;
}

/* Chart in detail section — 70% width, centered */
.card-detail-chart {
  margin: 0 auto 1.25rem;
  width: 70%;
  border-radius: 6px;
  overflow: hidden;
}

.card-detail-chart img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  opacity: 0.95;
}

/* === Signal Line === */
.card-signal {
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(30, 58, 95, 0.5);
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card.expanded .card-signal {
  display: none;
}

.card-signal .signal-label {
  font-weight: 700;
  font-style: normal;
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  margin-right: 0.3rem;
}

/* === Hero Card === */
.card-hero {
  column-span: all;
  padding: 2rem;
  border-left-width: 5px;
  border-radius: 12px;
}

.card-hero .card-icon {
  width: 52px;
  height: 52px;
  font-size: 1.6rem;
  border-radius: 14px;
}

.card-hero .card-source {
  font-size: 0.8rem;
}

.card-hero .card-title {
  font-size: 1.55rem;
  line-height: 1.35;
  margin-bottom: 0.6rem;
  letter-spacing: -0.02em;
}

.card-hero .card-summary {
  font-size: 1rem;
  color: var(--text-body);
  line-height: 1.7;
}

.card-hero .badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  text-transform: uppercase;
}

/* === Featured Card === */
.card-featured .card-title {
  font-size: 1.15rem;
}

.card-featured .card-summary {
  font-size: 0.9rem;
  color: var(--text-body);
}

.card-featured .card-icon {
  width: 44px;
  height: 44px;
  font-size: 1.3rem;
  border-radius: 12px;
}

/* === Expanded Card === */
.card.expanded {
  column-span: all;
  cursor: default;
  transform: none;
}

.card-detail {
  display: none;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

.card.expanded .card-detail {
  display: block;
}

.card-detail .detail-section {
  margin-bottom: 1.25rem;
  padding-left: 1rem;
}

.card-detail .detail-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}

.card-detail .detail-text {
  font-size: 0.92rem;
  color: var(--text-body);
  line-height: 1.8;
}

.card-detail blockquote {
  padding: 0.8rem 1rem;
  margin: 0.6rem 0;
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.6;
  border-radius: 0 6px 6px 0;
  background: rgba(0, 0, 0, 0.15);
}

.card-detail .significance-box {
  padding: 0.8rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.7;
}

.card-detail .detail-links {
  list-style: none;
}

.card-detail .detail-links li {
  margin-bottom: 0.3rem;
}

.card-detail .detail-links a {
  font-size: 0.85rem;
  transition: color 0.2s;
}

.card .close-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 1.25rem;
  padding: 0.4rem 1.2rem;
  font-size: 0.8rem;
  font-family: var(--font-body);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  transition: all 0.2s;
}

.card .close-btn:hover {
  color: var(--text-primary);
}

/* === Loading & Error States === */
.loading, .error-msg {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-dim);
  font-size: 1rem;
}

.error-msg { color: #f87171; }

/* === Footer === */
footer {
  text-align: center;
  padding: 2.5rem;
  color: var(--text-dim);
  font-size: 0.8rem;
  border-top: 1px solid var(--border-subtle);
  margin-top: 1rem;
}

/* === Responsive === */
@media (max-width: 1024px) {
  .card-grid {
    columns: 2;
  }
  .card-hero .card-title {
    font-size: 1.3rem;
  }
}

@media (max-width: 640px) {
  header { padding: 1.5rem 1rem 1rem; }
  header h1 { font-size: 1.6rem; }

  .card-grid {
    columns: 1;
    padding: 0 1rem 2rem;
  }

  .card-hero {
    padding: 1.5rem;
  }

  .card-hero .card-title {
    font-size: 1.25rem;
  }

  /* Badge: move below header instead of overlapping title */
  .card-hero .badge {
    position: static;
    display: inline-block;
    margin-bottom: 0.5rem;
  }

  /* Images: full width on mobile instead of 25% float */
  .card-image {
    float: none;
    width: 100%;
    margin: 0.75rem 0;
  }

  .card-detail-chart {
    width: 100%;
  }

  .calendar {
    min-width: 260px;
  }
}

/* === GitHub Link === */
.github-link {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-family: var(--font-display);
  transition: color 0.25s;
  z-index: 10;
}

.github-link:hover {
  color: var(--accent-default);
  text-decoration: none;
}

.github-link svg {
  opacity: 0.8;
  transition: opacity 0.25s;
}

.github-link:hover svg {
  opacity: 1;
}

@media (max-width: 640px) {
  .github-link {
    top: 1rem;
    right: 1rem;
  }
  .github-link span {
    display: none;
  }
}

/* === Tab Bar === */
.tab-bar {
  display: flex;
  justify-content: center;
  gap: 8px;
  max-width: 1200px;
  margin: 1rem auto 0.75rem;
  padding: 0 1rem;
  flex-wrap: wrap;
}

.tab-bar button {
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 22px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  transition: color 150ms, background 150ms, border-color 150ms;
}

.tab-bar button:hover:not(.active) {
  color: var(--text-body);
  background: rgba(0, 194, 255, 0.06);
}

.tab-bar button.active {
  color: var(--text-primary);
  background: var(--bg-card);
  border-bottom-color: var(--accent-default);
}

/* === Sectioned Grid (GitHub tab) === */
.briefing-section {
  margin-top: 0.5rem;
}

/* Sub-tab bar (e.g. 新晋热门 / 上升之星) */
.section-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  max-width: 1200px;
  margin: 0.5rem auto 1.25rem;
  padding: 0 1rem;
  flex-wrap: wrap;
}

.section-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  padding: 9px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  cursor: pointer;
  transition: color 150ms, background 150ms, border-color 150ms;
}

.section-tabs button:hover:not(.active) {
  color: var(--text-body);
  background: rgba(0, 194, 255, 0.08);
  border-color: rgba(0, 194, 255, 0.25);
}

.section-tabs button.active {
  color: var(--text-primary);
  background: rgba(0, 194, 255, 0.12);
  border-color: var(--accent-default);
}

.section-subtitle-line {
  max-width: 1200px;
  margin: 0 auto 1.25rem;
  padding: 0 2rem;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 640px) {
  .section-subtitle-line {
    padding: 0 1rem;
    font-size: 12px;
  }
}

.section-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto 1.25rem;
  padding: 0 2rem 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.section-label {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.section-subtitle {
  font-size: 13px;
  color: var(--text-muted);
}

/* === GitHub card meta (stars / lang / forks) === */
.card-meta-github {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.card-meta-github .stars-gained {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  background: rgba(0, 194, 255, 0.18);
  color: var(--accent-default);
  border: 1px solid rgba(0, 194, 255, 0.35);
}

@media (max-width: 600px) {
  .tab-bar button {
    padding: 8px 16px;
    font-size: 14px;
  }

  .section-header {
    padding: 0 1rem 12px;
  }

  .section-label {
    font-size: 18px;
  }

  .section-subtitle {
    font-size: 12px;
  }
}