#htmlF #app-container {
  display:flex;
  flex-direction:column;
}

#htmlF .main-controls {
  display:flex;
  justify-content:center;
  gap:15px;
  padding:15px 20px;
  flex-shrink:0;
  background-color:#ffffff;
}

#htmlF .main-controls button {
  padding:10px 20px;
  font-size:1rem;
  font-weight:600;
  border:none;
  border-radius:6px;
  cursor:pointer;
  transition:background-color 0.3s ease,transform 0.1s;
}

#htmlF #format-button {
  background-color:#007bff;
  color:white;
}

#htmlF #copy-button {
  background-color:#6c757d;
  color:white;
}

#htmlF #status-message {
  text-align:center;
  font-style:italic;
  color:#dc3545;
  padding:5px 0;
  font-size:0.9rem;
}

#htmlF .view-tabs {
  display:flex;
  width:100%;
  flex-shrink:0;
  background-color:#f0f0f0;
}

#htmlF .view-tabs button {
  flex:1;
  padding:12px 10px;
  border:none;
  background-color:#f0f0f0;
  color:#343a40;
  font-size:1rem;
  cursor:pointer;
  transition:background-color 0.3s;
  border-radius:0;
}

#htmlF .view-tabs button.active {
  background-color:#007bff;
  color:#ffffff;
  font-weight:bold;
}

#htmlF .input-area,
  #htmlF .output-area {
  width:100%;
  height:100%;
  display:none;
}

#htmlF .input-area.active,
  #htmlF .output-area.active {
  display:flex;
  flex-direction:column;
}

#htmlF textarea {
    width: 100%;
    flex-grow: 1;
    padding: 15px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 0.9rem;
    line-height: 1.5;
    resize: none;
    tab-size: 4;
    -moz-tab-size: 4;
    white-space: pre;
    margin: 20px 0 30px;
}

#htmlF #html-output {
  background-color:#e9ecef;
  color:#343a40;
}

@media (min-width:768px) {

  #htmlF .view-tabs {
    display:none;
  }

  #htmlF .input-area,
    #htmlF .output-area {
    display:flex !important;
    flex:1;
    padding-top:25px;
    position:relative;
  }

  #htmlF .input-area::before,
    #htmlF .output-area::before {
    content:attr(data-label);
    position:absolute;
    top:0;
    font-weight:bold;
    font-size:1.1rem;
    color:#343a40;
  }
}