/* === Daily quote sign-up box (shared by index, nobody-runs and the checklist page) ===
   Uses the site's existing CSS variables so it inherits the dark theme. */

.qsignup {
  max-width: 780px;
  margin: 40px auto;
  padding: 0 20px;
}

.qsignup-inner {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.10), rgba(107, 197, 255, 0.08));
  border: 1px solid var(--border, #1e1e32);
  border-radius: var(--radius, 12px);
  padding: 30px 30px 26px;
  text-align: center;
}

.qsignup-eyebrow {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(107, 197, 255, 0.12);
  color: var(--neon-blue, #6bc5ff);
  border: 1px solid rgba(107, 197, 255, 0.35);
  margin-bottom: 14px;
}

.qsignup-copy {
  font-size: 19px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--text-heading, #e8e8f0);
  margin: 0 auto 20px;
  max-width: 44ch;
}

.qsignup-form {
  margin: 0;
}

.qsignup-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.qsignup-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.qsignup-input {
  flex: 1 1 260px;
  max-width: 340px;
  padding: 14px 16px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border, #1e1e32);
  background: rgba(10, 10, 18, 0.75);
  color: var(--text-heading, #e8e8f0);
  font-size: 16px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.qsignup-input::placeholder {
  color: var(--text-muted, #7c7c9a);
}

.qsignup-input:focus {
  outline: none;
  border-color: var(--accent, #ff6b9d);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(255, 107, 157, 0.3));
}

.qsignup-input:disabled {
  opacity: 0.6;
}

.qsignup-btn {
  flex: 0 0 auto;
  padding: 14px 26px;
  border-radius: var(--radius-sm, 8px);
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(135deg, var(--accent, #ff6b9d), var(--neon-purple, #b06bff));
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.qsignup-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--accent-glow, rgba(255, 107, 157, 0.3));
}

.qsignup-btn:disabled {
  cursor: default;
  opacity: 0.65;
}

.qsignup-msg {
  min-height: 1.4em;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted, #7c7c9a);
}

.qsignup-msg[data-state="ok"] {
  color: var(--green, #4ade80);
}

.qsignup-msg[data-state="error"] {
  color: #fbbf24;
}

.qsignup-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted, #7c7c9a);
}

@media (max-width: 560px) {
  .qsignup-inner {
    padding: 24px 20px 22px;
  }
  .qsignup-copy {
    font-size: 17px;
  }
  .qsignup-input,
  .qsignup-btn {
    width: 100%;
    max-width: none;
    flex: 1 1 100%;
  }
}