body {
  background: linear-gradient(135deg, #f8fafc 0%, #e9ecef 100%);
  font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
  color: #222;
}
.container {
  max-width: 700px;
  margin: 2.5rem auto;
  background: linear-gradient(135deg, #f8fafc 60%, #e3e9f7 100%);
  border-radius: 18px;
  box-shadow: 0 4px 32px 0 #0002, 0 1.5px 6px #0001;
  padding: 2.2rem 1.2rem;
}

h1, h2 {
  font-weight: 700;
  letter-spacing: 0.01em;
}

textarea, input[type="number"], input[type="text"] {
  font-family: 'Fira Mono', 'Consolas', monospace;
  font-size: 1.08rem;
  border-radius: 8px;
  border: 1.5px solid #dee2e6;
  background: #f8fafc;
  transition: border-color 0.2s;
}
textarea:focus, input[type="number"]:focus, input[type="text"]:focus {
  border-color: #0d6efd;
  outline: none;
  background: #fff;
}

.input-group .btn {
  border-radius: 8px !important;
  font-weight: 500;
  background: #f1f3f5;
  border: 1.5px solid #dee2e6;
  color: #0d6efd;
  transition: background 0.2s, color 0.2s;
}
.input-group .btn:hover, .input-group .btn:focus {
  background: #e7f1ff;
  color: #084298;
}
.btn-primary, .btn-success {
  border-radius: 8px;
  font-weight: 600;
  font-size: 1.08rem;
  padding: 0.5rem 1.2rem;
  box-shadow: 0 1px 4px #0001;
  border: none;
}
.btn-primary {
  background: linear-gradient(90deg, #0d6efd 80%, #4f8cff 100%);
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(90deg, #0b5ed7 80%, #3a7be0 100%);
}
.btn-success {
  background: linear-gradient(90deg, #198754 80%, #43c59e 100%);
}
.btn-success:hover, .btn-success:focus {
  background: linear-gradient(90deg, #157347 80%, #2fa97c 100%);
}

.result-box {
  background: linear-gradient(90deg, #e9f7ef 60%, #f8fafc 100%);
  border-radius: 10px;
  padding: 1.1rem 1rem;
  margin-top: 1rem;
  font-size: 1.08rem;
  box-shadow: 0 1px 6px #0001;
}
.alert-primary {
  background: linear-gradient(90deg, #e7f1ff 80%, #fff 100%);
  border-radius: 12px;
  border: 1.5px solid #b6d4fe;
  box-shadow: 0 1px 6px #0001;
}
.bg-light {
  background: #f8fafc !important;
}

.form-label, .form-text {
  font-size: 1.04rem;
}

footer {
  background: #181a1b;
  color: #eee;
  padding: 2.2rem 0 1.2rem 0;
  margin-top: 3rem;
}
footer h2 {
  color: #fff;
  font-size: 2em;
  font-weight: 500;
  margin-bottom: 0.7em;
}
footer a {
  color: #7ecbff;
  text-decoration: underline;
}
footer ul {
  list-style: none;
  padding-left: 0;
  font-size: 1.1em;
}

@media (max-width: 600px) {
  .container {
    max-width: 100vw;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0.7rem 0.1rem;
  }
  h1, h2 { font-size: 1.2rem; }
  .alert { font-size: 0.98rem; padding: 0.7rem 0.5rem; }
  .form-label, .form-text { font-size: 0.98rem; }
  textarea, input[type="number"], input[type="text"] {
    font-size: 1rem;
  }
  .input-group { flex-direction: row; }
  .input-group .form-control, .input-group .btn {
    font-size: 1rem;
    min-width: 0;
  }
  .row.mb-3 { flex-direction: column; }
  .col { width: 100%; margin-bottom: 0.7rem; }
}