#login { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; overflow: auto; font-family: var(--f-font); color: #fff;
  padding: calc(env(safe-area-inset-top) + var(--edge)) calc(env(safe-area-inset-right) + var(--edge)) calc(env(safe-area-inset-bottom) + var(--edge)) calc(env(safe-area-inset-left) + var(--edge));
  background: radial-gradient(120% 90% at 50% 0%, var(--f-bg3), transparent 60%), linear-gradient(135deg, var(--f-bg1), var(--f-bg2) 60%, var(--f-bg3)); }
#login[hidden] { display: none; }
#login::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 22px); pointer-events: none; }
#rotate { z-index: 30; }
.lg-box { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; width: min(calc(440 * var(--u)), 100%); min-width: min(300px, 100%); }
.lg-logo { display: flex; flex-direction: column; align-items: center; transform: rotate(-3deg); }
.lg-logo b.f-title { font-size: max(calc(64 * var(--u)), 44px); color: var(--f-yellow); text-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); padding-right: 0.12em; }
.lg-logo span.f-title { font-size: max(calc(26 * var(--u)), 19px); margin-top: 2px; padding-right: 0.12em; }
.lg-sub { font-size: max(calc(15 * var(--u)), 13px); margin: calc(10 * var(--u)) 0 calc(14 * var(--u)); }
.lg-btns { display: flex; flex-direction: column; align-items: stretch; gap: calc(12 * var(--u)); width: 100%; }
.lg-btns .f-btn, .lg-btns .gbtn { width: 100%; min-height: max(56px, calc(62 * var(--u))); font-size: max(calc(20 * var(--u)), 17px); }
.lg-g { display: flex; justify-content: center; }
.lg-note { font: 500 max(calc(13 * var(--u)), 12px)/1.3 var(--f-font); color: var(--f-dim); margin: calc(12 * var(--u)) 0 0; max-width: 100%; }
.lg-err { min-height: 1.2em; margin-top: 6px; font: 700 max(calc(15 * var(--u)), 13px)/1.2 var(--f-font); color: #ffd0d5; }
.lg-err:empty { display: none; }

.gbtn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: max(56px, calc(56 * var(--u))); padding: 0 20px; border: 0; border-radius: 8px; cursor: pointer; background: #fff; color: #1f1f1f;
  font-family: var(--f-font); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: max(calc(17 * var(--u)), 15px); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.25); }
.gbtn:active { filter: brightness(0.94); transform: translateY(2px); }
.gbtn:disabled { opacity: 0.6; }
.gbtn .glogo { width: max(24px, calc(26 * var(--u))); height: max(24px, calc(26 * var(--u))); flex: none; }
.gisbox { display: flex; justify-content: center; min-height: 44px; }

.lg-link .lg-g { margin-top: calc(14 * var(--u)); }
.lg-link .gbtn { max-width: 420px; }
.lg-pick-row { display: flex; gap: calc(12 * var(--u)); margin-top: calc(12 * var(--u)); }
.lg-card { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: calc(12 * var(--u)) calc(14 * var(--u)); min-height: max(96px, calc(100 * var(--u))); border: 0; border-radius: 8px; cursor: pointer; text-align: left; color: #fff;
  background: rgba(8, 30, 90, 0.5); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2); font-family: var(--f-font); }
.lg-card:active { transform: translateY(2px); }
.lg-card b { font: 700 max(calc(20 * var(--u)), 16px)/1.1 var(--f-font); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-card small { font: 500 max(calc(13 * var(--u)), 12px)/1.25 var(--f-font); color: var(--f-dim); }
.lg-card em { margin-top: auto; padding-top: 6px; font-style: normal; font-weight: 700; text-transform: uppercase; color: var(--f-yellow); font-size: max(calc(15 * var(--u)), 13px); }