/* ============================================================
   login.css · inloggningssidan (/login)
   Behåller sitt mörka utseende med svävande ikoner oavsett valt tema.
   .login-scope låser de färger sidan alltid haft; innehållet är oförändrat.
   ============================================================ */

.login-scope{
  --text:#F1EBF7;--text-2:#BDB1CB;--text-3:#8A7C9B;
  --border:rgba(255,255,255,.07);--border-strong:rgba(255,255,255,.12);
  --brand-400:#BEA9D8;--brand-soft:rgba(190,169,216,.16);

  min-height:100vh;position:relative;color:var(--text);
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:
    #1B0E27;
  color-scheme:dark;
}

.login-sky{position:fixed;inset:0;overflow:hidden;z-index:1;pointer-events:none}
.floater{position:absolute;left:0;top:0;will-change:transform}
.floater-inner{animation:bob 5s ease-in-out infinite;will-change:transform}
@keyframes bob{0%,100%{transform:translateY(-6px) rotate(-3deg)}50%{transform:translateY(6px) rotate(3deg)}}
.login-plate{border-radius:13px;display:grid;place-items:center;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 18px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.09)}
.login-plate svg{width:56%;height:56%}
.login-plate.c-amber{background:linear-gradient(150deg,#F4B860,#C77D2E)}
.login-plate.c-blue{background:linear-gradient(150deg,#3AA0F0,#1E6FCC)}
.login-plate.c-red{background:linear-gradient(150deg,#E06C5B,#B23A2E)}
.login-plate.c-purple{background:linear-gradient(150deg,#9F7EC6,#5F259F)}
.login-plate.c-green{background:linear-gradient(150deg,#6FD08C,#2E9E57)}
.login-plate.c-crimson{background:linear-gradient(150deg,#EF6B6B,#C23A3A)}
.login-plate.c-teal{background:linear-gradient(150deg,#4FD1C5,#2C8C86)}
.login-plate.c-slate{background:linear-gradient(150deg,#8B93A7,#535B70)}
.login-plate.has-icon{background:linear-gradient(150deg,#3A2250,#2A1640)}
.login-plate img{width:100%;height:100%;object-fit:contain;padding:10%}
.login-stack{position:relative;display:grid;place-items:center}
.login-stack>*{grid-area:1/1}
.puff{opacity:0}
.pkg{opacity:0}
.pkg svg{filter:drop-shadow(0 0 4px rgba(244,208,111,.25))}

.login-wrap{position:relative;z-index:10;min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:400px;max-width:100%;background:rgb(38,19,54);
  border:1px solid var(--border-strong);border-radius:22px;padding:40px 36px;
  box-shadow:0 12px 32px rgba(0,0,0,.35);text-align:center}
.login-logo{display:flex;justify-content:center;margin-bottom:26px}
.login-logo .itm8-logo{height:30px}
.login-tag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand-400);background:var(--brand-soft);padding:5px 11px;border-radius:999px;margin-bottom:16px}
.login-title{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0}
.login-title:focus{outline:none}
.login-lead{color:var(--text-2);font-size:14.5px;line-height:1.55;margin-top:12px}
.msbtn{margin-top:26px;width:100%;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:14px;border-radius:12px;border:0;cursor:pointer;background:#fff;color:#1b1b1b;text-decoration:none;
  font-family:inherit;font-size:15px;font-weight:600;transition:.16s;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.msbtn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,.45);color:#1b1b1b}
.msbtn svg{width:19px;height:19px}
.login-foot{margin-top:22px;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--text-3);font-size:12.5px}
.login-foot svg{width:13px;height:13px}
.login-divline{height:1px;background:var(--border);margin-top:24px}
.login-signoff{margin-top:16px;color:var(--text-3);font-size:11.5px}
.login-scope .itm8-fallback{font-size:22px;font-weight:800;letter-spacing:-.02em;color:#fff}
.login-scope :focus-visible{outline-color:#fff}

.reqbtn{margin-top:12px;width:100%;display:flex;align-items:center;justify-content:center;padding:12px;border-radius:12px;
  border:1px solid var(--text-3);background:transparent;color:var(--text-2);text-decoration:none;font-family:inherit;font-size:14.5px;font-weight:600;transition:.16s}
.reqbtn:hover,.reqbtn:focus-visible{color:#fff;border-color:#fff}

/* Begär access (/begar-access): formulär i inloggningskortet */
.req-form{display:flex;flex-direction:column;gap:6px;margin-top:18px;text-align:left}
.req-form label{font-size:13px;font-weight:600;color:var(--text-2);margin-top:8px}
.req-form input,.req-form textarea{width:100%;box-sizing:border-box;padding:11px 12px;border-radius:10px;border:1px solid var(--text-3);
  background:rgba(255,255,255,.06);color:#fff;font-family:inherit;font-size:14.5px}
.req-form input::placeholder,.req-form textarea::placeholder{color:var(--text-2)}
.req-form input:focus,.req-form textarea:focus{outline:2px solid #fff;outline-offset:1px}
.req-form textarea{resize:vertical;min-height:80px}
.req-form .msbtn{margin-top:18px}
.req-err{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:rgba(246,177,170,.15);color:#F6B1AA;font-size:14px}
.req-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Samma accentlinje som sidhuvudet i appen (lila till grön) längst upp, så att inloggningen hör ihop med resten. */
.login-scope::before{content:"";position:fixed;left:0;right:0;top:0;height:4px;z-index:20;background:var(--af-accent-line,linear-gradient(90deg,#7E52B2 0%,#9F7EC6 45%,#64D9A4 100%))}