* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px;
  background: linear-gradient(160deg, #fbeaea, #f7f7f7 60%);
  color: #222; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
.login-box { width: 100%; max-width: 360px; background: #fff; border: 1px solid #e4e4e4; border-radius: 12px; padding: 28px 24px; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
h1 { margin: 0 0 4px; font-size: 1.3rem; color: #8b0000; }
.sub { margin: 0 0 20px; color: #666; font-size: .85rem; }
form { display: flex; flex-direction: column; gap: 14px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: #666; }
input { font: inherit; font-size: 1rem; padding: 10px 12px; border: 1px solid #ccc; border-radius: 8px; color: #222; }
input:focus { outline: 2px solid #4a90e2; outline-offset: -1px; border-color: #4a90e2; }
button { font: inherit; font-weight: 700; padding: 11px; border: 0; border-radius: 8px; background: #8b0000; color: #fff; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
.error { min-height: 1.2em; color: #b03a2e; font-size: .85rem; }