/* Login-only materials. Authentication controls stay above the optical layer. */
.login-page, .login-page * { box-sizing: border-box; }
.login-page {
  margin: 0; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: #0F172A; background: #F8FAFC; -webkit-font-smoothing: antialiased;
}
.login-backdrop {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at 36% 62%, rgba(251,146,60,.17), transparent 48%),
    radial-gradient(ellipse at 80% 40%, rgba(226,232,240,.28), transparent 60%),
    linear-gradient(90deg, rgba(203,213,225,.16) 1px, transparent 1px),
    linear-gradient(rgba(203,213,225,.16) 1px, transparent 1px), #FAFBFD;
  background-size: auto, auto, 64px 64px, 64px 64px, auto;
}
.login-header, .login-layout { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }
.login-header { padding-block: 34px 24px; }
.login-brand { display: flex; align-items: center; gap: 13px; font-size: 20px; font-weight: 750; letter-spacing: -.4px; }
.login-brand-mark { width: 38px; height: 40px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg,#FB923C,#F97316 50%,#EA580C); border-radius: 10px; box-shadow: inset 0 1px 0 #FFC996, 0 4px 12px #F973161A; }
.login-brand-mark svg { width: 27px; height: 27px; }
.login-layout { flex: 1; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(350px, 1fr); gap: clamp(40px, 5vw, 88px); align-items: center; padding-block: 40px 50px; }
.login-intro { min-width: 0; padding-top: 2px; }
.login-intro h1 { margin: 0; font-size: clamp(42px, 4.5vw, 66px); font-weight: 760; line-height: 1.24; letter-spacing: -2.8px; }
.login-intro h1 span { color: #EA580C; }
.intro-description { font-size: 16px; line-height: 1.8; margin: 20px 0 0; color: #64748B; }
.glass-art { --glass-x: 50%; --glass-y: 50%; --tilt-x: 0deg; --tilt-y: 0deg; --float-x: 0px; --float-y: 0px; margin: 18px -22px 12px; perspective: 1000px; touch-action: pan-y; }
.glass-art-surface { position: relative; transform: translate3d(var(--float-x),var(--float-y),0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); }
.glass-art img { display: block; width: 100%; height: auto; user-select: none; }
.glass-art-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.glass-art[data-glass-status="webgl"] .glass-art-canvas { opacity: 1; }
.glass-art[data-glass-status="webgl"] img { visibility: hidden; }
.login-modules { list-style: none; padding: 0; margin: 22px 0 0; display: flex; color: #64748B; font-size: 13px; }
.login-modules li { flex: 1; text-align: center; padding-inline: 10px; line-height: 1.5; }
.login-modules li:first-child { text-align: left; padding-left: 0; }
.login-modules li + li { border-left: 1px solid #CBD5E1; }
.login-card { --glass-x: 50%; --glass-y: 35%; --tilt-x: 0deg; --tilt-y: 0deg; --glass-active: 0; position: relative; perspective: 1200px; border-radius: 30px; margin-block: 6px; }
.glass-shell {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.94);
  box-shadow: 0 24px 54px -30px #33415559, 0 0 0 1px #CBD5E180, inset 0 2px 3px #FFF, inset 0 -2px 3px #CBD5E15C;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); overflow: hidden;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-shell { background: rgba(255,255,255,.56); backdrop-filter: blur(18px) saturate(125%); -webkit-backdrop-filter: blur(18px) saturate(125%); }
}
.glass-shell::before, .glass-shell::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.glass-shell::before { z-index: 1; border: 1px solid #FFF; box-shadow: inset 0 0 0 4px #FFFFFF40; background: radial-gradient(ellipse 280px 240px at var(--glass-x) var(--glass-y), rgba(255,255,255,.8), transparent 70%); opacity: calc(.2 + var(--glass-active) * .6); }
.glass-shell::after { background: radial-gradient(ellipse at 0 100%,#FED7AA55,transparent 55%), linear-gradient(145deg,#FFFFFF80,transparent 35%,transparent 70%,#FFFFFF90); }
.glass-card-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.login-card[data-glass-status="webgl"] .glass-card-canvas { opacity: 1; }
.login-card-content { position: relative; z-index: 1; padding: 48px 40px 34px; }
.login-card h2 { margin: 0 0 9px; font-size: 30px; font-weight: 750; letter-spacing: -.8px; }
.login-sub { margin: 0 0 34px; font-size: 14px; color: #64748B; line-height: 1.6; }
.form-group { margin-bottom: 22px; }
.form-label { display: block; margin-bottom: 10px; color: #334155; font-size: 13px; font-weight: 600; }
.form-input { width: 100%; height: 49px; padding: 0 15px; color: #0F172A; border: 1px solid #CBD5E1; border-radius: 11px; font: inherit; font-size: 14px; background: rgba(255,255,255,.94); transition: border-color .18s, box-shadow .18s; }
.login-page .form-input::placeholder { color: #64748B; opacity: .85; }
.form-input:hover { border-color: #94A3B8; }
.login-page .form-input:focus { outline: none; border-color: #EA580C; box-shadow: 0 0 0 3px #F9731626; background: #FFF; }
.form-row-flex { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 2px 0 26px; font-size: 13px; }
.form-row-flex label { display: inline-flex; align-items: center; gap: 8px; color: #475569; cursor: pointer; min-height: 30px; }
.form-row-flex input { width: 17px; height: 17px; margin: 0; accent-color: #EA580C; cursor: pointer; }
.form-row-flex a { color: #C2410C; text-decoration: none; padding-block: 7px; }
.form-row-flex a:hover { text-decoration: underline; text-underline-offset: 4px; }
.btn-login { position: relative; width: 100%; min-height: 49px; padding: 12px 42px; border: 0; border-radius: 11px; background: linear-gradient(115deg,#EF710D,#EA580C); color: #FFF; font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; box-shadow: inset 0 1px 0 #FFFFFF4D, 0 6px 16px -8px #EA580C80; transition: box-shadow .2s, transform .2s, background .2s; }
.btn-login::after { content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 12px; vertical-align: -2px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.btn-login:hover:not(:disabled) { transform: translateY(-1px); background: linear-gradient(115deg,#EA580C,#C2410C); box-shadow: inset 0 1px 0 #FFFFFF66, 0 9px 22px -8px #EA580C88; }
.btn-login:active:not(:disabled) { transform: translateY(0); }
.btn-login:disabled { opacity: .65; cursor: wait; }
.btn-login:disabled::after { display: none; }
.login-page :is(button, a, input[type="checkbox"]):focus-visible { outline: 2px solid #C2410C; outline-offset: 4px; }
.login-account-note { display: flex; align-items: center; gap: 12px; font-size: 12px; line-height: 1.5; color: #64748B; text-align: center; margin: 30px 0 0; }
.login-account-note::before, .login-account-note::after { content: ''; flex: 1; height: 1px; background: #CBD5E1A6; }
.err-tip { display: none; background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; border-radius: 9px; padding: 11px 13px; margin-bottom: 20px; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.err-tip.show { display: block; }
.login-footer { text-align: center; color: #64748B; font-size: 12px; padding: 18px 24px 28px; }
@media (min-width: 1600px) { .login-layout { max-height: 880px; margin-block: auto; } }
@media (max-width: 1100px) {
  .login-header, .login-layout { width: calc(100% - 64px); }
  .login-layout { gap: 32px; grid-template-columns: minmax(0, 1fr) 370px; }
  .login-intro h1 { font-size: 46px; }
  .intro-description { max-width: 340px; font-size: 14px; }
  .login-card-content { padding: 38px 30px 30px; }
  .login-modules { flex-wrap: wrap; row-gap: 12px; }
  .login-modules li { flex: 0 0 50%; text-align: left; padding-inline: 12px; }
  .login-modules li:nth-child(odd) { border-left: none; padding-left: 0; }
}
@media (max-width: 780px) {
  .login-header, .login-layout { width: min(460px, calc(100% - 40px)); }
  .login-header { padding-block: 26px 18px; }
  .login-brand { font-size: 18px; gap: 10px; }
  .login-brand-mark { width: 33px; height: 35px; }
  .login-layout { display: flex; flex-direction: column; gap: 26px; align-items: stretch; justify-content: center; padding-block: 20px 28px; }
  .login-intro h1 { font-size: 30px; letter-spacing: -1px; line-height: 1.4; }
  .login-intro h1 br { display: none; }
  .intro-description { font-size: 13px; margin-top: 8px; max-width: none; }
  .glass-art, .login-modules { display: none; }
  .login-card { margin: 0; border-radius: 24px; }
  .login-card-content { padding: 30px 26px 26px; }
  .login-card h2 { font-size: 26px; }
  .login-sub { margin-bottom: 26px; }
  .form-input { font-size: 16px; }
  .login-footer { padding-bottom: 22px; }
}
@media (max-width: 360px) {
  .login-header, .login-layout { width: calc(100% - 28px); }
  .login-intro h1 { font-size: 26px; }
  .login-card-content { padding-inline: 20px; }
  .form-row-flex { gap: 6px; font-size: 12px; }
}
@media (min-width: 781px) and (max-height: 820px) {
  .login-header { padding-block: 24px 16px; }
  .login-layout { padding-block: 20px; }
  .login-intro h1 { font-size: 48px; line-height: 1.2; }
  .intro-description { margin-top: 14px; font-size: 14px; }
  .glass-art { max-width: 550px; margin: 10px -14px 0; }
  .login-modules { margin-top: 16px; }
  .login-card-content { padding-block: 32px 26px; }
  .login-sub { margin-bottom: 26px; }
  .form-group { margin-bottom: 18px; }
  .form-row-flex { margin-bottom: 20px; }
  .login-account-note { margin-top: 26px; }
  .login-footer { padding-block: 12px 18px; }
}
@media (prefers-reduced-motion: reduce), (hover: none) {
  .login-page *, .login-page *::before, .login-page *::after { transition: none !important; animation: none !important; }
  .glass-shell, .glass-art-surface, .btn-login { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass-shell { background: #FFF; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass-card-canvas, .glass-shell::before, .glass-shell::after { display: none; }
}