/* ============================================================
   小林妈妈AI科普 — 共享样式表 (Free-Explore, 单一主色: 天空蓝)
   明亮卡通探险风 · 面向5-12岁儿童
   统一儿童友好大字号 · 全站一致
   ============================================================ */

:root {
  /* ---- 主色: 天空蓝 (单一品牌色相 + 色阶) ---- */
  --xa-primary-50:  #eff6ff;
  --xa-primary-100: #dbeafe;
  --xa-primary-200: #bfdbfe;
  --xa-primary-300: #93c5fd;
  --xa-primary-400: #60a5fa;
  --xa-primary-500: #3b82f6;
  --xa-primary-600: #2563eb;  /* primary */
  --xa-primary-700: #1d4ed8;
  --xa-primary-800: #1e40af;
  --xa-primary-900: #1e3a8a;
  --xa-primary-950: #172554;

  /* ---- 中性色 (微暖白, 营造亲和) ---- */
  --xa-neutral-0:   #ffffff;
  --xa-neutral-50:  #faf9f6;
  --xa-neutral-100: #f4f2ec;
  --xa-neutral-200: #e8e5db;
  --xa-neutral-300: #d6d2c4;
  --xa-neutral-400: #a8a394;
  --xa-neutral-500: #7c7768;
  --xa-neutral-600: #5c584c;
  --xa-neutral-700: #44413a;
  --xa-neutral-800: #2d2b27;
  --xa-neutral-900: #1c1b18;

  /* ---- 状态色 (仅语义状态: 进度/成功/提示) ---- */
  --state-success: #16a34a;
  --state-success-soft: #dcfce7;
  --state-warning: #f59e0b;
  --state-warning-soft: #fef3c7;
  --state-error:   #dc2626;
  --state-error-soft: #fee2e2;
  --state-info:    #0ea5e9;
  --state-info-soft: #e0f2fe;

  /* ---- 语义别名 (Light Mode) ---- */
  --xa-background: #faf9f6;
  --xa-foreground: #1f1e1a;
  --xa-card: #ffffff;
  --xa-card-foreground: #1f1e1a;
  --xa-popover: #ffffff;
  --xa-popover-foreground: #1f1e1a;
  --xa-primary: var(--xa-primary-600);
  --xa-primary-foreground: #ffffff;
  --xa-muted: var(--xa-neutral-100);
  --xa-muted-foreground: #5c584c;
  --xa-border: var(--xa-neutral-200);
  --xa-input: var(--xa-neutral-200);
  --xa-ring: var(--xa-primary-500);

  /* ---- 圆角 (克制, 上限16px) ---- */
  --xa-radius-small: 8px;
  --xa-radius-medium: 12px;
  --xa-radius-large: 16px;
  --radius-full: 9999px;

  /* ---- 字体 ---- */
  --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, sans-serif;
  --font-display: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;

  /* ---- 场景主题色 (用于创意工坊等分场景) ---- */
  --scene-writer:  #2563eb;
  --scene-writer-soft:  #dbeafe;
  --scene-painter: #db2777;
  --scene-painter-soft: #fce7f3;
  --scene-music:   #7c3aed;
  --scene-music-soft:   #ede9fe;
  --scene-director:#ea580c;
  --scene-director-soft:#ffedd5;
  --scene-speaker: #0d9488;
  --scene-speaker-soft:#ccfbf1;
  --scene-inventor:#ca8a04;
  --scene-inventor-soft:#fef9c3;
}

/* ---- Dark Mode ---- */
.dark {
  --xa-background: #141a2b;
  --xa-foreground: #f1f3f9;
  --xa-card: #1c2438;
  --xa-card-foreground: #f1f3f9;
  --xa-popover: #1c2438;
  --xa-popover-foreground: #f1f3f9;
  --xa-primary: var(--xa-primary-400);
  --xa-primary-foreground: #0b1530;
  --xa-muted: #252e47;
  --xa-muted-foreground: #aab3cc;
  --xa-border: #2c3650;
  --xa-input: #2c3650;
  --xa-ring: var(--xa-primary-400);

  --state-success-soft: #0f3d24;
  --state-warning-soft: #3d2e0a;
  --state-error-soft: #3d1414;
  --state-info-soft: #0a2d3d;
}

/* ---- 字体类 ---- */
.font-sans { font-family: var(--font-sans); }
.font-display { font-family: var(--font-display); }

/* ---- 全局基础 (儿童友好大字号) ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background-color: var(--xa-background);
  color: var(--xa-foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  line-height: 1.75;
  font-size: 17px;          /* 基础字号上调, 适合儿童阅读 */
}

/* ---- Header ---- */
.xa-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--xa-border)}
.xa-header-inner{max-width:1280px;margin:0 auto;padding:0 24px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.xa-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--xa-foreground);flex-shrink:0}
.xa-logo-img{width:44px;height:44px;border-radius:9999px;object-fit:cover;border:2px solid var(--xa-primary-100)}
.xa-logo-text{font-size:19px;font-weight:700;white-space:nowrap}
.xa-nav{display:flex;align-items:center;gap:2px;min-width:0}
.xa-nav-item{padding:9px 12px;border-radius:10px;font-size:15px;font-weight:500;white-space:nowrap;text-decoration:none;color:var(--xa-muted-foreground);transition:color .15s cubic-bezier(.2,.8,.2,1),background .15s cubic-bezier(.2,.8,.2,1)}
.xa-nav-item:hover{color:var(--xa-primary);background:var(--xa-primary-50)}
.xa-nav-item.active{color:var(--xa-primary);background:var(--xa-primary-50);font-weight:600}
.xa-cta-btn{display:inline-flex;align-items:center;gap:7px;padding:11px 18px;border-radius:12px;background:var(--xa-primary);color:#fff;font-size:15px;font-weight:600;text-decoration:none;transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .15s cubic-bezier(.2,.8,.2,1);box-shadow:0 1px 2px rgba(37,99,235,.15);flex-shrink:0;white-space:nowrap}
.xa-cta-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(37,99,235,.25)}

/* ---- Footer ---- */
.xa-footer{background:var(--xa-neutral-100);border-top:1px solid var(--xa-border);margin-top:80px}
.xa-footer-inner{max-width:1280px;margin:0 auto;padding:48px 32px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.xa-footer-brand{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.xa-footer-brand img{width:34px;height:34px;border-radius:9999px;object-fit:cover}
.xa-footer-brand span{font-size:18px;font-weight:700}
.xa-footer h4{font-size:17px;font-weight:600;margin:0 0 14px 0;color:var(--xa-foreground)}
.xa-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.xa-footer a{color:var(--xa-muted-foreground);text-decoration:none;font-size:16px;transition:color .15s}
.xa-footer a:hover{color:var(--xa-primary)}
.xa-footer p{font-size:16px;color:var(--xa-muted-foreground);margin:0;line-height:1.75}

/* ---- Shared layout utilities ---- */
.xa-container{max-width:1280px;margin:0 auto;padding:0 32px}
.xa-section{padding:80px 0}
.xa-section-title{font-size:clamp(30px,4vw,46px);font-weight:700;line-height:1.2;letter-spacing:-.02em;margin:0 0 14px 0;color:var(--xa-foreground);text-wrap:balance}
.xa-section-subtitle{font-size:20px;color:var(--xa-muted-foreground);margin:0;line-height:1.7;max-width:680px}
.xa-card{background:var(--xa-card);border:1px solid var(--xa-border);border-radius:16px;padding:26px;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s cubic-bezier(.2,.8,.2,1)}
.xa-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px -8px rgba(37,99,235,.12)}
.xa-badge{display:inline-flex;align-items:center;gap:5px;padding:6px 15px;border-radius:9999px;font-size:15px;font-weight:600;background:var(--xa-primary-50);color:var(--xa-primary-700)}
.xa-btn-primary{display:inline-flex;align-items:center;gap:7px;padding:15px 30px;border-radius:12px;background:var(--xa-primary);color:#fff;font-size:18px;font-weight:600;text-decoration:none;transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .15s cubic-bezier(.2,.8,.2,1);box-shadow:0 1px 2px rgba(37,99,235,.15);border:none;cursor:pointer}
.xa-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(37,99,235,.25)}
.xa-btn-primary:active{transform:translateY(0)}
.xa-btn-secondary{display:inline-flex;align-items:center;gap:7px;padding:15px 30px;border-radius:12px;background:transparent;color:var(--xa-primary);font-size:18px;font-weight:600;text-decoration:none;border:1.5px solid var(--xa-primary-200);transition:all .15s cubic-bezier(.2,.8,.2,1);cursor:pointer}
.xa-btn-secondary:hover{background:var(--xa-primary-50);border-color:var(--xa-primary)}
.xa-btn-ghost{display:inline-flex;align-items:center;gap:6px;padding:11px 22px;border-radius:10px;background:var(--xa-primary-50);color:var(--xa-primary-700);font-size:17px;font-weight:600;text-decoration:none;border:none;cursor:pointer;transition:transform .15s,background .15s}
.xa-btn-ghost:hover{background:var(--xa-primary-100);transform:translateY(-1px)}

/* ---- 卡片图标 ---- */
.xa-card-icon{width:52px;height:52px;border-radius:9999px;background:var(--xa-primary-50);color:var(--xa-primary);display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex-shrink:0}

/* ---- Animations (表情/按钮动画, 儿童友好) ---- */
@keyframes xa-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes xa-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes xa-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
@keyframes xa-pop{0%{transform:scale(.9);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes xa-pulse-soft{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes xa-heartbeat{0%,100%{transform:scale(1)}15%{transform:scale(1.15)}30%{transform:scale(1)}45%{transform:scale(1.12)}60%{transform:scale(1)}}
@keyframes xa-spin-slow{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes xa-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes xa-confetti-fall{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(420px) rotate(540deg);opacity:0}}
@keyframes xa-dash-flow{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-20}}
.xa-animate-float{animation:xa-float 3s ease-in-out infinite}
.xa-animate-bounce{animation:xa-bounce 1.5s ease-in-out infinite}
.xa-animate-wiggle{animation:xa-wiggle 2s ease-in-out infinite}
.xa-animate-pop{animation:xa-pop .3s cubic-bezier(.3,0,0,1)}
.xa-animate-heartbeat{animation:xa-heartbeat 1.6s ease-in-out infinite}
.xa-animate-spin-slow{animation:xa-spin-slow 8s linear infinite}
.xa-animate-shake{animation:xa-shake .4s ease-in-out}

/* ---- Scroll reveal ---- */
.xa-reveal{opacity:0;transform:translateY(24px)}
.xa-reveal.xa-in{opacity:1;transform:translateY(0);transition:opacity .6s ease,transform .6s ease}

/* ---- 工具类 ---- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.text-center { text-align: center; }

/* ---- 撒花容器 ---- */
.xa-confetti{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.xa-confetti span{position:absolute;top:-20px;width:10px;height:14px;border-radius:2px;animation:xa-confetti-fall 2.4s ease-in forwards}

/* ---- Toast ---- */
.xa-toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);background:var(--xa-foreground);color:var(--xa-background);padding:14px 24px;border-radius:12px;font-size:17px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.16);opacity:0;transition:opacity .25s,transform .25s;z-index:10000;pointer-events:none;max-width:90vw;text-align:center}
.xa-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- 进度条 ---- */
.xa-progress{width:100%;height:14px;background:var(--xa-neutral-200);border-radius:9999px;overflow:hidden}
.xa-progress-fill{height:100%;background:linear-gradient(90deg,var(--xa-primary-400),var(--xa-primary-600));border-radius:9999px;transition:width .5s cubic-bezier(.2,.8,.2,1);width:0}

/* ---- 响应式 ---- */
@media(max-width:1200px){
  .xa-nav-item{padding:8px 10px;font-size:14px}
  .xa-cta-btn{padding:10px 14px;font-size:14px;gap:6px}
  .xa-logo-text{font-size:18px}
  .xa-search{width:200px}
}
@media(max-width:1000px){
  .xa-search{display:none}
  .xa-nav-item{padding:8px 9px;font-size:13.5px}
}
@media(max-width:768px){
  body{font-size:16px}
  .xa-header-inner{padding:0 16px;height:64px}
  .xa-nav{display:none}
  .xa-logo-text{font-size:18px}
  .xa-logo-img{width:38px;height:38px}
  .xa-container{padding:0 16px}
  .xa-section{padding:56px 0}
  .xa-footer-inner{grid-template-columns:1fr;gap:24px;padding:32px 16px}
  .xa-footer{margin-top:48px}
  .xa-cta-btn{padding:11px 18px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}