/* Premium layer (v4): loaded last; presentation only. */
@property --oc-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
html{background:#04111f}
body.portfolio-ocean{background:transparent}
#realOcean{opacity:0;transition:opacity 1.1s ease}
#realOcean.oc-live{opacity:1}

/* ---------- Dive: no captions, only a hairline progress and a quiet skip ---------- */
.ocean-transition-overlay{display:block;padding:0!important;background:transparent!important}
.ocean-transition-overlay .ocean-progress{position:absolute;left:0;right:0;bottom:0;width:auto;height:2px;margin:0;background:#9fd8ee12}
.ocean-transition-overlay .ocean-progress i{background:linear-gradient(90deg,#7fdcff00,#8fe0ff 55%,#f4dba8);box-shadow:0 0 14px #7fd8ffaa}
.ocean-transition-overlay.waiting .ocean-progress i{animation:ocWait 1.4s ease-in-out infinite}
.ocean-transition-overlay .ocean-skip{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:calc(26px + env(safe-area-inset-bottom));margin:0;display:flex;align-items:center;gap:8px;min-height:36px;padding:8px 16px;border-radius:100px;background:#04182a66;border:1px solid #a9d8ea2e;color:#bfdce8;font-size:11px;letter-spacing:.18em;backdrop-filter:blur(10px);opacity:0;animation:ocFadeIn .6s 1.2s forwards;transition:background .25s,border-color .25s}
.ocean-transition-overlay .ocean-skip i{font-style:normal;font-size:14px;letter-spacing:0;transition:transform .25s}
.ocean-transition-overlay .ocean-skip:hover{background:#0b2b4199;border-color:#bfe6f5}
.ocean-transition-overlay .ocean-skip:hover i{transform:translateX(3px)}
@keyframes ocWait{50%{opacity:.35}}
@keyframes ocFadeIn{to{opacity:1}}

/* ---------- Ambient underwater backdrop behind the workspace ---------- */
.portfolio-ocean.ocean-signed-in #ocean-shade{background:linear-gradient(180deg,#010c1714 0%,#010c1740 38%,#01080fa8 100%)}
#ocean-shade:after{background:radial-gradient(120% 90% at 50% 0%,transparent 35%,#010a14b0 100%)}
.portfolio-ocean.ocean-signed-in #ocean-shade:after{opacity:.85}
body[data-ocean-phase=day].ocean-signed-in #ocean-shade{background:linear-gradient(180deg,#021a2c38 0%,#02182a6e 40%,#010d18bf 100%)}
body[data-ocean-phase=morning].ocean-signed-in #ocean-shade,body[data-ocean-phase=sunset].ocean-signed-in #ocean-shade{background:linear-gradient(180deg,#02142426 0%,#0214245c 40%,#010b16b8 100%)}

/* ---------- Glass panels with a cursor spotlight ---------- */
.portfolio-ocean .pnl,.portfolio-ocean .set-pnl,.portfolio-ocean .adm-pnl,.portfolio-ocean .fold-pnl{background:radial-gradient(190px circle at var(--sx,-600px) var(--sy,-600px),#9edcff0f,transparent 42%),linear-gradient(140deg,#14374fcc,#0a2338e0 60%,#081d30eb);border-color:#a8d0e624;box-shadow:0 18px 50px #00081a40,inset 0 1px 0 #d8f2ff12}
.portfolio-ocean .pnl.oc-lit,.portfolio-ocean .set-pnl.oc-lit{border-color:#b4dcee3d}
@media(min-width:900px) and (hover:hover){.portfolio-ocean .pnl,.portfolio-ocean .set-pnl,.portfolio-ocean .adm-pnl,.portfolio-ocean .fold-pnl{background:radial-gradient(190px circle at var(--sx,-600px) var(--sy,-600px),#9edcff10,transparent 42%),linear-gradient(140deg,#14374fb3,#0a2338cf 60%,#081d30dd);backdrop-filter:blur(12px) saturate(1.25);-webkit-backdrop-filter:blur(12px) saturate(1.25)}}
.portfolio-ocean .metrics>div{background:radial-gradient(130px circle at var(--sx,-400px) var(--sy,-400px),#9edcff12,transparent 50%),linear-gradient(135deg,#163950d9,#0b283eeb)}
.portfolio-ocean .pnl.total-pnl{background:radial-gradient(220px circle at var(--sx,-600px) var(--sy,-600px),#f3d9a612,transparent 45%),radial-gradient(90% 140% at 100% 0%,#3d6f8a40,transparent 55%),linear-gradient(118deg,#1a4058f0,#0c2a41ea 58%,#10304ae6);border-color:#e3c48c33;box-shadow:0 24px 60px #00081a55,inset 0 1px 0 #ffeccb1c}
.portfolio-ocean .pnl.total-pnl:before{content:"";display:block;position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 38%,#f6e2b912 47%,#ffffff1a 50%,#f6e2b912 53%,transparent 62%);background-size:250% 100%;background-position:120% 0;animation:ocSheen 11s 2s ease-in-out infinite;border:0;width:auto;height:auto;transform:none}
.portfolio-ocean .total-value{background:linear-gradient(180deg,#fff4dd 15%,#e9c98d 95%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 24px #e2bb7a26)}
.portfolio-ocean .total-value .frac{opacity:.75}
@keyframes ocSheen{0%,70%{background-position:120% 0}100%{background-position:-120% 0}}
.portfolio-ocean .struct{height:6px;border-radius:6px;overflow:hidden;box-shadow:inset 0 1px 2px #0006}
.portfolio-ocean .struct .s1{background:linear-gradient(90deg,#b99559,#f1d49c)}
.portfolio-ocean .struct .s2{background:linear-gradient(90deg,#4f8fb8,#9bd3f0)}
.portfolio-ocean .struct .s3{background:linear-gradient(90deg,#4f9d86,#93dcc3)}
.portfolio-ocean .viz svg polyline,.portfolio-ocean .viz svg path[fill=none]{filter:drop-shadow(0 0 5px #e7c78a40)}

/* ---------- Content entrance ---------- */
.portfolio-ocean .page.oc-enter>*,.portfolio-ocean.ocean-arriving .page.on>*{animation:ocRise .75s cubic-bezier(.2,.75,.2,1) both}
.portfolio-ocean .page.oc-enter>:nth-child(2){animation-delay:.05s}.portfolio-ocean .page.oc-enter>:nth-child(3){animation-delay:.1s}.portfolio-ocean .page.oc-enter>:nth-child(4){animation-delay:.15s}.portfolio-ocean .page.oc-enter>:nth-child(5){animation-delay:.2s}.portfolio-ocean .page.oc-enter>:nth-child(n+6){animation-delay:.25s}
.portfolio-ocean.ocean-arriving .page.on>:nth-child(1){animation-delay:.45s}.portfolio-ocean.ocean-arriving .page.on>:nth-child(2){animation-delay:.55s}.portfolio-ocean.ocean-arriving .page.on>:nth-child(3){animation-delay:.65s}.portfolio-ocean.ocean-arriving .page.on>:nth-child(n+4){animation-delay:.75s}
@keyframes ocRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- Workspace top bar ---------- */
.oc-workspace-top{background:linear-gradient(180deg,#03121fe6,#04172799);border-bottom:0}
.oc-workspace-top:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#8fdcff40 18%,#f1d49c80 50%,#8fdcff40 82%,transparent);background-size:200% 100%;animation:ocHairline 14s linear infinite}
@keyframes ocHairline{to{background-position:-200% 0}}
.oc-brand-mark:before{animation:ocRing 26s linear infinite}
.oc-brand-mark:after{box-shadow:0 0 10px #f1d49ccc;animation:ocPulse 3.2s ease-in-out infinite}
@keyframes ocRing{from{transform:rotate(-32deg)}to{transform:rotate(328deg)}}
@keyframes ocPulse{50%{box-shadow:0 0 3px #f1d49c66;opacity:.75}}
.portfolio-ocean .shell header{background:linear-gradient(180deg,#0a263a66,#0a263a1f);border-bottom:1px solid #bdd9e612}
.portfolio-ocean .hd-title{background:linear-gradient(180deg,#fbf4e6,#e5d1ab);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Time / motion capsule */
.oc-time-widget{display:inline-flex;align-items:center;gap:2px;flex-wrap:nowrap;padding:4px!important;border-radius:100px;background:#04182a8c;border:1px solid #a7d3e626;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #dff5ff12,0 6px 20px #00081a33}
.oc-time-widget #skyIcon{display:grid!important;place-items:center;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,#f1d49c2e,transparent 72%);color:#f1d49c;font-size:14px;flex:none}
.oc-time-widget select,.oc-time-widget button{border:0!important;background:transparent!important;color:#cfe3ec!important;border-radius:100px!important;min-height:28px;transition:background .2s}
.oc-time-widget select:hover,.oc-time-widget button:hover{background:#ffffff0f!important}
.oc-time-widget select option{background:#0a2638;color:#d9ebf2}
.oc-time-widget small{padding:0 10px 0 4px;font-size:10px!important;letter-spacing:.06em;color:#93b8cb!important;font-variant-numeric:tabular-nums;white-space:nowrap}
.oc-time-widget button[aria-pressed=true]{color:#f1d49c!important}

/* ---------- Floating Dock ---------- */
.portfolio-ocean .oc-dock .cnt:empty{display:none}
.portfolio-ocean .oc-dock{padding:10px 14px 9px;border-radius:26px;background:linear-gradient(180deg,#26495d9c,#0a2537d6 55%,#06192af0);border:0;box-shadow:0 22px 60px #00081acc,0 2px 0 #00000040,inset 0 1px 0 #e9f8ff2e;backdrop-filter:blur(28px) saturate(1.7);-webkit-backdrop-filter:blur(28px) saturate(1.7)}
.oc-dock-rim{position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(180deg,#dff4ff59,#9fd2e81f 40%,#f1d49c33);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.oc-dock-sheen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.oc-dock-sheen:before{content:"";position:absolute;top:0;bottom:0;width:30%;left:0;background:linear-gradient(100deg,transparent,#d9f5ff14 45%,#ffffff1f 50%,#d9f5ff14 55%,transparent);transform:translateX(-120%);animation:ocDockSheen 9s 3s ease-in-out infinite}
@keyframes ocDockSheen{0%,72%{transform:translateX(-120%)}100%{transform:translateX(440%)}}
.oc-dock-floor{position:absolute;left:12%;right:12%;bottom:-20px;height:22px;border-radius:50%;background:radial-gradient(ellipse at 50% 0,#79cdf02e,transparent 70%);filter:blur(6px);pointer-events:none}
.oc-dock-indicator{position:absolute;left:0;bottom:4px;width:56px;height:58px;pointer-events:none;transform:translateX(var(--ix,0px));transition:transform .6s cubic-bezier(.34,1.36,.5,1),opacity .3s;opacity:0;z-index:0}
.oc-dock-indicator.on{opacity:1}
.oc-dock-indicator:before{content:"";position:absolute;left:4px;right:4px;bottom:6px;height:40px;border-radius:50%;background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--ic,#f1d49c) 42%,transparent),transparent 70%);filter:blur(4px)}
.oc-dock-indicator:after{content:"";position:absolute;left:50%;bottom:0;width:18px;height:3px;margin-left:-9px;border-radius:3px;background:var(--ic,#f1d49c);box-shadow:0 0 10px var(--ic,#f1d49c),0 0 22px color-mix(in srgb,var(--ic,#f1d49c) 60%,transparent)}
.portfolio-ocean .oc-dock nav{position:relative;z-index:1}
.portfolio-ocean .oc-dock nav button.dock-active:after{display:none}
.portfolio-ocean .oc-dock nav button .oc-dock-tile{background:linear-gradient(150deg,color-mix(in srgb,var(--dock-color) 24%,#123247),#0a2235 78%);border-color:color-mix(in srgb,var(--dock-color) 26%,#c5dce71a);box-shadow:0 6px 14px #00081a55,inset 0 1px 0 #ffffff1f,inset 0 -6px 12px #00000026;transition:transform .17s ease-out,box-shadow .25s,border-color .25s,background .25s}
.portfolio-ocean .oc-dock nav button .oc-dock-tile:after{background:linear-gradient(160deg,#ffffff26,transparent 48%)}
.portfolio-ocean .oc-dock nav button .ic svg{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--dock-color) 45%,transparent))}
.portfolio-ocean .oc-dock nav button:hover .oc-dock-tile,.portfolio-ocean .oc-dock nav button:focus-visible .oc-dock-tile{border-color:color-mix(in srgb,var(--dock-color) 55%,transparent);background:linear-gradient(150deg,color-mix(in srgb,var(--dock-color) 38%,#173a50),#0c2a40 80%);box-shadow:0 10px 26px color-mix(in srgb,var(--dock-color) 28%,transparent),inset 0 1px 0 #ffffff2e}
.portfolio-ocean .oc-dock nav button.dock-active .oc-dock-tile{border-color:color-mix(in srgb,var(--dock-color) 60%,transparent);background:linear-gradient(150deg,color-mix(in srgb,var(--dock-color) 42%,#1b3e52),#0d2b40 82%);box-shadow:0 8px 22px color-mix(in srgb,var(--dock-color) 30%,transparent),inset 0 1px 0 #ffffff33}
.oc-dock-divider{align-self:center;width:1px;height:34px;margin:0 7px 6px;background:linear-gradient(180deg,transparent,#a9d3e64d,transparent);flex:none}
.oc-dock-tooltip{background:#071d2ef0;border-color:#a9d6ea38;letter-spacing:.06em;box-shadow:0 10px 26px #00081a80}
@media(max-width:899px){.oc-dock-divider{display:none}.portfolio-ocean .oc-dock{padding:6px 8px 7px;border-radius:24px}.oc-dock-indicator{bottom:6px;width:var(--iw,72px);height:58px}.oc-dock-indicator:before{left:0;right:0;bottom:0;top:0;height:auto;border-radius:16px;filter:none;background:linear-gradient(160deg,color-mix(in srgb,var(--ic,#f1d49c) 20%,#ffffff0a),#ffffff05);box-shadow:inset 0 1px 0 #ffffff1c,0 0 0 1px color-mix(in srgb,var(--ic,#f1d49c) 22%,transparent)}.oc-dock-indicator:after{bottom:-4px;width:14px;margin-left:-7px;height:2px}.oc-dock-floor{display:none}}

/* ---------- Login landing hero ---------- */
.oc-gate-intro>*{animation:ocHeroIn 1.15s cubic-bezier(.2,.75,.2,1) both}
.oc-gate-intro>.oc-eyebrow{animation-delay:.1s}.oc-gate-intro>p{animation-delay:.75s}.oc-gate-intro>div:not(.oc-eyebrow):not(.oc-gate-features){animation-delay:.9s}.oc-gate-intro>.oc-gate-features{animation-delay:1.05s}
.oc-gate-intro>h1{animation:ocHeadline 1.3s .22s cubic-bezier(.2,.8,.15,1) both!important;background:linear-gradient(180deg,#fffaf0 25%,#e3cfa6 125%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 4px 30px #0013238c)}
@keyframes ocHeadline{from{opacity:0;transform:translateY(26px) scale(.985);filter:blur(10px) drop-shadow(0 4px 30px #0013238c)}to{opacity:1;transform:none;filter:blur(0) drop-shadow(0 4px 30px #0013238c)}}
@keyframes ocHeroIn{from{opacity:0;transform:translateY(20px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.oc-eyebrow{display:flex;align-items:center;gap:14px}
.oc-eyebrow:before{content:"";width:34px;height:1px;background:linear-gradient(90deg,#f1d49c,transparent);flex:none}
.oc-primary{isolation:isolate;overflow:hidden;border-color:#e5c99466;background:linear-gradient(140deg,#1b4a62e6,#082438f2)}
.oc-primary:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;background:conic-gradient(from var(--oc-angle),#f1d49c33,#f6dfae 12%,#f1d49c33 26%,#8fdcff55 50%,#f1d49c33 74%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:ocSpin 5s linear infinite}
.oc-primary:after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:30%;z-index:-1;background:linear-gradient(90deg,transparent,#fff3d626,transparent);transform:translateX(-160%) skewX(-22deg);animation:ocBtnSweep 5.5s 2.4s ease-in-out infinite}
@keyframes ocSpin{to{--oc-angle:360deg}}
@keyframes ocBtnSweep{0%,62%{transform:translateX(-160%) skewX(-22deg)}100%{transform:translateX(520%) skewX(-22deg)}}
.oc-gate-features span{position:relative}
.oc-gate-features span:before{content:"";position:absolute;top:-1px;left:0;width:22px;height:1px;background:linear-gradient(90deg,transparent,#fff2d4,transparent);animation:ocTrace 4.8s ease-in-out infinite;opacity:0}
.oc-gate-features span:nth-child(2):before{animation-delay:1.6s}.oc-gate-features span:nth-child(3):before{animation-delay:3.2s}
@keyframes ocTrace{0%{left:0;opacity:0}15%{opacity:1}55%{left:calc(100% - 22px);opacity:0}100%{left:calc(100% - 22px);opacity:0}}

@media(prefers-reduced-motion:reduce){#realOcean{transition:none}.oc-gate-intro>*,.portfolio-ocean .page.oc-enter>*,.portfolio-ocean.ocean-arriving .page.on>*{animation:none!important}.oc-primary:before,.oc-primary:after,.oc-gate-features span:before,.oc-dock-sheen:before,.oc-workspace-top:after,.oc-brand-mark:before,.oc-brand-mark:after,.portfolio-ocean .pnl.total-pnl:before,.ocean-transition-overlay .ocean-skip{animation:none!important}.ocean-transition-overlay .ocean-skip{opacity:1}.oc-dock-indicator{transition:none}}
/* Logout confirmation */
dialog.oc-confirm{width:min(340px,calc(100vw - 40px));padding:0;border:1px solid #b9dcec33;border-radius:18px;background:linear-gradient(150deg,#163a50f2,#081d30f7);color:#e4eff4;box-shadow:0 30px 80px #000a18a6,inset 0 1px 0 #e0f6ff22}
dialog.oc-confirm::backdrop{background:#010a14a6;backdrop-filter:blur(6px)}
dialog.oc-confirm[open]{animation:ocConfirmIn .28s cubic-bezier(.2,.9,.3,1.2)}
@keyframes ocConfirmIn{from{opacity:0;transform:translateY(8px) scale(.97)}}
.oc-confirm-body{padding:24px 22px 18px}.oc-confirm-body b{font-size:17px;font-weight:500;letter-spacing:.04em}.oc-confirm-body p{margin:8px 0 20px;font-size:12px;color:#a6c4d4;line-height:1.7}
.oc-confirm-acts{display:flex;gap:10px}.oc-confirm-acts button{flex:1;min-height:44px;border-radius:100px;border:1px solid #a9d3e633;background:#ffffff0a;color:#d5e7ef;font-size:13px;cursor:pointer;transition:background .2s,border-color .2s}
.oc-confirm-acts button:hover{background:#ffffff14}.oc-confirm-acts .primary{background:linear-gradient(120deg,#8c3a48,#5d2333);border-color:#f0a0aa66;color:#ffe9ec}.oc-confirm-acts .primary:hover{background:linear-gradient(120deg,#a2434f,#6c2a3a)}.oc-confirm-acts button:disabled{opacity:.7;cursor:progress}
.oc-confirm-body small{display:block;min-height:16px;margin-top:10px;font-size:11px;color:#f2a2aa}
@media(prefers-reduced-motion:reduce){dialog.oc-confirm[open]{animation:none}}