/* =========================
   BASE
========================= */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  color: #000;
}

/* =========================
   HEADER & STATS
========================= */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.top-bar h1 {
  margin: 0;
  font-size: 20px;
}

.stats-bar {
  display: flex;
  justify-content: space-between;
  padding: 8px 20px;
  font-size: 14px;
}

/* =========================
   LAYOUT
========================= */
.layout {
  display: flex;
  max-width: 1400px;
  margin: auto;
  gap: 10px;
}

/* =========================
   ADS
========================= */
.ad-box {
  width: 180px;
  border: 2px dashed #ccc;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-placeholder {
  color: #777;
  font-size: 14px;
}

/* =========================
   EDITOR
========================= */
.editor-wrapper {
  flex: 1;
  background: #fff;
  border: 3px solid #000;
}

#editor {
  min-height: 56vh;
  padding: 14px;
  outline: none;
  font-size: 14px;
}

/* =========================
   CONTROLS
========================= */
.controls {
  max-width: 1400px;
  margin: 12px auto;
  text-align: center;
  position: sticky;
  bottom: 0;
  background: #f5f5f5;
  padding: 8px 0;
  z-index: 10;
}

.group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

/* =========================
   BUTTONS
========================= */
.controls button {
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #fff;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.controls button:hover {
  filter: brightness(1.1);
}

.controls button:active {
  transform: scale(0.96);
}

/* =========================
   FONT SIZE CONTROLS
========================= */
.font-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
}

.font-controls button {
  background: #495057; /* closer to toolbar tone */
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
}

#fontSizeLabel {
  font-size: 13px;
  color: #333;
  min-width: 36px;
  text-align: center;
}

.dark #fontSizeLabel {
  color: #ddd;
}

/* Button colors */
#copyBtn { background: #6c757d; }
#boldBtn { background: #0d6efd; }
#italicBtn { background: #6610f2; }
#underlineBtn { background: #198754; }
#resetFormatBtn { background: #dc3545; }
#upperBtn { background: #fd7e14; }
#lowerBtn { background: #20c997; }
#capWordsBtn { background: #0dcaf0; }
#capSentenceBtn { background: #6f42c1; }

/* =========================
   SEO TEXT
========================= */
.seo-text {
  max-width: 900px;
  margin: 20px auto;
  font-size: 13px;
  color: #666;
  text-align: center;
}

/* =========================
   DARK MODE (IMPROVED)
========================= */
.dark {
  background: #121212;
  color: #eaeaea;
}

.dark .top-bar,
.dark .stats-bar {
  background: #181818;
  color: #ffffff;
}

.dark .editor-wrapper {
  background: #0f0f0f;
  border-color: #666;
}

.dark #editor {
  background: #0f0f0f;
  color: #f5f5f5;
}

.dark .ad-box {
  border-color: #777;
}

.dark .ad-placeholder {
  color: #bbb;
}

.dark .controls {
  background: #181818;
  border-top: 1px solid #333;
}

.dark .seo-text {
  color: #aaa;
}

.dark button {
  filter: brightness(1.15);
}