/* static/css/login.css — Reenpro login page (approved design "1b") */

/* Onest — vendored locally (latin + latin-ext for ą č ę ė į š ų ū ž), no CDN. */
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/vendor/fonts/onest-latin-ext-400.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/vendor/fonts/onest-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;
  src:url('/static/vendor/fonts/onest-latin-ext-500.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;
  src:url('/static/vendor/fonts/onest-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;
  src:url('/static/vendor/fonts/onest-latin-ext-600.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;
  src:url('/static/vendor/fonts/onest-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --bg:#EEEDEB;
  --ink:#1B1530;
  --ink-2:#6B6577;
  --ink-weak:#8A8494;
  --label:#3E3849;
  --placeholder:#9A94A3;
  --brand:#490891;      /* Reenpro violet */
  --accent:#FC391D;     /* Reenpro orange */
  --error:#B42A14;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);
  font-family:'Onest',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--accent)}
input::placeholder{color:var(--placeholder)}
[hidden]{display:none!important}

/* Background solar-panel field (3D or static fallback) */
.bg{position:fixed;inset:-40px;filter:blur(7px);opacity:.38;pointer-events:none;z-index:0}
.bg reen-scene{display:block;width:100%;height:100%}
.bg-fallback{
  position:fixed;inset:0;z-index:0;pointer-events:none;display:none;
  background:
    radial-gradient(1200px 700px at 18% 30%, rgba(73,8,145,.10), transparent 60%),
    radial-gradient(900px 600px at 85% 75%, rgba(252,57,29,.08), transparent 60%);
}

/* Left 3D logo (or static logo fallback) */
.mark{position:fixed;left:0;top:0;bottom:120px;right:calc(72px + 548px + 40px);z-index:1}
.mark reen-scene{display:block;width:100%;height:100%}
.mark-fallback{
  position:fixed;left:0;top:0;bottom:120px;right:calc(72px + 548px + 40px);z-index:1;
  display:none;align-items:center;justify-content:center;pointer-events:none;
}
/* When WebGL is unavailable: hide the 3D scenes and show the static fallbacks. */
html.no-webgl .bg,
html.no-webgl .mark{display:none}
html.no-webgl .bg-fallback{display:block}
html.no-webgl .mark-fallback{display:flex}
.mark-fallback img{width:min(420px,70%);height:auto;filter:drop-shadow(0 20px 40px rgba(27,21,48,.18))}

/* Footer */
.foot{position:fixed;left:64px;bottom:56px;display:flex;flex-direction:column;gap:6px;z-index:2}
.foot .k{font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.foot .c{font-size:13px;color:var(--ink-weak)}
.foot .credit{opacity:.8}

/* Login card */
.card{
  position:fixed;right:72px;top:50%;transform:translateY(-50%);
  width:548px;padding:44px;border-radius:28px;z-index:3;
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(24px) saturate(1.2);
  -webkit-backdrop-filter:blur(24px) saturate(1.2);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 40px 80px -30px rgba(27,21,48,.25);
  display:flex;flex-direction:column;gap:28px;
}
.card>img{width:150px;display:block}
h1{margin:0;font-size:32px;font-weight:600;letter-spacing:-.02em}
.sub{margin:8px 0 0;font-size:16px;color:var(--ink-2)}

form{display:flex;flex-direction:column;gap:16px}
.in{
  width:100%;height:54px;border-radius:14px;
  border:1px solid rgba(27,21,48,.12);background:rgba(255,255,255,.85);
  padding:0 18px;font:inherit;font-size:16px;color:var(--ink);outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.in:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(73,8,145,.12)}
.pw{position:relative}
.pw .in{padding-right:84px}
.eye{
  position:absolute;right:7px;top:7px;height:40px;padding:0 12px;border:0;border-radius:10px;
  background:transparent;font:inherit;font-size:14px;font-weight:500;color:var(--brand);cursor:pointer;
}
.eye:hover{background:rgba(73,8,145,.08)}
.warn{font-size:13px;color:var(--error)}
.err{font-size:14px;color:var(--error)}
.row{display:flex;justify-content:space-between;align-items:center}
.row label{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--label);cursor:pointer}
.row input{width:18px;height:18px;accent-color:var(--brand);margin:0}
.row a{font-size:15px;font-weight:500}
.btn{
  height:56px;margin-top:4px;border:0;border-radius:14px;background:var(--ink);color:#fff;
  font:inherit;font-size:16px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;transition:background .15s;
}
.btn:hover{background:var(--brand)}
.btn span{color:var(--accent);font-size:18px}
.btn:disabled{opacity:.7;cursor:default}

/* Responsive */
@media (max-width:1023px){
  .mark,.mark-fallback{display:none}
  .card{right:50%;transform:translate(50%,-50%);width:min(548px,calc(100vw - 32px))}
  .foot{left:50%;transform:translateX(-50%);bottom:24px;align-items:center}
}
@media (max-width:559px){.card{padding:28px}}

@media (prefers-reduced-motion: reduce){
  .bg reen-scene,.mark reen-scene{/* scenes render a static frame via JS */}
}