body::before { inset: 0; background: radial-gradient(ellipse at top, #25485d, #142737); filter: none; }
#ro-name-error { position: fixed; z-index: 10003; left: 50%; bottom: max(72px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(85%,420px); box-sizing: border-box; padding: 14px; border-radius: 10px; background: #733725; color: white; text-align: center; pointer-events: none; }
#ro-entry { background: #b9dbe1 url('../assets/login/ro-dawn-v1.webp') 38% center / cover no-repeat; }
#ro-entry .scene { width: 100%; max-width: 1440px; min-height: 100%; background: none; display: grid; grid-template-columns: 1fr minmax(320px,420px); align-content: center; align-items: center; gap: 36px; padding: 60px clamp(24px,6vw,90px); }
.ro-brand { align-self: start; color: #203f46; text-shadow: 0 2px 20px #fffffff0; }
.ro-eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .18em; color: #537c78; }
.ro-brand .ro-eyebrow { color: #365d61; font-size: 17px; }
.ro-brand h1 { margin: 22px 0 16px; font-family: Georgia,'Noto Serif TC',serif; font-size: clamp(30px,3.5vw,50px); line-height: 1.45; letter-spacing: .06em; }
.ro-brand p { font-size: 15px; line-height: 1.7; }
#ro-entry form { border: 1px solid #fff8; border-radius: 24px; background: #fffdf6f5; box-shadow: 0 20px 60px #1c414738; padding: 32px; }
#ro-entry h2 { text-align: left; font-size: 25px; line-height: 1.4; margin: 12px 0 6px; color: #244b4a; }
#ro-entry .ro-subtitle { margin: 0 0 24px; font-size: 13px; color: #6c7c78; }
#ro-entry label { display: block; margin: 15px 0; font-size: 13px; font-weight: 600; color: #465b55; }
#ro-entry input { display: block; margin-top: 8px; border-color: #d4ded6; background: #ffffffe0; border-radius: 10px; min-height: 50px; }
#ro-entry input::placeholder { color: #97a59f; font-size: 14px; }
#ro-entry input:focus-visible { outline-color: #78a89a; }
#ro-entry .actions { flex-direction: column; gap: 10px; margin-top: 20px; }
#ro-entry button { min-height: 50px; background: #2e6960; color: white; border: 1px solid #2e6960; border-radius: 10px; box-shadow: 0 4px 12px #32695c18; }
#ro-entry button[value=register] { background: transparent; color: #42685f; border-color: #c9d8cf; box-shadow: none; }
#ro-entry button:hover:not(:disabled) { filter: brightness(1.08); }
#ro-entry button:focus-visible { outline: 3px solid #d7af56; outline-offset: 3px; }
#ro-entry small { color: #78857d; font-size: 11px; }
#ro-entry footer { grid-column: 1 / -1; text-align: right; color: #294e52; font-size: 12px; text-shadow: 0 1px 10px white; }
#ro-loading { position: fixed; inset: 0; z-index: 10001; display: grid; place-items: center; padding: 24px; background: #c1dce6 url('../assets/login/ro-dawn-v1.webp') center / cover; }
#ro-loading > div { width: min(100%,360px); box-sizing: border-box; padding: 32px; border-radius: 24px; background: #fffdf6f5; color: #244b4a; box-shadow: 0 15px 60px #1c414740; }
#ro-loading h2 { font-size: 24px; } #ro-loading p { font-size: 14px; line-height: 1.6; }
#ro-loading progress { width: 100%; height: 10px; accent-color: #377867; }
#ro-loading button { margin-top: 20px; min-height: 48px; width: 100%; border: 0; border-radius: 8px; background: #2e6960; color: white; font-size: 16px; }
#ro-network { position: fixed; z-index: 10002; bottom: calc(12px + var(--ro-safe-bottom)); left: 12px; right: 12px; padding: 12px; border-radius: 8px; background: #633923ee; color: white; text-align: center; pointer-events: none; }
@media (max-width: 700px) {
 #ro-entry { background-image: url('../assets/login/ro-portrait-v1.webp'); background-position: center top; }
 #ro-entry .scene { display: flex; justify-content: flex-start; gap: 18px; padding: 28px 18px 18px; background: linear-gradient(#e8f7ff44 0%,#e8f7ff00 28%,#d6e6df88 48%,#d6e6dfe6 100%); }
 .ro-brand { align-self: stretch; } .ro-brand h1 { font-size: 27px; margin: 10px 0; } .ro-brand p { display: none; }
 .ro-brand .ro-eyebrow { font-size: 13px; }
 #ro-entry form { margin-top: auto; padding: 24px; max-width: 420px; border-radius: 20px; }
 #ro-entry h2 { font-size: 22px; margin: 0 0 18px; }
 #ro-entry .ro-subtitle, #ro-entry form > .ro-eyebrow { display: none; }
 #ro-entry label { display: flex; margin: 12px 0; gap: 12px; }
 #ro-entry input { margin-top: 0; }
 #ro-entry .actions { flex-direction: row; margin-top: 14px; }
 #ro-entry footer { text-align: center; }
}
@media (max-height: 650px) {
 #ro-entry .scene { padding-top: 16px; padding-bottom: 16px; gap: 12px; align-content: start; }
 .ro-brand h1 { font-size: 26px; } #ro-entry form { padding: 20px; }
 #ro-entry .ro-subtitle, #ro-entry footer, #ro-entry form > .ro-eyebrow { display: none; }
 #ro-entry h2 { margin-top: 0; }
}
.ro-keyboard #ro-entry .scene { display: flex; align-items: center; justify-content: flex-start; padding: 12px; }
.ro-keyboard .ro-brand, .ro-keyboard #ro-entry footer { display: none; }
.ro-keyboard #ro-entry form { margin-top: 0; }
/* Portrait tablets use the same single-column mobile composition. */
@media (min-width: 701px) and (orientation: portrait) {
 #ro-entry { background-image: url('../assets/login/ro-portrait-v1.webp'); background-position: center top; }
 #ro-entry .scene { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 24px; padding: 36px; }
 .ro-brand { align-self: stretch; }
 #ro-entry form { margin-top: auto; }
 #ro-entry footer { align-self: center; }
}