/* base.css — login page + shared design tokens (extracted from Views.kt PAGE_CSS). */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --card-bg: #f8fafc;
    --title: #0f172a;
    --muted: #64748b;
    --label: #5b6b7f;
    --input-bg: #eef1f4;
    --input-border: #dfe4ea;
    --input-text: #0f172a;
    --btn-bg: #33500b;
    --btn-bg-hover: #40650e;
    --toggle-bg: #e4e7eb;
    --note: #9aa5b1;
}
html[data-theme="dark"] {
    --card-bg: #17202b;
    --title: #f1f5f9;
    --muted: #94a3b8;
    --label: #9fb0c3;
    --input-bg: #0e141c;
    --input-border: #2c3a4b;
    --input-text: #e2e8f0;
    --btn-bg: #5a8a12;
    --btn-bg-hover: #6ba316;
    --toggle-bg: #243040;
    --note: #7c8a9b;
}
body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    background: radial-gradient(120% 140% at 38% 38%, #4b7108 0%, #33490a 40%, #1b2a06 72%, #101a04 100%);
}
html[data-theme="dark"] body {
    background: radial-gradient(120% 140% at 38% 38%, #22300a 0%, #161f07 45%, #0a0f04 100%);
}
.theme-toggle {
    position: fixed;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: var(--toggle-bg);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
}
.card {
    width: 100%;
    max-width: 500px;
    background: var(--card-bg);
    border-radius: 14px;
    padding: 44px 48px 36px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    text-align: center;
}

.logo { width: 200px; height: auto; display: block; margin: 0 auto 18px; }
.logo-img { width: 280px; max-width: 100%; height: auto; display: block; margin: 0 auto 18px; }
h1 { font-size: 21px; font-weight: 800; color: var(--title); margin-bottom: 8px; }
.subtitle { font-size: 13.5px; color: var(--muted); margin-bottom: 30px; }
form { text-align: left; }
.field { margin-bottom: 18px; }
label {
    display: block;
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--label);
}
input {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--input-text);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    outline: none;
}
input:focus { border-color: #6b9c1e; box-shadow: 0 0 0 3px rgba(107, 156, 30, .25); }
input::placeholder { color: #9aa5b1; }
button.submit, a.submit {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 13px;
    border: none;
    border-radius: 8px;
    background: var(--btn-bg);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
button.submit:hover, a.submit:hover { background: var(--btn-bg-hover); }
.error {
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid #f5c6c0;
    border-radius: 8px;
    background: #fdecea;
    color: #b3261e;
    font-size: 13px;
}
.note { margin-top: 22px; font-size: 11.5px; line-height: 1.6; color: var(--note); }

/* The password box and its show/hide button share the one line (Stage 121). The button sits inside the
   field so it can pin itself to the input's right edge, and the input reserves room for it so a long
   password never types under the word. It is hidden until login.js marks the document `html.js`: with
   scripting off a password box is all there is, and a button that could not reveal anything would be
   a control that lies. */
.password-wrap { position: relative; }
.password-wrap input { padding-right: 74px; }
.password-toggle {
    display: none;
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    padding: 7px 9px; border: 0; border-radius: 6px; background: transparent;
    color: var(--label); font-family: inherit; font-size: 11px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; cursor: pointer;
}
html.js .password-toggle { display: block; }
.password-toggle:hover { color: var(--title); background: var(--toggle-bg); }
.password-toggle:focus-visible { outline: 2px solid #6b9c1e; outline-offset: 1px; }