/*
 * Sign-in page styling for aytict.fi.
 *
 * A separate file rather than a <style> block in login.php on purpose: the
 * site's Content-Security-Policy allows styles only from 'self' and two CDNs,
 * with no 'unsafe-inline' and no nonce. An inline block is silently dropped by
 * the browser — no error, no console warning the visitor would see — and the
 * page renders as unstyled black-on-white HTML.
 *
 * So: no <style> block and no style="" attributes on this page. Both are
 * inline styles as far as the policy is concerned, and both are blocked.
 */

:root{
  --magenta:#ff2fd0; --violet:#8a2be2; --plum:#500050;
  --ink:#0d0612; --mist:#ece8f2; --dim:#9d8fb6;
  --line:rgba(138,43,226,.32);
  --gradient:linear-gradient(135deg,var(--magenta),var(--violet) 55%,var(--plum));
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 20px;
  font:15px/1.55 "Segoe UI",system-ui,-apple-system,sans-serif;color:var(--mist);
  background:radial-gradient(900px 620px at 12% -8%,rgba(200,0,182,.20),transparent 62%),
             radial-gradient(760px 560px at 92% 104%,rgba(138,43,226,.20),transparent 60%),var(--ink);
}
.wrap{width:100%;max-width:400px}
.brand{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:22px}
.hex{
  width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--gradient);color:#fff;font-weight:800;font-size:1.25rem;
  clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);
  box-shadow:0 0 24px rgba(255,0,200,.35)
}
.brand h1{
  margin:0;font-size:1.22rem;font-weight:700;background:var(--gradient);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent
}
.brand p{margin:1px 0 0;font-size:.82rem;color:var(--dim)}
.card{
  background:linear-gradient(180deg,rgba(22,10,31,.92),rgba(13,6,18,.92));
  border:1px solid var(--line);border-radius:14px;padding:26px;box-shadow:0 18px 50px rgba(0,0,0,.55)
}
h2{margin:0 0 4px;font-size:1.06rem}
.hint{margin:0 0 18px;font-size:.85rem;color:var(--dim)}
label{display:block;margin:0 0 6px;font-size:.8rem;font-weight:600;color:#c9bcdd}
input{
  width:100%;padding:11px 12px;margin-bottom:15px;font:inherit;color:var(--mist);
  background:rgba(0,0,0,.38);border:1px solid var(--line);border-radius:9px
}
input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(138,43,226,.26)}
.btn{
  display:flex;width:100%;align-items:center;justify-content:center;gap:.5em;
  padding:12px 18px;font:inherit;font-weight:700;color:#fff;text-decoration:none;
  background:var(--gradient);background-size:165% 165%;border:0;border-radius:9px;cursor:pointer;
  transition:transform .14s ease,box-shadow .2s ease,background-position .4s ease
}
.btn:hover{transform:translateY(-1px);background-position:100% 100%;box-shadow:0 0 24px rgba(255,0,200,.35)}
.btn--quiet{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.btn--quiet:hover{background:rgba(255,255,255,.12);box-shadow:none}
.sep{
  display:flex;align-items:center;gap:12px;margin:20px 0;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#6f6386
}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.08)}
.err{
  margin:0 0 16px;padding:11px 13px;border-radius:9px;font-size:.87rem;
  background:rgba(255,107,122,.13);border:1px solid rgba(255,107,122,.45);color:#ffc0c7
}
.foot{margin-top:22px;text-align:center;font-size:.75rem;color:#7a6f90}
.foot a{color:var(--magenta)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}