* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #f5f5f5;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 50px, rgba(0,0,0,0.05) 50px, rgba(0,0,0,0.05) 100px);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    position: relative;
}

body::before {
    content: "DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY DEMO ONLY";
    position: fixed;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    font-size: 25px;
    font-weight: bold;
    color: rgba(0,0,0,0.08);
    pointer-events: none;
    z-index: 1;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 60px;
    word-spacing: 30px;
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.login-box {
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    padding: 40px 30px;
    text-align: center;
    position: relative;
    z-index: 10;
}

.logo-container {
    margin-bottom: 30px;
}

.logo {
    height: 40px;
    width: auto;
}

.login-form {
    text-align: left;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #222;
    font-size: 14px;
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: #DB1222;
    box-shadow: 0 0 0 2px rgba(219, 18, 34, 0.1);
}

.login-button {
    width: 100%;
    background: #DB1222;
    color: white;
    border: none;
    padding: 14px 20px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-bottom: 20px;
}

.login-button:hover {
    background: #b81020;
}

.login-button:active {
    background: #960B1A;
}

.demo-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
    padding: 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

/* Authorization page specific styles */
.auth-container {
    width: 100%;
    max-width: 500px;
    padding: 20px;
}

.auth-box {
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    padding: 40px 30px;
    text-align: center;
    position: relative;
    z-index: 10;
}

.auth-title {
    font-size: 24px;
    font-weight: 700;
    color: #222;
    margin-bottom: 20px;
}

.auth-description {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.5;
}

.app-info {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 30px;
    text-align: left;
}

.app-name {
    font-weight: 600;
    font-size: 18px;
    color: #222;
    margin-bottom: 10px;
}

.permissions {
    list-style: none;
    padding: 0;
}

.permissions li {
    padding: 5px 0;
    color: #666;
    position: relative;
    padding-left: 20px;
}

.permissions li:before {
    content: "•";
    color: #DB1222;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.button-group {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.auth-button {
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.allow-button {
    background: #DB1222;
    color: white;
}

.allow-button:hover {
    background: #b81020;
}

.deny-button {
    background: #6c757d;
    color: white;
}

.deny-button:hover {
    background: #5a6268;
}

@media (max-width: 480px) {
    .login-container,
    .auth-container {
        padding: 15px;
    }
    
    .login-box,
    .auth-box {
        padding: 30px 20px;
    }
    
    .button-group {
        flex-direction: column;
    }
    
    .auth-button {
        width: 100%;
    }
}