/* Ensure [hidden] always wins regardless of display rules in this file */
[hidden] { display: none !important; }

/* ── Marketing pages header (overview.html, features.html) ── */

.ov-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(4,4,14,0.70);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--border);
}
.ov-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ov-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.ov-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ov-nav-link {
  display: inline-flex;
  align-items: center;
  height: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.ov-nav-link.active { background: rgba(91,94,226,0.18); border-color: rgba(91,94,226,0.40); color: rgba(167,139,250,0.95); }
.ov-phase-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.90);
  border: 1px solid rgba(255,255,255,0.30);
  padding: 0 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.ov-staging-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(253,230,138,0.9);
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.35);
  padding: 0 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.ov-version-badge {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .03em;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}
.ov-back-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 0 10px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.ov-whats-new-link {
  display: inline-flex;
  align-items: center;
  height: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.90);
  border: 1px solid rgba(255,255,255,0.30);
  padding: 0 10px;
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
.ov-back-pill:hover,
.ov-nav-link:hover,
.ov-whats-new-link:hover {
  background: rgba(91,94,226,0.25);
  border-color: rgba(91,94,226,0.5);
  color: #fff;
}

/* ── Main app auth pills (index.html) ── */

.user-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .03em;
  color: rgba(255,255,255,0.70);
  background: var(--glass-white-dim);
  border: 1px solid var(--glass-border-dim);
  padding: 0 10px;
  border-radius: 999px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logout-pill, .history-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  appearance: none;
  -webkit-appearance: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255,255,255,0.70);
  background: var(--glass-white-dim);
  border: 1px solid var(--glass-border-dim);
  padding: 0 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.logout-pill:hover {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.40);
  color: #fca5a5;
}
.history-pill:hover {
  background: rgba(91,94,226,0.22);
  border-color: rgba(91,94,226,0.45);
  color: #fff;
}
.staging-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(253,230,138,0.9);
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.35);
  padding: 0 10px;
  border-radius: 999px;
  white-space: nowrap;
}