#auth-overlay, #annotate-modal {
  position: fixed; inset: 0; background: rgba(10,12,18,0.78);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
#auth-overlay[hidden], #annotate-modal[hidden] { display: none; }

.auth-card, .annotate-card {
  background: #151923; color: #e6e9ef;
  border: 1px solid #2a3142; border-radius: 8px;
  padding: 1.5rem; width: 100%; max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.annotate-card { max-width: 640px; max-height: 85vh; overflow-y: auto; }

.auth-card h2, .annotate-card h2 { margin: 0 0 1rem; font-size: 1.25rem; }

.auth-tabs { display: flex; gap: 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid #2a3142; }
.auth-tab {
  background: none; border: none; color: #7a8294;
  padding: 0.5rem 0.75rem; cursor: pointer; font: inherit;
  border-bottom: 2px solid transparent;
}
.auth-tab.active { color: #e6e9ef; border-bottom-color: #4c9eff; }

.auth-form { display: flex; flex-direction: column; gap: 0.75rem; }
.auth-form[hidden] { display: none; }
.auth-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: #a6adbd; }
.auth-form input, .auth-form select {
  background: #0e1118; color: #e6e9ef;
  border: 1px solid #2a3142; border-radius: 4px;
  padding: 0.5rem 0.625rem; font: inherit;
}
.auth-form input:focus, .auth-form select:focus { outline: none; border-color: #4c9eff; }
.auth-form button[type="submit"] {
  background: #4c9eff; color: #0a0c12;
  border: none; border-radius: 4px;
  padding: 0.625rem 1rem; font: inherit; font-weight: 600;
  cursor: pointer; margin-top: 0.25rem;
}
.auth-form button[type="submit"]:hover { background: #6aafff; }
.auth-error { color: #ff6a6a; font-size: 0.85rem; min-height: 1em; }

.annotate-header { display: flex; align-items: center; justify-content: space-between; }
#annotate-close {
  background: none; border: none; color: #7a8294; font-size: 1.25rem; cursor: pointer;
}
#annotate-form { display: flex; flex-direction: column; gap: 0.75rem; }
#annotate-form .annotate-row { display: flex; gap: 0.75rem; }
#annotate-form .annotate-row label { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: #a6adbd; }
#annotate-form input, #annotate-form select {
  background: #0e1118; color: #e6e9ef;
  border: 1px solid #2a3142; border-radius: 4px;
  padding: 0.4rem 0.5rem; font: inherit;
}
#annotate-form button[type="submit"] {
  background: #4c9eff; color: #0a0c12; border: none; border-radius: 4px;
  padding: 0.5rem 1rem; font-weight: 600; cursor: pointer;
  align-self: flex-start;
}

#annotate-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ann-item {
  background: #0e1118; border: 1px solid #2a3142; border-radius: 4px;
  padding: 0.625rem 0.75rem; font-size: 0.85rem;
}
.ann-item .ann-head { display: flex; gap: 0.5rem; align-items: center; color: #a6adbd; font-size: 0.75rem; }
.ann-item .ann-head strong { color: #e6e9ef; font-size: 0.9rem; }
.ann-item .ann-dir-bull { color: #4ade80; }
.ann-item .ann-dir-bear { color: #ff6a6a; }
.ann-item .ann-dir-neutral { color: #a6adbd; }
.ann-item .ann-note { margin-top: 0.25rem; color: #e6e9ef; }
.ann-item .ann-renew {
  background: transparent; color: #4c9eff; border: 1px solid #4c9eff;
  border-radius: 3px; padding: 0.2rem 0.5rem; font-size: 0.75rem; cursor: pointer; margin-top: 0.25rem;
}

#open-annotate {
  background: transparent; color: #4c9eff; border: 1px solid #4c9eff;
  border-radius: 3px; padding: 0.25rem 0.625rem; cursor: pointer; font: inherit; font-size: 0.85rem;
}
#open-annotate:hover { background: rgba(76,158,255,0.1); }