style.css

/* style.css - small custom additions for index.html */

/* simple show/hide for pages */
.page-content { display: none; }
.page-content.active { display: block; }

/* result box for showing results / error */
.result-box {
  display: block;
  background: rgba(255,255,255,0.9);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-top: 0.75rem;
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
  color: #0f172a;
  word-break: break-word;
}

/* dark-mode adjustments */
.dark .result-box {
  background: rgba(15,23,42,0.55);
  color: #e6eef8;
}

/* small disabled button look */
.btn-disabled { cursor: not-allowed; opacity: 0.6; }

/* utility for small spinner hide/show (we toggle .hidden in JS) */
.hidden { display: none !important; }

/* responsive image */
img.rounded-lg { max-width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto; }

/* make forms look slightly nicer on small screens */
input[type="text"]::placeholder {
  color: #9ca3af;
}

/* accessible focus ring */
:focus {
  outline: 2px solid rgba(59,130,246,0.5);
  outline-offset: 2px;
}