/* 动态照片海面（living-ocean.js）。只在登录门和登录过场前半段出现，登录后的界面不受影响。 */
#livingOcean{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity .9s ease;display:block}
body.lo-ready #livingOcean{will-change:opacity}
/* 照片盖住时，3D 海面在下面睡觉（real-ocean.js 认 lo-cover），这里再保险藏一下 */
/* 旧的 3D 海面（#realOcean）和 2D 兜底天空（#ocean）从一开始就藏起来（纯 CSS，不等脚本），照片从黑里淡入，不会先闪一下旧海面；
   照片加载失败或带 ?noliving 时脚本给 body 加 lo-off，旧海面再回来 */
body:not(.lo-ready):not(.lo-off) #realOcean,body:not(.lo-ready):not(.lo-off) #ocean,body.lo-cover #realOcean,body.lo-cover #ocean{visibility:hidden}
#livingFish{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s ease}

/* 登录门上的大标题：照片比 3D 海面亮，字后面垫一层很淡的左侧暗角（独立一层，不动登录门自己的布局） */
#livingScrim{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .9s ease;
  background:linear-gradient(90deg,rgba(2,8,18,.55) 0%,rgba(2,8,18,.26) 38%,rgba(2,8,18,0) 62%)}
@media (max-aspect-ratio:1/1){#livingScrim{background:linear-gradient(180deg,rgba(2,8,18,.35),rgba(2,8,18,.1) 45%,rgba(2,8,18,.45))}}

/* 登录框：全息框的结构和动画都保留，只把面板换成磨砂玻璃、按钮换成金色 */
body.lo-ready #oceanAuthDialog.holo-login .login-panel{
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 42%,rgba(8,14,24,.38));
  backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 0 0 1px rgba(255,255,255,.18),0 34px 70px -26px rgba(0,0,0,.85)}
body.lo-ready #oceanAuthDialog.holo-login .login-panel:before{opacity:.35}
body.lo-ready #oceanAuthDialog.holo-login::backdrop{background:radial-gradient(ellipse at 50% 52%,rgba(3,10,20,.18),rgba(1,6,14,.55) 78%);backdrop-filter:blur(3px)}
body.lo-ready #oceanAuthDialog.holo-login .gate-title{background:linear-gradient(100deg,#fff8e6 20%,#f6dfa8 60%,#e8c27a);-webkit-background-clip:text;background-clip:text}
body.lo-ready #oceanAuthDialog.holo-login .field input{background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.18)}
body.lo-ready #oceanAuthDialog.holo-login .field input:focus{border-color:#f0d494;box-shadow:0 0 0 3px rgba(240,212,148,.16),inset 0 1px 8px rgba(0,0,0,.3)}
body.lo-ready #oceanAuthDialog.holo-login #gate-go{background:linear-gradient(180deg,#f6e2a8,#c99a3b 60%,#a77a26);color:#24190a;border-color:rgba(255,236,190,.6);
  font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 26px -8px rgba(201,154,59,.75)}
body.lo-ready #oceanAuthDialog.holo-login #gate-go:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 32px -8px rgba(201,154,59,.9);border-color:#ffe9b8}
@media (prefers-reduced-motion:reduce){#livingOcean{transition:none}}

/* ================= E 今日海况：看板「总资产」卡 =================
   卡片背景换成实时海面（天气跟今日收益走），字改成白色压在暗角上。卡里的数字、横条、图例都不动。 */
.pnl.total-pnl.lo-weather{position:relative;overflow:hidden;isolation:isolate;background:#0b1626;border-color:rgba(255,255,255,.14)}
.total-pnl.lo-weather>.lo-wx-sea,.total-pnl.lo-weather>.lo-wx-ov{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.total-pnl.lo-weather>.lo-wx-sea{z-index:-2;opacity:0;transition:opacity .8s}
.total-pnl.lo-weather.lo-wx-ready>.lo-wx-sea{opacity:1}
.total-pnl.lo-weather>.lo-wx-ov{z-index:-1}
.total-pnl.lo-weather:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,10,20,.66),rgba(4,10,20,.3) 46%,rgba(4,10,20,.5)),linear-gradient(0deg,rgba(4,10,20,.6),transparent 45%),linear-gradient(180deg,rgba(4,10,20,.25),transparent 40%)}
.total-pnl.lo-weather:after{display:none}
body .pnl.total-pnl.lo-weather,body .pnl.total-pnl.lo-weather .cap,body .pnl.total-pnl.lo-weather .x:not(.up):not(.down),
body .pnl.total-pnl.lo-weather .struct-lg,body .pnl.total-pnl.lo-weather .struct-lg span:not(.up):not(.down){color:rgba(236,242,250,.86)!important}
body .pnl.total-pnl.lo-weather .total-value,body .pnl.total-pnl.lo-weather .total-value *{color:#fff!important;-webkit-text-fill-color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5)}
body .pnl.total-pnl.lo-weather b.num:not(.up):not(.down),body .pnl.total-pnl.lo-weather .struct-lg b{color:#fff!important}
body .pnl.total-pnl.lo-weather .up{color:#ff8c8f!important}
body .pnl.total-pnl.lo-weather .down{color:#62e0b4!important}
body .pnl.total-pnl.lo-weather .num{text-shadow:0 1px 6px rgba(0,0,0,.45)}
.total-pnl.lo-weather .total-row>div{border-color:rgba(255,255,255,.18)!important}
.total-pnl.lo-weather .info{color:rgba(236,242,250,.7);border-color:rgba(236,242,250,.4)}
.total-pnl.lo-weather .struct{background:rgba(255,255,255,.14)}
.lo-wx-tag{position:absolute;right:14px;bottom:10px;z-index:1;font-size:11px;letter-spacing:.08em;color:rgba(236,242,250,.75);
  padding:2px 9px;border-radius:999px;background:rgba(4,10,20,.32);border:1px solid rgba(255,255,255,.14);pointer-events:none}

/* ================= D / F 全屏时刻 ================= */
.lo-moment{position:fixed;inset:0;z-index:420;background:#02060c;opacity:0;transition:opacity .6s ease;cursor:pointer;overflow:hidden}
.lo-moment.in{opacity:1}
.lo-moment.out{opacity:0;transition:opacity .65s ease}
.lo-moment canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lo-m-skip{position:absolute;right:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));z-index:3;
  font:inherit;font-size:13px;color:rgba(255,255,255,.85);background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.25);border-radius:999px;
  padding:6px 16px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lo-m-skip:focus-visible{outline:2px solid #f0d494;outline-offset:2px}
.lo-fig{position:absolute;left:0;right:0;top:44%;z-index:2;text-align:center;opacity:0;pointer-events:none;
  transition:top 1.7s cubic-bezier(.2,.9,.2,1),opacity .8s}
.lo-fig.up{top:12%;opacity:1}
.lo-fig small{display:block;font-size:clamp(12px,1.4vw,15px);letter-spacing:.32em;color:rgba(255,255,255,.88);text-shadow:0 1px 4px rgba(0,0,0,.6)}
.lo-fig b{display:block;font-size:clamp(40px,7.2vw,92px);font-weight:700;line-height:1.12;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.lo-fig em{display:block;font-style:normal;font-size:clamp(16px,2.2vw,26px);font-variant-numeric:tabular-nums}
.lo-fig-sub{display:block;margin-top:10px;font-size:clamp(12px,1.2vw,14px);color:rgba(255,255,255,.72);letter-spacing:.06em;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.lo-fig.win b,.lo-fig.win em{color:#fff3d2;text-shadow:0 0 30px rgba(255,170,70,.75),0 2px 5px rgba(70,25,0,.6)}
.lo-fig.lose b,.lo-fig.lose em{color:#e3f3f2;text-shadow:0 0 22px rgba(140,200,210,.35),0 2px 5px rgba(0,0,0,.55)}
.lo-ban{position:absolute;left:50%;top:9%;z-index:2;transform:translate(-50%,-16px) scale(.92);opacity:0;text-align:center;white-space:nowrap;max-width:92vw;
  padding:10px 24px;border-radius:14px;background:linear-gradient(180deg,rgba(247,230,181,.96),rgba(201,154,59,.96));color:#24190a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 34px -10px rgba(201,154,59,.85);transition:.6s cubic-bezier(.2,1.3,.3,1);pointer-events:none}
.lo-ban.on{opacity:1;transform:translate(-50%,0) scale(1)}
.lo-ban b{display:block;font-size:clamp(15px,1.8vw,20px);overflow:hidden;text-overflow:ellipsis}
.lo-ban span{font-size:clamp(13px,1.3vw,15px);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.lo-moment,.lo-fig,.lo-ban{transition:none}}

/* 首屏占位天空（index.html 头部按时间预画的渐变，海平线在 45%）和照片的海平线对不上，交叠时像「影子」：
   用照片海面时把它换成均匀的深海军蓝，照片从暗处淡入 */
html.oc-pre-gate[data-ocean-phase],html[data-ocean-phase]:has(>body:not(.lo-ready):not(.lo-off)),html[data-ocean-phase]:has(>body.ocean-locked:not(.lo-off)){background:#050b14!important}