/* 木兰朵酒庄 · 智慧农业大屏 —— 全局样式与动画 */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* —— 自适应：1920×1080 舞台整体等比缩放居中，适配任意分辨率 PC —— */
html, body { width: 100%; height: 100%; overflow: hidden; background: #05100e; }
/* #mldStage 的缩放/定位由 autofit.js 写入内联样式（position/left/top/transform） */

@keyframes mld-pulse   { 0%, 100% { opacity: 1; }   50% { opacity: .25; } }
@keyframes mld-scan    { 0% { transform: translateY(-100%); } 100% { transform: translateY(2200%); } }
@keyframes mld-ticker  { 0% { transform: translateX(0); }     100% { transform: translateX(-50%); } }
@keyframes mld-breathe { 0%, 100% { opacity: .5; } 50% { opacity: .85; } }
@keyframes mld-vscroll { 0% { transform: translateY(0); }     100% { transform: translateY(-50%); } }
@keyframes mld-hscroll { 0% { transform: translateX(0); }     100% { transform: translateX(-50%); } }
@keyframes mld-rot     { 0% { transform: rotate(0); }         100% { transform: rotate(360deg); } }
@keyframes mld-flow    { from { stroke-dashoffset: 0; }       to { stroke-dashoffset: -44; } }

/* —— 物流发货流向 · 小货车车队循环动画（位于地图上方外侧的独立横带·自右向左行驶） —— */
.mld-truckway       { position: relative; flex: 0 0 auto; height: 26px; margin-bottom: 2px; pointer-events: none; overflow: hidden; }
.mld-truckway-road  { position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
  background-image: repeating-linear-gradient(90deg, rgba(207,90,51,0.5) 0 14px, transparent 14px 26px);
  background-size: 26px 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  animation: mld-roadflow 1.15s linear infinite; }
.mld-truckway-track { position: absolute; left: 0; bottom: 0; display: flex; width: 200%;
  animation: mld-truck-run 9s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.mld-truck          { flex: 0 0 calc(100% / 6); display: flex; justify-content: center; }
.mld-truck svg      { width: 36px; height: auto; transform: scaleX(-1); filter: drop-shadow(0 0 5px rgba(207,90,51,0.45)); }
@keyframes mld-truck-run { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes mld-roadflow  { from { background-position-x: 0; }     to { background-position-x: -26px; } }

/* —— 天气动画 —— */
@keyframes mld-wx-drift    { from { transform: translateX(0); } to { transform: translateX(140vw); } }
/* 注意：关键帧不要写 opacity，否则会覆盖 JS 设的 opacity:0，导致非晴天太阳光晕仍显示 */
@keyframes mld-wx-sunpulse { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.06); filter: brightness(1.16); } }
/* 右上角天气区域：可点击切换 */
.mld-sky-toggle { cursor: pointer; transition: background .25s ease, box-shadow .25s ease; border-radius: 6px; }
.mld-sky-toggle:hover { background: rgba(127,176,163,0.08); box-shadow: 0 0 0 1px rgba(127,176,163,0.18); }
.mld-sky-toggle:active { transform: translateY(1px); }

/* ===================================================================== */
/* 实时订单流 · LIVE ORDER STREAM —— 局部作用域样式（仅作用于 #mldOrderStream） */
/* ===================================================================== */
#mldOrderStream{
  /* 配色变量局部化，避免污染其它面板 */
  --mos-bg-card:    rgba(9,44,43,0.72);
  --mos-border:     rgba(111,222,205,0.22);
  --mos-active:     rgba(255,125,58,0.85);
  --mos-text:       #d9f3ee;
  --mos-sub:        #7fa19b;
  --mos-orange:     #ff7a3a;
  --mos-gold:       #f6c56a;
  --mos-cyan:       #7ee4d2;
  position:relative; z-index:1;
  flex:1 1 0; min-height:0;
  display:flex; flex-direction:column;
  font-family:'Noto Sans SC',sans-serif;
  color:var(--mos-text);
}

/* ---- 标题行 ---- */
.mos-head{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding:0 18px;margin-bottom:12px}
.mos-head .bar{flex:0 0 auto;width:4px;height:18px;background:var(--mos-orange);border-radius:1px;box-shadow:0 0 8px rgba(255,122,58,0.65)}
.mos-head .ttl{flex:0 0 auto;font-family:'Noto Serif SC',serif;font-weight:600;font-size:18px;letter-spacing:3px;color:#eef4f0;white-space:nowrap}
.mos-head .en{font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;font-size:11px;letter-spacing:2px;color:var(--mos-sub);margin-left:8px}
.mos-head .live{margin-left:auto;display:flex;align-items:center;gap:6px;font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;font-size:12px;letter-spacing:2px;color:var(--mos-cyan)}
.mos-head .live i{width:8px;height:8px;border-radius:50%;background:var(--mos-orange);animation:mos-breathe 1.5s ease-in-out infinite}
@keyframes mos-breathe{
  0%,100%{box-shadow:0 0 4px rgba(255,122,58,0.7),0 0 0 0 rgba(255,122,58,0.45);opacity:1}
  50%    {box-shadow:0 0 13px rgba(255,122,58,1),0 0 0 6px rgba(255,122,58,0);opacity:.55}
}

/* ---- 顶部 4 个小数据卡片 ---- */
.mos-stats{flex:0 0 auto;display:grid;grid-template-columns:0.6fr 1fr 1fr;gap:8px;padding:0 18px;margin-bottom:12px}
.mos-stat{position:relative;display:flex;flex-direction:column;gap:5px;justify-content:center;padding:9px 11px;background:var(--mos-bg-card);border:1px solid var(--mos-border);border-radius:4px;box-shadow:inset 0 0 14px rgba(111,222,205,0.05),0 4px 14px rgba(0,0,0,0.22)}
.mos-stat .k{font-size:11px;letter-spacing:.5px;color:var(--mos-sub);white-space:nowrap}
.mos-stat .v{font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;font-size:17px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .2s}
.mos-stat.gold .v{color:var(--mos-gold);text-shadow:0 0 10px rgba(246,197,106,0.32)}
.mos-stat.cyan .v{color:var(--mos-cyan)}
.mos-stat.live{flex-direction:row;align-items:center;justify-content:center;gap:7px;border-color:rgba(255,122,58,0.42);background:linear-gradient(135deg,rgba(255,122,58,0.14),var(--mos-bg-card))}
.mos-stat.live i{width:8px;height:8px;border-radius:50%;background:var(--mos-orange);animation:mos-breathe 1.5s ease-in-out infinite}
.mos-stat.live b{font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;font-size:14px;letter-spacing:2px;color:#ffd8bf}
/* 数值变动：游戏金币式——数字滚动累加 + 短暂高光，配合 JS countUp */
.mos-stat .v.gain{animation:mos-vglow .7s ease}
@keyframes mos-vglow{0%{filter:none}28%{filter:brightness(1.5) drop-shadow(0 0 7px rgba(246,197,106,.75))}100%{filter:none}}
/* 卡片上方冒出的金色 “+增量”，上浮淡出（金币 +N 的感觉） */
.mos-gain{position:absolute;right:11px;top:5px;pointer-events:none;font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.5px;color:var(--mos-gold);text-shadow:0 0 9px rgba(246,197,106,.7);white-space:nowrap;animation:mos-gain-rise 1.05s cubic-bezier(.22,.61,.36,1) forwards}
.mos-gain.cyan{color:var(--mos-cyan);text-shadow:0 0 9px rgba(126,228,210,.65)}
@keyframes mos-gain-rise{0%{opacity:0;transform:translateY(7px) scale(.78)}24%{opacity:1;transform:translateY(0) scale(1.08)}100%{opacity:0;transform:translateY(-17px) scale(1)}}

/* ---- 最新成交 高亮卡片 ---- */
.mos-latest{position:relative;flex:0 0 auto;margin:0 18px 12px;padding:11px 14px;border-radius:5px;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,122,58,0.14),rgba(9,44,43,0.72));
  border:1px solid var(--mos-active);
  box-shadow:0 0 18px rgba(255,122,58,0.25),inset 0 0 18px rgba(255,122,58,0.06)}
.mos-latest.pop{animation:mos-pop .55s cubic-bezier(.22,.61,.36,1)}
@keyframes mos-pop{0%{transform:scale(.985);box-shadow:0 0 26px rgba(255,122,58,0.5),inset 0 0 18px rgba(255,122,58,0.12)}100%{transform:scale(1)}}
/* 横向光扫 */
.mos-latest::after{content:'';position:absolute;top:0;left:0;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,214,178,0.18),transparent);
  transform:translateX(-130%);animation:mos-sweep 3.8s ease-in-out infinite}
@keyframes mos-sweep{0%{transform:translateX(-130%)}55%{transform:translateX(240%)}100%{transform:translateX(240%)}}
.mos-latest .lbl{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;font-size:11px;letter-spacing:2px;color:var(--mos-orange)}
.mos-latest .lbl i{width:6px;height:6px;border-radius:50%;background:var(--mos-orange);box-shadow:0 0 7px var(--mos-orange)}
.mos-latest .row{position:relative;z-index:1;display:flex;align-items:center;gap:12px}
.mos-latest .av{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Noto Serif SC',serif;font-size:19px;color:#fbeee6;box-shadow:0 0 0 1px rgba(255,122,58,0.55),0 0 14px rgba(255,122,58,0.3)}
.mos-latest .mid{flex:1;min-width:0}
.mos-latest .nm{display:flex;align-items:center;gap:8px}
.mos-latest .nm b{font-family:'Noto Sans SC';font-weight:500;font-size:14px;color:#f3e6dc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mos-latest .nm span{flex:0 0 auto;font-size:11px;color:#c2a48f}
.mos-latest .wine{margin-top:3px;font-family:'Noto Serif SC',serif;font-size:12px;color:#d9c3b4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mos-latest .amt{flex:0 0 auto;text-align:right}
.mos-latest .amt b{display:block;font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:26px;line-height:1;color:var(--mos-gold);text-shadow:0 0 14px rgba(246,197,106,0.4);font-variant-numeric:tabular-nums}
.mos-latest .amt span{font-family:'Barlow Semi Condensed',sans-serif;font-size:11px;color:#b78f72}

/* ---- 订单流列表（能量线 + 发光节点） ---- */
.mos-list{position:relative;flex:1 1 0;min-height:0;overflow:hidden;padding:2px 18px 0}
/* 纵向能量线 */
.mos-list::before{content:'';position:absolute;left:25px;top:4px;bottom:4px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(126,228,210,0.04),rgba(126,228,210,0.4) 35%,rgba(126,228,210,0.4) 65%,rgba(126,228,210,0.04))}
.mos-item{position:relative;display:flex;gap:12px;padding:7px 0}
/* 传送带挤压：新行在顶部展开下压、末条在底部塌缩滑出；中间各行随文档流被真实推动，过渡顺滑 */
.mos-item.mos-squeeze{overflow:hidden;will-change:height,opacity,transform;transition:height .44s cubic-bezier(.22,.61,.36,1),opacity .4s ease,transform .44s cubic-bezier(.22,.61,.36,1)}
.mos-item .rail{position:relative;flex:0 0 16px;display:flex;justify-content:center;padding-top:14px}
.mos-item .node{position:relative;width:9px;height:9px;border-radius:50%;background:var(--mos-cyan);box-shadow:0 0 8px var(--mos-cyan)}
.mos-item .node::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:1px solid var(--mos-cyan);opacity:0;animation:mos-ripple 2.4s ease-out infinite}
@keyframes mos-ripple{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.6);opacity:0}}
.mos-item .av{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Noto Serif SC',serif;font-size:16px;color:#fbeee6;box-shadow:0 0 0 1px rgba(200,168,107,0.35)}
.mos-body{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:7px 12px;background:rgba(9,44,43,0.5);border:1px solid var(--mos-border);border-radius:4px}
.mos-body .mid{flex:1;min-width:0}
.mos-body .nm{display:flex;align-items:center;gap:8px}
.mos-body .nm b{font-family:'Noto Sans SC';font-weight:500;font-size:13px;color:#dfeae5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mos-body .nm span{flex:0 0 auto;font-size:11px;color:var(--mos-sub)}
.mos-body .wine{margin-top:2px;font-family:'Noto Serif SC',serif;font-size:12px;color:#9fb8b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mos-body .amt{flex:0 0 auto;text-align:right}
.mos-body .amt b{display:block;font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;font-size:18px;line-height:1;color:#e89a7e;font-variant-numeric:tabular-nums}
.mos-body .amt span{font-family:'Barlow Semi Condensed',sans-serif;font-size:11px;color:var(--mos-sub)}