:root {



  --primary: #00d4ff;



  --primary-dim: rgba(0, 212, 255, 0.12);



  --secondary: #7c3aed;



  --accent: #f59e0b;



  --bg: #020205;



  --bg-elevated: rgba(255, 255, 255, 0.03);



  --bg-elevated-hover: rgba(255, 255, 255, 0.06);



  --border: rgba(255, 255, 255, 0.08);



  --border-strong: rgba(255, 255, 255, 0.14);



  --text: #f8fafc;



  --text-secondary: rgba(248, 250, 252, 0.55);



  --text-tertiary: rgba(248, 250, 252, 0.35);



  --radius: 24px;



  --radius-sm: 14px;



  --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);



}







* {



  margin: 0;



  padding: 0;



  box-sizing: border-box;



}







html {



  scroll-behavior: smooth;



}







body {



  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;



  background: var(--bg);



  color: var(--text);



  line-height: 1.6;



  overflow-x: hidden;



  min-height: 100vh;



  -webkit-font-smoothing: antialiased;



}







::selection {



  background: rgba(0, 212, 255, 0.25);



  color: #fff;



}







/* 预加载 */



#preloader {



  position: fixed;



  inset: 0;



  z-index: 10000;



  background: var(--bg);



  display: flex;



  align-items: center;



  justify-content: center;



  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s;



}







#preloader.hidden {



  opacity: 0;



  visibility: hidden;



}







/* 通用隐藏工具类：用于按需显隐元素（如收藏表单、空态提示） */



.hidden {



  display: none !important;



}







.preloader-line {



  width: 120px;



  height: 2px;



  background: rgba(255, 255, 255, 0.08);



  position: relative;



  overflow: hidden;



}







.preloader-line::after {



  content: '';



  position: absolute;



  left: -40%;



  top: 0;



  width: 40%;



  height: 100%;



  background: linear-gradient(90deg, transparent, var(--primary), transparent);



  animation: loadLine 1.2s ease-in-out infinite;



}







@keyframes loadLine {



  0% { left: -40%; }



  100% { left: 100%; }



}







/* 大屏动态背景 */



.bg-layer {



  position: fixed;



  inset: 0;



  z-index: -1;



  background: linear-gradient(135deg, #020205 0%, #0a0a18 50%, #020205 100%);



  background-size: 400% 400%;



  animation: bgGradientMove 20s ease infinite;



  overflow: hidden;



}







@keyframes bgGradientMove {



  0% { background-position: 0% 50%; }



  50% { background-position: 100% 50%; }



  100% { background-position: 0% 50%; }



}







#bg-video {



  position: absolute;



  inset: 0;



  width: 100%;



  height: 100%;



  object-fit: cover;



  transform: scale(1.05);



  z-index: -2;



}







#video-canvas {



  position: absolute;



  inset: 0;



  width: 100%;



  height: 100%;



  opacity: 0.55;



  mix-blend-mode: screen;



  pointer-events: none;



  z-index: -1;



}







.video-overlay {



  position: absolute;



  inset: 0;



  background:



    radial-gradient(circle at 30% 20%, rgba(0, 212, 255, 0.08) 0%, transparent 45%),



    radial-gradient(circle at 70% 80%, rgba(124, 58, 237, 0.06) 0%, transparent 45%),



    linear-gradient(180deg, rgba(2, 2, 5, 0.2) 0%, rgba(2, 2, 5, 0.5) 50%, var(--bg) 100%);



}







.ambient-glow {



  position: absolute;



  inset: 0;



  background:



    radial-gradient(ellipse 100% 60% at 50% -20%, rgba(0, 212, 255, 0.12) 0%, transparent 55%),



    radial-gradient(ellipse 80% 50% at 80% 100%, rgba(124, 58, 237, 0.08) 0%, transparent 50%);



  filter: blur(100px);



  pointer-events: none;



  animation: glowShift 12s ease-in-out infinite alternate;



}







@keyframes glowShift {



  0% { opacity: 0.8; transform: scale(1); }



  100% { opacity: 1; transform: scale(1.05); }



}







.grain {



  position: absolute;



  inset: 0;



  opacity: 0.04;



  pointer-events: none;



  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");



}







.scroll-progress {



  position: fixed;



  top: 0;



  left: 0;



  height: 2px;



  width: 0%;



  background: linear-gradient(90deg, var(--primary), var(--secondary));



  box-shadow: 0 0 12px rgba(0, 212, 255, 0.5);



  z-index: 10001;



  transition: width 0.1s linear;



}







/* 导航 */



.navbar {



  position: fixed;



  top: 0;



  left: 0;



  right: 0;



  z-index: 1000;



  display: flex;



  align-items: center;



  justify-content: space-between;



  padding: 22px 5%;



  background: transparent;



  transition: var(--transition);



}







.navbar.scrolled {



  padding: 14px 5%;



  background: rgba(2, 2, 5, 0.75);



  backdrop-filter: blur(24px);



  border-bottom: 1px solid var(--border);



}







.nav-brand {



  display: flex;



  align-items: center;



  gap: 12px;



  text-decoration: none;



  color: var(--text);



  font-size: 1.15rem;



  font-weight: 600;



  letter-spacing: -0.01em;



}







.brand-mark {



  width: 38px;



  height: 38px;



  display: flex;



  align-items: center;



  justify-content: center;



  border-radius: 11px;



  background: linear-gradient(135deg, var(--primary), var(--secondary));



  box-shadow: 0 0 22px rgba(0, 212, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.18);



  transition: transform .2s ease, box-shadow .2s ease;



}



.brand-mark svg { display: block; }



.nav-brand:hover .brand-mark {



  transform: translateY(-1px) scale(1.05);



  box-shadow: 0 6px 30px rgba(0, 212, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.28);



}







.brand-text {



  color: var(--text);



}







.nav-links {



  display: flex;



  align-items: center;



  gap: 8px;



}







.nav-link {



  position: relative;



  padding: 10px 18px;



  border-radius: 50px;



  color: var(--text-secondary);



  text-decoration: none;



  font-size: 0.92rem;



  font-weight: 500;



  transition: var(--transition);



}







.nav-link::after {



  content: '';



  position: absolute;



  left: 18px;



  right: 18px;



  bottom: 6px;



  height: 1.5px;



  background: var(--primary);



  transform: scaleX(0);



  transform-origin: right;



  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);



}







.nav-link:hover,



.nav-link.active {



  color: var(--text);



  background: var(--bg-elevated);



}







.nav-link:hover::after,



.nav-link.active::after {



  transform: scaleX(1);



  transform-origin: left;



}



/* AI 商城入口：灰色文字（与其他导航一致），文字加粗，图标同步加粗，悬浮提亮 */



.nav-shop{



  color:var(--text-secondary);



  font-weight:700;



}



.nav-shop:hover,.nav-shop.active{



  color:var(--text);



}



.shop-ico{



  display:inline-block;



  font-weight:700;



  font-size:1.12em;



  margin-right:3px;



  vertical-align:-1px;



  filter:drop-shadow(0 0 .6px currentColor);



}



.mobile-menu .nav-shop{



  color:var(--text-secondary);



  font-weight:700;



}



.mobile-menu .nav-shop:hover{



  color:var(--text);



  background:var(--bg-elevated);



}



.mobile-menu .shop-ico{



  font-size:1.12em;



}











.menu-toggle {



  display: none;



  flex-direction: column;



  gap: 6px;



  background: transparent;



  border: none;



  cursor: pointer;



  padding: 8px;



}







.menu-toggle span {



  display: block;



  width: 22px;



  height: 1.5px;



  background: var(--text);



  border-radius: 2px;



  transition: var(--transition);



}







.menu-toggle.active span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }



.menu-toggle.active span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }







.mobile-menu {



  position: fixed;



  top: 76px;



  left: 0;



  right: 0;



  background: rgba(2, 2, 5, 0.97);



  backdrop-filter: blur(24px);



  padding: 24px;



  display: none;



  flex-direction: column;



  gap: 8px;



  z-index: 999;



  border-bottom: 1px solid var(--border);



}







.mobile-menu.active {



  display: flex;



}







.mobile-menu a {



  color: var(--text-secondary);



  text-decoration: none;



  padding: 14px 18px;



  border-radius: var(--radius-sm);



  font-size: 1rem;



  transition: var(--transition);



}







.mobile-menu a:hover {



  color: var(--text);



  background: var(--bg-elevated);



}







/* 按钮 */



.btn {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  gap: 10px;



  padding: 14px 28px;



  border-radius: 50px;



  font-size: 0.95rem;



  font-weight: 600;



  text-decoration: none;



  border: none;



  cursor: pointer;



  transition: var(--transition);



}







.btn-primary {



  background: var(--text);



  color: var(--bg);



  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);



}







.btn-primary:hover {



  transform: translateY(-2px);



  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.15);



}







.btn-secondary {



  background: transparent;



  color: var(--text);



  border: 1px solid var(--border-strong);



}







.btn-secondary:hover {



  background: var(--bg-elevated);



  border-color: var(--text-tertiary);



}







.btn-large {



  padding: 18px 36px;



  font-size: 1rem;



}







.btn-danger {



  background: rgba(239, 68, 68, 0.12);



  color: #ef4444;



  border: 1px solid rgba(239, 68, 68, 0.2);



}







.btn-danger:hover {



  background: rgba(239, 68, 68, 0.2);



}







.btn-success {



  background: var(--text);



  color: var(--bg);



}







/* Hero */



.hero {



  position: relative;



  min-height: 100vh;



  display: flex;



  align-items: center;



  justify-content: center;



  padding: 140px 5% 100px;



  text-align: center;



}







.hero-content {



  max-width: 900px;



  animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1), heroFloat 6s ease-in-out infinite;



}







@keyframes fadeIn {



  from { opacity: 0; transform: translateY(30px); }



  to { opacity: 1; transform: translateY(0); }



}







@keyframes heroFloat {



  0%, 100% { transform: translateY(0); }



  50% { transform: translateY(-12px); }



}







.hero-eyebrow {



  display: inline-block;



  font-size: 0.8rem;



  font-weight: 600;



  letter-spacing: 0.2em;



  color: var(--text-secondary);



  margin-bottom: 28px;



  text-transform: uppercase;



}







.hero-title {



  font-size: clamp(2.8rem, 7vw, 5.5rem);



  font-weight: 800;



  line-height: 1.05;



  letter-spacing: -0.04em;



  margin-bottom: 28px;



}







.gradient-text {



  background: linear-gradient(135deg, var(--primary) 0%, #a78bfa 30%, var(--secondary) 60%, var(--primary) 100%);



  background-size: 250% 250%;



  -webkit-background-clip: text;



  -webkit-text-fill-color: transparent;



  background-clip: text;



  animation: gradientShift 7s ease infinite;



}







@keyframes gradientShift {



  0% { background-position: 0% 50%; }



  50% { background-position: 100% 50%; }



  100% { background-position: 0% 50%; }



}







.hero-subtitle {



  font-size: clamp(1rem, 1.8vw, 1.25rem);



  color: var(--text-secondary);



  max-width: 620px;



  margin: 0 auto 40px;



  line-height: 1.8;



}







.hero-actions {



  display: flex;



  gap: 16px;



  justify-content: center;



  flex-wrap: wrap;



}







.scroll-indicator {



  position: absolute;



  bottom: 48px;



  left: 50%;



  transform: translateX(-50%);



  width: 24px;



  height: 40px;



  border: 1px solid var(--border-strong);



  border-radius: 12px;



  display: flex;



  justify-content: center;



  padding-top: 8px;



}







.scroll-indicator span {



  width: 2px;



  height: 8px;



  background: var(--text);



  border-radius: 2px;



  animation: scrollDown 1.8s infinite;



}







@keyframes scrollDown {



  0% { opacity: 1; transform: translateY(0); }



  100% { opacity: 0; transform: translateY(14px); }



}







/* Section 通用 */



section {



  padding: 140px 5%;



  position: relative;



}







.section-header {



  max-width: 720px;



  margin: 0 auto 80px;



  text-align: center;



}







.section-eyebrow {



  display: inline-block;



  font-size: 0.75rem;



  font-weight: 600;



  letter-spacing: 0.18em;



  color: var(--primary);



  text-transform: uppercase;



  margin-bottom: 18px;



}







.section-title {



  font-size: clamp(2rem, 4.5vw, 3rem);



  font-weight: 800;



  letter-spacing: -0.03em;



  margin-bottom: 16px;



}







.section-desc {



  color: var(--text-secondary);



  font-size: 1.1rem;



  line-height: 1.7;



}







/* 工具箱标题行：标题 + Logo + X */



.toolbox-title-row {



  display: inline-flex;



  align-items: center;



  gap: 10px;



  flex-wrap: wrap;



  justify-content: center;



}







.toolbox-title-row .section-title {



  margin-bottom: 0;



}







.toolbox-logo-link {



  display: inline-flex;



  align-items: center;



  text-decoration: none;



  transition: opacity 0.25s ease, transform 0.25s ease;



}







.toolbox-logo-link:hover {



  opacity: 0.85;



  transform: scale(1.06);



}







/* Logo 图片：暗底反白 */



.toolbox-logo-img {



  height: clamp(26px, 4vw, 36px);



  width: auto;



  object-fit: contain;



  vertical-align: middle;



  filter: brightness(0) invert(1);



}







/* X 联动按钮 */



.toolbox-x-btn {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  width: 30px;



  height: 30px;



  border: 1px solid rgba(255,255,255,0.15);



  border-radius: 8px;



  background: rgba(255,255,255,0.05);



  color: #fff;



  font-size: 18px;



  font-weight: 300;



  cursor: pointer;



  padding: 0;



  line-height: 1;



  transition: all 0.2s ease;



  flex-shrink: 0;



}







.toolbox-x-btn:hover {



  background: rgba(0, 212, 255, 0.12);



  border-color: rgba(0, 212, 255, 0.35);



  color: var(--primary);



}







/* 项目网格 */



.projects-grid {



  display: grid;



  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));



  gap: 28px;



  max-width: 1200px;



  margin: 0 auto;



}







.project-card {



  position: relative;



  background: transparent;



  border: none;



  border-radius: var(--radius);



  overflow: hidden;



  cursor: pointer;



  transition: var(--transition);



  display: flex;



  flex-direction: column;



}







/* 右上角火爆徽章 */



.project-card-badge {



  position: absolute;



  top: 14px;



  right: -32px;



  z-index: 5;



  padding: 4px 40px;



  font-size: 0.72rem;



  font-weight: 700;



  letter-spacing: 0.08em;



  color: #fff;



  background: linear-gradient(135deg, #ff4d4f, #ff7a45, #ffc53d);



  transform: rotate(45deg);



  box-shadow: 0 2px 12px rgba(255, 77, 79, 0.35);



  white-space: nowrap;



  pointer-events: none;



  animation: badgePulse 2.5s ease-in-out infinite;



}







/* 自研徽章：青蓝渐变，与火爆（橙红）区分 */



.project-card-badge.badge-self {



  background: linear-gradient(135deg, #00c2ff, #0072ff, #7c4dff);



  box-shadow: 0 2px 12px rgba(0, 114, 255, 0.35);



}







@keyframes badgePulse {



  0%, 100% { opacity: 1; }



  50% { opacity: 0.8; }



}







.project-card::after {



  content: '';



  position: absolute;



  inset: 0;



  border-radius: var(--radius);



  padding: 1px;



  background: linear-gradient(135deg, rgba(0, 212, 255, 0.4), rgba(124, 58, 237, 0.4), rgba(236, 72, 153, 0.4));



  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);



  -webkit-mask-composite: xor;



  mask-composite: exclude;



  opacity: 0;



  transition: opacity 0.4s ease;



  pointer-events: none;



}







.project-card:hover {



  transform: translateY(-10px) scale(1.01);



  border-color: transparent;



  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55), 0 0 40px rgba(0, 212, 255, 0.08);



}







.project-card:hover::after {



  opacity: 1;



}







.project-card-image-wrap {



  position: relative;



  height: 220px;



  overflow: hidden;



}







.project-card-image-wrap::before {



  content: '';



  position: absolute;



  inset: 0;



  background: linear-gradient(180deg, transparent 30%, rgba(2, 2, 5, 0.85) 100%);



  z-index: 1;



  pointer-events: none;



}







.project-card-image {



  width: 100%;



  height: 100%;



  object-fit: cover;



  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);



}







.project-card:hover .project-card-image {



  transform: scale(1.12);



}







.project-card-content {



  position: relative;



  z-index: 2;



  padding: 28px;



  display: flex;



  flex-direction: column;



  flex: 1;



}







.project-card-index {



  font-size: 0.75rem;



  font-weight: 600;



  letter-spacing: 0.15em;



  color: var(--primary);



  margin-bottom: 12px;



  text-transform: uppercase;



}







.project-card h3 {



  font-size: 1.5rem;



  font-weight: 700;



  margin-bottom: 12px;



  letter-spacing: -0.02em;



}







.project-card p {



  color: var(--text-secondary);



  font-size: 0.96rem;



  line-height: 1.7;



  margin-bottom: 20px;



}







.project-card-tags {



  display: flex;



  flex-wrap: wrap;



  gap: 8px;



  margin-bottom: 22px;



  margin-top: auto;



}







.project-card-tag {



  padding: 6px 12px;



  border-radius: 50px;



  font-size: 0.78rem;



  color: var(--text-secondary);



  background: rgba(255, 255, 255, 0.05);



  border: 1px solid var(--border);



  transition: var(--transition);



}







.project-card:hover .project-card-tag {



  background: rgba(255, 255, 255, 0.1);



  border-color: var(--border-strong);



}







.project-card-action {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  color: var(--text);



  font-size: 0.9rem;



  font-weight: 600;



  opacity: 0;



  transform: translateY(10px);



  transition: var(--transition);



}







.project-card:hover .project-card-action {



  opacity: 1;



  transform: translateY(0);



}







/* 能力 */



.capabilities-section {



  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.015) 50%, transparent 100%);



}







.capabilities-grid {



  display: grid;



  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));



  gap: 1px;



  max-width: 1200px;



  margin: 0 auto;



  background: var(--border);



  border: 1px solid var(--border);



  border-radius: var(--radius);



  overflow: hidden;



}







.capability-card {



  background: var(--bg);



  padding: 44px 36px;



  transition: var(--transition);



}







.capability-card:hover {



  background: var(--bg-elevated);



}







.capability-num {



  font-size: 0.8rem;



  font-weight: 700;



  color: var(--primary);



  letter-spacing: 0.1em;



  margin-bottom: 20px;



}







.capability-card h3 {



  font-size: 1.25rem;



  font-weight: 700;



  margin-bottom: 14px;



}







.capability-card p {



  color: var(--text-secondary);



  font-size: 0.95rem;



  line-height: 1.7;



}







/* CTA */



.cta-section {



  padding: 160px 5%;



  text-align: center;



}







.cta-content {



  max-width: 640px;



  margin: 0 auto;



  padding: 64px 48px;



  background: transparent;



  border: none;



  border-radius: var(--radius);



  position: relative;



  overflow: hidden;



}







.cta-content::before {



  content: '';



  position: absolute;



  top: -50%;



  left: -50%;



  width: 200%;



  height: 200%;



  background: radial-gradient(circle, rgba(0, 212, 255, 0.06) 0%, transparent 50%);



  animation: rotate 20s linear infinite;



}







@keyframes rotate {



  from { transform: rotate(0deg); }



  to { transform: rotate(360deg); }



}







.cta-content h2 {



  position: relative;



  font-size: 2.2rem;



  font-weight: 800;



  margin-bottom: 14px;



}







.cta-content p {



  position: relative;



  color: var(--text-secondary);



  margin-bottom: 0;



}







/* 页脚 */



.footer {



  padding: 40px 5%;



  border-top: 1px solid var(--border);



}







.footer-content {



  overflow: visible;



  max-width: 1200px;



  margin: 0 auto;



  display: flex;



  justify-content: space-between;



  align-items: center;



  flex-wrap: wrap;



  gap: 20px;



}







.footer-brand {



  display: flex;



  align-items: center;



  gap: 10px;



  font-weight: 600;



  color: var(--text);



}







.footer-copy {



  color: var(--text-tertiary);



  font-size: 0.85rem;



}



/* 友情链接 */



.friend-links {



  display: flex;



  flex-wrap: wrap;



  align-items: center;



  justify-content: center;



  gap: 16px;



  margin: 20px auto 8px;



  overflow: visible;



}



.friend-label {



  font-size: 0.85rem;



  color: var(--text-tertiary);



  white-space: nowrap;



}



.friend-links a {



  display: flex;



  min-width: 0;



  opacity: 0.7;



  transition: opacity .3s, transform .3s;



}



.friend-links a:hover {



  opacity: 1;



  transform: translateY(-3px);



}



.friend-logo {



  width: auto;



  max-width: 180px;



  height: auto;



  object-fit: contain;



  filter: brightness(0) invert(1);



}







/* 滚动显示：默认可见，JS 启用后再执行淡入动画 */



.reveal {



  opacity: 1;



  transform: translateY(0);



  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);



}







.js .reveal {



  opacity: 0;



  transform: translateY(40px);



}







.js .reveal.active {



  opacity: 1;



  transform: translateY(0);



}







/* 管理后台 */



.admin-body {



  min-height: 100vh;



  background: var(--bg);



}







.admin-login {



  min-height: 100vh;



  display: flex;



  align-items: center;



  justify-content: center;



  padding: 40px 5%;



}







.login-card {



  width: 100%;



  max-width: 420px;



  padding: 48px;



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius);



  backdrop-filter: blur(20px);



}







.login-card h2 {



  font-size: 1.8rem;



  font-weight: 800;



  margin-bottom: 8px;



  text-align: center;



}







.login-card .login-subtitle {



  color: var(--text-secondary);



  text-align: center;



  margin-bottom: 36px;



  font-size: 0.9rem;



}







.form-group {



  margin-bottom: 20px;



}







.form-group label {



  display: block;



  margin-bottom: 8px;



  font-size: 0.85rem;



  font-weight: 500;



  color: var(--text-secondary);



}







.form-group input,



.form-group textarea,



.form-group select {



  width: 100%;



  padding: 14px 16px;



  background: rgba(0, 0, 0, 0.25);



  border: 1px solid var(--border);



  border-radius: var(--radius-sm);



  color: var(--text);



  font-size: 0.95rem;



  transition: var(--transition);



  font-family: inherit;



}







.form-group input:focus,



.form-group textarea:focus,



.form-group select:focus {



  outline: none;



  border-color: var(--border-strong);



  background: rgba(0, 0, 0, 0.35);



}







.form-group textarea {



  min-height: 100px;



  resize: vertical;



}







.login-error {



  color: #ef4444;



  font-size: 0.85rem;



  margin-top: 12px;



  text-align: center;



  min-height: 20px;



}







/* 后台仪表盘 */



.admin-dashboard {



  display: none;



  min-height: 100vh;



}







.admin-dashboard.active {



  display: flex;



}







.admin-sidebar {



  width: 260px;



  background: var(--bg-elevated);



  border-right: 1px solid var(--border);



  padding: 28px 20px;



  display: flex;



  flex-direction: column;



  position: fixed;



  inset: 0 auto 0 0;



  z-index: 100;



}







.admin-sidebar-brand {



  display: flex;



  align-items: center;



  gap: 10px;



  font-weight: 700;



  margin-bottom: 40px;



  padding: 0 8px;



}







.admin-sidebar-nav {



  display: flex;



  flex-direction: column;



  gap: 6px;



  flex: 1;



}







.admin-sidebar-nav a,



.admin-sidebar-nav button {



  display: flex;



  align-items: center;



  gap: 12px;



  padding: 12px 14px;



  border-radius: var(--radius-sm);



  color: var(--text-secondary);



  text-decoration: none;



  font-size: 0.92rem;



  font-weight: 500;



  background: transparent;



  border: none;



  cursor: pointer;



  transition: var(--transition);



  text-align: left;



}







.admin-sidebar-nav a:hover,



.admin-sidebar-nav a.active,



.admin-sidebar-nav button:hover {



  color: var(--text);



  background: rgba(255, 255, 255, 0.04);



}







.admin-sidebar-footer {



  padding: 0 8px;



  color: var(--text-tertiary);



  font-size: 0.8rem;



}







.admin-main {



  flex: 1;



  margin-left: 260px;



  padding: 100px 40px 60px;



  min-width: 0;



}







.admin-topbar {



  display: flex;



  justify-content: space-between;



  align-items: center;



  margin-bottom: 36px;



}







.admin-topbar h1 {



  font-size: 1.8rem;



  font-weight: 800;



}







.admin-topbar-info {



  color: var(--text-secondary);



  font-size: 0.9rem;



}







.admin-stats {



  display: grid;



  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));



  gap: 20px;



  margin-bottom: 36px;



}







.admin-stat-card {



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius-sm);



  padding: 24px;



}







.admin-stat-label {



  font-size: 0.8rem;



  color: var(--text-secondary);



  margin-bottom: 8px;



  text-transform: uppercase;



  letter-spacing: 0.05em;



}







.admin-stat-value {



  font-size: 1.9rem;



  font-weight: 800;



  color: var(--text);



}







.admin-content-grid {



  display: grid;



  grid-template-columns: 380px 1fr;



  gap: 28px;



  align-items: start;



}







.admin-panel {



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius);



  padding: 28px;



}







.admin-panel h3 {



  font-size: 1.1rem;



  font-weight: 700;



  margin-bottom: 24px;



  padding-bottom: 16px;



  border-bottom: 1px solid var(--border);



}







.admin-table-wrap {



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius);



  overflow: hidden;



}







.admin-table {



  width: 100%;



  border-collapse: collapse;



}







.admin-table th,



.admin-table td {



  padding: 16px 20px;



  text-align: left;



  border-bottom: 1px solid var(--border);



  font-size: 0.9rem;



}







.admin-table th {



  background: rgba(0, 0, 0, 0.2);



  color: var(--text-secondary);



  font-weight: 600;



  text-transform: uppercase;



  letter-spacing: 0.03em;



  font-size: 0.75rem;



}







.admin-table tr:last-child td {



  border-bottom: none;



}







.admin-table tr:hover td {



  background: rgba(255, 255, 255, 0.02);



}







.table-title {



  font-weight: 700;



  margin-bottom: 4px;



}







.table-url {



  color: var(--text-secondary);



  font-size: 0.82rem;



  word-break: break-all;



}







.table-actions {



  display: flex;



  gap: 8px;



}







.btn-sm {



  padding: 8px 14px;



  font-size: 0.82rem;



}







.empty-state {



  text-align: center;



  padding: 60px 20px;



  color: var(--text-secondary);



}







.toast {



  position: fixed;



  bottom: 28px;



  right: 28px;



  padding: 16px 24px;



  border-radius: var(--radius-sm);



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  color: var(--text);



  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);



  z-index: 2000;



  transform: translateY(120px);



  opacity: 0;



  transition: var(--transition);



}







.toast.show {



  transform: translateY(0);



  opacity: 1;



}







.toast.success { border-left: 3px solid var(--primary); }



.toast.error { border-left: 3px solid #ef4444; }







/* 无限 Token 模块 */



.token-section {



  position: relative;



  overflow: hidden;



  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.015) 50%, transparent 100%);



}







.token-aura {



  position: absolute;



  top: 6%;



  left: 50%;



  transform: translateX(-50%);



  width: 560px;



  height: 560px;



  border-radius: 50%;



  background: radial-gradient(circle, rgba(0, 212, 255, 0.16) 0%, rgba(124, 58, 237, 0.10) 38%, transparent 70%);



  filter: blur(40px);



  pointer-events: none;



  animation: tokenAura 9s ease-in-out infinite;



}







@keyframes tokenAura {



  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.8; }



  50% { transform: translateX(-50%) scale(1.12); opacity: 1; }



}







/* 核心展示：介绍 + 交互式计数视觉 */



.token-hero {



  position: relative;



  z-index: 2;



  max-width: 1120px;



  margin: 0 auto 90px;



  display: grid;



  grid-template-columns: 1.15fr 0.85fr;



  gap: 64px;



  align-items: center;



}







.token-lead {



  font-size: clamp(1.6rem, 3vw, 2.2rem);



  font-weight: 800;



  letter-spacing: -0.03em;



  margin-bottom: 18px;



  background: linear-gradient(135deg, var(--primary) 0%, #a78bfa 50%, var(--secondary) 100%);



  -webkit-background-clip: text;



  -webkit-text-fill-color: transparent;



  background-clip: text;



}







.token-desc {



  color: var(--text-secondary);



  font-size: 1.05rem;



  line-height: 1.8;



  margin-bottom: 26px;



}







.token-points {



  list-style: none;



  display: flex;



  flex-direction: column;



  gap: 14px;



  margin-bottom: 36px;



}







.token-points li {



  display: flex;



  align-items: center;



  gap: 14px;



  color: var(--text-secondary);



  font-size: 0.98rem;



}







.token-points .dot {



  width: 10px;



  height: 10px;



  border-radius: 50%;



  background: linear-gradient(135deg, var(--primary), var(--secondary));



  flex-shrink: 0;



  box-shadow: 0 0 12px rgba(0, 212, 255, 0.4);



}







.token-actions {



  display: flex;



  gap: 16px;



  flex-wrap: wrap;



  margin-bottom: 18px;



}







/* 醒目下载按钮 */



.btn-download {



  position: relative;



  padding: 18px 40px;



  font-size: 1.05rem;



  font-weight: 700;



  color: #fff;



  background: linear-gradient(135deg, var(--primary), var(--secondary));



  background-size: 200% 200%;



  box-shadow: 0 10px 30px rgba(0, 212, 255, 0.25);



  animation: tokenDlShift 6s ease infinite, tokenDlPulse 3s ease-in-out infinite;



  overflow: hidden;



}







@keyframes tokenDlShift {



  0% { background-position: 0% 50%; }



  50% { background-position: 100% 50%; }



  100% { background-position: 0% 50%; }



}







@keyframes tokenDlPulse {



  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.5), 0 10px 30px rgba(0, 212, 255, 0.25); transform: translateY(0); }



  50% { box-shadow: 0 0 0 18px rgba(0, 212, 255, 0), 0 14px 40px rgba(124, 58, 237, 0.35); transform: translateY(-3px); }



}







.btn-download::after {



  content: '';



  position: absolute;



  top: 0;



  left: -120%;



  width: 60%;



  height: 100%;



  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);



  transform: skewX(-20deg);



  animation: tokenShimmer 3.5s ease-in-out infinite;



}







@keyframes tokenShimmer {



  0% { left: -120%; }



  55%, 100% { left: 130%; }



}







.btn-download:hover {



  transform: translateY(-3px) scale(1.03);



}







.btn-download svg {



  animation: tokenBounceDown 1.6s ease-in-out infinite;



}







@keyframes tokenBounceDown {



  0%, 100% { transform: translateY(0); }



  50% { transform: translateY(3px); }



}







#tokenCopy.copied {



  border-color: var(--primary);



  color: var(--primary);



}







/* 交互式 Token 视觉：高级感「无限核心」 */



.token-visual {



  position: relative;



  margin: 0 auto;



  display: flex;



  align-items: center;



  justify-content: center;



}







.tv-stage {



  position: relative;



  width: 300px;



  height: 300px;



}







/* 背景光晕 */



.tv-halo {



  position: absolute;



  inset: -6%;



  border-radius: 50%;



  background: radial-gradient(circle, rgba(0, 212, 255, 0.18) 0%, rgba(124, 58, 237, 0.10) 42%, transparent 70%);



  filter: blur(28px);



  animation: tvHalo 7s ease-in-out infinite;



}







@keyframes tvHalo {



  0%, 100% { transform: scale(1); opacity: 0.85; }



  50% { transform: scale(1.08); opacity: 1; }



}







/* 细密同心网格，营造景深 */



.tv-grid {



  position: absolute;



  inset: 0;



  border-radius: 50%;



  background: repeating-radial-gradient(circle, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 22px);



  -webkit-mask: radial-gradient(circle, #000 64%, transparent 66%);



  mask: radial-gradient(circle, #000 64%, transparent 66%);



  opacity: 0.6;



}







/* 轨道环：三层、不同速度、不同方向 —— 用负margin居中，动画只做纯rotate */



.tv-orbit {



  position: absolute;



  top: 50%;



  left: 50%;



  border-radius: 50%;



  /* 居中由各子类的 margin 负责 */



}







.tv-orbit::before {



  content: '';



  position: absolute;



  inset: 0;



  border-radius: 50%;



  border: 1px solid rgba(255, 255, 255, 0.07);



}







.tv-orbit-outer {



  width: 286px; height: 286px;



  margin-left: -143px; margin-top: -143px;



  animation: tvSpin 26s linear infinite;



}







.tv-orbit-mid {



  width: 218px; height: 218px;



  margin-left: -109px; margin-top: -109px;



  animation: tvSpinRev 19s linear infinite;



}







.tv-orbit-inner {



  width: 156px; height: 156px;



  margin-left: -78px; margin-top: -78px;



  animation: tvSpin 13s linear infinite;



}







@keyframes tvSpin {



  from { transform: rotate(0deg); }



  to { transform: rotate(360deg); }



}







@keyframes tvSpinRev {



  from { transform: rotate(0deg); }



  to { transform: rotate(-360deg); }



}







/* 轨道上的高光节点 */



.tv-node {



  position: absolute;



  top: -4px;



  left: 50%;



  width: 8px;



  height: 8px;



  margin-left: -4px;



  border-radius: 50%;



  background: var(--primary);



  box-shadow: 0 0 14px 2px rgba(0, 212, 255, 0.55);



}







.tv-node-a { background: var(--secondary); box-shadow: 0 0 14px 2px rgba(124, 58, 237, 0.55); top: auto; bottom: -4px; }



.tv-node-b { background: var(--accent); box-shadow: 0 0 14px 2px rgba(245, 158, 11, 0.5); top: 50%; left: -4px; margin-left: 0; margin-top: -4px; }



.tv-node-c { background: #a78bfa; box-shadow: 0 0 12px 2px rgba(167, 139, 250, 0.5); }







/* 中央玻璃核心 */



.tv-core {



  position: absolute;



  top: 50%;



  left: 50%;



  transform: translate(-50%, -50%);



  width: 162px;



  height: 162px;



  border-radius: 50%;



  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: center;



  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.012) 70%);



  backdrop-filter: blur(6px);



  border: 1px solid rgba(255, 255, 255, 0.12);



  box-shadow:



    inset 0 0 34px rgba(0, 212, 255, 0.10),



    0 0 60px rgba(0, 212, 255, 0.10);



}







/* 核心外缘流光环 */



.tv-core-ring {



  position: absolute;



  inset: -12px;



  border-radius: 50%;



  background: conic-gradient(from 0deg, transparent 0deg, rgba(0, 212, 255, 0.6) 40deg, transparent 90deg, rgba(124, 58, 237, 0.6) 200deg, transparent 250deg);



  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);



  mask: radial-gradient(circle, transparent 60%, #000 61%);



  animation: tvSpin 9s linear infinite;



}







/* ∞ 水印 */



.tv-glyph {



  position: absolute;



  font-size: 5rem;



  font-weight: 800;



  line-height: 1;



  opacity: 0.14;



  background: linear-gradient(135deg, var(--primary), var(--secondary));



  -webkit-background-clip: text;



  -webkit-text-fill-color: transparent;



  background-clip: text;



  animation: tvGlyphShimmer 6s ease-in-out infinite;



}







@keyframes tvGlyphShimmer {



  0%, 100% { opacity: 0.10; filter: blur(0.4px); }



  50% { opacity: 0.20; filter: blur(0); }



}







.tv-count {



  position: relative;



  z-index: 2;



  font-size: 2.1rem;



  font-weight: 800;



  letter-spacing: -0.02em;



  font-variant-numeric: tabular-nums;



  color: var(--text);



  text-shadow: 0 0 26px rgba(0, 212, 255, 0.4);



}







.tv-unit {



  position: relative;



  z-index: 2;



  font-size: 0.62rem;



  letter-spacing: 0.18em;



  color: var(--text-tertiary);



  margin-top: 4px;



}







/* 功能卡片 */



.token-features {



  display: grid;



  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));



  gap: 24px;



  max-width: 1200px;



  margin: 0 auto 90px;



}







.token-card {



  position: relative;



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius);



  padding: 36px 30px;



  overflow: hidden;



  transition: var(--transition);



  animation: tokenCardUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;



  animation-delay: calc(var(--i) * 0.12s);



}







@keyframes tokenCardUp {



  from { opacity: 0; transform: translateY(40px); }



  to { opacity: 1; transform: translateY(0); }



}







.token-card::before {



  content: '';



  position: absolute;



  inset: 0;



  border-radius: var(--radius);



  padding: 1px;



  background: linear-gradient(135deg, rgba(0, 212, 255, 0.35), rgba(124, 58, 237, 0.35), transparent 70%);



  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);



  -webkit-mask-composite: xor;



  mask-composite: exclude;



  opacity: 0;



  transition: opacity 0.4s ease;



  pointer-events: none;



}







.token-card:hover {



  transform: translateY(-8px);



  background: var(--bg-elevated-hover);



  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 30px rgba(0, 212, 255, 0.06);



}







.token-card:hover::before {



  opacity: 1;



}







.token-card-icon {



  width: 56px;



  height: 56px;



  border-radius: 16px;



  display: flex;



  align-items: center;



  justify-content: center;



  background: var(--primary-dim);



  color: var(--primary);



  margin-bottom: 22px;



}







.token-card-icon svg {



  width: 28px;



  height: 28px;



}







.token-card h3 {



  font-size: 1.3rem;



  font-weight: 700;



  margin-bottom: 12px;



  letter-spacing: -0.02em;



}







.token-card p {



  color: var(--text-secondary);



  font-size: 0.96rem;



  line-height: 1.7;



}







/* 优势数据 */



.token-stats {



  display: grid;



  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));



  gap: 24px;



  max-width: 1100px;



  margin: 0 auto;



}







.token-stat {



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius);



  padding: 44px 28px;



  text-align: center;



  transition: var(--transition);



}







.token-stat:hover {



  transform: translateY(-6px);



  background: var(--bg-elevated-hover);



  border-color: var(--border-strong);



  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);



}







.token-stat-value {



  font-size: clamp(2.4rem, 5vw, 3.4rem);



  font-weight: 800;



  letter-spacing: -0.03em;



  background: linear-gradient(135deg, var(--primary), var(--secondary));



  -webkit-background-clip: text;



  -webkit-text-fill-color: transparent;



  background-clip: text;



  font-variant-numeric: tabular-nums;



}







.token-stat-label {



  margin-top: 10px;



  color: var(--text-secondary);



  font-size: 0.95rem;



}







/* 响应式 */



@media (max-width: 900px) {



  .token-hero {



    grid-template-columns: 1fr;



    gap: 48px;



  }



  .token-visual {



    order: -1;



  }



}







@media (max-width: 480px) {



  .tv-stage { width: 240px; height: 240px; }



  .tv-orbit-outer { width: 230px; height: 230px; margin-left: -115px; margin-top: -115px; }



  .tv-orbit-mid { width: 176px; height: 176px; margin-left: -88px; margin-top: -88px; }



  .tv-orbit-inner { width: 126px; height: 126px; margin-left: -63px; margin-top: -63px; }



  .tv-core { width: 132px; height: 132px; }



  .tv-count { font-size: 1.7rem; }



  .tv-glyph { font-size: 4rem; }



}







/* 性能 / 无障碍：尊重减少动效偏好 */



@media (prefers-reduced-motion: reduce) {



  .token-aura,



  .btn-download,



  .btn-download::after,



  .btn-download svg,



  .tv-halo,



  .tv-orbit,



  .tv-core-ring,



  .tv-glyph,



  .token-card {



    animation: none !important;



  }



  .btn-download {



    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.25);



  }



}







/* 响应式 */



@media (max-width: 1100px) {



  .admin-content-grid {



    grid-template-columns: 1fr;



  }



}







@media (max-width: 900px) {



  .admin-sidebar {



    transform: translateX(-100%);



    transition: transform 0.3s ease;



  }







  .admin-sidebar.active {



    transform: translateX(0);



  }







  .admin-main {



    margin-left: 0;



    padding: 90px 24px 40px;



  }







  .admin-sidebar-toggle {



    display: flex;



  }



}







@media (max-width: 768px) {



  .nav-links {



    display: none;



  }







  .menu-toggle {



    display: flex;



  }







  .hero {



    padding-top: 120px;



  }







  .projects-grid {



    grid-template-columns: 1fr;



  }







  .capabilities-grid {



    grid-template-columns: 1fr;



  }







  .cta-content {



    padding: 48px 28px;



  }







  .cta-content h2 {



    font-size: 1.7rem;



  }







  .footer-content {



    flex-direction: column;



    text-align: center;



  }







  .friend-links {



    width: 100%;



    gap: 12px;



  }



  .friend-label {



    width: 100%;



    text-align: center;



  }







  .admin-table-wrap {



    overflow-x: auto;



  }







  .admin-table {



    min-width: 600px;



  }



}







@media (max-width: 480px) {



  section {



    padding: 100px 5%;



  }







  .hero-actions {



    flex-direction: column;



    width: 100%;



  }







  .hero-actions .btn {



    width: 100%;



  }







  .login-card {



    padding: 36px 24px;



  }







  .project-card-content {



    padding: 28px;



  }







  .friend-logo {



    max-width: 110px;



  }



  .friend-links {



    gap: 10px;



  }



}







/* ============================================================



   留言板（Twikoo）模块



   ============================================================ */



.comments-section {



  position: relative;



  padding: 140px 8% 120px;



  overflow: hidden;



}







.comments-aura {



  position: absolute;



  top: 10%;



  left: 50%;



  width: 680px;



  height: 680px;



  max-width: 90vw;



  transform: translateX(-50%);



  background: radial-gradient(circle, rgba(0, 212, 255, 0.10), transparent 62%);



  filter: blur(40px);



  pointer-events: none;



  z-index: 0;



}







.comments-section .section-header {



  position: relative;



  z-index: 1;



}







.comments-wrap {



  position: relative;



  z-index: 1;



  max-width: 860px;



  margin: 48px auto 0;



  padding: 32px clamp(20px, 4vw, 44px);



  background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));



  border: 1px solid var(--border);



  border-radius: var(--radius);



  backdrop-filter: blur(14px);



  -webkit-backdrop-filter: blur(14px);



  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);



}







/* 反馈表单（飞书嵌入） */



.feedback-frame {



  width: 100%;



  border-radius: var(--radius);



  overflow: hidden;



  background: rgba(255, 255, 255, 0.02);



  border: 1px solid var(--border);



}







.feedback-iframe {



  display: block;



  width: 100%;



  height: 880px;



  border: 0;



}







.feedback-note {



  margin: 16px 0 0;



  text-align: center;



  font-size: 0.85rem;



  color: var(--text-tertiary);



}







/* 响应式 */



@media (max-width: 900px) {



  .token-hero {



    grid-template-columns: 1fr;



    gap: 48px;



  }



  .token-visual {



    order: -1;



  }



}







@media (max-width: 480px) {



  .tv-stage { width: 240px; height: 240px; }



  .tv-orbit-outer { width: 230px; height: 230px; margin-left: -115px; margin-top: -115px; }



  .tv-orbit-mid { width: 176px; height: 176px; margin-left: -88px; margin-top: -88px; }



  .tv-orbit-inner { width: 126px; height: 126px; margin-left: -63px; margin-top: -63px; }



  .tv-core { width: 132px; height: 132px; }



  .tv-count { font-size: 1.7rem; }



  .tv-glyph { font-size: 4rem; }



}







/* 性能 / 无障碍：尊重减少动效偏好 */



@media (prefers-reduced-motion: reduce) {



  .token-aura,



  .btn-download,



  .btn-download::after,



  .btn-download svg,



  .tv-halo,



  .tv-orbit,



  .tv-core-ring,



  .tv-glyph,



  .token-card {



    animation: none !important;



  }



  .btn-download {



    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.25);



  }



}







/* 响应式 */



@media (max-width: 1100px) {



  .admin-content-grid {



    grid-template-columns: 1fr;



  }



}







@media (max-width: 900px) {



  .admin-sidebar {



    transform: translateX(-100%);



    transition: transform 0.3s ease;



  }







  .admin-sidebar.active {



    transform: translateX(0);



  }







  .admin-main {



    margin-left: 0;



    padding: 90px 24px 40px;



  }







  .admin-sidebar-toggle {



    display: flex;



  }



}







@media (max-width: 768px) {



  .nav-links {



    display: none;



  }







  .menu-toggle {



    display: flex;



  }







  .hero {



    padding-top: 120px;



  }







  .projects-grid {



    grid-template-columns: 1fr;



  }







  .capabilities-grid {



    grid-template-columns: 1fr;



  }







  .cta-content {



    padding: 48px 28px;



  }







  .cta-content h2 {



    font-size: 1.7rem;



  }







  .footer-content {



    flex-direction: column;



    text-align: center;



  }







  .friend-links {



    width: 100%;



    gap: 12px;



  }



  .friend-label {



    width: 100%;



    text-align: center;



  }







  .admin-table-wrap {



    overflow-x: auto;



  }







  .admin-table {



    min-width: 600px;



  }



}







@media (max-width: 480px) {



  section {



    padding: 100px 5%;



  }







  .hero-actions {



    flex-direction: column;



    width: 100%;



  }







  .hero-actions .btn {



    width: 100%;



  }







  .login-card {



    padding: 36px 24px;



  }







  .project-card-content {



    padding: 28px;



  }







  .friend-logo {



    max-width: 110px;



  }



  .friend-links {



    gap: 10px;



  }



}







/* ============================================================



   留言板（Twikoo）模块



   ============================================================ */



.comments-section {



  position: relative;



  padding: 140px 8% 120px;



  overflow: hidden;



}







.comments-aura {



  position: absolute;



  top: 10%;



  left: 50%;



  width: 680px;



  height: 680px;



  max-width: 90vw;



  transform: translateX(-50%);



  background: radial-gradient(circle, rgba(0, 212, 255, 0.10), transparent 62%);



  filter: blur(40px);



  pointer-events: none;



  z-index: 0;



}







.comments-section .section-header {



  position: relative;



  z-index: 1;



}







.comments-wrap {



  position: relative;



  z-index: 1;



  max-width: 860px;



  margin: 48px auto 0;



  padding: 32px clamp(20px, 4vw, 44px);



  background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));



  border: 1px solid var(--border);



  border-radius: var(--radius);



  backdrop-filter: blur(14px);



  -webkit-backdrop-filter: blur(14px);



  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);



}







/* 加载中 / 状态提示 */







@keyframes twSpin {



  to { transform: rotate(360deg); }



}







/* 未配置引导卡片 */







/* 响应式 */



@media (max-width: 768px) {



  .comments-section {



    padding: 110px 5% 96px;



  }



  .comments-wrap {



    padding: 24px 18px;



    margin-top: 34px;



  }



  .feedback-iframe {



    height: 720px;



  }



}







/* ===== 白日梦社区 模块 ===== */



.xlshu-section {



  position: relative;



  padding: 140px 5%;



  overflow: hidden;



  text-align: center;



}



.xlshu-aura {



  position: absolute;



  top: 0; left: 50%;



  width: 720px; height: 720px;



  max-width: 90vw;



  transform: translateX(-50%);



  background: radial-gradient(circle, rgba(124,58,237,0.16), transparent 62%);



  filter: blur(40px);



  pointer-events: none;



  z-index: 0;



}



.xlshu-section .section-header { position: relative; z-index: 1; }



.xlshu-title {



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 14px;



  flex-wrap: wrap;



}



.xlshu-icon {



  width: 46px;



  height: 46px;



  flex: 0 0 auto;



  filter: drop-shadow(0 4px 14px rgba(124,58,237,0.5));



}



.xlshu-subtitle {



  min-height: 1.8em;



  font-weight: 600;



  color: var(--text);



  letter-spacing: 0.01em;



}



.type-cursor {



  display: inline-block;



  margin-left: 2px;



  color: #7c3aed;



  font-weight: 700;



  animation: xlshu-blink 1s steps(1) infinite;



}



@keyframes xlshu-blink {



  0%, 50% { opacity: 1; }



  50.01%, 100% { opacity: 0; }



}



.xlshu-body {



  position: relative;



  z-index: 1;



  max-width: 880px;



  margin: 48px auto 0;



}



.xlshu-video-wrap {



  border-radius: var(--radius);



  overflow: hidden;



  border: 1px solid var(--border);



  box-shadow: 0 30px 80px rgba(0,0,0,0.35);



  background: #000;



}



.xlshu-video {



  display: block;



  width: 100%;



  height: auto;



  max-height: 70vh;



}



.daydream-poster {



  min-height: 340px;



  display: flex;



  align-items: center;



  justify-content: center;



  padding: 40px 24px;



  background:



    radial-gradient(120% 120% at 18% 12%, rgba(124,58,237,0.40), transparent 55%),



    radial-gradient(120% 120% at 86% 88%, rgba(59,130,246,0.32), transparent 55%),



    linear-gradient(135deg, #0f1226, #1a1033 58%, #0c1430);



  color: #fff;



}



.daydream-poster-inner { text-align: center; max-width: 560px; }



.daydream-poster-kicker {



  display: inline-block;



  font-size: 0.78rem;



  letter-spacing: 0.12em;



  text-transform: uppercase;



  color: rgba(255,255,255,0.72);



  padding: 6px 14px;



  border: 1px solid rgba(255,255,255,0.18);



  border-radius: 999px;



}



.daydream-poster-title {



  font-size: 2.4rem;



  margin: 18px 0 10px;



  background: linear-gradient(90deg, #c4b5fd, #93c5fd);



  -webkit-background-clip: text;



  background-clip: text;



  color: transparent;



}



.daydream-poster-text { font-size: 1.05rem; color: rgba(255,255,255,0.85); margin: 0 0 14px; }



.daydream-poster-url { font-size: 0.9rem; color: rgba(255,255,255,0.6); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }



.xlshu-cta {



  margin-top: 28px;



}



.xlshu-opinion {



  margin-top: 32px;



  display: flex;



  flex-direction: column;



  align-items: center;



  gap: 14px;



}



.xlshu-opinion-badge {



  position: relative;



  padding-left: 16px;



  font-size: 0.76rem;



  letter-spacing: 0.08em;



  text-transform: uppercase;



  color: var(--text-tertiary);



}



.xlshu-opinion-badge::before {



  content: "";



  position: absolute;



  left: 0; top: 50%;



  width: 8px; height: 8px;



  margin-top: -4px;



  border-radius: 50%;



  background: #7c3aed;



  box-shadow: 0 0 10px #7c3aed;



  animation: xlshu-pulse 1.4s ease-in-out infinite;



}



@keyframes xlshu-pulse {



  0%, 100% { opacity: 1; transform: scale(1); }



  50% { opacity: 0.3; transform: scale(0.7); }



}



.xlshu-opinion-card {



  display: flex;



  align-items: center;



  gap: 16px;



  width: 100%;



  max-width: 620px;



  padding: 18px 20px;



  text-align: left;



  border-radius: var(--radius);



  border: 1px solid var(--border);



  background: rgba(255,255,255,0.03);



  box-shadow: 0 16px 40px rgba(0,0,0,0.3);



  transition: opacity 0.4s ease;



}



.xlshu-opinion-card.is-fading { opacity: 0; }



.xlshu-opinion-avatar {



  flex: 0 0 auto;



  width: 52px; height: 52px;



  border-radius: 50%;



  background: #fff;



  border: 2px solid rgba(124,58,237,0.6);



  box-shadow: 0 4px 14px rgba(0,0,0,0.3);



}



.xlshu-opinion-main { flex: 1 1 auto; min-width: 0; }



.xlshu-opinion-user {



  display: flex;



  align-items: center;



  gap: 8px;



  margin-bottom: 6px;



}



#xlshu-user {



  font-weight: 700;



  color: var(--text);



  font-size: 0.92rem;



}



.xlshu-opinion-tag {



  font-size: 0.7rem;



  padding: 2px 8px;



  border-radius: 999px;



  color: #c4b5fd;



  background: rgba(124,58,237,0.18);



  border: 1px solid rgba(124,58,237,0.4);



  white-space: nowrap;



}



.xlshu-opinion-text {



  margin: 0;



  color: var(--text-secondary);



  line-height: 1.65;



  font-size: 0.95rem;



}



.xlshu-opinion-next {



  font: inherit;



  cursor: pointer;



  color: #c4b5fd;



  background: transparent;



  border: 1px solid rgba(124,58,237,0.5);



  border-radius: 999px;



  padding: 8px 18px;



  font-size: 0.85rem;



  transition: background 0.25s, color 0.25s, transform 0.15s;



}



.xlshu-opinion-next:hover {



  background: rgba(124,58,237,0.18);



  transform: translateY(-1px);



}



.xlshu-opinion-next:active { transform: translateY(0); }



.xlshu-rank {



  margin-top: 40px;



  display: flex;



  flex-direction: column;



  gap: 12px;



}



.xlshu-rank-head {



  display: flex;



  align-items: center;



  justify-content: space-between;



}



.xlshu-rank-badge {



  position: relative;



  padding-left: 16px;



  font-size: 0.82rem;



  letter-spacing: 0.06em;



  color: var(--text-tertiary);



}



.xlshu-rank-badge::before {



  content: "";



  position: absolute;



  left: 0; top: 50%;



  width: 8px; height: 8px;



  margin-top: -4px;



  border-radius: 50%;



  background: #3D7A2E;



  box-shadow: 0 0 10px #3D7A2E;



  animation: xlshu-pulse 1.4s ease-in-out infinite;



}



.xlshu-rank-open:hover { opacity: 1; text-decoration: underline; }



.aihot-section {



  position: relative;



  padding: 140px 5%;



  overflow: hidden;



  text-align: center;



}



.aihot-aura {



  position: absolute;



  top: 0; left: 50%;



  width: 720px; height: 720px;



  max-width: 90vw;



  transform: translateX(-50%);



  background: radial-gradient(circle, rgba(61,122,46,0.13), transparent 62%);



  filter: blur(40px);



  pointer-events: none;



  z-index: 0;



}



.aihot-section .section-header { position: relative; z-index: 1; }



.aihot-wrap {



  position: relative;



  z-index: 1;



  max-width: 820px;



  margin: 44px auto 0;



  text-align: left;



}



.aihot-bar {



  display: flex;



  align-items: center;



  justify-content: space-between;



  margin-bottom: 14px;



}



.aihot-live {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  font-size: 0.8rem;



  color: var(--text-tertiary);



}



.aihot-live i {



  width: 8px; height: 8px;



  border-radius: 50%;



  background: #3D7A2E;



  box-shadow: 0 0 10px #3D7A2E;



  animation: xlshu-pulse 1.4s ease-in-out infinite;



}



.aihot-refresh {



  font: inherit;



  cursor: pointer;



  color: #8fd6a0;



  background: transparent;



  border: 1px solid rgba(61,122,46,0.5);



  border-radius: 999px;



  padding: 7px 16px;



  font-size: 0.82rem;



  transition: background 0.25s, transform 0.15s;



}



.aihot-refresh:hover { background: rgba(61,122,46,0.18); transform: translateY(-1px); }



.aihot-refresh:active { transform: translateY(0); }



.aihot-refresh.is-loading { opacity: 0.5; pointer-events: none; }



.aihot-list {



  list-style: none;



  margin: 0;



  padding: 0;



  border-radius: var(--radius);



  border: 1px solid var(--border);



  background: rgba(255,255,255,0.03);



  box-shadow: 0 30px 80px rgba(0,0,0,0.35);



  overflow: hidden;



}



.aihot-row {



  display: flex;



  align-items: flex-start;



  gap: 14px;



  padding: 14px 18px;



  border-bottom: 1px solid rgba(255,255,255,0.06);



  transition: background 0.3s ease;



}



.aihot-row:last-child { border-bottom: 0; }



.aihot-row:hover { background: rgba(61,122,46,0.1); }



.aihot-no {



  flex: 0 0 auto;



  width: 26px;



  padding-top: 2px;



  text-align: center;



  font-weight: 800;



  font-size: 0.95rem;



  font-style: italic;



  color: var(--text-tertiary);



}



.aihot-row:nth-child(1) .aihot-no { color: #ffd66b; }



.aihot-row:nth-child(2) .aihot-no { color: #d6e2ef; }



.aihot-row:nth-child(3) .aihot-no { color: #e0a26b; }



.aihot-main { flex: 1 1 auto; min-width: 0; }



.aihot-title {



  display: block;



  color: var(--text);



  font-weight: 600;



  font-size: 0.96rem;



  line-height: 1.5;



  text-decoration: none;



  word-break: break-word;



}



.aihot-title:hover { color: #8fd6a0; text-decoration: underline; }



.aihot-meta {



  margin: 5px 0 0;



  font-size: 0.76rem;



  color: var(--text-tertiary);



}



.aihot-tag {



  display: inline-block;



  font-size: 0.66rem;



  font-weight: 700;



  padding: 1px 7px;



  border-radius: 999px;



  color: #8fd6a0;



  background: rgba(61,122,46,0.2);



  border: 1px solid rgba(61,122,46,0.45);



  margin-right: 6px;



  vertical-align: middle;



}



.aihot-meta b { color: #8fd6a0; font-weight: 700; }



.aihot-note {



  margin: 12px 0 0;



  font-size: 0.78rem;



  color: var(--text-tertiary);



  text-align: center;



}



.aihot-note.is-error { color: #ff8a8a; }



@media (max-width: 480px) {



  .aihot-section { padding: 110px 5%; }



  .aihot-row { padding: 12px 13px; gap: 10px; }



  .aihot-title { font-size: 0.9rem; }



  .aihot-refresh { padding: 6px 13px; font-size: 0.78rem; }



}







/* ===== AI 音乐 · 妙响创作平台 ===== */



.music-section { position: relative; padding: 120px 8%; overflow: hidden; }



.music-aura {



  position: absolute; top: -12%; left: 50%; transform: translateX(-50%);



  width: 780px; height: 780px; pointer-events: none;



  background: radial-gradient(circle at 50% 50%, rgba(168,85,247,0.22), rgba(236,72,153,0.10) 42%, transparent 70%);



  filter: blur(30px); z-index: 0;



}



.music-section .section-header { position: relative; z-index: 1; }



.music-wrap {



  position: relative; z-index: 1;



  max-width: 1200px; margin: 44px auto 0;



}



.music-frame {



  position: relative;



  border-radius: var(--radius);



  overflow: hidden;



  border: 1px solid var(--border);



  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));



  box-shadow: 0 30px 90px rgba(0,0,0,0.4), 0 0 0 1px rgba(168,85,247,0.12) inset;



  padding: 10px;



}



.music-frame::before {



  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;



  background: linear-gradient(120deg, rgba(168,85,247,0.6), rgba(236,72,153,0.35), rgba(56,189,248,0.45));



  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);



  -webkit-mask-composite: xor; mask-composite: exclude;



  pointer-events: none; opacity: 0.7;



}



.music-iframe {



  display: block; width: 100%; height: 760px; border: 0;



  border-radius: calc(var(--radius) - 6px); background: #0b0b12;



}



.music-actions { margin: 22px 0 0; text-align: center; }



.music-note { margin: 12px 0 0; font-size: 0.8rem; color: var(--text-tertiary); }



@media (max-width: 900px) {



  .music-section { padding: 100px 6%; }



  .music-iframe { height: 620px; }



}



@media (max-width: 480px) {



  .music-section { padding: 90px 5%; }



  .music-iframe { height: 520px; }



  .music-frame { padding: 7px; }



}







/* 语音合成工作台 · VoxCPM-2 */



.tts-section { position: relative; padding: 120px 8%; overflow: hidden; }



.tts-aura {



  position: absolute; top: -12%; left: 50%; transform: translateX(-50%);



  width: 780px; height: 780px; pointer-events: none;



  background: radial-gradient(circle at 50% 50%, rgba(56,189,248,0.22), rgba(34,197,130,0.10) 42%, transparent 70%);



  filter: blur(30px); z-index: 0;



}



.tts-section .section-header { position: relative; z-index: 1; }



.tts-wrap {



  position: relative; z-index: 1;



  max-width: 1200px; margin: 44px auto 0;



}



.tts-frame {



  position: relative;



  border-radius: var(--radius);



  overflow: hidden;



  border: 1px solid var(--border);



  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));



  box-shadow: 0 30px 90px rgba(0,0,0,0.4), 0 0 0 1px rgba(56,189,248,0.12) inset;



  padding: 10px;



}



.tts-frame::before {



  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;



  background: linear-gradient(120deg, rgba(56,189,248,0.6), rgba(34,197,130,0.35), rgba(99,102,241,0.45));



  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);



  -webkit-mask-composite: xor; mask-composite: exclude;



  pointer-events: none; opacity: 0.7;



}



.tts-iframe {



  display: block; width: 100%; height: 760px; border: 0;



  border-radius: calc(var(--radius) - 6px); background: #0b0b12;



}



.tts-actions { margin: 22px 0 0; text-align: center; }



.tts-note { margin: 12px 0 0; font-size: 0.8rem; color: var(--text-tertiary); }



@media (max-width: 900px) {



  .tts-section { padding: 100px 6%; }



  .tts-iframe { height: 620px; }



}



@media (max-width: 480px) {



  .tts-section { padding: 90px 5%; }



  .tts-iframe { height: 520px; }



  .tts-frame { padding: 7px; }



}







/* 锚点跳转时避开吸顶导航，防止标题被遮挡 */



section[id] { scroll-margin-top: 86px; }







/* ===================== 站点公告条 ===================== */



.announcement-bar {



  display: none;



  position: fixed;



  top: 0; left: 0; right: 0;



  z-index: 1001;



  align-items: center;



  gap: 12px;



  padding: 9px 5%;



  background: linear-gradient(90deg, rgba(0,212,255,0.18), rgba(124,58,237,0.18));



  border-bottom: 1px solid rgba(255,255,255,0.12);



  backdrop-filter: blur(14px);



  -webkit-backdrop-filter: blur(14px);



  color: #fff;



  font-size: 0.9rem;



  line-height: 1.4;



}



.announcement-bar.active { display: flex; }



.announcement-bar.important {



  background: linear-gradient(90deg, rgba(239,68,68,0.24), rgba(249,115,22,0.20));



  border-bottom-color: rgba(239,68,68,0.5);



}



.ann-icon { font-size: 1.05rem; flex: none; }



.ann-body {



  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0;



}



.ann-title { font-weight: 700; white-space: nowrap; }



.ann-content { opacity: 0.92; }



.ann-link {



  color: #7dd3fc; text-decoration: underline; white-space: nowrap; flex: none;



}



.ann-link:hover { color: #bae6fd; }



.ann-close {



  flex: none;



  background: transparent; border: none; color: #fff; opacity: 0.7;



  cursor: pointer; font-size: 1rem; padding: 4px 9px; border-radius: 6px; line-height: 1;



}



.ann-close:hover { opacity: 1; background: rgba(255,255,255,0.14); }







@media (max-width: 600px) {



  .announcement-bar { font-size: 0.82rem; padding: 8px 4%; }



  .ann-title { white-space: normal; }



  .ann-link { white-space: normal; }



}



@media (prefers-reduced-motion: reduce) {



  .announcement-bar { backdrop-filter: none; -webkit-backdrop-filter: none; }



}







/* ===================== 公告轮播动画 ===================== */



.ann-viewport { position: relative; flex: 1; min-width: 0; }



.ann-mode-vertical .ann-viewport,



.ann-mode-fade .ann-viewport { height: 1.9em; }







/* 横向无缝滚动 */



.ann-marquee {



  display: inline-flex; gap: 48px; white-space: nowrap;



  padding-left: 8px; will-change: transform;



  animation: annMarquee 24s linear infinite;



}



.ann-marquee:hover { animation-play-state: paused; }



@keyframes annMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }



.ann-marquee-item { display: inline-flex; align-items: center; gap: 10px; }



.ann-marquee-item.important .ann-title { color: #fecaca; }



.ann-marquee-item .ann-link { color: #7dd3fc; text-decoration: underline; }







/* 上下循环 / 淡入淡出 */



.ann-slide {



  position: absolute; left: 0; right: 0; top: 0; height: 100%;



  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;



  opacity: 0; transform: translateY(100%);



  transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .6s ease;



  will-change: transform, opacity;



}



.ann-slide.ann-slide-in { transform: translateY(0) !important; opacity: 1 !important; }



.ann-slide.important .ann-title { color: #fecaca; }



.ann-mode-fade .ann-slide { transform: none; }







@media (prefers-reduced-motion: reduce) {



  .ann-marquee { animation: none; }



  .ann-slide { transition: opacity .3s ease; }



}







/* ============================================================



   接码平台模块（管理后台）



   ============================================================ */



.admin-view {



  animation: adminViewIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;



}







@keyframes adminViewIn {



  from { opacity: 0; transform: translateY(14px); }



  to { opacity: 1; transform: translateY(0); }



}







.sms-wrap {



  max-width: 1200px;



  margin: 0 auto;



}







/* 核心介绍区：左文右视觉 */



.sms-hero {



  display: grid;



  grid-template-columns: 1.1fr 0.9fr;



  gap: 56px;



  align-items: center;



  padding: 20px 0 72px;



}







.sms-eyebrow {



  display: inline-block;



  font-size: 0.78rem;



  font-weight: 700;



  letter-spacing: 0.2em;



  color: var(--primary);



  text-transform: uppercase;



  margin-bottom: 18px;



}







.sms-title {



  font-size: clamp(1.9rem, 3.4vw, 2.8rem);



  font-weight: 800;



  line-height: 1.18;



  letter-spacing: -0.03em;



  margin-bottom: 20px;



  background: linear-gradient(135deg, var(--primary) 0%, #a78bfa 50%, var(--secondary) 100%);



  -webkit-background-clip: text;



  -webkit-text-fill-color: transparent;



  background-clip: text;



}







.sms-desc {



  color: var(--text-secondary);



  font-size: 1.02rem;



  line-height: 1.85;



  margin-bottom: 24px;



}







.sms-points {



  list-style: none;



  display: flex;



  flex-direction: column;



  gap: 13px;



  margin-bottom: 32px;



}







.sms-points li {



  display: flex;



  align-items: center;



  gap: 13px;



  color: var(--text-secondary);



  font-size: 0.97rem;



}







.sms-points .dot {



  width: 9px;



  height: 9px;



  border-radius: 50%;



  background: linear-gradient(135deg, var(--primary), var(--secondary));



  flex-shrink: 0;



  box-shadow: 0 0 12px rgba(0, 212, 255, 0.4);



}







.sms-actions {



  display: flex;



  gap: 16px;



  flex-wrap: wrap;



  margin-bottom: 14px;



}







.sms-note {



  font-size: 0.84rem;



  color: var(--text-tertiary);



  line-height: 1.6;



  max-width: 520px;



}







/* 手机收码视觉 */



.sms-visual {



  display: flex;



  align-items: center;



  justify-content: center;



  position: relative;



}







.sms-visual::before {



  content: '';



  position: absolute;



  width: 360px;



  height: 360px;



  border-radius: 50%;



  background: radial-gradient(circle, rgba(0, 212, 255, 0.16) 0%, rgba(124, 58, 237, 0.10) 40%, transparent 70%);



  filter: blur(36px);



  animation: smsGlow 8s ease-in-out infinite;



}







@keyframes smsGlow {



  0%, 100% { transform: scale(1); opacity: 0.85; }



  50% { transform: scale(1.1); opacity: 1; }



}







.sms-phone {



  position: relative;



  z-index: 2;



  width: 270px;



  height: 540px;



  border-radius: 38px;



  padding: 16px 16px 22px;



  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));



  border: 1px solid var(--border-strong);



  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05);



  display: flex;



  flex-direction: column;



  animation: smsFloat 6s ease-in-out infinite;



}







@keyframes smsFloat {



  0%, 100% { transform: translateY(0); }



  50% { transform: translateY(-12px); }



}







.sms-phone-notch {



  width: 96px;



  height: 7px;



  border-radius: 6px;



  background: rgba(255, 255, 255, 0.16);



  margin: 4px auto 14px;



}







.sms-phone-top {



  display: flex;



  align-items: center;



  gap: 5px;



  padding: 0 6px 14px;



}







.sms-signal {



  width: 5px;



  height: 11px;



  border-radius: 2px;



  background: var(--text-tertiary);



}



.sms-signal:nth-child(2) { height: 14px; }



.sms-signal:nth-child(3) { height: 17px; }







.sms-carrier {



  margin-left: auto;



  font-size: 0.74rem;



  color: var(--text-secondary);



  letter-spacing: 0.02em;



}







.sms-bubble {



  margin: auto 4px;



  padding: 18px 20px;



  border-radius: 22px;



  background: linear-gradient(135deg, rgba(0, 212, 255, 0.14), rgba(124, 58, 237, 0.12));



  border: 1px solid rgba(0, 212, 255, 0.22);



  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);



}







.sms-bubble-app {



  font-size: 0.8rem;



  color: var(--text-secondary);



  margin-bottom: 12px;



}







.sms-bubble-code {



  font-size: 2rem;



  font-weight: 800;



  letter-spacing: 0.14em;



  color: var(--text);



  font-variant-numeric: tabular-nums;



  text-shadow: 0 0 24px rgba(0, 212, 255, 0.4);



  animation: smsCodePulse 2.4s ease-in-out infinite;



}







@keyframes smsCodePulse {



  0%, 100% { opacity: 0.85; }



  50% { opacity: 1; }



}







.sms-bubble-tip {



  margin-top: 12px;



  font-size: 0.72rem;



  color: var(--primary);



  letter-spacing: 0.04em;



}







.sms-phone-foot {



  text-align: center;



  font-size: 0.72rem;



  color: var(--text-tertiary);



  padding-top: 14px;



}







/* 功能卡片（复用 .token-features / .token-card） */



.sms-features {



  display: grid;



  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));



  gap: 24px;



  max-width: 1200px;



  margin: 0 auto 64px;



}







/* 数据优势（复用 .token-stats / .token-stat） */



.sms-stats {



  display: grid;



  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));



  gap: 24px;



  max-width: 1100px;



  margin: 0 auto;



}







/* 响应式 */



@media (max-width: 900px) {



  .sms-hero {



    grid-template-columns: 1fr;



    gap: 44px;



    padding-bottom: 56px;



  }



  .sms-visual {



    order: -1;



  }



}







@media (max-width: 768px) {



  .sms-phone {



    width: 230px;



    height: 470px;



  }



  .sms-bubble-code {



    font-size: 1.6rem;



  }



}







/* 尊重减少动效偏好 */



@media (prefers-reduced-motion: reduce) {



  .admin-view,



  .sms-visual::before,



  .sms-phone,



  .sms-bubble-code {



    animation: none !important;



  }



}







/* ============================================================



   宝藏趣站模块（优化版）



   ============================================================ */



.treasure-section {



  position: relative;



  padding: 120px 24px;



  overflow: hidden;



  background:



    radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.06) 0%, transparent 35%),



    radial-gradient(circle at 80% 70%, rgba(124, 58, 237, 0.06) 0%, transparent 35%);



}



.treasure-section::before {



  content: '';



  position: absolute;



  inset: 0;



  background: linear-gradient(180deg, rgba(0,0,0,0.22) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.22) 100%);



  pointer-events: none;



}



.treasure-aura {



  position: absolute;



  top: -140px;



  left: 50%;



  width: 720px;



  height: 720px;



  transform: translateX(-50%);



  background: radial-gradient(circle at 50% 45%, rgba(0, 212, 255, 0.10), rgba(124, 58, 237, 0.06) 50%, transparent 72%);



  filter: blur(48px);



  pointer-events: none;



}







/* 内容区居中约束，与 capabilities 等模块一致 */



.treasure-toolbar,



.treasure-form,



.treasure-grid,



.treasure-empty,



.treasure-note {



  max-width: 1200px;



  margin-left: auto;



  margin-right: auto;



}







/* 工具栏 */



.treasure-toolbar {



  display: flex;



  align-items: center;



  gap: 16px;



  margin-bottom: 26px;



}



.treasure-count {



  font-size: 0.86rem;



  color: rgba(255, 255, 255, 0.58);



  letter-spacing: 0.04em;



  padding: 6px 12px;



  border-radius: 999px;



  background: rgba(255, 255, 255, 0.06);



  border: 1px solid rgba(255, 255, 255, 0.1);



}







/* 添加表单 */



.treasure-form {



  position: relative;



  background: rgba(255, 255, 255, 0.05);



  border: 1px solid rgba(255, 255, 255, 0.12);



  border-radius: 20px;



  padding: 0;



  margin-bottom: 34px;



  backdrop-filter: blur(16px);



  -webkit-backdrop-filter: blur(16px);



  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);



  overflow: hidden;



}



.treasure-form::before {



  content: '';



  position: absolute;



  top: 0;



  left: 0;



  right: 0;



  height: 3px;



  background: linear-gradient(90deg, #00d4ff, #7c3aed);



}



.treasure-form-inner {



  padding: 24px;



}



.treasure-form-header {



  display: flex;



  align-items: center;



  gap: 10px;



  font-size: 1.05rem;



  font-weight: 700;



  color: #fff;



  margin: 0 0 18px;



}



.treasure-form-grid {



  display: grid;



  grid-template-columns: repeat(3, 1fr);



  gap: 18px;



  margin-bottom: 18px;



}



.treasure-form .form-group {



  margin-bottom: 0;



}



.treasure-form label {



  display: block;



  font-size: 0.8rem;



  font-weight: 500;



  color: rgba(255, 255, 255, 0.8);



  margin-bottom: 8px;



  letter-spacing: 0.03em;



}



.treasure-form input,



.treasure-form textarea {



  width: 100%;



  padding: 12px 14px;



  border-radius: 12px;



  border: 1px solid rgba(255, 255, 255, 0.14);



  background: rgba(0, 0, 0, 0.28);



  color: #fff;



  font-size: 0.94rem;



  font-family: inherit;



  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;



}



.treasure-form input::placeholder,



.treasure-form textarea::placeholder {



  color: rgba(255, 255, 255, 0.35);



}



.treasure-form input:focus,



.treasure-form textarea:focus {



  outline: none;



  border-color: #00d4ff;



  background: rgba(0, 0, 0, 0.38);



  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.16);



}



.treasure-form textarea { resize: vertical; min-height: 84px; }



.treasure-form-actions {



  display: flex;



  align-items: center;



  gap: 12px;



  flex-wrap: wrap;



  padding-top: 4px;



}



.treasure-form-msg {



  font-size: 0.86rem;



  color: rgba(255, 255, 255, 0.7);



  margin-left: 4px;



}



.treasure-form-msg.error { color: #fca5a5; }







/* 卡片网格 */



.treasure-grid {



  display: grid;



  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));



  gap: 24px;



}



.treasure-card {



  position: relative;



  border-radius: 20px;



  overflow: hidden;



  background: rgba(255, 255, 255, 0.05);



  border: 1px solid rgba(255, 255, 255, 0.1);



  backdrop-filter: blur(14px);



  -webkit-backdrop-filter: blur(14px);



  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s ease, border-color 0.32s ease;



}



.treasure-card:hover {



  transform: translateY(-8px);



  border-color: rgba(0, 212, 255, 0.45);



  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.38);



}



.treasure-card-media {



  position: relative;



  aspect-ratio: 16 / 10;



  background: linear-gradient(135deg, rgba(0, 212, 255, 0.14), rgba(124, 58, 237, 0.14));



  overflow: hidden;



}



.treasure-card-media::after {



  content: '';



  position: absolute;



  inset: 0;



  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.35) 100%);



  pointer-events: none;



}



.treasure-card-img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



  transition: transform 0.5s ease;



}



.treasure-card:hover .treasure-card-img {



  transform: scale(1.05);



}



.treasure-card-body {



  padding: 18px 20px 22px;



}



.treasure-card-title {



  display: flex;



  align-items: center;



  gap: 8px;



  font-size: 1.1rem;



  font-weight: 700;



  color: #fff;



  margin: 0 0 10px;



}



.treasure-card-desc {



  font-size: 0.88rem;



  line-height: 1.65;



  color: rgba(255, 255, 255, 0.68);



  margin: 0 0 16px;



  display: -webkit-box;



  -webkit-line-clamp: 4;



  -webkit-box-orient: vertical;



  overflow: hidden;



  min-height: 5.6em;



}



.treasure-card-footer {



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 12px;



}



.treasure-card-link {



  display: inline-flex;



  align-items: center;



  gap: 6px;



  padding: 8px 14px;



  border-radius: 999px;



  font-size: 0.84rem;



  font-weight: 600;



  color: #fff;



  background: linear-gradient(135deg, rgba(0, 212, 255, 0.9), rgba(124, 58, 237, 0.9));



  text-decoration: none;



  transition: transform 0.2s ease, box-shadow 0.2s ease;



}



.treasure-card-link:hover {



  transform: translateY(-1px);



  box-shadow: 0 6px 18px rgba(0, 212, 255, 0.3);



}



/* 末尾「添加」磁贴：始终位于卡片网格最右侧，点击展开表单 */



.treasure-add-tile {



  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: center;



  gap: 14px;



  min-height: 280px;



  border-radius: 20px;



  border: 2px dashed rgba(0, 212, 255, 0.4);



  background: rgba(255, 255, 255, 0.03);



  color: rgba(255, 255, 255, 0.8);



  cursor: pointer;



  font-family: inherit;



  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;



}



.treasure-add-tile:hover {



  transform: translateY(-6px);



  border-color: rgba(0, 212, 255, 0.85);



  background: rgba(0, 212, 255, 0.08);



  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);



}



.treasure-add-plus {



  width: 64px;



  height: 64px;



  display: flex;



  align-items: center;



  justify-content: center;



  border-radius: 50%;



  font-size: 2.2rem;



  font-weight: 300;



  line-height: 1;



  color: #fff;



  background: linear-gradient(135deg, rgba(0, 212, 255, 0.95), rgba(124, 58, 237, 0.95));



  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);



}



.treasure-add-tile:hover .treasure-add-plus {



  transform: rotate(90deg) scale(1.06);



}



.treasure-add-label {



  font-size: 0.96rem;



  font-weight: 600;



  letter-spacing: 0.04em;



}







/* 空态 / 提示 */



.treasure-empty {



  text-align: center;



  color: rgba(255, 255, 255, 0.55);



  padding: 52px 0;



  font-size: 0.96rem;



  background: rgba(255, 255, 255, 0.04);



  border: 1px dashed rgba(255, 255, 255, 0.14);



  border-radius: 16px;



}



.treasure-note {



  text-align: center;



  color: rgba(255, 255, 255, 0.5);



  padding: 28px 0;



  font-size: 0.9rem;



}



.treasure-demo-tip {



  text-align: center;



  color: rgba(255, 255, 255, 0.45);



  font-size: 0.82rem;



  margin-top: 10px;



}







@media (max-width: 720px) {



  .treasure-section { padding: 84px 20px; }



  .treasure-form-inner { padding: 20px; }



  .treasure-form-grid { grid-template-columns: 1fr; }



  .treasure-grid { grid-template-columns: 1fr; }



}











/* ================= 打赏组件 ================ */



:root{



    --reward-warm-1:#ff7a8a; --reward-warm-2:#ff9d5c; --reward-warm-3:#ffd36b;



    --reward-ink:#2b2440; --reward-muted:#7a7393; --reward-line:rgba(43,36,64,.10);



  }



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



  



  



  



  



  







  /* 悬浮按钮 */



  .reward-fab{



    position:fixed;right:28px;bottom:28px;z-index:60;



    width:66px;height:66px;border:none;border-radius:50%;cursor:pointer;



    background:linear-gradient(135deg,#7f77dd,#534ab7);



    color:#fff;display:flex;align-items:center;justify-content:center;



    box-shadow:0 10px 26px rgba(83,74,183,.5);



    animation:fabFloat 3.4s ease-in-out infinite;transition:transform .25s;



  }



  .reward-fab:hover{transform:scale(1.08)}



  .reward-fab svg{width:30px;height:30px}



  .reward-fab span{position:absolute;bottom:-26px;font-size:12px;color:#7f77dd;font-weight:600;white-space:nowrap}



  .reward-fab::before,.reward-fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #7f77dd;animation:pulse 2.6s ease-out infinite}



  .reward-fab::after{animation-delay:1.3s}



  @keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}



  @keyframes fabFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}







  /* 弹窗：深色科技蓝紫主题，与站点统一 */



  .reward-mask{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;background:rgba(2,2,5,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:maskIn .3s ease both}



  @keyframes maskIn{from{opacity:0}to{opacity:1}}



  .reward-card{position:relative;width:min(396px,92vw);border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#151528 0%,#0c0c18 100%);border:1px solid rgba(0,212,255,.18);box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04),0 0 60px rgba(0,212,255,.08);animation:cardIn .42s cubic-bezier(.18,.89,.32,1.28) both}



  @keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}







  /* 顶部彩带 */



  .reward-ribbon{position:relative;background:linear-gradient(135deg,#00c2ff 0%,#0072ff 45%,#7c4dff 100%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 0 18px}



  .reward-ribbon::after{content:"";position:absolute;inset:0;background:radial-gradient(140px 70px at 25% -10%,rgba(255,255,255,.45),transparent);pointer-events:none}



  .reward-ribbon::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-20deg) translateX(-120%);animation:ribbonShine 4s ease-in-out infinite}



  @keyframes ribbonShine{0%,100%{transform:skewX(-20deg) translateX(-120%)}50%{transform:skewX(-20deg) translateX(120%)}}



  .ribbon-heart{width:26px;height:26px;opacity:.95;position:relative;z-index:1}



  .ribbon-title{position:relative;z-index:1;color:#fff;font-size:20px;font-weight:800;letter-spacing:.5px;text-shadow:0 2px 8px rgba(0,0,0,.2)}



  .reward-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border:none;border-radius:50%;background:rgba(0,0,0,.25);color:#fff;font-size:20px;cursor:pointer;line-height:1;z-index:3;transition:.2s;display:flex;align-items:center;justify-content:center}



  .reward-close:hover{background:rgba(0,0,0,.45);transform:rotate(90deg)}







  .reward-body{padding:22px 24px 24px}



  .reward-sub{text-align:center;font-size:13px;color:rgba(248,250,252,.55);margin-bottom:14px}



  .reward-copy{font-size:13.5px;line-height:1.75;color:rgba(248,250,252,.82);background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.12);border-radius:16px;padding:12px 14px;margin-bottom:16px}



  .reward-copy b{color:var(--primary)}







  /* 二维码 + 扫描线 */



  .qr-wrap{position:relative;width:180px;margin:0 auto;border-radius:18px;overflow:hidden;border:1px solid rgba(0,212,255,.22);background:#fff;padding:6px;box-shadow:0 8px 30px rgba(0,212,255,.12)}



  .qr-wrap img{display:block;width:100%;height:auto;border-radius:12px}



  .qr-scan{position:absolute;left:6px;right:6px;top:6px;height:44px;background:linear-gradient(180deg,rgba(0,194,255,0),rgba(0,194,255,.55),rgba(0,194,255,0));animation:scan 2.4s linear infinite;border-radius:12px}



  @keyframes scan{0%{transform:translateY(-44px)}100%{transform:translateY(180px)}}



  .qr-tip{text-align:center;font-size:12.5px;color:var(--primary);font-weight:700;margin-top:12px;text-shadow:0 0 12px rgba(0,212,255,.25)}



  .qr-tip small{display:block;color:rgba(248,250,252,.5);font-weight:400;margin-top:4px}







  /* 扫码后填金额 */



  .input-zone{margin-top:18px;text-align:center}



  .input-zone .lead{font-size:13px;color:rgba(248,250,252,.65);margin-bottom:12px}



  .amt-row{display:none}



  .amt-box{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;max-width:260px;margin:0 auto 16px;padding:14px 22px;background:rgba(255,255,255,.04);border-radius:18px;box-shadow:0 4px 20px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.06);transition:.2s;overflow:hidden}



  .amt-box::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1.5px;background:linear-gradient(135deg,rgba(0,194,255,.55),rgba(124,58,237,.55));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7;transition:.2s}



  .amt-box:focus-within{background:rgba(255,255,255,.08);box-shadow:0 0 0 4px rgba(0,212,255,.12),0 8px 30px rgba(0,212,255,.1)}



  .amt-box:focus-within::before{opacity:1}



  .amt-symbol{font-size:22px;font-weight:800;color:var(--primary)}



  .amt-input{flex:1;min-width:70px;border:none;background:transparent;text-align:center;font-size:22px;font-weight:800;color:#f8fafc;outline:none}



  .amt-input::placeholder{color:rgba(248,250,252,.25)}



  .amt-unit{font-size:14px;color:rgba(248,250,252,.5);font-weight:500}



  #rewardConfirm{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0;width:100%;max-width:260px;border:none;border-radius:16px;padding:14px 40px;font-size:16px;letter-spacing:2px;font-weight:800;color:#020205;cursor:pointer;background:linear-gradient(135deg,var(--primary),#0072ff,var(--secondary));box-shadow:0 8px 26px rgba(0,212,255,.28),0 8px 26px rgba(124,58,237,.28);transition:.2s;overflow:hidden}



  #rewardConfirm::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-100%)}



  #rewardConfirm:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,212,255,.35),0 12px 34px rgba(124,58,237,.35)}



  #rewardConfirm:hover::before{transform:translateX(100%);transition:transform .6s}



  #rewardConfirm:active{transform:translateY(0)}



  .soft-exit{display:block;width:100%;margin-top:12px;background:none;border:none;color:rgba(248,250,252,.45);font-size:12.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:.2s}



  .soft-exit:hover{color:var(--primary)}







  /* 庆祝页 */



  .celebrate{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(160deg,#1e1e3a,#121226);border-radius:inherit;z-index:5;padding:24px;text-align:center;color:#fff;overflow:hidden}



  .celebrate::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:140%;height:70%;background:radial-gradient(ellipse at top,rgba(0,212,255,.18),transparent 60%);z-index:0;pointer-events:none}



  .celebrate canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}



  .cele-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;animation:celePop .5s cubic-bezier(.18,.89,.32,1.28) both}



  @keyframes celePop{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}



  .cele-icon{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;box-shadow:0 16px 40px rgba(0,212,255,.25),0 0 0 6px rgba(0,212,255,.1);animation:iconPulse 2.2s ease-in-out infinite;margin-bottom:18px}



  .cele-icon svg{width:38px;height:38px;fill:#fff}



  @keyframes iconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}



  .cele-title{font-size:24px;font-weight:800;letter-spacing:.8px;margin-bottom:6px;text-shadow:0 2px 12px rgba(0,0,0,.3)}



  .cele-badge{font-size:12px;color:rgba(255,255,255,.75);background:rgba(255,255,255,.12);padding:4px 12px;border-radius:20px;margin-bottom:16px}



  .cele-amount{font-size:48px;font-weight:800;line-height:1;background:linear-gradient(135deg,var(--primary),#a78bfa,var(--secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px;filter:drop-shadow(0 2px 8px rgba(0,212,255,.2))}



  .cele-amount small{font-size:16px;letter-spacing:2px;font-weight:500;opacity:.8}



  .cele-msg{font-size:14px;color:rgba(255,255,255,.86);line-height:1.7;max-width:260px;margin-bottom:16px}



  .cele-rank{font-size:12px;color:rgba(255,255,255,.65);background:rgba(255,255,255,.08);padding:6px 14px;border-radius:20px}



  .cele-close{position:relative;z-index:2;margin-top:22px;border:none;border-radius:24px;padding:12px 30px;font-size:14px;font-weight:800;color:#020205;cursor:pointer;background:linear-gradient(135deg,var(--primary),#0072ff,var(--secondary));box-shadow:0 8px 26px rgba(0,212,255,.28),0 8px 26px rgba(124,58,237,.28);transition:.2s}



  .cele-close:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,212,255,.35),0 12px 34px rgba(124,58,237,.35)}







  /* 社会证明 */



  .social{margin-top:18px;height:36px;overflow:hidden;position:relative;border-top:1px dashed rgba(0,212,255,.18);padding-top:10px}



  .social-track{display:flex;gap:26px;white-space:nowrap;animation:scrollX 12s linear infinite;font-size:12.5px;color:rgba(248,250,252,.45)}



  .social-track b{color:var(--primary)}



  @keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}







  .reward-foot{text-align:center;font-size:12px;color:rgba(248,250,252,.4);margin-top:14px}







  /* 软退出 toast */



  .reward-toast{



    position:fixed;right:28px;bottom:108px;z-index:80;



    display:flex;align-items:center;gap:10px;



    background:linear-gradient(180deg,#1a1a32,#111124);border:1px solid rgba(0,212,255,.18);border-radius:16px;padding:12px 18px;



    box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.03);



    font-size:13px;color:rgba(248,250,252,.85);



    opacity:0;transform:translateY(16px);pointer-events:none;



    transition:opacity .4s,transform .4s;



  }



  .reward-toast.show{opacity:1;transform:translateY(0)}



  .reward-toast svg{width:20px;height:20px;fill:var(--primary);flex-shrink:0}







/* ============ AI 画布 模块 ============ */



.aicanvas-section {



  position: relative;



  padding: 140px 5%;



  overflow: hidden;



  text-align: center;



}



.aicanvas-aura {



  position: absolute;



  top: 8%; left: 50%;



  width: 760px; height: 760px;



  max-width: 92vw;



  transform: translateX(-50%);



  background: radial-gradient(circle, rgba(0,212,255,0.16), transparent 62%);



  filter: blur(46px);



  pointer-events: none;



  z-index: 0;



}



.aicanvas-section .section-header { position: relative; z-index: 1; }



.aicanvas-title {



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 14px;



  flex-wrap: wrap;



}



.aicanvas-icon {



  width: 46px;



  height: 46px;



  flex: 0 0 auto;



  filter: drop-shadow(0 4px 14px rgba(0,212,255,0.5));



}



.aicanvas-body {



  position: relative;



  z-index: 1;



  max-width: 1100px;



  margin: 56px auto 0;



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 48px;



  align-items: center;



  text-align: left;



}



.aicanvas-lead {



  font-size: 1.8rem;



  font-weight: 800;



  letter-spacing: -0.02em;



  margin-bottom: 16px;



  background: linear-gradient(135deg, var(--primary), #a78bfa 45%, var(--secondary));



  -webkit-background-clip: text;



  background-clip: text;



  color: transparent;



}



.aicanvas-desc {



  color: var(--text-secondary);



  font-size: 1.08rem;



  line-height: 1.8;



  margin-bottom: 24px;



}



.aicanvas-points {



  list-style: none;



  padding: 0;



  margin: 0 0 32px;



  display: flex;



  flex-direction: column;



  gap: 14px;



}



.aicanvas-points li {



  display: flex;



  align-items: center;



  gap: 12px;



  color: var(--text);



  font-size: 1.02rem;



}



.aicanvas-points .dot {



  width: 9px; height: 9px;



  flex: 0 0 auto;



  border-radius: 50%;



  background: linear-gradient(135deg, var(--primary), var(--secondary));



  box-shadow: 0 0 12px rgba(0,212,255,0.45);



}



.aicanvas-actions { margin-top: 4px; }



.aicanvas-btn { display: inline-flex; align-items: center; gap: 8px; }







/* 画布视觉 */



.aicanvas-visual { display: flex; justify-content: center; }



.canvas-board {



  width: 100%;



  max-width: 460px;



  border-radius: 18px;



  overflow: hidden;



  border: 1px solid var(--border);



  background: rgba(255,255,255,0.03);



  box-shadow: 0 30px 80px rgba(0,0,0,0.4);



}



.canvas-board-bar {



  display: flex;



  gap: 7px;



  padding: 12px 16px;



  border-bottom: 1px solid var(--border);



  background: rgba(255,255,255,0.02);



}



.canvas-board-bar span {



  width: 11px; height: 11px; border-radius: 50%;



  background: rgba(255,255,255,0.16);



}



.canvas-board-bar span:nth-child(1){ background:#ff5f57; }



.canvas-board-bar span:nth-child(2){ background:#febc2e; }



.canvas-board-bar span:nth-child(3){ background:#28c840; }



.canvas-stage {



  position: relative;



  height: 320px;



  background:



    radial-gradient(120% 120% at 18% 12%, rgba(0,212,255,0.30), transparent 55%),



    radial-gradient(120% 120% at 86% 88%, rgba(124,58,237,0.40), transparent 55%),



    linear-gradient(135deg, #0f1226, #1a1033 58%, #0c1430);



  overflow: hidden;



}



.canvas-blob {



  position: absolute;



  border-radius: 50%;



  filter: blur(8px);



  opacity: 0.85;



  animation: canvasFloat 6s ease-in-out infinite;



}



.canvas-blob-1 { width: 120px; height: 120px; left: 12%; top: 18%; background: linear-gradient(135deg,#00d4ff,#7c3aed); }



.canvas-blob-2 { width: 90px; height: 90px; right: 16%; top: 30%; background: linear-gradient(135deg,#7c3aed,#ec4899); animation-delay: 1.2s; }



.canvas-blob-3 { width: 70px; height: 70px; left: 38%; bottom: 14%; background: linear-gradient(135deg,#22d3ee,#3b82f6); animation-delay: 2.1s; }



.canvas-stroke {



  position: absolute;



  left: 18%; bottom: 24%;



  width: 64%; height: 2px;



  background: linear-gradient(90deg, transparent, #00d4ff, #7c3aed, transparent);



  transform: rotate(-8deg);



}



.canvas-chip {



  position: absolute;



  padding: 7px 12px;



  font-size: 0.82rem;



  font-weight: 600;



  color: #fff;



  border-radius: 999px;



  background: rgba(255,255,255,0.10);



  border: 1px solid rgba(255,255,255,0.2);



  backdrop-filter: blur(4px);



  white-space: nowrap;



  animation: canvasFloat 5s ease-in-out infinite;



}



.canvas-chip-1 { left: 14%; top: 16%; }



.canvas-chip-3 { left: 26%; bottom: 20%; animation-delay: 2.6s; }



.canvas-chip-4 { right: 10%; bottom: 30%; animation-delay: 3.4s; }



@keyframes canvasFloat {



  0%,100% { transform: translateY(0); }



  50% { transform: translateY(-10px); }



}







@media (max-width: 880px) {



  .aicanvas-body { grid-template-columns: 1fr; gap: 36px; text-align: center; }



  .aicanvas-points { align-items: center; }



  .aicanvas-visual { order: -1; }



}







/* 底部支持入口 */

.footer-support {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-top: 6px;

  flex-wrap: wrap;

  justify-content: center;

}



.footer-support-label {

  color: var(--text-secondary);

  font-size: 0.9rem;

}



.reward-open-link {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding: 9px 20px;

  border-radius: 50px;

  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);

  color: #fff;

  font-size: 0.92rem;

  font-weight: 600;

  text-decoration: none;

  box-shadow: 0 4px 18px rgba(0, 212, 255, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;

  transition: var(--transition);

  position: relative;

  overflow: hidden;

}



.reward-open-link::before {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 60%);

  pointer-events: none;

}



.reward-open-link:hover {

  transform: translateY(-2px) scale(1.04);

  box-shadow: 0 8px 28px rgba(0, 212, 255, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.14) inset;

}



.reward-open-link svg {

  width: 18px;

  height: 18px;

  flex-shrink: 0;

}



/* 反馈区飞书直接链接 */

@media (max-width: 640px) {

  .footer-support {

    flex-direction: column;

    gap: 8px;

  }

  .reward-open-link {

    padding: 8px 18px;

    font-size: 0.88rem;

  }

}



/* 媒体型区块（短剧 / 音乐）重设计 */
.media-section {
  padding: 90px 5%;
  overflow: hidden;
}

.media-section-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 64px;
}

.media-section-reverse .media-section-content {
  direction: rtl;
}

.media-section-reverse .media-section-text,
.media-section-reverse .media-section-visual {
  direction: ltr;
}

.media-section-text {
  text-align: left;
}

.media-section-text .section-title,
.media-section-text .section-desc {
  text-align: left;
}

.media-section-text .section-eyebrow {
  color: var(--primary);
}

.media-actions {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.media-actions .music-note {
  text-align: left;
  margin-top: 0;
}

/* 视觉卡片 */
.media-section-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.media-visual-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 24px 70px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04) inset;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-card-glow {
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: var(--primary);
  filter: blur(80px);
  opacity: 0.18;
  z-index: 0;
  animation: mediaGlowPulse 6s ease-in-out infinite;
}

@keyframes mediaGlowPulse {
  0%, 100% { transform: scale(1); opacity: 0.18; }
  50% { transform: scale(1.15); opacity: 0.28; }
}

/* 短剧视觉 */
.drama-card {
  background: radial-gradient(circle at 70% 20%, rgba(124,58,237,0.22) 0%, transparent 55%),
              linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%);
}

.drama-frame {
  position: absolute;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  z-index: 1;
}

.drama-frame-1 {
  width: 55%;
  height: 42%;
  top: 14%;
  left: 10%;
  transform: rotate(-6deg);
  background: linear-gradient(135deg, rgba(124,58,237,0.25), rgba(255,255,255,0.05));
}

.drama-frame-2 {
  width: 48%;
  height: 36%;
  top: 34%;
  right: 8%;
  transform: rotate(8deg);
  background: linear-gradient(135deg, rgba(0,212,255,0.2), rgba(255,255,255,0.05));
}

.drama-frame-3 {
  width: 42%;
  height: 30%;
  bottom: 12%;
  left: 18%;
  transform: rotate(-3deg);
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
}

.drama-frame::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 10px;
  right: 10px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
}

.drama-clapper {
  position: absolute;
  bottom: 18%;
  right: 18%;
  width: 64px;
  height: 64px;
  z-index: 2;
  color: rgba(255,255,255,0.9);
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.3));
  animation: dramaFloat 5s ease-in-out infinite;
}

@keyframes dramaFloat {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-8px) rotate(-4deg); }
}

/* 音乐视觉 */
.music-card {
  background: radial-gradient(circle at 30% 80%, rgba(0,212,255,0.2) 0%, transparent 55%),
              linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%);
}

.music-disc {
  width: 55%;
  height: 55%;
  z-index: 1;
  animation: discSpin 12s linear infinite;
}

@keyframes discSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.music-bars {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 8px;
  z-index: 2;
  height: 50px;
}

.music-bars span {
  width: 8px;
  border-radius: 4px;
  background: linear-gradient(to top, var(--primary), var(--secondary));
  opacity: 0.8;
  animation: musicBar 1.2s ease-in-out infinite;
}

.music-bars span:nth-child(1) { height: 24px; animation-delay: 0s; }
.music-bars span:nth-child(2) { height: 42px; animation-delay: 0.15s; }
.music-bars span:nth-child(3) { height: 34px; animation-delay: 0.3s; }
.music-bars span:nth-child(4) { height: 48px; animation-delay: 0.45s; }
.music-bars span:nth-child(5) { height: 28px; animation-delay: 0.6s; }

@keyframes musicBar {
  0%, 100% { transform: scaleY(0.6); opacity: 0.7; }
  50% { transform: scaleY(1); opacity: 1; }
}

.music-notes {
  position: absolute;
  top: 16%;
  right: 18%;
  width: 44px;
  height: 44px;
  color: rgba(255,255,255,0.75);
  z-index: 2;
  animation: noteFloat 4s ease-in-out infinite;
}

@keyframes noteFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(8deg); }
}

@media (max-width: 900px) {
  .media-section-content {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .media-section-reverse .media-section-content {
    direction: ltr;
  }
  .media-section-text {
    text-align: center;
  }
  .media-section-text .section-title,
  .media-section-text .section-desc {
    text-align: center;
  }
  .media-actions {
    align-items: center;
  }
  .media-actions .music-note {
    text-align: center;
  }
  .media-section-visual {
    order: -1;
  }
}

@media (max-width: 480px) {
  .media-section {
    padding: 64px 5%;
  }
  .media-visual-card {
    max-width: 320px;
  }
}