/* ============================================================
   StellarU AI情商陪练 · H5
   base.css — 设计令牌 / 重置 / 排版 / 安全区 / 工具类
   ============================================================ */

:root {
  /* 品牌色 */
  --brand-900: #2e1065;
  --brand-800: #4a3c8a;
  --brand-700: #5b21b6;
  --brand-600: #6b5bb3;
  --brand-500: #7c3aed;
  --brand-400: #8b5cf6;
  --brand-300: #a78bfa;
  --indigo:    #6366f1;
  --indigo-d:  #4338ca;

  /* 强调色 */
  --accent:      #ff6b35;
  --accent-soft: #fff1ea;

  /* 语义色 */
  --success: #10b981;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --info:    #3b82f6;
  --pink:    #ec4899;
  --rose:    #f43f5e;
  --sky:     #0ea5e9;

  /* 文字 */
  --text-1: #1e293b;
  --text-2: #475569;
  --text-3: #64748b;
  --text-4: #94a3b8;
  --text-inv: #ffffff;

  /* 背景 */
  --bg-page:   #f6f7fb;
  --bg-card:   #ffffff;
  --bg-subtle: #f1f5f9;
  --bg-mute:   #f3f4f6;

  /* 表面（浅色默认值，深色由 dark.css 覆盖）B9 */
  --surface:   #ffffff;
  --surface-2: #f8fafc;
  --bubble-ai: #ffffff;
  --field-bg:  #ffffff;
  --chip-bg:   #ffffff;
  --nav-bg:    rgba(255,255,255,.92);
  --body-bg:   #e8ebf3;
  /* 强调文字（随主题走）B8 */
  --ok-text:   #065f46;
  --warn-text: #92400e;

  /* 边框 */
  --border:      #e5e7eb;
  --border-soft: #eef1f6;

  /* 圆角 */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 999px;

  /* 阴影 */
  --sh-xs: 0 1px 2px rgba(16,24,40,.05);
  --sh-sm: 0 2px 8px rgba(16,24,40,.06);
  --sh-md: 0 4px 16px -2px rgba(16,24,40,.08), 0 2px 6px -2px rgba(16,24,40,.05);
  --sh-lg: 0 12px 32px -8px rgba(16,24,40,.14), 0 4px 12px -4px rgba(16,24,40,.08);
  --sh-brand: 0 10px 30px -10px rgba(74,60,138,.35), 0 4px 12px -6px rgba(74,60,138,.22);
  --sh-brand-lg: 0 18px 44px -14px rgba(91,33,182,.42);

  /* 渐变 */
  --g-brand: linear-gradient(135deg, #4a3c8a 0%, #6b5bb3 100%);
  --g-indigo: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --g-hero: radial-gradient(120% 90% at 82% 6%, #7c3aed 0%, #5b21b6 52%, #2e1065 100%);
  --g-gold: linear-gradient(90deg, #fcd34d 0%, #f59e0b 100%);
  --g-success: linear-gradient(90deg, #10b981, #059669);
  --g-rose: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);

  /* 尺寸 */
  --tab-h: 58px;
  --nav-h: 52px;
  --app-max: 480px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* 动效曲线 */
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-pop: cubic-bezier(.175,.885,.32,1.275);
  --t-fast: .18s;
  --t-base: .32s;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--body-bg);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text-1);
  background: #0f0b1e;
  font-size: 15px;
  line-height: 1.6;
  overscroll-behavior-y: none;
}

/* 桌面端：居中手机视口 + 氛围背景 */
#app {
  position: relative;
  width: 100%;
  max-width: var(--app-max);
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg-page);
  overflow: hidden;
  box-shadow: 0 0 80px rgba(0,0,0,.5);
}
@media (min-width: 520px) {
  body { display: flex; align-items: center; justify-content: center;
    background: radial-gradient(120% 120% at 50% 0%, #241a4d 0%, #0f0b1e 60%); }
  #app { height: min(92vh, 900px); min-height: 0; border-radius: 34px;
    border: 1px solid rgba(255,255,255,.08); }
}

/* 排版 */
h1,h2,h3,h4,h5 { margin: 0; font-weight: 700; line-height: 1.3; color: var(--text-1); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: 15px; color: var(--text-1); }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

.t-1 { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.t-2 { font-size: 18px; font-weight: 700; }
.t-3 { font-size: 16px; font-weight: 600; }
.t-4 { font-size: 14px; font-weight: 500; }
.t-5 { font-size: 13px; }
.t-6 { font-size: 12px; }
.muted { color: var(--text-3); }
.muted2 { color: var(--text-4); }
.grad-text { background: var(--g-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.grad-text-2 { background: linear-gradient(135deg,#6366f1,#a855f7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* 布局工具 */
.row { display: flex; align-items: center; }
.row-b { display: flex; align-items: center; justify-content: space-between; }
.col { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.grow { flex: 1; min-width: 0; }
.center { display: flex; align-items: center; justify-content: center; }
.wrap { flex-wrap: wrap; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* 滚动条 */
.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll::-webkit-scrollbar { width: 0; height: 0; }

/* 动画 */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(14px);} to { opacity: 1; transform: none;} }
@keyframes fadeIn { from { opacity: 0;} to { opacity: 1;} }
@keyframes popIn { 0% { opacity:0; transform: scale(.86);} 100% { opacity:1; transform: scale(1);} }
@keyframes shimmer { 0% { background-position: 200% 0;} 100% { background-position: -200% 0;} }
@keyframes floaty { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-8px);} }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(124,58,237,.35);} 70% { box-shadow: 0 0 0 14px rgba(124,58,237,0);} 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0);} }
@keyframes spin { to { transform: rotate(360deg);} }
@keyframes bounceDot { 0%,80%,100% { transform: scale(.4); opacity:.5;} 40% { transform: scale(1); opacity:1;} }

.anim-up { animation: fadeInUp .5s var(--ease) both; }
.anim-in { animation: fadeIn .4s ease both; }
.d1{animation-delay:.05s}.d2{animation-delay:.1s}.d3{animation-delay:.15s}
.d4{animation-delay:.2s}.d5{animation-delay:.25s}.d6{animation-delay:.3s}

.tap { transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast), opacity var(--t-fast); }
.tap:active { transform: scale(.965); }

.hidden { display: none !important; }
.no-sel { user-select: none; -webkit-user-select: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; transition-duration: .001s !important; }
}