
:root{
  --g:#1fbd62;
  --g2:#65e092;
  --dark:#041014;
  --panel:#071317;
  --mx:0px;
  --my:0px;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body.auth{
  min-height:100vh!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  background:var(--dark)!important;
  color:white!important;
  font-family:Arial,Helvetica,sans-serif!important;
}
.pt-scene,.pt-photo,.pt-overlay,.pt-grid,.pt-beam,.pt-dots{position:fixed;inset:0}
.pt-scene{z-index:0;overflow:hidden;background:#041014}
.pt-photo{
  width:60vw;
  right:auto;
  background:
    linear-gradient(90deg,rgba(4,12,14,.03),rgba(4,12,14,.05) 55%,rgba(4,12,14,.74) 94%,#041014),
    linear-gradient(0deg,rgba(1,8,10,.84),transparent 48%),
    url('poltraktor_login_tractor.jpg') 44% 48%/cover no-repeat;
  filter:saturate(.94) contrast(1.06) brightness(.82);
  transform:scale(1.035) translate(var(--mx),var(--my));
  animation:ptZoom 18s ease-in-out infinite alternate;
}
.pt-overlay{
  background:
    radial-gradient(circle at 31% 48%,transparent 0 32%,rgba(2,9,10,.12) 56%,rgba(2,9,10,.78) 100%),
    linear-gradient(90deg,transparent 0 51%,#041014 60%);
}
.pt-grid{
  opacity:.09;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;
}
.pt-radar{
  position:fixed;z-index:1;border:1px solid rgba(101,224,146,.28);border-radius:50%;pointer-events:none
}
.pt-radar:after{
  content:"";position:absolute;width:6px;height:6px;border-radius:50%;
  background:var(--g2);box-shadow:0 0 16px var(--g2);right:11%;top:20%
}
.pt-radar-a{width:420px;height:420px;left:24vw;top:24vh;animation:spin 22s linear infinite}
.pt-radar-b{width:345px;height:345px;left:26.5vw;top:28vh;animation:spinBack 28s linear infinite}
.pt-radar-c{width:275px;height:275px;left:29vw;top:32vh;opacity:.5;animation:pulse 4s ease-in-out infinite}
.pt-beam{
  z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent 36%,rgba(101,224,146,.05) 50%,transparent 64%);
  transform:translateX(-80%);
  animation:beam 8s linear infinite;
}
.pt-dots{z-index:1;pointer-events:none}
.pt-dots i{
  position:absolute;left:var(--x);top:var(--y);width:5px;height:5px;border-radius:50%;
  background:var(--g2);box-shadow:0 0 14px rgba(101,224,146,.8);
  animation:dotFloat 5s var(--d) ease-in-out infinite;
}
.pt-left-copy{
  position:fixed;z-index:3;left:4vw;top:4.5vh;bottom:3vh;width:46vw;
  display:flex;flex-direction:column;pointer-events:none;
}
.pt-top-brand{display:flex;align-items:center;gap:10px;animation:fadeDown .7s ease both}
.pt-mini-logo{width:72px;height:53px;position:relative;color:var(--g)}
.pt-mini-logo b{position:absolute;right:0;top:-8px;font-size:62px;line-height:52px;font-style:italic}
.pt-mini-logo span{position:absolute;left:0;top:8px;font-size:31px;z-index:2;animation:gear 8s linear infinite}
.pt-top-brand>div:last-child>strong{display:block;font-size:28px;font-style:italic;letter-spacing:.04em}
.pt-top-brand small{display:block;margin-top:5px;font-size:11px;letter-spacing:.14em;color:#ccd6d1}
.pt-top-brand small b{color:var(--g2)}
.pt-slogan{margin-top:auto;margin-bottom:5vh;animation:fadeUp .8s .1s both}
.pt-slogan>small{font-size:8px;font-weight:900;letter-spacing:.08em}.pt-slogan>small b{color:var(--g2)}
.pt-slogan h1{margin:11px 0;font-size:clamp(42px,3.9vw,61px);line-height:.95;letter-spacing:-.055em;font-weight:950;text-shadow:0 8px 28px rgba(0,0,0,.4)}
.pt-slogan h1 em{font-style:normal;color:var(--g2)}
.pt-slogan p{max-width:360px;color:#d7dfdc;font-size:12px}.pt-slogan p b{color:var(--g2)}
.pt-mods{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;animation:fadeUp .8s .2s both}
.pt-mods span{font-size:9px;font-weight:800}.pt-mods small{display:block;margin-top:3px;font-size:7px;color:#8e9d96;font-weight:400}

body.auth .authbox{
  position:fixed!important;z-index:5!important;
  right:4vw!important;top:50%!important;transform:translateY(-50%)!important;
  width:min(500px,37vw)!important;max-height:94vh!important;
  margin:0!important;padding:clamp(18px,2.6vh,29px) clamp(24px,2.6vw,38px) clamp(16px,2.3vh,25px)!important;
  border-radius:28px!important;
  background:linear-gradient(180deg,rgba(5,17,20,.98),rgba(2,9,12,.99))!important;
  border:1px solid rgba(83,226,137,.18)!important;
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 40px rgba(31,189,98,.07)!important;
  color:#fff!important;
  overflow:hidden!important;
  animation:cardIn .85s cubic-bezier(.2,.8,.2,1) both!important;
}
body.auth .authbox:before{
  content:"";position:absolute;left:-40%;top:0;width:32%;height:1px;
  background:linear-gradient(90deg,transparent,var(--g2),transparent);
  animation:topScan 4s linear infinite;
}
.pt-secure{
  width:max-content;margin:0 auto 17px;padding:7px 12px;border-radius:999px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055);
  color:#dbe6e0;font-size:8px;letter-spacing:.07em
}
body.auth .brandmark{
  text-align:center!important;font-size:27px!important;font-weight:950!important;
  font-style:italic!important;letter-spacing:.01em!important;color:#fff!important;margin:0!important
}
body.auth .brandmark span{color:var(--g2)!important}
body.auth h2{
  margin:8px 0 19px!important;text-align:center!important;color:#fff!important;
  font-size:11px!important;font-weight:900!important;letter-spacing:.14em!important
}
body.auth h2 small{
  display:block!important;margin-top:7px!important;color:#75857d!important;
  font-size:8px!important;font-weight:500!important;letter-spacing:.13em!important
}
body.auth .authbox label{
  display:block!important;margin:8px 0!important;color:#85958d!important;
  font-size:9px!important;font-weight:600!important
}
body.auth .authbox input[type=email],
body.auth .authbox input[type=password]{
  display:block!important;width:100%!important;height:56px!important;margin-top:5px!important;
  padding:0 15px!important;border-radius:11px!important;border:1px solid rgba(255,255,255,.13)!important;
  background:rgba(0,0,0,.18)!important;color:#fff!important;font-size:13px!important;
  font-weight:650!important;outline:none!important;box-shadow:none!important;transition:.2s!important
}
body.auth .authbox input:focus{
  border-color:rgba(101,224,146,.75)!important;
  box-shadow:0 0 0 3px rgba(31,189,98,.06),0 0 22px rgba(31,189,98,.09)!important
}
.pt-pass{position:relative}
.pt-pass input{padding-right:46px!important}
.pt-eye{
  position:absolute;right:10px;top:50%;transform:translateY(-43%);
  border:0;background:transparent;color:#9ba9a2;font-size:17px;cursor:pointer
}
.pt-eye.active{color:var(--g2)}
.pt-options{display:flex;justify-content:space-between;gap:12px;margin:9px 1px 2px;color:#c8d3cd;font-size:8px}
.pt-options span:last-child{color:var(--g2)}
body.auth .authbox .btn.primary{
  width:100%!important;height:55px!important;margin-top:12px!important;border:0!important;border-radius:9px!important;
  background:linear-gradient(90deg,#0b8d3d,#20c65c 68%,#59df84)!important;color:#fff!important;
  font-size:13px!important;font-weight:950!important;letter-spacing:.05em!important;cursor:pointer!important;
  box-shadow:0 14px 30px rgba(31,189,98,.23),0 0 22px rgba(31,189,98,.08)!important;
  animation:breathe 2.7s ease-in-out infinite!important
}
body.auth .authbox .btn.primary b{font-size:20px;margin-left:18px;animation:arrow 1.4s ease-in-out infinite;display:inline-block}
.pt-divider{display:flex;align-items:center;gap:9px;margin:16px 0 9px;color:#708079;font-size:7px}
.pt-divider:before,.pt-divider:after{content:"";height:1px;flex:1;background:rgba(255,255,255,.08)}
.pt-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.pt-roles span{text-align:center;padding:9px 4px;border-radius:8px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);font-size:8px;color:#dce5e1}
.pt-footer{text-align:center;margin-top:15px;color:var(--g2);font-size:8px;font-weight:800}
body.auth .flash.error{border-radius:9px!important;background:rgba(160,20,20,.14)!important;color:#ffc1c1!important;border:1px solid rgba(255,90,90,.25)!important;padding:9px 11px!important;margin-bottom:9px!important}

.pt-intro{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 48%,rgba(31,189,98,.16),transparent 28%),linear-gradient(135deg,#041014,#082519);
  transition:opacity .65s ease,visibility .65s ease
}
.pt-intro.done{opacity:0;visibility:hidden}
.pt-intro-inner{text-align:center;animation:introIn .75s ease both}
.pt-logo{width:110px;height:78px;margin:auto;position:relative;color:var(--g2)}
.pt-logo b{position:absolute;right:0;top:-8px;font-size:90px;line-height:77px;font-style:italic}
.pt-logo span{position:absolute;left:3px;top:14px;font-size:43px;z-index:2;animation:gear 2.4s linear infinite}
.pt-intro strong{display:block;font-size:32px;font-style:italic;letter-spacing:.09em}
.pt-intro small{display:block;margin-top:6px;font-size:9px;color:#86a596;letter-spacing:.2em}
.pt-loader{width:300px;height:2px;margin:22px auto 0;background:rgba(255,255,255,.07);overflow:hidden}
.pt-loader i{display:block;width:35%;height:100%;background:linear-gradient(90deg,transparent,var(--g2),transparent);animation:load 1s ease-in-out infinite}

@keyframes ptZoom{from{transform:scale(1.035) translate(var(--mx),var(--my))}to{transform:scale(1.085) translate(calc(var(--mx)*-1),calc(var(--my)*-1))}}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes spinBack{to{transform:rotate(-360deg)}}@keyframes pulse{50%{transform:scale(1.06);opacity:.18}}
@keyframes beam{to{transform:translateX(80%)}}
@keyframes dotFloat{0%,100%{transform:translateY(0);opacity:.08}50%{transform:translateY(-25px);opacity:.75}}
@keyframes gear{to{transform:rotate(360deg)}}@keyframes fadeDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(-50%) translateX(30px) scale(.985)}to{opacity:1;transform:translateY(-50%) translateX(0) scale(1)}}
@keyframes topScan{to{left:120%}}@keyframes breathe{50%{box-shadow:0 18px 38px rgba(31,189,98,.35),0 0 30px rgba(101,224,146,.12)}}@keyframes arrow{50%{transform:translateX(6px)}}
@keyframes introIn{from{opacity:0;transform:scale(.74);filter:blur(10px)}to{opacity:1;transform:scale(1);filter:blur(0)}}@keyframes load{from{transform:translateX(-180%)}to{transform:translateX(380%)}}

@media (min-width:1051px) and (max-height:800px){
  .pt-left-copy{top:2.8vh;bottom:2vh}
  .pt-slogan{margin-bottom:3vh}.pt-slogan h1{font-size:44px}
  body.auth .authbox{padding-top:15px!important;padding-bottom:13px!important}
  .pt-secure{margin-bottom:10px}.authbox h2{margin-bottom:12px!important}
  body.auth .authbox input[type=email],body.auth .authbox input[type=password]{height:49px!important}
  body.auth .authbox .btn.primary{height:50px!important;margin-top:9px!important}
  .pt-divider{margin:10px 0 7px}.pt-footer{margin-top:8px}
}
@media(max-width:1050px){
  html,body{overflow:auto}.pt-left-copy{display:none}.pt-radar{display:none}
  .pt-photo{width:100vw;height:48vh}.pt-overlay{background:linear-gradient(0deg,#041014 2%,rgba(4,16,20,.25) 55%,rgba(4,16,20,.1))}
  body.auth .authbox{position:relative!important;right:auto!important;top:auto!important;transform:none!important;width:min(560px,calc(100% - 28px))!important;margin:42vh auto 20px!important}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.pt-intro{display:none!important}}
