/* EduPage-style theme - own neutral styling, not a product clone.
   Tuned to resemble the reference layout: soft grey-blue card, light heading,
   green primary button, blue Microsoft button. */

:root {
    --ink: #37474a;
    --muted: #7b8a8e;
    --line: #cfd8d8;
    --brand: #4caf82;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(1200px 600px at 80% -10%, #eef3f3 0%, transparent 60%),
        linear-gradient(160deg, #e7edee 0%, #dde5e6 100%);
    padding: 24px;
    -webkit-font-smoothing: antialiased;
}

.card {
    width: 100%;
    max-width: 420px;
    border-radius: 12px;
    padding: 34px 30px 30px;
}
.login-form { display: flex; flex-direction: column; gap: 14px; }

/* Inputs */
.field input[type="text"],
.field input[type="password"] {
    width: 100%;
    padding: 14px 15px;
    font-size: 15px;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    outline: none;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder { color: #9aa7ab; }
.field input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(76, 175, 130, .18);
}

.row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin: 2px 0;
}
.remember { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink); }
.remember input { width: 16px; height: 16px; accent-color: var(--brand); }
.link-muted { color: var(--muted); text-decoration: none; }
.link-muted:hover { color: var(--ink); text-decoration: underline; }

/* Buttons */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: transform .04s, filter .15s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    gap: 12px;
    margin: 2px 0;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

[data-decoy], [data-sso] { cursor: pointer; }

/* EduPage card */
.theme-edupage {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #e4ebeb 0%, #dbe4e4 100%);
    box-shadow: 0 10px 30px rgba(55, 71, 74, .12), inset 0 1px 0 rgba(255,255,255,.6);
}
.theme-edupage .user-glyph {
    position: absolute;
    top: 14px; right: 18px;
    font-size: 52px;
    color: #ffffff;
    opacity: .55;
    text-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.title-edu {
    margin: 2px 0 22px;
    font-size: 32px;
    font-weight: 300;
    letter-spacing: .2px;
    color: #40524f;
}

.btn-primary-edu {
    color: #fff;
    background: linear-gradient(180deg, #59c191 0%, var(--brand) 100%);
    box-shadow: 0 6px 14px rgba(76, 175, 130, .35);
}
.btn-primary-edu:hover { filter: brightness(1.03); }

.btn-ms {
    color: #fff;
    background: #2f6fd0;
    box-shadow: 0 6px 14px rgba(47, 111, 208, .30);
}
.btn-ms:hover { filter: brightness(1.03); }
.btn-outline { background: #fff; color: var(--ink); border: 1px solid var(--line); font-weight: 500; }
.btn-outline:hover { background: #f5f7f7; }
.ms-glyph {
    width: 16px; height: 16px;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
}
.ms-glyph::before,
.ms-glyph::after {
    content: "";
    background:
        linear-gradient(#fff, #fff) left top / 7px 7px no-repeat,
        linear-gradient(#fff, #fff) right top / 7px 7px no-repeat;
    height: 16px;
}
/* simpler robust 4-square windows mark */
.ms-glyph {
    background:
        linear-gradient(#fff,#fff) 0 0 / 7px 7px no-repeat,
        linear-gradient(#fff,#fff) 9px 0 / 7px 7px no-repeat,
        linear-gradient(#fff,#fff) 0 9px / 7px 7px no-repeat,
        linear-gradient(#fff,#fff) 9px 9px / 7px 7px no-repeat;
}
.ms-glyph::before, .ms-glyph::after { content: none; }

.foot-note { text-align: center; font-size: 14px; color: var(--muted); margin: 6px 0 0; }
.foot-note a { color: var(--ink); text-decoration: underline; }

@media (max-width: 480px) {
    .card { padding: 26px 20px; border-radius: 10px; }
    .title-edu { font-size: 28px; }
}