/* CONNECT — sapphire light, pearl surfaces, and a quiet champagne edge. */
*{box-sizing:border-box}
body{margin:0;min-height:100dvh;padding:48px 24px;display:grid;grid-template-columns:minmax(0,1fr);place-content:center;justify-items:center;font-family:'Yu Gothic UI','Meiryo','Hiragino Kaku Gothic ProN',system-ui,sans-serif;font-size:16px;line-height:1.7;color:#1f3a52;background:radial-gradient(ellipse at 10% 12%,#f9f3dccc,transparent 48%),radial-gradient(ellipse at 90% 85%,#a8c7de7a,transparent 50%),linear-gradient(125deg,#e2eaf3,#f5f3e9 52%,#dbe6f0)}
main{position:relative;isolation:isolate;overflow:hidden;width:min(1060px,100%);padding:60px;background:linear-gradient(125deg,#fffdf7,#f8f8f2);border:1px solid #fffcdf;border-radius:32px;box-shadow:0 45px 90px -35px #1a2f4a66,0 16px 36px -20px #4a5f7566,0 0 0 7px #ffffff35,inset 0 1px 0 #fff}
main::before{content:'';position:absolute;z-index:-2;inset:0 auto 0 0;width:46%;background:radial-gradient(ellipse at 12% 5%,#d3e6f285,transparent 52%),radial-gradient(ellipse at 90% 95%,#85acc680,transparent 60%),linear-gradient(145deg,#6fa3c2,#416f8f 64%,#558bab);border-right:1px solid #cfc295;pointer-events:none}
main::after{content:'';position:absolute;z-index:-1;pointer-events:none;left:-210px;top:-260px;width:690px;height:690px;border-radius:46%;border:1px solid #e8ddb67a;box-shadow:0 0 0 20px #ece2b60a,0 0 0 65px #e9dcaa09,0 0 0 66px #f6eacb35,0 0 65px 15px #f7e0a31a,inset 0 0 70px #e2d39e12;transform:rotate(-28deg)}
.brand{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;text-align:center;margin:0;min-height:300px}
.brand::before{content:'';position:absolute;inset:-30px -24px;pointer-events:none;background:radial-gradient(circle at 15% 22%,#fff7d9 0 1px,transparent 2.5px),radial-gradient(circle at 86% 36%,#fff7d9 0 1.5px,transparent 3px),radial-gradient(circle at 78% 83%,#ebd396 0 1px,transparent 2px),radial-gradient(circle at 24% 88%,#fff7d9 0 1px,transparent 2px),radial-gradient(ellipse at 50% 42%,#e3edf933,transparent 58%);animation:pearl-light 7s ease-in-out infinite alternate}
.brand::after{content:'';position:absolute;top:26px;right:24px;width:19px;height:19px;background:linear-gradient(135deg,#fff,#e7cf8c);clip-path:polygon(50% 0,59% 40%,100% 50%,59% 60%,50% 100%,41% 60%,0 50%,41% 40%);pointer-events:none;animation:pearl-light 7s ease-in-out 2s infinite alternate}
.brand img{position:relative;display:block;object-fit:contain;width:200px;height:162px;padding:25px;background:linear-gradient(145deg,#fffffff7,#eaf0f6ed);border:1px solid #fff8db;border-radius:34px;box-shadow:0 24px 42px -18px #0f253d80,0 0 30px #fff2bb17,inset 0 2px 2px #fff,inset 0 -3px 7px #83a4c838;transform:rotate(-3deg)}
.brand span{font-size:26px;font-weight:600;letter-spacing:.075em;color:#faf7e9;line-height:1.6;text-shadow:0 2px 12px #0f2a4550}
.eyebrow{text-align:center;font-size:12px;letter-spacing:.24em;color:#e7e6cf}
h1{font-size:28px;font-weight:600;letter-spacing:.055em;line-height:1.5;margin:0 0 12px;color:#173a5c}
p,.note{font-size:13px;color:#5c6f88;line-height:1.9}
label{display:block;font-size:14px;font-weight:600;letter-spacing:.035em;margin-top:24px;color:#33516b}
input{display:block;width:100%;margin-top:9px;min-height:54px;padding:13px 16px;font:inherit;color:#1c3450;background:#fffefa;border:1px solid #c5d2e0;border-radius:12px;box-shadow:inset 0 2px 4px #24466905,0 2px 0 #fff;transition:border-color .18s,box-shadow .18s}
input:hover{border-color:#84a2c4}
input:focus{outline:3px solid #6fa3c238;outline-offset:3px;border-color:#6fa3c2;background:#fff;box-shadow:0 0 0 1px #6fa3c2}
button{width:100%;min-height:54px;margin-top:30px;padding:14px 18px;font:inherit;font-weight:600;letter-spacing:.12em;color:#fffdf1;background:linear-gradient(115deg,#6fa3c2,#416f8f);border:1px solid #558bab;border-top-color:#c3dced;border-radius:12px;box-shadow:0 12px 23px -12px #416f8f99,inset 0 1px 0 #fff6c538;cursor:pointer;transition:transform .18s,box-shadow .18s}
button:hover{transform:translateY(-2px);box-shadow:0 16px 26px -12px #416f8fb0,inset 0 1px 0 #fff6c54d}
button:active:not(:disabled){transform:translateY(0);box-shadow:0 4px 10px #416f8f26}
button:focus-visible{outline:3px solid #6fa3c2;outline-offset:4px}
button:disabled{background:#68798c;cursor:wait;transform:none;box-shadow:none}
.note{border-top:1px solid #d7dce6;padding-top:20px;margin-top:26px;font-size:12px}
#error{color:#a33732;font-size:14px}#error:empty{margin:0}
footer{font-size:12px;color:#56687e;text-align:center;letter-spacing:.15em;margin-top:30px}
.login-spinner{display:inline-block;width:22px;height:22px;border:3px solid #ffffff60;border-top-color:#fff;border-radius:50%;animation:login-spin .8s linear infinite;vertical-align:middle;margin-right:8px}@keyframes login-spin{to{transform:rotate(360deg)}}
@keyframes pearl-light{from{opacity:.45}to{opacity:1}}
@media(min-width:760px){main{display:grid;grid-template-columns:minmax(230px,.93fr) minmax(280px,1fr);column-gap:112px}main>.brand{grid-column:1;grid-row:1/4;align-self:center;justify-self:stretch}main>.brand span{white-space:nowrap}main>.eyebrow{grid-column:1;grid-row:4;align-self:center;margin-top:14px}main>h1{grid-column:2;grid-row:1}main>p{grid-column:2;grid-row:2;margin:0 0 4px}main>form{grid-column:2;grid-row:3}main>.note{grid-column:2;grid-row:4}}
@media(min-width:760px) and (max-width:1000px){main{padding:40px;column-gap:76px}.brand span{font-size:22px}.brand img{width:178px;height:146px}h1{font-size:25px}}
@media(max-width:759px){body{padding:24px 16px}main{width:min(480px,100%);padding:30px 26px;border-radius:26px}main::before{width:100%;height:250px;border-right:0;border-bottom:1px solid #cfc295}main::after{width:450px;height:450px;left:-120px;top:-290px}.brand{min-height:0;gap:14px}.brand img{width:122px;height:99px;padding:14px;border-radius:24px}.brand span{font-size:22px}.brand::before{inset:-10px 0}.brand::after{top:8px;right:30px;width:14px;height:14px}.eyebrow{margin:12px 0 52px;font-size:11px}h1{font-size:25px}main>p{margin:0 0 8px}.note{font-size:11px}footer{font-size:11px;letter-spacing:.08em}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(forced-colors:active){.brand span,.eyebrow{color:CanvasText}.brand::before,.brand::after,main::before,main::after{display:none}button{border:1px solid ButtonText}}

/* Lightweight scenery: inline SVG, pointer-driven light, no animation library. */
body{transition:background-color .45s,color .45s;background:#cde5e8}
main{background:#edf6f6;border-color:#e9ffff;transition:background-color .45s,border-color .45s}
main::before,main::after,.brand::before,.brand::after{display:none}
.login-landscape{position:absolute;inset:12px auto 12px 12px;width:calc(46% - 12px);z-index:-1;overflow:hidden;border-radius:23px;background:linear-gradient(#8dc6d2,#c4e1e1 50%,#527b8c);transition:background .45s}
.login-landscape>svg{width:100%;height:100%;position:absolute;inset:0}
.day-sky,.night-sky{transition:opacity .5s}.night-sky{opacity:0}
.brand{padding-top:135px;min-height:400px;justify-content:flex-end;gap:20px;padding-bottom:24px}
.brand img{width:142px;height:115px;padding:18px;border-radius:26px;transform:none;background:#f3f9f4eb}
.brand span{font-size:23px}.eyebrow{position:relative;color:#e6f1ed}
.password-field{display:block;position:relative}
.password-field input{padding-right:61px}
.password-toggle{position:absolute;right:5px;top:5px;width:44px;height:44px;min-height:44px;margin:0;padding:10px;display:grid;place-items:center;background:transparent;border:0;box-shadow:none;color:#486c7b;letter-spacing:0;z-index:3}
.password-toggle:hover{background:#7ba6b51a;transform:none;box-shadow:none}
.password-toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1}
.password-toggle .lamp-icon{display:none}
.login-wildlife,.login-beam{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;z-index:1}
.login-wildlife{mask-image:radial-gradient(circle 160px at var(--spot-x,27%) var(--spot-y,30%),#000 15%,#000b 45%,transparent 100%);-webkit-mask-image:radial-gradient(circle 160px at var(--spot-x,27%) var(--spot-y,30%),#000 15%,#000b 45%,transparent 100%)}
.forest-owl{position:absolute;left:22%;top:21%;width:66px;height:75px}
.forest-bird{position:absolute;right:9%;top:10%;width:57px;height:40px}
.login-beam{inset:auto;left:var(--lamp-x,80%);top:var(--lamp-y,50%);width:700px;height:280px;transform-origin:0 50%;transform:translateY(-50%) rotate(var(--beam-angle,3.6rad));background:linear-gradient(90deg,#ffefb747,#ffefb71c 50%,transparent);clip-path:polygon(0 49%,100% 0,100% 100%,0 51%);filter:blur(9px);mix-blend-mode:screen}
.login-night{background:#0b1826;color:#dcebef;color-scheme:dark}
.login-night main{background:#102331;border-color:#334b58;box-shadow:0 40px 90px -35px #000b,0 0 0 7px #ffffff06,inset 0 1px #ffffff15}
.login-night .login-landscape{background:linear-gradient(#102033,#1c364a 60%,#142c3d)}
.login-night .login-landscape>svg>path{filter:brightness(.55) saturate(.7)}
.login-night .day-sky{opacity:0}.login-night .night-sky,.login-night .login-wildlife,.login-night .login-beam{opacity:1}
.login-night h1{color:#e5f2f2}.login-night label{color:#cadae2}.login-night p,.login-night .note,.login-night footer{color:#a9c1cd}
.login-night input{background:#132b3a;color:#f2f7f6;border-color:#405c6b;box-shadow:inset 0 2px 5px #0002}
.login-night input:focus{border-color:#b6d8de;outline-color:#b6d8de55}
.login-night .note{border-color:#37515f}.login-night #error{color:#ffb6aa}
.login-night .password-toggle{color:#fff0b4}.login-night .eye-icon{display:none}.login-night .lamp-icon{display:block}
@media(max-width:759px){.login-landscape{inset:10px 10px auto;width:auto;height:236px;border-radius:19px}.login-landscape>svg{height:490px;top:0}.brand{padding:44px 0 0;min-height:0;gap:10px}.brand img{width:92px;height:75px;padding:12px;border-radius:20px}.brand span{font-size:20px}.eyebrow{margin:9px 0 43px}.forest-owl{left:17%;top:13%;width:48px;height:55px}.forest-bird{right:12%;top:5%}.login-wildlife{mask-image:radial-gradient(circle 130px at var(--spot-x,27%) var(--spot-y,30%),#000,transparent);-webkit-mask-image:radial-gradient(circle 130px at var(--spot-x,27%) var(--spot-y,30%),#000,transparent)}}
@media(prefers-reduced-motion:reduce){.login-beam{filter:none}}
@media(forced-colors:active){.login-landscape,.login-wildlife,.login-beam{display:none}.login-night h1,.login-night p,.login-night label,.login-night .note,.login-night footer,.login-night .password-toggle{color:CanvasText}.login-night input{color:FieldText;background:Field}.password-toggle{border:1px solid ButtonText}}

.login-night .login-beam{opacity:.55}

/* Drag the lamp or scenery freely on touch screens; form scrolling stays native. */
.password-toggle,.login-landscape{touch-action:none}
.login-night .lamp-icon{transform:rotate(calc(var(--beam-angle,3.6rad) + 3.1415926536rad))}
.login-night .login-beam{will-change:transform}

/* Wildlife is revealed by the full light cone, including beyond the finger. */
.login-wildlife{-webkit-mask-image:none;mask-image:none;z-index:2}
.forest-owl,.forest-bird{opacity:.08;filter:drop-shadow(0 2px 4px #07192380)}
.forest-owl{width:76px;height:86px}
.forest-bird{width:68px;height:46px}
@media(max-width:759px){.forest-owl{width:58px;height:66px}.forest-bird{width:62px;height:43px}}