/* Login page: dark card, same palette as the call page (css/styles.css) */
:root {
    --bg: #070d1f;
    --bg-glow: #14234d;
    --panel: #0d1630;
    --panel-2: #131e3d;
    --line: rgba(255, 255, 255, 0.08);
    --text: #e8ecf8;
    --muted: #7d89ad;
    --accent: #2f7bff;
    --accent-2: #5b9bff;
    --danger: #ff3b4e;
}

html, body {
    height: 100%;
}

body
{
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: var(--text);
    background:
        radial-gradient(900px 600px at 50% 0%, var(--bg-glow) 0%, transparent 70%),
        var(--bg);
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#form1 {
    width: 100%;
}

#loginBox
{
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 380px;
    margin: 0 auto;
    padding: 36px 32px 32px;
    text-align: left;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(47, 123, 255, 0.06);
}

#loginBox h1
{
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

#loginBox .loginSub
{
    margin: 0 0 24px;
    font-size: 14px;
    color: var(--muted);
}

#loginBox label
{
    display: block;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.loginName, .loginText
{
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    margin: 0 0 18px;
    padding: 0 14px;
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    outline: none;
    display: block;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.loginName:focus, .loginText:focus
{
    border-color: var(--accent);
    background-color: rgba(47, 123, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(47, 123, 255, 0.22);
}

.loginCall
{
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    margin: 6px 0 0;
    padding: 0;
    display: block;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(47, 123, 255, 0.35);
    cursor: pointer;
    transition: filter 0.15s, transform 0.05s;
}
.loginCall:hover { filter: brightness(1.1); }
.loginCall:active { transform: translateY(1px); }

.errorLabel
{
    display: block;
    margin: 0 0 18px;
    padding: 10px 14px;
    font-size: 14px;
    color: #ffd5da;
    background-color: rgba(255, 59, 78, 0.12);
    border: 1px solid rgba(255, 59, 78, 0.4);
    border-radius: 10px;
}

.KeyLabel
{
    display: block;
    position: absolute;
    padding: 5px;
    font-size: 15px;
    color: var(--danger);
    font-weight: bold;
}