.textil-login{background:radial-gradient(ellipse at 20% 15%,#d6e5dd 0%,transparent 50%),#edf0e9;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:40px 24px}
.login-shell{width:100%;max-width:1040px;display:grid;grid-template-columns:1fr 1fr;background:#fffdf8;border:1px solid #d9e2d6;border-radius:28px;overflow:hidden;box-shadow:0 40px 100px #173e5018,0 8px 20px #173e5006;animation:page-arrive .65s var(--ease) both}
.login-brand{background:radial-gradient(ellipse at top right,#47727b50,transparent 60%),repeating-linear-gradient(112deg,transparent 0 55px,#bdd2cc09 56px 57px,transparent 58px 95px),#102d39;color:#f4f7ee;position:relative;isolation:isolate;overflow:hidden;padding:40px;display:flex;flex-direction:column;justify-content:space-between;min-height:640px}
.login-brand-lockup{display:flex;align-items:center;gap:13px;position:relative;z-index:1}
.login-monogram{display:grid;place-items:center;width:48px;height:50px;border:1px solid #d4ba7c88;border-radius:14px;font:24px Georgia,serif;letter-spacing:-2px;color:#e7d1a3;background:linear-gradient(145deg,#31525d,#102d39);box-shadow:inset 0 1px 1px #fff2,0 6px 15px #041d2a55;transform:rotate(-4deg)}
.login-brand-name{font-size:18px;font-weight:600;letter-spacing:-.5px;display:block}
.login-brand-caption{display:block;font-size:10px;letter-spacing:2px;margin-top:5px;color:#c4d4d4}
.login-story{position:relative;z-index:1;margin:46px 0 110px}
.login-eyebrow{font-size:10px;letter-spacing:2.4px;font-weight:600;color:#dcc695;margin-bottom:22px}
.login-story h1{font:500 clamp(36px,4vw,50px)/1.1 "Segoe UI",system-ui,sans-serif;letter-spacing:-2px;color:#f5f7ef;margin:0 0 24px}
.login-description{font-size:14px;color:#c1d3d4;line-height:1.8;max-width:290px;margin:0}
.login-brand-footer{font-size:12px;color:#c4d4d4;position:relative;z-index:1;margin:0}
.login-brand-footer span{margin:0 11px;color:#c9b177}
.thread-sculpture{position:absolute;width:310px;height:250px;bottom:-95px;right:-40px;transform:rotate(-15deg);animation:thread-float 10s ease-in-out infinite;z-index:-1;pointer-events:none}
.thread-sculpture span{position:absolute;inset:10px 0 25px;border:30px solid #b69b64;border-top-color:#e7d4a4;border-left-color:#d1b77b;border-bottom-color:#766b4e;border-radius:50%;box-shadow:inset 0 6px 12px #001e2966,0 16px 30px #001e2966}
.thread-sculpture span:nth-child(2){inset:37px 32px -3px;border-width:24px;border-right-color:#648b87;border-top-color:#a9c9b5;border-left-color:#87ada1;border-bottom-color:#31595b;transform:rotate(32deg)}
.thread-sculpture span:nth-child(3){inset:70px 70px -25px;border-width:18px;border-right-color:#436772;border-top-color:#84a7ac;border-left-color:#658d92;border-bottom-color:#203f4b;transform:rotate(-20deg)}
.login-form-panel{padding:55px 44px;display:flex;flex-direction:column;justify-content:center;min-width:0;background:#fffdf8}
.login-access{font-size:12px;color:#627780;display:flex;align-items:center;gap:9px;margin:0 0 25px}
.login-access i{color:#3e6e77;font-size:16px}
.login-form-panel h2{font-size:30px;line-height:1.2;letter-spacing:-1px;font-weight:600;color:#18323c;margin:0 0 11px}
.login-intro{font-size:13px;color:#5e737b;line-height:1.65;margin:0 0 30px}
.login-field{margin-bottom:21px}
.login-field>label{display:block;font-size:13px;color:#203e47;font-weight:600;margin-bottom:8px}
.login-input{display:flex;align-items:center;gap:12px;padding:0 14px;border:1px solid #ccd9d4;background:#fffefb;border-radius:12px;box-shadow:inset 0 1px 2px #173e5004;transition:border-color .2s,box-shadow .2s;min-width:0}
.login-input:focus-within{border-color:#3d7985;box-shadow:0 0 0 3px #39798718}
.login-input>i{font-size:18px;color:#5e7c80;flex:none}
.login-input input{font-family:inherit;font-size:16px;color:#18323c;min-width:0;width:100%;background:transparent;border:0;border-radius:8px;padding:15px 0;outline-offset:0}
.login-input input:focus{outline:0}
.login-input input::placeholder{color:#6d8086;opacity:1}
.login-input button{width:44px;min-height:48px;margin-right:-8px;flex:none;background:transparent;border:0;color:#5e737b;border-radius:9px;font-size:18px}
.login-input:has(.input-validation-error){border-color:#ba5344}
.login-field-error{display:block;font-size:12px;color:#a93a2e;line-height:1.5;margin-top:6px}
.login-field-error:empty{display:none}
.login-feedback{padding:12px 14px;border-radius:11px;font-size:13px;line-height:1.6;margin-bottom:20px}
.login-feedback ul{padding-left:17px;margin-bottom:0}
.login-error{background:#fff0e9;color:#97382b;border:1px solid #f0cdbf}
.login-success{background:#e9f4e9;color:#266132;border:1px solid #ccdfc8}
.textil-login .validation-summary-valid{display:none}
.login-remember{display:flex;align-items:center;gap:10px;min-height:44px;font-size:12px;color:#5e737b;cursor:pointer;margin:0 0 17px}
.login-remember input{width:18px;height:18px;accent-color:#173e50;flex:none}
.login-submit{width:100%;min-height:52px;display:flex;align-items:center;justify-content:center;gap:13px;padding:14px 18px;border:1px solid #173e50;border-radius:12px;background:linear-gradient(120deg,#245467,#173e50);box-shadow:0 7px 17px #173e5024,inset 0 1px 0 #ffffff14;color:#fff;font:600 15px "Segoe UI",system-ui,sans-serif;transition:transform .2s,box-shadow .2s}
.login-submit:disabled{opacity:.75;cursor:wait}
.login-submit.is-loading i{animation:login-spin 1s linear infinite}
.login-help{color:#5e737b;font-size:12px;line-height:1.8;text-align:center;margin:24px 0 0}
.mobile-break{display:none}
.caps-lock-hint{display:block;font-size:12px;color:#926320;margin-top:8px}
.caps-lock-hint[hidden]{display:none}
@keyframes login-spin{to{transform:rotate(360deg)}}
@media(hover:hover) and (pointer:fine){.login-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 22px #173e502c}}
@media(max-width:650px){
 .textil-login{display:block;padding:0;background:#fffdf8}
 .login-shell{display:block;max-width:none;border:0;border-radius:0;box-shadow:none;min-height:100dvh;animation:none}
 .login-brand{min-height:0;padding:26px 27px 28px;display:block}
 .login-monogram{width:42px;height:44px;font-size:22px;border-radius:12px}
 .login-brand-name{font-size:17px}.login-brand-caption{font-size:9px;letter-spacing:1.8px}
 .login-story{margin:26px 0 0}.login-story h1{font-size:29px;letter-spacing:-1px;margin:0;line-height:1.18}
 .login-eyebrow,.login-description,.login-brand-footer{display:none}
 .thread-sculpture{width:170px;height:160px;bottom:-50px;right:-50px;opacity:.3;animation:none}
 .thread-sculpture span{border-width:16px}.thread-sculpture span:nth-child(2){inset:25px 20px -3px;border-width:12px}.thread-sculpture span:nth-child(3){inset:45px 40px -10px;border-width:8px}
 .login-form-panel{padding:28px 27px calc(28px + env(safe-area-inset-bottom))}
 .login-access{margin-bottom:23px}.login-form-panel h2{font-size:27px;letter-spacing:-.8px}
 .login-intro{margin-bottom:27px}.login-field{margin-bottom:23px}.mobile-break{display:block}
}
@media(max-width:350px){.login-brand{padding:24px}.login-form-panel{padding:26px 24px}.login-form-panel h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){.thread-sculpture,.login-shell,.login-submit,.login-input{animation:none!important;transition:none!important}}
