:root{
    --bg-color: #f6f7f9;
    --card-bg: #ffffff;
    --muted: #6c757d;
    --accent: #1f6feb;
    --accent-contrast: #ffffff;
    --success: #e6ffed;
    --success-border: #28a745;
    --error: #fff2f2;
    --error-border: #d93025;
    --text: #222;
    --box-shadow: 0 6px 18px rgba(17,24,39,0.08);
    --radius: 8px;
    --max-width: 680px;
    --input-height: 44px;
    --padding: 18px;
}


/* Page basics */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, var(--bg-color) 0%, #eceff3 100%);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    line-height: 1.4;
}


/* Generic centered card used for login/create forms */
.login_box,
.center_card {
    max-width: var(--max-width);
    margin: 6vh auto;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--box-shadow);
    padding: calc(var(--padding) + 6px);
    border: 1px solid rgba(0,0,0,0.06);
}


/* The create_account.php uses inline styles to center — provide a fallback */
.center_card {
    display: block;
}


/* Notice banner (cookies / noscript etc) /
.notice_banner {
    display: none; /* shown by JS when needed */
    max-width: var(--max-width);
    margin: 12px auto;
    background: #fffbe6;
    border: 1px solid #ffe58f;
    color: #6b4f00;
    padding: 12px 16px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}


/* Error / status messages */
.error {
    background: var(--error);
    border: 1px solid var(--error-border);
    color: var(--error-border);
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-weight: 600;
}


.status {
    background: var(--success);
    border: 1px solid rgba(40,167,69,0.25);
    color: #1b5e20;
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-weight: 600;
}


/* Form elements */
form {
    display: block;
}


input[type="email"],
input[type="password"],
input[type="text"],
input[type="search"],
textarea,
select {
    box-sizing: border-box;
    width: 100%;
    height: var(--input-height);
    padding: 0 12px;
    margin-bottom: 12px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 6px;
    font-size: 15px;
    background: #fff;
    outline: none;
    transition: box-shadow 0.12s ease, border-color 0.12s ease;
}


input:focus,
textarea:focus,
select:focus {
    border-color: rgba(31,111,235,0.9);
    box-shadow: 0 4px 12px rgba(31,111,235,0.08);
}


/* Small helper text */
.secondary_information {
    display: inline-block;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 8px;
}


/* Buttons */
button,
input[type="submit"] {
    display: inline-block;
    padding: 10px 16px;
    height: auto;
    min-height: var(--input-height);
    border-radius: 6px;
    border: none;
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: transform 0.06s ease, box-shadow 0.08s ease, opacity 0.08s ease;
    box-shadow: 0 4px 10px rgba(31,111,235,0.12);
}


button:hover,
input[type="submit"]:hover {
    transform: translateY(-1px);
    opacity: 0.98;
}


button:active,
input[type="submit"]:active {
    transform: translateY(0);
}


button[disabled],
input[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}


/* Links */
a {
    color: var(--accent);
    text-decoration: none;
}


a:hover {
    text-decoration: underline;
}


/* Checkbox / label layout for the "I accept" */
label {
    font-size: 14px;
    color: var(--text);
}


input[type="checkbox"] {
    width: auto;
    height: auto;
    vertical-align: middle;
    margin-right: 8px;
}


/* Google Sign-in container alignment */
.g_id_signin,
#g_id_onload {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}


/* Footer */
.footer {
    margin-top: 28px;
    padding: 18px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}


/* Responsive adjustments */
@media (max-width: 640px) {
    :root {
        --max-width: 92%;
        --padding: 14px;
    }
    .login_box,
    .center_card {
        margin: 4vh 4%;
        padding: 14px;
    }
    input[type="email"],
    input[type="password"] {
        font-size: 15px;
    }
}


/* Accessibility: focus outlines for keyboard users */
:focus {
    outline: 3px solid rgba(31,111,235,0.14);
    outline-offset: 2px;
}


/* Small utilities */
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; }
.mb-8 { margin-bottom: 8px; }


/* Fine-tune the inline form from create_account.php (fallback) /
DIV[style="transform: translate(-50%, -50%);"] {
    box-sizing: border-box;
    max-width: 720px;
    width: calc(100% - 48px);
}


/* Ensure large SVG icons in constants don't overflow */
svg {
    vertical-align: middle;
    max-height: 1.2em;
    max-width: 1.2em;
}