/* STORM: private PIN screen (loads before anything else). */
:root { --bg: #04060b; --ink: #eef3ff; --dim: #8a93a8; --cyan: #5fe1ff; --blue: #4c7dff; --pink: #ff4fd8; --line: rgba(140, 190, 255, 0.2);
  --sans: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Inter, Arial, sans-serif; --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace; }
html, body { margin: 0; width: 100%; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-tap-highlight-color: transparent; }
body.signin { overflow: auto; }
#login { display: none; }
body.signin #login { display: flex; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; overflow-y: auto;
  padding: calc(18px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom));
  background: radial-gradient(ellipse 90% 60% at 50% 18%, rgba(76,125,255,.16), rgba(4,6,11,0) 60%), radial-gradient(ellipse 70% 50% at 50% 110%, rgba(255,79,216,.08), rgba(4,6,11,0) 60%), var(--bg); }
.lg-glow { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(140,190,255,.14) 1px, transparent 1px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 70%); }
.lg-card { position: relative; width: 100%; max-width: 340px; margin: auto; display: flex; flex-direction: column; animation: lgIn .7s cubic-bezier(.2,.8,.2,1) both; }
.lg-card[hidden] { display: none; }
@keyframes lgIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lg-orb { position: relative; width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff 0%, #c6f5ff 9%, var(--cyan) 30%, var(--blue) 60%, #1a1f5c 100%);
  box-shadow: 0 0 44px rgba(95,225,255,.55), 0 0 120px rgba(76,125,255,.35); animation: lgBreath 4.5s ease-in-out infinite; }
.lg-orb i { position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(95,225,255,.35); animation: lgRing 4.5s ease-out infinite; }
.lg-orb i.i2 { animation-delay: 2.25s; }
.lg-orb.whirl, body.busy .lg-orb { animation: lgSpin 1.6s linear infinite; }
.lg-orb.whirl i, body.busy .lg-orb i { border-style: dashed; animation: lgTurn 2.2s linear infinite; }
@keyframes lgBreath { 0%, 100% { transform: scale(.97); filter: brightness(.95); } 50% { transform: scale(1.03); filter: brightness(1.12); } }
@keyframes lgRing { from { transform: scale(.92); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
@keyframes lgSpin { from { filter: hue-rotate(0deg) brightness(1.1); } to { filter: hue-rotate(360deg) brightness(1.1); } }
@keyframes lgTurn { from { transform: rotate(0) scale(1.05); } to { transform: rotate(360deg) scale(1.05); } }
.lg-k { font: 600 11px/1 var(--mono); letter-spacing: .42em; color: var(--cyan); text-align: center; }
.lg-card h1 { font: 700 27px/1.15 var(--sans); letter-spacing: -.02em; margin: 10px 0 6px; text-align: center; }
.lg-sub { color: var(--dim); font-size: 15px; margin: 0 0 14px; text-align: center; line-height: 1.4; }
.lg-sub b { color: var(--ink); font-weight: 600; }
#pin-in { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
#pin-dots { display: flex; gap: 14px; justify-content: center; margin: 6px 0 18px; min-height: 16px; }
#pin-dots i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(95,225,255,.55); transition: all .15s; }
#pin-dots i.opt { border-style: dashed; opacity: .6; }
#pin-dots i.on { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px rgba(95,225,255,.8); opacity: 1; }
#pin-dots.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
#pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; max-width: 290px; margin: 0 auto; }
#pin-pad button { height: 60px; border-radius: 30px; border: 1px solid var(--line); background: rgba(14,20,34,.8); color: var(--ink);
  font: 500 25px/1 var(--sans); cursor: pointer; transition: background .12s, transform .08s; touch-action: manipulation; }
#pin-pad button:active { background: rgba(95,225,255,.25); transform: scale(.95); }
#pin-pad button[data-k="del"] { font-size: 20px; color: var(--dim); background: transparent; border-color: transparent; }
#pin-go { background: linear-gradient(135deg, var(--cyan), #8fb0ff) !important; color: #04121c !important; border: 0 !important; font-size: 22px !important; }
#pin-go:disabled { opacity: .5; }
.lg-keep { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px 2px 0; font: 400 14px/1.3 var(--sans); color: var(--ink); cursor: pointer; user-select: none; }
.lg-keep input { position: absolute; opacity: 0; width: 0; height: 0; }
.lg-keep .box { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line); background: rgba(14,20,34,.9); position: relative; transition: all .2s; }
.lg-keep input:checked + .box { background: linear-gradient(135deg, var(--cyan), var(--blue)); border-color: transparent; }
.lg-keep input:checked + .box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #04121c; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.lg-keep em { color: var(--dim); font-style: normal; }
#lg-msg { min-height: 1.3em; margin-top: 12px; text-align: center; font-size: 14px; line-height: 1.4; color: #ff9b9b; }
#lg-msg.info { color: var(--dim); }
#pair-code { font: 700 46px/1 var(--mono); letter-spacing: .12em; text-align: center; color: var(--cyan); margin: 8px 0 14px; text-shadow: 0 0 24px rgba(95,225,255,.6); }
#pair-cancel { margin: 8px auto 0; background: none; border: 1px solid var(--line); color: var(--dim); border-radius: 999px; padding: 10px 22px; font: 500 14px/1 var(--sans); cursor: pointer; }
.lg-foot { margin-top: 22px; text-align: center; font: 500 10px/1 var(--mono); letter-spacing: .32em; color: rgba(138,147,168,.6); }
.lg-foot b { color: var(--cyan); font-weight: 600; }
@media (max-height: 700px) { .lg-orb { width: 64px; height: 64px; margin-bottom: 10px; } #pin-pad button { height: 52px; } .lg-card h1 { font-size: 23px; } }
body.booting::after { content: ""; position: fixed; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px; border-radius: 50%; z-index: 99;
  background: radial-gradient(circle at 38% 34%, #fff 0%, #c6f5ff 9%, var(--cyan) 30%, var(--blue) 60%, #1a1f5c 100%); animation: lgSpin 1.4s linear infinite; }
#lg-reconnect { margin-left: 8px; font: 600 12px/1 var(--mono, ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan, #5fe1ff);
  background: rgba(95,225,255,.12); border: 1px solid rgba(95,225,255,.4); border-radius: 999px; padding: 8px 14px; cursor: pointer; vertical-align: middle; }