﻿.disp-row.disp-row-3d{display:grid;grid-template-columns:minmax(320px,1.15fr) minmax(260px,.85fr);align-items:stretch;gap:12px;margin-top:12px}
.disp-lab3d{position:relative;isolation:isolate;min-width:0;min-height:300px;max-width:100%;overflow:hidden;border:2px solid #17618c;border-radius:20px;background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.98) 0 16%,transparent 43%),linear-gradient(180deg,#dff4ff 0 66%,#d0a06c 66% 70%,#8f552f 70% 100%);box-shadow:inset 0 1px 0 #fff,0 14px 30px rgba(17,65,96,.16)}
.disp-lab3d:before{content:"";position:absolute;z-index:-1;inset:0 0 34%;opacity:.38;background-image:linear-gradient(rgba(40,126,171,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(40,126,171,.16) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(#000,transparent 92%)}
#disp3dCanvas{display:block;width:100%;height:300px;touch-action:none;cursor:grab}
#disp3dCanvas.is-dragging{cursor:grabbing}
.disp-3d-badge,.disp-3d-hint{position:absolute;z-index:2;border:1px solid rgba(20,74,108,.13);background:rgba(255,255,255,.88);color:#16496a;box-shadow:0 5px 14px rgba(15,62,91,.1);backdrop-filter:blur(7px);pointer-events:none}
.disp-3d-badge{top:10px;left:10px;padding:7px 10px;border-radius:999px;font:900 8px 'Be Vietnam Pro',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#0c6da3,#21a7a0)}
.disp-3d-hint{left:50%;bottom:9px;transform:translateX(-50%);padding:6px 10px;border-radius:9px;font:800 8px 'Be Vietnam Pro',sans-serif;white-space:nowrap}
.disp-3d-legend{position:absolute;top:10px;right:10px;z-index:2;display:flex;gap:5px;padding:5px;border-radius:10px;background:rgba(255,255,255,.82);box-shadow:0 4px 12px rgba(15,62,91,.1);pointer-events:none}
.disp-3d-legend span{display:flex;align-items:center;gap:4px;color:#385d72;font:800 7px 'Be Vietnam Pro',sans-serif}
.disp-3d-legend i{width:8px;height:8px;border-radius:50%}
.disp-3d-legend .ion{background:#28a9df;box-shadow:0 0 0 2px #d9f4ff}
.disp-3d-legend .deposit{background:#c46a2b;box-shadow:0 0 0 2px #ffe2c7}
.disp-legacy-svg{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
.disp-info{display:flex;min-width:0;flex-direction:column;justify-content:center;padding:16px;border:1px solid #b8dbea;border-radius:18px;background:linear-gradient(145deg,#fff 0,#effaff 58%,#fff8e7 100%);box-shadow:inset 0 1px 0 #fff}
.disp-info>.btn{min-height:48px;border:0;border-radius:13px;background:linear-gradient(135deg,#ffbf3f,#f08b1e);color:#163b56;font-weight:900;box-shadow:0 8px 20px rgba(219,131,22,.25);transition:transform .16s ease,box-shadow .16s ease}
.disp-info>.btn:hover{transform:translateY(-2px);box-shadow:0 11px 24px rgba(219,131,22,.32)}
.disp-info>.btn:focus-visible{outline:3px solid rgba(25,118,180,.3);outline-offset:3px}
.disp-info .result-box{min-height:116px;display:flex;flex-direction:column;justify-content:center;overflow-wrap:anywhere}
@media(max-width:760px){.disp-row.disp-row-3d{grid-template-columns:1fr}.disp-lab3d,#disp3dCanvas{height:270px;min-height:270px}.disp-info{padding:10px}.disp-info .result-box{min-height:auto}}
@media(max-width:430px){.disp-lab3d{aspect-ratio:16/9}}
@media(max-width:430px){.disp-lab3d,#disp3dCanvas{height:235px;min-height:235px}.disp-3d-badge{font-size:7px}.disp-3d-legend{top:42px;left:10px;right:auto}.disp-3d-hint{max-width:calc(100% - 18px);white-space:normal;text-align:center}}
@media(prefers-reduced-motion:reduce){.disp-info>.btn{transition:none}}
@media(max-width:500px){.displacement-stage-shell{width:min(100%,320px);margin-inline:auto}.displacement-stage,.displacement-stage canvas{height:230px!important;min-height:230px!important;aspect-ratio:16/9}}

