/* ============================================================
   Caam 首页 Apple 质感层 (assets/home/apple.v2.css)
   ------------------------------------------------------------
   在 overrides.v1.css 之后加载，纯覆盖式增强，不动 v1 文件。
   回滚方式：删掉 index.html 中本文件的 <link> 即可。

   设计原则（对标 iOS 控制中心 / Apple Stocks）：
   · 玻璃配方：低白度 + blur(40px) saturate(180%) → 背景插画透进玻璃
   · 三线一影：顶部 1px 内高光 / 底部 1px 暖色暗线 / 白描边 / 双层柔投影
   · 排版：三级字重阶梯 + tabular-nums（数字跳动不抖）+ 涨跌胶囊
   · 指数：8 项 4×2 网格（两个镜像容器 display:contents 平铺）
   · TSM 卡：左对齐信息层次 + 近一月走势 sparkline
   · 动效：入场 spring 错峰 / 胶囊弹入 / 走势描边 / 按压回缩
   ============================================================ */

/* ---------- 1. 玻璃材质（v3.9：磨砂回主元素） ---------- */
/* v3.9 关键修复：v3.1 为防 iOS「圆角+毛玻璃同元素」亮边 bug 把 blur 挪到
   ::before（z-index:-1）——但部分 Android Chrome 不渲染负 z 层伪元素的
   backdrop-filter，真机上磨砂完全失效（桌面 Chromium 正常，故本地截图
   一直发现不了）：用户看到的是无模糊白板叠清晰插画，质感全无。
   blur 放回主元素（兼容性最稳位置），Android 优先保生效 */
/* v3 的教训：拆 v2 白边三件套时把「玻璃边缘光语言」也一起拆了——
   只剩磨砂面没有玻璃体，卡片看着是贴纸不是玻璃。
   精致毛玻璃 = 磨砂面（blur+噪点+saturate）+ 玻璃体（上缘受光内高光 /
   下缘厚度暗线 / 上亮下暗的边界描边 / 悬浮投影）。v2 的错不在语言本身
   而在强度（.86 纯白描边在暖粉底上过曝成白圈）；v3.8 按浅底重新配强度。
   v3.1：backdrop-filter 在 ::before（z-index:-1，inset:-1px 外扩采样）——
   防 iOS「圆角+毛玻璃同元素」的圆角亮边 bug */
[data-route="home"] .market-rail--top,
[data-route="home"] .stock{
  background:linear-gradient(168deg,
    rgba(255,253,251,.50) 0%,
    rgba(255,243,238,.34) 46%,
    rgba(255,238,242,.44) 100%);
  /* 玻璃体：上缘受光（亮）、下缘厚度（暖暗线）、左右过渡 */
  border:1px solid rgba(255,255,255,.50);
  border-top-color:rgba(255,255,255,.80);
  border-bottom-color:rgba(160,110,100,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 8px 24px rgba(112,60,60,.10),
    0 1px 2px rgba(112,60,60,.05);
  backdrop-filter:blur(34px) saturate(170%) brightness(1.03);
  -webkit-backdrop-filter:blur(34px) saturate(170%) brightness(1.03);
  border-radius:24px;
}
/* v3.6：TSM 卡毛玻璃质感（第三轮，正解）——
   用户要的「透明」是磨砂透（背景内容糊糊透进来），不是低白度。
   毛玻璃质感的物理前提是「卡后有内容可磨」：TSM 卡区域在插画
   .artwork（height:64%）覆盖范围之外、只有素色底，磨砂磨不出东西。
   解法：新增 .artwork-ext 光斑层（插画同色系柔和 bokeh，纯 CSS，
   不动人物构图），垫在 TSM 卡后给磨砂提供内容；白度从 v3.5 的
   18/10/12 回抬到 34/22/26——毛玻璃需要体感，太透反而没玻璃 */
[data-route="home"] .artwork-ext{
  position:absolute;left:0;right:0;top:52%;height:44%;z-index:0;pointer-events:none;
  background:
    radial-gradient(140px 100px at 16% 26%, rgba(242,183,192,.60), transparent 70%),
    radial-gradient(170px 120px at 80% 18%, rgba(246,196,174,.52), transparent 70%),
    radial-gradient(190px 140px at 42% 62%, rgba(238,196,208,.48), transparent 72%),
    radial-gradient(110px 90px at 92% 58%, rgba(201,184,220,.42), transparent 70%),
    radial-gradient(130px 95px at 60% 92%, rgba(242,183,192,.40), transparent 72%);
  filter:blur(2px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 80%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 80%,transparent 100%);
}
/* 横屏下插画是侧栏，光斑层不参与 */
[data-route="home"][data-orientation="landscape"] .artwork-ext{display:none}
[data-route="home"] .stock{
  background:linear-gradient(168deg,
    rgba(255,251,248,.34) 0%,
    rgba(252,240,244,.22) 46%,
    rgba(250,237,245,.26) 100%);
  border-color:rgba(255,255,255,.38);
  border-top-color:rgba(255,255,255,.62);
  border-bottom-color:rgba(160,110,100,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 8px 22px rgba(112,60,60,.10),
    0 1px 2px rgba(112,60,60,.05);
}
[data-route="home"] .stock::after{opacity:.8}
/* v3.7：指数卡回实——信息密度定白度：8 组行情数字是仪表盘，可读性优先；
   v3 起两卡共用低白度配方，插画元素（头发/圆盘/气泡）直透数字底下干扰识读。
   白度提到 74/62/68：插画磨成隐约粉晕（毛玻璃质感保留），数字稳；TSM 卡保持轻透作氛围担当 */
[data-route="home"] .market-rail--top{
  /* v3.12 再轻一档：跑马灯单行后信息密度降级，白度 74/62/68 → 64/52/58 */
  background:linear-gradient(168deg,
    rgba(255,252,250,.64) 0%,
    rgba(255,245,240,.52) 46%,
    rgba(255,240,244,.58) 100%);
}
/* 噪点颗粒：覆盖 v1 的「高光扫过」层（screen 白渐变在浅底上无效），
   ~2.5% 暖棕颗粒消除大色块塑料感；inset:1px 防颗粒溢出圆角 */
[data-route="home"] .market-rail--top::after,
[data-route="home"] .stock::after{
  content:"";position:absolute;inset:1px;border-radius:inherit;
  pointer-events:none;mix-blend-mode:normal;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.2 0 0 0 0 0.18 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
/* 不支持毛玻璃的内核：回到高白度实底，不破相 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  [data-route="home"] .market-rail--top,
  [data-route="home"] .stock{
    background:rgba(255,248,245,.93);
    backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(prefers-reduced-transparency:reduce){
  [data-route="home"] .market-rail--top,
  [data-route="home"] .stock{
    background:rgba(255,244,240,.82);
    backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* 按压回缩（苹果「捏下去」手感） */
[data-route="home"] .market-rail--top:active,
[data-route="home"] .stock:active{transform:scale(.985)}
[data-route="home"] .market-rail--top,
[data-route="home"] .stock{
  transition:transform .28s cubic-bezier(.32,.72,0,1),box-shadow .28s cubic-bezier(.32,.72,0,1)}

/* ---------- 2. 指数区：4×2 网格 + 三层排版 ---------- */
/* scaler 原单列 track 为 auto，会被网格内容的 max-content 撑破视口；
   收紧为可收缩列，所有卡片一律以可用宽度为准 */
[data-route="home"] .information-scaler{
  grid-template-columns:minmax(0,1fr);
}
[data-route="home"] .market-rail--top{
  /* v3.11 单行跑马灯：卡片降为裁切视口，内容一行循环滚动 */
  display:block;
  overflow:hidden;
  padding:clamp(10px,1.8vh,15px) clamp(12px,2.2vh,17px);
}
/* 主轨道：两份内容拼接，translateX(-50%) 无缝循环 */
[data-route="home"] .market-rail--top > .indices{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:ix-marquee 26s linear infinite;
}
/* 移动镜像容器不再参与布局（数据已并入主轨道） */
[data-route="home"] .market-rail--top > .indices-cn-mobile{display:none !important}
[data-route="home"] .market-rail--top{
  min-width:0;max-width:100%;
}
@keyframes ix-marquee{to{transform:translateX(-50%)}}
/* 桌面悬停暂停 */
@media(hover:hover){
  [data-route="home"] .market-rail--top:hover > .indices{animation-play-state:paused}
}
[data-route="home"] .market-rail--top .indices > span,
[data-route="home"] .market-rail--top .ix{
  grid-column:auto !important;
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  text-align:left;min-width:0;white-space:nowrap;
  margin-right:30px;
}
[data-route="home"] .market-rail--top .ix > i,
[data-route="home"] .indices > span > i{
  font-style:normal;font-size:clamp(9.5px,1.3vh,11px);font-weight:500;
  color:rgba(70,55,55,.52);letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
[data-route="home"] .market-rail--top .ix > b,
[data-route="home"] .indices > span > b{
  font-size:clamp(12px,1.78vh,14.5px);font-weight:650;color:#241d22;
  font-variant-numeric:tabular-nums;letter-spacing:-.15px;line-height:1.1;
  min-width:0;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
/* 涨跌胶囊（红=跌 / 绿=涨，沿用全站语义色） */
[data-route="home"] .indices .pill,
[data-route="home"] .stock .pill{
  display:inline-flex;align-items:center;
  padding:2px 7px;border-radius:999px;
  font-size:clamp(9.5px,1.4vh,12px);font-weight:650;
  font-variant-numeric:tabular-nums;line-height:1.35;
  font-style:normal;letter-spacing:.01em;
}
/* v3.10 指数卡胶囊扁平化：去底块改纯彩色文字，化解 8 色块的拥挤感（TSM 卡胶囊不受影响） */
[data-route="home"] .market-rail--top .indices .pill{
  background:transparent;padding:0;
  font-size:clamp(9.5px,1.28vh,11px);font-weight:600;
}
[data-route="home"] .pill.up{background:rgba(22,160,133,.13);color:#0e7d68}
[data-route="home"] .pill.dn{background:rgba(214,69,69,.12);color:#c03434}
[data-route="home"] .pill.zz{background:rgba(60,40,40,.07);color:rgba(70,55,55,.5)}
[data-route="home"] .pill.lg{font-size:clamp(12px,1.8vh,15px);padding:4px 11px}
[data-route="home"] .pill.pop{animation:pill-pop .55s cubic-bezier(.34,1.56,.64,1) both}
@keyframes pill-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}

/* v3.12 涨跌发光：3s 轮询检测到价格变化时，数值闪对应色光后消退 */
[data-route="home"] .ix.glow-up > b{animation:ix-glow-up 1.5s ease-out}
[data-route="home"] .ix.glow-dn > b{animation:ix-glow-dn 1.5s ease-out}
@keyframes ix-glow-up{
  0%{color:#0e7d68;text-shadow:0 0 16px rgba(22,160,133,.95),0 0 5px rgba(22,160,133,.55)}
  100%{color:#241d22;text-shadow:0 0 0 rgba(22,160,133,0)}
}
@keyframes ix-glow-dn{
  0%{color:#c03434;text-shadow:0 0 16px rgba(214,69,69,.95),0 0 5px rgba(214,69,69,.55)}
  100%{color:#241d22;text-shadow:0 0 0 rgba(214,69,69,0)}
}

/* ---------- 3. TSM 卡：左对齐层次 + sparkline ---------- */
[data-route="home"] .stock{
  text-align:left;align-items:stretch;
  padding:clamp(11px,1.9vh,17px) clamp(14px,2.2vh,20px) clamp(10px,1.6vh,14px);
}
[data-route="home"] .stock-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
}
[data-route="home"] .stock h2{
  font-size:clamp(17px,2.9vh,23px);line-height:1.15;margin:0;
  letter-spacing:.2px;
}
[data-route="home"] .stock-name{
  display:block;font-size:clamp(10px,1.5vh,12.5px);font-weight:500;
  color:rgba(70,55,55,.55);margin-top:2px;letter-spacing:.02em;
}
[data-route="home"] .stock-row{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin-top:clamp(4px,.9vh,9px);
}
[data-route="home"] .price{
  font-size:clamp(33px,6vh,54px);font-weight:750;line-height:1.04;
  letter-spacing:-.6px;font-variant-numeric:tabular-nums;color:#1c171d;
}
[data-route="home"] .change{
  font-size:clamp(13px,2.2vh,17px);font-weight:650;margin:0;
  font-variant-numeric:tabular-nums;line-height:1.2;
}
[data-route="home"] .change .chg-lab{
  font-size:.78em;font-weight:500;color:rgba(70,55,55,.5);margin-left:1px;
}
[data-route="home"] .change.up{color:#0e7d68}
[data-route="home"] .change.down{color:#c03434}
[data-route="home"] .spark{
  display:block;width:100%;height:clamp(42px,6.6vh,56px);
  margin-top:clamp(7px,1.3vh,12px);overflow:visible;
}
[data-route="home"] .spark-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-route="home"] .spark.up .spark-line{stroke:#0e7d68}
[data-route="home"] .spark.down .spark-line{stroke:#c03434}
[data-route="home"] .spark.up .spark-dot{fill:#0e7d68}
[data-route="home"] .spark.down .spark-dot{fill:#c03434}
[data-route="home"] .spark.up .spark-grad-a{stop-color:rgba(22,160,133,.10)}
[data-route="home"] .spark.up .spark-grad-b{stop-color:rgba(22,160,133,0)}
[data-route="home"] .spark.down .spark-grad-a{stop-color:rgba(214,69,69,.10)}
[data-route="home"] .spark.down .spark-grad-b{stop-color:rgba(214,69,69,0)}
[data-route="home"] .stock-meta{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  margin-top:clamp(6px,1.1vh,10px);
  font-size:clamp(9.5px,1.4vh,11.5px);color:rgba(70,55,55,.52);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
[data-route="home"] .stock-meta .meta-range{flex:none}
/* v3.20 「刷新中」呼吸灯：左半区 = 小圆点 + 时间戳 */
[data-route="home"] .stock-meta .meta-left{display:inline-flex;align-items:center;gap:5px;min-width:0}
[data-route="home"] .tick-dot{
  flex:none;width:5px;height:5px;border-radius:50%;
  background:rgba(70,55,55,.22);
  transition:background .25s ease;
}
[data-route="home"] .tick-dot.pulse{animation:tick-pulse .9s ease-out}
@keyframes tick-pulse{
  0%{background:#1fa98a;box-shadow:0 0 0 0 rgba(31,169,138,.5)}
  60%{background:#1fa98a;box-shadow:0 0 0 4px rgba(31,169,138,0)}
  100%{background:rgba(70,55,55,.22);box-shadow:0 0 0 0 rgba(31,169,138,0)}
}
@media(prefers-reduced-motion:reduce){
  [data-route="home"] .tick-dot.pulse{animation:none;background:#1fa98a}
}
[data-route="home"] .after{
  margin-top:clamp(6px,1.1vh,10px);
  font-size:clamp(11px,1.7vh,14px);color:rgba(70,55,55,.6);
  font-variant-numeric:tabular-nums;
}
/* 旧的居中排印全部让位 */
[data-route="home"] .stock h2{color:#241d22;letter-spacing:.2px}
[data-route="home"] .price{text-shadow:none}

/* ---------- 4. 按钮区与标题微调 ---------- */
[data-route="home"] .buttons > a:not(.news-btn){
  box-shadow:0 8px 22px rgba(30,20,25,.26),
             inset 0 1px 0 rgba(255,255,255,.2),
             inset 0 -1px 0 rgba(0,0,0,.3);
}
[data-route="home"] .portfolio-btn{
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 3px 12px rgba(96,56,64,.1),inset 0 1px 0 rgba(255,255,255,.85);
}
[data-route="home"] .floating-btn{
  box-shadow:0 4px 14px rgba(96,56,64,.13),inset 0 1px 0 rgba(255,255,255,.85);
}

/* ---------- 5. 入场动效（错峰 spring 上浮） ---------- */
[data-route="home"] .market-rail--top,
[data-route="home"] .hero-title,
[data-route="home"] .stock,
[data-route="home"] .buttons,
[data-route="home"] .market-rail--bottom{
  animation:home-rise .7s cubic-bezier(.32,.72,0,1) both;
}
[data-route="home"] .market-rail--top{animation-delay:.02s}
[data-route="home"] .hero-title{animation-delay:.09s}
[data-route="home"] .stock{animation-delay:.16s}
[data-route="home"] .buttons{animation-delay:.23s}
[data-route="home"] .market-rail--bottom{animation-delay:.3s}
@keyframes home-rise{
  from{opacity:0;transform:translateY(16px) scale(.985)}
  to{opacity:1;transform:none}
}
/* 走势描边由 JS 依赖 stroke-dashoffset 完成；此处只做透明度配合 */
[data-route="home"] .spark-area{transition:opacity .7s ease .3s}

@media(prefers-reduced-motion:reduce){
  [data-route="home"] .market-rail--top,
  [data-route="home"] .hero-title,
  [data-route="home"] .stock,
  [data-route="home"] .buttons,
  [data-route="home"] .market-rail--bottom{animation:none}
  [data-route="home"] .pill.pop{animation:none}
  /* v3.11 跑马灯降级：停自动滚动，改手动横滑 */
  [data-route="home"] .market-rail--top > .indices{animation:none}
  [data-route="home"] .market-rail--top{overflow-x:auto}
  [data-route="home"] .ix.glow-up > b,
  [data-route="home"] .ix.glow-dn > b{animation:none}
}

/* v3.13 跨内核跨设备防御（2026-09-12）：iOS Safari 真机在横竖屏切换/系统大字体设置下会自动放大
   文本（text-size-adjust），nowrap 行被撑破容器、右侧被挤满——桌面模拟无法复现，主动关闭；
   overflow-x 兜底裁掉任何未知超宽元素（clip 不产生滚动容器，hidden 供旧内核回退） */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
/* 实测定案：html 上的 clip/hidden 对流内溢出无效（传播后 used=visible），body 才是有效裁切层 */
body{overflow-x:hidden;overflow-x:clip}

/* ---------- v3.14 横屏重排（2026-09-12）：竖屏保持「标题→卡片→按钮」原序，
   横屏把 Caam 品牌行移到 TSM 卡与 Blog 之间，左列节奏变为 数据→品牌→行动 ----------
   scaler 是单列 grid，grid item 原生支持 order；只动横屏钩子，DOM 不动 */
[data-route="home"][data-orientation="landscape"] .market-rail--top{order:0}
[data-route="home"][data-orientation="landscape"] .stock{order:1}
[data-route="home"][data-orientation="landscape"] .hero-title{order:2}
[data-route="home"][data-orientation="landscape"] .buttons{order:3}

/* ---------- v3.15 横屏时钟归位（2026-09-12）----------
   NYT/BJS 时钟移到用户头像右侧（hero 内联竖排）；
   底栏在横屏下只剩时钟且被 order:0 顶到跑马灯下方，直接隐藏 */
[data-route="home"] .clocks--inline{display:none}
[data-route="home"][data-orientation="landscape"] .clocks--inline{
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  font-size:12px;line-height:1.35;text-align:left;white-space:nowrap;margin-left:2px}

/* ---------- v3.16 横屏 hero 行居中 + 行距呼吸（2026-09-12）----------
   v3.15 的左对齐在真机上使 hero 行几乎满宽、与 Blog 行挤成一块；
   用户拍板恢复居中；另横屏 grid gap 在小高度下触底 5px，
   hero→Blog 行额外加 10px 垂直间距缓解「模拟仓与 Blog 胶囊贴太近」 */
[data-route="home"][data-orientation="landscape"] .hero-title{justify-content:center;flex-wrap:wrap}
[data-route="home"][data-orientation="landscape"] .buttons{margin-top:10px}
[data-route="home"][data-orientation="landscape"] .market-rail--bottom{display:none}

/* ---------- v3.17 首页行情卡自定义标的（2026-09-12）----------
   卡片右上角切换按钮 + 选择面板。按钮仅登录用户可见（JS 控制 hidden）。
   面板复用全站 glass 观感，避免与已有 portfolio-panel 视觉冲突。 */
[data-route="home"] .stock-head-right{
  display:flex;align-items:center;gap:8px;flex:none;
}
[data-route="home"] .card-edit{
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(24px,3.4vh,28px);height:clamp(24px,3.4vh,28px);
  border:none;border-radius:50%;cursor:pointer;padding:0;
  background:rgba(96,56,64,.07);color:rgba(70,55,55,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
  transition:background .18s ease,color .18s ease,transform .18s ease;
  -webkit-tap-highlight-color:transparent;
}
/* 必须显式声明：上面的 inline-flex 会盖掉 UA 默认的 [hidden]{display:none} */
[data-route="home"] .card-edit[hidden]{display:none}
[data-route="home"] .card-edit svg{width:58%;height:58%;fill:currentColor}
[data-route="home"] .card-edit:hover{background:rgba(96,56,64,.13);color:rgba(70,55,55,.86)}
[data-route="home"] .card-edit:active{transform:scale(.92)}

/* 选择面板 */
.card-picker{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  background:rgba(40,28,32,.34);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:20px;
}
.card-picker[hidden]{display:none}
.card-picker-box{
  width:min(360px,100%);
  background:rgba(251,247,240,.97);
  border-radius:22px;padding:16px 16px 14px;
  box-shadow:0 18px 48px rgba(30,20,25,.28),inset 0 1px 0 rgba(255,255,255,.7);
  display:flex;flex-direction:column;gap:12px;
  animation:picker-in .28s cubic-bezier(.32,.72,0,1) both;
}
@keyframes picker-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.card-picker-box{animation:none}}
.card-picker-head{display:flex;align-items:center;justify-content:space-between}
.card-picker-head strong{font-size:15px;color:#241d22;letter-spacing:.2px}
.card-picker-x{
  width:26px;height:26px;border:none;background:transparent;cursor:pointer;padding:0;
  color:rgba(70,55,55,.55);display:inline-flex;align-items:center;justify-content:center;
}
.card-picker-x svg{width:18px;height:18px;fill:currentColor}
.card-picker-x:hover{color:rgba(70,55,55,.9)}
.card-picker-input{
  width:100%;box-sizing:border-box;
  padding:11px 13px;border-radius:13px;border:1px solid rgba(96,56,64,.16);
  font-size:15px;font-weight:600;letter-spacing:.4px;color:#241d22;
  background:rgba(255,255,255,.85);outline:none;
  font-variant-numeric:tabular-nums;text-transform:uppercase;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.card-picker-input::placeholder{text-transform:none;font-weight:500;letter-spacing:0;color:rgba(70,55,55,.42)}
.card-picker-input:focus{border-color:rgba(96,56,64,.4);box-shadow:0 0 0 3px rgba(96,56,64,.09)}
.card-picker-preview{
  min-height:38px;display:flex;align-items:center;flex-wrap:wrap;gap:7px;
  font-size:13px;color:rgba(70,55,55,.7);font-variant-numeric:tabular-nums;
}
.card-picker-preview .muted{color:rgba(70,55,55,.45)}
.card-picker-preview .sym{font-weight:700;color:#241d22;letter-spacing:.3px}
.card-picker-preview .nm{color:rgba(70,55,55,.62)}
.card-picker-preview .up{color:#0e7d68;font-style:normal;font-weight:600}
.card-picker-preview .dn{color:#c03434;font-style:normal;font-weight:600}
.card-picker-preview.ok{color:#241d22}
.card-picker-preview.bad{color:#c03434;font-weight:600}
.card-picker-chips{display:flex;flex-wrap:wrap;gap:6px}
.card-chip{
  border:none;cursor:pointer;padding:5px 11px;border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.3px;
  color:rgba(70,55,55,.78);background:rgba(96,56,64,.07);
  transition:background .16s ease,color .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.card-chip:hover{background:rgba(96,56,64,.15);color:#241d22}
.card-picker-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
.card-picker-reset{
  border:none;background:transparent;cursor:pointer;padding:6px 2px;
  font-size:12.5px;color:rgba(70,55,55,.6);text-decoration:underline;
  text-decoration-color:rgba(70,55,55,.28);text-underline-offset:3px;
}
.card-picker-reset:hover{color:rgba(70,55,55,.9)}
.card-picker-reset:disabled{opacity:.45;cursor:default}
.card-picker-save{
  border:none;cursor:pointer;padding:9px 22px;border-radius:999px;
  font-size:13.5px;font-weight:650;color:#fff;
  background:linear-gradient(180deg,#6b4550,#543540);
  box-shadow:0 6px 16px rgba(84,53,64,.3),inset 0 1px 0 rgba(255,255,255,.18);
  transition:opacity .18s ease,transform .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.card-picker-save:active{transform:scale(.96)}
.card-picker-save:disabled{opacity:.4;cursor:default;box-shadow:none}

/* ---------- v3.18 实时行情（2026-09-12）：时段标签 + 价格闪色 ----------
   3 秒轮询由后端 /api/me/card-stock/tick 供给，价格变化时数字滚动并发光。 */
[data-route="home"] .stock-row{position:relative}
[data-route="home"] .session-tag{
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:999px;
  font-size:clamp(9.5px,1.35vh,11px);font-weight:650;
  letter-spacing:.04em;line-height:1.4;flex:none;
  align-self:center;margin-right:2px;
}
[data-route="home"] .session-tag[hidden]{display:none}
[data-route="home"] .session-tag.pre{background:rgba(214,150,60,.14);color:#9a6a1e}
[data-route="home"] .session-tag.post{background:rgba(96,86,180,.13);color:#554ea0}
[data-route="home"] .session-tag.closed{background:rgba(60,40,40,.07);color:rgba(70,55,55,.5)}

/* 价格变动闪色：涨绿跌红，600ms 后消退 */
[data-route="home"] .price.flash-up{animation:px-flash-up .6s ease-out}
[data-route="home"] .price.flash-dn{animation:px-flash-dn .6s ease-out}
@keyframes px-flash-up{
  0%{color:#0e7d68;text-shadow:0 0 18px rgba(22,160,133,.55)}
  100%{color:#1c171d;text-shadow:0 0 0 rgba(22,160,133,0)}
}
@keyframes px-flash-dn{
  0%{color:#c03434;text-shadow:0 0 18px rgba(214,69,69,.5)}
  100%{color:#1c171d;text-shadow:0 0 0 rgba(214,69,69,0)}
}
@media(prefers-reduced-motion:reduce){
  [data-route="home"] .price.flash-up,
  [data-route="home"] .price.flash-dn{animation:none}
}
/* 盘后行可能放两段（盘前 · 盘后），允许换行 */
[data-route="home"] .after{line-height:1.5}
[data-route="home"] .after[style*="none"]{display:none}