/* 药娘云 M3 设计令牌（2026-10-31）
 * 颜色：跨性别旗官方色（浅蓝 #5BCEFA、粉 #F5A9B8、白 #FFFFFF）大块直接用；苹果 Pride Luminance 壁纸「预设 III」取样的柔和粉蓝白做次要容器；
 *       白底上的文字/链接用同色相高饱和的深色版（#0872A0、#B4416A），深色字用深蓝灰 #16242C，不用灰蓝、紫渐变、粉配黑。
 * 形状、字体、阴影、动效：androidx compose material3 官方 tokens（M3 Expressive）。改颜色改生成脚本，不要手改单个值。
 */
:root {
  /* 品牌原色（旗帜官方色 + 苹果壁纸取样） */
  --yn-flag-blue: #5BCEFA;
  --yn-flag-pink: #F5A9B8;
  --yn-flag-white: #FFFFFF;
  --yn-apple-blue: #84D4F4;
  --yn-apple-blue-light: #DCECF4;
  --yn-apple-pink: #DCACBC;
  --yn-apple-pink-light: #ECCCD4;
  --yn-apple-white: #F4F4F4;
  /* M3 颜色角色 */
  --md-sys-color-primary: #0872A0;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #5BCEFA;
  --md-sys-color-on-primary-container: #062A38;
  --md-sys-color-secondary: #0A6489;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #DCECF4;
  --md-sys-color-on-secondary-container: #0C3E52;
  --md-sys-color-tertiary: #B4416A;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #F5A9B8;
  --md-sys-color-on-tertiary-container: #4A1426;
  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #93000A;
  --md-sys-color-surface: #FFFFFF;
  --md-sys-color-surface-dim: #E8F1F6;
  --md-sys-color-surface-bright: #FFFFFF;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F6FAFD;
  --md-sys-color-surface-container: #F0F6FA;
  --md-sys-color-surface-container-high: #EAF3F8;
  --md-sys-color-surface-container-highest: #E3EEF5;
  --md-sys-color-on-surface: #16242C;
  --md-sys-color-on-surface-variant: #45565F;
  --md-sys-color-outline: #758892;
  --md-sys-color-outline-variant: #CADDE7;
  --md-sys-color-inverse-surface: #2A363D;
  --md-sys-color-inverse-on-surface: #EDF3F7;
  --md-sys-color-inverse-primary: #5BCEFA;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
  /* 形状：圆角（M3 Expressive 新增 large-increased / extra-large-increased / extra-extra-large） */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-large-increased: 20px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-extra-large-increased: 32px;
  --md-sys-shape-corner-extra-extra-large: 48px;
  --md-sys-shape-corner-full: 9999px;
  /* 字体：中文用系统字体；字号行高按 M3 type scale；emphasized 加粗（中文字体只有常规/粗体两档，用 600/700） */
  --md-ref-typeface-plain: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --md-sys-typescale-display-large: 400 57px / 64px var(--md-ref-typeface-plain);
  --md-sys-typescale-emphasized-display-large: 600 57px / 64px var(--md-ref-typeface-plain);
  --md-sys-typescale-display-medium: 400 45px / 52px var(--md-ref-typeface-plain);
  --md-sys-typescale-emphasized-display-medium: 600 45px / 52px var(--md-ref-typeface-plain);
  --md-sys-typescale-display-small: 400 36px / 44px var(--md-ref-typeface-plain);
  --md-sys-typescale-emphasized-display-small: 600 36px / 44px var(--md-ref-typeface-plain);
  --md-sys-typescale-headline-large: 400 32px / 40px var(--md-ref-typeface-plain);
  --md-sys-typescale-emphasized-headline-large: 600 32px / 40px var(--md-ref-typeface-plain);
  --md-sys-typescale-headline-medium: 400 28px / 36px var(--md-ref-typeface-plain);
  --md-sys-typescale-emphasized-headline-medium: 600 28px / 36px var(--md-ref-typeface-plain);
  --md-sys-typescale-headline-small: 400 24px / 32px var(--md-ref-typeface-plain);
  --md-sys-typescale-emphasized-headline-small: 600 24px / 32px var(--md-ref-typeface-plain);
  --md-sys-typescale-title-large: 400 22px / 28px var(--md-ref-typeface-plain);
  --md-sys-typescale-emphasized-title-large: 600 22px / 28px var(--md-ref-typeface-plain);
  --md-sys-typescale-title-medium: 500 16px / 24px var(--md-ref-typeface-plain);
  --md-sys-typescale-emphasized-title-medium: 700 16px / 24px var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small: 500 14px / 20px var(--md-ref-typeface-plain);
  --md-sys-typescale-emphasized-title-small: 700 14px / 20px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large: 400 16px / 24px var(--md-ref-typeface-plain);
  --md-sys-typescale-emphasized-body-large: 600 16px / 24px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium: 400 14px / 20px var(--md-ref-typeface-plain);
  --md-sys-typescale-emphasized-body-medium: 600 14px / 20px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small: 400 12px / 16px var(--md-ref-typeface-plain);
  --md-sys-typescale-emphasized-body-small: 600 12px / 16px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large: 500 14px / 20px var(--md-ref-typeface-plain);
  --md-sys-typescale-emphasized-label-large: 700 14px / 20px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium: 500 12px / 16px var(--md-ref-typeface-plain);
  --md-sys-typescale-emphasized-label-medium: 700 12px / 16px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small: 500 11px / 16px var(--md-ref-typeface-plain);
  --md-sys-typescale-emphasized-label-small: 700 11px / 16px var(--md-ref-typeface-plain);
  /* 阴影（M3 elevation level1–5，网页版两层阴影） */
  --md-sys-elevation-level1: 0 1px 2px 0 rgb(0 0 0 / .3), 0 1px 3px 1px rgb(0 0 0 / .15);
  --md-sys-elevation-level2: 0 1px 2px 0 rgb(0 0 0 / .3), 0 2px 6px 2px rgb(0 0 0 / .15);
  --md-sys-elevation-level3: 0 1px 3px 0 rgb(0 0 0 / .3), 0 4px 8px 3px rgb(0 0 0 / .15);
  --md-sys-elevation-level4: 0 2px 3px 0 rgb(0 0 0 / .3), 0 6px 10px 4px rgb(0 0 0 / .15);
  --md-sys-elevation-level5: 0 4px 4px 0 rgb(0 0 0 / .3), 0 8px 12px 6px rgb(0 0 0 / .15);
  /* 状态层透明度 */
  --md-sys-state-hover: .08;
  --md-sys-state-focus: .1;
  --md-sys-state-pressed: .1;
  /* 动效：不支持 linear() 的浏览器用 M3 emphasized 缓动 */
  --md-sys-motion-easing-emphasized: cubic-bezier(.2, 0, 0, 1);
  --md-sys-motion-spring-fast-spatial: var(--md-sys-motion-easing-emphasized);
  --md-sys-motion-spring-fast-spatial-duration: 407ms;
  --md-sys-motion-spring-default-spatial: var(--md-sys-motion-easing-emphasized);
  --md-sys-motion-spring-default-spatial-duration: 443ms;
  --md-sys-motion-spring-slow-spatial: var(--md-sys-motion-easing-emphasized);
  --md-sys-motion-spring-slow-spatial-duration: 611ms;
  --md-sys-motion-spring-fast-effects: var(--md-sys-motion-easing-emphasized);
  --md-sys-motion-spring-fast-effects-duration: 150ms;
  --md-sys-motion-spring-default-effects: var(--md-sys-motion-easing-emphasized);
  --md-sys-motion-spring-default-effects-duration: 231ms;
  --md-sys-motion-spring-slow-effects: var(--md-sys-motion-easing-emphasized);
  --md-sys-motion-spring-slow-effects-duration: 327ms;
}
/* 支持 linear() 的浏览器用真正的弹簧曲线（ExpressiveMotionTokens：damping/stiffness 换算） */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --md-sys-motion-spring-fast-spatial: linear(0, 0.0448, 0.1558, 0.3025, 0.4612, 0.6147, 0.7517, 0.8659, 0.9551, 1.0196, 1.0619, 1.0855, 1.0944, 1.0925, 1.0834, 1.0702, 1.0553, 1.0405, 1.027, 1.0155, 1.0064, 0.9996, 0.9951, 0.9924, 0.9912, 0.9911, 0.9918, 0.993, 0.9944, 0.9958, 0.9971, 0.9982, 0.9992, 0.9999, 1.0004, 1.0007, 1);
    --md-sys-motion-spring-default-spatial: linear(0, 0.0253, 0.0889, 0.1755, 0.2737, 0.3752, 0.474, 0.5664, 0.6499, 0.7235, 0.7867, 0.84, 0.8838, 0.9193, 0.9472, 0.9688, 0.985, 0.9967, 1.0049, 1.0102, 1.0133, 1.0148, 1.0152, 1.0147, 1.0136, 1.0123, 1.0108, 1.0092, 1.0077, 1.0064, 1.0051, 1.004, 1.0031, 1.0023, 1.0017, 1.0011, 1);
    --md-sys-motion-spring-slow-spatial: linear(0, 0.0253, 0.0889, 0.1755, 0.2737, 0.3752, 0.474, 0.5664, 0.6499, 0.7235, 0.7867, 0.84, 0.8838, 0.9193, 0.9472, 0.9688, 0.985, 0.9967, 1.0049, 1.0102, 1.0133, 1.0148, 1.0152, 1.0147, 1.0136, 1.0123, 1.0108, 1.0092, 1.0077, 1.0064, 1.0051, 1.004, 1.0031, 1.0023, 1.0017, 1.0011, 1);
    --md-sys-motion-spring-fast-effects: linear(0, 0.0278, 0.0944, 0.1807, 0.2743, 0.3676, 0.4558, 0.5366, 0.6086, 0.6718, 0.7265, 0.7732, 0.8128, 0.8461, 0.8739, 0.897, 0.9161, 0.9319, 0.9448, 0.9553, 0.9639, 0.9709, 0.9766, 0.9812, 0.9849, 0.9879, 0.9903, 0.9923, 0.9938, 0.9951, 0.9961, 0.9969, 0.9975, 0.998, 0.9984, 0.9988, 1);
    --md-sys-motion-spring-default-effects: linear(0, 0.0278, 0.0943, 0.1805, 0.2741, 0.3673, 0.4555, 0.5362, 0.6082, 0.6714, 0.7261, 0.7729, 0.8125, 0.8458, 0.8737, 0.8968, 0.9159, 0.9317, 0.9446, 0.9552, 0.9638, 0.9708, 0.9765, 0.9812, 0.9849, 0.9879, 0.9903, 0.9922, 0.9938, 0.9951, 0.9961, 0.9969, 0.9975, 0.998, 0.9984, 0.9987, 1);
    --md-sys-motion-spring-slow-effects: linear(0, 0.0279, 0.0944, 0.1807, 0.2744, 0.3677, 0.456, 0.5367, 0.6088, 0.672, 0.7266, 0.7733, 0.8129, 0.8462, 0.874, 0.8971, 0.9162, 0.9319, 0.9448, 0.9554, 0.964, 0.971, 0.9767, 0.9812, 0.985, 0.9879, 0.9904, 0.9923, 0.9938, 0.9951, 0.9961, 0.9969, 0.9975, 0.998, 0.9984, 0.9988, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --md-sys-motion-spring-fast-spatial-duration: 1ms;
    --md-sys-motion-spring-default-spatial-duration: 1ms;
    --md-sys-motion-spring-slow-spatial-duration: 1ms;
    --md-sys-motion-spring-fast-effects-duration: 1ms;
    --md-sys-motion-spring-default-effects-duration: 1ms;
    --md-sys-motion-spring-slow-effects-duration: 1ms;
  }
}
/* 图标：Google 官方 Material Symbols Rounded 可变字体，只含本站用到的图标（ops/yaoniang-site/fetch-symbols.sh 下载，Apache-2.0）。
   用法：<i class="msr" data-icon="sell" aria-hidden="true"></i>。FILL（0 描边 / 1 实心）和 wght（粗细）两根轴能平滑过渡，
   悬停、选中、按下时改 --msr-fill / --msr-wght 就是 M3 的图标状态动画（弹簧曲线同上）。 */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url(/fonts/material-symbols-rounded.woff2?v=20261103) format('woff2');
}
.msr {
  --msr-fill: 0;
  --msr-wght: 400;
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  overflow: hidden;
  font-family: 'Material Symbols Rounded';
  font-size: 24px;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  font-variation-settings: 'FILL' var(--msr-fill), 'wght' var(--msr-wght);
  transition: font-variation-settings var(--md-sys-motion-spring-default-effects-duration) var(--md-sys-motion-spring-default-effects),
    transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
}
.msr[data-icon]::before { content: attr(data-icon); }