:root {
      --bg: #121212;
      --bg-dark: #1e1e1e;
      --accent: #03a9f4;
      --text: #e0e0e0;
      --muted: #aaaaaa;
    }

    body {
      margin: 0;
      padding: 0;
      background-color: var(--bg) !important;
      font-family: 'Segoe UI', sans-serif;
      color: var(--text);
    }

    .login-card{
      width: min(380px, 92vw);
      padding: 28px 26px;
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--card) 90%, transparent);
      border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
      box-shadow: var(--shadow);
      backdrop-filter: var(--glass);
    }
    h1{
      text-align:center;
      margin:0 0 22px;
    }
    .field{
      margin-bottom:16px;
    }
    label{
      display:block;
      font-size:14px;
      margin-bottom:6px;
      color:var(--muted);
    }
    input{
      width:100%;
      padding:10px 12px;
      border-radius:10px;
      border:1px solid color-mix(in srgb, var(--text) 15%, transparent);
      background: var(--surface);
      color:var(--text);
      font-size:15px;
      outline:none;
      transition:border-color .2s, box-shadow .2s;
    }
    input:focus{
      border-color: var(--primary);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent);
    }
    #zaloguj{
      width:100%;
      padding:12px;
      border:none;
      border-radius:12px;
      background: var(--primary);
      color:white;
      font-weight:600;
      font-size:16px;
      cursor:pointer;
      transition:background .2s;
    }
    #zaloguj:hover{ background: var(--primary-strong); }


/* Flash message */

.alert-error{
    background-color: red;
}

.alert-success{
    background-color: rgb(38, 255, 0);
}
  
.alert{ 
    font-size: 11pt;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    -webkit-box-shadow: 0px 0px 14px 0px rgba(255, 0, 0, 1);
    --moz-box-shadow: 0px 0px 14px 0px rgba(255, 0, 0, 1);
    box-shadow: 0px 0px 14px 0px rgba(255, 0, 0, 1);
    border-radius: 4px;
    width: 85%;
    position: relative;
}
.close-flash{
    position: absolute ;
    top:0;
    background-color: transparent ;
    right:5px ;
    outline: none ;
    border: none ;
    cursor: pointer;
}
.alert-dismissible {
  padding-right: 4rem;
}
/*end Flash message */