/* Base reset & layout */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Segoe UI", Arial, sans-serif; background: #f7f7f8; color: #111; line-height: 1.5; }
.container { max-width: 700px; margin: 0 auto; padding: 15px; }

/* Header */
.header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
.logo { font-weight: bold; font-size: 1.5em; color: #007BFF; }
.title { font-weight: bold; font-size: 1.2em; }
.sub { font-size: 0.9em; color: #555; }

/* Controls */
.controls { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.btn { padding: 6px 12px; border: none; border-radius: 4px; background: #007BFF; color: #fff; cursor: pointer; font-size: 0.9em; }
.btn:hover { background: #0056b3; }

/* Breaking alert */
#hm-breaking {
  display: none;
  padding: 10px 12px;
  margin-bottom: 12px;
  color: #b71c1c;
  font-weight: bold;
  border-left: 4px solid #b71c1c;
  background: #fdecea;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* Feed updates */
#hm-feed { display: flex; flex-direction: column; gap: 12px; }
.update {
  padding: 12px 14px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  word-wrap: break-word;
}
.update.visible { opacity: 1; transform: translateY(0); }
.update.breaking { border-left: 4px solid #b71c1c; background: #fff5f5; }
.update small { color: #555; font-size: 0.8em; margin-top: 4px; display: block; }

/* Animations */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(183,28,28,0.5); }
  70% { box-shadow: 0 0 10px 5px rgba(183,28,28,0.2); }
  100% { box-shadow: 0 0 0 0 rgba(183,28,28,0); }
}
.update.breaking.pulse { animation: pulse 1.2s ease-out 1; }

@keyframes flash {
  0% { background-color: #e0f7ff; }
  50% { background-color: #ffffff; }
  100% { background-color: #ffffff; }
}
.update.flash { animation: flash 1s ease-out 1; }

/* Tip card */
.card.meta { background: #fff; padding: 12px; border-radius: 6px; border: 1px solid #e0e0e0; margin-top: 12px; font-size: 0.9em; }

/* Footer */
footer { text-align: center; font-size: 0.8em; color: #666; margin-top: 15px; }

/* Mobile adjustments */
@media (max-width: 600px){
  .header { align-items: flex-start; }
  .controls { justify-content: flex-start; }
  .update { padding: 10px 12px; }
  #hm-breaking { font-size: 0.95em; padding: 8px 10px; }
}