<template>
  <NuxtLayout>
    <FlashBanner />
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup>
import FlashBanner from '~/components/FlashBanner.vue'
</script>

<style>
:root {
  --soft-page-bg: radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.08), transparent 28%),
    radial-gradient(circle at 80% 10%, rgba(16, 185, 129, 0.08), transparent 30%),
    linear-gradient(180deg, #f8fbff, #f3f5f8);

  /* --- Nebula Glass Tokens --- */
  /* Colors */
  --color-primary-start: #8b5cf6; /* Electric Purple */
  --color-primary-end: #3b82f6;   /* Neon Blue */
  --color-accent-beam: #a855f7;   /* Neon Purple Beam */
  
  --color-text-main: #1e293b;     /* Slate 800 */
  --color-text-sub: #64748b;      /* Slate 500 */
  --color-text-active: #ffffff;
  
  --color-glass-bg: rgba(255, 255, 255, 0.65);
  --color-glass-border: rgba(255, 255, 255, 0.8);
  --color-glass-hover: rgba(255, 255, 255, 0.85);
  
  /* Dimensions */
  --sidebar-width-expanded: 80px;
  --sidebar-width-collapsed: 72px;
  --sidebar-radius: 40px;         /* Super Capsule */
  
  --card-radius-lg: 24px;
  --card-radius-md: 16px;
  --card-radius-sm: 12px;
  
  /* Shadows */
  --shadow-glass-floating: 
    0 10px 30px -10px rgba(68, 70, 245, 0.15),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
  --shadow-glass-hover:
    0 20px 40px -10px rgba(68, 70, 245, 0.25),
    0 8px 12px -4px rgba(0, 0, 0, 0.1);
    
  --shadow-neon-glow: 0 0 12px rgba(168, 85, 247, 0.6);
  
  /* Transitions */
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-normal: 0.3s;
  /* --- Home Plaza Redesign Tokens --- */
  --color-bg-plaza: #ffffff;
  --color-bg-list-card: #f8fafc;
  --color-border-light: #f1f5f9;
  
  --grad-feature-overlay: linear-gradient(135deg, rgba(236, 72, 153, 0.85), rgba(59, 130, 246, 0.85));
  --grad-primary-btn: linear-gradient(135deg, #6366f1, #8b5cf6);
  
  --shadow-card-hover: 0 20px 40px rgba(0, 0, 0, 0.08);
  --shadow-btn: 0 4px 12px rgba(99, 102, 241, 0.3);
  
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-hover: 0.3s;
}
.article-root {
  background: var(--soft-page-bg);
}
html,body,#__nuxt{ margin: 0;padding: 0; }

/* 禁用默认的页面转场动画，使用自定义的共享元素转场 */
.article-card-enter-active,
.article-card-leave-active {
  transition: none !important;
}
.article-card-enter-from,
.article-card-leave-to,
.article-card-enter-to,
.article-card-leave-from {
  opacity: 1 !important;
  transform: none !important;
}
</style>
