:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; color: #193d2c; background: #f6f8f1; }
* { box-sizing: border-box; }
body { min-height: 100dvh; margin: 0; background: radial-gradient(ellipse at 50% 22%, #e9f1e1, transparent 54%), #f6f8f1; }
button, input { font: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #83a575; outline-offset: 3px; }
.auth-shell { width: min(100%, 430px); min-height: 100dvh; margin: auto; padding: max(32px, env(safe-area-inset-top)) 28px max(35px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.auth-brand { display: flex; align-items: center; gap: 9px; color: #4b7056; font-size: 11px; font-weight: 800; letter-spacing: 0; }
.auth-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.auth-header .auth-brand { flex: 0 0 auto; white-space: nowrap; }
.auth-header .v2-language { flex: 0 1 170px; min-width: 0; margin: 0; justify-content: flex-end; }
.auth-header .v2-language > span { display: flex; align-items: center; flex: 0 0 20px; }
.auth-header .v2-language svg { width: 20px; height: 20px; }
.auth-header .v2-language select { width: 100%; min-width: 0; height: 36px; font: inherit; }
.auth-mark { width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: #28583b; color: #f4f7e9; font-size: 20px; letter-spacing: 0; }
.auth-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.auth-panel { margin: auto 0; padding: 42px 0 55px; }
.auth-panel h1 { margin: 0 0 34px; color: #173c2a; font-size: 34px; letter-spacing: -.05em; }
.auth-field { display: block; margin: 0 0 19px; }
.auth-field > span:first-child { display: block; margin-bottom: 9px; font-size: 13px; color: #587861; font-weight: 700; }
.auth-field input { width: 100%; height: 54px; border: 1px solid #dce8d6; border-radius: 15px; padding: 0 16px; color: #193d2c; background: rgba(255, 255, 251, .94); font-size: 16px; }
.auth-field input[readonly] { color: #6b8572; background: #edf3e9; }
.auth-captcha { display: flex; align-items: center; gap: 10px; }
.auth-captcha img { width: 118px; height: 54px; object-fit: contain; border-radius: 12px; background: white; }
.auth-captcha input { flex: 1; min-width: 0; }
.captcha-refresh { display: block; margin: -8px 0 19px auto; border: 0; background: none; color: #397348; font-size: 12px; cursor: pointer; }
.auth-submit { display: block; width: 100%; height: 56px; margin-top: 29px; border: 0; border-radius: 16px; color: #f7faee; background: linear-gradient(120deg, #1d5a3b, #327750); box-shadow: 0 10px 24px rgba(29, 90, 59, .19); font-size: 16px; font-weight: 750; cursor: pointer; }
.auth-switch { display: block; width: fit-content; margin: 26px auto 0; color: #397348; font-size: 13px; font-weight: 700; text-decoration: none; }
.auth-message { margin: -16px 0 24px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.auth-message.error { color: #895b4c; background: #f8eae3; }
.auth-message.success { color: #2e6544; background: #e3efe0; }
@media (max-height: 700px) { .auth-panel { padding: 30px 0; } .auth-panel h1 { margin-bottom: 25px; } .auth-field { margin-bottom: 14px; } }

.v2-language{display:flex;align-items:center;gap:6px;color:#55745f;font-size:12px}.v2-language select{max-width:150px;border:1px solid #dce5d7;border-radius:9px;padding:7px;background:#f8faf3;color:inherit}.auth-shell>.v2-language{justify-content:flex-end;margin:10px 0}.profile-language{display:flex;justify-content:flex-end;margin-bottom:12px}

/* The existing lightweight coin is cropped at display time to preserve its mark. */
.auth-panel-login { padding-top: 16px; }
.auth-coin { width: clamp(96px, 17dvh, 142px); aspect-ratio: 1; margin: 0 auto 26px; pointer-events: none; opacity: .55; }
.auth-coin img { display: block; width: 100%; height: 100%; clip-path: ellipse(42.5% 43% at 50% 48%); transform: scale(1.15); }
@media (max-height: 700px) { .auth-coin { width: 80px; margin-bottom: 16px; } }
@media (max-height: 520px) { .auth-coin { display: none; } }

.auth-coin { perspective: 700px; }
.auth-coin-spin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: auth-coin-turn 8s linear infinite; }
.auth-coin-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.auth-coin-front { transform: translateZ(1px); }
.auth-coin-back { transform: rotateY(180deg) translateZ(1px); }
@keyframes auth-coin-turn { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth-coin-spin { animation: none; } }