/* Word Counter — Tool-specific styles */

.page { padding: 40px 20px; max-width: 900px; margin: 0 auto; }
.page h1 { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.page .subtitle { color: #888; margin-bottom: 20px; font-size: 14px; }

/* Stats bar */
.stats-bar {
  display: flex; gap: 4px; margin-bottom: 16px;
  background: #141414; border: 1px solid #262626; border-radius: 12px;
  padding: 16px 8px; justify-content: space-around;
}
.stat { text-align: center; flex: 1; }
.stat-num {
  display: block; font-size: 28px; font-weight: 700; color: #fff;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  line-height: 1.2;
}
.stat-label {
  display: block; font-size: 11px; color: #666;
  text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px;
}

/* Textarea */
textarea {
  width: 100%; min-height: 300px; background: #0d0d0d; border: 1px solid #2a2a2a;
  border-radius: 8px; color: #e1e1e1;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px; line-height: 1.7; padding: 16px; resize: vertical; outline: none;
  transition: border-color 0.2s;
}
textarea:focus { border-color: #ff4444; }
textarea::placeholder { color: #444; }

/* Details bar */
.details-bar {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: 16px; padding: 12px 16px;
  background: #141414; border: 1px solid #262626; border-radius: 10px;
  font-size: 13px; color: #888;
}
.detail { white-space: nowrap; }
.detail-icon { margin-right: 2px; }
.detail-actions {
  margin-left: auto; display: flex; gap: 8px;
}
.btn-sm { padding: 6px 16px; font-size: 12px; }

@media (max-width: 600px) {
  .page { padding: 24px 12px; }
  .page h1 { font-size: 22px; }
  .stats-bar { padding: 12px 4px; gap: 2px; }
  .stat-num { font-size: 20px; }
  .stat-label { font-size: 10px; }
  .details-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .detail-actions { margin-left: 0; width: 100%; }
  .detail-actions .btn { flex: 1; }
}