/* Working Days Calculator — Tool-specific styles */
.page { padding: 40px 20px; max-width: 800px; 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; }

.mode-toggle {
  display: flex; gap: 4px;
  background: #0d0d0d;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 16px;
}
.mode-btn {
  flex: 1;
  padding: 10px 14px;
  background: transparent;
  color: #888;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
.mode-btn:hover { color: #fff; }
.mode-btn.active {
  background: #ff4444;
  color: #fff;
}
.mode-panel.hidden { display: none; }

.date-row { display: flex; gap: 12px; margin-bottom: 14px; }
.input-group { flex: 1; }
.input-group label {
  display: block; font-size: 12px; color: #aaa;
  margin-bottom: 6px; font-weight: 500;
}
.input-group input[type=date], .input-group textarea {
  width: 100%; padding: 10px 12px;
  background: #0d0d0d; color: #fff;
  border: 1px solid #2a2a2a; border-radius: 6px;
  font-size: 14px;
  font-family: 'SF Mono', Menlo, monospace;
}
.input-group input:focus, .input-group textarea:focus { border-color: #ff4444; outline: none; }

.opt-row { margin-bottom: 12px; }
.opt-row label {
  display: block; font-size: 12px; color: #aaa;
  margin-bottom: 6px; font-weight: 500;
}
.opt-row textarea {
  width: 100%; min-height: 80px; padding: 10px 12px;
  background: #0d0d0d; color: #fff;
  border: 1px solid #2a2a2a; border-radius: 6px;
  font-size: 13px;
  font-family: 'SF Mono', Menlo, monospace;
  resize: vertical;
}
.checkbox-label {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13px; color: #ccc;
}
.checkbox-label input { accent-color: #ff4444; }

.results {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-top: 18px;
}
.results-3 { grid-template-columns: repeat(3, 1fr); margin-top: 10px; }
.result-card.wide {
  grid-column: 1 / -1;
  padding: 22px;
}
.result-card.wide .result-value { font-size: 32px; }
.result-card .result-sub {
  font-size: 12px; color: #888;
  margin-top: 6px; letter-spacing: 0.3px;
}
.result-card.hl .result-sub { color: #ff9999; }
.result-card {
  padding: 14px;
  background: #0d0d0d; border: 1px solid #2a2a2a;
  border-radius: 8px; text-align: center;
}
.result-card.hl { border-color: #ff4444; background: rgba(255,68,68,0.05); }
.result-label { font-size: 10px; color: #888; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.result-value {
  font-size: 26px; font-weight: 700; color: #fff;
  font-family: 'SF Mono', Menlo, monospace;
}
.result-card.hl .result-value { color: #ff6666; }

@media (max-width: 600px) {
  .page { padding: 24px 12px; }
  .page h1 { font-size: 22px; }
  .date-row { flex-direction: column; }
  .results { grid-template-columns: 1fr 1fr; }
  .results-3 { grid-template-columns: 1fr 1fr; }
  .result-card.wide .result-value { font-size: 26px; }
  .mode-btn { padding: 8px 10px; font-size: 12px; }
}