.section-box{
  padding:20px;
  border-bottom:1px solid #eee;
}

input{
  width:100%;
  padding:12px;
  border:1px solid #ccc;
  border-radius:6px;
  box-sizing:border-box;
}

.btns{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:10px;
}

.app{
  padding:12px 20px;
  background:linear-gradient(135deg,#0a3d62,#07517d);
  color:#fff;
  border:none;
  border-radius:6px;
  cursor:pointer;
}

/* RESULT */
.result-box{
  text-align:center;
  padding:40px;
  background:#fafafa;
}

.result-face{
  font-size:40px;
  font-family:monospace;
  background:#fff;
  padding:25px;
  border-radius:12px;
  display:inline-block;
  min-width:250px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

/* PANEL */
.panel{
  padding:20px;
}

.row-title{
  display:flex;
  justify-content:space-between;
  font-weight:bold;
  margin-bottom:10px;
}

.scroll-row{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:10px;
}

.btn-item{
  padding:12px;
  min-width:70px;
  border-radius:10px;
  border:1px solid #ddd;
  background:#f8f8f8;
  font-family:monospace;
  cursor:pointer;
  white-space:nowrap;
  transition:0.2s;
}

.btn-item.active{
  background:#0a3d62;
  color:#fff;
  border-color:#0a3d62;
}


@media(max-width:500px){

  .section-box{
    padding:0px;
    background-color: transparent;
    border:none;
  }

}