:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#101828;
  --muted:#667085;
  --border:#e4e7ec;
  --accent:#0b6f63;
  --shadow:0 12px 36px rgba(16,24,40,.10);
  --radius:18px;
  --topbar:72px;
}

.dark{
  --bg:#0b1220;
  --card:#111a2c;
  --text:#e6eaf5;
  --muted:#a0aec0;
  --border:#1f2a44;
  --accent:#41c7b2;
  --shadow:0 14px 40px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--bg);
  color:var(--text);
}

/* ─────────────────────────────
   Topbar
───────────────────────────── */
.login-topbar{
  height:var(--topbar);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  position:sticky;
  top:0;
  z-index:50;
}

.dark .login-topbar{
  background:rgba(17,26,44,.82);
}

.brand{display:flex;align-items:center;text-decoration:none}
.brand__logo{height:44px;width:auto;display:block}
/* Brand logo toggle (light/dark) */
.brand__logo--dark{display:none}
.dark .brand__logo--light{display:none}
.dark .brand__logo--dark{display:block}


.theme-btn{
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  border-radius:999px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font-weight:700;
}

/* ─────────────────────────────
   Layout 35 / 65
───────────────────────────── */
.login-shell{
  height:calc(100vh - var(--topbar));
  display:flex;
  min-height:540px;
}

/* LEFT – FORM */
.login-panel{
  flex:0 0 35%;
  min-width:360px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:var(--bg);
  border-right:1px solid var(--border);

  /* 🔒 ENDA separationen – INGET overlay */
  box-shadow:12px 0 28px rgba(16,24,40,.08);
}

.dark .login-panel{
  box-shadow:12px 0 36px rgba(0,0,0,.55);
}

/* RIGHT – IMAGE */
.login-image{
  flex:1 1 65%;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

/* ─────────────────────────────
   Login Card
───────────────────────────── */
.login-card{
  width:100%;
  max-width:460px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
}

.login-card__tagline{
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:10px;
}

.login-card__title{
  margin:0 0 6px;
  font-size:44px;
  letter-spacing:-.02em;
}

.login-card__lead{
  margin:0 0 18px;
  color:var(--muted);
}

.login-form{display:flex;flex-direction:column;gap:14px}

.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-weight:700;font-size:13px;color:var(--muted)}

.field__input{
  height:44px;
  border-radius:12px;
  border:1px solid var(--border);
  padding:0 12px;
  font-size:15px;
  background:#fff;
}

.dark .field__input{
  background:#0f172a;
  color:var(--text);
}

.btn{
  height:46px;
  border-radius:12px;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
  border:none;
}

.btn--primary{
  background:var(--accent);
  color:#fff;
}

.login-card__foot{
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
}

/* ─────────────────────────────
   Mobile
───────────────────────────── */
@media (max-width:980px){
  .login-shell{flex-direction:column}

  .login-panel{
    flex:0 0 auto;
    min-width:0;
    border-right:none;
    border-bottom:1px solid var(--border);
    box-shadow:0 8px 22px rgba(16,24,40,.12);
  }

  .login-image{
    min-height:360px;
  }
}