dialog.portfolio-summary{--result:#66ffda;box-sizing:border-box;width:min(592px,calc((100vw - 24px)*.5),calc((100dvh - 24px)*.76883));height:auto;aspect-ratio:1184/770;max-height:none;padding:0;border:0;border-radius:0;background:transparent;color:#eafaff;overflow:visible;text-align:center;container-type:inline-size;filter:drop-shadow(0 0 5px #008cff55);font-family:'Leelawadee UI',Tahoma,sans-serif}
dialog.portfolio-summary::backdrop{background:#0009;backdrop-filter:blur(5px)}
.portfolio-summary .settlement-inner{--p:calc(100cqw / 1184);position:relative;box-sizing:border-box;width:100%;aspect-ratio:1184/770;background:url('../assets/settlement-frame-v2.svg') center/100% 100% no-repeat}
.portfolio-summary #portfolioSummaryTitle{position:absolute;inset:calc(22 * var(--p)) 6% auto;margin:0;padding:0;font-size:calc(62 * var(--p));font-weight:800;line-height:1.35;color:#effcff;text-shadow:0 0 14px #077ee066}
.portfolio-summary #portfolioSummaryRound{position:absolute;top:calc(158 * var(--p));left:8%;right:8%;margin:0;font-size:calc(32 * var(--p));line-height:1.3;font-weight:700;color:#84a9c6}
.portfolio-summary .settlement-emblem{position:absolute;top:calc(229 * var(--p));left:45%;box-sizing:border-box;width:10%;aspect-ratio:1;border:calc(3 * var(--p)) solid var(--result);border-radius:50%;display:grid;place-items:center;color:var(--result);background:radial-gradient(#005c4244,#001b1988);box-shadow:0 0 calc(17 * var(--p)) #00f9bd44,inset 0 0 calc(15 * var(--p)) #00eab733}
.portfolio-summary .settlement-emblem:before,.portfolio-summary .settlement-emblem:after{content:'';position:absolute;top:70%;width:calc(220 * var(--p));height:calc(2 * var(--p));background:linear-gradient(90deg,transparent,var(--result))}.portfolio-summary .settlement-emblem:before{right:140%}.portfolio-summary .settlement-emblem:after{left:140%;transform:scaleX(-1)}
.portfolio-summary .settlement-emblem svg{width:64%;height:64%;fill:none;stroke:currentColor;stroke-width:6;stroke-linejoin:miter;filter:drop-shadow(0 0 4px #00db9f66)}
.portfolio-summary #portfolioSummaryOutcome{position:absolute;top:calc(343 * var(--p));left:42.2%;box-sizing:border-box;width:15.6%;height:calc(58 * var(--p));margin:0;border:calc(2 * var(--p)) solid #079878;border-radius:calc(32 * var(--p));background:#00362e99;color:var(--result);font-size:calc(38 * var(--p));font-weight:700;line-height:1.4;text-shadow:0 0 7px #00e6a855}
.portfolio-summary #portfolioSummaryNet{position:absolute;top:calc(394 * var(--p));left:8%;width:84%;margin:0;font:800 calc(148 * var(--p))/1.15 F1Barlow,Arial,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap;color:var(--result);background:linear-gradient(#d6ffe9,#81ffd5 40%,#00e1a7);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 calc(15 * var(--p)) #00dbaa44)}
.portfolio-summary .settlement-divider{position:absolute;top:calc(570 * var(--p));left:24%;width:52%;height:calc(2 * var(--p));background:linear-gradient(90deg,transparent,var(--result),transparent);box-shadow:0 0 calc(12 * var(--p)) var(--result)}
.portfolio-summary .settlement-note{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.portfolio-summary #portfolioSummaryConfirm{position:absolute;left:27.6%;top:80.8%;width:44.9%;height:14.3%;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#f2fcff;font:700 calc(54 * var(--p))/1.3 'Leelawadee UI',Tahoma,sans-serif;cursor:pointer}
.portfolio-summary #portfolioSummaryConfirm:hover{background:#6ddfff11}.portfolio-summary #portfolioSummaryConfirm:focus-visible{outline:0;box-shadow:inset 0 0 0 2px #a5efff;clip-path:polygon(5% 0,95% 0,100% 20%,100% 80%,95% 100%,5% 100%,0 80%,0 20%)}
.portfolio-summary[data-outcome='loss']{--result:#ff718b}.portfolio-summary[data-outcome='loss'] #portfolioSummaryNet{background-image:linear-gradient(#ffe4eb,#ff718b 60%,#e12c57)}.portfolio-summary[data-outcome='loss'] .settlement-emblem svg{transform:scaleY(-1)}.portfolio-summary[data-outcome='loss'] #portfolioSummaryOutcome{border-color:#d84964;background:#41122099}
.portfolio-summary[data-outcome='zero']{--result:#c5deed}.portfolio-summary[data-outcome='zero'] #portfolioSummaryNet{background-image:linear-gradient(#f5fbff,#b0d2e7)}
/* Portrait uses the available width so the 44px touch target fits inside the artwork. */
@media(max-width:540px) and (orientation:portrait){
 dialog.portfolio-summary{width:min(440px,calc(100vw - 32px),calc((100dvh - 32px)*1.53766))}
 .portfolio-summary #portfolioSummaryConfirm{box-sizing:border-box;top:calc(88% - 22px);height:44px;min-height:44px;display:grid;place-items:center;font-size:clamp(16px,4.5vw,21px);line-height:1;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent}
}