/* The 9:16 landscape, scalable cloud borders and typography are separate layers. */
.hd-enabled{--jh-hd-frame-size:clamp(32px,calc(var(--jh-hd-login-h,100vh)*.075),72px)}
.hd-login-ornaments{display:none}
.hd-enabled .hd-login-ornaments{position:absolute;display:block;inset:0;pointer-events:none}
.hd-enabled .hd-login-ornaments::before,.hd-enabled .hd-login-ornaments::after{content:'';position:absolute;left:0;right:0;height:var(--jh-hd-frame-size);box-sizing:border-box;background:linear-gradient(90deg,#050908,#0c1712 50%,#050908)}
.hd-enabled .hd-login-ornaments::before{top:0;border-bottom:1px solid #89956a;box-shadow:0 2px 0 #112f25,0 3px 0 #8ea98166,0 6px 12px #08241c66}
.hd-enabled .hd-login-ornaments::after{bottom:0;border-top:1px solid #89956a;box-shadow:0 -2px 0 #112f25,0 -3px 0 #8ea98166,0 -6px 12px #08241c66}
.hd-enabled .hd-cloud{position:absolute;z-index:1;width:29%;max-width:180px;height:calc(var(--jh-hd-frame-size) - 8px);background:url('hd/cloud-corner.svg') left center/contain no-repeat;opacity:.95}
.hd-enabled .hd-cloud.top-left{top:3px;left:6px}.hd-enabled .hd-cloud.top-right{top:3px;right:6px;transform:scaleX(-1)}
.hd-enabled .hd-cloud.bottom-left{bottom:3px;left:6px;width:24%;transform:scaleY(-1)}.hd-enabled .hd-cloud.bottom-right{bottom:3px;right:6px;width:24%;transform:scale(-1)}
.hd-enabled.mobile-fit #app>.classic-login{width:var(--jh-hd-login-w,100vw)!important;height:var(--jh-hd-login-h,100dvh)!important;max-width:100%;max-height:100%;box-sizing:border-box;overflow:hidden;border-radius:0;background:#143e3a}
.hd-enabled .classic-frame{inset:0!important;width:100%!important;height:100%!important;background-image:url('hd/Background-9x16.png')!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;image-rendering:auto!important}
.hd-enabled .classic-frame::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#082c3026,transparent 17%,transparent 76%,#062b29a6)}
.hd-enabled .classic-login .classic-brand{top:17%;left:50%;width:76%;height:20%;max-width:440px;transform:translateX(-50%);gap:3%}
.hd-enabled .classic-login .classic-brand .classic-title{width:100%;height:72%;image-rendering:auto;object-fit:contain;filter:drop-shadow(0 2px 3px #092a25b0)}
.hd-enabled .classic-login .classic-brand .classic-online{position:static;width:58%;height:22%;min-height:0;max-height:38px;transform:none;justify-content:center;align-items:center;padding:2px 10px;box-sizing:border-box;background:linear-gradient(180deg,#984837,#542a27);border:1px solid #baaa75;border-radius:999px;box-shadow:inset 0 1px 2px #f4c89145,0 2px 4px #092a2566}
.hd-enabled .classic-login .classic-brand .classic-online img{width:100%;height:100%;object-fit:contain;image-rendering:auto}
.hd-enabled .classic-login .classic-menu{top:44%;bottom:auto;left:50%;width:68%;height:auto;max-width:320px;transform:translateX(-50%);padding:0;gap:2px;grid-template-rows:repeat(4,auto)}
.hd-enabled .classic-login .classic-menu button{width:100%;height:clamp(38px,10.5cqw,46px);min-height:0;padding:0;overflow:hidden;box-sizing:border-box;border-radius:6px;transition:background .15s,filter .15s}
.hd-enabled .classic-login .classic-menu button.selected,.hd-enabled .classic-login .classic-menu button:hover{background:linear-gradient(90deg,transparent,#10372b4d,transparent)}
.hd-enabled .classic-login .classic-menu-label{font-family:KaiTi,STKaiti,'Noto Serif SC',SimSun,serif;font-size:clamp(22px,6.8cqw,32px);font-weight:700;line-height:1.1;letter-spacing:1px;transform:scaleX(1.08);max-width:90%;white-space:nowrap;color:#f0edda;-webkit-text-stroke:.35px #244b3c;text-shadow:0 2px 3px #08291e,0 0 7px #08291e}
.hd-enabled .classic-login .classic-menu .selected .classic-menu-label,.hd-enabled .classic-login .classic-menu button:hover .classic-menu-label{color:#ffe5a5;-webkit-text-stroke:.4px #684321;text-shadow:0 2px 3px #342416,0 0 7px #3d3321}
.hd-login-signature{display:none}
.hd-enabled .classic-login .hd-login-signature{position:absolute;display:flex;align-items:center;justify-content:center;gap:8px;left:25%;right:25%;bottom:0;height:var(--jh-hd-frame-size);margin:0;color:#d4dfba;font:600 clamp(16px,4.6cqw,22px)/1.2 KaiTi,STKaiti,SimSun,serif;letter-spacing:2px;text-indent:2px;white-space:nowrap;text-shadow:0 1px 3px #082d28;pointer-events:none}
.hd-enabled .classic-login .hd-login-signature::before,.hd-enabled .classic-login .hd-login-signature::after{content:'';height:1px;flex:1;max-width:48px;background:linear-gradient(90deg,transparent,#bcccb1)}
.hd-enabled .classic-login .hd-login-signature::after{transform:scaleX(-1)}
.hd-enabled .classic-login .login-music-toggle{top:calc(var(--jh-hd-frame-size) + 8px);left:12px;right:auto;height:26px;min-height:26px;padding:3px 7px;font-size:11px;border:1px solid #acbf9d60;border-radius:5px;background:#153f357a;color:#ecebd3}
@media(max-height:480px){.hd-enabled .classic-login .classic-brand{top:22%;height:23%;width:74%}.hd-enabled .classic-login .classic-menu{top:51%;gap:2px}.hd-enabled .classic-login .classic-menu button{height:28px}.hd-enabled .classic-login .classic-menu-label{font-size:17px}.hd-enabled .classic-login .hd-login-signature{font-size:13px}}
.hd-enabled img.hd-icon{image-rendering:auto!important;object-fit:contain}
.hd-pilot-toolbar>label{flex:1 0 100%;white-space:nowrap}.hd-pilot-toolbar>label select{min-width:0;flex:1}
.hd-options{display:flex;gap:12px;flex-wrap:wrap;border:1px solid #456552;margin:14px 0;padding:8px 12px}.hd-options label{display:flex;align-items:center;gap:6px}.hd-options input{width:18px;height:18px;min-height:0}.hd-pilot-toolbar label{display:flex;align-items:center;gap:8px;max-width:100%}.hd-pilot-panel select{max-width:240px;min-height:38px;background:#183c2b;color:#f3ecd7;border:1px solid #789986;border-radius:6px;padding:4px 8px}.hd-pilot-icons{flex-wrap:wrap}.hd-asset-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}.hd-asset-pair figure{margin:0;min-width:0}.hd-asset-pair figcaption{margin:5px 0}.hd-asset-pair canvas{background-color:#203e34!important;background-image:linear-gradient(45deg,#2c4b3c 25%,transparent 25%),linear-gradient(-45deg,#2c4b3c 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2c4b3c 75%),linear-gradient(-45deg,transparent 75%,#2c4b3c 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.hd-pilot-panel [hidden]{display:none!important}
.hd-pilot-open{position:fixed;right:12px;top:calc(var(--jh-top,0px) + var(--jh-hd-frame-size,32px) + 8px);z-index:9000;height:26px;min-height:26px;padding:3px 7px;border:1px solid #acbf9d60;border-radius:5px;background:#153f357a;color:#ecebd3;font:11px sans-serif}
.hd-pilot-panel{position:fixed;inset:0;z-index:10000;background:#0f201b;color:#f3ecd7;font:15px/1.5 system-ui,sans-serif;overflow:auto;box-sizing:border-box;padding:16px}
.hd-pilot-panel *{box-sizing:border-box}.hd-pilot-shell{max-width:860px;margin:auto}.hd-pilot-panel h1{font-size:24px;margin:0 0 5px}.hd-pilot-panel p{margin:6px 0 12px;color:#bdd0c5}.hd-pilot-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.hd-pilot-panel button{width:auto;min-height:44px;height:auto;border:1px solid #789986;border-radius:8px;padding:8px 14px;background:#214636;color:#fff;font:inherit;cursor:pointer;white-space:nowrap}.hd-pilot-panel button[aria-pressed=true]{background:#c1a565;color:#15241c}.hd-pilot-panel canvas{width:100%;height:auto;background:#263d30;display:block;border:1px solid #5b7565;touch-action:none}.hd-pilot-stage{max-width:520px;margin:0 auto}.hd-pilot-icons{display:flex;gap:18px;align-items:center;padding:8px 0}.hd-pilot-icons figure{margin:0;text-align:center}.hd-pilot-icons img{width:44px;height:44px;display:block}.hd-pilot-status{font-size:13px;min-height:1.5em}.hd-pilot-pad{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}.hd-pilot-pad button{min-width:44px;width:auto;height:44px;padding:8px 12px;touch-action:none}.hd-pilot-note{padding:10px 12px;border-left:3px solid #c1a565;background:#192f26}.hd-pilot-panel[hidden]{display:none!important}

.hd-master-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.hd-master-grid figure{margin:0;text-align:center;background:#19382f;border:1px solid #769777;border-radius:8px;padding:8px}.hd-master-grid img{width:100%;height:260px;object-fit:contain}.hd-master-grid figcaption{padding:8px;color:#f4dfad}
