/* AIVE operational refactor layer · 2026-07-05
   Keeps existing HTML/JS, fixes layout consistency, mobile overflow, and interaction polish. */

:root {
  --aive-bg-0: #050914;
  --aive-bg-1: #0b1020;
  --aive-panel: rgba(15, 23, 42, 0.78);
  --aive-panel-strong: rgba(15, 23, 42, 0.92);
  --aive-line: rgba(148, 163, 184, 0.16);
  --aive-line-strong: rgba(129, 140, 248, 0.34);
  --aive-text: #f8fafc;
  --aive-muted: #94a3b8;
  --aive-soft: #64748b;
  --aive-blue: #38bdf8;
  --aive-indigo: #818cf8;
  --aive-purple: #a78bfa;
  --aive-cyan: #22d3ee;
  --aive-green: #34d399;
  --aive-radius: 18px;
  --aive-radius-lg: 26px;
  --aive-shadow: 0 18px 60px rgba(0, 0, 0, .34);
}

html { overflow-x: hidden; }
body {
  background:
    radial-gradient(circle at 18% 8%, rgba(56, 189, 248, .12), transparent 30%),
    radial-gradient(circle at 82% 10%, rgba(167, 139, 250, .12), transparent 28%),
    linear-gradient(180deg, var(--aive-bg-0), var(--aive-bg-1) 42%, #070b15 100%) !important;
  color: var(--aive-text);
}
body.menu-open { overflow: hidden; }

body::before {
  background:
    linear-gradient(rgba(148, 163, 184, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .035) 1px, transparent 1px),
    radial-gradient(circle at 50% 0, rgba(129, 140, 248, .08), transparent 42%) !important;
  background-size: 52px 52px, 52px 52px, auto !important;
  opacity: .9;
}

.container, .nav-container { max-width: 1180px !important; }
#main-header, body.aive-image-page header {
  background: rgba(5, 9, 20, .76) !important;
  border-bottom: 1px solid rgba(148, 163, 184, .10) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .20);
}
#main-header.scrolled { background: rgba(5, 9, 20, .94) !important; }
.nav-logo { min-width: 118px; }
.nav-menu > li > a {
  color: #a8b3c7 !important;
  border: 1px solid transparent;
}
.nav-menu > li > a:hover,
.nav-menu > li > a.active {
  color: #fff !important;
  background: rgba(129, 140, 248, .10) !important;
  border-color: rgba(129, 140, 248, .14);
}
.nav-mobile-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-mobile-toggle.open span:nth-child(2) { opacity: 0; }
.nav-mobile-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hero-fullscreen {
  min-height: 82vh !important;
  padding: 112px 20px 72px !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(129, 140, 248, .22), transparent 36%),
    radial-gradient(circle at 35% 55%, rgba(34, 211, 238, .10), transparent 30%),
    #050914 !important;
}
.hero-title,
.hero-title-accent {
  font-size: clamp(2.6rem, 7vw, 4.8rem) !important;
  letter-spacing: -0.06em !important;
  line-height: .98 !important;
}
.hero-title-accent {
  display: inline-block;
  margin-top: 10px;
  background: linear-gradient(100deg, #fff 0%, #93c5fd 28%, #a78bfa 62%, #22d3ee 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.hero-subtitle {
  max-width: 760px !important;
  font-size: clamp(1rem, 2vw, 1.2rem) !important;
  color: #b6c2d6 !important;
}
.hero-badge {
  background: rgba(34, 211, 238, .08) !important;
  border-color: rgba(34, 211, 238, .18) !important;
  color: #a5f3fc !important;
}
.hero-stats-row {
  padding: 14px 18px;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 999px;
  background: rgba(15, 23, 42, .40);
  backdrop-filter: blur(16px);
}
.btn-primary, .btn-outline, .generate-btn, .nav-cta, .btn-generate {
  border-radius: 13px !important;
}
.btn-primary, .generate-btn, .nav-cta, .btn-generate {
  background: linear-gradient(135deg, #2563eb, #7c3aed 52%, #0891b2) !important;
  box-shadow: 0 12px 34px rgba(37, 99, 235, .22) !important;
}
.btn-outline {
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(15, 23, 42, .36) !important;
  color: #dbeafe !important;
}

section { scroll-margin-top: 84px; }
.section-title, .workspace-section > .container > h2, .workspace-section > h2 {
  color: #fff !important;
  letter-spacing: -0.035em;
}
.section-desc { color: #9aa8bd !important; }
.features-section, .workspace-section, .tutorials-section { position: relative; }
.features-grid { gap: 18px !important; }
.feature-card {
  min-height: 100%;
  background: linear-gradient(145deg, rgba(15, 23, 42, .82), rgba(15, 23, 42, .52)) !important;
  border: 1px solid rgba(148, 163, 184, .12) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .22);
}
.feature-card:hover {
  border-color: rgba(129, 140, 248, .34) !important;
  transform: translateY(-5px) !important;
}
.feature-card.feature-card-link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.feature-card li { color: #91a2ba !important; }
.feature-icon {
  background: linear-gradient(135deg, rgba(56, 189, 248, .14), rgba(167, 139, 250, .16)) !important;
  border: 1px solid rgba(129, 140, 248, .16);
}

.workspace-section {
  max-width: 1180px !important;
  padding: 64px 24px 96px !important;
}
.workspace-section .container {
  padding: 0 !important;
}
.workspace-tabs {
  position: sticky;
  top: 68px;
  z-index: 30;
  display: flex;
  gap: 8px !important;
  margin: 24px 0 0 !important;
  padding: 10px !important;
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 18px 18px 0 0;
  background: rgba(5, 9, 20, .78);
  backdrop-filter: blur(18px);
  scrollbar-width: none;
}
.workspace-tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; }
.tab-content {
  border: 1px solid rgba(148, 163, 184, .12);
  border-top: 0;
  border-radius: 0 0 22px 22px;
  overflow: hidden;
  background: rgba(15, 23, 42, .36);
  box-shadow: var(--aive-shadow);
}
.input-panel, .output-panel, .material-sidebar, .material-content,
.writing-sidebar, .writing-input, .writing-output,
.check-input-area, .check-output-area, .hotspot-container {
  background: rgba(15, 23, 42, .42) !important;
  border-color: rgba(148, 163, 184, .12) !important;
}
input, textarea, select {
  border-color: rgba(148, 163, 184, .18) !important;
  background: rgba(2, 6, 23, .42) !important;
  color: #e5eefb !important;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(56, 189, 248, .50) !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, .10) !important;
}
.empty-state {
  color: #8ea0b7 !important;
  border: 1px dashed rgba(148, 163, 184, .14);
  border-radius: 18px;
  background: rgba(2, 6, 23, .22);
}
.material-card, .hotspot-item, .title-item, .tutorial-card, .result-block, .history-item {
  background: rgba(15, 23, 42, .68) !important;
  border-color: rgba(148, 163, 184, .12) !important;
}
.material-card:hover, .hotspot-item:hover, .tutorial-card:hover {
  border-color: rgba(129, 140, 248, .28) !important;
}
.tutorial-card { overflow: hidden; }
.site-footer {
  background: rgba(2, 6, 23, .28);
}
.fixed-contact-btn, #back-to-top {
  border: 1px solid rgba(148, 163, 184, .16) !important;
  background: rgba(15, 23, 42, .82) !important;
  backdrop-filter: blur(16px);
}
#back-to-top { opacity: 0; pointer-events: none; transition: .2s ease; }
#back-to-top.visible { opacity: 1; pointer-events: auto; }

/* AI image page convergence */
body.aive-image-page {
  background:
    radial-gradient(circle at 18% 8%, rgba(56, 189, 248, .12), transparent 30%),
    radial-gradient(circle at 82% 10%, rgba(167, 139, 250, .12), transparent 28%),
    linear-gradient(180deg, #050914, #0b1020 55%, #070b15) !important;
}
body.aive-image-page .container { max-width: 1080px !important; }
body.aive-image-page .tool-panel,
body.aive-image-page .credits-bar,
body.aive-image-page .model-intro,
body.aive-image-page .result-card,
body.aive-image-page .history-item {
  background: rgba(15, 23, 42, .72) !important;
  border-color: rgba(148, 163, 184, .14) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}
body.aive-image-page .hero h1 {
  font-size: clamp(2.1rem, 6vw, 3.5rem) !important;
  letter-spacing: -.055em;
  background: linear-gradient(100deg, #fff, #93c5fd 34%, #a78bfa 68%, #22d3ee) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
body.aive-image-page .type-btn,
body.aive-image-page .style-btn,
body.aive-image-page .example-chip {
  border-color: rgba(148, 163, 184, .14) !important;
  background: rgba(2, 6, 23, .34) !important;
}
body.aive-image-page .type-btn.active,
body.aive-image-page .style-btn.active {
  border-color: rgba(56,189,248,.42) !important;
  background: linear-gradient(135deg, rgba(37,99,235,.72), rgba(124,58,237,.72)) !important;
  color: #fff !important;
}
body.aive-image-page .nav-links { overflow-x: auto; scrollbar-width: none; }
body.aive-image-page .nav-links::-webkit-scrollbar { display: none; }

@media (max-width: 900px) {
  .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .workspace-grid, .check-container, .writing-main { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
  body.menu-open { overflow: hidden; }
  .nav-container { height: 60px !important; padding: 0 16px !important; }
  .nav-logo { min-width: auto; }
  .nav-right { display: none !important; }
  .nav-menu.open {
    position: fixed !important;
    top: 60px !important;
    left: 10px !important;
    right: 10px !important;
    bottom: auto !important;
    max-height: calc(100vh - 78px) !important;
    padding: 10px !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 18px !important;
    background: rgba(5, 9, 20, .96) !important;
    box-shadow: 0 26px 80px rgba(0, 0, 0, .55) !important;
  }
  .nav-menu.open > li > a { justify-content: center; }
  .hero-fullscreen { min-height: auto !important; padding: 92px 16px 48px !important; }
  .hero-title, .hero-title-accent { font-size: clamp(2.2rem, 13vw, 3.5rem) !important; line-height: 1.02 !important; }
  .hero-subtitle { font-size: .98rem !important; }
  .hero-actions { width: 100%; }
  .hero-stats-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px !important;
    width: 100%;
    border-radius: 18px;
  }
  .hero-stat-num { font-size: 1.35rem !important; }
  .hero-stat-label { font-size: 11px !important; }
  .features-grid { grid-template-columns: 1fr !important; }
  .feature-card { padding: 22px 18px !important; }
  .workspace-section { padding: 42px 12px 72px !important; }
  .workspace-tabs { top: 60px; border-radius: 16px; margin-top: 16px !important; }
  .tab-content { border-radius: 18px; border-top: 1px solid rgba(148, 163, 184, .12); margin-top: 10px; }
  .input-panel, .output-panel, .material-content, .writing-input, .writing-output, .check-input-area, .check-output-area { padding: 18px 14px !important; }
  .platform-selector { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .material-sidebar, .writing-sidebar { overflow-x: auto; }
  .footer-inner { grid-template-columns: 1fr !important; gap: 26px !important; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .fixed-contact-btn { bottom: 18px !important; right: 18px !important; }

  body.aive-image-page nav { padding: 0 14px !important; gap: 12px !important; }
  body.aive-image-page .nav-links { gap: 14px !important; margin-left: auto !important; }
  body.aive-image-page .page { padding-top: 88px !important; }
  body.aive-image-page .tool-panel { padding: 20px !important; }
  body.aive-image-page .credits-bar { gap: 10px !important; }
  body.aive-image-page .generate-row { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px !important; }
  .hero-badge { max-width: 100%; }
  .hero-stats-row { grid-template-columns: 1fr; border-radius: 18px; }
  .section-title { font-size: 1.65rem !important; }
  .workspace-tabs { padding: 8px !important; }
  .tab { padding: 10px 12px !important; font-size: 13px !important; }
  .tutorial-card-img { height: 120px !important; }
  body.aive-image-page .type-grid,
  body.aive-image-page .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Unified Youheng brand layer · 2026-07-05
   AIVE is a product inside youheng.work product matrix, not a standalone template. */
:root {
  --aive-bg-0: #05070d;
  --aive-bg-1: #070b16;
  --aive-panel: rgba(16, 24, 44, .78);
  --aive-panel-strong: rgba(21, 31, 57, .88);
  --aive-line: rgba(148, 163, 184, .18);
  --aive-line-strong: rgba(129, 140, 248, .35);
  --aive-brand: #7c3aed;
  --aive-cyan: #06b6d4;
  --aive-text: #f7f8fb;
  --aive-muted: #98a6bd;
  --aive-radius-lg: 22px;
}
body {
  background:
    radial-gradient(circle at 10% -10%, rgba(124,58,237,.22), transparent 36%),
    radial-gradient(circle at 92% 4%, rgba(6,182,212,.16), transparent 32%),
    linear-gradient(135deg, var(--aive-bg-0), var(--aive-bg-1)) !important;
}
#main-header, body.aive-image-page header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  background: rgba(5,7,13,.72) !important;
  backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: none !important;
}
.nav-container, body.aive-image-page nav {
  max-width: 1180px !important;
  height: 72px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}
.nav-menu {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
}
.nav-right { display: flex !important; align-items: center !important; margin-left: 0 !important; }
.nav-mobile-toggle { display: none !important; flex-direction: column !important; gap: 4px !important; border: 0 !important; background: transparent !important; color: inherit !important; cursor: pointer !important; }
.nav-mobile-toggle span { width: 22px !important; height: 2px !important; border-radius: 99px !important; background: #e5e7eb !important; display: block !important; }
.aive-yh-nav .nav-logo { gap: 11px !important; min-width: 0 !important; font-weight: 590 !important; }
.aive-yh-nav .nav-logo-img { width: 36px !important; height: 36px !important; border-radius: 0 !important; box-shadow: none !important; object-fit: contain !important; filter: none !important; }
.nav-brand-text { display: grid; gap: 1px; line-height: 1.08; }
.nav-brand-text strong { color: #fff; font-size: 16px; letter-spacing: -.2px; }
.nav-brand-text small { color: #8d96a8; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.nav-menu { gap: 28px !important; }
.nav-menu > li > a, body.aive-image-page .nav-links a { padding: 0 !important; border: 0 !important; background: transparent !important; color: #a4adbd !important; font-size: 14px !important; font-weight: 510 !important; }
.nav-menu > li > a:hover, .nav-menu > li > a.active, body.aive-image-page .nav-links a:hover, body.aive-image-page .nav-links a.active { color: #fff !important; }
.nav-cta { padding: 10px 16px !important; border-radius: 999px !important; background: rgba(255,255,255,.045) !important; border: 1px solid rgba(255,255,255,.1) !important; box-shadow: none !important; }
.aive-hero { min-height: 760px !important; padding: 84px 0 96px !important; background: transparent !important; }
.hero-fullscreen::before { pointer-events: none !important; }
.aive-hero-shell { position: relative; z-index: 2; width: min(1180px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.02fr) minmax(420px,.98fr); gap: 64px; align-items: center; }
.aive-hero-copy { min-width: 0; }
.aive-hero .hero-badge, .aive-product-bridge .eyebrow { display: inline-flex; align-items: center; gap: 8px; background: transparent !important; border: 0 !important; color: #9aa6ff !important; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 12px; letter-spacing: .17em; text-transform: uppercase; padding: 0 !important; }
.aive-hero .hero-badge::before, .aive-product-bridge .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: #6677ff; box-shadow: 0 0 18px rgba(102,119,255,.55); }
.aive-hero .hero-title { text-align: left !important; font-size: clamp(3.4rem, 7.6vw, 5.25rem) !important; line-height: .9 !important; letter-spacing: -.075em !important; color: #fff !important; margin: 22px 0 22px !important; }
.aive-hero .hero-title-accent { background: linear-gradient(90deg,#dfe4ff 0%,#7ee8ff 52%,#47d5ff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.aive-hero .hero-subtitle { text-align: left !important; max-width: 620px !important; margin: 0 !important; color: #c5d4ea !important; font-size: 18px !important; line-height: 1.62 !important; letter-spacing: .01em !important; }
.aive-hero .hero-subtitle span { display: block; }
.aive-hero .hero-actions { justify-content: flex-start !important; margin-top: 32px !important; }
.aive-ghost-link { display: inline-flex !important; }
.aive-signal-row { width: fit-content; border-radius: 0 !important; padding: 0 !important; margin-top: 34px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; gap: 36px !important; }
.aive-signal-row .hero-stat-num { color: #fff !important; font-size: 28px !important; }
.aive-signal-row .hero-stat-label { color: #9db0ca !important; }
.aive-stack-panel { border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: linear-gradient(160deg,rgba(25,31,56,.86),rgba(8,12,24,.9)); box-shadow: 0 28px 80px rgba(0,0,0,.36); overflow: hidden; }
.panel-topbar { height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.08); color: #cbd5e1; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 12px; }
.dot { width: 10px; height: 10px; border-radius: 99px; display: inline-block; }
.dot.cyan { background: #67e8f9; } .dot.violet { background: #6677ff; }
.stack-item { display: grid; grid-template-columns: 52px 1fr; gap: 16px; margin: 18px; padding: 20px 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(5,7,13,.42); transition: .2s ease; }
.stack-item:hover, .stack-item.active { border-color: rgba(126,232,255,.38); background: linear-gradient(135deg,rgba(102,119,255,.18),rgba(6,182,212,.12)); transform: translateY(-2px); }
.stack-code { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.06); color: #8cecff; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 12px; }
.stack-item strong { display:block; color:#fff; font-size:18px; margin-bottom:8px; }
.stack-item p { margin:0; color:#aec0da; line-height:1.7; }
.aive-product-bridge { padding: 0 0 84px; }
.bridge-shell { display:grid; grid-template-columns: .88fr 1.12fr; gap: 40px; align-items: stretch; padding: 28px; border: 1px solid rgba(255,255,255,.09); border-radius: 26px; background: rgba(255,255,255,.025); }
.bridge-copy h2 { color:#fff; font-size: clamp(2rem,4vw,3.4rem); line-height:1.05; margin: 14px 0; letter-spacing:-.06em; }
.bridge-copy p { color:#bfd0e8; line-height:1.9; margin:0; }
.bridge-cards { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.bridge-card { padding: 18px; border:1px solid rgba(148,163,184,.14); border-radius:18px; background: rgba(16,24,44,.58); }
.bridge-card:hover { border-color: rgba(126,232,255,.35); transform: translateY(-2px); }
.bridge-card span { color:#67e8f9; font-size:12px; letter-spacing:.12em; }
.bridge-card strong { display:block; color:#fff; font-size:20px; margin:10px 0 6px; }
.bridge-card small { color:#9fb1c9; }
.aive-wechat-section { padding: 0 0 88px; }
.aive-wechat-shell { display:grid; grid-template-columns: .9fr 1.1fr; gap: 22px; align-items: stretch; }
.wechat-profile-card, .wechat-article-panel { border:1px solid rgba(148,163,184,.16); border-radius:26px; background: linear-gradient(160deg, rgba(16,24,44,.72), rgba(7,11,24,.86)); box-shadow: 0 24px 80px rgba(0,0,0,.28); }
.wechat-profile-card { padding: 30px; }
.wechat-profile-card h2 { margin: 14px 0 14px; color:#fff; font-size: clamp(2rem,4vw,3.1rem); line-height:1.02; letter-spacing:-.055em; }
.wechat-profile-card p { margin:0; color:#bfd0e8; line-height:1.9; }
.wechat-meta-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 26px 0; }
.wechat-meta-grid span { padding: 16px; border:1px solid rgba(255,255,255,.09); border-radius:16px; background:rgba(255,255,255,.035); }
.wechat-meta-grid strong { display:block; color:#fff; font-size:18px; margin-bottom:5px; }
.wechat-meta-grid small { color:#8fa3c0; }
.wechat-actions { display:flex; gap: 12px; flex-wrap: wrap; }
.wechat-article-panel { padding: 22px; display:grid; gap: 16px; }
.wechat-qr-box { display:flex; align-items:center; gap: 16px; padding: 16px; border:1px solid rgba(126,232,255,.18); border-radius:18px; background:linear-gradient(135deg,rgba(102,119,255,.13),rgba(6,182,212,.1)); }
.wechat-qr-box img { width: 82px; height: 82px; border-radius:14px; background:#fff; padding:6px; object-fit:cover; }
.wechat-qr-box strong { display:block; color:#fff; font-size:18px; margin-bottom:6px; }
.wechat-qr-box small { color:#a8bdd8; }
.wechat-latest-list { display:grid; gap: 12px; }
.wechat-latest-list a { display:grid; grid-template-columns: 42px 1fr; gap: 14px; align-items:center; padding: 16px; border:1px solid rgba(148,163,184,.14); border-radius:16px; background:rgba(5,7,13,.34); color:#fff; text-decoration:none; transition:.2s ease; }
.wechat-latest-list a:hover { border-color:rgba(126,232,255,.36); transform:translateY(-2px); background:rgba(16,24,44,.62); }
.wechat-latest-list span { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; color:#8cecff; background:rgba(255,255,255,.06); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }
.wechat-latest-list strong { font-size:16px; line-height:1.55; letter-spacing:-.02em; }
.btn-primary, .generate-btn, .btn-generate, body.aive-image-page .primary { background: linear-gradient(135deg,#dfe4ff 0%,#8bbcff 48%,#47d5ff 100%) !important; color:#020617 !important; box-shadow: 0 18px 40px rgba(71,213,255,.16) !important; font-weight:800 !important; }
.btn-outline, .action-btn, body.aive-image-page .ghost { border:1px solid rgba(255,255,255,.12) !important; background: rgba(255,255,255,.035) !important; color:#f7f8fb !important; }
.feature-card, .input-panel, .output-panel, .material-card, .hotspot-item, .title-item, .tutorial-card, .result-block, .tool-panel, .credits-bar, .model-intro { background: rgba(16,24,44,.68) !important; border-color: rgba(148,163,184,.18) !important; border-radius: 22px !important; }
.feature-card:hover, .bridge-card:hover, .hotspot-item:hover, .tutorial-card:hover { border-color: rgba(126,232,255,.32) !important; }
.aive-stack-panel a, .aive-stack-panel a *, .bridge-cards a, .bridge-cards a * { text-decoration: none !important; }
.feature-card .feature-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  margin: 0 0 22px !important;
  background: linear-gradient(135deg, rgba(126,232,255,.12), rgba(102,119,255,.16)) !important;
}
.feature-card .feature-icon .icon { width: 24px !important; height: 24px !important; }
.aive-yh-footer .footer-inner { grid-template-columns: 1.25fr .75fr .75fr .75fr !important; gap: 52px !important; }
.yh-footer-brand { display:flex !important; align-items:center; gap:10px; color:#fff !important; font-weight:700; }
.footer-logo { width:36px; height:36px; border-radius:0; box-shadow:none; object-fit:contain; filter:none; }
.aive-yh-footer .footer-bottom {
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap:10px 18px !important;
  width:100% !important;
  margin:32px auto 0 !important;
  padding-top:22px !important;
  text-align:center !important;
  border-top:1px solid rgba(148,163,184,.16) !important;
  color:#a8bdd8 !important;
}
.aive-yh-footer .footer-bottom a { color:#a8bdd8 !important; text-decoration:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; }
.aive-yh-footer .footer-bottom a:hover { color:#7ee8ff !important; }
.beian-icon { width:15px; height:15px; opacity:.78; flex:0 0 auto; }
body.aive-image-page { --bg:#05070d; --surface:rgba(16,24,44,.72); --card:rgba(21,31,57,.78); --accent:#67e8f9; --gradient:linear-gradient(135deg,#7c3aed,#06b6d4); background: radial-gradient(circle at 10% -10%, rgba(124,58,237,.22), transparent 36%), radial-gradient(circle at 92% 4%, rgba(6,182,212,.16), transparent 32%), linear-gradient(135deg,#05070d,#070b16) !important; }
body.aive-image-page .hero { text-align:left; margin: 20px 0 34px; }
body.aive-image-page .hero h1 { font-size: clamp(3rem,7vw,5rem); line-height:.96; letter-spacing:-.07em; background: linear-gradient(90deg,#fff,#7ee8ff); -webkit-background-clip:text; background-clip:text; }
body.aive-image-page .hero p { margin: 16px 0 0; max-width:760px; color:#bfd0e8; line-height:1.8; }
body.aive-image-page .page { padding-top: 116px; }
body.aive-image-page .nav-links { gap: 24px; }
body.aive-image-page .page-footer { text-align:center; }
body.aive-image-page .page-footer a { color:#67e8f9; }
@media (max-width: 900px) {
  .aive-hero-shell, .bridge-shell { grid-template-columns: 1fr; }
  .aive-stack-panel { margin-top: 6px; }
  .aive-hero .hero-title { font-size: clamp(2.9rem, 15vw, 4.6rem) !important; }
  .aive-yh-footer .footer-inner { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 760px) {
  #main-header .nav-container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 16px !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  #main-header .nav-menu {
    display: none !important;
    position: fixed !important;
    top: 72px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 14px 16px 20px !important;
    background: rgba(5,7,13,.97) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    backdrop-filter: blur(18px) !important;
  }
  #main-header .nav-menu.open { display: flex !important; }
  #main-header .nav-menu > li > a { display:block !important; padding: 13px 4px !important; }
  #main-header .nav-right { display: none !important; }
  #main-header .nav-mobile-toggle {
    display: flex !important;
    position: static !important;
    flex: 0 0 auto !important;
    width: 42px !important;
    height: 42px !important;
    margin-left: auto !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .aive-hero-shell { width: min(100% - 32px, 1180px); gap: 28px; }
  .aive-hero { padding-top: 92px !important; min-height: auto !important; }
  .aive-hero .hero-title {
    font-size: clamp(2.55rem, 10.9vw, 2.68rem) !important;
    line-height: .96 !important;
    letter-spacing: -.07em !important;
  }
  .aive-hero .hero-title-accent {
    display: block !important;
    margin-top: 8px !important;
    font-size: clamp(2.32rem, 10.1vw, 2.5rem) !important;
    line-height: .98 !important;
    letter-spacing: -.065em !important;
  }
  .aive-hero .hero-subtitle {
    max-width: 22em !important;
    font-size: 15.5px !important;
    line-height: 1.62 !important;
    letter-spacing: 0 !important;
  }
  .aive-signal-row { display:grid !important; grid-template-columns: repeat(3,1fr); width:100%; gap: 10px !important; }
  .aive-signal-row .hero-stat { text-align:left; }
  .stack-item { margin: 12px; grid-template-columns: 44px 1fr; padding: 16px 14px; }
  .bridge-shell { padding: 20px; }
  .bridge-cards { grid-template-columns: 1fr; }
  .aive-wechat-section { padding-bottom: 54px; }
  .aive-wechat-shell { grid-template-columns: 1fr; gap: 16px; }
  .wechat-profile-card, .wechat-article-panel { border-radius: 22px; padding: 18px; }
  .wechat-meta-grid { grid-template-columns: 1fr; margin: 20px 0; }
  .wechat-actions { flex-direction: column; }
  .wechat-actions .btn-primary, .wechat-actions .btn-outline { width: 100%; justify-content: center; }
  .wechat-qr-box { align-items: center; }
  .wechat-qr-box img { width: 72px; height: 72px; }
  .wechat-latest-list a { grid-template-columns: 36px 1fr; padding: 14px; }
  .wechat-latest-list strong { font-size: 14px; }
  .aive-yh-footer .footer-inner { grid-template-columns: 1fr !important; }
  .nav-brand-text small { display:none; }
  .aive-ghost-link { display:none !important; }
  body.aive-image-page .nav-links { display:none; }
}

/* Footer + mobile nav correction · 2026-07-05 */
@media (max-width: 760px) {
  html, body { overflow-x: hidden !important; }
  .aive-yh-footer .footer-brand-area,
  .aive-yh-footer .footer-col { text-align: center !important; }
  .aive-yh-footer .yh-footer-brand { justify-content: center !important; }
  .aive-yh-footer .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    line-height: 1.65 !important;
  }
  #main-header .nav-menu,
  body.aive-image-page .nav-links {
    display: none !important;
    position: fixed !important;
    top: 64px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 84px) !important;
    overflow-y: auto !important;
    transform: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 12px !important;
    margin: 0 !important;
    border: 1px solid rgba(148,163,184,.18) !important;
    border-radius: 18px !important;
    background: rgba(5,7,13,.97) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.42) !important;
    backdrop-filter: blur(20px) !important;
    z-index: 1001 !important;
  }
  #main-header .nav-menu.open,
  body.aive-image-page .nav-links.open { display: flex !important; }
  #main-header .nav-menu > li > a,
  #main-header .nav-menu .theme-toggle,
  body.aive-image-page .nav-links > a,
  body.aive-image-page .nav-links .theme-toggle {
    width: 100% !important;
    min-height: 42px !important;
    justify-content: flex-start !important;
    padding: 11px 12px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  body.aive-image-page .nav-links .nav-cta { justify-content: center !important; }
  body.aive-image-page .nav-mobile-toggle {
    display: flex !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    width: 42px !important;
    height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body.menu-open { overflow: hidden !important; }
}