body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #121212;
  color: #e0e0e0;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

h1, h2 { color: #ffffff; text-align: center; }

/* Navigation Tabs */
.tab-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.tab-btn {
  flex: 1;
  padding: 10px 4px;
  background-color: #222;
  border: 1px solid #444;
  color: #888;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.tab-btn.active {
  background-color: #00e676;
  color: #000;
  font-weight: bold;
  border-color: #00e676;
}

/* Tab Panels */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Inputs and Forms */
label { display: block; margin-top: 15px; font-weight: bold; }
input, select {
  width: 100%;
  padding: 12px;
  margin-top: 6px;
  border-radius: 6px;
  border: 1px solid #333;
  background: #1e1e1e;
  color: #fff;
  font-size: 16px;
  box-sizing: border-box;
}

/* Results Box */
.results {
  background-color: #1e1e1e;
  border-left: 4px solid #00e676;
  padding: 15px;
  margin-top: 20px;
  border-radius: 4px;
}

.results p { margin: 8px 0; font-size: 16px; }
.results span { font-weight: bold; color: #00e676; }
ul { padding-left: 20px; }
li { margin-bottom: 8px; }
.note, .tip { font-size: 13px; color: #aaa; }