body {
       margin: 0;
       /*background: #1E1E1E;*/
       color: #fff;
       font-family: Oxanium;
       min-height: 100vh;
       display: flex;
       flex-direction: column;
   }

   html,
   body {
       height: 100%;
       margin: 0;
       padding: 0;
   }

   body {}

   header {
       width: 100%;
       /*background: #2A2A2A;*/
       color: #fff;
       display: flex;
       align-items: center;
       justify-content: space-between;
       height: 60px;
       box-sizing: border-box;
       padding: 20px;
   }



   .header-section {
       flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .header-left {
       justify-content: flex-start;
       gap: 12px;
   }

   .header-center {
       justify-content: center gap: 32px;
   }

   .header-right {
       flex: 1;
       justify-content: flex-end;
   }

   .header-center a {
       color: #fff;
       text-decoration: none;
       font-size: 22px;
       padding: 8px 16px;
       border-radius: 4px;
       transition: background 0.2s;
   }

   .header-center a:hover {
       background: #444;
   }

   .header-right {
       flex: 1;
       justify-content: flex-end;
   }


   footer {
       width: 100%;
       color: #fff;
       text-align: center;
       height: 60px;
       font-size: 22px;
       letter-spacing: 1px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-wrap: wrap;

   }


   .footer-left,
   .footer-center,
   .footer-right {
       width: 33.33%;
   }

   .footer-center {
       text-align: center;
   }

   .footer-right {
       text-align: right;
       margin-top: 15px;
   }

   .site-title {
       font-size: 1.2rem;
       font-weight: 600;
       color: #fff;
   }

   .logo {
       height: 36px;
       width: 36px;
       background: #444;
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: bold;
       font-size: 20px;
   }

   nav {
       flex: 1;
       display: flex;
       justify-content: center;
   }

   .navbar {
       display: flex;
       gap: 32px;
   }

   .navbar a {
       color: #fff;
       text-decoration: none;
       font-size: 18px;
       padding: 8px 12px;
       border-radius: 4px;
       transition: background 0.2s;
   }

   .navbar a:hover {
       background: #444;
   }

   .login-btn {
       background: #444;
       color: #fff;
       border: none;
       border-radius: 4px;
       padding: 10px 24px;
       font-size: 16px;
       cursor: pointer;
       transition: background 0.2s;
   }

   .login-btn:hover {
       background: #666;
   }

   main {
       flex: 1;
       padding: 40px 20px 20px 20px;
       box-sizing: border-box;
   }

   .login-icon {
       background: none;
       border: none;
       cursor: pointer;
       padding: 0;
       display: flex;
       align-items: center;
   }



   .copyright {
       display: flex;
       align-items: center;
       gap: 8px;
       margin: 0 auto;
   }

   .login-icon {
       background: none;
       border: none;
       cursor: pointer;
       padding: 0;
       display: flex;
       align-items: center;
   }

   .welcome-msg {
       font-size: 1rem;
   }

   .logout-link {
       color: #3b82f6;
       text-decoration: underline;
       margin-left: 3px;
   }
   .admin-panel-link {
       color: #3b82f6;
       text-decoration: underline;
       margin-left: 3px;
   }

   .modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(30, 30, 30, 0.85);
    align-items: center;
    justify-content: center;
}


   .modal-content {
        background: #23272F;
        padding: 30px 24px;
        border-radius: 14px;
        width: 100%;
        max-width: 320px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
        color: #fff;
        position: relative;
        /* Flexbox pro lepší zarovnání obsahu */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

   .close {
       position: absolute;
       right: 18px;
       top: 12px;
       font-size: 1.7rem;
       color: #aaa;
       cursor: pointer;
   }

   #loginForm label {
        display: block;
        margin-top: 12px;
        color: #bdbdbd;
        text-align: left;
        width: 100%;
    }


   #loginForm button {
       margin-top: 20px;
       background: linear-gradient(90deg, #3b82f6, #06b6d4);
       color: #fff;
       border: none;
       border-radius: 6px;
       padding: 11px 0;
       width: 100%;
       font-size: 1.1rem;
       font-weight: bold;
       cursor: pointer;
   }

   #loginForm input[type="text"],
    #loginForm input[type="password"] {
        width: 220px;
        max-width: 100%;
        padding: 8px;
        margin-top: 4px;
        border-radius: 6px;
        border: none;
        background: #2A2A2A;
        color: #fff;
        font-size: 1rem;
        box-sizing: border-box;
    }

   .remember-row {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 220px;
}

.remember-row input[type="checkbox"] {
    margin: 0;
    /* Zarovná checkbox vertikálně ke středu textu */
    align-self: center;
}

.remember-row label {
    margin: 0;
    color: #bdbdbd;
    font-size: 0.98rem;
    cursor: pointer;
    /* Zarovná text vertikálně ke středu checkboxu */
    line-height: 1;
}

@media (max-width: 400px) {
    .modal-content,
    #loginForm button,
    .remember-row,
    #loginForm input[type="text"],
    #loginForm input[type="password"] {
        width: 95vw;
        max-width: 95vw;
    }
}

   #loginMessage {
       margin-top: 12px;
       color: #ef4444;
       text-align: center;
   }

   .container {
       flex: 1 0 auto;
       justify-content: center;
       align-items: center;
   }

   @media (max-width: 800px) {
       header {
           flex-direction: column;
           height: auto;
           padding: 16px;
           gap: 12px;
       }

       .header-left,
       .header-center,
       .header-right {
           flex: unset;
           width: 100%;
           justify-content: center;
       }

       .header-center {
           gap: 16px;
       }
   }