@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=JetBrains+Mono:wght@600;700&display=swap');

:root {
  --promo-bg-start: #0b2033;
  --promo-bg-mid: #123b57;
  --promo-bg-end: #0c4a45;
  --promo-border: rgba(146, 200, 255, 0.24);
  --promo-title: #f4faff;
  --promo-text: rgba(236, 247, 255, 0.9);
  --promo-muted: rgba(221, 238, 255, 0.72);
  --promo-accent: #7de8d1;
  --promo-accent-strong: #89dfff;
  --promo-btn-text: #06212f;
  --promo-btn-bg-start: #baf7ea;
  --promo-btn-bg-end: #aedbff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --promo-bg-start: #081523;
    --promo-bg-mid: #102b43;
    --promo-bg-end: #0a3b37;
    --promo-border: rgba(132, 180, 236, 0.26);
  }
}

/* ===== 隐藏状态 ===== */
.promo-section.is-dismissed {
  display: none;
}

/* ===== 基础布局 ===== */
.promo-section {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1200000;
  margin: 0 0 1.5rem;
  padding: 0;
}

.promo-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--promo-border);
  border-radius: 0 0 1rem 1rem;
  padding: 0.75rem 1.5rem;
  color: var(--promo-title);
  font-family: 'Sora', sans-serif;
  box-shadow: 0 8px 24px -8px rgba(3, 12, 24, 0.6);
  animation: promoSlideDown 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  background: linear-gradient(120deg, var(--promo-bg-start) 0%, var(--promo-bg-mid) 52%, var(--promo-bg-end) 100%);
}

.promo-card::before {
  content: '';
  position: absolute;
  inset: -35%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  filter: blur(52px);
  background:
    radial-gradient(circle at 14% 18%, rgba(137, 223, 255, 0.3) 0%, transparent 45%),
    radial-gradient(circle at 84% 16%, rgba(125, 232, 209, 0.24) 0%, transparent 43%);
}

/* ===== 关闭按钮 ===== */
.promo-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--promo-muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
  backdrop-filter: blur(4px);
}

.promo-close svg {
  width: 14px;
  height: 14px;
}

.promo-close:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  transform: scale(1.1);
}

/* ===== 内容区 ===== */
.promo-content {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.promo-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.promo-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}

.promo-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(3, 13, 25, 0.3);
  background: rgba(255, 255, 255, 0.06);
  padding: 4px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.promo-card:hover .promo-logo {
  transform: scale(1.05) rotate(-3deg);
}

.promo-headline {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.promo-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--promo-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.promo-desc {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--promo-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.promo-key {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.4rem;
  border-radius: 5px;
  background: rgba(1, 11, 20, 0.5);
  border: 1px solid rgba(133, 216, 255, 0.25);
  color: var(--promo-accent-strong);
  font-size: 0.8em;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

/* ===== 亮点标签 ===== */
.promo-tags {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.promo-tags li {
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(153, 209, 255, 0.15);
  color: var(--promo-muted);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

/* ===== CTA 区域 ===== */
.promo-cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.promo-badge {
  flex-shrink: 0;
  border: 1px solid rgba(126, 233, 211, 0.4);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #defff6;
  background: rgba(126, 233, 211, 0.12);
}

.promo-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  border-radius: 10px;
  padding: 0.6rem 1.3rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--promo-btn-text);
  background: linear-gradient(135deg, var(--promo-btn-bg-start) 0%, var(--promo-btn-bg-end) 100%);
  box-shadow: 0 6px 16px rgba(2, 9, 18, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

.promo-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(2, 9, 18, 0.45);
}

.promo-btn:active {
  transform: translateY(1px);
}

.promo-btn svg {
  width: 16px;
  height: 16px;
}

/* ===== compact 模式（滚动后） ===== */
body.promo-compact .promo-section {
  margin-bottom: 0.5rem;
}

body.promo-compact .promo-card {
  padding: 0.5rem 2.2rem 0.5rem 1rem;
  border-radius: 0 0 0.75rem 0.75rem;
  box-shadow: 0 4px 12px rgba(3, 10, 20, 0.5);
}

body.promo-compact .promo-card::before {
  opacity: 0.3;
}

body.promo-compact .promo-content {
  flex-direction: row !important;
  align-items: center;
  gap: 0.8rem;
}

body.promo-compact .promo-main {
  flex: 1;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  gap: 0;
  overflow: hidden;
}

body.promo-compact .promo-header {
  gap: 0.5rem;
}

body.promo-compact .promo-logo {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  padding: 2px;
}

body.promo-compact .promo-headline {
  flex-direction: row;
  align-items: center;
}

body.promo-compact .promo-desc,
body.promo-compact .promo-tags,
body.promo-compact .promo-badge {
  display: none;
}

body.promo-compact .promo-title {
  font-size: 0.85rem;
  white-space: nowrap;
}

body.promo-compact .promo-cta {
  flex-shrink: 0;
}

body.promo-compact .promo-close {
  width: 24px;
  height: 24px;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
}

body.promo-compact .promo-close svg {
  width: 12px;
  height: 12px;
}

body.promo-compact .promo-btn {
  width: auto !important;
  padding: 0.35rem 0.8rem;
  font-size: 0.78rem;
  border-radius: 8px;
  white-space: nowrap;
}

body.promo-compact .promo-btn svg {
  width: 14px;
  height: 14px;
}

/* ===== 移动端 - 默认展开 ===== */
@media (max-width: 768px) {
  .promo-section {
    margin: 0 0 0.75rem;
  }

  .promo-card {
    padding: 0.75rem 2rem 0.75rem 1rem;
    border-radius: 0 0 0.75rem 0.75rem;
  }

  .promo-content {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .promo-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    padding: 3px;
  }

  .promo-title {
    font-size: 0.88rem;
    white-space: normal;
  }

  .promo-desc {
    font-size: 0.78rem;
    white-space: normal;
  }

  .promo-tags {
    gap: 0.3rem;
  }

  .promo-tags li {
    font-size: 0.68rem;
    padding: 0.15rem 0.45rem;
  }

  .promo-badge {
    display: none;
  }

  .promo-cta {
    width: 100%;
  }

  .promo-btn {
    width: 100%;
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
    border-radius: 8px;
    justify-content: center;
  }

  .promo-close {
    top: 0.5rem;
    right: 0.5rem;
    width: 24px;
    height: 24px;
  }

  .promo-close svg {
    width: 12px;
    height: 12px;
  }
}

/* ===== 移动端 - compact 收起为一行 ===== */
/* 用高特异性确保覆盖移动端展开样式 */
@media (max-width: 768px) {
  body.promo-compact .promo-section {
    margin-bottom: 0.25rem;
  }

  body.promo-compact .promo-card {
    padding: 0.45rem 2rem 0.45rem 0.7rem;
  }

  body.promo-compact .promo-content {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
  }

  body.promo-compact .promo-main {
    flex: 1;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    gap: 0;
    overflow: hidden;
  }

  body.promo-compact .promo-header {
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
  }

  body.promo-compact .promo-logo {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  body.promo-compact .promo-headline {
    min-width: 0;
    overflow: hidden;
  }

  body.promo-compact .promo-title {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.promo-compact .promo-desc,
  body.promo-compact .promo-tags {
    display: none;
  }

  body.promo-compact .promo-cta {
    width: auto;
    flex-shrink: 0;
  }

  body.promo-compact .promo-btn {
    width: auto;
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
  }

  body.promo-compact .promo-close {
    top: 50%;
    transform: translateY(-50%);
  }
}

/* ===== 动画 ===== */
@keyframes promoSlideDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== 关闭动画 ===== */
.promo-section.is-closing {
  animation: promoSlideUp 0.3s ease forwards;
}

@keyframes promoSlideUp {
  from {
    opacity: 1;
    transform: translateY(0);
    max-height: 100px;
  }
  to {
    opacity: 0;
    transform: translateY(-100%);
    max-height: 0;
    margin: 0;
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .promo-card,
  .promo-section.is-closing {
    animation: none;
    transition: none;
  }
}