/* Adapted from File Browser login.css, Apache-2.0.
 * Copyright File Browser Contributors. Modified 2026-11-02:
 * standalone responsive layout, local assets and own branding.
 * See LICENSE.txt and NOTICE.txt. */
:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; color: #37474f; background: #fafafa; }
* { box-sizing: border-box; }
body { margin: 0; }
#login { min-height: 100svh; display: grid; place-items: center; padding: 48px 24px 76px; }
.panel { width: 100%; max-width: 320px; }
.logo { width: 64px; height: 64px; margin: 0 auto; display: block; }
h1 { text-align: center; font-size: 40px; font-weight: 500; letter-spacing: -1.3px; margin: 14px 0 8px; }
.subtitle { text-align: center; margin: 0 0 34px; color: #78909c; font-size: 14px; }
label { display: block; font-size: 13px; font-weight: 500; margin: 20px 0 8px; color: #546e7a; }
input { font: inherit; font-size: 15px; width: 100%; height: 48px; padding: 0 14px; border: 1px solid #dce2e5; border-radius: 4px; background: #fff; color: #263238; transition: border-color .15s, box-shadow .15s; }
input::placeholder { color: #98a6ad; }
input:focus { outline: none; border-color: #2196f3; box-shadow: 0 0 0 3px #2196f31a; }
button { margin-top: 25px; width: 100%; min-height: 46px; border: 0; border-radius: 4px; background: #2196f3; color: white; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; }
button:hover { background: #1e88e5; }
button:focus-visible { outline: 3px solid #90caf9; outline-offset: 3px; }
button:disabled { cursor: default; background: #64b5f6; }
.spinner { display: none; width: 16px; height: 16px; border: 2px solid #ffffff66; border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
form[aria-busy="true"] .spinner { display: inline-block; }
.message { min-height: 40px; margin: 14px 0 0; font-size: 13px; line-height: 20px; text-align: center; color: #c44949; }
footer { position: fixed; bottom: 24px; left: 0; right: 0; text-align: center; font-size: 12px; color: #a0acb2; }
footer span { padding: 0 7px; }
.no-script { font-size: 13px; text-align: center; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-height: 600px) { #login { padding-top: 28px; } footer { position: static; padding: 0 0 20px; } }
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }