/* Full-viewport native login; no effect on H5, embedded SCADA or signed-in pages. */
html[data-tank-ui="industrial-vfd"] .tank-native-login.tank-immersive-login {
  position: relative; display: block !important; width: 100%; min-height: 100dvh;
  height: auto !important; padding: 0 !important; overflow: hidden !important;
  background: #edf6fb !important;
}
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-native-shell {
  position: relative !important; display: flex !important; align-items: center; justify-content: flex-end;
  width: 100% !important; max-width: none !important; min-width: 0 !important;
  min-height: 100dvh; height: auto !important; margin: 0 !important;
  padding: 88px clamp(28px, 7vw, 280px) 88px !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
  box-shadow: none !important; overflow: hidden; isolation: isolate;
}
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-native-visual {
  position: absolute !important; inset: 0; z-index: 0; display: block !important;
  width: 100%; height: 100%; min-height: 0 !important; padding: 0 !important;
  background: #edf6fb !important; isolation: isolate;
}
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-native-visual::before {
  position: absolute; inset: 0; z-index: 1; width: auto; height: auto; border: 0;
  border-radius: 0; box-shadow: none; pointer-events: none;
  background: radial-gradient(ellipse at 10% 96%, rgba(248, 253, 255, .94), rgba(244, 251, 254, .65) 27%, transparent 49%),
    linear-gradient(0deg, rgba(241, 249, 254, .56), transparent 38%),
    linear-gradient(90deg, rgba(238, 248, 252, .02) 38%, rgba(237, 248, 254, .08) 68%, rgba(230, 245, 253, .3));
}
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-native-visual::after {
  content: ""; position: absolute; z-index: 1; inset: -12%; pointer-events: none;
  background: radial-gradient(ellipse at 65% 35%, rgba(54, 184, 212, .12), transparent 48%);
  animation: tank-immersive-light 18s ease-in-out infinite alternate;
}
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-artwork {
  position: absolute !important; inset: 0; z-index: 0; width: 100% !important; height: 100% !important;
  min-height: 0; margin: 0 !important; opacity: 1 !important; overflow: hidden;
}
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-artwork::before,
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-artwork::after,
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-art-orbit { display: none !important; }
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-art-picture {
  position: absolute; inset: 0 !important; display: block; width: 100% !important;
  max-width: none !important; height: 100% !important; transform: none !important;
}
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-artwork .tank-studio-image {
  position: absolute !important; inset: 0; display: block; width: 100% !important; max-width: none !important;
  height: 100% !important; max-height: none !important; margin: 0 !important;
  object-fit: cover !important; object-position: 43% center !important;
  mask-image: none !important; -webkit-mask-image: none !important; aspect-ratio: auto;
  opacity: 1; animation: tank-immersive-scene 24s ease-in-out infinite alternate;
  transform-origin: 35% center; will-change: transform;
}
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-visual-brand {
  position: absolute; z-index: 3; top: clamp(30px, 5.5vh, 110px); left: clamp(28px, 6.5vw, 250px);
  font-size: clamp(22px, 1.35vw, 38px); font-weight: 700; letter-spacing: .06em; color: #153d55;
}
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-visual-mark {
  width: 42px; height: 42px; border-radius: 12px; border-color: #4c9eac66;
  background: #ffffff73; color: #087c87; font-size: 24px;
}
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-visual-kicker {
  position: absolute; z-index: 3; left: clamp(28px, 6.5vw, 250px); top: clamp(88px, 12vh, 180px);
  margin: 0; color: #496d82; font-size: clamp(10px, .58vw, 17px); letter-spacing: .24em;
}
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-visual-title {
  position: absolute; z-index: 3; left: clamp(28px, 6.5vw, 250px); bottom: clamp(120px, 13vh, 260px);
  max-width: 56%; margin: 0; font-size: clamp(36px, 3.2vw, 76px); line-height: 1.2;
  color: #123f58; font-weight: 650; letter-spacing: .02em; text-shadow: 0 2px 20px #ffffffb3;
}
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-visual-description {
  position: absolute; z-index: 3; left: clamp(28px, 6.5vw, 250px); bottom: clamp(82px, 8.5vh, 185px);
  max-width: 48%; margin: 0; color: #365f76; font-size: clamp(13px, .92vw, 21px); line-height: 1.75;
}
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-visual-features {
  position: absolute; z-index: 3; left: clamp(28px, 6.5vw, 250px); bottom: clamp(34px, 4vh, 90px);
  display: flex !important; margin: 0; padding: 0; gap: 10px; border: 0;
}
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-visual-features span {
  color: #255b70; font-size: clamp(11px, .6vw, 15px); border: 1px solid #83b3c566;
  background: #ffffff99; backdrop-filter: blur(8px); padding: 7px 12px; border-radius: 7px;
}
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-native-form {
  position: relative !important; z-index: 4; align-self: auto; flex: 0 0 auto;
  display: block !important; width: clamp(360px, 25vw, 440px) !important; max-width: 440px !important;
  min-width: 0 !important; min-height: 0 !important; height: auto !important;
  padding: 36px !important; margin: 0 !important; border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  background: rgba(251,254,255,.9) !important;
  backdrop-filter: blur(20px) saturate(1.1) !important;
  box-shadow: 0 24px 72px #3d77962e, 0 0 0 1px #adcddd40, inset 0 1px 0 #fff !important;
  animation: tank-immersive-panel .4s cubic-bezier(.2,.75,.25,1) both;
}
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-native-form::before {
  content: ""; display: block; width: 38px; height: 4px; margin-bottom: 22px;
  background: linear-gradient(90deg, #087d78, #43b9bb); border-radius: 3px;
}
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-native-form .platform-title,
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-native-form .title {
  font-size: 28px !important; line-height: 1.35 !important; letter-spacing: .02em; margin: 0 !important;
}
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-native-form > .tank-native-subtitle {
  margin: 9px 0 28px; color: #657b8b; font-size: 13px; line-height: 1.6;
}
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-native-fields .el-form-item { margin-bottom: 20px; }
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-native-fields .el-input,
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-native-form .el-input input { height: 48px !important; }
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-native-form .el-button--primary {
  min-height: 48px !important; margin-top: 6px; border-radius: 10px !important;
  box-shadow: 0 6px 18px #087d7826 !important; transition: background .2s, box-shadow .2s, transform .2s;
}
html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-native-form .el-button--primary:hover {
  transform: translateY(-1px); box-shadow: 0 9px 22px #087d7838 !important;
}
html[data-tank-ui="industrial-vfd"] .tank-immersive-login > .login-footer {
  position: absolute; z-index: 5; right: clamp(28px, 7vw, 280px); bottom: 24px;
  width: auto !important; padding: 0 !important; color: #436a80 !important;
  background: transparent !important; font-size: 11px; text-align: right;
}
@keyframes tank-immersive-scene { from { transform: scale(1); } to { transform: scale(1.025); } }
@keyframes tank-immersive-light { from { opacity: .55; transform: translate3d(-1%,0,0); } to { opacity: 1; transform: translate3d(1%,0,0); } }
@keyframes tank-immersive-panel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) {
  html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-native-shell { justify-content: center; padding: 150px 22px 80px !important; }
  html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-native-form { width: min(400px,100%) !important; max-width: 400px !important; padding: 30px !important; }
  html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-visual-brand { top: 34px; left: 26px; font-size: 24px; }
  html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-visual-kicker { top: 92px; left: 26px; font-size: 9px; }
  html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-visual-title,
  html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-visual-description,
  html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-visual-features { display: none !important; }
  html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-artwork .tank-studio-image { object-position: 29% center !important; opacity: .88; }
  html[data-tank-ui="industrial-vfd"] .tank-immersive-login > .login-footer { left: 20px; right: 20px; bottom: 20px; text-align: center; }
}
@media (max-height: 640px) and (min-width: 901px) {
  html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-native-shell { padding-top: 32px !important; padding-bottom: 56px !important; }
  html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-visual-kicker,
  html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-visual-description { display: none; }
  html[data-tank-ui="industrial-vfd"] .tank-immersive-login .tank-visual-title { bottom: 90px; font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-tank-ui="industrial-vfd"] .tank-immersive-login *,
  html[data-tank-ui="industrial-vfd"] .tank-immersive-login *::before,
  html[data-tank-ui="industrial-vfd"] .tank-immersive-login *::after { animation: none !important; will-change: auto !important; }
}