:root { color-scheme: light; --ink: #263e32; --muted: #77816f; --line: #dde3d7; --paper: #f6f8f2; --accent: #375d40; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: radial-gradient(ellipse at 90% 15%, #e8eddf 0, transparent 52%), var(--paper); font-family: "Helvetica Neue", "PingFang SC", sans-serif; min-height: 100dvh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
header { display: flex; align-items: center; justify-content: space-between; margin: 0 6vw; padding: 32px 0; border-bottom: 1px solid var(--line); }
.brand { font: 35px/1 Baskerville, "Songti SC", serif; color: var(--ink); text-decoration: none; letter-spacing: -1px; }
.brand span { color: #819167; }
header>span { color: var(--muted); font-size: 12px; }
main { display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 330px); gap: clamp(55px, 10vw, 150px); align-items: center; width: min(100% - 64px, 980px); margin: auto; padding: 72px 0; }
.eyebrow { color: var(--muted); font-size: 10px; letter-spacing: 2px; }
h1 { font: 500 38px/1.4 Baskerville, "Songti SC", serif; margin: 20px 0 12px; letter-spacing: -1px; }
.intro { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 0 0 36px; }
label { display: block; font-size: 12px; margin-bottom: 10px; font-weight: 500; }
.key-field { display: flex; border: 1px solid #bfcbb5; border-radius: 7px; overflow: hidden; background: #fffefa; }
.key-field:focus-within { outline: 2px solid #7d9c66; outline-offset: 3px; }
input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; padding: 16px; font: 13px "SFMono-Regular", Consolas, monospace; color: var(--ink); }
input::placeholder { color: #92998c; }
button { font: inherit; cursor: pointer; }
.key-field button { border: 0; padding: 0 16px; white-space: nowrap; background: transparent; color: #5d7255; font-size: 12px; }
.help { color: var(--muted); font-size: 11px; line-height: 1.8; margin: 10px 0 25px; }
.submit { display: block; width: 100%; border: 1px solid var(--accent); border-radius: 7px; padding: 14px; background: var(--accent); color: #fffef9; font-size: 14px; }
.submit:hover { background: #294b32; }
button:disabled { cursor: wait; opacity: .65; }
button:focus-visible, a:focus-visible { outline: 2px solid #7d9c66; outline-offset: 4px; }
#login-status { background: #f7eee5; color: #8e4d39; border: 1px solid #e6d4c3; border-radius: 6px; padding: 12px 14px; font-size: 12px; line-height: 1.8; }
.security-note { display: flex; gap: 12px; margin-top: 24px; color: var(--muted); }
.security-note>span { font-size: 22px; }
.security-note p { margin: 0; font-size: 11px; line-height: 1.9; max-width: 350px; }
.product-panel { padding: 36px 32px; border: 1px solid #d9e1d0; background: linear-gradient(150deg, #e8eedf, #f3f6ed 80%); border-radius: 12px; }
.product-rule { width: 36px; height: 3px; background: #93a579; margin-bottom: 32px; }
h2 { font: 500 29px/1.5 Baskerville, "Songti SC", serif; margin: 18px 0 28px; }
dl { margin: 0; }
dl>div { border-top: 1px solid #d6dfcb; padding: 18px 0; }
dt { font-size: 13px; }
dd { font-size: 11px; color: var(--muted); margin: 8px 0 0; line-height: 1.7; }
.product-panel>p { font-size: 10px; color: var(--muted); line-height: 1.8; margin: 22px 0 0; }
footer { margin: 0 6vw; padding: 22px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }
@media (max-width: 760px) {
  header { padding: 24px 0; }
  main { grid-template-columns: 1fr; max-width: 430px; width: calc(100% - 40px); gap: 42px; padding: 48px 0; }
  h1 { font-size: 32px; }
  .product-panel { padding: 24px; }
  .product-panel h2 { font-size: 24px; margin-bottom: 18px; }
  .product-rule { margin-bottom: 22px; }
}