.boot{
  position:fixed; inset:0; z-index:8800;
  display:flex; flex-direction:column;
  font-family:var(--sans);
  background:
    linear-gradient(180deg,#4a6fc8 0%, #5c82d8 22%, #6f96e8 50%, #5c82d8 78%, #3d5eb4 100%);
  overflow:hidden;
  user-select:none;
}


.boot-top{
  flex:0 0 78px;
  background:linear-gradient(180deg,#33509e,#2a4488);
  border-bottom:1px solid #8fabee;
  display:flex; align-items:center; padding:0 34px;
}
.boot-wordmark{
  font-family:"Times New Roman",serif; font-style:italic;
  font-size:26px; color:#dfe8ff; letter-spacing:.5px;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.boot-wordmark b{ color:#ff9ecd; font-style:normal; font-weight:normal; }
.boot-top .spacer{ flex:1; }
.boot-top .dayline{ color:#a9bdf0; font-size:11.5px; letter-spacing:1px; }

.boot-bottom{
  flex:0 0 74px; margin-top:auto;
  background:linear-gradient(180deg,#2a4488,#33509e);
  border-top:1px solid #8fabee;
  display:flex; align-items:center; padding:0 34px; gap:26px;
}
.boot-bottom a{
  color:#dfe8ff; font-size:12px; text-decoration:none; cursor:default;
  display:flex; align-items:center; gap:7px;
}
.boot-bottom a:hover{ color:#fff; text-decoration:underline; }
.boot-bottom .ico16{
  width:22px; height:22px; border-radius:4px; display:inline-block;
  background:linear-gradient(180deg,#ff8fc4,#d94b8a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  text-align:center; line-height:22px; font-size:13px; color:#fff;
}
.boot-bottom .off .ico16{ background:linear-gradient(180deg,#e08a7a,#b04a38); }
.boot-bottom .tip{ margin-left:auto; color:#9fb4ea; font-size:11px; }


.boot-band{
  flex:1; position:relative;
  display:flex; align-items:center; justify-content:center;
}

.boot-band::before{
  content:''; position:absolute; left:0; right:0; top:50%;
  height:230px; margin-top:-115px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 40%,rgba(0,0,0,.10));
  border-top:1px solid rgba(255,255,255,.35);
  border-bottom:1px solid rgba(0,0,0,.16);
}

.boot-inner{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:26px;
  padding:0 26px;
}


.boot-avatar{
  width:104px; height:104px; flex:0 0 104px;
  border:3px solid #fff; border-radius:6px; overflow:hidden;
  background:#cfd8ee;
  box-shadow:0 3px 10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.25);
}
.boot-avatar img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.92) contrast(1.02); }

.boot-form{ min-width:330px; }
.boot-user{
  font-family:var(--hei); font-size:23px; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45); margin-bottom:4px;
}
.boot-ask{ font-size:12px; color:#dbe4fb; margin-bottom:10px; }

.boot-row{ display:flex; align-items:center; gap:8px; }
.boot-input{
  width:190px; font-family:var(--sans); font-size:13px;
  padding:4px 7px; border:1px solid #2a4488; outline:none;
  background:#fff; letter-spacing:1px;
}
.boot-go{
  width:28px; height:26px; padding:0; cursor:pointer;
  border:1px solid #2a4488; color:#2a4488;
  background:linear-gradient(180deg,#fff,#dbe4fb);
  font-size:14px; line-height:1;
}
.boot-go:hover{ background:linear-gradient(180deg,#fff,#ffd9ea); }

.boot-hint{
  margin-top:9px; font-size:11.5px; color:#c3d2f5; line-height:1.9;
}
.boot-hint b{ color:#ffd9ea; font-weight:normal; }
.boot-err{
  margin-top:6px; font-size:11.5px; color:#ffd0d0; min-height:17px;
}
.boot-err::before{ content:''; }
.boot-err.on{
  background:#8a2b2b; border:1px solid #d98a8a; padding:3px 8px; display:inline-block;
}


.boot-band > div[class^="sk-"]{
  position:absolute; z-index:1; pointer-events:none; line-height:0;
}
.boot .sticker{
  display:block;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.sk-1{ left:11%;  top:12%;  transform:rotate(-14deg); }
.sk-2{ left:19%;  bottom:14%; transform:rotate(11deg); }
.sk-3{ left:4%;   top:45%;  transform:rotate(-6deg); }
.sk-4{ right:8%;  top:15%;  transform:rotate(17deg); }
.sk-5{ right:18%; bottom:12%; transform:rotate(-12deg); }
.sk-6{ right:3%;  top:54%;  transform:rotate(9deg); }
.sk-7{ left:33%;  top:5%;   transform:rotate(-20deg); }
.sk-8{ right:31%; bottom:5%; transform:rotate(14deg); }


.sk-tape-1{ left:14%; top:36%; transform:rotate(-24deg); }
.sk-tape-2{ right:13%; bottom:35%; transform:rotate(16deg); }


.boot-welcome{
  position:absolute; inset:0; z-index:9;
  background:linear-gradient(180deg,#4a6fc8,#3d5eb4);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--hei); font-size:40px; letter-spacing:14px; color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.45);
  animation:fadeIn .5s ease-out;
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }


.boot-shutdown{
  position:absolute; inset:0; z-index:10;
  background:linear-gradient(180deg,#3d5eb4,#2a4488);
  display:flex; align-items:center; justify-content:center;
  color:#c3d2f5; font-size:14px; line-height:2.2; text-align:center;
}
.boot-shutdown b{ color:#fff; display:block; font-family:var(--hei);
  font-size:18px; letter-spacing:4px; margin-bottom:14px; }

@media (max-width: 780px){
  .boot-inner{ flex-direction:column; gap:14px; text-align:center; }
  .boot-band::before{ height:330px; margin-top:-165px; }
  .boot-form{ min-width:0; }
  .boot-row{ justify-content:center; }
  .sk-3,.sk-6,.sk-7,.sk-8,.sk-tape-1,.sk-tape-2{ display:none; }
}