/* 设计令牌与基础样式。配色：蓝莓蓝（主色）、云莓黄、越橘红、湖水青——取自北欧浆果，不沿用任何现成产品的配色。 */
:root {
  color-scheme: light dark;
  --bg: #FBF7EF;
  --surface: #FFFFFF;
  --soft: #F4EEE1;
  --line: #E8E0CF;
  --ink: #1E2340;
  --muted: #646A8A;
  --brand: #4254D6;
  --btn: #4C5FE0;
  --btn-deep: #3344B8;
  --sun: #FFB727;
  --sun-deep: #B5761B;
  --sun-soft: #FFF1CC;
  --lingon: #D93A48;
  --lingon-deep: #A82634;
  --lingon-soft: #FDE7E8;
  --ok: #0E9C8B;
  --ok-deep: #0A7468;
  --ok-soft: #DDF5F0;
  --brand-soft: #E7EAFF;
  --shadow: 0 2px 0 rgba(30, 35, 64, .06), 0 10px 24px -14px rgba(30, 35, 64, .35);
  --c1: #0E9C8B; --c2: #2F7BEA; --c3: #8457E8; --c4: #D07F00; --c5: #D93A48;
  --r-lg: 22px; --r-md: 16px; --r-sm: 11px;
  --font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-round: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tabbar-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131529;
    --surface: #1E2140;
    --soft: #282C52;
    --line: #363B68;
    --ink: #F1F2FF;
    --muted: #A9AED2;
    --brand: #98A4FF;
    --sun-deep: #FFCB5C;
    --sun-soft: #4A3A12;
    --lingon: #FF7480;
    --lingon-soft: #4A1F2A;
    --ok: #3FD0BC;
    --ok-soft: #14403C;
    --brand-soft: #2A3069;
    --shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 10px 24px -14px rgba(0, 0, 0, .8);
    --c1: #3FD0BC; --c2: #74A9FF; --c3: #B195FF; --c4: #FFB84D; --c5: #FF7480;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; overflow-x: hidden; }
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--brand); }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
[lang="sv"], [lang="en"] { font-family: var(--font-round); }

/* 桌面上内容居中限宽，两侧留白用稍深的底色 */
#app {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
}
@media (min-width: 520px) {
  body { background: var(--soft); }
  #app { box-shadow: 0 0 0 1px var(--line), 0 30px 80px -40px rgba(30, 35, 64, .5); }
}
#view { min-height: 100dvh; }
body.has-tabbar #view { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 20px); }

.noscript { padding: 40px 24px; text-align: center; }

@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spin360 { to { transform: rotate(360deg); } }
@keyframes shake-x { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* 尊重“减少动态效果”：动画一闪而过只保留最终状态 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}