:root{
  font-family:system-ui,"Microsoft YaHei",sans-serif;
  color:#163047;
  background:#f2f6fb;
  line-height:1.6
}
*{
  box-sizing:border-box
}
body{
  margin:0
}
header{
  background:#123c70;
  color:white;
  padding:18px max(5vw,20px);
  display:flex;
  gap:20px;
  align-items:center
}
header strong{
  letter-spacing:.12em
}
header button{
  margin-left:auto
}
main{
  max-width:1100px;
  margin:24px auto;
  padding:0 16px
}
section{
  background:white;
  border:1px solid #dce6f1;
  border-radius:14px;
  padding:24px;
  margin-bottom:20px
}
h1{
  font-size:23px;
  margin:0 0 18px
}
h2{
  font-size:20px
}
form{
  display:grid;
  gap:16px;
  max-width:560px
}
label{
  display:grid;
  gap:5px
}
input,select,button{
  font:inherit;
  border:1px solid #aabfd5;
  border-radius:8px;
  padding:10px 14px;
  min-height:46px
}
button{
  cursor:pointer;
  background:#175ba6;
  color:white;
  border-color:#175ba6
}
button:disabled{
  opacity:.55;
  cursor:wait
}
input:focus,select:focus,button:focus-visible{
  outline:3px solid #8bc5ff;
  outline-offset:2px
}
.section-heading{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:16px
}
.section-heading h1{
  margin:0
}
.application{
  border-top:1px solid #e0e8f0;
  padding:18px 0;
  display:grid;
  gap:8px
}
.application p{
  margin:0
}
.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap
}
.muted{
  color:#657789;
  font-size:14px
}
#message{
  min-height:26px;
  color:#923d16
}
#login-panel{
  max-width:560px;
  margin:auto
}
[hidden]{
  display:none!important
}
@media(max-width:600px){
  section{
  padding:18px
}
.section-heading{
  align-items:flex-start
}
header{
  gap:12px
}
.actions button{
  flex:1
}

}