:root{
            --bg: #faf6ef;
            --card: #f1ebdd;
            --border: #beaf8d;
            --dark: #1c1c1c;
            --maroon: #7A2E2E;
            --text: #5d5c5c;
        }
        *{ box-sizing: border-box; margin: 0; padding: 0; }
        body{
            background-color: var(--bg);
            font-family: Arial, Helvetica, sans-serif;
            color: var(--text);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .login-box{
            width: 100%;
            max-width: 400px;
            background: #fffdf8;
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 34px 28px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.06);
        }
        .brand{
            font-family: Georgia, "Times New Roman", serif;
            font-size: 22px;
            color: var(--dark);
            text-align: center;
            margin-bottom: 6px;
        }
        h1{
            font-family: Georgia, "Times New Roman", serif;
            font-size: 30px;
            color: var(--dark);
            text-align: center;
            margin-bottom: 6px;
        }
        .sub{
            text-align: center;
            font-size: 14px;
            margin-bottom: 24px;
        }
        label{
            display: block;
            font-family: Georgia, "Times New Roman", serif;
            font-size: 15px;
            color: var(--dark);
            margin-bottom: 6px;
        }
        input{
            width: 100%;
            height: 44px;
            padding: 0 12px;
            margin-bottom: 18px;
            background-color: var(--card);
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 15px;
            color: var(--dark);
            outline: none;
        }
        input:focus{
            border-color: var(--maroon);
            box-shadow: 0 0 0 3px rgba(122,46,46,0.15);
        }
        button{
            width: 100%;
            height: 46px;
            background: var(--maroon);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
        }
        button:hover{ background: #652424; }
        .error{
            background: #f6dede;
            border: 1px solid var(--maroon);
            color: var(--maroon);
            padding: 10px 12px;
            border-radius: 8px;
            font-size: 14px;
            margin-bottom: 18px;
            text-align: center;
        }
        .foot{
            text-align: center;
            font-size: 14px;
            margin-top: 20px;
        }
        .foot a{
            color: var(--maroon);
            text-decoration: none;
        }
        .foot a:hover{ text-decoration: underline; }


@media (max-width: 480px){
    body{
        /* start near the top so the on-screen keyboard doesn't cover the form */
        align-items: flex-start;
        padding: 16px;
        padding-top: 32px;
    }
    .login-box{
        padding: 28px 20px;
        box-shadow: none;
    }
    h1{
        font-size: 26px;
    }
    input{
        height: 48px;
    }
    button{
        height: 48px;
    }
    /* bigger tap targets for the links under the form */
    .foot a{
        display: inline-block;
        padding: 6px 4px;
    }
}

/* very short screens (phone held sideways) */
@media (max-height: 500px){
    body{
        align-items: flex-start;
        padding-top: 16px;
    }
}